JavaScript - Array reduce()の使い方

JavaScriptでは、Arrayreduce()は配列ですのすべての要素に対してそれぞれ演算を実行して1つの結果値を計算する関数です。例と一緒に Array.reduce() の使い方を見てみましょう。

1. Array.reduce()

reduce() は配列内のすべての要素に対して演算を実行し、1 つの結果値を返します。

たとえば、 reduce() を使用すると、配列内のすべての数値を順次加算して10という結果を計算できます。

const arr = [1, 2, 3, 4];
// (1 + 2 + 3 + 4) = 10

配列のすべての要素を一度に計算するのではなく、2つの要素を計算し、その結果を次の要素と一緒に計算し、その結果は次の要素と計算する方法で演算を分割して、徐々に計算することです。つまり、上記の例では、1と2の合計を計算し、結果の3を次の要素である3と合計し、結果の6を次の要素である4と合計して10を計算し、この値を返します。

2. Array.reduce() で配列 すべての要素の合計

以下のように reduce(func, initialValue) のように関数と初期値を渡すと、初期値と配列の要素が順次関数に渡されます。演算結果は再び関数に渡され、次の配列の要素と計算し、その結果を次の関数に渡します。このようにすべての要素に対して操作を終了すると、1 つの結果が返されます。

次の例では、arrow functionを使用して単純にreducer関数を実装しています。 previousValueとcurrentValueが関数に渡されると、これら2つの値を合計して次の計算に渡します。 (詳細な演算処理については後述する。)

const arr = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

10

3. Array.reduce() Syntax と例

reduce() は callback 関数と初期値を引数として受け取り、初期値は省略できます。

arr.reduce(callback, initialValue)

関数は以下のように3つの引数を受け取ります。

  • アキュムレータ:累積計算
  • currentValue:関数で計算に使用されるヨー
  • currentIndex : 現在の配列要素の Inde
  • array: 配列客
function func(accumulator, currentValue, currentIndex, array)

3.1 演算の順序を見ることができる reduce() 例

上記の例では、 reduce() に関数を渡すときに arrow function で実装したオブジェクトを渡しましたが、一般的な関数を使って以下のように再実装してみました。 また、ログを出力し、acc、currentValueなどの計算過程を見やすくしました。

const arr = [1, 2, 3, 4];

function func(accumulator, currentValue, currentIndex, array) {
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", curIndex: " + currentIndex + ", array: " + array);
  return accumulator + currentValue;
}

const initialValue = 0;
const sumWithInitial = arr.reduce(func, initialValue);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

上記のコードの実行結果を見ると、戻り値は次の関数のアキュムレータ引数に渡されることがわかります。 そして最初の関数計算では、accumulatorは引数として渡されたinitialValueであり、currentValueは配列の0番目のIndex要素であることがわかりました。

acc: 0, cur: 1, curIndex: 0, array: 1,2,3,4
acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.2 初期値を省略した reduce() 例

以下のように reduce() に initialValue を渡さずに省略できます。

コードを実行すると、最初の関数計算では、accumulatorは配列のIndex 0要素に渡され、currentValueは配列のIndex 1要素に渡されます。 currentIndexは1になります。

const arr = [1, 2, 3, 4];

function func(accumulator, currentValue, currentIndex, array) {
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", curIndex: " + currentIndex + ", array: " + array);
  return accumulator + currentValue;
}

const sumWithInitial = arr.reduce(func);

// 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.3 不要な引数を省略した reduce() 例

この記事の例を見てみると、演算プロセスのreducer関数はaccumulatorとcurrentValueの引数だけを必要とします。

以下のように、他の要因はすべて省略し、必要なものだけを引数として受け取り、計算を行うことができます。

const arr = [1, 2, 3, 4];

function func(accumulator, currentValue) {
  let sum = accumulator + currentValue;
  console.log("acc: " + accumulator + ", cur: " + currentValue
    + ", sum: " + sum);
  return sum;
}

const sumWithInitial = arr.reduce(func);

// 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

acc: 1, cur: 2, curIndex: 1, array: 1,2,3,4
acc: 3, cur: 3, curIndex: 2, array: 1,2,3,4
acc: 6, cur: 4, curIndex: 3, array: 1,2,3,4
10

3.4 Arrow function(Lambda) を使用した reduce() の例

Arrow function を使うと、以下のように関数を直接実装せずに reduce() に関数を渡すことができます。 ここでinitialValueが不要な場合は省略できます。

const arr = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = arr.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

// 0 + 1 + 2 + 3 + 4
console.log(sumWithInitial);

Output:

10
codechachaCopyright ©2019 codechacha