.reduce()

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

文法

arr.reduce(callback,[initialValue])
引数 説明
callback

配列内の各値で実行される関数です。 この関数は4つの引数を受け取ります。

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

説明

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

最初のコールバック呼び出しでは、previousValuecurrentValueは、 2つの値のうちの、いずれかになります。 reduce呼び出しでinitialValueが提供された場合、 previousValueinitialValueと同じ値になり、 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
基本

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。