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 

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

function Person(name,age){ 
	console.log("%s,%s",name,age); 
} 
 
Person(...['jack',20]);  //jack,20 

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

function Person(name, age) { 
	console.log("%s,%s", name, age); 
} 
 
Person.apply(undefined, ['jack', 20]); 

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

在数组字面量中展开数组

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

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

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

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

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

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

ES6写法

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

这里要注意到[...[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' } 

后记

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