JavaScriptのflatの使い方！配列を平たくする

JavaScriptでネストされた配列（多次元配列）を1次元配列に変換するflatメソッドについて書いています。
flatメソッドを使うと、配列を再帰的に平坦化し、指定した階層までの要素を1つの配列にまとめることができます。

実際に動くサンプルを使って、以下の操作を解説します。

flatメソッドの基本的な使い方

flatメソッドは、ネストされた配列を指定した階層まで平坦化します。
基本的な構文は以下のとおりです。

array.flat(depth)

• depth: 平坦化する深さ（省略可能、デフォルトは1）。

配列を1階層平坦化する

depthを省略した場合、配列は1階層だけ平坦化されます。

const nestedArray = [1, [2, 3], 4, [5, 6]];
const flattenedArray = nestedArray.flat();

console.log(flattenedArray); // 結果：[1, 2, 3, 4, 5, 6]

nestedArray配列を作成して、次の行でflatメソッドを呼び出しています。
深さを指定していないので、ひとつ下の階層まで、平たくしてくれます。

この例で言うと、ひとつ下の階層は「[2, 3]と[5, 6]」です。
nestedArray配列の1階層目の要素が取り出され、平たくされて、新しい配列flattenedArrayに格納されています。

階層を指定して平坦化する

depthに数値を指定することで、指定した階層まで配列を平坦化できます。

const deeplyNestedArray = [1, [2, [3, 4], 5], 6];
const flattenedArrayLevel2 = deeplyNestedArray.flat(2);

console.log(flattenedArrayLevel2); // 結果：[1, 2, 3, 4, 5, 6]

deeplyNestedArray配列を作って、flatメソッドに「2」を指定して実行しています。
これで、ふたつめの階層までを平たくしてくれます。

deeplyNestedArray配列の2階層目までの要素が取り出され、平たくして、flattenedArrayLevel2に格納されています。

ちなみに何も指定しない場合は、1階層までなので、結果は下記のようになります。

const deeplyNestedArray = [1, [2, [3, 4], 5], 6];
const flattenedArrayLevel2 = deeplyNestedArray.flat();

console.log(flattenedArrayLevel2); // 結果：[1, 2, [3, 4], 5, 6]

Infinityを指定してすべての階層を平坦化する

depthにInfinityを指定すると、すべての階層が平坦化されます。

const veryDeeplyNestedArray = [1, [2, [3, [4, [5, 6]]]]];
const completelyFlattenedArray = veryDeeplyNestedArray.flat(Infinity);

console.log(completelyFlattenedArray); // 結果：[1, 2, 3, 4, 5, 6]

veryDeeplyNestedArray配列を作成して、flatメソッドを呼び出すときにInfinityを指定しました。
これで、すべての階層の要素が取り出されて、平たくされて、結果はcompletelyFlattenedArrayに格納しています。

flatメソッドを使うメリット

flatメソッドを使う主なメリットは以下のとおりです。

• ネストされた配列の操作が容易になる: 多次元配列を1次元配列に変換することで、要素へのアクセスや操作が簡単になります。
• コードの可読性向上: ネストされた配列を扱う複雑な処理を、flatメソッドを使って簡潔に記述できます。
• データ処理の効率化: 配列を平坦化することで、map()、filter()、reduce()などの配列メソッドを効率的に使用できます。

JavaScriptのflatメソッドの使い方まとめ

今回はJavaScriptのflatメソッドの使い方について解説しました。
記事の内容をまとめます。