長い間、reduce() メソッドの具体的な使い方を理解するのが難しく、ほとんど使用していませんでした。実は、これをきちんと理解できれば、いろいろなところで使えるようになるので、今日は JS での Reduce() の使い方について簡単に説明します。 1. 文法
で、 複雑に見えますか?それは問題ではありません。単にそのように見えるだけです。実際によく使用されるパラメーターは 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 番目の項目を検索する。見つからない場合は、初期化配列に項目を追加する ④ ... 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 を返します。 }, []); 作成機能 関数 compose(...funs) { (関数の長さが0の場合){ 引数 => 引数を返します。 } 関数の長さが1の場合 funs[0]を返します。 } funs.reduce((a, b) => (...arg) => a(b(...arg))) を返します。 } JS における Reduce() メソッドの使用法の概要については、これで終わりです。より関連性の高い js の Reduce() メソッドの内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQLのunion allとunionの違いを簡単に理解する
>>: Nginx は gzip 圧縮に基づいてアクセス速度を向上します
この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
<a href = "http://" style = "cur...
この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...
UPDATE はロックしますか?以下のような場合、SQL文はロックされますか? テーブル1を更新しま...
サーバーに複数のサイトを展開するには、異なるサイトにアクセスするために複数のポートを開く必要がありま...
序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...
目次方法1: 関数を直接呼び出す方法2: provide / inject (静的更新) を使用する...
1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...
目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...
Docker が今日非常に人気がある理由は、主にその軽量性、迅速な展開、およびリソースの利用にありま...
目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...
v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...
システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...
設置環境WIN10 VMware Workstation Pro 15.0.0 ビルド 101344...
会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...