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

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

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

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

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

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

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

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

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

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

JavaScript 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:

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

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

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

2. array.flatMap()

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

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

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

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

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

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

JavaScript 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, …].

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

JavaScript 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() для увеличения количества элементов в отображаемом массиве. Например, следующий фрагмент кода сопоставляет массив чисел с новым массивом, добавляя удвоенные и утроенные числа:

JavaScript 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) вызывается с тремя аргументами: текущим итерируемым элементом, индексом и исходным массивом. Затем массив, возвращаемый функцией обратного вызова, сглаживается на 1 уровень, а полученные элементы вставляются в результирующий сопоставленный массив.

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

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

Автор: Dmitri Pavlutin

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