• 原文地址：An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
• 原文作者：Una Kravets
• 譯文出自：掘金翻譯計(jì)劃
• 本文永久鏈接：github.com/xitu/gold-m…
• 譯者：熊賢仁
• 校對者：Endone、Reaper622

圖解 Map、Reduce 和 Filter 數(shù)組方法

map、reduce 和 filter 是三個(gè)非常實(shí)用的 JavaScript 數(shù)組方法，賦予了開發(fā)者四兩撥千斤的能力。我們直接進(jìn)入正題，看看如何使用（并記住）這些超級好用的方法！

Array.map()

Array.map() 根據(jù)傳遞的轉(zhuǎn)換函數(shù)，更新給定數(shù)組中的每個(gè)值，并返回一個(gè)相同長度的新數(shù)組。它接受一個(gè)回調(diào)函數(shù)作為參數(shù)，用以執(zhí)行轉(zhuǎn)換過程。

let newArray = oldArray.map((value, index, array) => {... }); 一個(gè)幫助記住 map 的方法：Morph Array Piece-by-Piece（逐個(gè)改變數(shù)組）

你可以使用 map 代替 for-each 循環(huán)，來遍歷并對每個(gè)值應(yīng)用轉(zhuǎn)換函數(shù)。這個(gè)方法適用于當(dāng)你想更新數(shù)組的同時(shí)保留原始值。它不會潛在地刪除任何值（filter 方法會），也不會計(jì)算出一個(gè)新的輸出（就像 reduce 那樣）。map 允許你逐個(gè)改變數(shù)組。一起來看一個(gè)例子：

[1, 4, 6, 14, 32, 78].map(val => val * 10) // the result is: [10, 40, 60, 140, 320, 780]

上面的例子中，我們使用一個(gè)初始數(shù)組（[1, 4, 6, 14, 32, 78]），映射每個(gè)值到它自己的十倍（val * 10）。結(jié)果是一個(gè)新數(shù)組，初始數(shù)組的每個(gè)值被這個(gè)等式轉(zhuǎn)換：[10, 40, 60, 140, 320, 780]。

Array.filter()

當(dāng)我們想要過濾數(shù)組的值到另一個(gè)數(shù)組，新數(shù)組中的每個(gè)值都通過一個(gè)特定檢查，Array.filter() 這個(gè)快捷實(shí)用的方法就派上用場了。

類似搜索過濾器，filter 基于傳遞的參數(shù)來過濾出值。

舉個(gè)例子，假定有個(gè)數(shù)字?jǐn)?shù)組，想要過濾出大于 10 的值，可以這樣寫：

[1, 4, 6, 14, 32, 78].filter(val => val > 10) // the result is: [14, 32, 78]

如果在這個(gè)數(shù)組上使用 map 方法，比如在上面這個(gè)例子，會返回一個(gè)帶有 val > 10 判斷的和原始數(shù)組長度相同的數(shù)組，其中每個(gè)值都經(jīng)過轉(zhuǎn)換或者檢查。如果原始值大于 10，會被轉(zhuǎn)換為真值。就像這樣：

[1, 4, 6, 14, 32, 78].map(val => val > 10) // the result is: [false, false, false, true, true, true]

但是 filter 方法，只返回真值。因此如果所有值都執(zhí)行指定的檢查的話，結(jié)果的長度會小于等于原始數(shù)組。

把 filter 想象成一個(gè)漏斗。部分混合物會從中穿過進(jìn)入結(jié)果，而另一部分則會被留下并拋棄。

假設(shè)寵物訓(xùn)練學(xué)校有一個(gè)四只狗的小班，學(xué)校里的所有狗都會經(jīng)過各種挑戰(zhàn)，然后參加一個(gè)分級期末考試。我們用一個(gè)對象數(shù)組來表示這些狗狗：

const students = [{name: "Boops",finalGrade: 80},{name: "Kitten",finalGrade: 45},{name: "Taco",finalGrade: 100},{name: "Lucy",finalGrade: 60} ]

如果狗狗們的期末考試成績高于 70 分，它們會獲得一個(gè)精美的證書；反之，它們就要去重修。為了知道證書打印的數(shù)量，要寫一個(gè)方法來返回通過考試的狗狗。不必寫循環(huán)來遍歷數(shù)組的每個(gè)對象，我們可以用 filter 簡化代碼！

const passingDogs = students.filter((student) => {return student.finalGrade >= 70 })/* passingDogs = [{name: "Boops",finalGrade: 80},{name: "Taco",finalGrade: 100} ] */

你也看到了，Boops 和 Taco 是好狗狗（其實(shí)所有狗都很不錯），它們?nèi)〉昧送ㄟ^課程的成就證書！利用箭頭函數(shù)的隱式返回特性，一行代碼就能實(shí)現(xiàn)。因?yàn)橹挥幸粋€(gè)參數(shù)，所以可以刪掉箭頭函數(shù)的括號：

const passingDogs = students.filter(student => student.finalGrade >= 70)/* passingDogs = [{name: "Boops",finalGrade: 80},{name: "Taco",finalGrade: 100} ] */

Array.reduce()

reduce() 方法接受一個(gè)數(shù)組作為輸入值并返回一個(gè)值。這點(diǎn)挺有趣的。reduce 接受一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)參數(shù)包括一個(gè)累計(jì)器（數(shù)組每一段的累加值，它會[像雪球一樣增長](Understanding the Almighty Reducer | CSS-Tricks)），當(dāng)前值，和索引。reduce 也接受一個(gè)初始值作為第二個(gè)參數(shù)：

let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {... }), initalValue;

來寫一個(gè)炒菜函數(shù)和一個(gè)作料清單：

// our list of ingredients in an array const ingredients = ['wine', 'tomato', 'onion', 'mushroom']// a cooking function const cook = (ingredient) => {return `cooked ${ingredient}` }

如果我們想要把這些作料做成一個(gè)調(diào)味汁（開玩笑的），用 reduce() 來歸約！

const wineReduction = ingredients.reduce((sauce, item) => {return sauce += cook(item) + ', '}, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "

初始值（這個(gè)例子中的 ''）很重要，它決定了第一個(gè)作料能夠進(jìn)行烹飪。這里輸出的結(jié)果不太靠譜，自己炒菜時(shí)要當(dāng)心。下面的例子就是我要說到的情況：

const wineReduction = ingredients.reduce((sauce, item) => {return sauce += cook(item) + ', '})// wineReduction = "winecooked tomato, cooked onion, cooked mushroom, "

最后，確保新字符串的末尾沒有額外的空白，我們可以傳遞索引和數(shù)組來執(zhí)行轉(zhuǎn)換：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {sauce += cook(item)if (index < array.length - 1) {sauce += ', '}return sauce}, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom"

可以用三目操作符、模板字符串和隱式返回，寫的更簡潔（一行搞定！）：

const wineReduction = ingredients.reduce((sauce, item, index, array) => {return (index < array.length - 1) ? sauce += `${cook(item)}, ` : sauce += `${cook(item)}` }, '')// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom" 記住這個(gè)方法的簡單辦法就是回想你怎么做調(diào)味汁：把多個(gè)作料歸約到單個(gè)。

和我一起唱起來！

我想要用一首歌來結(jié)束這篇博文，給數(shù)組方法寫了一個(gè)小調(diào)，來幫助你們記憶：

Video

如果發(fā)現(xiàn)譯文存在錯誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎勵積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。

---

掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 [掘金](掘金 - juejin.im - 一個(gè)幫助開發(fā)者成長的社區(qū)) 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計(jì)、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請持續(xù)關(guān)注 掘金翻譯計(jì)劃、[官方微博](Sina Visitor System)、知乎專欄。

總結(jié)

以上是生活随笔為你收集整理的接受map_[译] 图解 Map、Reduce 和 Filter 数组方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。