JavaScript 数组 map() 方法

JavaScript map() 语法

map() 是 JavaScript 数组的一个方法，它用于遍历一个数组。map() 方法遍历数组的同时，会在回调函数中对每个元素进行 “相同操作”。然后将 “处理后的元素” 添加到新数组中，最终返回一个新数组。

语法：

arr.map(callbackFn, thisArg)

说明：

map() 方法可以接收以下 2 个参数。

callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

element（必选）：表示当前处理的数组元素。
index（可选）：表示当前处理的元素下标。
array（可选）：表示当前数组对象（代表整个数组）。

注意:

map() 方法不会修改原数组，而是返回一个新数组。
对于没有值的数组元素（即空槽元素），不会执行 map() 方法的回调函数。

数组的遍历方法

对于 JavaScript 数组来说，它主要有以下 5 种遍历方法。其中，map()、filter()、reduce()、reduceRight() 这 4 种可以看成是对 forEach() 方法的进一步封装。

forEach()：只会单纯遍历数组，在回调函数中对每一个元素进行 “相同操作”。它不会返回任何值，只是操作完就算了。
map()：遍历数组的同时，在回调函数中对每个元素进行 “相同操作”。然后将 “处理后的元素” 添加到新数组中，最终返回一个新数组。
filter()：遍历数组的同时，在回调函数中对每个元素进行 “过滤操作”。然后将 “符合条件的元素” 添加到新数组中，最终返回一个新数组。
reduce()：遍历数组的同时，在回调函数中对每个元素进行 “累积操作”。最终返回一个值（这个值不一定是数组）。
reduceRight()：功能与 reduce() 方法相同，只不过 reduce() 是从左到右操作数组元素，而 reduceRight() 是从右到左操作数组元素。

JavaScript map() 摘要

属于	JavaScript Array 对象
使用频率	高
修改原数组	否
官方文档	查看
MDN	查看

JavaScript map() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript map() 方法是如何使用的。

示例 1：map() 基本用法

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = arr.map(function(element) {
    return element * 2;
});
console.log(resultArr);

运行结果如下。

[6, 18, 2, 24, 100, 42]

分析：

map() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 map() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
const resultArr = arr.map(function(element) {
    return element * 2;
});

// 方式2：使用箭头函数
const resultArr = arr.map(element => element * 2);

上面例子使用 map() 方法来使得数组每个元素的值都乘以 2，然后返回一个新数组。对于 map() 方法实现的功能，使用 forEach() 方法同样也可以实现，上面例子等价于：

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = [];
arr.forEach((element) => {
    resultArr.push(element * 2);
});
console.log(resultArr);

可能有些小伙伴会问：“map() 方法能不能实现 filter() 方法的过滤操作呢？” 实际上是不可以的，我们可以看看下面这个例子。

示例 2：map() 不能代替 filter()

运行代码

const arr = [3, 9, 1, 12, 50, 21];
const resultArr = arr.map(element => element > 10);
console.log(resultArr);

运行结果如下。

[false, false, false, true, true, true]

分析：

从运行结果可以看出，map() 方法只会将每一个元素进行相同的 “element>10” 判断操作，并且将判断结果返回到新数组中去，并不能实现过滤操作。

示例 3：map() 的参数是内置对象的方法

运行代码

const arr = [1, 4, 9, 16, 25];
const resultArr = arr.map(Math.sqrt);
console.log(resultArr);

运行结果如下。

[ 1, 2, 3, 4, 5 ]

分析：

Math.sqrt() 方法用于求一个数的平方根。