JavaScript

Array.prototype.reduce()メソッド

 編集:2022.08.23 by T.A.

その Array の各要素にコールバック関数に掛けて処理した結果のアキュームレーターの値を返します。

コールバック関数による:

arr.reduce(callback[, initialValue])
関数:
function 関数名(accumulator, element[, index[, array]]){
 処理
}

インラインコールバック関数による:

arr.reduce(function(accumulator, element[, index[, array]]){処理}[, initialValue])

アロー関数による:

arr.reduce( (accumulator, element[, index[, array]]) => {処理}[, initialValue])
arr Arrayオブジェクト
callback 実行する関数名を記述。
関数名 callbackと同じ名前を記述。
処理 処理プログラム。必ずreturnで結果値を返し、それが次の処理で利用されるアキュームレーターの値となります。

アロー関数使用の場合、「{ }」に囲まれていない場合は値を表す式となります。

accumulator 現在のアキュームレーターの値が入ります。

コールバック関数に入ったときの処理の最初は、配列内の最初の要素の値が入り、initialValue が指定されている場合はその値が入ります。

element 現在処理されている配列の要素です。
index 省略可。現在処理されている配列要素のインデックスです。

コールバック関数に入ったときの処理の最初は 1 が入り、initialValue が指定された場合は 0 が入ります。

array 省略可。reduce() が呼び出された配列です。
initialValue 省略可callback の最初のアキュームレーターに代入される値。

省略した場合は、配列の最初の要素がアキュムレーターに代入されます。

空の配列に対して reduce() を呼び出した際、initialValue が指定されていないと TypeError が発生します。

戻り値

処理によって得られたアキュームレーターの値です。

解説

reduce() メソッドは、配列に存在する各要素ごとに対して、callback 関数を次の 4 つの引数を渡しながら一度だけ実行します:

  1. accumulator
  2. element
  3. currentIndex
  4. array

コールバックが最初に呼び出されたとき、accumulatorelement が 2 つの値になります。
initialValue が reduce() の呼び出しで提供されていた場合、accumulatorinitialValue と等しくなり、element は配列の最初の値と等しくなります。
initialValue が提供されなかった場合は、accumulator は配列の最初の値と等しくなり、element は 2番目の値と等しくなります。

注: initialValue が指定されなかった場合は、reduce() は最初の要素を飛ばしてインデックス 1 から実行されます。initialValue が指定されていたらインデックス 0 から開始します。

配列が空で initialValue が指定されなかった場合は TypeError が発生します。

配列が(位置に関わらず)1 つの要素しか持たず、initialValue が指定されなかった場合、または initialValue が指定されていても配列が空だった場合、callback が実行されずに要素が返却されます。

¶省く

配列内の値の合計値を出す
let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue
}, 0); //=6

アロー関数を用いて

let total = [ 0, 1, 2, 3 ].reduce(
  (accu, currentValue) => accu + currentValue, 0
); //=6
オブジェクトの配列の値の合計値を出す

オブジェクトの配列に含まれた値の合計値を出すには、すべての項目を関数内で取得できるようにするために initialValue を指定する必要があります。

let initialValue = 0;
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x
}, initialValue);
D=sum; //=6

また、アロー関数を用いて書くことも出来ます。

let initialValue = 0;
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    , initialValue
)
D=sum; //=6
二次元配列を一次元配列にする
let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue)
  },
  []
); //=[0, 1, 2, 3, 4, 5]

また、アロー関数を用いて書くことも出来ます。

let flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
); //=[0, 1, 2, 3, 4, 5]

¶以下を省く


テスト