diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/javascript/reference/global_objects/array/flat | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/zh-tw/web/javascript/reference/global_objects/array/flat')
-rw-r--r-- | files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..8a6a4b2549 --- /dev/null +++ b/files/zh-tw/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,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 class="hidden">\{{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> |