欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JS 对象解构赋值

程序员文章站 2022-03-04 23:40:59
...

结构赋值的目的就是从对象或者数组中获取值赋值给变量,从而减少代码的编写

1. 最简单的案例

看下面的案例

    let person = {
        name: 'yhb',
        age: 20
    }
    /*
    注意:下面虽然看起来是创建了一个对象,对象中有两个属性 name 和 age
    但是:其实是声明了两个变量
    name:等于对象person 中的name属性的值
    age:等于对象person 中的 age属性的值
    */
    let { name, age } = person
    console.log(name,age)

如上面注释中所说,声明了变量 name和age,然后分别从对象person中寻找与变量同名的属性,并将属性的值赋值给变量

所以,这里的关键,就是首先要知道对象中都有哪些属性,然后再使用字面量的方式声明与其同名的变量

2. 属性不存在怎么办

如果不小心声明了一个对象中不存在的属性怎么办?

或者,实际情况下,可能是我们就是想再声明一个变量,但是这个变量也不需要从对象中获取值,这个时候,此变量的值就是 undefined

    let person = {
        name: 'yhb',
        age: 20
    }   
    let { name, age,address } = person
    console.log(name,age,address)

此时,可以给变量加入一个默认值

let { name, age,address='北京' } = person

3.属性太受欢迎怎么办

当前声明了 name 和 age 变量,其值就是person对象中name和age属性的值,如果还有其他变量也想获取这两个属性的值怎么办?

 let { name, age, address = '北京' } = person
 console.log(name, age, address)
 let { name, age } = person
 console.log(name, age)

上面的方法肯定不行,会提示定义了重复的变量 name 和 age

那怎么办呢?

难道只能放弃结构赋值,使用老旧的方式吗?

let l_name=person.name
let l_age=person.age
console.log(l_name,l_age)

其实不然!

let {name:l_name,age:l_age}=person
console.log(l_name,l_age)

说明:

  • 声明变量 l_name 并从对象person中获取name属性的值赋予此变量
  • 声明变量 l_age,   并从对象person中获取age属性的值赋予此变量

这里的重点是下面这行代码

let {name:l_name,age:l_age}=person

按照创建对象字面量的逻辑,name 为键,l_name 为值。但注意,这里是声明变量,并不是创建对象字面量,所以争取的解读应该是

声明变量 l_name,并从person 对象中找到与 name 同名的属性,然后将此属性的值赋值给变量 l_name

所以,我们最后输出的是变量 l_name和l_age

console.log(l_name,l_age)

当然这种状态下,也是可以给变量赋予默认值的

let {name:l_name,age:l_age,address:l_address='北京'}=person

4. 嵌套对象如何解构赋值

let person = {
    name: 'yhb',
    age: 20,
    address: {
        province: '河北省',
        city: '保定'
    }
}
// 从对象 person 中找到 address 属性,并将值赋给变量 address
let {address}=person
// 从对象 address 中找到 province 属性,并将值赋给变量 province
let {province}=address
console.log(province)

上面代码一层层的进行结构赋值,也可以简写为如下形式

let {address:{province}}=person  

从peson 对象中找到 address 属性,取出其值赋值给冒号前面的变量 address,然后再将 变量address 的值赋值给 冒号 后面的变量 {province},相当于下面的写法

let {province}=address