javascript reduce(), reduceRight()

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

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

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 切ってもいい案件から使っちゃうといいでしょう！

参考

developer.mozilla.org
taiju.hatenablog.com

新しい日記

新しい日記

javascript reduce(), reduceRight()