reduce()メソッドは配列に対して関数を適用し、その処理によって配列の各値を(左から右に)一つの値にまとめます。

文法

arr.reduce(callback,[initialValue])

引数	説明
callback	配列内の各値で実行される関数です。 この関数は4つの引数を受け取ります。 previousValue この値は直前(1つ前の要素)のコールバック実行で返された値か、 または提供されていればinitialValue(後述)になります。 currentValue 配列内で現在処理されている要素です。 index 配列内で現在処理されている要素のインデックスです。 array reduceが呼び出されている配列そのものです。
initialValue	コールバックの最初の実行を行うための、最初の引数として使用するオブジェクトを指定します。

説明

reduceは配列内の各要素に対して(欠落しているものを除き)順番に、コールバック関数を実行していきます。 コールバック関数は初期値(または直前のコールバック呼び出しによる値)、 現在の要素の値、現在のインデックス、現在の繰り返し処理を行っている配列の4つの引数を受け取ります。

最初のコールバック呼び出しでは、previousValueとcurrentValueは、 2つの値のうちの、いずれかになります。 reduce呼び出しでinitialValueが提供された場合、 previousValueはinitialValueと同じ値になり、 currentValueは配列の最初の値と同じになります。 もし、initialValueが提供されなかった場合、 previousValueは配列内の最初の値と同じになり、 currentValueは配列の2番目の値と同じになります。

もし配列が空でinitialValueが提供されなかった場合、 TypeErrorがスローされます。 もし配列が1だけ要素を持ち(位置に関係なく)、initialValueが提供されなかった場合、 またはinitialValueが提供されたが、配列が空で合った場合、 callbackの呼び出しは行われず、その1つだけの値が返されます。

reduce呼び出しを、次のように使用したとします。

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

コールバックは引数を使用して4回実行され、 下記のように各呼び出しで値が返されます。

	previousValue	currentValue	index	array	返り値
最初の呼び出し	0	1	1	[0,1,2,3,4]	1
2度目の呼び出し	1	2	2	[0,1,2,3,4]	3
3度目の呼び出し	3	3	3	[0,1,2,3,4]	6
4度目の呼び出し	6	4	4	[0,1,2,3,4]	10

reduceによって返される値は、最後のコールバックの実行結果になります。(10)

reduceの2つ目の引数としてinitialValueを提供した場合、 結果は次のようになります。

[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
}, 10);

	previousValue	currentValue	index	array	返り値
最初の呼び出し	10	0	0	[0,1,2,3,4]	10
2度目の呼び出し	10	1	1	[0,1,2,3,4]	11
3度目の呼び出し	11	2	2	[0,1,2,3,4]	13
4度目の呼び出し	13	3	3	[0,1,2,3,4]	16
5度目の呼び出し	16	4	4	[0,1,2,3,4]	20

この時、reduceによって返される値は、もちろん20になります。

例

例: 配列内の全ての値の合計値を算出

var total = [0, 1, 2, 3].reduce(function(a, b) {
    return a + b;
});
// total == 6

例: 配列内の配列をフラットにする

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

Polyfill

reduceは、5thエディションのECMA-262標準に追加されたため、 全ての標準実装に提供されていないかもしれません。 あなたのスクリプトが始まる前に下記のコードを挿入することで、 ネイティブにサポートされていない場合に、reduceが使用出来るようになります。

if ( 'function' !== typeof Array.prototype.reduce ) {
  Array.prototype.reduce = function( callback /*, initialValue*/ ) {
    'use strict';
    if ( null === this || 'undefined' === typeof this ) {
      throw new TypeError(
         'Array.prototype.reduce called on null or undefined' );
    }
    if ( 'function' !== typeof callback ) {
      throw new TypeError( callback + ' is not a function' );
    }
    var t = Object( this ), len = t.length >>> 0, k = 0, value;
    if ( arguments.length >= 2 ) {
      value = arguments[1];
    } else {
      while ( k < len && ! k in t ) k++;
      if ( k >= len )
        throw new TypeError('Reduce of empty array with no initial value');
      value = t[ k++ ];
    }
    for ( ; k < len ; k++ ) {
      if ( k in t ) {
         value = callback( value, t[k], k, t );
      }
    }
    return value;
  };
}

仕様

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	◯	3.0 (1.9)	9	10.5	4.0

モバイル

機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

関連項目

• Array.prototype.reduceRight()

 Back to top