# 章序号/节序号/节/笔记序号
- Objective：
# 概念阐释
## 语义
**解构赋值**语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。
## 语法
```js
const propertyName = obj.propertyName;
const {propertyName} = obj;
const {nestedProperty} = obj.outerProperty;
```
# 举例子
## 解构Arrays
```js
let cars = ['ferrari','tesla','cadillac'];
let [car1,car2,car3] = cars;
console.log(car1,car2,car3);
```
## 解构对象
```js
let destinations = { x: 'LA', y: 'NYC', z: 'MIA' };
let {x,y,z} = destinations;
```
```js
const vampire = {
name: 'Dracula',
residence: 'Transylvania',
preferences: {
day: 'stay inside',
night: 'satisfy appetite'
}
};
//非解构写法
vampire.residence;
//访问residence属性
const residence = vampire.residence;
const {residence} = vampire;
//访问day属性
const{day} = vampire.preferences;
```
## 解构函数参数
```js
let truck = {
model: '1977 Mustang convertible',
maker: 'Ford',
city: 'Detroit',
year: '1977',
convertible: true
};
const printCarInfo = ({model,maker,city}) => {
console.log(`The ${model}, or ${maker}, is in the city ${city}.`)
}
printCarInfo(truck);//调用对象名称
```
```js
const ObjectInfo = {
firstName = "Ari",
lastName = "Bietkes",
age:34
};
function customerGreeting({firstName,secondName}) {
console.log(`My name is ${firstName}${lastName}.`)
};
//调用函数
customerGreeting(ObjectInfo);
```
# 类比、比较与对比
- 一般情况下[[js objects 对象属性|访问对象]]都是通过`对象名称.属性` 或者`对象名称[属性]`来访问, 称为结构。解构相当于反着写。
- 解构访问对象需要用到变量`const`, 正常访问不需要。
# 问题
- [练习题](https://www.codecademy.com/courses/introduction-to-javascript/lessons/advanced-objects/exercises/destruct-assign)
用非解构的写法，`{functionality}`， `{beep}` 分别print `Beep Boop`。
# 问题答案
因为`{functionality}`相当于`robot.functionality`,所以访问beep可以直接使用`functionality.beep();`
```js
const robot = {
model: '1E78V2',
energyLevel: 100,
//这是一个内嵌对象，但内嵌的内容为方法
functionality: {
beep() {
console.log('Beep Boop');
},
fireLaser() {
console.log('Pew Pew');
},
}
};
robot.functionality.beep();
const {beep} = robot.functionality;
beep();
const {functionality} = robot;
functionality.beep();
```
# 备注（经验集/错误集）
## summary
解决的怎么样？
## 参考资料
[解构赋值-MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)