スポンサーリンク

firefoxのJavaScriptの便利関数,reduceの使い方とサンプルコード。配列の全要素を順番に使い,一つの値を生成。Rubyのinjectに相当

JavaScriptの配列関数は,どんどん便利なメソッドが増えている。

その中に,「配列の全要素を順番に使い,1つの値を生み出す」というメソッドがある。


それが Array.prototype.reduceだ。

Rubyでいうとinjectメソッドにあたる便利関数。


サンプルコードを見てみよう。

[1,2,3,4,5]
  .reduce(

    // 第一引数として,無名関数を渡す。
    function( result, item ){
      // 「結果」に対して「要素」を作用させ,結果を更新する。
      result *= item; 

      // 無名関数の中では,最後に「結果」を返す。
      return result; 
    }, 

    // 「結果」の初期値
    1 
  )

このコードを実行すると,まず初期値が1。

それに対して,配列の要素がどんどん掛け合わされてゆく。

1*1=1。

それに2をかけると2。

3をかけると6。

4をかけて24。

5をかけて120。


だから,出力は120だ。

暫定的な結果をためておいて,その結果に対して毎回,配列の要素を作用させてゆくのだ。


参考:

Array.prototype.reduce - JavaScript | MDN
https://developer.mozilla.org/ja/docs...

  • 配列要素に対して(左から右へ)同時に関数を適用し、単一の値にします


Array.prototype.reduce() - JavaScript | MDN
https://developer.mozilla.org/en-US/d...

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


javascript 配列を扱う強力な関数 reduce ( ソフトウェア ) - 政略結婚じゃないよ。 - Yahoo!ブログ
http://blogs.yahoo.co.jp/il_sagrestan...

  • 空の配列を初期値にして配列の各値を演算した結果を push すれば map と全く同じこともできてしまう

関連記事:

HTMLのselectのoptionに,複数行や改行を許可する方法
http://computer-technology.hateblo.jp/entry/20131026/p1


PHPと異なり,JavaScriptの連想配列とfor in構文には順序の概念がないので注意すること
http://computer-technology.hateblo.jp/entry/20140601/p1


素数判定の処理を,再帰アルゴリズムで1文で書いたJavaScriptプログラムは
http://computer-technology.hateblo.jp/entry/20140429/p1


Firebugで,XPathを使って特定のclass名を指定し,DOM要素を絞り込む方法
http://computer-technology.hateblo.jp/entry/20140312/p2


スマホでブラウザ経由でファイルのアップロードは,対応状況がバージョン依存。iOS6以降,Android2.2以降
http://computer-technology.hateblo.jp/entry/20140718/p1