Reduceって？
MDNには、下記のような説明が記載されています。
Arrayインターフェイスのメソッドで、配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。
配列の各要素に対して、処理を実行するメソッドですかね。
使い方は、
const arr = [1, 2, 4];
const res = arr.reduce((acc, curr) => acc + curr, 0);
console.log(res); // 7
上記のように。
構文
配列.reduce(コールバック関数, 初期値)
- コールバック関数：配列のそれぞれの要素に対して、呼び出す関数
- 初期値（省略可）
コールバック関数内の引数
- accumlator：前回のコールバック関数の戻り値
- currentValue：現在の要素値
- currentIndex：現在の位置
- array：reduceが呼び出された配列
の4つがある。
const arr = [1, 2, 4];
const res = arr.reduce((accumlator, currentValue, currentIndex, array) => {
console.log(
`accumlator :${accumlator}\t
currentValue: ${currentValue}\t
currentIndex：${currentIndex}\t
array：${array}`
);
return accumlator;
}, 0);
// accumlator :0 currentValue: 1 currentIndex：0 array：1,2,4
// accumlator :0 currentValue: 2 currentIndex：1 array：1,2,4
// accumlator :0 currentValue: 4 currentIndex：2 array：1,2,4
その他使用例
偶数だけを足す
const arr = [1, 2, 4];
const res = arr.reduce((acc, curr) => {
if (curr % 2 == 0) {
return acc + curr;
} else {
return acc + 0;
}
}, 0);
console.log(res); // 6
コールバック関数には、無名関数でなくてもよい。
const arr = [1, 2, 10, 4];
const res = arr.reduce((acc, curr) => getBigNumber(acc, curr), 0);
function getBigNumber(acc, curr) {
if (acc > curr) {
return acc;
} else {
return curr;
}
}
console.log(res); // 10
戻り値は、数値でなくてもよい。
const arr = [1, 2, 10, 4];
const res = arr.reduce((acc, curr) => {
return [...acc, curr * 2];
}, []);
console.log(res); // [ 2, 4, 20, 8 ]
など、使いこなせると便利になりそう。
leetcodeの解答例でも、使用しているものを時々見かける。
leetcodeの問題などでreduceを使用して、使いこなせるようになりたいですね。
とはいえ、少し読みにくいコードになってしまう。
ほかの単純な実装方法があるならば、そちらを使用し、なければreduceを使用するくらいの感覚が良いのかも。
最後のコードは、mapで実装したほうが簡潔に書ける。