Умный маппер JavaScript: array.flatMap()

Умный маппер JavaScript: array.flatMap()

От автора: Аrray.map() — очень полезная функция сопоставления: она принимает массив и функцию сопоставления, а затем возвращает новый сопоставленный массив.

Однако есть альтернатива array.map(): array.flatMap() (доступен начиная с ES2019). Этот метод дает вам возможность отображать, а также удалять или даже добавлять новые элементы в результирующий сопоставленный массив.

1. Умный маппер

Имея массив чисел, как бы вы создали новый массив с удвоенными значениями элементов? Использование функции array.map() — хороший подход:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Демонстрация

number.map(number => 2 * number) сопоставляет массив number с новым массивом, где каждое число удваивается.
В тех случаях, когда вам нужно сопоставить один массив к другому, что означает, что результирующий массив будет иметь то же количество элементов, что и исходный. Аrray.map() работает очень хорошо.

Но что, если вам нужно удвоить числа в массиве, а также пропустить нули из отображения? Использование array.map() напрямую невозможно, потому что этот метод всегда создает сопоставленный массив с тем же количеством элементов, что и исходный массив. Но вы можете использовать комбинацию array.map() и array.filter():

Демонстрация

Массив doubled теперь содержит элементы numbers, умноженные на 2, а также не содержит нулей. Хорошо, комбинация array.map() и array.filter() работает хорошо. Но есть ли более короткий подход?

Да! Благодаря методу array.flatMap() вы можете выполнять сопоставление и удаление элементов всего одним вызовом метода.

Вот как вы можете использовать array.flatMap() для возврата нового сопоставленного массива с удвоенными элементами, в то же время фильтруя нули 0:

Демонстрация

Используя только number.flatMap(), вы можете сопоставить массив с другим массивом, но также пропустить определенные элементы из сопоставления. Давайте более подробно рассмотрим, как работает array.flatMap().

2. array.flatMap()

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

Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.

Кроме того, метод принимает второй необязательный аргумент, содержащий значение this внутри обратного вызова. Самый простой способ использовать array.flatMap() — сгладить массив который содержит элементы в виде массивов:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Демонстрация

В приведенном выше примере arrays содержит массивы чисел: [[2, 4], [6]]. Вызов arrays.flatMap(item => item) сглаживает массив до [2, 4, 6].

Но array.flatMap() может делать больше, чем просто сглаживание. Управляя количеством элементов массива, которые вы возвращаете из обратного вызова, вы можете:

удалить элемент из результирующего массива, вернув пустой массив []

изменить сопоставленный элемент, вернув массив с одним новым значением [newValue]

добавить новые элементы, возвращая массив с несколькими значениями: [newValue1, newValue2, …].

Например, как вы видели в предыдущем примере, вы можете создать новый массив, удвоив элементы, а также удалив нули:

Демонстрация

Давайте более подробно рассмотрим, как работает приведенный выше пример. Функция обратного вызова возвращает пустой массив [], если текущий элемент равен 0. Это будет означать, что при сглаживании пустой массив [] вообще не содержит значений.

Если текущий итерируемый элемент не равен нулю, то возвращается [2 * number]. Когда массив [2 * number] сглаживается, в результирующий массив добавляется элемент 2 * number.

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

Демонстрация

3. Заключение

Метод array.flatMap() подходит, если вы хотите сопоставить массив с новым массивом, а также контролировать, сколько элементов вы хотите добавить в новый сопоставленный массив.

Функция обратного вызова array.flatMap(callback) вызывается с тремя аргументами: текущим итерируемым элементом, индексом и исходным массивом. Затем массив, возвращаемый функцией обратного вызова, сглаживается на 1 уровень, а полученные элементы вставляются в результирующий сопоставленный массив.

Обратите внимание, что если вы просто хотите сопоставить единый элемент с единым новым значением, то используйте стандартный array.map().

Задача: можете ли вы реализовать функцию filter(array, predicateFunc), которая возвращала бы новый отфильтрованный массив с помощью predicateFunc? Пожалуйста, используйте array.flatMap() для реализации.

Автор: Dmitri Pavlutin

Источник: dmitripavlutin.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.