在上节，我们学习如何使用 JavaScript Array  filter()方法过滤数组中的元素，错过的小伙伴可以点击文章《 【JavaScript 教程】第六章 数组11— filter() ：过滤数组中的元素》进行学习。

那么，在今天的教程中，我们一起来学习如何使用 JavaScript Array map() 方法来转换数组中的元素。

JavaScript Array map() 方法介绍

有时，我们需要获取一个数组，转换其元素，并将结果包含在一个新数组中。

通常，我们使用 for 循环遍历元素，转换每个单独的元素，并将结果推送到新数组中。

让我们看一个例子。

假设我们有一个数字数组，其中每个元素表示圆的半径，如下所示：




let circles = [
    10, 30, 50
];

下面说明如何计算每个圆的面积并将结果推送到新数组中。




let areas = []; // to store areas of circles
let area = 0;
for (let i = 0; i < circles.length; i++) {
    area = Math.floor(Math.PI * circles[i] * circles[i]);
    areas.push(area);
}
console.log(areas);

输出：



完成这个需要相当多的代码。

从 ES5 开始，JavaScript Array 类型提供了 map() 方法，允许您以更简洁的方式转换数组元素。




function circleArea(radius) {
    return Math.floor(Math.PI * radius * radius);
}
let areas = circles.map(circleArea);
console.log(areas);

输出：




[314, 2827, 7853]

程序它是怎么运行的。

  • 首先，定义一个计算圆面积的函数。
  • 然后，将 circleArea 函数传递给 map() 方法。map() 方法将对 circles 数组的每个元素调用 circleArea 函数，并返回一个包含已转换元素的新数组。

为了使它更短，您可以在 map() 方法中传递一个匿名函数，如下所示。




let areas = circles.map(function(radius){
    return Math.floor(Math.PI * radius * radius);
});
console.log(areas);

此外，您可以使用 ES6 中的箭头函数以更简洁的代码实现相同的结果：




let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);

JavaScript Array map() 方法详解

下面说明该map()方法。




arrayObject.map(callback[,contextObject]);

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

map() 方法接受两个命名参数，第一个是必需的，而第二个是可选的。

与其他迭代方法如every()、some()、filter()、forEach()和sort()类似，callback()函数的形式如下：




function callback(currentElement,index,array){
  // ... 
}

callback() 函数接受三个参数：

  • currentElement 是正在处理的数组的当前元素。
  • index 是 currentElement 的索引。
  • array 是被遍历的数组对象。

currentElement 是必需的，而索引和数组参数是可选的。

如果将 contextObject 传递给 map() 方法，则可以使用 this 关键字在 callback() 函数中引用 contextObject。

重要的是要注意 map() 方法不会更改原始数组，它会创建一个包含所有已由回调函数转换的元素的新数组。

更多 JavaScript 数组 map() 示例

下面的示例演示如何使用 Math 类型的内置方法作为 callback() 函数来转换数字数组。




let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);

输出：




[4, 5, 6]

新数组包含 numbers 数组中数字的平方根。

总结

在本教程中，我们学习了如何使用 JavaScript Array map() 方法根据提供的函数转换数组元素。