ES6解构 - 对象解构

BlackHole1 发布于2019-08-26 10:28 / 774人阅读

摘要：解构是新加的解构功能，可以使得我们获取数据更方便，从而提高日常编码效率。解构赋值的语法要求，一定要用一对小括号包裹整个解构赋值表达式。当然，也有办法定义不同命中的变量，依然利用解构获得对象的属性值。下一篇，我们讲解构在类型数据上的解构。

解构是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变量那样做：:左边是对象的属性名，右边是一个赋值表达式; 这个表达式=左边是变量名，右边是默认值。
五：嵌套对象的解构
前面我们所有的例子，被解构的对象都是单层解构，接下来我们看看多层对象(嵌套对象)的解构：

let node = {
    personalInfo: {
        basicInfo: {
            name: "mike",
            age: 25
        }
    },
    level: 3
};
let { personalInfo: { basicInfo } } = node;
console.log(basicInfo.name);// mike

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

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: "mike",
                lastName: "deep"
            },
            age: 25
        }
    },
    level: 3
};
let { personalInfo: {basicInfo: {name}} } = node;
console.log(name.firstName);// mike

以上，就是解构在对象数据的使用。下一篇，我们讲解构在Array类型数据上的解构。

云服务器 GPU云服务器对象解构解构函数解构赋值 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106221.html

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《深入理解ES6》笔记——解构：使数据访问更便捷（5）

摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码...

Drinkey 2019-08-20 18:06 评论0 收藏0