JS метод Array.flat()

Опис

Метод flat() служить для копіювання масивів. Цей метод забезпечує створення поверхневої копії вихідного масиву, зберігаючи при цьому всі його елементи. Відзначимо, що він не вносить жодних змін до початкового масиву.

Одна з особливостей flat() полягає в тому, що він автоматично ігнорує порожні позиції в розріджених масивах. Давайте розглянемо декілька прикладів:

Якщо рівень глибини depth дорівнює 1, порожні позиції на основному рівні та на першому рівні вкладеності будуть відкинуті.
Але на глибших рівнях вкладеності порожні позиції зберігатимуться разом з іншими елементами масиву.

Приклад:

let arr = [1, 2, , 4, [5, 6, , 8]];
let flattened = arr.flat();
console.log(flattened);  // Виведе: [1, 2, 4, 5, 6, , 8]

У цьому прикладі ми використовуємо flat() для масиву, який має порожні позиції та один вкладений масив. Результатом є масив без вкладеності, але з збереженими порожніми позиціями з глибших рівнів.

Нотатка:	Метод `flat()` може приймати необов'язковий параметр `depth`, який задає максимальний рівень вкладеності для вирівнювання масиву. За замовчуванням, якщо `depth` не задано, метод `flat()` вирівнює масив до однорівневого. Однак, ви можете задати більш глибокий рівень, якщо у вас є вкладені масиви з більш високим рівнем вкладеності.
Нотатка:	Пам'ятайте, що метод `flat()` не вносить зміни до початкового масиву, він створює новий масив, в якому всі елементи вирівняні. Якщо ви бажаєте змінити оригінальний масив, ви можете присвоїти результат виконання методу `flat()` цій самій змінній.
Порада:	Перед використанням методу `flat()`, переконайтесь, що ваш масив має вкладену структуру або підмасиви. Якщо ваш масив не має вкладеної структури, метод `flat()` не буде мати ефекту.
Порада:	Також `flat()` вимагає, щоб об'єкт `this` мав властивість `length` і інші властивості з цілочисельними ключами.

Синтаксис

flat()
flat(depth)

Параметри

depth: Рівень глибини, який вказує, наскільки глибоко вкладена структура масиву має бути розгорнута. За замовчуванням depth становить 1.

Return

array: Новий масив з об'єднаними в ньому елементами підмасивів.

Переглядачі

Переглядач
	69	62	12	56	79

Переглядач
	69	69	62	12

Переглядач
	11.0.0	1.0

Приклади

Приклад демонструє використання методу flat() для розгортання вкладених масивів. Перший приклад розгортає масив на один рівень глибини, а другий приклад розгортає масив на два рівні глибини.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/OJajPox">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Розгортання вкладених масивів

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Метод flat() видаляє порожні слоти в масивах.

const arr5 = [1, 2, , 4, 5];
console.log(arr5.flat()); // [1, 2, 4, 5]

const array = [1, , 3, ["a", , "c"]];
console.log(array.flat()); // [ 1, 3, "a", "c" ]

const array2 = [1, , 3, ["a", , ["d", , "e"]]];
console.log(array2.flat()); // [ 1, 3, "a", ["d", empty, "e"] ]
console.log(array2.flat(2)); // [ 1, 3, "a", "d", "e"]

Метод flat() зчитує властивість length цього об'єкта і потім отримує доступ до кожної властивості, ключем якої є невід'ємне ціле число менше за length. Якщо елемент не є масивом, він безпосередньо додається до результату. Якщо елемент є масивом, він розгортається відповідно до параметра глибини.

const arrayLike = {
  length: 3,
  0: [1, 2],
  // Подібні до масивів об'єкти не розгортаються
  1: { length: 2, 0: 3, 1: 4 },
  2: 5,
  3: 3, // ігнорується flat(), оскільки length дорівнює 3
};
console.log(Array.prototype.flat.call(arrayLike));
// [ 1, 2, { '0': 3, '1': 4, length: 2 }, 5 ]

JS довідник

JavaScript

Наповнення JS розділу