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

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

サンプル	reduce
	reduceのサンプル
	ループ処理の前に初期値を渡す
	アロー関数を使用(=>)
	reduce関数の引数を確認

reduce

配列.reduce(function(1個目の要素/戻り値, 2個目の要素・・・) {
});

配列の各値を合計するときなどに使用します。新しい配列を作成します。
1つめの引数は、1週目は配列の1個目の要素で、2週目以降はcallbackの戻り値です。
2つめの引数は、1週目は配列の2個目の要素で、2週目以降は配列の3個目の要素・・・です。

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); //[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行目は、元の配列です。値は変更されていません

ループ処理の前に初期値を渡す

配列.reduce(function(最初の要素/戻り値, 現在の要素) {
},初期値);

初期値は末尾に記述します。

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

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

6行目は初期値です。
100+1+5+9+3=118になっています。

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

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

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

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

アロー関数で表すこともできます。

reduce関数の引数を確認

functionのあとに引数を4つ記載できます。

<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つめの引数は、1週目は配列の1個目の要素で、2週目以降はcallbackの戻り値です。
2つめの引数は、1週目は配列の2個目の要素で、2週目以降は配列の3個目の要素・・・です。
3つめの引数は、2つめの引数の配列の添字です。
4つめの引数は、配列です。