mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 15:34:05 +08:00
366 lines
32 KiB
HTML
366 lines
32 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<div><strong>展开语法(Spread syntax), </strong>可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(<strong>译者注</strong>: 字面量一般指 <code>[1, 2, 3]</code> 或者 <code>{name: "mdn"}</code> 这种简洁的构造方式)</div>
|
||
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/expressions-spreadsyntax.html" width="100%"></iframe></div>
|
||
<p class="hidden">该示例的源代码存放于Github中，如果你想进行修订，请先克隆<a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a>, 修改完成之后再通过pull request的方式推送给源仓库。</p>
|
||
<h2 id="语法"><font><font>语法</font></font></h2>
|
||
<p><font><font>函数调用：</font></font></p>
|
||
<pre><code class="language-javascript">myFunction(...iterableObj);</code></pre>
|
||
<p><font><font>字面量数组构造或字符串：</font></font></p>
|
||
<pre>[...iterableObj, '4', ...'hello', 6];</code></pre>
|
||
<p>构造字面量对象时,进行克隆或者属性拷贝（ECMAScript 2018规范新增特性）：</p>
|
||
<pre><code class="language-javascript">let objClone = { ...obj };</code></pre>
|
||
<h2 id="示例"><font><font>示例</font></font></h2>
|
||
<h3 id="在函数调用时使用展开语法">在函数调用时使用展开语法</h3>
|
||
<h4 id="等价于apply的方式">等价于apply的方式</h4>
|
||
<p><font><font>如果想将数组元素迭代为函数参数，一般使用</font></font><a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。"><code>Function.prototype.apply</code></a> 的方式进行调用<font><font>。</font></font></p>
|
||
<pre><code class="language-javascript">function myFunction(x, y, z) { }
|
||
var args = [0, 1, 2];
|
||
myFunction.apply(null, args);</code></pre>
|
||
<p><font><font>有了展开语法，可以这样写：</font></font></p>
|
||
<pre><code class="language-javascript"><code>function myFunction(x, y, z) { }
|
||
var args = [0, 1, 2];
|
||
myFunction(...args);</code></code></pre>
|
||
<p><font><font>所有参数都可以通过展开语法来传值，也不限制多次使用展开语法。</font></font></p>
|
||
<pre><code class="language-javascript">function myFunction(v, w, x, y, z) { }
|
||
var args = [0, 1];
|
||
myFunction(-1, ...args, 2, ...[3]);</code></pre>
|
||
<h4 id="在_new_表达式中应用">在 new 表达式中应用</h4>
|
||
<p><font><font>使用 </font></font><code>new</code><font><font> 关键字来调用构造函数时</font></font><font><font>，不能</font></font><strong><font><font>直接</font></font></strong><font><font>使用数组+ </font></font><code>apply</code><font><font> 的方式（</font></font><code>apply</code><font><font> 执行的是调用 </font></font><code>[[Call]]</code><font><font> , 而不是构造 </font></font><code>[[Construct]]</code><font><font>）。当然</font><font>, 有了展开语法, 将数组展开为构造函数的参数就很简单了：</font></font></p>
|
||
<pre><code class="language-javascript"><font><font>var dateFields = [1970, 0, 1]; </font><font>// 1970年1月1日</font></font><font><font>
|
||
var d = new Date(...dateFields);</font></font>
|
||
</code></pre>
|
||
<p><font><font>如果不使用展开语法, 想将数组元素传给构造函数, 实现方式可能是这样的</font></font><font><font>：</font></font></p>
|
||
<pre><code class="language-javascript">function applyAndNew(constructor, args) {
|
||
function partial () {
|
||
return constructor.apply(this, args);
|
||
};
|
||
if (typeof constructor.prototype === "object") {
|
||
partial.prototype = Object.create(constructor.prototype);
|
||
}
|
||
return partial;
|
||
}
|
||
|
||
|
||
function myConstructor () {
|
||
console.log("arguments.length: " + arguments.length);
|
||
console.log(arguments);
|
||
this.prop1="val1";
|
||
this.prop2="val2";
|
||
};
|
||
|
||
var myArguments = ["hi", "how", "are", "you", "mr", null];
|
||
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
|
||
|
||
console.log(new myConstructorWithArguments);
|
||
// (myConstructor构造函数中): arguments.length: 6
|
||
// (myConstructor构造函数中): ["hi", "how", "are", "you", "mr", null]
|
||
// ("new myConstructorWithArguments"中): {prop1: "val1", prop2: "val2"}</code></pre>
|
||
<h3 id="构造字面量数组时使用展开语法"><font><font>构造字面量数组时使用展开语法</font></font></h3>
|
||
<h4 id="构造字面量数组时更给力！"><font><font>构造字面量数组时更给力！</font></font></h4>
|
||
<p><font><font>没有展开语法的时候，只能组合使用 </font></font><code>push</code><font><font>, </font></font><code>splice</code><font><font>, </font></font><code>concat</code><font><font> 等方法，来将已有数组元素变成新数组的一部分。有了展开语法, 通过字面量方式, 构造新数组会变得更简单、更优雅：</font></font></p>
|
||
<pre><code class="language-javascript"><font><font>var parts = ['shoulders', 'knees'];
|
||
var lyrics = ['head', ...parts, 'and', 'toes']; </font></font>
|
||
// ["head", "shoulders", "knees", "and", "toes"]
|
||
</code></pre>
|
||
<p>和参数列表的展开类似, <code>...</code> 在构造字面量数组时, 可以在任意位置多次使用.</p>
|
||
<h4 id="数组拷贝(copy)">数组拷贝(copy)</h4>
|
||
<pre><code class="language-javascript">var arr = [1, 2, 3];
|
||
var arr2 = [...arr]; // like arr.slice()
|
||
arr2.push(4);
|
||
|
||
// arr2 此时变成 [1, 2, 3, 4]
|
||
// arr 不受影响
|
||
</code></pre>
|
||
<p><strong>提示:</strong> 实际上, 展开语法和 <a href="Reference/Global_Objects/Object/assign" title="Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。"><code>Object.assign()</code></a> 行为一致, 执行的都是浅拷贝(只遍历一层)。如果想对多维数组进行深拷贝, 下面的示例就有些问题了。</p>
|
||
<pre><code class="language-javascript">var a = [[1], [2], [3]];
|
||
var b = [...a];
|
||
b.shift().shift(); // 1
|
||
// Now array a is affected as well: [[], [2], [3]]
|
||
</code></pre>
|
||
<h4 id="连接多个数组">连接多个数组</h4>
|
||
<p><a href="Reference/Global_Objects/Array/concat" title="concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。"><code>Array.concat</code></a> 函数常用于将一个数组连接到另一个数组的后面。如果不使用展开语法, 代码可能是下面这样的:</p>
|
||
<pre><code class="language-javascript">var arr1 = [0, 1, 2];
|
||
var arr2 = [3, 4, 5];
|
||
// 将 arr2 中所有元素附加到 arr1 后面并返回
|
||
var arr3 = arr1.concat(arr2);</code></pre>
|
||
<p>使用展开语法:</p>
|
||
<pre><code class="language-javascript">var arr1 = [0, 1, 2];
|
||
var arr2 = [3, 4, 5];
|
||
var arr3 = [...arr1, ...arr2];
|
||
</code></pre>
|
||
<p><a href="Reference/Global_Objects/Array/unshift" title="unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。"><code>Array.unshift</code></a> 方法常用于在数组的开头插入新元素/数组. 不使用展开语法, 示例如下:</p>
|
||
<pre><code class="language-javascript">var arr1 = [0, 1, 2];
|
||
var arr2 = [3, 4, 5];
|
||
// 将 arr2 中的元素插入到 arr1 的开头
|
||
Array.prototype.unshift.apply(arr1, arr2) // arr1 现在是 [3, 4, 5, 0, 1, 2]</code></pre>
|
||
<p>如果使用展开语法, 代码如下: [请注意, 这里使用展开语法创建了一个新的 <code>arr1</code> 数组, <a href="Reference/Global_Objects/Array/unshift" title="unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。"><code>Array.unshift</code></a> 方法则是修改了原本存在的 <code>arr1</code> 数组]:</p>
|
||
<pre><code class="language-javascript">var arr1 = [0, 1, 2];
|
||
var arr2 = [3, 4, 5];
|
||
arr1 = [...arr2, ...arr1]; // arr1 现在为 [3, 4, 5, 0, 1, 2]
|
||
</code></pre>
|
||
<h3 id="构造字面量对象时使用展开语法">构造<font><font>字面量对象时使用展开语法</font></font></h3>
|
||
<p><a class="external" href="https://github.com/tc39/proposal-object-rest-spread" rel="noopener">Rest/Spread Properties for ECMAScript</a> 提议(stage 4) 对 <a href="Reference/Operators/Object_initializer">字面量对象</a> 增加了展开特性。其行为是, 将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中.</p>
|
||
<p>浅拷贝(Shallow-cloning, 不包含 prototype) 和对象合并, 可以使用更简短的展开语法。而不必再使用 <a href="Reference/Global_Objects/Object/assign" title="Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。"><code>Object.assign()</code></a> 方式.</p>
|
||
<pre><code class="language-javascript">var obj1 = { foo: 'bar', x: 42 };
|
||
var obj2 = { foo: 'baz', y: 13 };
|
||
|
||
var clonedObj = { ...obj1 };
|
||
// 克隆后的对象: { foo: "bar", x: 42 }
|
||
|
||
var mergedObj = { ...obj1, ...obj2 };
|
||
// 合并后的对象: { foo: "baz", x: 42, y: 13 }
|
||
</code></pre>
|
||
<p><strong>提示</strong>: <a href="Reference/Global_Objects/Object/assign" title="Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。"><code>Object.assign()</code></a> 函数会触发 <a href="Reference/Functions/set">setters</a>，而展开语法则不会。</p>
|
||
<p> </p>
|
||
<p><strong>提示</strong>: 不能替换或者模拟 <a href="Reference/Global_Objects/Object/assign" title="Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。"><code>Object.assign()</code></a> 函数:</p>
|
||
<pre><code>var obj1 = { foo: 'bar', x: 42 };
|
||
var obj2 = { foo: 'baz', y: 13 };
|
||
const merge = ( ...objects ) => ( { ...objects } );
|
||
|
||
var mergedObj = merge ( obj1, obj2);
|
||
// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } }
|
||
|
||
var mergedObj = merge ( {}, obj1, obj2);
|
||
// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</code></code></pre>
|
||
<p>在这段代码中, 展开操作符(spread operator)并没有按预期的方式执行: 而是先将多个解构变为剩余参数(rest parameter), 然后再将剩余参数展开为字面量对象.</p>
|
||
<p> </p>
|
||
<h3 id="只能用于可迭代对象">只能用于可迭代对象</h3>
|
||
<p>在数组或函数参数中使用展开语法时, 该语法只能用于 <a href="Reference/Global_Objects/Symbol/iterator">可迭代对象</a>：</p>
|
||
<pre><code class="language-javascript">var obj = {'key1': 'value1'};
|
||
var array = [...obj]; // TypeError: obj is not iterable
|
||
</code></pre>
|
||
<h3 id="展开多个值">展开多个值</h3>
|
||
<p>在函数调用时使用展开语法，请注意不能超过 JavaScript 引擎限制的最大参数个数。更多详细信息，请参考: <a href="Reference/Global_Objects/Function/apply" title="apply（）方法使用给定的这个值调用一个函数，并以一个数组（或类似数组的对象）的形式提供参数。"><code>apply()</code></a>。</p>
|
||
<h2 id="剩余语法（剩余参数）">剩余语法（剩余参数）</h2>
|
||
<p>剩余语法(Rest syntax) 看起来和展开语法完全相同，不同点在于, 剩余参数用于解构数组和对象。从某种意义上说，剩余语法与展开语法是相反的：展开语法将数组展开为其中的各个元素，而剩余语法则是将多个元素收集起来并“凝聚”为单个元素。 请参考: <a href="Reference/Functions/Rest_parameters">剩余参数</a>。</p>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
<th scope="col">Comment</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer" hreflang="en" lang="en" rel="noopener" title="ECMAScript 2015 (6th Edition, ECMA-262)">ECMAScript 2015 (6th Edition, ECMA-262)</a></td>
|
||
<td><span class="spec-Standard">Standard</span></td>
|
||
<td>Defined in several sections of the specification: <a class="external" href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer" rel="noopener">Array Initializer</a>, <a class="external" href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists" rel="noopener">Argument Lists</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-array-initializer" hreflang="en" lang="en" rel="noopener" title="ECMAScript Latest Draft (ECMA-262)">ECMAScript Latest Draft (ECMA-262)</a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td>No changes.</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-object-initializer" hreflang="en" lang="en" rel="noopener" title="ECMAScript Latest Draft (ECMA-262)">ECMAScript Latest Draft (ECMA-262)</a></td>
|
||
<td><span class="spec-Draft">Draft</span></td>
|
||
<td>Defined in <a class="external" href="https://tc39.github.io/ecma262/2018/#sec-object-initializer" rel="noopener">Object Initializer</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
|
||
<div class="hidden">The compatibility table on 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"><a href="#Spread_in_array_literals">Spread in array literals</a></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>
|
||
46</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</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-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
16</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>
|
||
37</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>
|
||
8</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>
|
||
46</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>
|
||
46</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</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-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>
|
||
16</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>
|
||
37</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>
|
||
8</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</td><td class="bc-supports-yes bc-browser-nodejs bc-has-history"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0.0<div class="bc-icons"></div><section class="bc-history" id="sect1"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0.0<div class="bc-icons"></div></dt><dd></dd><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
4.0.0<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div></dt><dd><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> From version 4.0.0: this feature is behind the <code>--harmony</code> runtime flag.</dd></dl></section></td></tr><tr><th scope="row"><a href="#Spread_in_function_calls">Spread in function calls</a></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>
|
||
46</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</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-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
27</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>
|
||
37</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>
|
||
8</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>
|
||
46</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>
|
||
46</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</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-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>
|
||
27</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>
|
||
37</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>
|
||
8</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</td><td class="bc-supports-yes bc-browser-nodejs bc-has-history"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0.0<div class="bc-icons"></div><section class="bc-history" id="sect2"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0.0<div class="bc-icons"></div></dt><dd></dd><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
4.0.0<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div></dt><dd><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> From version 4.0.0: this feature is behind the <code>--harmony</code> runtime flag.</dd></dl></section></td></tr><tr><th scope="row">Spread in destructuring</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>
|
||
49</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>
|
||
34</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>
|
||
37</td><td class="bc-supports-unknown bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></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>
|
||
49</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>
|
||
49</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>
|
||
34</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>
|
||
37</td><td class="bc-supports-unknown bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
5.0</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>
|
||
Yes</td></tr><tr><th scope="row"><a href="#Spread_in_object_literals">Spread in object literals</a> <div class="bc-icons"><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental</span><i class="ic-experimental"></i></abbr></div></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>
|
||
60</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>
|
||
55</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>
|
||
47</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>
|
||
11.1</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>
|
||
60</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>
|
||
60</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>
|
||
55</td><td class="bc-supports-unknown bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr title="Compatibility unknown; please update this.">
|
||
?
|
||
</abbr></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>
|
||
11.1</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8.2</td><td class="bc-supports-yes bc-browser-nodejs bc-has-history"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8.3.0<div class="bc-icons"></div><section class="bc-history" id="sect3"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8.3.0<div class="bc-icons"></div></dt><dd></dd><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
8.0.0<div class="bc-icons"><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> </div></dt><dd><abbr class="only-icon" title="User must explicitly enable this feature."><span>Disabled</span><i class="ic-disabled"></i></abbr> From version 8.0.0: this feature is behind the <code>--harmony</code> runtime flag.</dd></dl></section></td></tr></tbody></table><section class="bc-legend" id="sect4"><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><dt><span class="bc-supports-unknown bc-supports">
|
||
<abbr class="bc-level bc-level-unknown only-icon" title="Compatibility unknown">
|
||
<span>Compatibility unknown</span>
|
||
|
||
</abbr></span></dt><dd>Compatibility unknown</dd><dt><abbr class="only-icon" title="Experimental. Expect behavior to change in the future."><span>Experimental. Expect behavior to change in the future.</span><i class="ic-experimental"></i></abbr></dt><dd>Experimental. Expect behavior to change in the future.</dd><dt><abbr class="only-icon" title="User must explicitly enable this feature."><span>User must explicitly enable this feature.</span><i class="ic-disabled"></i></abbr></dt><dd>User must explicitly enable this feature.</dd></dl></section></div><p></p>
|
||
<h2 id="相关链接">相关链接</h2>
|
||
<ul>
|
||
<li><a href="Reference/Functions/Rest_parameters"><font><font>剩余参数</font></font></a><font><font>（Rest Parameters也使用' </font></font><code>...</code><font><font> '）</font></font></li>
|
||
</ul>
|
||
</article> |