es6的解構賦值學習（1）

相對es5的簡單的「=」賦值來說，es6增加了一種新的賦值模式——解構賦值，按照它的規則，可以從陣列和物件中提取值來對變數進行賦值，個人覺得方便了很多，但是這個模式有點噁心人，相比簡單的「=」賦值來說，也更要花時間來理解，今天我們一起學習一下這個新的賦值方法。

看一行**：

let [a,b,c] = [1,2,3];

這是一種最基本的陣列解構賦值，等同於：

var a = 1
;var b = 2
;var c = 3;

相當於兩邊都是陣列，它們的length相同，左邊放變數，右邊放值，一一對應，省了不少**

如果length不同的話，會有兩種情況：

let [x, y] = [1, 2, 3
];//
x=1//
y=2let [a] =;
//a=undefined;
let [a, b] = [1
];//
a=1;
//b=undefined;

第一種：左邊的length小於右邊的，叫做不完全解構，變數都可以賦值成功，多餘的值就多餘了；

第二種：左邊的length大於右邊的，未超出的部分會正常解構並賦值，超出的變數在右邊沒有匹配的值，則解構失敗，值定位undefined；

那如果兩邊的型別不同，舉個栗子：一邊是陣列,另一邊是非陣列，則會報錯，借用阮大神的話：

//
報錯let [foo] = 1
;let [foo] = false
;let [foo] =nan;
let [foo] =undefined;
let [foo] = null
;let [foo] ={};
//上面的語句都會報錯，因為等號右邊的值，要麼轉為物件以後不具備 
//iterator 介面（前五個表示式），要麼本身就不具備 iterator 介面（最後一
//個表示式）。

es6中還有預設值的概念，解構賦值也允許指定預設值：

let [foo = true] =;
foo 
//true
let [x, y = 'b'] = ['a']; //
x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; //
x='a', y='b'

我們可以看到，兩邊陣列的length並不同，也沒有賦值，但可以正常輸出，是因為在宣告變數時，給了變數乙個預設值，若沒有用其他方式給該變數賦值的話，則使用預設值,es6判斷使用預設值的情況是給出了該位置的值為undefined（未給任何值的話預設是undefined）且必須「===」undefined，才會使用預設值：

let [x = 1] =[undefined];
x //
1let [x = 1] = [null
];x 
//null

上面的**可以這樣理解：

let x;
if ([undefined][0] ===undefined)  
else
let x;
if ([null][0] ===undefined)  
else

然後在變數數量多的情況下，可以引用解構賦值的其他變數，但該變數必須已經宣告，且有乙個順序：後面的可以使用前面的，反之不可：

let [x = 1, y = x] = ;     //
x=1; y=1
let [x = 1, y = x] = [2];    //
x=2; y=2
let [x = 1, y = x] = [1, 2]; //
x=1; y=2
let [x = y, y = 1] = ;     //
referenceerror
let [x = y, y = 1] = [2];     //
x=2,y=1

es6的解構賦值學習（1）

ES6學習解構賦值

ES6 學習解構賦值

ES6 解構賦值

es6的解構賦值學習（1）

ES6學習 解構賦值

ES6 學習 解構賦值

ES6 解構賦值

相關推薦

ES6學習解構賦值

ES6 學習解構賦值