您的位置：首页 > 其它

展开运算符

2016-11-30 15:15 495 查看

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

语法EDIT

用于函数调用:

myFunction(...iterableObj);

用于数组字面量:

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

例子EDIT

更好的 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]);

更强大的数组字面量

例子: 如果已经有一个数组，此时还需要再新建一个数组，要求新数组包含已有数组的数组项的话，就要用到

push，

splice，

concat

等数组方法。有了扩展运算符会让代码更简洁:

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

将类数组对象转换成数组

扩展运算符可以将一个类数组对象中索引范围在[

length)

之间的所有属性的值添加到一个数组中,这样就可以得到一个真正的

数组

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

剩余操作符EDIT

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

规范EDIT


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

EDIT

浏览器兼容性EDIT

Desktop

Mobile

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