如何在 JavaScript 中使用 Array.map() 方法
Array.prototype.map() 方法是在 ES6 (ECMAScript 2015) 中引入的，用於迭代 和 一次性操作數組的元素。該方法通過對數組中的每個元素執行給定的函數來創建一個新數組。
Array.map() 方法接受一個回調函數作為您要為數組中的每個項目調用的參數。此函數在執行完所有修改後必須返回一個值。
回調最多接受三個操作參數。第一個是迭代中的當前項，第二個是當前項在數組中的索引，第三個是數組本身。
讓我們看下面的例子：
const prices = [45, 9.99, 33, 50];
const updatedPrices = prices.map(price => '$' + price);
console.log(updatedPrices);
// ['$45', '$9.99', '$33', '$50']
正如你在上面看到的，我們使用了 map() 函數遍歷數字數組並通過添加貨幣符號將其元素轉換為字符串。 updatedPrices 變量是一個新創建的數組，其中包含對父數組中每個項目執行函數的結果。
請記住，Array.map() 是非變異 函數，這意味著它不會改變原始數組，只依賴於提供的函數的結果來創建一個新數組。
範圍 map() 處理的元素 功能在之前決定 第一次調用。如果在 map() 之後將新項目添加到數組中 開始，它們不會被回調處理。
示例
除了遍歷數組的所有元素並轉換它們之外，map() 方法可以用來做更多的事情。下面讓我們再看幾個例子。
從對像數組中提取值
map() 方法對於從對像數組中提取值非常有用。假設您有以下 JSON 數組，其中包含用戶的姓名和年齡：
const users = [
{
name: 'John Deo',
age: 35
},
{
name: 'Emma Kel',
age: 24
},
{
name: 'Kristy Adam',
age: 42
}
];
這是一個使用 map() 的示例 提取所有年齡並將它們作為新數組返回：
const ages = users.map(user => user.age);
console.log(ages);
// [35, 24, 42]
轉換對像數組
map() 方法可用於遍歷數組中的所有對象，轉換每個單獨對象的內容，並返回一個新數組。這是一個例子：
const modifiedUsers = users.map(user => {
// assign a random color to each user
user.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);
// return modified user
return user;
});
console.log(modifiedUsers);
// [
// { name: 'John Deo', age: 35, color: '#f76f4b' },
// { name: 'Emma Kel', age: 24, color: '#e05341' },
// { name: 'Kristy Adam', age: 42, color: '#48242c' }
// ]
結論
Array.map() JavaScript 中的方法用於遍歷數組的所有元素並創建一個新數組。關於 Array.map()，您應該記住以下幾點 ：
- 它為數組中的每個元素調用提供的函數並返回一個新數組。
- 不修改原始數組內容，只修改 使用調用的函數返回的值創建一個新數組。
- 在
map()之後添加到數組中的新元素 函數開始未處理。
Array.map() 該方法適用於所有現代瀏覽器以及 Internet Explorer 9 及更高版本。您可以使用 polyfill 來支持 IE6 及更高版本。
查看這篇文章，了解更多關於 JavaScript 數組及其方法的信息。
