在過去的幾年中，已經(jīng)將許多有用的功能添加到Javascript Array全局對象中，這些功能為開發(fā)人員在編寫可用于數(shù)組的代碼時(shí)提供了多種選擇。這些功能提供了許多優(yōu)點(diǎn)，其中最值得注意的是，雖然在過去的一段時(shí)間里，開發(fā)人員必須實(shí)現(xiàn)自己的復(fù)雜邏輯來執(zhí)行各種數(shù)組操作，但現(xiàn)在這些新功能已經(jīng)不再需要這種自制的實(shí)現(xiàn)。本文將探討的有用功能之一是 flat() 函數(shù)。

JavaScript的Array.flat()函數(shù)深入探討

功能概述

flat() 函數(shù)提供了將一組數(shù)組項(xiàng)串聯(lián)成一個全新的數(shù)組并在函數(shù)完成后返回新數(shù)組的能力。由于這個函數(shù)產(chǎn)生了一個全新的數(shù)組，所以一旦函數(shù)完成操作后，任何包含在原始數(shù)組中的現(xiàn)有的、完全獨(dú)立的數(shù)組都不會被改變，在開始操作之前，不需要采取任何預(yù)防措施。

flat() 函數(shù)僅采用一個參數(shù)，該參數(shù)是可選的，唯一的參數(shù)是 depth 參數(shù)。如果原始數(shù)組包含一個或多個嵌套數(shù)組結(jié)構(gòu)，則此參數(shù)決定函數(shù)將多少數(shù)組層壓扁為單個層。由于該參數(shù)是可選的，所以它的默認(rèn)值為 1，并且在函數(shù)完成時(shí)，只有單層數(shù)組將被平展到返回的全新數(shù)組中。

沒有參數(shù)的情況

在介紹了一般的函數(shù)行為之后，讓我們看一下 flat() 函數(shù)在實(shí)踐中是如何工作的一些示例。以下示例說明了未指定參數(shù)值的情況：

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]]]]

調(diào)用 flat() 函數(shù)時(shí)不帶參數(shù)值?？紤]到可選參數(shù)的默認(rèn)值，此函數(shù)調(diào)用與 flat(1) 相同。這意味著原始數(shù)組中深度為 1 的任何數(shù)組都將被完全展平，以便將其所有內(nèi)容單獨(dú)連接到新數(shù)組。原始數(shù)組中深度為 2 或更大的任何數(shù)組的深度都將減小 1 ，并且這些數(shù)組中深度為1的任何單個數(shù)組項(xiàng)將單獨(dú)連接到新數(shù)組。結(jié)果，原始數(shù)組中包含 3 和 4 的第一個數(shù)組被展平，以便將這兩個數(shù)組項(xiàng)分別連接到新數(shù)組。此外，其余三個嵌套的數(shù)組中的每個數(shù)組都被串聯(lián)到新的數(shù)組中，其嵌套深度減少了一個。

正深度

以下示例演示了指定正 depth 參數(shù)值的情況：

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]]]

使用深度參數(shù)值 2 調(diào)用 flat() 函數(shù)。這意味著在原始數(shù)組中深度最大為2的任何數(shù)組都將被完全展平，以便將其所有內(nèi)容單獨(dú)連接到新數(shù)組。原始數(shù)組中深度為3或更大的任何數(shù)組的深度將減少2，并且這些數(shù)組中深度為1或2的任何單個數(shù)組項(xiàng)將單獨(dú)連接到新數(shù)組。結(jié)果，包含 3 和 4 以及 5 和 6 的原始數(shù)組中的前兩個數(shù)組被展平，從而將這四個數(shù)組項(xiàng)分別連接到新數(shù)組。另外，剩下的兩個嵌套數(shù)組都連接到新數(shù)組，它們的嵌套深度減少了2。

無限深度

以下示例演示了指定無限 depth 參數(shù)值的情況：

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 參數(shù)值 Infinity 調(diào)用 flat() 函數(shù)。這意味著原始數(shù)組中具有任何深度的所有數(shù)組都將被展平，以便將其所有內(nèi)容單獨(dú)連接到新數(shù)組。在與 flat() 函數(shù)一起使用諸如 Infinity 之類的值時(shí)，要記住的一件非常重要的事情是，如果應(yīng)用程序遇到嵌套得足夠深的數(shù)組，則它可能會耗盡內(nèi)存。盡管此處使用 Infinity 來證明可以將這種值與 flat() 函數(shù)一起使用，但建議使用更小的有限參數(shù)值，以避免應(yīng)用程序中發(fā)生任何無法預(yù)料的錯誤。

零深度

以下示例演示了將 depth 參數(shù)值指定為 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]]]]]

使用深度參數(shù)值 0 調(diào)用 flat() 函數(shù)。這意味著原始數(shù)組中包含的任何數(shù)組都不會被展平，并且新數(shù)組的單個數(shù)組項(xiàng)和嵌套數(shù)組的組成與原始數(shù)組完全相同。

負(fù)深度

以下示例演示了指定負(fù)深度參數(shù)值的情況：

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 參數(shù)值 -Infinity 調(diào)用 flat() 函數(shù)。由于負(fù)深度值對于扁平嵌套數(shù)組沒有意義，所以在指定負(fù)深度參數(shù)值的情況下，將使用 0 作為替代。正如前面的示例所演示的那樣，當(dāng)指定深度參數(shù)值為 0 時(shí)，原始數(shù)組中沒有數(shù)組是扁平的，而新數(shù)組中各個數(shù)組項(xiàng)和嵌套數(shù)組的組成與原始數(shù)組完全相同。

經(jīng)驗(yàn)教訓(xùn)

關(guān)于 flat() 函數(shù)，可以從本文中學(xué)到一些經(jīng)驗(yàn)教訓(xùn)。首先要記住的是，flat() 函數(shù)不會以任何方式改變原始數(shù)組中的任何普通或嵌套數(shù)組，因此在使用該函數(shù)之前無需維護(hù)這些數(shù)組的狀態(tài)。flat() 函數(shù)唯一會改變的數(shù)組是函數(shù)完成后返回的全新數(shù)組，它只是使用原始數(shù)組的所有內(nèi)容構(gòu)建的。

要記住的第二件事是，flat() 函數(shù)將刪除原始數(shù)組中存在的所有空值。下面的示例演示了該功能的實(shí)際作用：

var array1 = [1, , 3, , 5];
var array2 = array1.flat();
// array2: [1, 3, 5]

盡管原始數(shù)組占用了五個位置，而第二個和第四個位置的值未定義，但是 flat() 函數(shù)從函數(shù)完成后返回的新數(shù)組中刪除了這兩個數(shù)組項(xiàng)。結(jié)果，新數(shù)組只包含三個數(shù)組項(xiàng)，它們的值不為 undefined。

關(guān)于 flat() 函數(shù)要記住的第三件事，也是最后一件事，是它的一般用途，以及它如何有助于簡化邏輯，如果沒有一個可用的 flat()函數(shù)，要合并任何數(shù)組中包含的所有項(xiàng)目，通常的方法是編寫自定義的邏輯來迭代所有的數(shù)組，從一個數(shù)組中單獨(dú)拉出項(xiàng)目，然后把它們放到另一個數(shù)組中，可能會考慮到其中的嵌套數(shù)組。這樣的邏輯往往比較混亂，而且容易出錯，因此，通過使用抽象的內(nèi)置函數(shù)（如 flat() 函數(shù)）來避免它的出現(xiàn)，是一個很好的選擇。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論