`Array.prototype.flat` と `Array.prototype.flatMap`
· 約2分
Array.prototype.flat
この例の配列はいくつかのレベルでネストされています。配列の中にさらに配列があり、その中にも別の配列が含まれます。
const array = [1, [2, [3]]];
// ^^^^^^^^^^^^^ 外側の配列
// ^^^^^^^^ 内側の配列
// ^^^ 最内の配列
Array#flat は指定された配列のフラット化されたバージョンを返します。
array.flat();
// → [1, 2, [3]]
// …は以下と同じです:
array.flat(1);
// → [1, 2, [3]]
デフォルトの深さは 1 です。ただし、任意の数値を渡して、その深さまで再帰的にフラット化できます。結果にネストされた配列が含まれなくなるまで再帰的にフラット化するには、Infinity を渡します。
// 配列にネストされた配列がなくなるまで再帰的にフラット化:
array.flat(Infinity);
// → [1, 2, 3]
このメソッドが Array.prototype.flat と呼ばれる理由で、なぜ Array.prototype.flatten ではないのかについては、こちらをお読みください: #SmooshGate の詳細を確認！
Array.prototype.flatMap
もうひとつの例を見てみます。duplicate という関数は引数に値を取り、その値を2回含む配列を返します。この関数を配列のそれぞれの値に適用すると、ネストされた配列が得られます。
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 の解説をチェックしてください。