一、数组map方法
在JavaScript中，数组是非常常用的数据类型之一，为了方便开发者对数组进行处理，ES5新增了数组map方法。它作用于数组的每一个元素，返回一个新数组，并且不改变原数组。map方法接收一个回调函数作为参数，回调函数的返回值将会作为新数组的每一个元素。
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]
上述代码中，原数组arr中的每一个元素都被乘以2，得到新数组newArr。
二、数组方法map用法
除了在ES5中数组原生提供的map方法，还有一些常用的数组方法会使用到map方法。比如数组的forEach、filter、reduce等方法都能用map来实现。
const arr = [1, 2, 3, 4, 5];
// forEach实现
arr.forEach((item, index, array) => {
array[index] = item * 2;
});
console.log(arr);
// Output: [2, 4, 6, 8, 10]
// map实现
const newArr = arr.map(item => item * 2);
console.log(newArr);
// Output: [2, 4, 6, 8, 10]
上述代码中，forEach和map都使用了回调函数来对数组进行遍历并对每个元素进行操作。但是，map返回了一个新数组，不改变原数组。
三、数组map应用
数组map方法可以应用于对数组元素进行处理、筛选、查找等操作。下面是一些应用场景的示例：
1. 将数组对象中某个属性提取出来组成新的数组
const arr = [{name: 'apple', count: 2}, {name: 'banana', count: 3}, {name: 'orange', count: 4}];
const newArr = arr.map(item => item.name);
console.log(newArr);
// Output: ['apple', 'banana', 'orange']
2. 将数组中的字符串元素转化成数字类型
const arr = ['1', '2', '3', '4', '5'];
const newArr = arr.map(Number);
console.log(newArr);
// Output: [1, 2, 3, 4, 5]
3. 将数组中所有元素转化成小写字母
const arr = ['APPLE', 'BANANA', 'ORANGE'];
const newArr = arr.map(item => item.toLowerCase());
console.log(newArr);
// Output: ['apple', 'banana', 'orange']
四、数组map方法的使用
数组map方法的使用要点：
- 传入的回调函数应该是一个纯函数，即没有副作用并且始终返回相同的结果。
- map方法返回的新数组长度和原数组长度相同。
- 如果数组元素为undefined，map不会调用回调函数处理该项。
- 回调函数接收三个参数：当前元素值、当前元素索引、数组本身。
五、数组map
除了数组自带的map方法，ES6中还新增了Map类型。Map类型是一个无序的键值对集合，可以使用任何值（包括对象）作为键或值。对于不需要使用到数组 index 下标的数据结构，使用 Map 会是一个更好的选择。
1. 遍历map数组
const myMap = new Map();
myMap.set(0, 'hello');
myMap.set(1, 'world');
const newArr = Array.from(myMap).map(([key, value]) => value);
console.log(newArr);
// Output: ['hello', 'world']
2. js数组的map方法
Array.prototype.map = function(callback){
let result = [];
for(let i = 0; i < this.length; i++){
result.push(callback(this[i], i, this));
}
return result;
};
让我们一起来了解一个新的方法，就是：
3. js数组对象转map对象
const arr = [['key1', 'value1'], ['key2', 'value2']];
const myMap = new Map(arr);
console.log(myMap);
// Output: Map(2) {"key1" => "value1", "key2" => "value2"}
六、map和数组效率选取
虽然数组和Map都有遍历和查找的需求，但是它们的特点不一样。如果你需要类似于“索引”的查找方式，那么使用数组可能更适合。如果你想存储键值对并且需要快速查找和遍历键值对，那么使用Map就更好。
七、小结
本文详细介绍了JavaScript中数组map方法的用法及其应用。map方法作为数组的核心功能之一，为开发者提供了更加便捷的数据处理方式。同时，本文也介绍了一些与map方法相关的小技巧，如forEach、filter、reduce方法使用map实现、Map类型的使用等。
