array.flatMap() — витончений перебір у JavaScript

array.map() дуже корисна функція перебору: вона приймає масив і функцію перебору, а потім повертає новий перебраний масив.

Однак існує альтернатива array.map() — array.flatMap() (доступний починаючи з ES2019). Цей метод дає вам можливість перебирати, видаляти та навіть додавати нові елементи в отриманий перебраний масив.

1. Витонченіший перебір

Маючи масив чисел, як би ви створювали новий масив із подвоєними елементами?

Непоганий підхід — застосувати функцію array.map():

const numbers = [0, 3, 6];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // logs [0, 6, 12]

numbers.map(number => 2 * number) перебирає масив numbers та переносить його вміст до нового масиву подвоївши кожне число.

Якщо вам потрібно перебрати й повернути в новий масив однакову кількість елементів, то array.map() чудово впорається з завданням.

Але що, якщо вам потрібно подвоїти числа масиву та пропустити нулі з перебраного масиву?

Безпосередньо застосувати array.map() неможливо, оскільки метод завжди створює масив з тою ж кількістю елементів, що й в оригінальному масиві. Але ви можете скористатися комбінацією array.map() і array.filter():

const numbers = [0, 3, 6];
const doubled = numbers
  .filter(n => n !== 0)
  .map(n => n * 2);
console.log(doubled); // logs [6, 12]

Масив doubled тепер містить елементи numbers, помножені на 2 та не містить нулів.

Гаразд, комбінація array.map() і array.filter() перебирає та фільтрує масиви. Але чи можна скоротити код?

Так! Завдяки методу array.flatMap() ви можете виконати перебір та видалення елементів викликом лише одного методу.

Ось як ви можете використовувати array.flatMap() для повернення нового перебраного масиву з подвоєнням елементів та одночасним відсіюванням нулів 0:

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

Використовуючи лише numbers.flatMap() можна перебрати масив до іншого масиву пропустивши перенесення певних елементів.

Розгляньмо докладніше роботу array.flatMap().

2. array.flatMap()

Функція array.flatMap() приймає функцію зворотного виклику аргументом, і повертає новий перебраний масив:

const mappedArray = array.flatMap((item, index, origArray) => {
  // ...
  return [value1, value2, ..., valueN];
}[, thisArg]);

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

Крім того, метод приймає другий, необов'язковий, аргумент, що вказує на значення this всередині зворотного виклику.

Найпростіший спосіб використовувати array.flatMap() — вирівняти масив, який містить елементи масиви:

const arrays = [[2, 4], [6]];
const flatten = arrays.flatMap(item => item);
console.log(flatten); // logs [2, 4, 6]

У наведеному прикладі arrays містить масиви чисел: [[2, 4], [6]]. Виклик arrays.flatMap(item => item) вирівнює масив до [2, 4, 6].

Але array.flatMap() здатен на більше. Контролюючи кількість елементів масиву, які повертає зворотний виклик, ви можете:

• вилучити елемент з отриманого масиву, повернувши порожній масив [];
• змінити перебраний елемент, повернувши масив з одним новим значенням [newValue];
• або додати нові елементи, повернувши масив із кількома значеннями: [newValue1, newValue2, ...].

Наприклад, як ви бачили в попередньому розділі, ви можете створити новий масив, подвоївши елементи та вилучивши нулі 0:

const numbers = [0, 3, 6];
const doubled = numbers.flatMap(number => {
  return number === 0 ? [] : [2 * number];
});
console.log(doubled); // logs [6, 12]

Розглянемо роботу наведеного прикладу докладніше.

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

Якщо поточний ітерований елемент не нуль, тоді повертається [2 * number]. Коли масив [2 * number] вирівнюється, до отриманого масиву додається лише 2 * number.

Ви також можете використовувати array.flatMap(), щоб збільшувати кількість елементів у перебраних масивах.

Наприклад, такий фрагмент коду перебирає масив чисел та переносить їх у новий масив, додаючи подвоєні та потроєні числа:

const numbers = [1, 4];
const trippled = numbers.flatMap(number => {
  return [number, 2 * number, 3 * number];
});
console.log(trippled);
// logs [1, 2, 3, 4, 8, 12]

3. Висновок

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

Функція зворотного виклику array.flatMap(callback) викликається із 3 аргументами: поточним ітераційним елементом, індексом та оригінальним масивом. Повернений функцією зворотного виклику масив вибудовується в 1 рівень, а отримані елементи вставляються до перебраного масиву.

Зауважте, що якщо потрібно перебрати один елемент та передати одне нове значення, то ліпше застосувати стандартний array.map().