Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Код

.flat() и .flatMap(): новые методы для работы с массивами в ECMAScript

Время чтения статьи ~1 минута
.flat() и .flatMap(): новые методы для работы с массивами в ECMAScript главное изображение

Несколько месяцев назад в ECMAScript появились два новых метода для работы с массивами: Array.prototype.flat() и Array.prototype.flatMap(). В справочнике MDN на русском языке они отмечены как экспериментальные, а в англоязычной версии справочника предупреждения об особом статусе нет. Давайте посмотрим на .flat() и .flatMap() поближе.

Метод Array.prototype.flat()

Метод Array.prototype.flat() позволяет работать с вложенными массивами. Обратите внимание на код.

const array = [1, [2, [3]]];

Здесь есть массив array, в который вложен ещё один массив, в котором в свою очередь находится ещё один массив.

Метод Array.prototype.flat() достаёт вложенные массивы и переносит их на уровень, который определяет разработчик. Дефолтный уровень — 1.

array.flat();
// [1, 2, [3]]

// равнозначно:

array.flat(1);
// [1, 2, [3]]

Если глубина вложенности неизвестна, достать вложенные массивы можно с помощью аргумента Infinity. В этом случае метод рекурсивно обходит массив и достает все вложенные элементы независимо от глубины.

// Достаём все вложенные массивы:
array.flat(Infinity);
// [1, 2, 3]

Метод Array.prototype.flatMap()

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

const duplicate = x => [x, x];
[2, 3, 4].map(duplicate);
// [[2, 2], [3, 3], [4, 4]]

Извлечь вложенные массивы можно с помощью flat.

[2, 3, 4].map(duplicate).flat(); 
// [2, 2, 3, 3, 4, 4]

В функциональном программировании подобные операции с массивами встречаются часто. Поэтому в ECMAScript появился метод .flatMap(), который упрощает код.

[2, 3, 4].flatMap(duplicate); 
// [2, 2, 3, 3, 4, 4]

Использовать .flatMap() для преобразования массива эффективнее, чем последовательно использовать .flat() и .map(). Поддержку методов Array.prototype.flat() и Array.prototype.flatMap() в браузерах можно проверить по ссылке.

Это перевод заметки Mathias Bynens.

Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 4 апреля
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время