логотип PurpleSchool
логотип PurpleSchool

Как работает метод flat() - JavaScript

Автор

Виталий Котов

Метод flat() возвращает новый массив, сократив его вложенность до указанного уровня.

// 3 вложенных массива
let numbers = [1, 2, [3, 4, [5, 6, [7, 8]]]];

// сокращаем вложенность массива на 2 уровня
let flattenArray = numbers.flat(2);

// новый сокращённый массив
console.log(flattenArray);

// Вывод в консоль:
// [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

Синтаксис flat()

Синтаксис метода flat() следующий:

arr.flat(depth);

Где arr - это массив.

Параметры flat()

Метод flat() принимает:

  • depth
    • целое число, указывающее на сколько уровней сокращается вложенность исходного массива. Его значение по умолчанию равно 1.

Возвращаемое значение flat()

Возвращает сокращённый массив с объединёнными в нём элементами подмассива.

Примечания: Метод flat():

не изменяет исходный массив. удаляет пустые элементы массива

Примеры

Пример 1: Использование метода flat()

// 3 вложенных массива
let numbers = [1, 2, [3, 4, [5, 6, [7, 8]]]];

// сокращаем вложенность массива на 2 уровня
let flattenArray = numbers.flat(2);

// новый сокращённый массив
console.log(flattenArray);

Вывод в консоль:

[ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

В приведенном выше примере мы использовали метод flat() для сокращения вложенности массива numbers на 2 уровни.

numbers.flat(2) сокращает вложенность массива numbers и возвращает массив только с одним подмассивом, т.е. [ 1, 2, 3, 4, 5, 6, [ 7, 8 ] ]

Пример 2: Метод flat() без указания аргумента

// вложенный массив
let array1 = [1, [2, 3, 4], 5];

// без передачи аргумента в метод flat()
let flattenArray = array1.flat();

console.log(flattenArray);

Вывод в консоль:

[ 1, 2, 3, 4, 5 ]

Здесь мы не передали никакого аргумента depth в метод flat().

По умолчанию аргумент depth равен 1, поэтому array1.flat() сокращает вложенность массива array1 на 1 уровень.

Пример 2: Метод flat() для удаления пустых элементов

// массив с пустым элементом
let array_with_holes = [1, , 3];

// удаляем пустые элементы в массиве
let flattedArray = array_with_holes.flat();

console.log(flattedArray); // [ 1, 3 ]

Вывод в консоль:

[ 1, 3 ]
Стрелочка влевоКак работает метод flatMap() - JavaScriptКак работает метод findIndex() - JavaScriptСтрелочка вправо

Постройте личный план изучения Javascript до уровня Middle — бесплатно!

Javascript — часть карты развития Frontend

  • step100+ шагов развития
  • lessons30 бесплатных лекций
  • lessons300 бонусных рублей на счет

Бесплатные лекции

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний

Лучшие курсы по теме

изображение курса

Основы JavaScript

Антон Ларичев
иконка часов12 бесплатных уроков
иконка звёздочки рейтинга4.8
Backend
Frontend
Mobile
изображение курса

TypeScript с нуля

Антон Ларичев
иконка часов21 бесплатный урок
иконка звёздочки рейтинга4.7
Backend
Frontend
Mobile
изображение курса

Next.js - с нуля

Антон Ларичев
иконка часов23 бесплатных урока
иконка звёздочки рейтинга4.7
Frontend