從經典的 for 循環到forEach()方法，用於迭代數據集合的各種技術和方法比比皆是。但是現在比較流行的方法是.map()方法。

.map()通過指定函數調用一個數組中每一項元素，來創建一個新數組。.map()是一種 non-mutating(非變異) 方法，它創建一個新數組，而不是隻對調用數組進行更改的 mutating(變異) 方法。這可能很難記住。

在這篇文章中，我們將探討一下 JavaScript 中.map()的 4 個值得注意的用法。讓我們開始！

在數組中的每一項元素上調用一個函數

將字符串轉換為數組

在 JavaScript 庫中用於渲染列表

重新格式化數組對象

小技巧使用案例

1. 在數組中的每一項元素上調用一個函數

如前所述，.map()接受回調函數作為其參數之一，該函數的一個重要參數是由該函數處理的項的當前值。這是一個必需

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
return sweetItem * 2
})
console.log(sweetArray) // [2, 3, 4, 5, 35]
console.log(sweeterArray) // [4, 6, 8, 10, 70]

我們可以看到，原數組sweetArray並沒有被修改，所以.map()是一種non-mutating(非變異)方法。這裡值得一提的是 forEach() 方法，它是遍歷數組，對原來的數據操作，會改變原數組。

這甚至可以進一步簡化，使其更清潔：

// 創建一個要使用的函數
const makeSweeter = sweetItem => sweetItem * 2;
// 我們有一個數組
const sweetArray = [2, 3, 4, 5, 35];
// 調用我們製作的函數。更具可讀性
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray); // [4, 6, 8, 10, 70]

擁有像sweetArray.map(makeSweeter)這樣的代碼可以讓你在跳轉到這段代碼時更具可讀性。

將字符串轉換為數組

已知的.map()屬於 Array 原型。 我們如何使用它將字符串轉換為數組。 不用擔心，我們不需要再開發一個方法來處理字符串，而是使用特殊的.call()方法。

JavaScript 中的所有內容都是對象，方法只是附加到這些對象的函數。.call()允許我們利用另一個對象的上下文。 因此，我們將數組中的.map()上下文複製到字符串。

.call()可以傳遞參數，要使用的上下文和“參數原始函數的參數”。 聽起來有點拗口？ 這是一個例子：

const name = "Chuloo"
const map = Array.prototype.map
const newName = map.call(name, eachLetter => {
return `${eachLetter}a`
})
console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]

這裡，我們只是在String上使用.map()的上下文，並傳遞了.map()所期望的函數參數。 你可以看看控制檯裡打印出來的內容。

這類似於 String 的.split()方法，不過.split()方法只能在返回數組之前修改每個單獨的字符串字符。

在 JavaScript 庫中用於渲染列表

像React 這樣的 JavaScript 庫利用.map()來渲染列表中的項目。這需要 JSX 語法，但是.map()方法包含在類似於 mustache 的 JSX 語法中。這是 React 組件的一個很好的例子。

import React from "react";
import ReactDOM from "react-dom";
const names = ["john", "sean", "mike", "jean", "chris"]; 

const NamesList = () => (

{names.map(name =>

{name}

)}

); const rootElement = document.getElementById("root"); ReactDOM.render(

, rootElement);

如果你不熟悉 React ，那麼我告訴這是 React 中的一個簡單的無狀態組件，它使用列表渲染div。 使用.map()渲染單個列表項以迭代最初創建的names數組。 此組件使用 ReactDOM 渲染 ID為 root 的 DOM 元素 。

重新格式化數組對象

如何處理數組中的對象？.map()可用於迭代數組中的對象，並以與傳統數組類似的方式， 修改每個單獨對象的內容 並返回一個新數組。 這個修改是基於回調函數中返回的內容來完成的。這裡有一個例子:

const myUsers = [
{ name: 'chuloo', likes: 'grilled chicken' },
{ name: 'chris', likes: 'cold beer' },
{ name: 'sam', likes: 'fish biscuits' }
]
const usersByFood = myUsers.map(item => {
const container = {};
container[item.name] = item.likes;
container.age = item.name.length * 10;
return container;
})
console.log(usersByFood);
// [{chuloo: "grilled chicken", age: 60}, {chris: "cold beer", age: 50}, {sam: "fish biscuits", age: 30}] 

我們所做的就是使用括號和點符號簡單地修改數組中的每個對象。這個用例可以用於在前端應用程序上保存或解析之前處理或壓縮接收到的數據。

小技巧使用案例

通常情況下，.map()方法中的 callback 函數只需要接受一個參數，就是正在被遍歷的數組元素本身。但這並不意味著 map 只給 callback 傳了一個參數。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。 生成新數組元素的 callback 函數，有 三個參數：

currentValue – callback 的第一個參數，數組中正在處理的當前元素，最常用的參數。

index – callback 的第二個參數，數組中正在處理的當前元素的索引。

array – callback 的第三個參數，map 方法被調用的數組。

來看一下例子：

// 下面的語句返回什麼呢:
["1", "2", "3"].map(parseInt);
// 你可能覺的會是[1, 2, 3]
// 但實際的結果是 [1, NaN, NaN]
// 通常使用parseInt時,只需要傳遞一個參數. 

// 但實際上,parseInt可以有兩個參數.第二個參數是進制數.
// 可以通過語句"alert(parseInt.length)===2"來驗證.
// map方法在調用callback函數時,會給它傳遞三個參數:當前正在遍歷的元素, 
// 元素索引, 原數組本身.
// 第三個參數parseInt會忽視, 但第二個參數不會,也就是說,
// parseInt把傳過來的索引值當成進制數來使用.從而返回了NaN.
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的結果
// 也可以使用簡單的箭頭函數，結果同上
['1', '2', '3'].map( str => parseInt(str) );
// 一個更簡單的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 與`parseInt` 不同，下面的結果會返回浮點數或指數:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]

還有一個非常實用的小技巧，像.map()，.reduce(),.filter()這些方法支持鏈式調用。例如：

var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var result = myArr
.map(function(element) {
// 數值大於5的數值視為5
if (element > 5)
return 5;
return element;
})
.reduce(function(prev, element) {
// 與之前的數值加總，回傳後代入下一輪的處理 

return prev + element;
}, 0);
// 40
console.log(result);

小結

在這篇文章中，我們研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是，與其他方法結合使用時， .map() 的函數可以得到強大的擴展和利用。 嘗試找出更多用例。 在評論區留下您的意見，問題和反饋，我們將不勝感激！

需要前端資料或者想學前端的小夥伴可以私信“前端”“前端資料”免費獲取

閱讀更多 前端全棧開發學習 的文章

關鍵字: 技術 JavaScript 參數