对象解构赋值

对象解构

对象解构的语法形式是在一个赋值操作符左边防止一个对象字面量：

const object = {
    name: 'Jack',
    age: 18
}

const { name, age } = object
console.log(name) // 'Jack'
console.log(age)  // 18

解构赋值

解构可以应用到变量声明中，同样可以在给变量赋值时使用解构语法：

let object = {
    name: 'Jack',
    age: 18
}
let name = 'Test'
let age = 1
({ name, age } = node)
console.log(name) // 'Jack'
console.log(age)  // age

声明变量name,age时初始化了一个值，然后通过解构赋值的方式，从object对象读取响应的值重新为这两个变量赋值。

注意：一定要用一对小括号包裹解构赋值语句，JS引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号可以将块语句转化为一个表达式。

注意：解构赋值表达式如果为null或者undefined会导致程序抛出错误。任何尝试读取null或undefined属性的行为都会触发运行时错误。

默认值

使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那个这个局部变量会被赋值为undefined。

let object = {
    name: 'Jack',
    age: 18
}
const { name, gender } = object
console.log(name) // 'Jack'
console.log(gender) // undefined

当指定的属性不存在时，可以定义一个默认值，在属性名称后添加一个“=”和相应的默认值即可：

let object = {
    name: 'Jack',
    age: 18
}
const { name, gender = '男' } = object
console.log(name) // 'Jack'
console.log(gender) // '男'

为非同名局部变量赋值

let object = {
    name: 'Jack',
    age: 18
}
let name = 'Jack'
const { name: firstName } = object
console.log(firstName) // 'Jack'

这段代码使用解构赋值来声明变量firstName，变量firstName值为object.name属性的值。[name:firstName]语法作用是获取type属性值并将其赋值给firstName。

为非同名局部变量赋值也可以设置默认值，例如：

let object = {
    name: 'Jack',
    age: 18
}
let name = 'Jack'
const { gender: genderVal = '男'  } = object
console.log(genderVal) // '男'