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(). Якщо функція зворотного виклику не повертає масив, це може призвести до неочікуваних результатів.

автор: Bond правити

Нотатка

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

автор: Bond правити

Нотатка

Callback-функція, передана методу flatMap(), може приймати три аргументи: поточний елемент, індекс елемента та сам масив. Ви можете використовувати ці аргументи для виконання різних операцій або додаткової логіки в умовній функції.

автор: Bond правити

Нотатка

flatMap() розгортає лише один рівень вкладеності масиву. Якщо у вас є багаторівневі вкладені масиви і вам потрібно їх розгорнути повністю, розгляньте використання методу flat() з відповідним рівнем глибини.

автор: Bond правити

Нотатка

flatMap() зберігає початковий масив незмінним, повертаючи новий масив. Це сприяє незмінності даних і є ключовим моментом для оптимізації ресурсів у коді.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

flatMap(callbackFn)
flatMap(callbackFn, thisArg)

Параметри

callbackFn

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

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

• element: поточний елемент, який обробляється у масиві;

• index: індекс поточного елемента, який обробляється у масиві;

• array: масив, на якому було викликано метод find().

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

array

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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]

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

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]

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