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の使い方

（１）配列内の各要素の出現回数を数える

names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'] とします。
nameNum = names.reduce((pre,cur)=>{ とする
  （現在の状態がpreにある場合）{
    前[現在]++
  }それ以外{
    前[現在] = 1 
  }
  戻る前
},{})
console.log(nameNum); //{アリス: 2、ボブ: 1、ティフ: 1、ブルース: 1}

（２）アレイ重複排除

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]

（３）２次元配列を１次元配列に変換する

arr = [[0, 1], [2, 3], [4, 5]]とします。
newArr = arr.reduce((pre,cur)=>{ とする
    pre.concat(cur) を返す
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

（３）多次元配列を１次元配列に変換する

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]

（４）オブジェクト内の属性を合計する

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 をよろしくお願いいたします。

以下もご興味があるかもしれません: