Array.prototype.flat 和 Array.prototype.flatMap

發布時間 · 標籤為 ECMAScript ES2019

Array.prototype.flat #

此範例中的陣列有數個層級：它包含一個陣列，而該陣列又包含另一個陣列。

const array = [1, [2, [3]]];
//            ^^^^^^^^^^^^^ outer array
//                ^^^^^^^^  inner array
//                    ^^^   innermost array

Array#flat 會傳回指定陣列的扁平化版本。

array.flat();
// → [1, 2, [3]]

// …is equivalent to:
array.flat(1);
// → [1, 2, [3]]

預設深度為 1，但您可以傳遞任意數字以遞迴扁平化到該深度。若要持續遞迴扁平化，直到結果不再包含任何巢狀陣列，我們會傳遞 Infinity。

// Flatten recursively until the array contains no more nested arrays:
array.flat(Infinity);
// → [1, 2, 3]

為何這個方法稱為 Array.prototype.flat 而不是 Array.prototype.flatten？ 閱讀我們的 #SmooshGate 說明文件以找出答案！

Array.prototype.flatMap #

以下是另一個範例。我們有一個 duplicate 函數，它會接收一個值，並傳回一個包含該值兩次的陣列。如果我們將 duplicate 套用至陣列中的每個值，我們會得到一個巢狀陣列。

const duplicate = (x) => [x, x];

[2, 3, 4].map(duplicate);
// → [[2, 2], [3, 3], [4, 4]]

然後您可以對結果呼叫 flat 以扁平化陣列

[2, 3, 4].map(duplicate).flat(); // 🐌
// → [2, 2, 3, 3, 4, 4]

由於這種模式在函式式程式設計中非常常見，因此現在有一個專門的 flatMap 方法可供使用。

[2, 3, 4].flatMap(duplicate); // 🚀
// → [2, 2, 3, 3, 4, 4]

與分別執行 map 和 flat 相比，flatMap 的效率稍高。

有興趣瞭解 flatMap 的使用案例嗎？請查看 Axel Rauschmayer 的說明。

Array#{flat,flatMap} 支援 #

關於此功能支援清單