JavaScript Array reduce()用法

JavaScript Array物件的reduce()用法如下。

簡介

Array的reduce()於ES6(ECMAScript® 2015 Language Specification)釋出，作用為遍歷陣列並在走訪每個元素時呼叫callback函式，並將callback的回傳結果作為下一次callback的參數，而最終回傳的結果為最後一次callback的結果。

reduce()函式定義如下，方括弧[]的參數為選填。

Array.prototype.reduce(
  callbackfn(previousValue, currentValue, [currentIndex], [array]), 
  initialValue
)

reduce()函式接收兩個參數：

1. callbackfn - 即回呼函式，每走訪一個元素時即被調用。必填。
2. initialValue - 為callbackfn第一次調用時第一個參數的初值。選填。

callbackfn函式接收下面四個參數：

1. previousValue - 為前一次callbackfn的回傳結果。但遍歷第一次為initialValue的值，若initialValue未提供則以Array的第一個元素為值。此參數又被稱為累加器(accumulator)，因為其乘載每一次遍歷的結果。必填。
2. currentValue - 目前遍歷到的元素。必填。
3. currentIndex - 目前遍歷到的元素索引。選填。
4. array - 被遍歷的Array物件本身。選填。

範例

下面使用reduce()加總arr中的每個數值。執行時會依序取出Array的元素然後呼叫callbackfn函式並傳入為currentValue；而previousValue參數則為上一次callbackfn的回傳結果。不過第一次呼叫callbackfn的previousValue為reduce的第二參數值，若未提供則以第一個元素為值。

const arr = [1, 2, 3];

function callbackFn(previousValue, currentValue) {
  return previousValue + currentValue;
}

let result1 = arr.reduce(callbackFn, 1); // initialValue is 1
console.log(result1); // 7

let result2 = arr.reduce(callbackFn); // no initialValue, the previousValue of first callbackFn call is the first element of arr which is 1
console.log(result2); // 6

下面用reduce()把arr的字串串接起來，callback為箭頭函式。

const arr = ['a', 'b', 'c'];

let result1 = arr.reduce((previousValue, currentValue) => {
  return previousValue + currentValue;
}, '_');

console.log(result1); // _abc

• ECMAScript Language Specification