reduce

ややこしくて、説明を見かけても薄目でしか見てなかったreduceの使い方のお勉強。

基本

まずは基本の所から。

const arr = [...Array(10).keys()];//[0,1,2,3,4,5,6,7,8,9]
arr.reduce((prev,cur)=>(prev+cur));//45

prevとcurの引数については、以下の説明があります。

previousValue: 前回の callbackFn の呼び出し結果の値です。初回の呼び出しでは initalValue が指定されていた場合はその値、そうでない場合は array[0] の値です。 currentValue: 現在の要素の値です。初回の呼び出しでは initalValue が指定された場合は array[0] の値であり、そうでない場合は array[1] の値です。

ってことで、prevには前回までの処理結果、curには次に呼び出す配列の値が入ります。
今回の処理の流れを順に追っていくとこうなります。

[0,1,2,3,4,5,6,7,8,9]
1回目：0 + 1
2回目：1 + 2
3回目：3 + 3
4回目：6 + 4
5回目：10 + 5
6回目：15 + 6
7回目：21 + 7
8回目：28 + 8
9回目：36 + 9
戻り値：45

配列のsum()を作ることができました。

currentIndex,array

3つめの引数には、配列のindexが入ります。また、4つめの引数にはreduce処理を投げている配列が入ります。

const arr = [...Array(10).keys()];//[0,1,2,3,4,5,6,7,8,9]
arr.reduce((prev,cur,i,array)=>(prev+cur+array[i]));//90

処理の流れはこう。

[0,1,2,3,4,5,6,7,8,9]
1回目：0 + 1 + 1//[1]
2回目：2 + 2 + 2//[2]
3回目：6 + 3 + 3//[3]
4回目：12 + 4 + 4//[4]
5回目：20 + 5 + 5//[5]
6回目：30 + 6 + 6//[6]
7回目：42 + 7 + 7//[7]
8回目：56 + 8 + 8//[8]
9回目：72 + 9 + 9//[9]
戻り値：90

initialValue

reduceでは初期値を指定することができます。指定しない場合は、上記のように配列の最初の要素が初期値になります。
指定する場合はこう。

const arr = [...Array(10).keys()];//[0,1,2,3,4,5,6,7,8,9]
arr.reduce((prev,cur)=>(prev+cur),10);//55

ちなみに、初期値がある場合はcurrentIndexのスタートも0になるみたいですね。

sum関数、max関数

配列.sum()を作ることができたので、配列.max()を作ってみます。

const getMax = (arr) => arr.reduce((prev,cur)=>prev>cur ? prev : cur);
const getSum = (arr) => arr.reduce((prev,cur)=>(prev+cur));
const arr = [94,2,44,6,22,4,100,77];
getMax(arr);//100
getSum(arr);//349

前より理解することができました。複雑な処理も作れそうですね。