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
|
---
title: Array.prototype.flat()
slug: Web/JavaScript/Reference/Global_Objects/Array/flat
tags:
- Массив
- Ссылка
- Экспериментальная
- метод
- прототип
- яваскрипт
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
---
<div>{{JSRef}}</div>
<p>Метод <code><strong>flat()</strong></code> возвращает новый массив, в котором все элементы вложенных подмассивов были рекурсивно "подняты" на указанный уровень depth.</p>
<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
<p class="hidden">Исходный код этого интерактивного примера находится на гитхабе. Если вы желаете внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и пришлите нам пулреквест.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<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]
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]</pre>
<h3 id="Упрощение_и_дырки_в_массивах">Упрощение и "дырки" в массивах</h3>
<p>Метод flat удаляет пустые слоты из массива:</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
const arr = [1, 2, [3, 4, [5, 6]]];
function flatDeep(arr, d = 1) {
return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
: arr.slice();
};
flatDeep(arr, Infinity);
// [1, 2, 3, 4, 5, 6]</pre>
<pre class="brush: js">//не рекурсивное упрощение с использованием стэка
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>
{{Specifications}}
<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>
|
