JavaScript reduce関数の基本的な使い方
JavaScriptのreduce関数の基本的な使い方を説明します。
以下のコードはreduce関数を使って配列の合計値を求めています。
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function (result, current) {
return result + current;
}, 0);
console.log(sum); // 15解説
配列.reduce(関数, 初期値);としたとき、reduce関数は、配列の要素を１つづつ引数で指定した関数の処理を実行していきます。
文章で説明するのは難しいので、上記のサンプルをログ出力しながら確認します。
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function (result, current) {
console.log('result=' + result + ' current=' + current);
return result + current;
}, 0);
/* 出力結果
result=0 current=1
result=1 current=2
result=3 current=3
result=6 current=4
result=10 current=5
*/forEachのように、配列の要素の数だけ指定した関数が実行されます。
forEachと違うのは関数の引数と関数にreturnがあるところです。
resultには関数でreturnした値が入ります。最初の要素の場合はreturnした値が存在しないことになりますが、reduce関数の第２引数がresultの初期値となります。
上記の例では0を指定しているので、最初の要素のresultは0になっていることを出力結果から確認できます。
currentには現在の要素の値が入ります。こちらはforEachと同じイメージで、配列の要素の値が１つづつ順番に入ります。
resultとcurrentの値に対して何かしらの処理をしてその結果をreturnすれば、配列の集計が簡単に行えるようになります。
例えばSQLの集計関数のように配列のMax、Min、Countをreduce関数で実装するには以下のようにします。Minの場合は初期値が0だと0が最小値になってしまうので、nullを初期値にしています。
var arr = [1, 2, 3, 4, 5];
var max = arr.reduce(function (result, current) {
return result < current ? current : result; // Max
}, 0);
var min = arr.reduce(function (result, current) {
if (result == null) return current;
return result > current ? current : result; // Min
}, null);
var count = arr.reduce(function (result, current) {
return result + 1; // Count
}, 0);
console.log(max); // 5
console.log(min); // 1
console.log(count); // 5配列の長さ（Count）を取得したい場合はlengthを使えばいいですし、MaxやMinを取得したい場合はJavaScript 配列の要素で最大値・最小値を取得するで紹介した方法を使ったほうが簡単です。
個人的にはreduce関数が本領発揮するのはオブジェクト配列の集計時だと感じています。
オブジェクトの配列でも考え方は同じです。JavaScript オブジェクト配列をsqlのgroup byのように集計するでオブジェクト配列での集計方法を紹介します。
IE8以下の対応
IE8以下はreduce関数が使用できません。
下記のURLで紹介されているfunctionを実装すればreduce関数を使用できるようになります。