概要
Array.prototype.reduceは引数で与えられたreducer関数を配列要素一つ一つに実行し、単一の出力値を作る。
hogeArray.reduce(reducer, initialValue)
reducer関数
reducer関数は4つの引数を取る。そのうちアキュムレーターと現在値は必須。
- アキュムレーター(accumulator)
reducer関数の返り値を溜めていく変数のようなもの - 現在値(currentValue)
今回ってきている配列の要素 - 現在の添字(index)
今回ってきている配列のインデックス - 元の配列(array)
reduceが呼び出された配列(上記例で言うとhogeArray)
function reducer(accumlator, currentValue, index, array) {
return ???
}
InitialValue
InitialValueはreducer関数の最初の呼び出しの最初の引数として使用する値。
例えばInitialValueに0を指定した場合、アキュムレーターの最初の値は0になる。
使い方の例と処理の内容
配列内の値の合計値を出すような処理を作る際にはスマートに記述する事ができる。
const array = [1, 3, 5];
return array.reduce(function (acc, cur) {
return acc + cur;
}, 0)
// 出力結果：9
reduceは配列の内容を一つずつ網羅し、それについての計算をしていく。
0番地の配列に入っているのは1なので、最初の計算は下記のようになる。
0(アキュムレーター) + 1(現在値) = 1
次の1番地に回ると、0番地の計算で返された1がアキュムレーターに入っており、それに1番地の3が足されている事が見て取れる。
1(アキュムレーター) + 3(現在値) = 4
最後の2番地も同様の動作になる。配列の最後に到達したら、現在アキュムレーターに格納されている内容がreduceの返り値となる。
4(アキュムレーター) + 5(現在値) = 9
他の引数による動作の変化はMDNのリファレンスを見てみてください。
まとめ
余計な変数を用意しなくても計算結果をアキュムレーターに突っ込んでいく事ができるメソッド、reduce。配列操作する際は使っていきましょう。