【JavaScript 教程】第六章 数组12— map() ：转换数组元素

英文 | https://www.javascripttutorial.net/

译文 | 杨小爱

在上节，我们学习如何使用 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() 方法根据提供的函数转换数组元素。

今天的内容就到这里了。

如果您还想学习更多关于数组的内容，请点击下文链接进行学习。

【JavaScript 教程】第六章 数组11— filter() ：过滤数组中的元素

【JavaScript 教程】第六章 数组10— sort() ：对数组中的元素进行排序

【JavaScript 教程】第六章 数组09— some() ：检查数组中是否至少有一个元素通过了测试

【JavaScript 教程】第六章 数组08— every() ：检查数组中的每个元素是否都通过了测试

【JavaScript 教程】第六章 数组07— index() ：在数组中定位一个元素

【JavaScript 教程】第六章 数组06— slice() ：复制数组元素

【JavaScript 教程】第六章 数组05— splice()：删除、插入和替换

【JavaScript 教程】第六章 数组04— JavaScript 队列

【JavaScript 教程】第六章 数组03— Stack ：使用 Array 的push()和pop()方法实现堆栈数据结构

【JavaScript 教程】第六章 数组02— Array Length：如何有效地使用数组的长度属性

【JavaScript 教程】第六章 数组01— 介绍JavaScript中的Array类型

学习更多技能

请点击下方公众号