uTools-Manuals/docs/javascript/Reference/Global_Objects/Array/flatMap.html

<article id="wikiArticle">
<div></div>
<p><code><strong>flatMap()</strong></code> 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> 和 深度值1的 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a> 几乎相同，但 <code>flatMap</code> 通常在合并成一种方法的效率稍微高一些。</p>
<p class="hidden">{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p>
<p class="hidden">此交互式示例的源代码存储在GitHub存储库中。如果您想要为交互式示例项目做出贡献，请复制https：//github.com/mdn/interactive-examples，并向我们发送 pull request。</p>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}</var>[, <var>thisArg</var>])</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>callback</code></dt>
<dd>可以生成一个新数组中的元素的函数，可以传入三个参数：
 <dl>
<dt> </dt>
<dt><code>currentValue</code></dt>
<dd>当前正在数组中处理的元素</dd>
<dt><code>index</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd>可选的。数组中正在处理的当前元素的索引。</dd>
<dt><code>array</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd>可选的。被调用的 <code>map</code> 数组</dd>
</dl>
</dd>
<dt><code>thisArg</code><span class="inlineIndicator optional optionalInline">可选</span></dt>
<dd>可选的。执行 <code>callback</code> 函数时 使用的<code>this</code> 值。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p> 一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 <code>depth</code> 值为1。</p>
<h2 id="描述">描述</h2>
<p>有关回调函数的详细描述，请参见 <a href="Reference/Global_Objects/Array/map" title="map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。"><code>Array.prototype.map()</code></a> 。 <code>flatMap</code> 方法与 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> 方法和深度depth为1的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat">flat</a></code> 几乎相同.</p>
<h2 id="示例">示例</h2>
<h3 id="Map_与_flatMap"><code>Map</code> 与 <code>flatMap</code></h3>
<pre><code  class="language-javascript">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4];

arr1.map(</span></span></span></span></span>x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> 
// [[2], [4], [6], [8]]

arr1.flatMap(x =&gt; [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);
// [2, 4, 6, 8]</span></span></span></span></span>

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x =&gt; [[x * 2]]);
// [[2], [4], [6], [8]]</code></pre>
<p>虽然上面的代码使用 map 和 flatMap 好像都可以，但这只能展示如何使用 flatMap。</p>
<p>所以，为了更好的展示 flatMap 的作用，下面我们将包含几句话的数组拆分成单个汉字组成的新数组。</p>
<pre><code  class="language-javascript">let arr = ["今天天气不错", "", "早上好"]

arr.map(s =&gt; s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s =&gt; s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]</code></pre>
<h2 id="等价操作">等价操作</h2>
<h3 id="归纳（reduce）_与_合并（concat）">归纳（<code>reduce</code>） 与 合并（<code>concat</code>）</h3>
<pre><code  class="language-javascript"><code>var arr1 = [1, 2, 3, 4];

arr1.flatMap(x =&gt; [x * 2]);
// 等价于
arr1.reduce((acc, x) =&gt; acc.concat([x * 2]), []);
// [2, 4, 6, 8]</code></code></pre>
<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.flatMap" rel="noopener"><code>Array.prototype.flatMap</code> proposal</a></td>
<td>Draft</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<div class="hidden">此页面中的兼容性表是由结构化数据生成的。如果您想提供数据，请查看https：//github.com/mdn/Browser-compat-data，并向我们发送 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>flatMap</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/flat" title="flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。"><code>Array.prototype.flat()</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>