Array.prototype.flatMap()

Метод flatMap() спочатку виконує надану функцію на кожному елементі, а після цього вирівнює отриманий результат і зберігає його у новий масив. Це аналогічно послідовному виклику map() та flat() з глибиною 1, але flatMap() буває доволі корисним, оскільки об'єднання обох методів у один є трохи ефективнішим.

Синтаксис

var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
    // повернути елемент для нового масиву new_array
}[, thisArg])

Параметри

callback
Функція, яка створює елемент для нового масиву. Приймає три аргументи:
currentValue
Поточний елемент масиву, що обробляється.
indexOptional
Індекс поточного елемента, що обробляється.
arrayOptional
Масив, для якого був викликаний метод flatMap.
thisArgOptional
Значення, що використовується як this під час виконання callback.

Значення, що повертається

Новий масив, в якому кожний елемент є результатом виклику функції callback, вирівняний до глибини 1.

Опис

Дивіться детальний опис функції зворотного виклику у Array.prototype.map(). Метод flatMap є ідентичним послідовному виклику методів map та flat з глибиною 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]

// вирівнюється тільки один рівень
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

В той час як наведений вище результат міг бути отриманий використанням самого map, нижче приклад, який краще демонструє використання flatMap.

Давайте створимо список слів зі списку речень.

let arr1 = ["Сьогодні сонячно у", "", "Львові"];

arr1.map(x => x.split(" "));
// [["Сьогодні","сонячно","у"],[""],["Львові"]]

arr1.flatMap(x => x.split(" "));
// ["Сьогодні","сонячно","у", "", "Львові"]

Зверніть увагу, що довжина результуючого списку може відрізнятися від довжини початкового списку.

Для додавання та видалення елементів під час виконання map()

Метод flatMap можна використовувати, щоб додавати та видаляти елементи (змінювати кількість елементів) під час виконання map. Іншими словами, він дозволяє кожен з множини елементів перетворювати на множину елементів (обробляючи кожен елемент окремо), а не завжди 1-1. В цьому плані він протилежність метода filter. Просто поверніть 1-елементний масив, щоб залишити елемент, багатоелементний масив, щоб додати елементи, або порожній масив, щоб видалити елемент.

// Припустимо, ми бажаємо видалити всі від'ємні числа та розбити непарні числа на парне число та 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]
)

// очікуваний результат: [4, 1, 4, 20, 16, 1, 18]

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

reduce() та concat()

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

arr1.flatMap(x => [x * 2]);
// є еквівалентом
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

Зауважте, однак, що цей метод краще не застосовувати для великих масивів, бо він буде неефективним: на кожній ітерації він створює новий тимчасовий масив, який треба прибирати збирачу сміття, і він копіює елементи з поточного масива-накопичувача у новий масив замість того, щоб просто додати нові елементи у існуючий масив.

Специфікації

Специфікація Статус Комент
Array.prototype.flatMap Завершено (4)

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
flatMapChrome Full support 69Edge No support NoFirefox Full support 62IE No support NoOpera Full support 56Safari Full support 12WebView Android Full support 69Chrome Android Full support 69Firefox Android Full support 62Opera Android Full support 48Safari iOS Full support 12Samsung Internet Android No support Nonodejs Full support 11.0.0

Legend

Full support  
Full support
No support  
No support

Див. також