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

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