ES6語法 解構賦值

ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。

1.陣列的解構賦值

// 傳統的賦值
let a = 1, 
    b = 2,
    c = 3;

//  解構賦值
let [a,b,c] = [1,2,3];

這種方式叫模式匹配的解構方式，只要等號兩邊的模式相同，左邊的變數就會被賦右邊對應的值，下面是陣列巢狀的解構。

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

let [,,c] = [1,2,3];
c //3  忽略前面不感興趣的值

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

解構賦值也允許設定預設值，但是ES6 內部使用嚴格相等運算子（===），判斷一個位置是否有值。所以，只有當一個數組成員嚴格等於undefined，預設值才會生效

let [a=1，b=2,c=a] = ['one',null];
a // one
b // null
c // one

上述程式碼左邊的變數設定了預設值，但此時的a在右邊是可以取到值 ’ one’的，所以a的預設值並不生效，b在右邊的值是null，在javascript中null和undefined是不嚴格等的，所以b設定的預設值也不生效，而c在右邊對應的值沒有，也就是undefined，所以此時c取到了預設值 a，也就是’one’。

當右邊不是陣列時，將會報錯

let [a] = 1; 
let [a] = undefined; 
let [a] = 'abc'; 
let [a] = {}; 
...
 

2. 物件的解構賦值

與陣列的賦值方式不一樣，物件沒有順序之分，變數名和屬性名相同時才能取到值。

let {a,b} = {b:1,a:2};
a //2
b //1

在物件賦值中，真正被賦值的是屬性名後面的變數，而不是前者，如以下。

let {a:x, b:y} = {a:1,b:2};
x //1
y //2
a // error:a is not defined

物件解構也可以巢狀。

let person={
	name:{
		firstName:'xiao',
		lastName:'ming'
	},
	age:10,
	sex:'male',
	friends:{
		xiaofang:{
			age:
 
12
		},
		xiaogang:{
			sex:'male'
		}
	}
};
let {name,friends:{xiaofang:{age}},friends:{xiaogang}} = person;
name // {firstName: "xiao", lastName: "ming"}
age // 12
xiaogang //{sex: "male"}

注意，若提前聲明瞭變數，賦值時需要用小括號括起來，否則會報錯。

let a;
{a} = {a:２};  
a  // 報錯

({a} = {a:２});
a  //２

3. 字串的解構賦值

字串被看做是一個類似陣列的物件進行解構，同時，這個物件有length屬性，所以可以獲取到此物件的length。

let [a,b,c,d] = 'word';
a // w
b // o
c // r
d // d

let {length:len} = 'word';
len // 4

4.函式引數的解構賦值

函式引數的解構賦值看起來像傳入了一個數組，而在函式內部解析的時候，就把陣列解析成了對應的引數。如下程式碼：

function add([a,b]){
	return a+b;
}
add([1,2]);  // 3

同時引數也可以設定預設值

function add({a=1,b=1}){
	return a+b;
}
add({a:2,b:3}); //5