配列の入れ子を一段だけほどく？JavaScriptのflatと深さを試そう

配列の中に、さらに配列が入っている。中の数字を一列に並べたいのに、flatを使っても角括弧が残った。そんなときは「何段までほどくか」を確認しよう。

このページでは、入れ子の配列をflatで段階的にほどけるようになる。入れ子は、あるものの中に同じ種類のものが入っている構造のこと。ブラウザがあれば試せるよ。実ファイルや外部サービスは使わない作例だよ。

まず元の配列を読む

const source = [1, [2, [3, [4]]]];

一番外側の配列には、数値1と、2から始まる配列の二つの要素がある。その内側にも3から始まる配列があり、さらに4を入れた配列があるね。

flatは、配列になっている要素を指定した深さまで展開し、新しい配列へまとめるメソッドだよ。数字を足したり、並び替えたり、重複を削除したりする処理ではない。

省略した深さは1

const source = [1, [2, [3, [4]]]];
console.log(source.flat());  // [1, 2, [3, [4]]]
console.log(source.flat(1)); // [1, 2, [3, [4]]]

引数の深さを省くと1になる。外側の直下にある配列を一段展開するので、2は外側へ出るが、3と4を含む入れ子は残るよ。「flatという名前だから、いつでも全部一列になる」というわけではないんだ。

引数は、丸括弧の中へ渡す条件や値のこと。この例の1が、ほどく深さの条件になる。

深さを変えて、残る角括弧を見る

0なら入れ子をほどかず、新しい外側の配列を返す。2なら二段まで展開する。Infinityは無限大を表すJavaScriptの値で、この例では深さの上限を有限の段数へ絞らず、内側の配列を最後まで展開するよ。

const source = [1, [2, [3, [4]]]];
console.log(source.flat(2));        // [1, 2, 3, [4]]
console.log(source.flat(Infinity)); // [1, 2, 3, 4]
console.log(source);               // 元は[1, [2, [3, [4]]]]

ページ内で同じ条件を比べる

1. 作例の深さを1にし、返り値に角括弧が残ることを見る。
2. 0を選び、元と同じ入れ子の形になることを確認する。
3. 2へ切り替え、[4]だけが内側に残ることを見る。
4. Infinityを選び、数字四つが並ぶことを確認する。
5. 「最初から試す」で深さ1へ戻す。

深さ2とInfinityでは、どちらも外側の要素数は4。しかし、前者の最後は配列[4]、後者は数値4だから、内容の形は違うよ。作例には、直下に配列が何個残っているかも表示している。

元は変えないが、中身を全部複製するわけではない

flatは元の配列を書き換えず、新しい配列を返す。このため作例で深さを何度切り替えても、毎回同じ元から結果を比べられる。

ただし、要素のオブジェクトまで別物へ複製する機能ではない。オブジェクトを含むデータなら、参照が共有される場合があるよ。コピーしたから内部のすべてが独立した、と考えないでね。

今回の作例は、飛び飛びの空き要素がない数値と配列だけに絞っている。空き要素のある配列では、展開対象の段階で空きが除かれるなど、追加の規則もある。まずは表の条件で、深さと返り値の形を分けて理解しよう。

編集部では2026年10月29日にMDNと照合し、四つの深さの結果と元が変わらないこと、リセットをNodeとブラウザで検証した。浅いコピーと入れ子の参照、sliceとspliceも参考になるよ。