spread语法解析与使用

@[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"));

这段代码和上面的是等价的