ES6解构 - 对象、嵌套对象解构

柔光的暖阳◎ 2021-09-08 14:52 527阅读 0赞

解构是ES6新加的**解构**功能，可以使得我们获取数据更方便，从而提高日常编码效率。  
解构可以用于对象，也可以用于数组，这篇文章我们只讲在对象类型上使用解构可以做哪些事情：  
**一：解构用于变量声明**

let node = {
        name: 'mike',
        age: 25
    };
    let {name, age} = node;
    console.log(name); // mike
    console.log(age); // 25

let/const/var 后面跟上用一对\{\}包裹的变量列表，变量名与对象属性名相同，则就会取对象属性对应的值初始化变量。

**二：解构用于变量赋值**

let node = {
        name: 'mike',
        age: 25
    };
    name = 'lily';
    age = 20;
    console.log(name); // lily
    console.log(age);//20
    ({name, age} = node);
    console.log(name);//mike
    console.log(age);//25

以上代码的逻辑为：预先定义的变量name和age分别被初始化为'lily'和20之后，又用node对象的属性，重新赋值给name和age变量。解构赋值的语法要求，**一定要用一对小括号()包裹整个解构赋值表达式**。

**三：给解构的变量设置默认值**

let node = {
        name: 'mike',
        age: 25
    };
    let {name, age, country = 'China'} = node;
    console.log(name); // mike
    console.log(age); // 25
    console.log(country); // China

如果我们在解构声明变量时，定义了对象中不存在的属性，那么这个变量的值为`undefined`。我们可以给变量设置默认值，当对象中没有对应的属性时，这个变量的值就是设置的默认值。

**四：解构对象属性赋值给不同名变量**  
在前面的例子里，我们的变量名都是和对象的属性名一样的。当然，也有办法定义不同命中的变量，依然利用解构获得对象的属性值。

let node = {
        name: 'mike',
        age: 25
    };
    let {name: localName, age, country: localCountry = 'China'} = node;
    console.log(localName); //mike
    console.log(age); // 25
    console.log(localCountry); //China

这里需要注意的是，冒号左边的是对象的属性名，右边的是我们新定义的变量名，这一点与我们的认知和习惯恰好反过来了。  
我们在这种场景下也可以给变量设置默认值，就像上面的localCountry变量那样做：`:`左边是对象的属性名，右边是一个赋值表达式; 这个表达式`=`左边是变量名，右边是默认值。  
**五：嵌套对象的解构**  
前面我们所有的例子，被解构的对象都是单层解构，接下来我们看看多层对象(嵌套对象)的解构：

上面代码的倒数第二行，我们初始化的变量为`basicInfo`，而不是`personalInfo`，这一点要特别注意。personalInfo只是用来指明basicInfo的父节点。  
嵌套对象的解构的语法就是：从原对象的最外层变量定位，一直到需要取值的那一层，每层之间用冒号`:`隔开，变量在冒号的右边。我们在上面的例子机场上，再增加一层：

以上，就是解构在对象数据的使用。