ES6解構賦值學習總結

ES6提供瞭解構賦值的方式，這樣子在賦值多個變量或者進行註釋時可以方便很多，不同場景下也有很多新的應用，個人常使用的有數組的解構賦值，對象的解構賦值和函數參數的解構賦值，函數參數的解構賦值之前總結過，這裏寫下數組的和對象的簡單總結吧
函數參數的解構賦值總結點擊這裏

一、數組的解構賦值

先來個最簡單的

let [a, b] = [1, 2];
a;//輸出1
b;//輸出2

這種模式就容易爲多個變量賦值，因爲等號右邊是數組，所以有需要獲取數組元素時，如下使用更爲方便

let array = [1,2,3];
let [a, b, c] = array;
a;//輸出1
b;//輸出2
c;//輸出3

當然，數組中的元素是不限類型的

let [a, array, c] = [1, [2,3], 4];
a;//輸出1
array;//輸出[2,3]
c;//輸出4

另外，可將剩餘元素賦值給一個變量

let [a, ...b] = [1,2,3,4];
a;//輸出1
b;//輸出[2, 3, 4]

其實只要等號右邊具有Iterator接口均可使用解構賦值

二、對象的解構賦值

先給個最簡單的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

這裏的賦值是變量名對應屬性名賦值，如果變量名與屬性名沒有對應上的話，則會賦值失敗，如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined，因爲沒有對應屬性名

其實以上寫法只是如下寫法的簡寫

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其實是把對應的屬性名提取出來給一個變量，所以可以這樣使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上僅列出了較爲簡單的情況，更多具體情況查詢MDN吧，或者翻看阮老師的《ES6標準入門》