reduce() メソッドは、配列の各要素に対してリデューサ関数を実行し、単一の出力値を返します。
reduce() メソッドは、配列のすべての要素を 1 つの出力値 (数値、オブジェクト、または文字列) に変換します。 reduce() メソッドには 2 つの引数があり、最初の引数はコールバック関数、 そして 2 番目の引数は初期値です。
コールバック関数
コールバック関数は、配列の各要素に対して実行されます。コールバック関数の戻り値は累積結果であり、コールバック関数の次の呼び出しの引数として提供されます。コールバック関数には4つのパラメータがあります。
- Accumulator- アキュムレータは、コールバック関数の戻り値を累積します。
- Current Value- 配列の現在の要素を処理します。
- Current Index- 配列の現在の要素のインデックスを扱います。
- Source Array
現在のインデックスとソース配列はオプションです。
初期値
初期値が指定されている場合、アキュムレータに初期値として initialValue を設定し ます。それ以外の場合は、アキュムレータに配列の最初の要素を初期要素として設定し ます。
arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])
次のコード・スニペットでは、最初のアキュムレータに初期値 0 が代入され、 currentValue は処理中の numbersArr 配列の要素です。ここでは、currentValue がアキュムレータに追加され、戻り値がコールバック関数 の次の呼び出しの引数として供給されます。
const numbersArr = [0, 37, 60];
const total = numbersArr.reduce(function(accumulator, currentValue){
console.log("accumulator is " + accumulator + " current value is " + currentValue);
return accumulator + currentValue;
}, 0);
console.log("total : "+ total);
輸出
accumulator is 0 current value is 67
accumulator is 67 current value is 90
accumulator is 157 current value is 100
accumulator is 257 current value is 37
accumulator is 294 current value is 60
total : 354
JavaScript reduce
配列のすべての値を合計します。
以下のコードでは、studentResult 配列に 5 つの数値があります。reduce() メソッドを使用して、配列を単一の値に縮小し、studentResult 配列のすべての値と結果を total に代入します。
const studentResult = [0, 37, 60];
const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);
console.log(total); // 354
オブジェクト配列の値の合計
通常、データはオブジェクトの配列としてバックエンドから取得されるので、 reduce() メソッドはフロントエンドの管理ロジックに役立ちます。以下のコードでは、studentResultオブジェクト配列には3つの科目があり、ここでcurrentValue.marksはstudentResultオブジェクト配列の各科目の点数を取得します。
const studentResult = [
{ subject: '数学', marks: 78 },
{ subject: '物理', marks: 80 },
{ subject: '化学', marks: 93 }
];
const total = studentResult.reduce((accumulator, currentValue) => accumulator + currentValue.marks, 0);
console.log(total); // 251
配列の平坦化
「配列を広げる」とは、多次元配列を1次元配列に変換することです。次のコードでは、2 次元配列 twoDArr を 1 次元配列 oneDArr に変換しています。ここでは、最初の [1,2] 配列がアキュムレータに代入され、次に twoDArr 配列の残りの各要素がアキュムレータに接続されます。
const twoDArr = [ [1,2], [3,4], [5,6], [7,8] , [9,10] ];
const oneDArr = twoDArr.reduce((accumulator, currentValue) => accumulator.concat(currentValue));
console.log(oneDArr);
// [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
属性によるオブジェクトのグループ化
オブジェクトのプロパティに応じて、 reduce() メソッドを使用してオブジェクトの配列をグループに分けることができます。この概念は、以下のコード・スニペットで明確に理解できます。ここでは、結果のオブジェクト配列には 5 つのオブジェクトがあり、それぞれに subject 属性と marks 属性があります。marks 属性が 50 以上であれば合格、そうでなければ不合格となります。 reduce() を使用して、結果を合格と不合格にグループ化します。まず、initialValue がアキュムレータに代入され、次に、push() メソッドが、条件をチェックした後に、現在のオブジェクトをオブジェクトの配列として pass および fail プロパティに追加します。
const result = [
{subject: '物理', marks: 41},
{subject: '化学', marks: 59},
{subject: '高度な数学', marks: 36},
{subject: '応用数学', marks: 90},
{subject: ' ', marks: 64},
];
let initialValue = {
pass: [],
fail: []
}
const groupedResult = result.reduce((accumulator, current) => {
(current.marks >= 50) ? accumulator.pass.push(current) : accumulator.fail.push(current);
return accumulator;
}, initialValue);
console.log(groupedResult);
輸出
{
pass: [
{ subject: '化学', marks: 59 },
{ subject: 応用数学, marks: 90 },
{ subject: '英語', marks: 64 }
],
fail: [
{ subject: 「物理学, marks: 41 },
{ subject: 高度な数学, marks: 36 }
]
}
配列内の重複項目の削除
以下のコード・スニペットでは、plicatedArr 配列から重複が削除されます。まず、空の配列が初期値としてアキュムレータに代入されます。accumulator.includes() duplicatedArr 配列の各要素がすでにアキュムレータで使用可能であるかどうかを チェックします。currentValue がアキュムレータにない場合は、push() を使用して追加します。
const duplicatedsArr = [1, 5, 6, 5, 7, 1, 6, 8, 9, 7];
const removeDuplicatedArr = duplicatedsArr.reduce((accumulator, currentValue) => {
if(!accumulator.includes(currentValue)){
accumulator.push(currentValue);
}
return accumulator;
}, []);
console.log(removeDuplicatedArr);
// [ 1, 5, 6, 7, 8, 9 ]
まとめ
この記事では、配列の reduce() メソッドについて説明します。まず reduce() メソッドを紹介し、簡単な例を使ってその挙動を説明します。最後に、reduce() メソッドの最も一般的な 5 つの使用例について、例を挙げて説明します。もしあなたが JavaScript の初心者なら、この記事はきっと役に立つでしょう。
