Javascript數組高階函數

Question

誰能向我解釋此代碼的工作原理？ 我在Array中尋找了reduce和concat函數，我理解這些函數，但是我不理解這段代碼最初是如何工作的：

 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

您可以在傳遞給reduce的回調中添加console.log並考慮輸出：

 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]的新數組。 然后我們Concat的這個陣列與所述的下一個元素arrays ，陣列[4,5]。 因此，結果將是一個包含元素[1,2,3,4,5]的新數組。 最后我們Concat的這個陣列與所述的最后一個元素arrays ，所述array [6]。 因此，結果是數組[1,2,3,4,5,6]。

為了詳細了解上述內容，您必須閱讀有關Array.prototype.reduce（）的信息 。

如以上鏈接所述：

reduce（）方法對一個累加器應用一個函數，該數組的每個值（從左到右）將其減小為單個值

此外，語法是

arr.reduce(callback, [initialValue])

在這種情況下，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))); 

注意：當返回值的類型與數組項不同時，Initial很方便。 但是，在這種情況下，您要處理數組並返回一個數組，該數組將使用初始冗余。

Answer 4

因此，假設我們擁有要執行的2D數組： [[1, 2, 3], [4, 5], [6]]被縮減，則函數將分為2個主要部分。

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

• flat -這是減少量的累加器。 傳遞給reduce函數的第二個參數的初始值是給定的，並用於在迭代器通過它們時存儲這些值。
• current -這是遍歷要減少的數據集中所有值的迭代器。

因此，當您遍歷數據集時，您的示例將累積數組與當前值連接在一起，最后您有了新數組。

Answer 5

Array.reduce需要具有以下簽名的回調：

函數（previousElement，currentElement，索引，數組）

和一個可選的初始值。

在第一次迭代中，如果傳遞了initialValue ，則previousElement將保留此值，而currentElement將保留`firstArrayElement。

如果不是，則previousElement將保存firstArrayElement而currentElement將保存secondArrayElement 。

對於以下迭代， previousElement將保存由先前迭代返回的值，而currentElement將保存下一個值。

---

因此，在您的示例中，最初的flat [] 。

return flat.concat(current); 將返回一個新的合並數組。 該值將用作下一次迭代的flat ，並返回此過程。 最后，最后一次迭代返回的值用作最終返回值，並打印在控制台中。