展开运算符

该特性处于 ECMAScript 6 规范草案中,目前的实现在未来可能会发生微调,请谨慎使用。

概述

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

语法

函数调用:

f(...iterableObj);

数组字面量:

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

解构:

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

例子

代替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方法调用[[Call]]而不是[[Construct]]).在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];

规范

规范 状态 备注

ECMAScript 6 (ECMA-262)
Array Initializer

ECMAScript 6 (ECMA-262)
Argument Lists

Release Candidate
  • 12.2.4 Array Initializer
  • 12.3.6 Argument Lists

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
数组字面量中的展开操作 未实现 16 (16) 未实现 未实现 未实现
函数调用中的展开操作 未实现 未实现 未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
数组字面量中的展开操作 未实现 16.0 (16) 未实现 未实现 未实现
函数调用中的展开操作 未实现 未实现 未实现 未实现 未实现

相关链接

文档标签和贡献者

向此页面作出贡献: teoli, fskuok, ziyunfei, Kennyluck
最后编辑者: fskuok,
隐藏侧边栏