【JavaScript ECMAScript】Array::Array.prototype.flatMapインスタンスメソッドの使い方

Array.prototype.flatMap()メソッドは、配列の各要素に対して指定されたコールバック関数を適用し、その結果得られる新しい配列の要素を全て一つに結合（フラット化）して、新しい配列として返すメソッドです。

このメソッドは、実質的に配列の各要素を変換するmap()メソッドを実行した後に、その結果として得られた入れ子の配列を一段階浅くするflat()メソッドを適用するのと同等の機能を提供します。コールバック関数は、現在の要素、そのインデックス、および元の配列自体を引数として受け取ります。コールバック関数が返す値は、新しい配列の要素として扱われますが、もしその返り値が配列であった場合、flatMap()は自動的にその配列の要素を展開し、結果の配列に直接追加します。

例えば、配列内のオブジェクトを処理し、その中から特定のプロパティを取り出して、さらにそのプロパティが配列であった場合に、全ての要素を単一の平坦な配列にまとめたいといった状況で非常に有効です。これにより、データのフィルター処理と同時にデータの構造を効率よく整形できます。

flatMap()メソッドの第一引数には実行したいコールバック関数を、第二引数にはオプションでコールバック関数内でthisとして参照するオブジェクトを指定できます。このメソッドは元の配列を変更せず、常に新しい配列を生成して返すため、非破壊的にデータの変換と整形を行うことが可能です。複雑な配列操作を、より簡潔で読みやすいコードで実現するのに役立ちます。

Copy
1const array1 = [1, 2, 3];
2const result = array1.flatMap(num => (num === 2 ? [20, 21] : [num]));
3// result は [1, 20, 21, 3] となる

callbackFn, thisArg

• callbackFn: (element, index, array) => any: 配列の各要素に対して実行される関数。この関数は、新しい配列を返すか、あるいは undefined を返します。
• thisArg: any: callbackFn を実行する際の this として使用される値。

Array

各要素に関数を適用した結果の配列を、一次元配列に平坦化（フラット化）して返します。