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{length} = arr;

　console.log(length);  //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);