От автора: Аrray.map() — очень полезная функция сопоставления: она принимает массив и функцию сопоставления, а затем возвращает новый сопоставленный массив.
Однако есть альтернатива array.map(): array.flatMap() (доступен начиная с ES2019). Этот метод дает вам возможность отображать, а также удалять или даже добавлять новые элементы в результирующий сопоставленный массив.
1. Умный маппер
Имея массив чисел, как бы вы создали новый массив с удвоенными значениями элементов? Использование функции array.map() — хороший подход:
const numbers = [0, 3, 6]; const doubled = numbers.map(n => n * 2); console.log(doubled); // logs [0, 6, 12]
number.map(number => 2 * number) сопоставляет массив number с новым массивом, где каждое число удваивается.
В тех случаях, когда вам нужно сопоставить один массив к другому, что означает, что результирующий массив будет иметь то же количество элементов, что и исходный. Аrray.map() работает очень хорошо.
Но что, если вам нужно удвоить числа в массиве, а также пропустить нули из отображения? Использование array.map() напрямую невозможно, потому что этот метод всегда создает сопоставленный массив с тем же количеством элементов, что и исходный массив. Но вы можете использовать комбинацию array.map() и array.filter():
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:
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() принимает функцию обратного вызова в качестве аргумента и возвращает новый сопоставленный массив:
const mappedArray = array.flatMap((item, index, origArray) => { // ... return [value1, value2, ..., valueN];
}[, thisArg]);
Функция обратного вызова вызывается для каждого элемента исходного массива с тремя аргументами: текущий элемент, индекс и исходный массив. Затем массив, возвращаемый обратным вызовом, сглаживается на 1 уровень в глубину, а полученные элементы добавляются в сопоставленный массив.
Кроме того, метод принимает второй необязательный аргумент, содержащий значение this внутри обратного вызова. Самый простой способ использовать array.flatMap() — сгладить массив который содержит элементы в виде массивов:
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, …].
Например, как вы видели в предыдущем примере, вы можете создать новый массив, удвоив элементы, а также удалив нули:
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() для увеличения количества элементов в отображаемом массиве. Например, следующий фрагмент кода сопоставляет массив чисел с новым массивом, добавляя удвоенные и утроенные числа:
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
Источник: dmitripavlutin.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен
