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
|
---
title: Array.prototype.flat()
slug: Web/JavaScript/Reference/Global_Objects/Array/flat
tags:
- JavaScript
- 實驗中
- 方法
- 陣列
translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat
---
<div>{{JSRef}} {{SeeCompatTable}}</div>
<p><code><strong>flat()</strong></code> 函數以遞迴方式將特定深度的子陣列重新串接成為一新的陣列</p>
<p >\{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
<h2 id="語法">語法</h2>
<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<em>[depth]</em>);</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>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]
</pre>
<pre class="brush: js">//欲展開更深層的巢狀結構請使用reduce與concat的遞迴
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) {
// pop value from stack
const next = stack.pop();
if (Array.isArray(next)) {
// push back array items, won't modify the original input
stack.push(...next);
} else {
res.push(next);
}
}
//reverse to restore input order
return res.reverse();
}
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
</pre>
<pre><code>// 递归版本的反嵌套
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;
}</code></pre>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</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>Candidate (3)</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<div>
<p>{{Compat("javascript.builtins.Array.flat")}}</p>
</div>
<h2 id="See_also">See also</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>
|
