JSのreduce()メソッドを使用する5つの方法を例を通して学びます

reduce() メソッドは、配列内の各要素に対して (ユーザーが提供した) リデューサー関数を実行し、単一の出力値を生成します。

reduce() メソッドは、配列内のすべての要素を 1 つの出力値 (数値、オブジェクト、または文字列) に削減します。 reduce() このメソッドには 2 つのパラメータがあり、1 つ目は コールバック関数 、2 つ目は 初期値 です。

コールバック関数

コールバック関数は、配列の各要素に対して実行されます。コールバック関数の戻り値は累積された結果であり、コールバック関数の次の呼び出しのパラメータとして提供されます。コールバック関数は 4 つのパラメータを取ります。

• Accumulator (アキュムレータ) - アキュムレータ累積コールバック関数の戻り値。
• 現在の値 (現在の値) - 配列の現在の要素を処理します。
• Current Index (現在のインデックス) - 配列の現在の要素のインデックスを処理します。
• ソース配列 (ソース配列)

現在のインデックス および ソース配列 はオプションです。

初期値

初期値が指定されている場合、アキュムレータは初期要素として initialValue に設定されます。それ以外の場合は、アキュムレータを初期要素として配列の最初の要素に設定します。

arr.reduce(callback(accumulator, currentValue[,index[,array]])[, initialValue])

以下のコード スニペットでは、最初のアキュムレータ (accumulator) に初期値 0 が割り当てられます。 currentValue は、処理されている numbersArr 配列の要素です。ここでは、currentValue がアキュムレータに追加され、次回コールバック関数が呼び出されるときに、戻り値がパラメータとして提供されます。

const numbersArr = [67, 90, 100, 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);

Output

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削減ユースケース

1.配列のすべての値を合計します

以下のコードでは、studentResult 配列には 5 つの数値があります。 reduce() メソッドを使用して、配列を単一の値に縮小し、studentResult 配列のすべての値と結果を total に割り当てます。

const studentResult = [67, 90, 100, 37, 60];
 
const total = studentResult.reduce((accumulator, currentValue) => accumulator +currentValue, 0);
 
console.log(total); // 354

2. オブジェクト配列内の値の合計

通常、バックエンドからデータをオブジェクト配列として取得するため、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

3. 配列のフラット化

「フラット配列」とは、多次元配列を 1 次元に変換することを指します。以下のコードでは、twoDArr 2 次元配列が oneDArr 1 次元配列に変換されます。ここでは、最初の [1,2] 配列がアキュムレータ accumulator に割り当てられ、次に 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 ]

4. 属性によるオブジェクトのグループ化

オブジェクトの属性に従って、reduce() メソッドを使用してオブジェクト配列をいくつかのグループに分割できます。この概念は、次のコード スニペットを通じて明確に理解できます。ここで、result オブジェクト配列には 5 つのオブジェクトがあり、それぞれに subject および 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 }
 ]
}

5.配列内の重複を削除

次のコード スニペットでは、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 の初心者の方には、この記事が役に立ちます。

英語の元のアドレス: https://medium.com/javascript-in-plain-english/5-use-cases-for-reduce-in-javascript-61ed243b8fef

著者: wathsala danthasinghe

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がJSのreduce()メソッドを使用する5つの方法を例を通して学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。