ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScript配列の解析reduce()メソッドの使用例

著者：Eve Cole 更新時間：2023-04-04 10:23:26

序文

今日はこの方法を詳しく紹介しますので、お役に立てれば幸いです。

これは、reduce の基本的な使用法です。

 var arr = [1, 2, 3];
関数リデューサー(parmar1, parmar2){
}
arr.reduce(リデューサー)

Reduce は、配列の操作に役立つ配列プロトタイプ オブジェクトのメソッドです。これは、リデューサーと呼ばれる別の関数を引数として受け取ります。

レデューサは 2 つのパラメータを取ります。最初のパラメータ param1 は、最後の Reducer 実行の結果です。リデューサを初めて実行する場合、param1 のデフォルト値は配列の最初の要素の値です。

reduce メソッドは、for ループと同様に、配列内の各要素をループします。そして、現在の値をパラメータ 2 としてループに渡します。

配列を走査した後、reduce は最後のレデューサーによって計算された結果を返します。

詳細な例を見てみましょう。

 var arr = ['a', 'b', 'c', 'd', 'e'];
関数 add(x, y) {
x + y を返します。
}
arr.reduce(追加)

次に、上記のコードがどのように実行されるかを見てみましょう。

このコードでは、reducer は add です。

まず、初めて add を実行するため、配列の最初の要素 'a' が add の最初のパラメーターとして扱われ、配列の 2 番目の要素 'b' からループが開始されます。今回、「b」は追加する 2 番目の引数です。

最初の計算の後、結果「ab」が得られます。この結果はキャッシュされ、次の加算計算で param1 として使用されます。同時に、配列の 3 番目のパラメーター 'c' が add の param2 として使用されます。

同様に、reduce は配列内の要素を処理し続け、追加する引数として「abc」と「d」を実行します。

最後に、配列内の最後の要素を走査した後、計算結果が返されます。

これで、「abcde」という結果が得られました。

したがって、reduce も配列を走査する方法であることがわかります。配列内の各要素の値を順番に取得し、reducer 関数を実行します。

しかし、上記のループには調和のとれた美しさがないことがわかります。配列の最初の要素「a」を初期 param1 として取得し、配列の 2 番目の要素をループして param2 を取得するためです。

実際、reduce 関数の param1 の初期値として、reduce の 2 番目のパラメーターを指定すると、配列の最初の要素から始まるループで param2 が取得されます。

コードは次のとおりです。

 var arr = ['a', 'b', 'c', 'd', 'e'];
関数 add(x, y) {
x + y を返します。
}
arr.reduce(追加, 's')

今回は、まず param1 として 's' を指定してリデューサーを呼び出し、最初の要素から配列を反復処理します。

したがって、この構文を使用して最初のコード スニペットを書き直すことができます。

 var arr = ['a', 'b', 'c', 'd', 'e'];
関数 add(x, y) {
x + y を返します。
}
arr.reduce(追加, '')

次に、実際のプログラミングの章に入り、reduce の強力なパワーを体験します。

1. 累積と累積乗算

配列内のすべての要素の合計を取得したい場合はどうしますか?

一般的には、次のように書くことができます。

関数累積(arr) {
合計 = 0 とします。
for (let i = 0; i < arr.length; i++) {
合計 = 合計 + arr[i];
}
合計を返します。
}

もちろん他の書き方もあるかもしれませんが、forループを使う限りコードは冗長になってしまいます。

次に、上記の累積関数が何を行うかを見てみましょう。

  • 初期合計をゼロに設定する

  • 配列の最初の要素を取得して合計します。

  • 前のステップの結果を合計でキャッシュします

  • 配列内の他の要素を順番に取り出し、上記の操作を実行します

  • 最終結果を返す

上記の手順を言葉で説明すると、reduce の使用に準拠していることが明らかです。したがって、reduce を使用して上記のコードを書き直すことができます。

関数累積(arr) {
関数レデューサー(x, y) {
x + yを返す
}
戻り arr.reduce(reducer, 0);
}

アロー関数の使用に慣れている場合は、上記のコードがよりきれいに見えるでしょう。

関数累積(arr) {
return arr.reduce((x, y) => x + y, 0);
}

たった 1 行のコードで完了です。

もちろん、累積乗算と累積はまったく同じです。

関数乗算(arr) {
return arr.reduce((x, y) => x * y, 1);
}

多くの場合、合計するときに重みを追加する必要があります。これにより、reduce の優雅さをよりよく反映できます。

定数スコア = [
{ スコア: 90、件名: "HTML"、重み: 0.2 }、
{ スコア: 95、件名: "CSS"、重み: 0.3 }、
{ スコア: 85、件名: "JavaScript"、重み: 0.5 }
];
const result =scores.reduce((x, y) => x + y.score * y.weight, 0);

2.配列の最大値と最小値を取得する

配列の最大値と最小値を取得したい場合は、次のように記述できます。

関数 max(arr){
max = arr[0] とします。
for (arr の ele を指定) {
if(ele > max) {
最大 = エレ;
}
}
最大値を返します。
}

これは前と同じで、reduce を使用すると 1 行のコードで実行できます。

 arr = [3.24, 2.78, 999]; とします。
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

3. 配列内の要素の出現頻度を計算します。

多くの場合、配列内の各要素の出現数をカウントする必要があります。 reduce メソッドはこれを実現するのに役立ちます。

関数 countFrequency(arr) {
return arr.reduce(function(result, ele){
// この要素が以前にカウントされたかどうかを判断します
if (result.get(ele) != 未定義) {
/**
* この要素が以前にカウントされている場合、
* 発生頻度が 1 増加します
*/
result.set(ele, result.get(ele) + 1)
} それ以外 {
/**
* この要素が以前にカウントされていない場合、
* 発生頻度を 1 に設定します
*/
result.set(ele, 1);
}
結果を返します。
}, new Map());
}

配列内の要素はオブジェクト型である可能性があり、オブジェクトのキーは文字列またはシンボル型のみである可能性があるため、統計頻度を格納するためにオブジェクトの代わりにマップ オブジェクトを使用することに注意してください。

以下に 2 つの例を示します。

同様に、文字列内の各文字の頻度をカウントしたい場合は、まず文字列を文字配列に変換してから、上記の方法に従うことができます。

 str = 'helloworld'; とします。
str.split('').reduce((result, currentChar) => {
結果[現在の文字] ? 結果[現在の文字] ++ : 結果[現在の文字] = 1;
結果を返します。
}、{})

文字タイプはオブジェクトのキーとして使用できるため、ここではマップを使用しません。

4. 複数の配列のフラット化

関数 Flat(arr = []) {
return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}

配列内の各要素は、reduce を通じて順番にアクセスされます。要素が依然として配列であることが判明した場合は、フラット メソッドを再帰的に呼び出します。

関連記事