A002-解构赋值

一、何为解构赋值

如字面意思，也就是 解构 + 赋值。第一步，提取对象中的值。第二步，将提取值赋值给最终变量。

二、常见的解构赋值

1、数组的解构赋值

常见的操作如下：

• 提取任意值
• 提取剩余值
• 设置默认值 ```javascript // 任意值 const [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1 2 3

// 剩余值 const [num, …numArr] = [1, 2, 3] console.log(num, numArr) // 1 [2, 3]

// 解构不成功时，设置默认值 const [name, age = 20] = [‘tom’] console.log(name, age) // tom 20

// 解构成功时，存在值 const [name2, age2 = 20] = [‘tom’, 22] console.log(name2, age2) // tom 22

<a name="K34Te"></a>
### 2、对象的解构赋值
常见的操作如下：
- 提取任意值
- 提取剩余值
- 设置默认值
- 赋值为新变量
```javascript
// 任意值
const { a, b, c } = { a: 1, b: 2, c: 3 }
console.log(a, b, c); // 1 2 3
// 剩余值
const { num, ...rest } = { num: 1, name: 'tom', age: 18 }
console.log(num, rest) // 1 {name: 'tom', age: 18}
// 解构不成功时，设置默认值
const { name, age = 20 } = { name: 'tom' }
console.log(name, age) // tom 20
// 解构成功时，设置默认值
const { name2, age2 = 20 } = { name2: 'tom', age2: 18 }
console.log(name, age2) // tom 18
// 赋值为新变量
const { key: k, val: v } = { key: 'demo', val: 'test' }
console.log(k, v) // demo test
console.log(key) // Uncaught ReferenceError: key is not defined

注意点

1. 对象解构时，需要注意提取的属性值，是否已经声明。如已声明，需要用圆括号把解构赋值的步骤包起来。 ```javascript let n; { n } = { n: 1 }; console.log(n) // Uncaught SyntaxError: Unexpected token ‘=’ // {} 把等号左边的表达式，解释为了代码块。因此，解析到右边时，就会报错

// 正确的写法 let n; ({ n } = { n: 1 }); console.log(n) // 1

<a name="m4W1J"></a>
### 3、字符串的解构赋值
```javascript
// 分割字符串为数组
const [...arr] = 'hello word' // const arr = 'hello word'.split()
console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'd']
// 读取部分字符串
const [idx0, idx1] = 'hello word'.split(' ')
console.log(idx0, idx1) // hello word