1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
---
title: Array.prototype.flat()
slug: Web/JavaScript/Reference/Global_Objects/Array/flat
tags:
- Array
- JavaScript
- Масив
- метод
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
---
<div>{{JSRef}}</div>
<p>Метод <code><strong>flat()</strong></code> створює новий масив який містить всі елементи вкладених масивів до вказаної глибини.</p>
<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
<h2 id="Синтакс">Синтакс</h2>
<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[</em><var>depth]</var>);</pre>
<h3 id="Параметри">Параметри</h3>
<dl>
<dt><code>depth</code> {{optional_inline}}</dt>
<dd>Глибина, що вказує до якого рівня вкладеності масивів має відбуватись вирівнювання. За замовчуванням 1.</dd>
</dl>
<h3 id="Вихідне_значення">Вихідне значення</h3>
<p>Новий масив, що містить елементи вкладених масивів.</p>
<h2 id="Приклади">Приклади</h2>
<h3 id="Вирівнювання_вкладених_масивів">Вирівнювання вкладених масивів</h3>
<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
</pre>
<h3 id="Вирівнювання_і_прогалини_в_масиві">Вирівнювання і прогалини в масиві</h3>
<p>Метод <code>flat</code> видаляє порожні елементи масивів:</p>
<pre class="brush: js">var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
</pre>
<h2 id="Альтернатива">Альтернатива</h2>
<h3 id="reduce_і_concat"><code>reduce</code> і <code>concat</code></h3>
<pre class="brush: js">var arr1 = [1, 2, [3, 4]];
arr1.flat();
//вирівняти один рівень масиву
arr1.reduce((acc, val) => acc.concat(val), []); // [1, 2, 3, 4]
//або
const flatSingle = arr => [].concat(...arr);</pre>
<pre class="brush: js">//щоб здійснити глибоке вирівнювання, використовуйте рекурсію з reduce і concat
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flattenDeep(arr1) {
return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []);
}
flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
</pre>
<pre class="brush: js">//глибоке вирівнювання без рекурсії, використовуючи stack
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatten(input) {
const stack = [...input];
const res = [];
while (stack.length) {
// викидаємо значення зі стеку
const next = stack.pop();
if (Array.isArray(next)) {
// додаємо елементи масиву, не змінюючи вхідного масиву
stack.push(...next);
} else {
res.push(next);
}
}
//перевертаємо масив, щоб порядок сортування відповідав вхідному
return res.reverse();
}
flatten(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre>
<pre class="brush: js">//глибоке вирівнювання з рекурсією
function flatten(array) {
var flattend = [];
(function flat(array) {
array.forEach(function(el) {
if (Array.isArray(el)) flat(el);
else flattend.push(el);
});
})(array);
return flattend;
}</pre>
<div class="hidden">
<p>Будь ласка, не додавайте поліфіли в цю статтю. За довідкою дивіться: <a href="https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500">https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500</a></p>
</div>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
<tr>
<td><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td>
<td>Finished (4)</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
<div>
<p>{{Compat("javascript.builtins.Array.flat")}}</p>
</div>
<h2 id="Дивіться_також">Дивіться також</h2>
<ul>
<li>{{jsxref("Array.prototype.flatMap()")}}</li>
<li>{{jsxref("Array.prototype.map()")}}</li>
<li>{{jsxref("Array.prototype.reduce()")}}</li>
<li>{{jsxref("Array.prototype.concat()")}}</li>
</ul>
|
