長い間、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 圧縮に基づいてアクセス速度を向上します
1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...
この記事では、Google 入力方法をインストールします。実は以前はSogou入力方式を使っていたの...
MySQL データベースを最適化すると、データベースの冗長性を削減できるだけでなく、データベースの実...
時間差関数 TIMESTAMPDIFF と DATEDIFF の使用SQL ステートメント、特にスト...
以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...
データクリーニング (ETL)コアビジネスの MapReduce プログラムを実行する前に、まずデー...
MySQL 変数は数多くありますが、その中には注目に値するものもあります。ここでは、参考までに、注目...
最初の方法: CSSコード:コードをコピーコードは次のとおりです。 .b970-a{幅:970px;...
CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...
テストテーブルを作成する -- ---------------------------- -- ch...
目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...
次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...
イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
<br />ユーザーエクスペリエンスは中国のウェブサイトでますます重視されており、ユーザ...