ES6 解構 destructuring

解構的作用:簡化書寫長度，提升開發效率。

解構對象

在開發中我們常用到使用ajax請求數據，並且把數據渲染到頁面上。可能這個數據返回的對象或數組。例如返回一個obj{name:'zwq',age:18,sex:woman}而我們獲取裡面的值保存在變數里會用 var name = obj.name,var age = obj.age。

在es6中提供瞭解構的語法糖，讓左右兩側極為相似的結構進行變數賦值。

在對象中單獨寫一個name代表的就是 name：name，左側name你要到對象對象找到的屬性，右側name代表你聲明的變數名，所以，下麵代碼中obj對象的name，age屬性賦值給變數name和age。在左側的變數找到了右側對象的相同屬性並把值賦給對應變數。

let obj = {
    name: "zwq",
    age: 18,
    sex:'female'
}
let name,age;
({ name, age } = obj);
console.log(name, age);   //zwq 18

上面代碼是先聲明變數，在賦值。也可以聲明變數時同時賦值，如下：

let {name,age} = obj;
console.log(name,age);   //zwq 18

當自己聲明的變數不想和對應的屬性重名是

let {name:Oname,age:Oage} = obj;
console.log(Oname,Oage);  //zwq 18

預設賦值

下麵代碼採用預設賦值，形參a,分別預設賦值為10，20。當值傳入一個值的時候，b並不是undefined，而是取預設值。

function sum(a = 10,b = 20){
    console.log(a+b);
}
sum(5);

下麵代碼使用預設值的方式給變數sex附上預設值male，當對象中找不到對應的屬性是取預設值，當存在對用屬性是，取對象裡面的值。

let {name:Oname,age:Oage,sex ='male' } = obj;
console.log(Oname,Oage,sex);

解構數組

由於數組也是對象,屬性名是當前的索引值，所以下麵可以成功的進行變數賦值。同時數組中用length屬性。因此聲明length變數也可以獲取對象的屬性值：數組的長度

let arr = [1,2,3];
let {0:x,1:y,2:z} = arr
console.log(x,y,z);   //1,2,3

而解構就是使用左右兩側極為相似的解構進行賦值，在數組解構中這樣書寫：

let [x,y,z] = arr;
console.log(x,y,z);   //1,2,3

當數組嵌套對象的形式也可以利用左右兩側相似解構進行賦值。

用，，，占位，照抄arr的結構。如下聲明name變數，並且列印zwq.

let arr = [1,2,3,{name:'zwq'}];
let [,,,{name}] = arr;
console.log(name);