JavaScript 数组 map：转换元素

摘要：在本教程中，您将学习如何使用 JavaScript 数组 map() 方法来转换数组中的元素。

JavaScript 数组 map() 方法介绍

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

通常，您使用 for 循环遍历元素，转换每个元素，并将结果推入新数组。

让我们来看一个例子。

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

let circles = [
    10, 30, 50
];
Code language: JavaScript (javascript)

以下演示了如何计算每个圆的面积并将结果推入一个新数组。

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);Code language: JavaScript (javascript)

输出

完成此操作需要大量的代码。

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

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

输出

[314, 2827, 7853]Code language: JSON / JSON with Comments (json)

它是如何工作的。

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

为了简化代码，您可以将一个匿名函数传递给 map() 方法，如下所示。

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

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

let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));
console.log(areas);Code language: JavaScript (javascript)

JavaScript 数组 map() 方法详解

以下演示了 map() 方法。

arrayObject.map(callback[,contextObject]);Code language: CSS (css)

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

与其他迭代方法类似，例如  every()， some()， filter()，forEach() 和  sort()，callback() 函数具有以下形式

function callback(currentElement,index,array){
  // ... 
}Code language: JavaScript (javascript)

callback() 函数接受三个参数

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

currentElement 是必需的，而 index 和 array 参数是可选的。

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

需要注意的是，map() 方法不会改变原始数组，而是创建一个新的数组，其中包含所有已被回调函数转换的元素。

更多 JavaScript 数组 map() 示例

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

let numbers = [16, 25, 36];
let results = numbers.map(Math.sqrt);
console.log(results);Code language: JavaScript (javascript)

输出

 [4, 5, 6]Code language: JSON / JSON with Comments (json)

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

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