概述

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法

// 箭头函数
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

参数

第一个参数是回调函数，回调函数有三个参数，分别表示 当前处理的元素、当前处理元素的索引、map方法调用的数组。其中第一个参数是必须的，其他两个是可选的。

第二个参数是可选的，表示执行 回调函数时被用作 this 的值。（我的理解是：回调函数中this的指向）

返回值

返回一个经过函数处理的新数组，不会改变原来的数组。

注意：返回数组的长度跟原数组一样，如果有的元素不符合回调函数中的处理规则，那这个元素会返回undefined。

例子

const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index 从 0 开始，因此 filterNumbers 为 1、2、3 和 undefined。
// filteredNumbers 是 [1, 2, 3, undefined]
// numbers 依旧是 [1, 2, 3, 4]

示例

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value}) => ({ [key]: value }));

// reformattedArray 现在是 [{1: 10}, {2: 20}, {3: 30}],

// kvArray 依然是：
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]

一些奇怪的东西

["1", "2", "3"].map(parseInt);

上面的代码，我们理想中是想返回一个都是int类型的数组[1,2,3]。

但是运行后，我们会发现，返回的是 [1, NaN, NaN]。

这是因为parseInt函数接受两个参数，第一个参数是一个表达式而第二个是回调函数的基。

上面我们说到，map中的回调函数有三个参数（当前处理的元素、当前处理元素的索引、map方法调用的数组）。parseInt接受两个参数就会造成下面这样

// parseInt(string, radix) -> map(parseInt(value, index))
/*  first iteration (index is 0): */ parseInt("1", 0); // 1
/* second iteration (index is 1): */ parseInt("2", 1); // NaN
/*  third iteration (index is 2): */ parseInt("3", 2); // NaN

解决方案

const returnInt = (element) => parseInt(element, 10);

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 实际结果是一个数字数组（如预期）

// 与上面相同，但使用简洁的箭头函数语法
['1', '2', '3'].map((str) => parseInt(str)); // [1, 2, 3]

// A simpler way to achieve the above, while avoiding the "gotcha":
['1', '2', '3'].map(Number); // [1, 2, 3]

// 但与 parseInt() 不同，Number() 还会返回一个浮点数或（解析）指数表示法：
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

// 为了进行比较，如果我们对上面的数组使用 parseInt():
['1.1', '2.2e2', '3e300'].map((str) => parseInt(str)); // [1, 2, 3]

结束语

有错的地方还请大佬们指教。

参考: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map