前言

從經(jīng)典的 for 循環(huán)到 forEach() 方法，用于迭代數(shù)據(jù)集合的各種技術(shù)和方法比比皆是。但是現(xiàn)在比較流行的方法是 .map() 方法。

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

語法：

array.map(function(currentValue,index,arr), thisValue)

• currentValue：必須。當(dāng)前元素的值
• index：可選。當(dāng)期元素的索引值
• arr：可選。當(dāng)期元素屬于的數(shù)組對象
• thisValue：可選。對象作為該執(zhí)行回調(diào)時使用，傳遞給函數(shù)，用作 "this" 的值。可改變this指向，

map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

注意： map() 不會對空數(shù)組進(jìn)行檢測。

注意： map() 不會改變原始數(shù)組。

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

• 在數(shù)組中的每一項元素上調(diào)用一個函數(shù)
• 將字符串轉(zhuǎn)換為數(shù)組
• 在 JavaScript 庫中用于渲染列表
• 重新格式化數(shù)組對象
• 小技巧使用案例

1. 在數(shù)組中的每一項元素上調(diào)用一個函數(shù)

如前所述，.map() 接受回調(diào)函數(shù)作為其參數(shù)之一，該函數(shù)的一個重要參數(shù)是由該函數(shù)處理的項的當(dāng)前值。這是一個必需的參數(shù)。有了這個參數(shù)，我們可以修改數(shù)組中的每個單獨(dú)項，并在其上創(chuàng)建一個新元素。這里有一個例子：

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]

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

這甚至可以進(jìn)一步簡化，使其更清潔：

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

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

2.將字符串轉(zhuǎn)換為數(shù)組

已知的 .map() 屬于 Array 原型。 我們?nèi)绾问褂盟鼘⒆址D(zhuǎn)換為數(shù)組。 不用擔(dān)心，我們不需要再開發(fā)一個方法來處理字符串，而是使用特殊的 .call() 方法。

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

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

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() 所期望的函數(shù)參數(shù)。 你可以看看控制臺里打印出來的內(nèi)容。

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

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 中的一個簡單的無狀態(tài)組件，它使用列表渲染div。 使用 .map() 渲染單個列表項以迭代最初創(chuàng)建的 names 數(shù)組。 此組件使用 ReactDOM 渲染 ID為 root 的 DOM 元素 。

4.重新格式化數(shù)組對象

如何處理數(shù)組中的對象？ .map() 可用于迭代數(shù)組中的對象，并以與傳統(tǒng)數(shù)組類似的方式，修改每個單獨(dú)對象的內(nèi)容 并返回一個新數(shù)組。 這個修改是基于回調(diào)函數(shù)中返回的內(nèi)容來完成的。這里有一個例子:

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}]

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

5.小技巧使用案例

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

• currentValue – callback 的第一個參數(shù)，數(shù)組中正在處理的當(dāng)前元素，最常用的參數(shù)。
• index – callback 的第二個參數(shù)，數(shù)組中正在處理的當(dāng)前元素的索引。
• array – callback 的第三個參數(shù)，map 方法被調(diào)用的數(shù)組。

來看一下例子：

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

還有一個非常實(shí)用的小技巧，像 .map() ，.reduce(), .filter() 這些方法支持鏈?zhǔn)秸{(diào)用。例如：

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

這代碼看著有點(diǎn)啰嗦是吧？感謝 pythonicx 提供的優(yōu)化代碼：

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

小結(jié)

在這篇文章中，我們研究了 JavaScript 中 .map() 方法的主要用途。 需要注意的是，與其他方法結(jié)合使用時，.map() 的函數(shù)可以得到強(qiáng)大的擴(kuò)展和利用。 嘗試找出更多用例。