--- title: Array.prototype.flatMap() slug: Web/JavaScript/Reference/Global_Objects/Array/flatMap tags: - Array - JavaScript - flatMap - Масив - метод translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap ---
{{JSRef}}

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

Синтаксис

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

Параметри

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

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

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

Опис

Дивіться детальний опис функції зворотного виклику у {{jsxref("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)

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

{{Compat("javascript.builtins.Array.flatMap")}}

Див. також