ES6 spread operator 展开运算符

spread operator

spread operator就是展开运算符，用来展开iterable obj，语法是 …iterableObj ，具体分为三种情况，调用函数时展开数组，在数组字面量中展开数组，在对象字面量中展开对象，只有这3种用法。

函数调用时，展开数组

function sum(x, y, z) {
	return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers));//6
console.log(sum.apply(null,numbers));//6
1
2
3
4
5
6
7

可以看到如果参数是数组就不用apply转了，直接使用扩展运算符，语义更加简单明了。

function Person(name,age){
	console.log("%s,%s",name,age);
}

Person(...['jack',20]);  //jack,20
1
2
3
4
5

为了加深理解，我们看看Babel编译后是什么样子

function Person(name, age) {
	console.log("%s,%s", name, age);
}

Person.apply(undefined, ['jack', 20]);
1
2
3
4
5

可以看到本质上还是使用的apply，不过语法更简洁、更明了。

在数组字面量中展开数组

展开语法可以在数组字面量中，而且可以使用多次。

var arr1 =[1,2];
var arr2=[...arr1,3,...arr1];//[ 1, 2, 3, 1, 2 ]
console.log(arr2);
1
2
3

同样我们看一下babel编译后的代码

var arr1 = [1, 2];
var arr2 = [].concat(arr1, [3], arr1); //[ 1, 2, 3, 1, 2 ]
console.log(arr2);
1
2
3

在数组中展开数组时，相当于concat，那么以后能用到concat的地方可以用展开运算符了。
ES5写法

[].concat([1,2,3])
1

ES6写法

[...[1,2,3]]
1

这里要注意到[...[1,2,3]] 相当于实现了clone，所以以前使用arr.slice()实现的clone，都可以使用展开运算符实现了。

在对象字面量中展开对象

在对象字面量中展开对象，且只能在对象字面中展开对象，实现展开属性、merge属性的功能；

var p={name:"jack",age:12};
var obj = {age:22,...p};
console.log(obj);//{ age: 12, name: 'jack' }
1
2
3

后记

注意spread operator跟rest parameter非常相似，都是以…开头，但在功能上正好相反，spread operator用来展开参数，而rest parameter用来收集参数；