序文Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が単一の値に減らされます。 Reduce は、配列内の削除された要素や割り当てられていない要素を除いて、配列内の各要素に対してコールバック関数を順番に実行し、初期値 (または前のコールバック関数の戻り値)、現在の要素値、現在のインデックス、および Reduce が呼び出される配列の 4 つのパラメータを受け入れます。 Javascript の配列メソッドの中で、reduce は map、filter、forEach などのよく使用される反復メソッドに比べて見落とされがちです。今日は、実際の開発における、reduce のすばらしい使い方を探ってみましょう。まずは、reduce 構文から始めましょう。 1. 文法配列.reduce(関数(前、現在、インデックス、arr)、初期値) //簡単な説明のための省略形 arr.reduce(callback,[initialValue]) パラメータの意味:
2. initialValueパラメータの解析例最初の例を見てみましょう。 var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(前、現在、インデックス); prev + cur を返します。 }) console.log(arr, 合計); //結果を印刷: //1 2 1 //3 3 2 //6 4 3 //[1, 2, 3, 4] 10 ここで、上記の例のインデックスは 1 から始まり、最初の prev の値が配列の最初の値であることがわかります。配列の長さは 4 ですが、reduce 関数は 3 回ループします。 2番目の例を見てみましょう。 var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(前、現在、インデックス); prev + cur を返します。 },0) //ここで初期値が設定されていることに注意してください console.log(arr, sum); //結果を印刷: //0 1 0 //1 2 1 //3 3 2 //6 4 3 //[1, 2, 3, 4] 10 この例では、インデックスは 0 から始まり、prev の最初の値は設定した初期値 0 で、配列の長さは 4 で、reduce 関数は 4 回ループします。 結論: initialValue が指定されていない場合、reduce は最初のインデックスをスキップして、インデックス 1 からコールバック メソッドを実行します。 initialValue が指定されている場合は、インデックス 0 から開始します。 注: Reduce を使用するときに配列が空の場合はどうなりますか? var arr = []; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(前、現在、インデックス); prev + cur を返します。 }) //エラー、「TypeError: 初期値のない空の配列の Reduce」 ただし、初期値を設定すると、次のようにエラーは発生しません。 var arr = []; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(前、現在、インデックス); prev + cur を返します。 },0) console.log(arr, sum); // [] 0 したがって、一般的には初期値を与える方が安全です 3. 簡単なreduceの使い方もちろん、最も単純なのは、よく使用する配列の加算と積です。 var arr = [1, 2, 3, 4]; var sum = arr.reduce((x,y)=>x+y) var mul = arr.reduce((x,y)=>x*y) console.log( 合計 ); // 合計、10 console.log( mul ); //製品24を見つける 4. 高度なreduceの使い方(1)配列内の各要素の出現回数を数える names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'] とします。 nameNum = names.reduce((pre,cur)=>{ とする (現在の状態がpreにある場合){ 前[現在]++ }それ以外{ 前[現在] = 1 } 戻る前 },{}) console.log(nameNum); //{アリス: 2、ボブ: 1、ティフ: 1、ブルース: 1} (2)アレイ重複排除 arr = [1,2,3,4,4,1]とする newArr = arr.reduce((pre,cur)=>{ とする (!pre.includes(cur))の場合{ pre.concat(cur) を返す }それ以外{ 戻る前 } },[]) console.log(newArr); // [1, 2, 3, 4] (3)2次元配列を1次元配列に変換する arr = [[0, 1], [2, 3], [4, 5]]とします。 newArr = arr.reduce((pre,cur)=>{ とする pre.concat(cur) を返す },[]) console.log(newArr); // [0, 1, 2, 3, 4, 5] (3)多次元配列を1次元配列に変換する arr = [[0, 1], [2, 3], [4,[5,6,7]]]とします。 const newArr = 関数(arr){ arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[]) を返します。 } console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7] (4)オブジェクト内の属性を合計する var 結果 = [ { 科目: '数学'、 スコア: 10 }, { 件名: '中国語'、 スコア: 20 }, { 件名: '英語'、 スコア: 30 } ]; var sum = result.reduce(function(prev, cur) { cur.score + prev を返します。 }, 0); コンソール.log(合計) //60 要約するJavaScript 配列の Reduce() メソッドに関するこの記事はこれで終わりです。JS 配列の Reduce() メソッドに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: mysql 8.0.15 winx64 解凍バージョン グラフィック インストール チュートリアル
>>: 初心者がソースコードからMySQLのデッドロック問題を理解する
多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...
環境: init_worker_by_lua、set_by_lua、rewrite_by_lua、a...
1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...
1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...
序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...
1. コンポーネントと実装機能Keepalived: Haproxy サービスの高可用性を実現し、...
目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...
(P4) Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイ...
目次序文1. レンダリング2. コード3. 背景画像素材要約する序文Threejs は、Web ベー...
優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...
Linux オンラインインストール関連コマンド: yum install: すべてインストールyum...
リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...