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オブジェクト
- 上記のサンプルは、Arrayオブジェクトのメソッドです。
- Arrayオブジェクトは配列を扱うためのオブジェクトです。
- 以下はMDNのArrayオブジェクトのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
関連の記事