🤙Es6解构赋值,真的懂了吗?
👉 基本概念
简单来说,解构赋值就是使用与对象匹配的结构来实现对象属性赋值
🤞 用法
💪不使用解构
let person = {
name:'Matt',
age:27
}
let personName = person.name
let personAge = person.age
👦使用解构
一、普通解构
let person = {
name:'Matt',
age:27
}
let {name:personName,age:personAge} = person
console.log(personName,personAge) // Matt,27
如果我们不想要变量在解构表达式声明,我们可以先声明,这时候表达式要有一个大括号
let personName,personAge;
let person = {
name:'Matt',
age:27
};
({name:personName,age:personAge} = person)
console.log(personName,personAge) // Matt,27
👊特殊情况如下: 当我们的解构赋值中不一定与对象的属性匹配,如果引用的属性不存在,则该变量的值就是undefined
let person = {
name:'Matt',
age:27
}
let {name,job} = person
console.log(job) //undefined
🤜如果遇到这种情况,其实我们可以给job设置默认值,就不会返回undefined,代码如下
let person = {
name:'Matt',
age:27
}
let {name,job='engineer'} = person
console.log(job) //engineer
二、嵌套解构
可以有两种形式的嵌套解构来书写代码:
代码一:
let personCopy = {};
let person = {
name:'Matt',
age:27,
job:{
title:'enginerr'
}
};
({
name: personCopy.name,
age: personCopy.age,
job: personCopy.job
} = person)
console.log(personCopy); //{ name: 'Matt', age: 27, job: { title: 'enginerr' } }
代码二:
let person = {
name:'Matt',
age:27,
job:{
title:'enginerr'
}
};
let { job: { title } } = person
console.log(title) //enginerr
三、部分解构
如果一个解构赋值表达式涉及到前面成功,后面失败,则整个赋值解构还是会完成一部分
let person = {
name:'test',
age:34
}
let name1,bar2,age3;
try{
({name:name1,foo: { bar: bar2 },age:age3} = person)
}catch(e){
}
console.log(name1,bar2,age3)
//test undefined undefined.
可以看出来,还是能打印前半部分的内容
四、参数上下文匹配解构
let person = {
name:'marray',
age:34
}
function printPerson1(foo,{name,age},bar){
console.log(arguments)
console.log(name, age);
}
function printPerson2(foo,{name:personName,age:personAge},bar){
console.log(arguments)
console.log(personName, personAge);
}
printPerson1('111',person,'222')
printPerson2('111',person,'222')
打印结果都是:
{
'0': '111',
'1': { name: 'marray', age: 34 },
'2': '222'
}
marray 34
结尾
本篇也是读了红宝石书总结的,谢谢大家支持
转载自:https://juejin.cn/post/7268533072987242535