map、reduce 和 filter 是三個非常實用的 JavaScript 數(shù)組方法妥凳，賦予了開發(fā)者四兩撥千斤的能力。直接進入正題答捕，看看如何使用（并記资旁俊）這些超級好用的方法！
Array.map()
Array.map() 根據(jù)傳遞的轉(zhuǎn)換函數(shù)拱镐，更新給定數(shù)組中的每個值艘款，并返回一個相同長度的新數(shù)組。它接受一個回調(diào)函數(shù)作為參數(shù)沃琅，用以執(zhí)行轉(zhuǎn)換過程哗咆。
let newArray = oldArray.map((value, index, array) => {
...
});
一個幫助記住 map 的方法：Morph Array Piece-by-Piece（逐個改變數(shù)組）
你可以使用 map 代替 for-each 循環(huán)，來遍歷并對每個值應用轉(zhuǎn)換函數(shù)益眉。這個方法適用于當你想更新數(shù)組的同時保留原始值晌柬。它不會潛在地刪除任何值（filter 方法會）姥份，也不會計算出一個新的輸出（就像 reduce 那樣）。map 允許你逐個改變數(shù)組年碘。一起來看一個例子：
[1, 4, 6, 14, 32, 78].map(val => val * 10)
// the result is: [10, 40, 60, 140, 320, 780]
上面的例子中澈歉，我們使用一個初始數(shù)組（[1, 4, 6, 14, 32, 78]），映射每個值到它自己的十倍（val * 10）屿衅。結(jié)果是一個新數(shù)組埃难，初始數(shù)組的每個值被這個等式轉(zhuǎn)換：[10, 40, 60, 140, 320, 780]。
Array.filter()
想要過濾數(shù)組的值到另一個數(shù)組傲诵，新數(shù)組中的每個值都通過一個特定檢查凯砍，Array.filter() 這個快捷實用的方法就派上用場了。
類似搜索過濾器拴竹，filter 基于傳遞的參數(shù)來過濾出值悟衩。
舉個例子，假定有個數(shù)字數(shù)組栓拜，想要過濾出大于 10 的值座泳，可以這樣寫：
[1, 4, 6, 14, 32, 78].filter(val => val > 10)
// the result is: [14, 32, 78]
如果在這個數(shù)組上使用 map 方法，比如在上面這個例子幕与，會返回一個帶有 val > 10 判斷的和原始數(shù)組長度相同的數(shù)組挑势，其中每個值都經(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ù)組。
假設寵物訓練學校有一個四只狗的小班中狂，學校里的所有狗都會經(jīng)過各種挑戰(zhàn)凫碌，然后參加一個分級期末考試。我們用一個對象數(shù)組來表示這些狗狗：
const students = [
{
name: "Boops",
finalGrade: 80
},
{
name: "Kitten",
finalGrade: 45
},
{
name: "Taco",
finalGrade: 100
},
{
name: "Lucy",
finalGrade: 60
}
]
如果狗狗們的期末考試成績高于 70 分胃榕，它們會獲得一個精美的證書盛险；反之，它們就要去重修勋又。為了知道證書打印的數(shù)量苦掘，要寫一個方法來返回通過考試的狗狗。不必寫循環(huán)來遍歷數(shù)組的每個對象楔壤，我們可以用 filter 簡化代碼鹤啡！
const passingDogs = students.filter((student) => {
return student.finalGrade >= 70
})
/*
passingDogs = [
{
name: "Boops",
finalGrade: 80
},
{
name: "Taco",
finalGrade: 100
}
]
*/
你也看到了，Boops 和 Taco 是好狗狗（其實所有狗都很不錯）挺邀，它們?nèi)〉昧送ㄟ^課程的成就證書揉忘！利用箭頭函數(shù)的隱式返回特性，一行代碼就能實現(xiàn)端铛。因為只有一個參數(shù)泣矛，所以可以刪掉箭頭函數(shù)的括號：
const passingDogs = students.filter(student => student.finalGrade >= 70)
/*
passingDogs = [
{
name: "Boops",
finalGrade: 80
},
{
name: "Taco",
finalGrade: 100
}
]
*/
Array.reduce()
reduce() 方法接受一個數(shù)組作為輸入值并返回一個值。這點挺有趣的禾蚕。reduce 接受一個回調(diào)函數(shù)您朽，回調(diào)函數(shù)參數(shù)包括一個累計器（數(shù)組每一段的累加值，它會像雪球一樣增長）换淆，當前值哗总，和索引。reduce 也接受一個初始值作為第二個參數(shù)：
let finalVal = oldArray.reduce((accumulator, currentValue, currentIndex, array) => {
...
}), initalValue;
來寫一個炒菜函數(shù)和一個作料清單：
// our list of ingredients in an array
const ingredients = ['wine', 'tomato', 'onion', 'mushroom']
// a cooking function
const cook = (ingredient) => {
return `cooked ${ingredient}`
}
如果我們想要把這些作料做成一個調(diào)味汁（開玩笑的）倍试，用 reduce() 來歸約讯屈！
const wineReduction = ingredients.reduce((sauce, item) => {
return sauce += cook(item) + ', '
}, '')
// wineReduction = "cooked wine, cooked tomato, cooked onion, cooked mushroom, "
初始值（這個例子中的 ''）很重要，它決定了第一個作料能夠進行烹飪县习。這里輸出的結(jié)果不太靠譜涮母，自己炒菜時要當心。下面的例子就是我要說到的情況：
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"
記住這個方法的簡單辦法就是回想你怎么做調(diào)味汁：把多個作料歸約到單個。
