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
151
152
153
154
155
156
157
158
159
160
|
---
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 notranslate"><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 notranslate">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 notranslate">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 notranslate">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 notranslate">// Для развертывания многомерных массивов используем рекурсию, 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 notranslate">//не рекурсивное упрощение с использованием стэка
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 notranslate">//рекурсивно упрощаем массив
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>Кандидат (3)</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>
<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</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>
|
