JavaScript 陣列的 Map()、Reduce()、Filter() 方法

JavaScript 使用許久，但是一些細節過陣子就會模糊，這邊紀錄一下，也許未來又會需要，

到時再自己食，這篇就先探討 map()、filter()、reduce() ，後續應該還會有...

Map

使用情境為，在不影響原本的陣列下，透過相關運算後回傳新的陣列，其中原始陣列

有幾個元素，新陣列就會有幾個元素。

若沒有指定回傳，新陣列的各元素就會試 undefined

看一下 mdn 描述 map 方法

若有正常回傳

原始陣列 a ，內容沒有變

若沒有指定回傳

Reduce

使用情境為，若你要計算陣列總和，並且可以指定初始值，同樣不影響原始陣列，

且不會有新的陣列，僅會將最後計算結果回傳

先來看一下 mdn 描述 reduce 方法

reduce() 方法其實只有傳入兩個參數 reduce(callbackFn(),initialValue)；

第一個是 callbackFn() 方法可以實作計算內容，第二個是 initialValue 代表預設值

所以完整的呈現就是

array.reduce(callbackFn([accumulator, currentValue, currentIndex, array]),initialValue)

其中 initialValue 預設值為「0」，而 callbakFn() 相關參數

• accumulator : 目前加總的累計值

• currentValue : 目前列舉的 item

• currentIndex : 目前列舉的索引值

• array : 原始陣列

舉例如要計算陣列 [1,2,3,4,5] 的總和

這時帶入初始值 「5」，實際計算總合應該會是「20」

Filter

使用情境為，若你要篩選特定條件的元素並且將符合的元素，回傳為新的陣列，

同樣不影響原始陣列

如計算陣列中有哪些元素是質數，並將這些符合的元素組成新的陣列回傳

三者的比較

參考

• map

• reduce

• filter