前端常用的js方法：map的常用方法和实际使用

Map是一组键值对结构，具有极快的查找速度。

前端的小伙伴经常要对后端返回的数据进行修改，从而达到前端的需要。其中map是常用到的对数组元素进行修改的重要方法。

map() 方法定义在JavaScript的Array中，它返回一个新的数组，数组中的元素为原始数组调用函数处理后的值。

需要注意的是：
1、map()函数不会对空数组进行检测；
2、map对象的长度不是length，而是size。
3、map()函数不会改变原始数组，它形成的是一个新的数组Map

1. map创建方法1：

let newMap = new Map([['a', 1],['b', 2],['c', 3],['x', 1],['y', 2],['z', 3],
])
console.log('newMap.size', newMap.size)
console.log('newMap', newMap)

map创建方法2：

let newMap = new Map();
newMap.set('a', 1);
newMap.set('b', 2);
newMap.set('c', 3);
newMap.set('x', 1);
newMap.set('y', 2);
newMap.set('z', 3);
newMap.set('m', 11);
newMap.set('n', 22);
console.log('newMap.size', newMap.size)
console.log('newMap', newMap)

2. Map对象的基础操作：创建、添加元素、删除元素、检测是否存在某个元素、取值…

//添加元素
let newMap = new Map();
newMap.set('a', 1);
newMap.set('b', 2);
newMap.set('c', 3);
newMap.set('x', 1);
newMap.set('y', 2);
newMap.set('z', 3);
newMap.set('m', 11);
newMap.set('n', 22);
newMap.set('q', 33); // 添加元素
console.log('newMap', newMap)

//删除指定元素
newMap.delete('a'); // 删除指定元素
console.log('newMap', newMap)

// 是否存在元素x
// newMap.has('x'); // true 是否存在元素x
console.log(newMap.has('x'))

//  取值
/newMap.get('x'); // 取值 1
console.log(newMap.get('x'))

3. map对象的遍历

//  forEach 同数组的forEach遍历，
// 三个参数分别代表：value、key、map本身。
let newMap = new Map();
newMap.set('a', 1);
newMap.set('b', 2);
newMap.set('c', 3);
newMap.set('x', 1);
newMap.set('y', 2);
newMap.set('z', 3);
newMap.set('m', 11);
newMap.set('n', 22);
newMap.forEach((value, key, self) => {console.log(key, '=>', value, '=>', self)
});

// for of 遍历出来的是一个数组，
// 其中item[0]为key，item[1]为value。
let newMap = new Map();
newMap.set('a', 1);
newMap.set('x', 1);
newMap.set('m', 11);
newMap.set('n', 22);
for (const item of newMap) {console.log(item);
}

4. map的应用——去重

let newMap = new Map();
for (let i = 0; i <= 5; i++) {newMap.set(i, i);
}
for (let j = 0; j <= 10; j++) {newMap.set(j, j);
}
console.log(newMap);
console.log(newMap.size);

i从0到5一共6项，j从0到10一共11项，那么map的长度为什么不是17呢？因为map中不允许重复值的存在，因此可以用来实现数据的去重。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！