логотип PurpleSchool
логотип PurpleSchool

Как работает метод flatMap() - JavaScript

Автор

Виталий Котов

Метод flatMap() сначала вызывает функцию к каждому элементу в массиве как в методе map(), а затем сокращает вложенность массива как в методе flat() на 1 уровень.

// объявляем массив
let numbers = [1, 2, 3, 4, 5];

// каждый элемент массива возводится в квадрат, а затем уменьшается вложенность на 1 уровень
const resultingArray = numbers.flatMap((x) => [x ** 2]);

console.log(resultingArray);

// Вывод в консоль:
// [ 1, 4, 9, 16, 25 ]

Синтаксис flatMap()

Синтаксис метода flatMap() следующий:

arr.flatMap(callback(currentValue), thisArg);

Где arr - это массив.

Параметры flatMap()

Метод flatMap() принимает:

  • callback
    • функцию, которая будет вызываться для каждого элемента массива. Принимает:
      • currentValue
        • текущий обрабатываемый элемент в массиве.
  • thisArg (необязательно) - значение, используемое в качестве this, при вызове функции callback.

Возвращаемое значение flatMap()

Возвращает новый массив с элементами в качестве значений, возвращенных функцией callback для каждого элемента соответственно.

Примечания:

  • flatMap() не изменяет исходный массив.
  • forEach() равнозначен записи array.map().flat().

Примеры

Пример 1: Использование метода flatMap()

// объявляем массив
let numbers = [1, 2, 3, 4, 5];

// каждый элемент массива увеличивается на 1
// затем вложенность массива уменьшается на 1 уровень
let resultingArray = numbers.flatMap((element) => element + 1);

console.log(resultingArray);

Вывод в консоль:

[ 2, 3, 4, 5, 6 ]

В приведенном выше примере мы использовали метод flatMap() для увеличения каждого элемента массива чисел на 1.

((element) => element + 1) - это функция метода map, которая выполняется в каждом элементе numbers.

Метод возвращает массив, в котором вложенность каждого элемента уменьшается на 1 уровень - [ 2, 3, 4, 5, 6 ], а также каждый элемент увеличенный на 1.

Пример 2: Использование flat() и map() вместо flatMap()

Метод flatMap() представляет собой комбинацию методов flat() и map(). Вместо двух методов можно просто использовать комбинированную версию, т.е. flatMap().

// объявляем массив
let numbers = [1, 2, 3, 4, 5];

// инкрементируем (увеличиваем) каждый элемент массива с помощью map()
let afterMapping = numbers.map((element) => element + 2);

// уменьшаем вложенность массива методом flat()
let afterFlattening = afterMapping.flat();

console.log(afterFlattening); // [ 3, 4, 5, 6, 7 ]

// используем flatMap() вместо flat() and map()
let after_flatMap = numbers.flatMap((element) => element + 2);

console.log(after_flatMap); // [ 3, 4, 5, 6, 7 ]

Вывод в консоль:

[ 3, 4, 5, 6, 7 ]
[ 3, 4, 5, 6, 7 ]

Сначала мы использовали методы map() и flat() отдельно в массиве чисел.

Затем мы использовали метод flatMap(), который сначала сделал map() массива, а затем flat().

В обоих случаях метод вернул один и тот же массив - [ 3, 4, 5, 6, 7 ].

Стрелочка влевоКак работает метод forEach() - JavaScriptКак работает метод flat() - JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний