陣列的 map、filter 跟 reduce 三個常用的方法介紹
在介紹這三個方法之前，先帶大家了解何謂"callback function"。
引用 MDN 的說明如下:
回呼函式（callback function）是指能藉由參數（argument）通往另一個函式的函式。它會在外部函式內調用，以完成某些事情。
簡單來說，就是一個程式執行完再去執行另一個程式，並且是在指定時機才觸發的。
接著我們來看這三個方法在 W3Schools 中的說明
map() Creates a new array with the result of calling a function for each array element
語法
let new_array = arr.map(function callback( currentValue[, index[, array]]) {// return element for new_array}[, thisArg])
filter() Creates a new array with every element in an array that pass a test
語法
var newArray = arr.filter(function callback(element[, index[, array]])[, thisArg])
reduce() Reduce the values of an array to a single value (going left-to-right)
語法
arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
根據語法我們可以發現這三個方法都是 callback function。
翻成中文的意思大概如下:
map() 方法會建立一個新陣列，其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。
filter() 方法會建立一個每一個元素經過指定運算判斷後回傳為真的新陣列。
reduce() 方法將一個累加器及陣列中每項元素（由左至右）傳入回呼函式，將陣列化為單一值。
reduce 方法跟 map、filter 的差別是它會 return 一個值，而不是一個新陣列，這會連帶使 reduce 的語法結構跟邏輯與其他方法不太相同。
看起來有點複雜，其實就是使用 callback 函式處理陣列中的每個元素，可傳入以下四個參數，我們再對照語法來看一次:
語法
arr.reduce(callback[accumulator, currentValue, currentIndex, array], initialValue)
- accumulator：累加器;經由個別 currentValue 加總的累計值
- currentValue：Array 正在處理的元素
- currentIndex(選擇性)：正在處理的元素索引
- array(選擇性)：原始陣列
initialValue(選擇性)：初始值(預設值)，放在 function 的最後方，於第一次呼叫 callback 時要傳入的累加器初始值。若沒有提供初始值，則原陣列的第一個元素將會被當作初始的累加器。