JavaSprictのreduceについて

reduceについて

reduce()メソッドは、配列のそれぞれの要素に対して、順番通りに、ユーザーが提供した「縮小」コールバック関数(ある関数を呼び出す時に、引数に指定する別の関数のこと)を呼び出しました。その際、直前の要素における計算結果の返り値を渡します。配列の全ての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

reduce()メソッドの基本的な使い方

reduceメソッドの引数は主に二つあります。一つはコールバック関数、二つ目は初期値になります。コールバック関数の役割は、配列に格納されている要素に対して適用する処理を定義します。初期値はコールバック関数の初回呼び出し時に設定する値です。

コールバックの初回実行時には「直前の計算の返り値」は存在しません。初期値が与えられた場合は、代わりに使用されることがあります。そうでない場合は、配列の要素0が初期値として使用され、次の要素（０の位置ではなく1の位置）から反復処理が開始されます。

const foods = [1, 2, 3, 4, 5];　

　const curry = foods.reduce(function (result, current) {
　 return result + current;
　}, 0);

　console.log(curry); 

// =>15

このようにreduceは配列の要素を一個ずつ引数で指定した関数の処理を実行していきます。
配列.reduce(function(累積値,要素){})です。

mapメソッドとreduceメソッドの違い

map()メソッドでできること

map()メソッドはforEachメソッドに似ていますが、オリジナルとは別の新しい配列を作成します。

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);

//=> 2,8,18,32

それぞれの要素に何かしらの処理をした結果の、新しい配列を得ることができるので便利です。例になりますが、配列[1,2,3]をmap()メソッドで2倍にすると[2,4,6]という新しい配列を生成されることができます。処理をして新しい配列を作ります。
それに対し、reuduceは処理をして一つの値を取得します。ここが違いになります。

reduceのさまざまな使い方

プリミティブ

const numbers = [1000, 2000, 3000, 4000, 5000];

const jonh = numbers.reduce((prev, current) => prev + current, 10);
console.log(jonh);

const average = jonh / numbers.length;
console.log(average);

const max = numbers.reduce((prev, current) => prev > current ? prev : current);
console.log(max);

//=> 合計が15010
//=> 平均値が3002
//=> 最大値が5000
//=> 最小値が1000

このように、合計、平均値、最大値、最小値を算出することができる。

オブジェクト

対象とするkeyを指定するだけで、基本的にはプリミティブと同じ

const members = [
    { name: "バルセロナ", score: 10, dep: 'sales1' },
    { name: "レアル", score: 20, dep: 'sales2' },
    { name: "パリ", score: 30, dep: 'sales2' },
]

const scorejonh = members.reduce((prev, current) => {
    return prev + current.score;
}, 0);
console.log(scorejonh);

const maxScore = members.reduce((prev, current) => {
    return prev.score > current.score ? prev.score : current.score;
}, 0);
console.log(maxScore);

合計と最大値を算出することができました。

まとめ

reduceについて書いてみました。