Javascript配列上位関数

Question

誰でもこのコードの仕組みを説明できますか？

var arrays = [[1, 2, 3], [4, 5], [6]]; 
 
    
 
console.log(arrays.reduce(function(flat, current) { 
 
    return flat.concat(current); 
 
}, [])); 
 
// → [1, 2, 3, 4, 5, 6]

Answer 1

あなたは私たちがに渡すコールバック内console.logを追加することができます。私は、これらの機能を理解するが、私はこのコードはで初期状態の仕組みを理解していない、アレイにreduceとconcat機能を探しましたreduceと出力を考える：

var arrays = [[1, 2, 3], [4, 5], [6]]; 
 

 
console.log(arrays.reduce(function(flat, current) { 
 
    console.log('flat: '+ flat + 'current: ' + current) 
 
    return flat.concat(current); 
 
}, []));

まず、空の配列と配列[1,2,3]を連結します。その結果、要素[1,2,3]を持つ新しい配列が生成されます。次に、この配列をarraysの配列[4,5]の次の要素と連結します。その結果、要素[1,2,3,4,5]を持つ新しい配列になります。最後に、この配列をarraysの最後の要素であるarray [6]と連結します。したがって結果は配列[1,2,3,4,5,6]です。

上記の詳細を理解するには、Array.prototype.reduce()についてお読みください。

それは、上記のリンクに記載されたように：

減らす（）メソッドは、それを減らすために（左から右へ）アキュムレータアレイの各 値に対して関数を適用します単一の値

はさらに構文ははinitialValueは空の配列、であるあなたの場合

arr.reduce(callback, [initialValue]) 

です。

Answer 2

私はあなたのために各ステップを説明しました。

var arrays = [[1, 2, 3], [4, 5], [6]]; 
 

 
console.log(arrays.reduce(function(flat, current) { 
 
    
 
    // first loop: flat - [1,2,3], current - [4,5] 
 
    // [1,2,3].concat([4,5]) -> [1,2,3,4,5] 
 
    
 
    //second/last loop: flat - [1,2,3,4,5], current - [6] 
 
    // [1,2,3,4,5].concat([6]) -> [1,2,3,4,5,6] 
 
    
 
    //function stop 
 

 
    return flat.concat(current); 
 
}, []));

Answer 3

まあ実際には.reduce()の間違った使用です。このジョブでは、初期配列は必要ありません。前の（p）と現行（c）の手でそれを行うことができます。といった;

var arrays = [[1, 2, 3], [4, 5], [6]]; 
 
    
 
console.log(arrays.reduce((p,c) => p.concat(c)));

注：初期の戻り値の型が配列の項目が異なる場合に便利です。ただし、この場合、配列を処理して初期冗長の使用をレンダリングする配列を返します。

Answer 4

したがって、あなたが行う2D配列が：[[1, 2, 3], [4, 5], [6]]であると仮定すると、この関数は2つの主要コンポーネントに分割されます。

array.reduce((accumulator, iterator) => {...}, initialValue); 

• flat - これは、還元のアキュムレータです。reduce関数の2番目のパラメータに渡された初期値が与えられ、イテレータがそれらを通過するときに値を格納するために使用されます。
• current - これは、データセット内のすべての値を減らすイテレータです。

データセットを反復処理しているので、例では累積配列を現在の値に連結し、最後に新しい配列を作成します。

関数（previousElement、currentElement、インデックス、アレイ）

及び任意初期値：

Answer 5

Array.reduceは、次のシグネチャを持つコールバックを見込んでいます。

最初の反復では、initialValueが渡された場合、previousElementはこの値を保持し、currentElementは `firstArrayElementを保持します。

ない場合は、previousElementはfirstArrayElementとcurrentElementはsecondArrayElementを保持する保持します。

次の反復では、previousElementは前の反復によって戻された値を保持し、currentElementは次の値を保持します。

---

だからあなたの例では、最初にflatは[]を保持しています。

return flat.concat(current);は、新しい結合された配列を返します。この値は次の反復のためにflatとして使用され、このプロセスが返されます。最後に、最後の反復で返された値が最終的な戻り値として使用され、コンソールに出力されます。