共计 1693 个字符,预计需要花费 5 分钟才能阅读完成。
解构是 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 类型数据上的解构。