【JavaScript 教程】第六章 數(shù)組12— map() :轉(zhuǎn)換數(shù)組元素
英文?|?https://www.javascripttutorial.net/
譯文 | 楊小愛
JavaScript Array map() 方法介紹
有時，我們需要獲取一個數(shù)組，轉(zhuǎn)換其元素，并將結(jié)果包含在一個新數(shù)組中。
通常，我們使用 for 循環(huán)遍歷元素，轉(zhuǎn)換每個單獨的元素，并將結(jié)果推送到新數(shù)組中。
讓我們看一個例子。
假設(shè)我們有一個數(shù)字數(shù)組，其中每個元素表示圓的半徑，如下所示：
let circles = [10, 30, 50];
下面說明如何計算每個圓的面積并將結(jié)果推送到新數(shù)組中。
let areas = []; // to store areas of circleslet 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() 方法，允許您以更簡潔的方式轉(zhuǎn)換數(shù)組元素。
function circleArea(radius) {return Math.floor(Math.PI * radius * radius);}let areas = circles.map(circleArea);console.log(areas);
輸出：
[314, 2827, 7853]程序它是怎么運行的。
首先，定義一個計算圓面積的函數(shù)。
然后，將 circleArea 函數(shù)傳遞給 map() 方法。map() 方法將對 circles 數(shù)組的每個元素調(diào)用 circleArea 函數(shù)，并返回一個包含已轉(zhuǎn)換元素的新數(shù)組。
為了使它更短，您可以在 map() 方法中傳遞一個匿名函數(shù)，如下所示。
let areas = circles.map(function(radius){return Math.floor(Math.PI * radius * radius);});console.log(areas);
此外，您可以使用 ES6 中的箭頭函數(shù)以更簡潔的代碼實現(xiàn)相同的結(jié)果：
let areas = circles.map(radius => Math.floor(Math.PI * radius * radius));console.log(areas);
JavaScript Array map() 方法詳解
下面說明該map()方法。
arrayObject.map(callback[,contextObject]);map() 方法對數(shù)組的每個元素調(diào)用一個回調(diào)函數(shù)，并返回一個包含結(jié)果的新數(shù)組。
map() 方法接受兩個命名參數(shù)，第一個是必需的，而第二個是可選的。
與其他迭代方法如every()、some()、filter()、forEach()和sort()類似，callback()函數(shù)的形式如下：
function callback(currentElement,index,array){// ...}
callback() 函數(shù)接受三個參數(shù)：
currentElement 是正在處理的數(shù)組的當前元素。
index 是 currentElement 的索引。
array 是被遍歷的數(shù)組對象。
currentElement 是必需的，而索引和數(shù)組參數(shù)是可選的。
如果將 contextObject 傳遞給 map() 方法，則可以使用 this 關(guān)鍵字在 callback() 函數(shù)中引用 contextObject。
重要的是要注意 map() 方法不會更改原始數(shù)組，它會創(chuàng)建一個包含所有已由回調(diào)函數(shù)轉(zhuǎn)換的元素的新數(shù)組。
更多 JavaScript 數(shù)組 map() 示例
下面的示例演示如何使用 Math 類型的內(nèi)置方法作為 callback() 函數(shù)來轉(zhuǎn)換數(shù)字數(shù)組。
let numbers = [16, 25, 36];let results = numbers.map(Math.sqrt);console.log(results);
輸出：
[4, 5, 6]新數(shù)組包含 numbers 數(shù)組中數(shù)字的平方根。
總結(jié)
在本教程中，我們學(xué)習(xí)了如何使用 JavaScript Array map() 方法根據(jù)提供的函數(shù)轉(zhuǎn)換數(shù)組元素。
今天的內(nèi)容就到這里了。
如果您還想學(xué)習(xí)更多關(guān)于數(shù)組的內(nèi)容，請點擊下文鏈接進行學(xué)習(xí)。
【JavaScript 教程】第六章 數(shù)組11— filter() ：過濾數(shù)組中的元素
【JavaScript 教程】第六章 數(shù)組10— sort() ：對數(shù)組中的元素進行排序
【JavaScript 教程】第六章 數(shù)組09— some() ：檢查數(shù)組中是否至少有一個元素通過了測試
【JavaScript 教程】第六章 數(shù)組08— every() ：檢查數(shù)組中的每個元素是否都通過了測試
【JavaScript 教程】第六章 數(shù)組07— index() ：在數(shù)組中定位一個元素
【JavaScript 教程】第六章 數(shù)組06— slice() ：復(fù)制數(shù)組元素
【JavaScript 教程】第六章 數(shù)組05— splice()：刪除、插入和替換
【JavaScript 教程】第六章 數(shù)組04— JavaScript 隊列
【JavaScript 教程】第六章 數(shù)組03— Stack ：使用 Array 的push()和pop()方法實現(xiàn)堆棧數(shù)據(jù)結(jié)構(gòu)
【JavaScript 教程】第六章 數(shù)組02— Array Length：如何有效地使用數(shù)組的長度屬性
【JavaScript 教程】第六章 數(shù)組01— 介紹JavaScript中的Array類型
學(xué)習(xí)更多技能
請點擊下方公眾號
