Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

展开运算符允许一个表达式在某处展开,在多个参数(用于函数调用)或者多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方就会这样。

语法

用于函数调用:

myFunction(...iterableObj);

用于数组字面量:

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

例子

更好的 apply 方法

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

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

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

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

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

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

更强大的数组字面量

例子:  如果已经有一个数组,此时还需要再新建一个数组,要求新数组包含已有数组的数组项的话,就要用到pushspliceconcat 等数组方法。有了扩展运算符会让代码更简洁:

var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "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);

仅可遍历对象(iterables)可用

var obj = {"key1":"value1"};
function myFunction(x) {
    console.log(x); // undefined
}
myFunction(...obj);
var args = [...obj];
console.log(args, args.length) //[] 0

将类数组对象转换成数组

扩展运算符可以将一个类数组对象中索引范围在[0,length)之间的所有属性的值添加到一个数组中,这样就可以得到一个真正的数组:

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

剩余操作符

还有一种操作符叫做剩余操作符(the rest operator),它的样子看起来和展开操作符一样,但是它是用于解构数组和对象。在某种程度上,剩余元素和展开元素相反,展开元素会“展开”数组变成多个元素,剩余元素会收集多个元素和“压缩”成一个单一的元素。

规范

规范 状态 备注
ECMAScript 2015 (6th Edition, ECMA-262) Standard 规范中定义的几个部分: Array Initializer, Argument Lists
ECMAScript 2017 Draft (ECMA-262) Draft  

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
数组字面量中的展开操作 46 16 (16) Edge 未实现 7.1
函数调用中的展开操作 46 27 (27) Edge 未实现 7.1
解构赋值中的展开操作 49 34 (34) 未实现 ? ?
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
数组字面量中的展开操作 未实现 46 16.0 (16) 未实现 未实现 8 46
函数调用中的展开操作 未实现 46 27.0 (27) 未实现 未实现 8 46
解构赋值中的展开操作 未实现 未实现 34 (34) ? ? ? 未实现

相关链接

文档标签和贡献者

 最后编辑者: liliang-cn,