FlatMap: примеры (JAVASCRIPT)
flatMap(callback: (value: T, index: number, array: T[]) => U | readonly U[], thisArg?: any): U[]Основы метода flatMap
Метод flatMap() доступен для массивов в JavaScript и представляет собой комбинацию двух операций: map() и flat(). Этот метод сначала применяет функцию преобразования к каждому элементу массива, а затем сглаживает результат на один уровень.
Когда используется:
Функция применяется, когда необходимо преобразовать элементы массива и одновременно избавиться от вложенности, возникающей в результате преобразования. Типичные сценарии включают обработку вложенных данных, разбиение строк на подстроки, фильтрацию с преобразованием.
Аргументы:
callback- функция, вызываемая для каждого элемента массива. Принимает три параметра:currentValue(текущий элемент),index(индекс текущего элемента),array(исходный массив)thisArg(необязательный) - значение, используемое в качествеthisпри вызове функцииcallback
Возвращаемое значение:
Новый массив, каждый элемент которого является результатом выполнения функции callback, с последующим сглаживанием на один уровень. Исходный массив не изменяется.
Базовые примеры использования
Пример 1: Разделение строк на слова
const phrases = ['Привет мир', 'JavaScript примеры'];
const words = phrases.flatMap(phrase => phrase.split(' '));
console.log(words);['Привет', 'мир', 'JavaScript', 'примеры']
Пример 2: Преобразование с добавлением элементов
const numbers = [1, 2, 3];
const result = numbers.flatMap(num => [num, num * 2]);
console.log(result);[1, 2, 2, 4, 3, 6]
Пример 3: Удаление нулевых значений
const items = [1, 2, null, 3, undefined, 4];
const filtered = items.flatMap(item => item || []);
console.log(filtered);[1, 2, 3, 4]
Альтернативные методы JavaScript
map() с последующим flat() - аналогичная операция, но в два этапа. Предпочтительна при необходимости контролировать глубину сглаживания.
reduce() с concat() - более гибкое решение для сложных преобразований, когда требуется нестандартная логика обработки элементов.
filter() и map() по отдельности - подходит для сценариев, где преобразование и фильтрация должны быть явно разделены.
Распространенные ошибки
Ошибка 1: Ожидание глубокого сглаживания
const nested = [[[1, 2]], [[3, 4]]];
const result = nested.flatMap(item => item);
console.log(result);[[1, 2], [3, 4]] // только один уровень
Ошибка 2: Мутация исходного массива
const source = [{value: 1}, {value: 2}];
source.flatMap(obj => {
obj.value *= 2;
return obj;
});
console.log(source);[{value: 2}, {value: 4}] // исходный измененИстория изменений
Метод flatMap() был добавлен в спецификацию ECMAScript 2019 (ES10). С момента добавления существенных изменений в работе метода не произошло. Поддерживается во всех современных браузерах и средах выполнения, включая Node.js версии 12 и выше.
Расширенные примеры
Пример 1: Работа с матрицами
const matrix = [[1, 2], [3, 4], [5, 6]];
const transposed = matrix.flatMap((row, i) =>
row.map((_, j) => matrix[j][i])
);
console.log(transposed);[1, 3, 5, 2, 4, 6]
Пример 2: Генерация диапазонов
const ranges = [[1, 3], [5, 7]];
const numbers = ranges.flatMap(([start, end]) => {
const arr = [];
for (let i = start; i <= end; i++) arr.push(i);
return arr;
});
console.log(numbers);[1, 2, 3, 5, 6, 7]
Пример 3: Парсинг сложных структур
const data = [
{tags: ['js', 'web']},
{tags: ['node', 'backend']},
{tags: []}
];
const allTags = data.flatMap(item => item.tags);
console.log(allTags);['js', 'web', 'node', 'backend']
Аналоги в других языках
Python:
import itertools
phrases = ['Hello world', 'Python examples']
words = list(itertools.chain(*[phrase.split() for phrase in phrases]))
print(words)['Hello', 'world', 'Python', 'examples']
PHP:
$phrases = ['Hello world', 'PHP examples'];
$words = array_merge(...array_map(fn($phrase) => explode(' ', $phrase), $phrases));
print_r($words);Array ( [0] => Hello [1] => world [2] => PHP [3] => examples )
C# (LINQ):
using System.Linq;
var phrases = new[] { "Hello world", "C# examples" };
var words = phrases.SelectMany(phrase => phrase.Split(' ')).ToList();