JS 对象解构赋值

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

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