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 #

もう 1 つの例を示します。値を 2 つ格納する配列を返す 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]

flatMap は、map を実行してから flat を別個に実行するよりも効率的です。

flatMap のユースケースに興味がありますか？Axel Rauschmayer の説明 をご覧ください。

サポートされる Array#{flat,flatMap} #

この機能サポートの一覧について