📦
JavaScriptで配列の次元数を減らすには、Array.prototype.flat() を使おう
JavaScriptでの配列次元を減らすにはArray.flat()を使おう
JavaScriptでArray特に、mapsを利用してArrayから新規にArrayを作る場合、どうしても配列が多次元になりがちです。ただ多次元配列をそのまま使うことはなく、CSVや外部のサービスとのAPI連携で取得したデータを取り回しながら、Object.fromEntriesや配列の次元数を減らしてmapでJSXを生成するなど実際に扱う場合は、２次元配列を1次元配列にしたいといったニーズが起こり得ます。
Array.flat()を知らない世界線のハナシ
JavaScriptで配列の次元数を減らす場合は以下のような実装をすることが一般的かと思います
const multiDimensionalArray = ["a","b",["c", "d"],"e"]
let singleDimensionArray = []
for (const item of multiDimensionalArray) {
if(item.isArray()){
singleDimensionArray.concat(item)
} else {
singleDimensionArray.push(item)
}
}
console.log(singleDimensionArray)
// ["a","b","c","d","e"]
この実装も機能はしますが、例えばReactの関数コンポーネント内の計算でfor...of...を使うと処理が分散し、どこでどの処理が起きてるかわからず関数化するにも１度しか使わない機能であれば冗長になってしまいます。letを利用もしているので意図せず再代入されるかもしれません...
加えて可能であれば自前実装よりもできる限りECMAScript標準の関数を使いたいという気持ちもあります...
Array.flat()があると
const multiDimensionalArray = ["a","b",["c", "d"],"e"]
const singleDimensionArray = multiDimensionalArray.flat()
console.log(singleDimensionArray)
// ["a","b","c","d","e"]
でかけてしまいます。メソッドチェーンとして表現することも可能です。
もちろんflat関数は非破壊的なメソッドとして機能します。
詳しい仕様についてはMDNをご確認ください
どう見つけたか
こういったJavaScriptのArrayやObjectでどういった関数が準備されているか、どう調べているか、人によってさまざま（ECMAScriptの更新状況を追ってる方であれば早期で気付くでしょう）かと思います。
自分は上記にも記したMDNの公式サイトを覗きに行って、ArrayやObjectのページを覗くと関数やプロパティの一覧が載っているため必要に応じてor暇な時に覗きに行くことをお勧めします
Discussion