JavaScript flatMap()メソッド

Array 对象参考手册JavaScript Array オブジェクト

例

マッピング関数を使用して各要素をマッピングし、結果を新しい配列に平坦化します：

const arr1 = [1, 2, [3], [4, 5], 6, []]; const flattened = arr1.flatMap(num => num); document.getElementById("demo").innerHTML = flattened;

試してみる »

定義と用法

flatMap() メソッドは、まずマッピング関数を使用して各要素をマッピングし、次に結果を新しい配列に平坦化します。これは、深さ1の flat を続けて適用する map とほぼ同じですが、通常、flatMap は1つのメソッドに結合する方がわずかに効率的です。

flatMap() メソッドは新しい配列を返します。各要素はコールバック関数の結果であり、構造の深さ depth の値は 1 です。

ブラウザサポート

表内の数字は、そのメソッドをサポートする最初のブラウザバージョン番号を示します。

メソッド
flatMap() 45.0 12.0 32.0 9 25.0

構文

// 箭头函数
flatMap((currentValue) => { /* … */ } )
flatMap((currentValue, index) => { /* … */ } )
flatMap((currentValue, index, array) => { /* … */ } )

// 回调函数
flatMap(callbackFn)
flatMap(callbackFn, thisArg)

// 行内回调函数
flatMap(function(currentValue) { /* … */ })
flatMap(function(currentValue, index) { /* … */ })
flatMap(function(currentValue, index, array){ /* … */ })
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

パラメータ

パラメータ 説明
callback

新しい配列の要素を生成できる関数で、3つのパラメータを渡すことができます：

currentValue

現在配列で処理中の要素

indexオプション

オプション。配列で処理中の現在の要素のインデックス。

arrayオプション

オプション。呼び出されるmap配列

thisArgオプション。callback 関数を実行するときに使用する this の値。

技術詳細

戻り値: 配列。
JavaScript バージョン: ECMAScript 6

その他の例

map() と flatMap()

例

var arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

上記のコードは map と flatMap のどちらでも使えるように見えますが、これは flatMap の使い方を示すだけです。

そこで、flatMap の効果をよりよく示すために、以下ではいくつかの文を含む配列を単語ごとの新しい配列に分割します。

例

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));

// ["it's","Sunny","in", "", "California"]

出力リストの長さは入力リストの長さと異なる場合があることに注意してください。

map() 中に項目を追加または削除する

flatMap は、map 中に項目を追加または削除（つまり items の数を変更）するために使用できます。言い換えれば、常に1対1ではなく、多くの項目を走査して他の項目にすることができます（それぞれを個別に配置して処理します）。この意味で、filter の反対の働きに似ています。項目を保持するには1つの要素を含む配列を返し、項目を追加するには複数の要素を含む配列を返し、項目を削除するには0個の要素を含む配列を返すだけです。

例

// Let's say we want to remove all the negative numbers and split the odd numbers into an even number and a 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =>
  (n < 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)

// expected output: [4, 1, 4, 20, 16, 1, 18]

代替案

reduce() と concat()

例

var arr = [1, 2, 3, 4];

arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]

これは非効率であり、大規模な配列では避けるべきであることに注意してください。各反復で、ガベージコレクションの対象となる新しい一時配列が作成され、現在のアキュムレータ配列から新しい配列へ要素がコピーされます。既存の配列に新しい要素を追加するのではなく。


Array 对象参考手册JavaScript Array オブジェクト

その他の拡張