在 JavaScript 中，數(shù)組就像數(shù)據(jù)結(jié)構(gòu)中的超級(jí)英雄。

但是，當(dāng)你進(jìn)入嵌套數(shù)組的領(lǐng)域時(shí)，事情可能會(huì)變得有點(diǎn)混亂，就像一團(tuán)亂麻。

幸運(yùn)的是，ES2019 帶來(lái)了兩個(gè)超級(jí)方便的數(shù)組方法：flat() 和 flatMap()。

這些方法不僅使數(shù)組處理變得輕而易舉，而且還簡(jiǎn)化了處理那些討厭的嵌套數(shù)組的過(guò)程。

讓我們深入了解這些方法的細(xì)節(jié)、它們的區(qū)別，以及它們?nèi)绾卧诂F(xiàn)實(shí)世界的編碼場(chǎng)景中成為你值得信賴的伙伴，同時(shí)，像仙塵一樣加入代碼示例來(lái)幫助你掌握這些技能。

什么是 flat() 方法？

想象一下：你有一盒快遞包裹，里面裝滿了各種各樣的小盒子。每個(gè)小盒子可能都裝有更小的盒子，而這些小盒子里可能裝有好東西。 

現(xiàn)在，想象一下，你想找到所有的好東西，但又不想費(fèi)力地打開(kāi)每個(gè)盒子。

這時(shí) flat() 方法就派上用場(chǎng)了，它就像一臺(tái)神奇的壓平機(jī)，可以把所有東西都?jí)浩剑@樣你就能一目了然地看到所有的寶貝。

用法

var newArray = arr.flat([depth]);

arr：需要展平的“盒子”（數(shù)組）。

depth（可選）：要展平的層數(shù)，例如決定要打開(kāi)多少個(gè)盒子層，默認(rèn)值為 1。

示例 1：展平一層

讓我們展開(kāi)它：

let nestedArray = [1, [2, 3], [4, [5, 6]]];
let flattenedArray = nestedArray.flat();


console.log(flattenedArray); // Output: [1, 2, 3, 4, [5, 6]]

在這里，flat() 就像輕輕推一下，打開(kāi)最外層的盒子，讓你可以看到 2 和 3，以及 4，而它的小盒子 [5, 6] 仍然關(guān)閉。

示例 2：展平多層

如果你喜歡冒險(xiǎn)，想要展平整個(gè)堆棧，請(qǐng)查看以下內(nèi)容：

let nestedArray = [1, [2, [3, [4, 5]]]];
let flattenedArray = nestedArray.flat(2);


console.log(flattenedArray); // Output: [1, 2, 3, [4, 5]]

使用 flat(2)，您就像一個(gè)開(kāi)箱高手，打開(kāi)兩層箱子，只留下最里面的 [4, 5] 未受影響。

什么是 flatMap() 方法？

flatMap() 方法就像您的數(shù)組操作工具包中有一根魔杖。它的工作原理是首先對(duì)數(shù)組中的每個(gè)元素施展魔法，然后將施魔法的結(jié)果展平到新數(shù)組中。

可以將其視為 map() 和 flat()（深度為 1）的強(qiáng)大組合，只需一個(gè)快速動(dòng)作即可完成。

用法

var newArray = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // Weave your magic here and return elements of the new array
}[, thisArg]);

回調(diào)：可信賴的魔法書(shū)，定義如何為每個(gè)數(shù)組元素施法。它接受三個(gè)參數(shù)：

• currentValue：當(dāng)前受您施法的元素。
• index（可選）：元素的索引（如果您需要的話）。
• array（可選）：調(diào)用 flatMap 的原始數(shù)組。
• thisArg（可選）：施放回調(diào)魔法時(shí)的神奇 this 值。

示例 1：基本魔法

讓我們施放一個(gè)簡(jiǎn)單的魔法：

let arr = [1, 2, 3, 4];
let mappedAndFlattened = arr.flatMap(x => [x, x * 2]);


console.log(mappedAndFlattened); // Output: [1, 2, 2, 4, 3, 6, 4, 8]

在這個(gè)魔法中，flatMap() 首先將每個(gè)元素 x 轉(zhuǎn)換為一個(gè)包含 x 和 x * 2 的數(shù)組。

然后，flatMap() 揮動(dòng)魔杖將這些數(shù)組展平為一個(gè)，省去了手動(dòng)轉(zhuǎn)換 map() 和 flat() 的麻煩。

示例 2：展平嵌套數(shù)組

如果您面對(duì)的是嵌套數(shù)組，flatMap() 就是您成功的靈丹妙藥：

let nestedArray = [[1], [2, 3], [4]];
let flattenedArray = nestedArray.flatMap(x => x);


console.log(flattenedArray); // Output: [1, 2, 3, 4]

在這里，flatMap() 返回每個(gè)子數(shù)組并將其展平為一個(gè)新數(shù)組，就像煉金術(shù)大師將賤金屬變成黃金一樣。

flat() 與 flatMap()

用例場(chǎng)景

 flat()：當(dāng)你在尋求展平嵌套數(shù)組而不改變?cè)貢r(shí)，flat() 是你的最佳選擇。它可以將多層數(shù)組展平到你想要的深度，像藏寶圖一樣顯示所有元素。

flatMap()：如果你的任務(wù)不僅是展平數(shù)組，而且還要先轉(zhuǎn)換元素，例如在展平之前將每個(gè)元素映射到不同的值，那么 flatMap() 就是您值得信賴的伙伴。它結(jié)合了 map() 和 flat() 的功能，在一個(gè)英勇的行為中完成轉(zhuǎn)換和展平。

性能比較

flatMap() 更高效：使用 flatMap() 通常比先轉(zhuǎn)換 map() 然后 flat() 更有效，因?yàn)?flatMap() 遍歷數(shù)組一次，而不是兩次。

這意味著在處理大量數(shù)據(jù)時(shí)，flatMap() 可能會(huì)表現(xiàn)更好，從而減少不必要的遍歷開(kāi)銷。

限制

flatMap() 的局限性：盡管 flatMap() 很強(qiáng)大，但它只能展平一層嵌套。如果你的數(shù)組是一個(gè)深層嵌套的迷宮，并且你需要完全解開(kāi)它，那么，你仍然需要使用具有適當(dāng)深度的 flat()。例如，flat(2) 可以展平兩層嵌套，而 flatMap() 只能管理一層。

結(jié)論

在 JavaScript 世界中，掌握 flat() 和 flatMap() 的數(shù)組方法不僅可以將你的代碼制作成時(shí)尚、優(yōu)雅的杰作，還可以增強(qiáng)你像真正的編碼向?qū)б粯犹幚韽?fù)雜數(shù)據(jù)結(jié)構(gòu)的能力。 

希望今天的神奇分享能幫助您掌握這兩種方法，并在你的項(xiàng)目中自信地運(yùn)用它們。