flat() разворачивает вложенные массивы в более плоский массив.
Этот метод полезен, когда внутри массива есть другие массивы и их нужно “расплющить”.
Синтаксис
array.flat()
array.flat(depth)depth - это глубина разворачивания.
Если её не передать, используется значение 1.
Что делает flat()
Метод проходит по массиву и раскрывает вложенные массивы на указанную глубину.
const result = [1, 2, [3, 4]].flat();
console.log(result); // [1, 2, 3, 4]По умолчанию только один уровень
Без аргументов flat() разворачивает массив только на один уровень.
const result = [1, [2, [3, 4]]].flat();
console.log(result); // [1, 2, [3, 4]]Внутренний массив [3, 4] остался вложенным, потому что глубина по умолчанию равна 1.
Глубина разворачивания
Если нужно раскрыть массив глубже, можно передать число:
const result = [1, [2, [3, 4]]].flat(2);
console.log(result); // [1, 2, 3, 4]Чем больше depth, тем глубже метод будет раскрывать вложенность.
Полное разворачивание
Если нужно развернуть массив до конца, иногда используют Infinity.
const result = [1, [2, [3, [4]]]].flat(Infinity);
console.log(result); // [1, 2, 3, 4]Это удобно, когда заранее неизвестно, насколько глубоко вложены массивы.
Что возвращает flat()
flat() возвращает новый массив.
const numbers = [1, [2, 3]];
const result = numbers.flat();
console.log(result); // [1, 2, 3]
console.log(numbers); // [1, [2, 3]]Это важно: исходный массив не меняется.
flat() не меняет исходный массив
Метод создаёт новый массив и не работает “на месте”.
const items = [1, [2, 3]];
const flatItems = items.flat();
console.log(items); // [1, [2, 3]]
console.log(flatItems); // [1, 2, 3]Пустые слоты
flat() убирает пустые слоты на тех уровнях, которые разворачивает.
const arr = [1, , 3, [4, , 6]];
console.log(arr.flat()); // [1, 3, 4, 6]Это может быть неожиданно, если в массиве есть “дырки”.
flat() и concat()
Иногда кажется, что flat() и concat() делают похожие вещи, но задача у них разная.
const result = [[1, 2], [3, 4]].flat();
console.log(result); // [1, 2, 3, 4]flat() раскрывает уже вложенные массивы.
concat() объединяет массивы, которые вы ему передаёте.
flat() и flatMap()
flatMap() сначала применяет map(), а потом разворачивает результат на один уровень.
const result = [1, 2, 3].flatMap((value) => [value, value * 10]);
console.log(result); // [1, 10, 2, 20, 3, 30]Если преобразование не нужно, а нужно только раскрыть вложенность, чаще используют именно flat().
Когда это полезно
flat() удобно использовать, когда:
- в массиве лежат вложенные массивы
- нужно получить более плоскую структуру
- важно не менять исходные данные
Пример:
const pages = [["Главная", "Каталог"], ["Контакты"]];
const menu = pages.flat();
console.log(menu); // ["Главная", "Каталог", "Контакты"]Частые ошибки
Думать, что flat() разворачивает всё полностью
const arr = [1, [2, [3]]];
console.log(arr.flat()); // [1, 2, [3]]По умолчанию раскрывается только один уровень.
Думать, что flat() меняет исходный массив
const arr = [1, [2, 3]];
arr.flat();
console.log(arr); // [1, [2, 3]]Если результат не сохранить, исходный массив останется прежним.
Путать flat() и flatMap()
const arr = [[1], [2], [3]];
console.log(arr.flat()); // [1, 2, 3]flat() только разворачивает массив. Для преобразования элементов нужен flatMap() или отдельный map().
Быстрая памятка
flat()разворачивает вложенные массивы- по умолчанию метод работает только на глубину
1 - можно передать
depth, включаяInfinity flat()возвращает новый массив- исходный массив не меняется
Коротко
flat() - это удобный способ сделать массив более плоским. Главное, что стоит запомнить: по умолчанию метод раскрывает только один уровень вложенности и возвращает новый массив, не меняя исходный.