@[spread, javavscript, es6, react]
Spread语法是ES6中的一个新特性，在需要使用多参数（函数参数）、多元素（数组迭代）或者多变量（解构赋值）的地方使用spread语法，可以让表达式的结果平铺化
java中的可变参数
熟悉java的朋友对可变参数应该比较熟悉了，他用来指定方法接受不定个数的参数，参数被传进来后形成一个数组，可供你迭代使用分别取出传进来的参数。
public int sum(int... input){
int result;
for(int i: input){
result+=i;
}
return result;
}
上述代码就是用来求和的，输入的可变参数的个数是不定的，但是进入方法后，所有的参数变成了一个数组，可以供你迭代。于是这个sum方法可以这样子调用：
int[] array = [1,2,3,4,5];
int result = sum(array);// result is 15
当做参数传递
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
这里就和java的可变参数有点类似，...（spread操作符？spread语法）用来将args数组展开，分别当做参数传递给了myFunction的x，y，z
function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);
这个例子说明spread操作符可以多次使用。0和1分别当做参数赋值给了w和x，最后一个[3]也是一个数组，那么他被spread操作符展开后当然就只有一个结果，即3被赋值给了z
用于数组的创建和组合
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]
以上的例子是parts数组作为lyrics的一部分给赋值进去了
这里也可以使用数组的push函数：
var arr = [1,2,3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4);
arr2的结果是[1,2,3,4]，而arr并不受任何影响依然存在
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);// arr1 is [0,1,2,3,4,5]
arr2被赋值给了arr1的末尾
spread只可用于可枚举类型
var obj = {"key1":"value1"};
var array = [...obj]; // TypeError: obj is not iterable
以上的代码会报错，obj是一个对象，不可以被枚举，spread并不适用于这种类型
rest操作符
rest操作符也是三个点（...），但实际他和spread操作符相反，他是将多个元素组合成一个元素，这里其实就是java的可变参数，但是在js中叫做rest参数
function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
具体使用方法就不再赘述，和java一样
spread attributes延展属性
在写React的代码的时候，spread attributes是最常用的到写法，用来传递一个对象给一个组件的props，然后这个组件有哪些props你却并不完全清楚。这里举个例子说明
class Student extends React.Component {
constructor(props){
super(props)
this.state = {
name: "",
age: 0
}
}
render(){
return(
<div>name is : {this.props.name}, age : {this.props.age}</div>
)
}
}
ReactDOM.render((
<Student name="xiaoming" age={10}/>
), document.getElementById("main"));
这里写了而一个Student组件，他含有两个属性 ，一个是name一个是age。我们渲染他的时候，通过name="xiaoming" age={10}这种key-value方式传入，从而达到了定制组件的目的。想象一下如果Student属性特别多，那么难道要一个个的在这里写上吗？何况当这个Student可能并不似你写的，里面有哪些属性你也并不清楚。这里可以用到spread操作符：
var args = {
name: "xiaoming",
age: 10
}
ReactDOM.render((
<Student {...args}/>
), document.getElementById("main"));
这段代码和上面的是等价的
