2次元配列を1次元配列にする方法

はじめに

reactのuseStateで作成した配列を使ってあれこれ機能を実装していると、配列のネストをフラットにしたい！という時がありました。
"flat()"という便利なメソッドの存在を知ったので調べて備忘録として残そうと思います。

二次元配列とは？

配列の中に配列が入っている、下記のような配列のことを二次元配列といいます。

[[a,b,c],[d,e,f]]

ちなみにさらに配列が中に一つ入っていると三次元配列というみたいです。
見てると頭おかしくなりそうですね。

 [[[a,b,c],[d,e,f]],[[g,h,i],[j,k,l]]]

二次元や三次元配列は多次元配列とも呼ばれるそうです。
そして、目にすることが多い下記の配列が1次元配列と言います。

[a,b,c]

構文

const newArray = arr.flat([depth]);

引数の"depth"に入れた数字分ネストをフラットにしてくれます。
(省略可能でデフォルト値は1)

言葉ではイメージが湧かないと思うので例を見ていきましょう。

例

自分が実装している中で配列を一次元配列にしたい！と思った例をここに書くと事前説明が長すぎることになるので、公式ドキュメントの例を引用させてもらいます。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// [0, 1, 2, 3, 4]が返ってくる
// 引数に指定がないと、1つフラットにする

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));
// [0, 1, 2, [3, 4]]が返ってくる

console.log(arr2.flat(3));
// [0, 1, 2, 3, 4]が返ってくる


const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat());
// [1, 2, 3, 4, [5, 6]]が返ってくる
// 一層分なので、[3, 4, [5, 6]]の外側が消える

文章にするのが難しいのですが、引数の数字分、外側から"[]"の層が減っていくというイメージで良いのではないかと思います。
(表現が正しくないかもしれないです)

引数を"Infinity"にすると平坦にする

このようなとんでもなく深くネストされた配列を一次元配列にしたいと思ったら、"Infinity"を引数に入れれば問答無用で一次元配列にしてくれるようです。

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]が返ってくる

終わりに

実装していく中で、配列への理解度がすごく大切な気がしました。
mapやfilterメソッドも調べてまとめようと思います。