JavaScript reduce 配列を1つの値にして出力

nas2017/04/12

JavaScriptの配列のreduceのサンプルです。

目次 reduceとは
reduceのサンプル
アロー関数を使用(=>)
reduce関数の引数を確認
Arrayオブジェクト

reduceとは

配列.reduce(callback( accumulator, currentValue[, index[, array]] ) {
}[, initialValue]);
  • 配列の各値を関数で実行し、1つの値で新しい配列を作成します。
  • 配列の各値を合計するときなどに使用します。
  • 1つめの引数は、配列の最初の値とcallbackの戻り値です。
  • 2つめの引数は、配列の現在の値です。
  • 3つめの引数は、配列の現在にindex値です。
  • 4つめの引数は、使用している配列です。

reduceのサンプル

<script>
  const arr = [1, 5, 9, 3];

  const num = arr.reduce(function (b, c) {
    return b + c;
  });
  console.log(num); //18
  console.log(arr); //(3) [1,5,9,3]
</script>

4行目の引数は、以下のように実行されます。
1回目は、引数のbには1つめの配列の値(1)、cには2つめの配列の値(5)がはいります。
→戻り値は 1 + 5 = 6
2回目は、引数のbには1回めの戻り値(6)、cには3つめの配列の値(9)がはいります。
→戻り値は 6 + 9 = 15
3回目は、引数のbには2回めの戻り値(15)、cには4つめの配列の値(3)がはいります。
→戻り値は 15 + 3 = 18

7行目は、新規で作成された配列のcです。
8行目は、元の配列です。値は変更されていません

末尾の引数をセットした場合(initialValue)

<script>
  const arr1 = [1, 5, 9, 3];

  const num = arr1.reduce(function (b, c) {
    return b + c;
  }, 100);
  console.log(num); //118
</script>

6行目は、末尾の引数です。ループ時の最初の値として渡されます。

アロー関数を使用(=>)

<script>
  const arr = [1, 5, 9, 3];

  num = arr.reduce((b, c) => b + c);

  console.log(num); //18
</script>

アロー関数は、=>を使用します。

reduce関数の引数を確認

<script>
  const arr = [1, 2, 3, 4];

  const num = arr.reduce(function (acc, value, index, array) {
    console.log(acc); //1 3 6
    console.log(value); //2 3 4
    console.log(index); //1 2 3
    console.log(array); //[1, 2, 3, 4]が3回出力される
    return acc + value;
  });
  console.log(num); //10
</script>

1つめの引数は、配列の最初の値と9行目の戻り値です。
2つめの引数は、配列の値です。
3つめの引数は、配列の添字です。
4つめの引数は、配列です。

Arrayオブジェクト

関連の記事

JavaScript 配列の仕組みと使い方のサンプル
JavaScript if文で配列を比較するサンプル

△上に戻る