JavaScript配列の平坦化（flat）の基本と実践
配列の中に配列が入っていると「二重配列」「ネスト配列」と呼ばれます。これを「1階層だけまっ平らにしたい」ときに使うのが flat。初心者でも直感的に扱える便利メソッドです。
構文と考え方
const result = arr.flat(depth);
- 返り値: 新しい配列（元の配列は変更されない）
- depth: 平坦化する階層の深さ（省略時は1）
arr.flat()→ 1階層だけ平坦化arr.flat(2)→ 2階層まで平坦化arr.flat(Infinity)→ 全階層を平坦化
すぐ使えるテンプレート集
基本：1階層だけ平坦化
const arr = [1, 2, [3, 4], 5];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, 5]
- ポイント: ネスト1段だけを解消。配列の中の配列が「展開」される。
2階層まで平坦化
const arr = [1, [2, [3, 4]], 5];
const flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3, 4, 5]
- ポイント:
flat(2)で2段階まで展開。深さを指定できるのが便利。
全階層を平坦化（Infinity）
const arr = [1, [2, [3, [4]]]];
const flatArr = arr.flat(Infinity);
console.log(flatArr); // [1, 2, 3, 4]
- ポイント: ネストがどれだけ深くても一気に平坦化。
空要素（ホール）も削除される
const arr = [1, , 2, [3, , 4]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]
- ポイント: 配列の「空要素」も自動的に取り除かれる。
よくある落とし穴と対策
- 元配列は変わらない: flatは新しい配列を返す。元を直接変えたいなら代入し直す必要あり。
- 深さ指定を忘れる: デフォルトは1階層のみ。2階層以上を展開したいなら引数を指定。
- 古い環境で未対応: flatはES2019以降。古いブラウザではPolyfillが必要。
他メソッドとの使い分け
| 手段 | 主な用途 |
|---|---|
| flat | ネスト配列を平坦化 |
| concat | 複数配列を結合（ネストは解消しない） |
| flatMap | mapで変換＋flatを同時に実行 |
練習問題（手を動かして覚える）
1. ネスト配列を1階層平坦化
const arr = [[1, 2], [3, 4], 5];
console.log(arr.flat()); // [1, 2, 3, 4, 5]
2. 2階層まで平坦化
const arr = [1, [2, [3, 4]]];
console.log(arr.flat(2)); // [1, 2, 3, 4]
3. 全階層平坦化
const arr = [1, [2, [3, [4, [5]]]]];
console.log(arr.flat(Infinity)); // [1, 2, 3, 4, 5]
4. 空要素を削除
const arr = [1, , 2, [3, , 4]];
console.log(arr.flat()); // [1, 2, 3, 4]
直感的な指針
- ネストを1段だけ解消: flat()
- 深いネストを解消: flat(n) または flat(Infinity)
- 変換＋平坦化: flatMap