JavaScript 中的 `map` 函数是一个非常强大的工具，它属于数组的方法之一。`map` 函数的作用是对数组中的每一个元素执行一个定义好的函数，并返回一个新数组，该新数组包含应用这个函数后的结果。这个方法不会改变原始数组，符合函数式编程的思想。
以下是 `map` 函数的基本语法：
let newArray = array.map(function(currentValue, index, arr), thisValue)
- `array` 是需要遍历的原始数组。
- `function(currentValue, index, arr)` 是一个回调函数，数组中的每个元素都会执行这个函数：
- `currentValue` 是当前元素的值。
- `index` 是当前元素的索引值。
- `arr` 是当前元素所属的数组对象。
- `thisValue` 是可选参数，用于指定回调函数中的 `this` 值。
下面将演示 `map` 函数的几种常见用法。
基础用法：数值转换
假设我们有一个数值数组，我们想要创建一个新数组，其包含原始数组中每个数值的平方。
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(function(item) {
return item * item;
});
console.log(squares); // 输出：[1, 4, 9, 16, 25]
使用箭头函数简化
如果使用 ES6 的箭头函数，我们可以使代码更加简洁：
let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(item => item * item);
console.log(squares); // 输出：[1, 4, 9, 16, 25]
高级用法：对象数组映射
假设我们有一个包含对象的数组，我们想要提取所有对象的某个属性到一个新数组。
let users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 22 },
{ name: 'Carol', age: 30 }
];
let userNames = users.map(user => user.name);
console.log(userNames); // 输出：['Alice', 'Bob', 'Carol']
使用 `thisValue`
有时候我们需要在回调函数中使用 `this`，此时我们可以传递 `thisValue` 参数：
let numbers = [1, 2, 3, 4, 5];
let obj = {
multiply: function(item) {
return item * this.multiplier;
},
multiplier: 3
};
let multiplied = numbers.map(obj.multiply, obj);
console.log(multiplied); // 输出：[3, 6, 9, 12, 15]
在这个例子中，`this` 指向 `obj`，因此我们可以访问 `obj` 的属性 `multiplier`。
`map` 函数是前端编程中非常实用的工具，能够帮助我们优雅地处理数组数据。不过需要注意的是，`map` 函数不会对空数组进行检测，也不会改变原始数组，如果需要这些功能，可能需要使用其他数组方法，如 `filter` 或 `forEach`。