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

這段代碼和上面的是等價的