Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Метод flatMap() сначала применяет функцию к каждому элементу, а затем преобразует полученый результат в плоскую структуру и помещает в новый массив. Это идентично map фукнции, с последующим применением функции flat с параметром depth ( глубина ) равным 1, но flatMap часто бывает полезным, так как работает немного более эффективно.

Синтаксис

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

Параметры

callback
Функция которая производит елементы нового массива, принимает три аргумента:
 
currentValue
Текущий обрабатываемый элемент массива.
indexНеобязательный
Индекс обрабатываемого элемента в массиве.
arrayНеобязательный
Массив по которому осуществляется обход.
thisArgНеобязательный
Значение используемое в качестве this при вызове функции callback.

Возвращаемое значение

Новый массив, каждый элемент которого является результатом выполнения функции callback и "поднят" на уровень 1.

Описание

Смотрите Array.prototype.map() для детального описания callback функции. Метод flatMap идентичен методу map с последующим вызовом flat с параметром depth 1.

Примеры

map и flatMap

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

Хотя результат полученый в примере выше можно было получить используя просто map, ниже мы рассмотрим пример где 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"]

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

//=> [1, 2, 3, 4, 5, 6, 7, 8, 9]

Альтернативное решение

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

Спецификация

Specification Status Comment
Array.prototype.flatMap proposal Candidate (3)  

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильныеServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung InternetNode.js
Базовая поддержка
Экспериментальная
Chrome Полная поддержка 69Edge Нет поддержки НетFirefox Полная поддержка 62IE Нет поддержки НетOpera Полная поддержка 56Safari Полная поддержка 12WebView Android Полная поддержка 69Chrome Android Полная поддержка 69Edge Mobile Нет поддержки НетFirefox Android Полная поддержка 62Opera Android Полная поддержка 56Safari iOS Полная поддержка 12Samsung Internet Android Нет поддержки Нетnodejs Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

См так же:

Метки документа и участники

Внесли вклад в эту страницу: etroynov, dood
Обновлялась последний раз: etroynov,