likes
comments
collection
share

🤙Es6解构赋值,真的懂了吗?

作者站长头像
站长
· 阅读数 39

👉 基本概念

简单来说,解构赋值就是使用与对象匹配的结构来实现对象属性赋值

🤞 用法

💪不使用解构

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
评论
请登录