JavaScript 配列の Reduce() メソッドの構文と例の分析

JavaScript 配列の Reduce() メソッドの構文と例の分析

序文

Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が単一の値に減らされます。

Reduce は、配列内の削除された要素や割り当てられていない要素を除いて、配列内の各要素に対してコールバック関数を順番に実行し、初期値 (または前のコールバック関数の戻り値)、現在の要素値、現在のインデックス、および Reduce が呼び出される配列の 4 つのパラメータを受け入れます。

Javascript の配列メソッドの中で、reduce は map、filter、forEach などのよく使用される反復メソッドに比べて見落とされがちです。今日は、実際の開発における、reduce のすばらしい使い方を探ってみましょう。まずは、reduce 構文から始めましょう。

1. 文法

配列.reduce(関数(前、現在、インデックス、arr)、初期値)
//簡単な説明のための省略形 arr.reduce(callback,[initialValue])

パラメータの意味:

コールバック(配列内の各値に対して実行される関数。4 つのパラメータを含む)
1. previousValue (最後のコールバック呼び出しによって返された値、または提供された初期値)
2. currentValue (配列内で現在処理中の要素)
3. インデックス(配列内の現在の要素のインデックス)
4. 配列(reduceが呼び出される配列)
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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS配列reduce()メソッドの原理と使い方の分析
  • JS配列Reduce()メソッドと高度なテクニックの詳細な説明
  • JavaScript 配列のreduce() メソッド

<<:  mysql 8.0.15 winx64 解凍バージョン グラフィック インストール チュートリアル

>>:  初心者がソースコードからMySQLのデッドロック問題を理解する

推薦する

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

JavaScript でローカル変数をグローバル変数に変換する方法

まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...

HttpsページでBaiduシェアを使用するためのソリューション

サイト全体で https アクセスを有効にしてから、共有コードが利用できなくなり、有効になっていた小...

HTML 順序なしリスト 箇条書き 画像を使用した CSS の記述

少なくとも 5 冊のベストセラー書籍の順序なしリストを含む HTML ページを作成します。各書籍の前...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

Vuexはシンプルなショッピングカートを実装します

この記事では、参考までに、Vuex の具体的なコードを共有して、簡単なショッピングカートを実装します...

HTML でハイパーリンク タグを使用するチュートリアル

ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

MySQL で期限切れのデータレコードを定期的に削除する簡単な方法

1. MySQL に接続してログインしたら、まず MySQL でイベント機能が有効になっているかどう...

Node.js の非同期ジェネレータと非同期反復の詳細な説明

序文ジェネレーター関数は、async/await が導入される前から JavaScript に存在し...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

Dockerの一般的なコマンドとヒントのまとめ

インストールスクリプトUbuntu / CentOS Debian のインストールに問題があるようで...

MySQL のレイテンシ問題とデータフラッシュ戦略プロセスの分析

目次1. MySQLレプリケーションプロセス2. MySQLの遅延問題の分析3. プロモーション期間...