Array.flat() в JavaScript — сплющити вкладені масиви
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Перед використанням методу
автор: Bondflat(), переконайтесь, що ваш масив має вкладену структуру або підмасиви. Якщо ваш масив не має вкладеної структури, методflat()не буде мати ефекту. - Порада
-
Також
автор: Bondflat()вимагає, щоб об'єктthisмав властивістьlengthі інші властивості з цілочисельними ключами. - Нотатка
-
Метод
автор: Bondflat()може приймати необов'язковий параметрdepth, який задає максимальний рівень вкладеності для вирівнювання масиву. За замовчуванням, якщоdepthне задано, методflat()вирівнює масив до однорівневого. Однак, ви можете задати більш глибокий рівень, якщо у вас є вкладені масиви з більш високим рівнем вкладеності. - Нотатка
-
Пам'ятайте, що метод
автор: Bondflat()не вносить зміни до початкового масиву, він створює новий масив, в якому всі елементи вирівняні. Якщо ви бажаєте змінити оригінальний масив, ви можете присвоїти результат виконання методуflat()цій самій змінній.
Синтаксис
flat()
flat(depth)
Параметри
depth-
Рівень глибини, який вказує, наскільки глибоко вкладена структура масиву має бути розгорнута. За замовчуванням
автор: Bonddepthстановить1.
Повернення
array-
Новий масив з об'єднаними в ньому елементами підмасивів.
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 69 | 62 | 12 | 56 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 69 | 69 | 62 | 12 |
| Переглядач |  |
 |
|---|---|---|
| 11.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Розгортання вкладених масивів
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() для розгортання вкладених масивів. Перший приклад розгортає масив на один рівень глибини, а другий приклад розгортає масив на два рівні глибини.
HTML
<header>
<h2 class="title">Розгортання вкладених масивів</h2>
<p class="description">Приклад використання методу flat() для розгортання вкладених масивів</p>
</header>
<main>
<div id="output1"></div>
<div id="output2"></div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
code {
color: #ff0000;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}JS
const arr1 = [0, 1, 2, [3, 4]];
const output1 = document.getElementById("output1");
output1.innerHTML = "Початковий масив: <code>" + JSON.stringify(arr1) + "</code>";
output1.innerHTML += "<br>Результат після використання flat(): <code>" + JSON.stringify(arr1.flat()) + "</code>";
const arr2 = [0, 1, 2, [[[3, 4]]]];
const output2 = document.getElementById("output2");
output2.innerHTML = "Початковий масив: <code>" + JSON.stringify(arr2) + "</code>";
output2.innerHTML += "<br>Результат після використання flat(2): <code>" + JSON.stringify(arr2.flat(2)) + "</code>";
//# sourceURL=pen.jsГлибина flat() за замовчуванням, flat(Infinity), доля порожніх комірок і чому «розплющити» не означає «скопіювати».
const nested = [1, [2, 3], [4, [5, [6]]]];
console.log(nested.flat()); // [1,2,3,4,[5,[6]]] — рівно один рівень
console.log(nested.flat(2)); // [1,2,3,4,5,[6]]
console.log(nested.flat(Infinity)); // [1,2,3,4,5,6]
console.log(nested.length); // 3 — оригінал цілий
// діри зникають, а явні undefined лишаються
console.log([1, , 3].flat().length); // 2
console.log([1, undefined, 3].flat().length); // 3
// копія поверхнева: об'єкти всередині спільні
const rows = [[{ n: 1 }]];
const flatRows = rows.flat();
flatRows[0].n = 99;
console.log(rows[0][0].n); // 99, а не 1Метод 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 ]
Коментарі
Коментарів ще немає — будьте першим!