jsはreduceメソッドを使用してコードをよりエレガントにします

序文

実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でreduceメソッドを使用すると、多くの問題を解決し、コードスタイルをよりエレガントにすることができます。

構文を減らす

arr.reduce(コールバック(アキュムレータ、現在の値[、インデックス[、配列]])[、初期値])

パラメータの説明

リデューサー関数は次の 4 つのパラメータを受け取る必要があります。

折り返し電話

アキュムレータ
- アキュムレータはコールバックの戻り値を累積します。これは、コールバックへの最後の呼び出しによって返された累積値、つまり initialValue です。
現在の値
- 処理中の配列内の要素。
現在のインデックス
- これはオプションのパラメータであり、処理中の配列内の現在の要素のインデックスです。 initialValue が指定されている場合、開始インデックスは 0 になります。それ以外の場合は、インデックス 1 から始まります。
ソース配列
- これはオプションのパラメータであり、reduce() を呼び出す配列です。

初期値

コールバック関数が最初に呼び出されたときに最初の引数として使用される値。初期値が指定されていない場合は、配列の最初の要素が使用されます。初期値のない空の配列に対してreduceを呼び出すと、エラーが発生します。

戻り値

関数累積処理の結果

一般的なreduceメソッド

配列内のすべての要素の合計

定数arr = [1, 2, 3, 4];
定数結果 = arr.reduce((acc, cur) => acc + cur)

console.log(結果) // 10

配列内の各要素の出現回数を数える

定数数値 = ['1', '1', '1', '2', '3'];
const countednums = nums.reduce((acc, cur) => { 
  （現在の状態がaccの場合）{
    acc[cur]++;
  }
  それ以外 {
    acc[cur] = 1;
  }
  acc を返します。
}, {});

console.log(countednums); // {1: 3, 2: 1, 3: 1}

配列の平坦化

定数 arr = [['a', 'b'], ['b', 'c'], ['d', 'e']]
定数フラット化 = arr => {
  戻り値 arr.reduce((acc, cur) => {
    acc.concat(cur) を返す
  }, [])
}

console.log(flatten(arr)); // ["a", "b", "b", "c", "d", "e"]

アレイ重複排除

定数arr = [22,341,124,54,4,21,4,4,1,4,4];
定数結果 = arr.sort().reduce((acc, cur) => {
    if(acc.length === 0 || acc[acc.length-1] !== cur) {
        acc.push(cur);
   }
    acc を返します。
}, []);

console.log(結果); // [1, 124, 21, 22, 341, 4, 54]

配列内の最大値を見つける

定数arr = [1, 2, 3, 5, 1]
結果を arr.reduce((acc, cur) => Math.max(acc, cur)) とします。

console.log(結果)

約束は順番に呼び出されます

このメソッドは、実際にプロミスの値を処理し、前のプロミスの値を次のプロミスの値として処理します。

定数prom1 = a => {
  新しいPromiseを返します((resolve => {
    解決する
  }))
}
定数prom2 = a => {
  新しいPromiseを返します((resolve => {
    解決(a * 2)
  }))
}
定数prom3 = a => {
  新しいPromiseを返します((resolve => {
    解決(a * 3)
  }))
}

定数arr = [prom1, prom2, prom3]
定数結果 = arr.reduce((all, current) => {
  すべてを返す。次に(現在)
}, Promise.resolve(10))

結果.then(res => {
  コンソールログ(res);
})

やっと

この記事では、日常の開発でよく使用されるいくつかの削減処理メソッドを紹介します。プロジェクトで直接使用することも、再パッケージ化することもできます。

js の Reduce メソッドを使用してコードをよりエレガントにする方法についての記事はこれで終わりです。js の Reduce メソッドを使用してコードをエレガントにする方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: