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 圧縮に基づいてアクセス速度を向上します

推薦する

MySQL接続クエリにおけるととwhereの違いの簡単な分析

1. テーブルを作成する テーブル「学生」を作成( `id` int(11) NULLではない、 `...

MySQLでBLOBデータを処理する方法

具体的なコードは次のとおりです。 パッケージ epoint.mppdb_01.h3c; java.i...

Windows 上の MySQL バージョン 5.7 でエンコードを UTF-8 に変更する方法

序文MySQLの勉強を始めたばかりで、公式サイトから最新バージョン5.7.14をダウンロードしました...

MySQL における in と exists の違いの詳細な説明

1. 事前に準備する便宜上、ここで 2 つのテーブルを作成し、そこにいくつかのデータを追加します。果...

MySQL ビューの紹介と基本操作のチュートリアル

序文ビューは、データベース システム内で非常に便利なデータベース オブジェクトです。 MySQL 5...

Facebook 出会い系サイトデザインのユーザー エクスペリエンス分析

<br />関連記事: Facebookの情報アーキテクチャの分析 元記事: http:...

vue フロントエンド HbuliderEslint リアルタイム検証 自動修復設定

目次HBuilderX での ESLint プラグインのインストールカスタム eslint-js ル...

Linux で boost.python を使用して C++ 動的ライブラリを呼び出す方法

序文最近、C++ 動的ライブラリをテストするためにロボット フレームワークを使い始めました。ロボット...

Docker tomcatのメモリサイズを設定する方法

Docker に Tomcat をインストールする場合、大きなファイルをダウンロードするときなど、場...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...

MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明

大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...

Docker での Jenkins と Docker を使用した継続的デリバリー

1. 継続的デリバリーとは何かソフトウェア製品の出力プロセスは、ソフトウェアがいつでもリリースできる...

Day.js をベースにした JavaScript での日付処理のよりエレガントな方法

目次day.js を使用する理由モーメントデイ.js day.js がなければどうなるでしょうか? ...

ページングのどのページでMySQLのレコードをクエリするか

序文実際には、次のような問題に遭遇する可能性があります。特定のレコードの ID がわかっていて、その...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...