網頁

2022/9/1

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的回傳結果。不過第一次呼叫callbackfnpreviousValuereduce的第二參數值,若未提供則以第一個元素為值。

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


沒有留言:

張貼留言