【JavaScript】对象解构

对象解构是ES6中新增的语法，可以在一条语句中使用嵌套数据实现一个或多个赋值操作。
简单说，对象解构就是使用与对象匹配的解构来实现对象属性赋值。

不使用对象解构

先看一个不使用对象解构的例子

let person = {
    name: 'Hygen',
    age: 15
}
let personName = person.name
let personAge = person.age

console.log(personName) // Hygen
console.log(personAge) // 15

将person中的name和age分别赋值给personName和personAge。

使用对象解构

接下来看使用对象解构的例子

let person = {
    name: 'Hygen',
    age: 15
}

let { name: personName, age: personAge } = person

console.log(personName) // Hygen
console.log(personAge) // 15

在这里将name赋值给personName，age赋值给personAge，如果想让变量直接使用属性名称，也可以使用简写语法：

let person = {
    name: 'Hygen',
    age: 15
}

// let {name, age} = person
let { personName, age } = person

console.log(personName) // undefined
console.log(age) // 15

正确写法应该是注释中的代码，personName是person中没有定义的变量，因此它的输出为undefined
如果想在解构时引用当前对象不存在的属性，也可以在解构赋值的同时定义不存在属性的默认值：

let person = {
    name: 'Hygen',
    age: 15
}

let { personName = 'Elendeer', age } = person

console.log(personName) // Elendeer
console.log(age) // 15

解构在内部使用函数ToObject()把源数据结构转换为对象，在对象解构的上下文中，原始值会被当成对象，也就是说null和undefined不能被解构。
解构也并不要求变量必须在解构表达式中声明。但是如果是给事先声明的变量赋值，那么赋值表达式必须包含在一对括号中：

let personName, personAge
let person = {
    name: 'Hygen',
    age: 15
};

({ name: personName, age: personAge } = person)

console.log(personName) // Hygen
console.log(personAge) // 15

对象解构还有许多其它用法，如嵌套解构，部分解构和参数上下文匹配等，但是整体来说都只是上面用法的拓展延伸。