JS での Reduce() メソッドの使用の概要

JS での Reduce() メソッドの使用の概要

長い間、reduce() メソッドの具体的な使い方を理解するのが難しく、ほとんど使用していませんでした。実は、これをきちんと理解できれば、いろいろなところで使えるようになるので、今日は JS での Reduce() の使い方について簡単に説明します。

1. 文法

arr.reduce(関数(prev,cur,index,arr){
...
}, 初期化);

で、
arr は元の配列を表します。
prev は最後のコールバック呼び出しの戻り値、または初期値 init を表します。
cur は現在処理中の配列要素を表します。
index は現在処理中の配列要素のインデックスを表します。init 値が指定されている場合、インデックスは 0 になり、それ以外の場合はインデックスは 1 になります。
init は初期値を示します。

複雑に見えますか?それは問題ではありません。単にそのように見えるだけです。実際によく使用されるパラメーターは prev と cur の 2 つだけです。次に、例に従って具体的な使い方を見てみましょう〜

2. 例

まず元の配列を提供します:

var arr = [3,9,4,3,6,0,9];

以下の要件を実現するには、reduce() を使用した解決方法をはじめ、さまざまな方法があり、これも比較的簡単に実装できます。

1. 配列項目の合計を求める

var sum = arr.reduce(関数 (prev, cur) {
    prev + cur を返します。
},0);

初期値 0 が渡されるため、最初は prev の値が 0 で、cur の値は配列の最初の項目 3 です。加算後の戻り値は、次のラウンドのコールバックの prev 値として 3 になり、その後、次の配列項目に加算され続け、すべての配列項目の合計が完了して返されます。

2. 配列項目の最大値を見つける

var max = arr.reduce(関数 (prev, cur) {
    Math.max(prev,cur) を返します。
});

初期値が渡されていないため、prev の値は配列の最初の項目である 3 になり、cur の値は配列の 2 番目の項目である 9 になります。2 つの値の最大値を取得した後、次のコールバック ラウンドに進みます。

3. アレイの重複排除

var newArr = arr.reduce(関数 (prev, cur) {
    prev.indexOf(cur) === -1 && prev.push(cur);
    前に戻る;
},[]);

実装の基本原則は次のとおりです。

① 空の配列を初期化する ② 初期化配列で重複排除が必要な配列の最初の項目を検索する。見つからない場合(空の配列では確実に見つからない)、初期化配列に項目を追加する ③ 初期化配列で重複排除が必要な配列の 2 番目の項目を検索する。見つからない場合は、初期化配列に項目を追加する ④ ...
⑤ 初期化配列内で重複排除が必要な配列のn番目の項目を検索します。見つからない場合は、初期化配列に項目を追加します。 ⑥ 初期化配列を返します。

3. その他の関連方法

1. 右を減らす()

このメソッドの使用方法は、トラバース順序が逆であることを除いて、実際にはreduce()と同じです。配列の最後の項目から開始し、最初の項目まで順方向にトラバースします。

2. forEach()、map()、every()、some()、filter()

詳細については、こちらをクリックしてください → JavaScript の配列走査 forEach() および map() メソッドと互換性のある記述方法の紹介

要点の要約:

Reduce() は配列をマージするメソッドです。forEach()、map()、filter() などの反復メソッドと同様に、配列内の各項目を走査します。ただし、reduce() は、他の反復メソッドでは実現できない、前の配列項目の走査結果と現在の走査項目の結果を同時に計算できます。

W3Cの文法をまず見てみる

配列.reduce(関数(合計、現在の値、現在のインデックス、arr)、初期値);
/*
  合計: 必須。初期値、または計算が完了した後の戻り値。
  currentValue: 必須。現在の要素。
  currentIndex: オプション。現在の要素のインデックス。                     
  arr: オプション。現在の要素が属する配列オブジェクト。
  initialValue: オプション。関数に渡される初期値は、total の初期値と同じです。
*/

一般的な使用法

配列の合計

定数arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num);
<!-- 初期値を合計に設定します -->
定数arr = [12, 34, 23];
const sum = arr.reduce((total, num) => total + num, 10); // 初期値として 10 を合計します<!-- オブジェクト配列の合計 -->
var 結果 = [
  { 科目: '数学'、スコア: 88 },
  { 件名: '中国語'、スコア: 95 },
  { 件名: '英語'、スコア: 80 }
];
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, 0); 
const sum = result.reduce((accumulator, cur) => accumulator + cur.score, -10); // 合計スコアから 10 ポイントを引いた値

高度な使用法: 配列オブジェクトでの使用

定数a = [23,123,342,12];
const max = a.reduce(function(pre,cur,inde,arr){return pre>cur?pre:cur;}); // 342
<!-- たとえば、「長男、次男、三男」を生成します -->
const objArr = [{name: 'Old One'}, {name: 'Old Two'}, {name: 'Old Three'}];
const res = objArr.reduce((pre, cur, index, arr) => {
  (インデックス === 0)の場合{
    cur.name を返します。
  }
  そうでない場合、(インデックス === (arr.length - 1)) {
    pre + '和' + cur.name を返します。
  }
  それ以外 {
    pre + '、' + cur.name を返します。
  }
}, '');

文字列に文字が出現する回数を調べる

定数 str = 'sfhjasfjgfasjuwqrqadqeiqsajsdaiwqdaklldflas-cmxzmnha';
const res = str.split('').reduce((accumulator, cur) => {accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1; return accumulator;}, {});

配列からオブジェクトへ

<!-- 特定のルールに従って配列に変換します-->

var arr1 = [2, 3, 4, 5, 6]; // 各値を二乗します var newarr = arr1.reduce((accumulator, cur) => {accumulator.push(cur * cur); return accumulator;}, []);

高度な使用法多次元オーバーレイ実行操作

<!-- ID に従ってストリームを取り出します -->

var streams = [{name: 'テクノロジー', id: 1}, {name: 'デザイン', id: 2}];
var obj = streams.reduce((accumulator, cur) => {accumulator[cur.id] = cur; return accumulator;}, {});

高度な使用法多次元オーバーレイ実行操作

<!-- 各科目の重みは異なりますので、結果を教えてください-->

var 結果 = [
  { 科目: '数学'、スコア: 88 },
  { 件名: '中国語'、スコア: 95 },
  { 件名: '英語'、スコア: 80 }
];
var ディス = {
    数学: 0.5、
    中国語: 0.3、
    英語: 0.2
};
var res = result.reduce((accumulator, cur) => dis[cur.subject] * cur.score + accumulator, 0);

<!-- 難易度を上げると、国によって商品の為替レートが異なり、合計価格がわかります -->

var 価格 = [{価格: 23}, {価格: 45}, {価格: 56}];
var レート = {
  私たち: '6.5',
  eu: '7.5'、
};
var 初期状態 = {usTotal: 0, euTotal: 0};
var res = prices.reduce((accumulator, cur1) => Object.keys(rates).reduce((prev2, cur2) => {
  console.log(アキュムレータ、cur1、prev2、cur2);
  accumulator[`${cur2}Total`] += cur1.price * rates[cur2];
  アキュムレータを返します。
}, {}), 初期状態);

var manageReducers = 関数() {
  関数(状態、項目)を返す{
    Object.keys(rates).reduce((nextState, key) => { を返します。
        state[`${key}Total`] += item.price * rates[key];
        状態を返します。
      }, {});
  }
};
var res1 = prices.reduce(manageReducers(), initialState);

2D配列を平坦化する

var arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
var res = arr.reduce((x, y) => x.concat(y), []);

オブジェクト配列の重複排除

定数ハッシュ = {};
  チャットリスト = チャットリスト.reduce((obj, next: Object) => {
    定数hashId = `${next.topic}_${next.stream_id}`;
    if (!hash[hashId]) {
      ハッシュ[`${next.topic}_${next.stream_id}`] = true;
      obj.push(次へ);
    }
    obj を返します。
  }, []);

作成機能
Redux Compose ソースコード実装

関数 compose(...funs) {
    (関数の長さが0の場合){
        引数 => 引数を返します。
    }
    関数の長さが1の場合
       funs[0]を返します。
    }
    funs.reduce((a, b) => (...arg) => a(b(...arg))) を返します。

}


JS における Reduce() メソッドの使用法の概要については、これで終わりです。より関連性の高い js の Reduce() メソッドの内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptのreduceの基本的な使い方を詳しく説明します
  • JavaScript 配列のreduce() メソッド
  • JS 配列の push、unshift、pop、shift メソッドの実装と使用例
  • JS で pop を使用する例
  • jsはクラスを使用してポップアップウィンドウコンポーネントをカプセル化します
  • JavaScript 配列の Reduce メソッドと Pop メソッド

<<:  MySQLのunion allとunionの違いを簡単に理解する

>>:  Nginx は gzip 圧縮に基づいてアクセス速度を向上します

推薦する

Dockerを使用してGitlabを素早くデプロイする方法

1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...

Ubuntu 20.04 中国語入力方法のインストール手順

この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...

データベース管理における 19 の MySQL 最適化方法

MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...

MySQL の時間差関数 TIMESTAMPDIFF と DATEDIFF の使用

時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

Hadoopカウンターとデータクリーニングの適用

データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...

いくつかの重要なMySQL変数

MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...

HTML で Flash を読み込む方法 (2 つの実装方法)

最初の方法: CSSコード:コードをコピーコードは次のとおりです。 .b970-a{幅:970px;...

CSSはコーナーカット+ボーダー+投影+コンテンツ背景色のグラデーション効果を実現します

CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...

MySQL データベース内の varchar 型の数値のサイズを比較する方法

テストテーブルを作成する -- ---------------------------- -- ch...

学生情報管理システムを実装するためのJavaScript+HTML

目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

Dockerは異常なコンテナ操作を排除する

この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...

中国のウェブサイトユーザーエクスペリエンスランキング

<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...