JS метод Array.flatMap()

Опис

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

Приклад:

let arr = [1, 2, 3, 4];
let result = arr.flatMap(x => [x, x * 2]);
console.log(result);  // Виведе: [1, 2, 2, 4, 3, 6, 4, 8]

Тут для кожного числа у масиві ми створюємо новий масив, що містить вихідне число та його подвоєне значення. Дякуючи flatMap(), ми отримуємо однорівневий масив як результат.

Функція зворотного виклику callbackFn, яку ми передаємо методу flatMap(), повертає масив, який потім "вирівнюється". Цей метод очікує, що об'єкт this має властивість length та інші цілочисельні властивості.

Увага: Якщо callbackFn повертає не масив, результати можуть бути непередбачуваними.

Нотатка:	Пам'ятайте, що метод `flatMap()` поєднує кроки `map()` і `flat()`. Він автоматично виконує функцію над кожним елементом масиву і потім зрівнює результати до однорівневого масиву.
Нотатка:	Callback-функція, передана методу `flatMap()`, може приймати три аргументи: поточний елемент, індекс елемента та сам масив. Ви можете використовувати ці аргументи для виконання різних операцій або додаткової логіки в умовній функції.
Нотатка:	`flatMap()` розгортає лише один рівень вкладеності масиву. Якщо у вас є багаторівневі вкладені масиви і вам потрібно їх розгорнути повністю, розгляньте використання методу `flat()` з відповідним рівнем глибини.
Порада:	Завжди враховуйте можливі помилки типів при роботі з `flatMap()`. Якщо функція зворотного виклику не повертає масив, це може призвести до неочікуваних результатів.
Нотатка:	`flatMap()` зберігає початковий масив незмінним, повертаючи новий масив. Це сприяє незмінності даних і є ключовим моментом для оптимізації ресурсів у коді.

Синтаксис

flatMap(callbackFn)
flatMap(callbackFn, thisArg)

Параметри

*callbackFn

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

Функція callbackFn викликається з наступними аргументами:

element: поточний елемент, який обробляється у масиві;
index: індекс поточного елемента, який обробляється у масиві;
array: масив, на якому було викликано метод find().

thisArg

Значення, яке використовується як this під час виконання функції callbackFn.

Return

array: Новий масив, в якому кожний елемент є результатом виконання функції зворотного виклику callbackFn.

Переглядачі

Переглядач
	69	62	12	56	79

Переглядач
	69	69	62	12

Переглядач
	11.0.0	1.0

Приклади

Цей приклад використовує метод flatMap() для масиву arr1. За допомогою умови, якщо елемент масиву дорівнює 2, то повертається новий масив [2, 2], в іншому випадку - число 1. Результат роботи методу flatMap() виводиться на сторінку.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYQEmxa">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Метод map() використовується для створення нового масиву, в якому кожен елемент є результатом виконання заданої функції на кожному елементі вихідного масиву.

Метод flatMap() схожий на метод map(), але перед тим як повернути кінцевий результат, він розгортає вкладені масиви у один рівень. Таким чином, flatMap() використовується для праці з вкладеними масивами і отримання однорівневого масиву як результату.

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

У прикладі, ми використовуємо flatMap() для видалення від'ємних чисел та розбиття непарних чисел на парне число та 1.

const a = [5, 4, -3, 20, 17, -33, -4, 18];
const result = a.flatMap((n) => {
  if (n < 0) {
    return [];
  }
  return n % 2 === 0 ? [n] : [n - 1, 1];
});
console.log(result); // [4, 1, 4, 20, 16, 1, 18]

У першому прикладі, розріджений масив [1, 2, , 4, 5] обробляється за допомогою flatMap(), де кожен елемент x масиву множиться на 2 і повертається як масив [x, x * 2]. Оскільки масив є розрідженим, порожній слот буде проігноровано, і результатом буде [1, 2, 2, 4, 4, 8, 5, 10].

У другому прикладі, масив [1, 2, 3, 4] обробляється за допомогою flatMap(), де для кожного елемента x створюється масив [, x * 2]. Оскільки порожній слот утворений спеціально (,) і не має значення, він буде проігнорований, а результатом буде [2, 4, 6, 8].

console.log([1, 2, , 4, 5].flatMap((x) => [x, x * 2])); // [1, 2, 2, 4, 4, 8, 5, 10]
console.log([1, 2, 3, 4].flatMap((x) => [, x * 2])); // [2, 4, 6, 8]

Метод flatMap() читає властивість length цього об'єкта, а потім отримує доступ до кожної властивості з ключем, що є не від'ємним цілим числом меншим за length.

const arrayLike = {
  length: 3,
  0: 1,
  1: 2,
  2: 3,
  3: 4, // ігнорується flatMap(), оскільки length дорівнює 3
};
console.log(Array.prototype.flatMap.call(arrayLike, (x) => [x, x * 2]));
// [1, 2, 2, 4, 3, 6]

// Об'єкти, схожі на масиви, які повертаються зворотним викликом, не сплощуються
console.log(
  Array.prototype.flatMap.call(arrayLike, (x) => ({
    length: 1,
    0: x,
  })),
);
// [ { '0': 1, length: 1 }, { '0': 2, length: 1 }, { '0': 3, length: 1 } ]

JS довідник

JavaScript

Наповнення JS розділу