JavaScript map() 方法解析

有时，你可能需要对一个数组的元素进行操作，得到一个新数组。

你可以使用内置的 Array.map() 方法来代替使用循环遍历数组。

通过 Array.map() 方法，你可以遍历数组，并使用回调函数修改数组的每个元素。

例如，假设有以下数组：

let arr = [3, 4, 5, 6];

一个简单的 JavaScript 数组

假设你需要将数组的每个元素乘以 3，你可以考虑像这样使用 for 循环：

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

使用 for 循环遍历数组

实际上，你可以使用 Array.map() 方法来获得相同的结果，例如：

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

使用 map() 方法遍历数组

Array.map() 方法通常用于对元素进行一些更改，无论是乘以上面代码中的特定数字，还是执行应用程序可能需要的任何其他操作。

如何对对象数组使用 map() 方法

例如，你可能有一个对象数组，这些对象存储你的朋友的 firstName 和 lastName，如下所示：

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

一个对象数组

你可以使用 map() 方法遍历数组，并按如下方式连接 firstName 和 lastName的值：

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

使用 map() 方法遍历一个对象数组

map() 方法传递的不仅仅是一个元素。让我们看看 map() 传递给回调函数的所有参数。

map() 方法的完整语法

map() 方法的语法如下：

arr.map(function(element, index, array){  }, this);

对每个数组元素调用回调函数 function()，map() 方法将当前元素 element、当前元素的索引 index 以及整个数组对象 array 传递给它。

回调函数中的 this 参数，默认值是 undefined。例如，下面的例子将 this 的值改为 80：

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

给 map() 方法的 this 参数赋值一个数字

如果你感兴趣，也可以使用 console.log() 测试另一个参数：

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

打印检查参数的值

以上就是关于 Array.map() 方法的介绍。通常，你只会在回调函数中使用 element 参数，而忽略其余参数。我通常在日常项目中就是这样做的:)

谢谢你阅读这篇文章

你可能还对我编写的其他 JavaScript 教程感兴趣，包括如何对对象数组求和以及找到回文字符串的方法。它们是最常被问到的 JavaScript 问题。

我还有一个关于 Web 开发教程的免费订阅邮件（大部分与 JavaScript 相关）。

原文：JavaScript Map – How to Use the JS .map() Function (Array Method)，作者：Nathan Sebhastian