認識 JavaScript Reduce

Lai

Published in

UnaLai

4 min readSep 20, 2020

認識 Array 方法 Reduce 及其應用

reduce( ) 方法會對每一個 Array 元素執行一個特定方法，並回傳值。該回傳值將繼續延續至下一個元素執行特定方法時調用。常用於簡單的累加計算，亦可以延伸運用於 Array 的扁平化、特定值統計等。

接著就來認識 reduce( ) 方法吧。

➤ reduce( ) 方法

語法

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

第一個參數為一個方法，用於處理 Array 中的元素。該方法有四個參數供使用
- accumulator：累加器，為上一次呼叫方法時的回傳值。若為第一次呼叫，則視有無提供初始值(initialValue)，決定累加器的值。
- currentValue：迭代 Array 時，所處理到的目前值
- currentIndex：迭代 Array 時，所處理到的目前值的索引值
- array：呼叫 reduce 方法的原 Array
第二個參數為累加器的初始值。若有提供，則作為累加器的初始值；若無提供，則使用 Array 第一個值，作為初始值，並從 Array 第二個值開始迭代。

建議提供初始值，避免造成錯誤

錯誤情境一：陣列為空，且無提供初始值，會造成 TypeError

[].reduce((accumulator,currentValue)=>{
  return accumulator + currentValue;
})// TypeError

錯誤情境二：未提供初始值，將預設 Array 第一個值，作為初始值。此範例第一個值為一個 Object，結果造成非預期的錯誤。

let data = [
  {name:"A",age:20},
  {name:"B",age:23},
  {name:"C",age:21}
]data.reduce((accumulator,currentValue)=>{
  return accumulator + currentValue.age;
})// [object Object]2321

避免上述錯誤，此範例亦可利用 map 先將值做處理，再把累計交給 reduce，例如：

data.map(item=>item.age)
    .reduce((accumulator,currentValue)=>{
       return accumulator + currentValue;
    })

也可以將傳入 reduce 的 function 另外撰寫，例如：

function accumulate(accumulator,currentValue){
  return accumulator + currentValue;
}data.map(item=>item.age)
    .reduce(accumulate)

➤ 應用

簡單累加 Array 值

[1,2,3].reduce((accumulator,currentValue)=>{
  return accumulator + currentValue;
})

Array 的扁平化

let data = [[1,2],[3,4],[5,6]]data.reduce((accumulator,currentValue)=>{
  return accumulator.concat(currentValue)
},[])

特定值統計

以此範例為例，統計各個 type 的個數。

let data = [
  {name:"A",age:20,type:1},
  {name:"B",age:23,type:2},
  {name:"C",age:21,type:1}
]data.reduce((accumulator,currentValue)=>{
  if(accumulator[`${currentValue.type}`]){
    accumulator[`${currentValue.type}`]++
  }else{
    accumulator[`${currentValue.type}`] = 1  
  }
  return accumulator
},{})// 結果為：{1: 2, 2: 1}

以上是今天的小筆記分享，有任何問題都歡迎留言指教，謝謝 😊

➤ 參考資料

MDN reduce