詹詹的小心思 發表於 2020-8-19 11:39:00

JavaScript的Array.flat()函数深入探讨

<div class="toutiao-header">
<div class="topbar">
<div class="bui-left clearfix">&nbsp;</div>
</div>
</div>
<div class="bui-box article-content-container">
<div class="bui-left index-middle">
<div class="article-box">
<h1 class="article-title">JavaScript的Array.flat()函数深入探讨</h1>
<p>在过去的几年中，已经将许多有用的功能添加到Javascript Array全局对象中，这些功能为开发人员在编写可用于数组的代码时提供了多种选择。这些功能提供了许多优点，其中最值得注意的是，虽然在过去的一段时间里，开发人员必须实现自己的复杂逻辑来执行各种数组操作，但现在这些新功能已经不再需要这种自制的实现。本文将探讨的有用功能之一是<strong class="highlight-text"> flat() </strong>函数。</p>
<div class="pgc-img"><img src="https://p6-tt.byteimg.com/origin/pgc-image/c903646dc8bb45c9890e1f1b729e451b?from=pc">
<p class="pgc-img-caption">&nbsp;</p>
</div>
<h1 class="pgc-h-arrow-right">功能概述</h1>
<p><strong class="highlight-text">flat() </strong>函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回新数组的能力。由于这个函数产生了一个全新的数组，所以一旦函数完成操作后，任何包含在原始数组中的现有的、完全独立的数组都不会被改变，在开始操作之前，不需要采取任何预防措施。</p>
<p><strong class="highlight-text">flat() </strong>函数仅采用一个参数，该参数是可选的，唯一的参数是 <strong class="highlight-text">depth</strong> 参数。如果原始数组包含一个或多个嵌套数组结构，则此参数决定函数将多少数组层压扁为单个层。由于该参数是可选的，所以它的默认值为 1，并且在函数完成时，只有单层数组将被平展到返回的全新数组中。</p>
<h1 class="pgc-h-arrow-right">没有参数的情况</h1>
<p>在介绍了一般的函数行为之后，让我们看一下<strong class="highlight-text"> flat() </strong>函数在实践中是如何工作的一些示例。以下示例说明了未指定参数值的情况：</p>
<pre class="syl-page-code hljs lua"><code>var array1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>];<br>var array2 = array1.flat();<br>// array2: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, [<span class="hljs-number">5</span>, <span class="hljs-number">6</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>]]</code></pre>
<p>调用<strong class="highlight-text"> flat() </strong>函数时不带参数值。考虑到可选参数的默认值，此函数调用与<strong class="highlight-text"> flat(1) </strong>相同。这意味着原始数组中深度为<strong class="highlight-text"> 1</strong> 的任何数组都将被完全展平，以便将其所有内容单独连接到新数组。原始数组中深度为<strong class="highlight-text"> 2 </strong>或更大的任何数组的深度都将减小<strong class="highlight-text"> 1 </strong>，并且这些数组中深度为1的任何单个数组项将单独连接到新数组。结果，原始数组中包含<strong class="highlight-text"> 3 </strong>和<strong class="highlight-text"> 4 </strong>的第一个数组被展平，以便将这两个数组项分别连接到新数组。此外，其余三个嵌套的数组中的每个数组都被串联到新的数组中，其嵌套深度减少了一个。</p>
<h1 class="pgc-h-arrow-right">正深度</h1>
<p>以下示例演示了指定正 <strong class="highlight-text">depth</strong> 参数值的情况：</p>
<pre class="syl-page-code hljs lua"><code>var array1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>];<br>var array2 = array1.flat(<span class="hljs-number">2</span>);<br>// array2: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, [<span class="hljs-number">7</span>, <span class="hljs-number">8</span>], <span class="hljs-string">[]</span>]</code></pre>
<p>使用深度参数值 <strong class="highlight-text">2</strong> 调用 <strong class="highlight-text">flat()</strong> 函数。这意味着在原始数组中深度最大为2的任何数组都将被完全展平，以便将其所有内容单独连接到新数组。原始数组中深度为3或更大的任何数组的深度将减少2，并且这些数组中深度为1或2的任何单个数组项将单独连接到新数组。结果，包含<strong class="highlight-text"> 3 </strong>和<strong class="highlight-text"> 4 </strong>以及<strong class="highlight-text"> 5 </strong>和<strong class="highlight-text"> 6 </strong>的原始数组中的前两个数组被展平，从而将这四个数组项分别连接到新数组。另外，剩下的两个嵌套数组都连接到新数组，它们的嵌套深度减少了2。</p>
<h1 class="pgc-h-arrow-right">无限深度</h1>
<p>以下示例演示了指定无限 <strong class="highlight-text">depth</strong> 参数值的情况：</p>
<pre class="syl-page-code hljs lua"><code>var array1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>];<br>var array2 = array1.flat(Infinity);<br>// array2: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">10</span>]</code></pre>
<p>使用 <strong class="highlight-text">depth</strong> 参数值 <strong class="highlight-text">Infinity</strong> 调用<strong class="highlight-text"> flat() </strong>函数。这意味着原始数组中具有任何深度的所有数组都将被展平，以便将其所有内容单独连接到新数组。在与<strong class="highlight-text"> flat() </strong>函数一起使用诸如 <strong class="highlight-text">Infinity</strong> 之类的值时，要记住的一件非常重要的事情是，如果应用程序遇到嵌套得足够深的数组，则它可能会耗尽内存。尽管此处使用 <strong class="highlight-text">Infinity</strong> 来证明可以将这种值与<strong class="highlight-text"> flat() </strong>函数一起使用，但建议使用更小的有限参数值，以避免应用程序中发生任何无法预料的错误。</p>
<h1 class="pgc-h-arrow-right">零深度</h1>
<p>以下示例演示了将 <strong class="highlight-text">depth</strong> 参数值指定为<strong class="highlight-text"> 0 </strong>的情况：</p>
<pre class="syl-page-code hljs lua"><code>var array1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>];<br>var array2 = array1.flat(<span class="hljs-number">0</span>);<br>// array2: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>]</code></pre>
<p>使用深度参数值 <strong class="highlight-text">0</strong> 调用<strong class="highlight-text"> flat() </strong>函数。这意味着原始数组中包含的任何数组都不会被展平，并且新数组的单个数组项和嵌套数组的组成与原始数组完全相同。</p>
<h1 class="pgc-h-arrow-right">负深度</h1>
<p>以下示例演示了指定负深度参数值的情况：</p>
<pre class="syl-page-code hljs lua"><code>var array1 = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>];<br>var array2 = array1.flat(-Infinity);<br>// array2: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, [<span class="hljs-number">3</span>, <span class="hljs-number">4</span>], <span class="hljs-string">[]</span>, <span class="hljs-string">[[]</span>], <span class="hljs-string">[[[]]]</span>]</code></pre>
<p>使用 <strong class="highlight-text">depth</strong> 参数值<strong class="highlight-text"> -Infinity </strong>调用<strong class="highlight-text"> flat() </strong>函数。由于负深度值对于扁平嵌套数组没有意义，所以在指定负深度参数值的情况下，将使用<strong class="highlight-text"> 0 </strong>作为替代。正如前面的示例所演示的那样，当指定深度参数值为<strong class="highlight-text"> 0 </strong>时，原始数组中没有数组是扁平的，而新数组中各个数组项和嵌套数组的组成与原始数组完全相同。</p>
<h1 class="pgc-h-arrow-right">经验教训</h1>
<p>关于<strong class="highlight-text"> flat() </strong>函数，可以从本文中学到一些经验教训。首先要记住的是，<strong class="highlight-text">flat() </strong>函数不会以任何方式改变原始数组中的任何普通或嵌套数组，因此在使用该函数之前无需维护这些数组的状态。<strong class="highlight-text">flat() </strong>函数唯一会改变的数组是函数完成后返回的全新数组，它只是使用原始数组的所有内容构建的。</p>
<p>要记住的第二件事是，<strong class="highlight-text">flat() </strong>函数将删除原始数组中存在的所有空值。下面的示例演示了该功能的实际作用：</p>
<pre class="syl-page-code hljs yaml"><code><span class="hljs-string">var</span> <span class="hljs-string">array1</span> <span class="hljs-string">=</span> <span class="hljs-string">;</span><br><span class="hljs-string">var</span> <span class="hljs-string">array2</span> <span class="hljs-string">=</span> <span class="hljs-string">array1.flat();</span><br><span class="hljs-string">//</span> <span class="hljs-attr">array2:</span> <span class="hljs-string"></span></code></pre>
<p>尽管原始数组占用了五个位置，而第二个和第四个位置的值未定义，但是<strong class="highlight-text"> flat() </strong>函数从函数完成后返回的新数组中删除了这两个数组项。结果，新数组只包含三个数组项，它们的值不为 <strong class="highlight-text">undefined</strong>。</p>
<p>关于<strong class="highlight-text"> flat() </strong>函数要记住的第三件事，也是最后一件事，是它的一般用途，以及它如何有助于简化逻辑，如果没有一个可用的<strong class="highlight-text"> flat()</strong>函数，要合并任何数组中包含的所有项目，通常的方法是编写自定义的逻辑来迭代所有的数组，从一个数组中单独拉出项目，然后把它们放到另一个数组中，可能会考虑到其中的嵌套数组。这样的逻辑往往比较混乱，而且容易出错，因此，通过使用抽象的内置函数（如<strong class="highlight-text"> flat() </strong>函数）来避免它的出现，是一个很好的选择。</p>
</div>
</div>
<div class="bui-right index-right">
<div id="imagindexhover">&nbsp;</div>
</div>
</div>
<div class="publisher" style="display: none">
<div class="publisher-inner">
<div class="header">
<div class="title">转发</div>
<span class="close"><img src="//s3.pstatp.com/toutiao/static/img/close.bc5a00d.png"></span></div>
<div class="publisher-content">
<div class="original-content"><img class="cover-img lazyload" data-src="http://p9.pstatp.com/list/300x196/pgc-image/c903646dc8bb45c9890e1f1b729e451b.jpg">
<div class="text">@杭州程序员小张：
<div class="html">JavaScript的Array.flat()函数深入探讨</div>
</div>
</div>
<div class="publish-content"><textarea class="input"></textarea>
<p class="words-number">0/2000字</p>
<span class="show-emoji"><img class="icon lazyload" data-src="https://p3.pstatp.com/origin/b76b00091cadfe239a6a"></span></div>
<div class="footer">
<div class="y-right">转发</div>
</div>
<div class="uploader-popup emoji-panel" style="display: none">&nbsp;</div>
</div>
</div>
</div><br><br>
来源：https://www.cnblogs.com/jiangweichen88/p/13528368.html
頁: [1]
查看完整版本: JavaScript的Array.flat()函数深入探讨