ホームページ > 記事 > ウェブフロントエンド > JSのreduce()メソッドを使用する5つの方法を例を通して学びます
reduce() メソッドは、配列内の各要素に対して (ユーザーが提供した) リデューサー関数を実行し、単一の出力値を生成します。
reduce()
メソッドは、配列内のすべての要素を 1 つの出力値 (数値、オブジェクト、または文字列) に削減します。 reduce()
このメソッドには 2 つのパラメータがあり、1 つ目は コールバック関数 、2 つ目は 初期値 です。
コールバック関数は、配列の各要素に対して実行されます。コールバック関数の戻り値は累積された結果であり、コールバック関数の次の呼び出しのパラメータとして提供されます。コールバック関数は 4 つのパラメータを取ります。
現在のインデックス
および ソース配列
はオプションです。
初期値が指定されている場合、アキュムレータは初期要素として 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
以下のコードでは、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
通常、バックエンドからデータをオブジェクト配列として取得するため、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 次元に変換することを指します。以下のコードでは、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 ]
オブジェクトの属性に従って、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 } ] }
次のコード スニペットでは、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 サイトの他の関連記事を参照してください。