解构是ES6新加的解构功能,可使得咱们获取数据更方便,从而提升平常编码效率。
解构能够用于对象,也能够用于数组,这篇文章咱们只讲在对象类型上使用解构能够作哪些事情:
一:解构用于变量声明node
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变量。解构赋值的语法要求,必定要用一对小括号()包裹整个解构赋值表达式。code
三:给解构的变量设置默认值对象
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
。咱们能够给变量设置默认值,当对象中没有对应的属性时,这个变量的值就是设置的默认值。console
四:解构对象属性赋值给不一样名变量
在前面的例子里,咱们的变量名都是和对象的属性名同样的。固然,也有办法定义不一样命中的变量,依然利用解构得到对象的属性值。ast
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类型数据上的解构。语法