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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript における Reduce() の 5 つの基本的な使用例
  • JavaScript 配列のreduce() メソッド
  • 8 JSのreduce使用例とreduce操作方法
  • JS での Reduce() メソッドの使用の概要
  • JavaScript Reduceの詳しい説明
  • JavaScriptのreduceの基本的な使い方を詳しく説明します

<<:  Linux プラットフォームでの Zabbix エージェントのインストールと設定方法

>>:  MySQL Strict Modeの知識ポイントの詳細な説明

推薦する

MySql マスタースレーブレプリケーションメカニズムの包括的な分析

目次マスタースレーブレプリケーションメカニズム非同期レプリケーション準同期レプリケーションマスタース...

Nginx で limit_req_zone を使用して同じ IP へのアクセスを制限する方法

Nginx は、ngx_http_limit_req_module モジュールの limit_req...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...

MySQLが内部一時テーブルを使用するタイミングについて簡単に説明します。

組合執行分析を簡単にするために、次のSQLを例として使用します。 テーブル t1 を作成します ( ...

jquery-multiselect を使用した IE6 のバグの解決方法

jquery-multiselect (ドロップダウン ボックスをチェックボックス付きの複数選択コン...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

例を通してMySQLの更新がテーブルをロックするかどうかを判定する

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...

MySQL パスワードに特殊文字が含まれている場合とコマンドラインからログインする場合

サーバーでは、データベースにすばやくログインするために、通常は mysql -hhost -uuse...

jQueryはhide()とtoggle()関数を使用してカメラブランド表示の非表示機能を実現します。

最近、jQuery を学習しているときに、show()、hide()、toggle() 関数に出会い...

見落としがちなVue.jsのAPIを詳しく解説

目次次のチェックv-model 構文シュガー.sync 修飾子$セット計算プロパティセット要約する次...

HTML+CSS+JSはナビゲーションバーのスクロールグラデーション効果を実現します

目次まず効果を見てみましょう:成し遂げる:要約:まず効果を見てみましょう: 成し遂げる: 1. ナビ...

Linux での syslogd および syslog.conf ファイルの解釈

1: syslog.conf の概要異なるタイプの Unix の場合、標準の UnixLog システ...

Navicat 経由で MySQL にリモート接続する方法

Navicat を使用して IP 経由で直接接続すると、次のようなさまざまなエラーが報告されます: ...