前言
從經典的 for 循環到 forEach() 方法，用于迭代數據集合的各種技術和方法比比皆是。但是現在比較流行的方法是 .map() 方法。
.map() 通過指定函數調用一個數組中每一項元素，來創建一個新數組。 .map() 是一種 non-mutating(非變異) 方法，它創建一個新數組，而不是只對調用數組進行更改的 mutating(變異) 方法。這可能很難記住。
語法：
array.map(function(currentValue,index,arr), thisValue)
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
注意： map() 不會對空數組進行檢測。
注意： map() 不會改變原始數組。
在這篇文章中，我們將探討一下 JavaScript 中 .map() 的 4 個值得注意的用法。讓我們開始！
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) 這樣的代碼可以讓你在跳轉到這段代碼時更具可讀性。
2.將字符串轉換為數組
已知的 .map() 屬于 Array 原型。 我們如何使用它將字符串轉換為數組。 不用擔心，我們不需要再開發一個方法來處理字符串，而是使用特殊的 .call() 方法。
JavaScript 中的所有內容都是對象，方法只是附加到這些對象的函數。 .call() 允許我們利用另一個對象的上下文。 因此，我們將數組中的 .map() 上下文復制到字符串。
.call() 可以傳遞參數，要使用的上下文和“參數原始函數的參數”。 聽起來有點拗口？ 這是一個例子：
const name = "Chuloo"const map = Array.prototype.mapconst newName = map.call(name, eachLetter => {return `${eachLetter}a`})console.log(newName) // ["Ca", "ha", "ua", "la", "oa", "oa"]這里，我們只是在String上使用 .map() 的上下文，并傳遞了 .map() 所期望的函數參數。 你可以看看控制臺里打印出來的內容。
這類似于 String 的 .split() 方法，不過 .split() 方法只能在返回數組之前修改每個單獨的字符串字符。
3.在 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 = () => (<div><ul>{names.map(name => <li key={name}> {name} </li>)}</ul></div>);const rootElement = document.getElementById("root");ReactDOM.render(<NamesList />, rootElement);如果你不熟悉 React ，那么我告訴這是 React 中的一個簡單的無狀態組件，它使用列表渲染div。 使用 .map() 渲染單個列表項以迭代最初創建的 names 數組。 此組件使用 ReactDOM 渲染 ID為 root 的 DOM 元素 。
4.重新格式化數組對象
如何處理數組中的對象？ .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}]我們所做的就是使用括號和點符號簡單地修改數組中的每個對象。這個用例可以用于在前端應用程序上保存或解析之前處理或壓縮接收到的數據。
5.小技巧使用案例
通常情況下，.map() 方法中的 callback 函數只需要接受一個參數，就是正在被遍歷的數組元素本身。但這并不意味著 map 只給 callback 傳了一個參數。這個思維慣性可能會讓我們犯一個很容易犯的錯誤。 生成新數組元素的 callback 函數，有 三個參數：
來看一下例子：
// 下面的語句返回什么呢:["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的數值視為5if (element > 5)return 5;return element;}).reduce(function(prev, element) {// 與之前的數值加總，回傳后代入下一輪的處理return prev + element;}, 0);// 40console.log(result);這代碼看著有點啰嗦是吧？感謝 pythonicx 提供的優化代碼：
var myArr = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];let result = myArr.map(m => m>5 ? 5 : m).reduce((x,y) => x+y);console.log(result); // 40
小結
在這篇文章中，我們研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是，與其他方法結合使用時，.map() 的函數可以得到強大的擴展和利用。 嘗試找出更多用例。
新聞熱點
疑難解答
