配列の平坦化(flatten)

このレッスンでは、配列の.flat()メソッドを使い、入れ子になった配列を平らに展開する方法を学ぶことを目標にします。「JavaScript flat 使い方」「JavaScript 配列 平坦化」で調べている方向けの内容です。

.flat()は、配列の中に入れ子になった配列を「平らに」展開します。.flat(Infinity)とすると、どれだけ深く入れ子になっていてもすべて平坦にできます。引数を省略すると1段階だけ平坦化される点も覚えておきましょう。

サンプルコードでは、[1, [2, 3], [4, [5, 6]]]という多重に入れ子になった配列に対して、.flat()(1段階)と.flat(Infinity)(すべて)の結果の違いを確認しています。1段階だけの場合は[4, [5, 6]]の内側の配列が展開されずに残る点が、2つの結果を見比べるポイントです。

初心者がよくつまずくのが、デフォルトの.flat()が1段階しか平坦化しない点です。何段階入れ子になっているか分からないデータにはInfinityを指定する必要があります。またflatは新しい配列を返すメソッドで、元の配列は変更されない点も他の配列メソッドと共通しています。

APIから受け取ったネスト構造のデータや、グループ化されたデータをまとめて1つのリストとして扱いたいときに便利な、実務でも役立つメソッドです。深いネストのデータを扱うAPIレスポンスの整形などでも、実務でよく利用される処理です。