JavaScript的Array.flat()函式深入探討

在過去的幾年中，已經將許多有用的功能新增到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() 函式）來避免它的出現，是一個很好的選擇。

0/2000字