在過去的幾年中，已經將許多有用的功能添加到JAVAscript Array全局對象中，這些功能為開發人員在編寫可用于數組的代碼時提供了多種選擇。這些功能提供了許多優點，其中最值得注意的是，雖然在過去的一段時間里，開發人員必須實現自己的復雜邏輯來執行各種數組操作，但現在這些新功能已經不再需要這種自制的實現。本文將探討的有用功能之一是 flat() 函數。
功能概述
flat() 函數提供了將一組數組項串聯成一個全新的數組并在函數完成后返回新數組的能力。由于這個函數產生了一個全新的數組，所以一旦函數完成操作后，任何包含在原始數組中的現有的、完全獨立的數組都不會被改變，在開始操作之前，不需要采取任何預防措施。
flat() 函數僅采用一個參數，該參數是可選的，唯一的參數是 depth 參數。如果原始數組包含一個或多個嵌套數組結構，則此參數決定函數將多少數組層壓扁為單個層。由于該參數是可選的，所以它的默認值為 1，并且在函數完成時，只有單層數組將被平展到返回的全新數組中。
沒有參數的情況
在介紹了一般的函數行為之后，讓我們看一下 flat() 函數在實踐中是如何工作的一些示例。以下示例說明了未指定參數值的情況：
var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat();
// array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]
調用 flat() 函數時不帶參數值。考慮到可選參數的默認值，此函數調用與 flat(1) 相同。這意味著原始數組中深度為 1 的任何數組都將被完全展平，以便將其所有內容單獨連接到新數組。原始數組中深度為 2 或更大的任何數組的深度都將減小 1 ，并且這些數組中深度為1的任何單個數組項將單獨連接到新數組。結果，原始數組中包含 3 和 4 的第一個數組被展平，以便將這兩個數組項分別連接到新數組。此外，其余三個嵌套的數組中的每個數組都被串聯到新的數組中，其嵌套深度減少了一個。
正深度
以下示例演示了指定正 depth 參數值的情況：
var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(2);
// array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]
使用深度參數值 2 調用 flat() 函數。這意味著在原始數組中深度最大為2的任何數組都將被完全展平，以便將其所有內容單獨連接到新數組。原始數組中深度為3或更大的任何數組的深度將減少2，并且這些數組中深度為1或2的任何單個數組項將單獨連接到新數組。結果，包含 3 和 4 以及 5 和 6 的原始數組中的前兩個數組被展平，從而將這四個數組項分別連接到新數組。另外，剩下的兩個嵌套數組都連接到新數組，它們的嵌套深度減少了2。
無限深度
以下示例演示了指定無限 depth 參數值的情況：
var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(Infinity);
// array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
使用 depth 參數值 Infinity 調用 flat() 函數。這意味著原始數組中具有任何深度的所有數組都將被展平，以便將其所有內容單獨連接到新數組。在與 flat() 函數一起使用諸如 Infinity 之類的值時，要記住的一件非常重要的事情是，如果應用程序遇到嵌套得足夠深的數組，則它可能會耗盡內存。盡管此處使用 Infinity 來證明可以將這種值與 flat() 函數一起使用，但建議使用更小的有限參數值，以避免應用程序中發生任何無法預料的錯誤。
零深度
以下示例演示了將 depth 參數值指定為 0 的情況：
var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(0);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]
使用深度參數值 0 調用 flat() 函數。這意味著原始數組中包含的任何數組都不會被展平，并且新數組的單個數組項和嵌套數組的組成與原始數組完全相同。
負深度
以下示例演示了指定負深度參數值的情況：
var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(-Infinity);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]
使用 depth 參數值 -Infinity 調用 flat() 函數。由于負深度值對于扁平嵌套數組沒有意義，所以在指定負深度參數值的情況下，將使用 0 作為替代。正如前面的示例所演示的那樣，當指定深度參數值為 0 時，原始數組中沒有數組是扁平的，而新數組中各個數組項和嵌套數組的組成與原始數組完全相同。
經驗教訓
關于 flat() 函數，可以從本文中學到一些經驗教訓。首先要記住的是，flat() 函數不會以任何方式改變原始數組中的任何普通或嵌套數組，因此在使用該函數之前無需維護這些數組的狀態。flat() 函數唯一會改變的數組是函數完成后返回的全新數組，它只是使用原始數組的所有內容構建的。
要記住的第二件事是，flat() 函數將刪除原始數組中存在的所有空值。下面的示例演示了該功能的實際作用：
var array1 = [1, , 3, , 5];
var array2 = array1.flat();
// array2: [1, 3, 5]
盡管原始數組占用了五個位置，而第二個和第四個位置的值未定義，但是 flat() 函數從函數完成后返回的新數組中刪除了這兩個數組項。結果，新數組只包含三個數組項，它們的值不為 undefined。
關于 flat() 函數要記住的第三件事，也是最后一件事，是它的一般用途，以及它如何有助于簡化邏輯，如果沒有一個可用的 flat()函數，要合并任何數組中包含的所有項目，通常的方法是編寫自定義的邏輯來迭代所有的數組，從一個數組中單獨拉出項目，然后把它們放到另一個數組中，可能會考慮到其中的嵌套數組。這樣的邏輯往往比較混亂，而且容易出錯，因此，通過使用抽象的內置函數（如 flat() 函數）來避免它的出現，是一個很好的選擇。
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
