Help us understand the problem. What is going on with this article?

【javascript】reduce

More than 1 year has passed since last update.

reduceメソッドについてまとめます。

reduceメソッドとは

隣り合う2つの配列要素に対して左から右へ同時に関数を適用し、単一の値にする。というメソッドです。
例えば、「配列の中身を一つずつ足していって合計を求める」ということができます。

reduce()

以下、構文です。

array.reduce(callback [, initialValue])

  • array:対象となる配列
  • callback:配列内の各値に対して実行される関数、4つの引数を持つ
    • accumulator:現在処理されている要素よりも一つ前の要素かinitialValue、もしくは一つ前の要素で実行された関数の結果
    • currentValue:現在処理されている要素
    • currentIndex:現在処理されている要素のインデックス
    • array:対象となっている配列
  • initialValue:最初の実引数として渡される値

参考:Array​.prototype​.reduce()

initialValueは省略可能です。
initialValueが指定されている場合、一番最初の関数実行時のaccumulatorにはinitialValueの値が入り、currentValueには配列の最初の値が入ります。
initialValueが省略されている場合は、一番最初の関数実行時のaccumulatorには配列の最初の値が入り、currentValueには配列の2番目の値が入ります。

また、callback関数の中のcurrentIndex、arrayも省略可能です。

サンプルを通じて詳しく説明します。

サンプル

まずは配列内の数値をすべて足して、その値を表示します。

sample_sum.js
var array = [1, 2, 3];

var result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
});

console.log(result); // 6

sample_sum.jsではinitialValueを省略しています。
関数実行のイメージは以下のようになります。

関数実行回数 accumulator currentValue currentIndex
1回目 1 2 1
2回目 3 3 2

関数実行1回目のaccumulatorには配列の一番最初の要素である1が入ります。
currentValueには2が入ります。
ここで関数が実行されると、1 + 23がreturnされます。

関数実行2回目のaccumulatorには、一つ前の要素で実行された関数の結果である3が入ります。
currentValueには3番目の要素である3が入ります。
そして関数が実行された結果、6がreturnされます。

以下のように、配列の中で一番大きい値を求めることもできます。

sample_max.js
var array = [10, 100, 30, 50];

var result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
    if(accumulator > currentValue){
        return accumulator;
    } else {
        return currentValue;
    }
});

console.log(result); // 100

以上でreduceの基本は終わりです。

chihiro
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。
http://www.jrits.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away