javascript reduce(), reduceRight()

2015.09.30

隣り合う 2 つの配列要素に対して（左から右へ）同時に関数を適用し、単一の値にします。

by MDN

以下の様な感じで、配列の総計を出したりするのに使えます

var sum =function(arr){
  var value = arr.reduce(function(a,b){
    return a+b;
  });
  return value;
};
var arr = [0,1,2,3,4];
sum(arr); //10
}

for を使って書くよりもずっと少ない記述で済みます！

イメージとしては、

1. 配列の最初の値と次の値を足し、
a=0, b=1
total=a+b=1

2. 先ほどの total を a として、さらに次の値を足し、
a=total=1, b=2
total=a+b=3

3.配列の要素数だけ同じ手順を繰り返し
a=total=3, b=3
total=a+b=6

4.最後に残った値を返します（単一の値になった！）
a=total=6, b=4
total=a+b=10

大事なのは、現在の値と次の値を参照しているのではなくて、累積値(=total)と次の値を参照しているというところのようです。

また、この累積値の初期値を第二引数に入れておくこともできます。
例えば、配列に100以上の数があればその数字を返して、なければ100を返す関数。

var hundred = function(arr){
  var value = arr.reduce(function(a,b){
    if(a>b){return a;}
    return b;
  },100);
  return value;
};
var small = [10,20,30,40,50];
var large = [10,20,300,400,500];
hundred(small); //100
hundred(large); //500

要素の高さを揃えるのに使えそうですね。

reduceRight()は配列を右から左にやるっていう違いのようです。
またブラウザ対応は IE9 以上なので、 IE8 切ってもいい案件から使っちゃうといいでしょう！

参考

Array.prototype.reduce() - JavaScript | MDNreduce() は Array インターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素の計算結果の返値を渡します。配列のすべての要素に対して「縮小」コールバック関数を実行した最終結果は、単一の値となります。MDN Web Docs

reduce関数は結構有用っていうお話 - あと味JavaScriptに限った話ではないのですが、reduce関数を持つプログラミング言語がいくつかあります。 JavaScriptに関しては、一応、ECMAScript5の仕様に登場するようで、将来的にはどのブラウザでも使えるようになりそうな気配はあります。 Standard ECMA-262 また、MDCではreduceのアルゴリズムが掲載されているので、これを利用すれば現時点でもどのブラウザでもreduce関数を利用することができます。 reduce関数とは？ MDCに掲載されている文章を引用します。配列の（左から右へ） 2 つの値に対して同時に関数を適用し、単一の値にします。 Java…あと味