具体例理解reduce（）メソッドのJavaScript

Question

誰かがreduce（）が配列項目のインスタンスを数え、それらを下のコードの空のオブジェクトに追加する方法を説明してもらえますか？たとえば、最終的には{ car: 5, truck: 3 }となります。 obj[item]が何であるかは分かりません。

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; 

const transportation = data.reduce(function(obj, item) { 
    if (!obj[item]) { 
    obj[item] = 0; 
    } 

    obj[item]++; 
    return obj; 
}, {}); 

console.log(transportation);//{car: 5, truck: 3, bike: 2, walk: 2, van: 2} 

Answer 1

const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; 
 

 
const transportation = data.reduce(function(obj, item) { 
 
     console.log(obj, item); 
 
     if (!obj[item]) { 
 
     obj[item] = 0; 
 
     } 
 
     obj[item]++; 
 
     return obj; 
 
    }, {}); 
 

 
console.log(transportation);//{car: 5, truck: 3, bike: 2, walk: 2, van: 2}

コンソール出力を見ることができる場合は、objが周波数として配列の要素や値などのキーを持つデータ構造として機能することになるオブジェクトが表示されますプロパティが未定義の場合は0に初期化され、それ以降のステップではその値をインクリメントするだけです。

obj [item]はオブジェクトのプロパティです。一意の文字列が来て、次のステップごとに0に初期化されます。この値を増やすだけです。

reduceで最初の引数はオブジェクトが前の繰り返し{}）。そして第二には、あなたがコールバック関数の最初の引数は、アキュムレータであることを見つけることができますArray.prototype.reduce()内の各要素

Answer 2

を横断でしょう。これはあなたのobj - >削減の結果です。 itemはです。処理中のcurrentValue - >あなたのケースでは、配列dataの文字列の1つです。 obj[item]は、item valeの文字列がdata配列に現れた回数を格納するために使用されます。

Answer 3

より簡単な例を考えてみましょう。すべての整数を配列にまとめて追加します。

const data = [1, 2, 3, 4, 5]; 
const sum = data.reduce(function(total, num) { 
    return total + num; 
}, 0); 

reduce二つの引数有する機能受け入れ：1）totalを、プロセスの次の反復に渡され、アキュムレータは、初期値、及び2 0として設定されている）をnum、現在処理されている反復の現在の要素。

各繰り返しごとに、numが合計に追加され、最後の反復後にsum（the result is 15）に渡されます。

例では、空のオブジェクトは値（項目）がオブジェクトキーとして追加されるアキュムレータとして機能します。

const transportation = data.reduce(function(obj, item) { 

    // if the object does not have a key matching the value 
    // of item, create it and set it to zero 
    // for example: obj['car'] = 0 
    if (!obj[item]) { 
    obj[item] = 0; 
    } 

    // Now we increase the value of that property because 
    // we want to indicate an instance of that car, bike, truck etc 
    // For example `obj['car']++` 
    obj[item]++; 

    // Then we return the object (accumulator) for the next 
    // iteration 
    return obj; 
}, {});