このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!
flatMap()
メソッドは、最初にマッピング関数を使用してそれぞれの要素をマップした後、結果を新しい配列内にフラット化します。これは深さ 1 の flat が続く map と同じですが、flatMap
はしばしば有用であり、2 つのメソッドを 1 つにマージするよりもやや効果的です。
{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) { // return element for new_array }[, thisArg])
引数
callback
- 新しい配列の要素を生成する関数。3 つの引数を受け取ります。
currentValue
- 配列で現在処理されている要素です。
index
Optional- 配列で現在処理されている要素のインデックスです。
array
Optionalmap
が呼び出された配列です。
thisArg
Optionalcallback
を実行するときのthis
として用いられる値です。
戻り値
各要素がコールバック関数の結果であり、深さが 1 にフラット化された新しい配列です。
説明
コールバック関数の詳細については、Array.prototype.map()
を見てください。flatMap
メソッドは、深さ 1 の flat
が続く map
と同じです。
例
map
と flatMap
let arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2] // [[2], [4], [6], [8]] arr1.flatMap(x => [x * 2] // 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(" ")
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]
代替え
reduce
と concat
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]
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) |
ブラウザー実装状況
デスクトップ | モバイル | サーバー | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
flatMap | Chrome 完全対応 69 | Edge 未対応 なし | Firefox 完全対応 62 | IE 未対応 なし | Opera 完全対応 56 | Safari 完全対応 12 | WebView Android 完全対応 69 | Chrome Android 完全対応 69 | Firefox Android 完全対応 62 | Opera Android 完全対応 48 | Safari iOS 完全対応 12 | Samsung Internet Android 完全対応 10.0 | nodejs 完全対応 11.0.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応