JavaScript

：

：

Array.prototype.flatMap()メソッド

　編集：2022.08.20 by T.A.

→

その Array の要素の値をコールバック関数に掛けて処理し、結果の値を要素とした 1 段平坦にした配列を返す。空要素は処理されません。

mdn： 最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。

これは、map() の後に深さ 1 の flat() を行うのと同じですが、これら 2 つのメソッドを別々にコールするよりもわずかに効率的です。

コールバック関数による：

arr.flatMap(callback[, thisArg])
関数部：
function 関数名(element[, index[, array]]){
　処理
}

インライン コールバック関数による：

arr.flatMap(function(element[, index[, array]]){処理}[, thisArg])

アロー関数による：

arr.flatMap( (element[, index[, array]]) => {処理})
arr Arrayオブジェクト
callback 実行する関数名を記述。
関数名 callbackと同じ名前を記述。
処理 処理プログラム。必ずreturnで処理結果を返す。

アロー関数使用の場合、「{ }」に囲まれていない場合は値を表す式となります。

element 配列で現在処理されている要素です。
index 省略可。配列で現在処理されている要素のインデックスです。
array 省略可。map が呼び出された配列です。
thisArg 省略可。callback を実行するときに this として使用する値です。
処理 処理プログラム。
戻り値

各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列。

解説

コールバック関数の詳細な説明は Array.prototype.map() を参照してください。flatMap メソッドは、map の後に深さ 1 の flat() を呼び出すのと同じです。

代替手段

reduce() と concat()： 

var arr = [1, 2, 3, 4];
D=arr.flatMap(x => [x, x * 2]); //＝[1, 2, 2, 4, 3, 6, 4, 8]
// 次も同様
D=arr.reduce((acc, x) => acc.concat([x, x * 2]), []); //＝[1, 2, 2, 4, 3, 6, 4, 8]

ただし、これは非効率的であり、大きな配列の場合は避けるべきであることに注意してください。処理ごとにガベージコレクションが必要な新しい一時配列を作成し、要素を単に追加するのではなく、現在のアキュムレータ配列から新しい配列に要素をコピーします。

例

map() と flatMap()： 

let arr1 = [1, 2, 3, 4];
D=arr1.map(x => [x * 2]);     //＝[ [2], [4], [6], [8] ]
D=arr1.flatMap(x => [x * 2]); //＝[2, 4, 6, 8]

// 1 つのレベルのみが平坦化されます
arr1.flatMap(x => [[x * 2]]); //＝[ [2], [4], [6], [8] ]

上記は map を使用することでも実現できますが、ここでは flatMap の使用方法をよりよく示す例を紹介します。 

A=[1, 2, 3, 4];
function F(Ele, Idx){
  alert(Idx)
  return Ele * 2
}
D=A.flatMap(F); //＝[2, 4, 6, 8 ]

A=[1, 2, 3, 4];
D=A.flatMap(function(Ele, Idx){
  return Ele * 2
}); //＝[2, 4, 6, 8 ]

A=[1, 2, 3, 4];
D=A.flatMap((Ele, Idx) => Ele * 2
); //＝[2, 4, 6, 8 ]
テスト