mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 23:44:06 +08:00
157 lines
10 KiB
HTML
157 lines
10 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><code><strong>flat()</strong></code> 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。</p>
|
||
<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatten.html")}}</p>
|
||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</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> <span class="inlineIndicator optional optionalInline">可选</span></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]
|
||
|
||
//使用 Infinity 作为深度，展开任意深度的嵌套数组
|
||
arr3.flat(Infinity);
|
||
// [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>
|
||
<p> </p>
|
||
<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) {
|
||
// 使用 pop 从 stack 中取出并移除值
|
||
const next = stack.pop();
|
||
if (Array.isArray(next)) {
|
||
// 使用 push 送回内层数组中的元素，不会改动原始输入 original input
|
||
stack.push(...next);
|
||
} else {
|
||
res.push(next);
|
||
}
|
||
}
|
||
// 使用 reverse 恢复原数组的顺序
|
||
return res.reverse();
|
||
}
|
||
flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
|
||
</pre>
|
||
<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></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 class="external" href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat" rel="noopener"><code>Array.prototype.flat</code> proposal</a></td>
|
||
<td>Finished (4)</td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性">浏览器兼容性</h2>
|
||
<div>
|
||
<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
|
||
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>flat</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
69</td><td class="bc-supports-no bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
62</td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
56</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
12</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
69</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
69</td><td class="bc-supports-no bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
62</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
56</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
12</td><td class="bc-supports-no bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
11.0.0</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
|
||
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
|
||
</abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
|
||
<abbr class="bc-level bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
|
||
</abbr></span></dt><dd>No support</dd></dl></section></div><p></p>
|
||
</div>
|
||
<h2 id="参见">参见</h2>
|
||
<ul>
|
||
<li><a href="Reference/Global_Objects/Array/flatMap" title="flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。"><code>Array.prototype.flatMap()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Array/map" title="map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。"><code>Array.prototype.map()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Array/reduce" title="reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。"><code>Array.prototype.reduce()</code></a></li>
|
||
<li><a href="Reference/Global_Objects/Array/concat" title="concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。"><code>Array.prototype.concat()</code></a></li>
|
||
</ul>
|
||
</article> |