展开运算符

  • 版本网址缩略名: JavaScript/Reference/Spread_operator
  • 版本标题: 展开运算符
  • 版本 id: 347667
  • 创建于:
  • 创建者: ziyunfei
  • 是否是当前版本?
  • 评论

修订内容

{{Harmony()}}

概述

展开运算符可以将一个可迭代的对象在函数调用的位置展开成为多个参数,或者在数组字面量中展开成多个数组元素.

语法

函数调用:

f(...iterableObj);

数组字面量:

[...iterableObj, 4, 5, 6]

例子

代替apply方法

例子: 目前为止,我们都是使用Function.prototype.apply方法来将一个数组展开成多个参数:

function f(x, y, z) { }
var args = [0, 1, 2];
f.apply(null, args);

如果使用了ES6的展开运算符,你可以这么写:

function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);

还可以同时展开多个参数:

function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);

更强大的数组字面量

例子: 目前为止,如果你想创建一个新数组,包含某些已有的旧数组,通常会用到push, splice, concat等数组方法.有了新的展开运算符,可以这样写:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];

和函数调用一样,数组字面量中也可以使用...多次.

配合new运算符

例子: 在ES5中,我们无法同时使用new运算符和apply方法(apply方法不能作为构造函数).在ES6中,我们可以使用展开运算符,和普通的函数调用一样.

var dataFields = readDateFields(database);
var d = new Date(...dateFields);

更好的push方法

例子: 在ES5中,我们可以使用push方法将一个数组添加到另一个数组的末尾:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将arr2中的所有元素添加到arr1中
Array.prototype.push.apply(arr1, arr2);

在ES6中,可以这么写:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

将类数组对象转换成数组

展开操作可以将一个类数组对象中索引为0到length属性的值的所有属性添加到数组中,这样就可以得到一个真正的数组:

var nodeList = document.querySelectorAll('div');
var array = [...nodeList];

规范

Specification Status Comment
{{SpecName('Harmony')}} {{Spec2('Harmony')}}  

浏览器兼容性

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
数组字面量中的展开操作 {{ CompatNo() }} {{ CompatGeckoDesktop("16") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
函数调用中的展开操作 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
数组字面量中的展开操作 {{ CompatNo() }} {{ CompatGeckoMobile("16") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
函数调用中的展开操作 {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

相关链接

修订版来源

<p name="Summary">{{Harmony()}}</p>
<h2 id="Summary" name="Summary">概述</h2>
<p>展开运算符可以将一个可迭代的对象在函数调用的位置展开成为多个参数,或者在数组字面量中展开成多个数组元素.</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<p>函数调用:</p>
<pre class="brush: js">
<code class="lang-javascript">f(...</code>iterableObj<code class="lang-javascript">);</code>
</pre>
<p>数组字面量:</p>
<pre class="brush: js">
[...iterableObj, 4, 5, 6]</pre>
<h2 id="Example" name="Example">例子</h2>
<h3 id=".E4.BB.A3.E6.9B.BFapply.E6.96.B9.E6.B3.95">代替apply方法</h3>
<p><strong>例子:</strong> 目前为止,我们都是使用<code>Function.prototype.apply</code>方法来将一个数组展开成多个参数:</p>
<pre class="brush: js">
function f(x, y, z) { }
var args = [0, 1, 2];
f.apply(null, args);</pre>
<p>如果使用了ES6的展开运算符,你可以这么写:</p>
<pre class="brush: js">
function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);</pre>
<p>还可以同时展开多个参数:</p>
<pre class="brush: js">
function f(v, w, x, y, z) { }
var args = [0, 1];
f(-1, ...args, 2, ...[3]);</pre>
<h3 id=".E6.9B.B4.E5.BC.BA.E5.A4.A7.E7.9A.84.E6.95.B0.E7.BB.84.E5.AD.97.E9.9D.A2.E9.87.8F">更强大的数组字面量</h3>
<p><strong>例子:</strong> 目前为止,如果你想创建一个新数组,包含某些已有的旧数组,通常会用到<code>push</code>, <code>splice</code>, <code>concat</code>等数组方法.有了新的展开运算符,可以这样写:</p>
<pre class="brush: js">
var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];</pre>
<p>和函数调用一样,<code>数组字面量中也可以使用...多次</code>.</p>
<h3 id=".E9.85.8D.E5.90.88new.E8.BF.90.E7.AE.97.E7.AC.A6">配合new运算符</h3>
<p><strong>例子:</strong> 在ES5中,我们无法同时使用<code>new运算符和apply方法</code>(<code>apply方法</code><code>不能作为构造函数</code>).在ES6中,我们可以使用展开运算符,和普通的函数调用一样.</p>
<pre class="brush: js">
var dataFields = readDateFields(database);
var d = new Date(...dateFields);</pre>
<h3 id=".E6.9B.B4.E5.A5.BD.E7.9A.84push.E6.96.B9.E6.B3.95">更好的push方法</h3>
<p><strong>例子:</strong> <code>在ES5中,我们可以使用push</code>方法将一个数组添加到另一个数组的末尾:</p>
<pre class="brush: js">
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
// 将arr2中的所有元素添加到arr1中
Array.prototype.push.apply(arr1, arr2);</pre>
<p>在ES6中,可以这么写:</p>
<pre class="brush: js">
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);</pre>
<h3 id=".E5.B0.86.E7.B1.BB.E6.95.B0.E7.BB.84.E5.AF.B9.E8.B1.A1.E8.BD.AC.E6.8D.A2.E6.88.90.E6.95.B0.E7.BB.84">将类数组对象转换成数组</h3>
<p>展开操作可以将一个类数组对象中索引为0到length属性的值的所有属性添加到数组中,这样就可以得到一个真正的数组:</p>
<pre class="brush: js">
var nodeList = document.querySelectorAll('div');
var array = [...nodeList];</pre>
<h2 id="Specifications" name="Specifications">规范</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>{{SpecName('Harmony')}}</td>
      <td>{{Spec2('Harmony')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>数组字面量中的展开操作</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("16") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>函数调用中的展开操作</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>数组字面量中的展开操作</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("16") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>函数调用中的展开操作</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">相关链接</h2>
<ul>
  <li><a href="../Reference/rest_parameters" title="rest parameters">剩余参数</a></li>
</ul>
恢复到这个版本