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);