この記事は翻訳作業中です。

flatMap() メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは深さ 1 の flat が続く map と同じですが、flatMap はしばしば有用であり、2 つのメソッドを 1 つにマージするよりもやや効果的です。

構文

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

引数

callback
新しい配列の要素を生成する関数。3 つの引数を受け取ります。
currentValue
配列で現在処理されている要素です。
indexOptional
配列で現在処理されている要素のインデックスです。
arrayOptional
map が呼び出された配列です。
thisArgOptional
callback を実行するときの this として用いられる値です。

戻り値

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

説明

コールバック関数の詳細については、Array.prototype.map() を見てください。flatMap メソッドは、深さ 1 の flat が続く map と同じです。

mapflatMap

let 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]]

While the above could have been achieved by using map itself, here is an example that better showcases the use of flatMap.

Let's generate a list of words from a list of sentences.

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"]

Notice, the output list length can be different from the input list length.

For adding and removing items during a map

flatMap can be used as a way to add and remove items (modify the number of items) during a map. In other words, it allows you to map many items to many items (by handling each input item separately), rather than always one-to-one. In this sense, it works like the opposite of filter. Simply return a 1-element array to keep the item, a multiple-element array to add items, or a 0-element array to remove the item.

// 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]
//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

代替え

reduceconcat

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

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

Polyfill

This polyfill needs Array.prototype.flat polyfill

if (!Array.prototype.flatMap) {
  Array.prototype.flatMap = function() {
    return Array.prototype.map.apply(this, arguments).flat(1);
  };
}

仕様

仕様 ステータス コメント
Array.prototype.flatMap proposal Finished (4)  

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
flatMapChrome 完全対応 69Edge 未対応 なしFirefox 完全対応 62IE 未対応 なしOpera 完全対応 56Safari 完全対応 12WebView Android 完全対応 69Chrome Android 完全対応 69Edge Mobile 未対応 なしFirefox Android 完全対応 62Opera Android 完全対応 48Safari iOS 完全対応 12Samsung Internet Android 未対応 なしnodejs 完全対応 11.0.0

凡例

完全対応  
完全対応
未対応  
未対応

関連項目

ドキュメントのタグと貢献者

このページの貢献者: segayuu, mdnwebdocs-bot, YuichiNukiyama
最終更新者: segayuu,