Умный маппер 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]
| 123 | 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]
| 12345 | 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]
| 12345 | 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]);
| 1234 | 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]
| 123 | 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]
| 12345 | 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]
| 123456 | 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