JavaScript 数组的 map() 方法详解

map() 方法创建一个新数组，包含对每个数组元素调用函数的结果。

示例

let numbers = [2, 4, 6, 8, 10];

// 返回数字平方的函数
function square(number) {
  return number * number;
}

// 对 numbers 列表的每个项应用 square() 函数
let square_numbers = numbers.map(square);
console.log(square_numbers);

// 输出：[ 4, 16, 36, 64, 100 ]

map() 语法

map() 方法的语法为：

arr.map(callback(currentValue), thisArg);

这里，arr 是一个数组。

map() 参数

map() 方法接受：

• callback - 对每个数组元素调用的函数。它的返回值被添加到新数组中。它接受：

• currentValue - 数组中传递的当前元素。

thisArg（可选）- 执行回调时使用的 this 的值。默认为 undefined。

map() 返回值

• 返回一个新数组，其中的元素为每个元素的 callback 函数的返回值。

注释：

• map() 不改变原始数组。
• map() 按顺序为每个数组元素执行一次 callback。
• map() 不会对没有值的数组元素执行 callback。

示例 1：使用自定义函数映射数组元素

const prices = [1800, 2000, 3000, 5000, 500, 8000];

let newPrices = prices.map(Math.sqrt);
// [ 42.42640687119285, 44.721359549995796, 54.772255750516614,
// 70.71067811865476, 22.360679774997898, 89.44271909999159 ]
console.log(newPrices);

// 自定义箭头函数
const string = "JavaScript";
const stringArr = string.split(""); // 字符串的每个字符组成的数组

let asciiArr = stringArr.map((x) => x.charCodeAt(0));

// map() 不改变原始数组
console.log(stringArr); // ['J', 'a', 'v', 'a','S', 'c', 'r', 'i', 'p', 't']

console.log(asciiArr); // [ 74, 97, 118, 97, 83, 99, 114, 105, 112, 116 ]

输出

[
  42.42640687119285, 44.721359549995796, 54.772255750516614, 70.71067811865476,
  22.360679774997898, 89.44271909999159,
][("J", "a", "v", "a", "S", "c", "r", "i", "p", "t")][
  (74, 97, 118, 97, 83, 99, 114, 105, 112, 116)
];

## 示例 2：数组中的对象元素使用 map()

```javascript
const employees = [
  { name: "Adam", salary: 5000, bonus: 500, tax: 1000 },
  { name: "Noah", salary: 8000, bonus: 1500, tax: 2500 },
  { name: "Fabiano", salary: 1500, bonus: 500, tax: 200 },
  { name: "Alireza", salary: 4500, bonus: 1000, tax: 900 },
];

// 计算员工应得的净金额
const calcAmt = (obj) => {
  newObj = {};
  newObj.name = obj.name;
  newObj.netEarning = obj.salary + obj.bonus - obj.tax;
  return newObj;
};

let newArr = employees.map(calcAmt);
console.log(newArr);

输出

[
 { name: 'Adam', netEarning: 4500 },
 { name: 'Noah', netEarning: 7000 },
 { name: 'Fabiano', netEarning: 1800 },
 { name: 'Alireza', netEarning: 4600 }
]

注意：如果 callback 函数返回 undefined 或什么都不返回，map() 会将 undefined 分配给新数组。

推荐阅读： JavaScript 数组 filter()