@[spread, javavscript, es6, react]

Spread語(yǔ)法是ES6中的一個(gè)新特性，在需要使用多參數(shù)（函數(shù)參數(shù)）、多元素（數(shù)組迭代）或者多變量（解構(gòu)賦值）的地方使用spread語(yǔ)法，可以讓表達(dá)式的結(jié)果平鋪化

java中的可變參數(shù)

熟悉java的朋友對(duì)可變參數(shù)應(yīng)該比較熟悉了，他用來(lái)指定方法接受不定個(gè)數(shù)的參數(shù)，參數(shù)被傳進(jìn)來(lái)后形成一個(gè)數(shù)組，可供你迭代使用分別取出傳進(jìn)來(lái)的參數(shù)。

public int sum(int... input){
    int result;
    for(int i: input){
        result+=i;
    }
    return result;
}

上述代碼就是用來(lái)求和的，輸入的可變參數(shù)的個(gè)數(shù)是不定的，但是進(jìn)入方法后，所有的參數(shù)變成了一個(gè)數(shù)組，可以供你迭代。于是這個(gè)sum方法可以這樣子調(diào)用：

int[] array = [1,2,3,4,5];
int result = sum(array);// result is 15

當(dāng)做參數(shù)傳遞

function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

這里就和java的可變參數(shù)有點(diǎn)類(lèi)似，...（spread操作符？spread語(yǔ)法）用來(lái)將args數(shù)組展開(kāi)，分別當(dāng)做參數(shù)傳遞給了myFunction的x，y，z

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

這個(gè)例子說(shuō)明spread操作符可以多次使用。0和1分別當(dāng)做參數(shù)賦值給了w和x，最后一個(gè)[3]也是一個(gè)數(shù)組，那么他被spread操作符展開(kāi)后當(dāng)然就只有一個(gè)結(jié)果，即3被賦值給了z

用于數(shù)組的創(chuàng)建和組合

var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes']; // ["head", "shoulders", "knees", "and", "toes"]

以上的例子是parts數(shù)組作為lyrics的一部分給賦值進(jìn)去了

這里也可以使用數(shù)組的push函數(shù)：

var arr = [1,2,3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

arr2的結(jié)果是[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只可用于可枚舉類(lèi)型

var obj = {"key1":"value1"};
var array = [...obj]; // TypeError: obj is not iterable

以上的代碼會(huì)報(bào)錯(cuò)，obj是一個(gè)對(duì)象，不可以被枚舉，spread并不適用于這種類(lèi)型

rest操作符

rest操作符也是三個(gè)點(diǎn)（...），但實(shí)際他和spread操作符相反，他是將多個(gè)元素組合成一個(gè)元素，這里其實(shí)就是java的可變參數(shù)，但是在js中叫做rest參數(shù)

function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1();  // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

具體使用方法就不再贅述，和java一樣

spread attributes延展屬性

在寫(xiě)React的代碼的時(shí)候，spread attributes是最常用的到寫(xiě)法，用來(lái)傳遞一個(gè)對(duì)象給一個(gè)組件的props，然后這個(gè)組件有哪些props你卻并不完全清楚。這里舉個(gè)例子說(shuō)明

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

這里寫(xiě)了而一個(gè)Student組件，他含有兩個(gè)屬性 ，一個(gè)是name一個(gè)是age。我們渲染他的時(shí)候，通過(guò)name="xiaoming" age={10}這種key-value方式傳入，從而達(dá)到了定制組件的目的。想象一下如果Student屬性特別多，那么難道要一個(gè)個(gè)的在這里寫(xiě)上嗎？何況當(dāng)這個(gè)Student可能并不似你寫(xiě)的，里面有哪些屬性你也并不清楚。這里可以用到spread操作符：

var args = {
    name: "xiaoming",
    age: 10
}

ReactDOM.render((
    <Student {...args}/>
), document.getElementById("main"));

這段代碼和上面的是等價(jià)的