JavaScript：ES6：解构赋值-马育民老师

# 介绍

解构赋值（Destructuring Assignment）是 ES6 核心语法，允许**快速从数组、对象、函数参数、嵌套结构**中提取值，简化变量声明、传参、交换变量等场景。

分为两大体系：**数组解构**、**对象解构**，额外扩展字符串、函数参数、嵌套、默认值、剩余运算符等用法。

# 对象解构（最常用）

**匹配 key，与顺序无关**

### 1. 基础语法
左侧 `{}` 写属性名，自动匹配对象同名 key，顺序不影响结果
```js
const user = { name: "张三", age: 20 };
const { name, age } = user;
console.log(name, age); // 张三 20
```

### 2. 重命名：原Key : 新变量名
```js
const user = { name: "李四", age: 18 };
// name → username，age保持原名
const { name: username, age } = user;
console.log(username, age); // 李四 18
```

### 3. 默认值 + 重命名组合
仅属性不存在/值为 `undefined` 生效
```js
const user = { name: "王五" };
// 重命名 + 默认年龄
const { name: uname, age = 25 } = user;
console.log(uname, age); // 王五 25
```

### 4. 单独解构已有变量（必须加括号）
直接 `{name} = obj` 会被识别为代码块，语法报错
```js
let uname;
const user = { name: "赵六" };
// 正确写法：外层()包裹
({ name: uname } = user);
console.log(uname); // 赵六
```

### 5. 剩余运算符 `...rest` 收集剩余属性
```js
const info = { a: 1, b: 2, c: 3 };
const { a, ...other } = info;
console.log(other); // {b:2, c:3}
```

# 数组解构
### 1. 基础语法
左侧用 `[]` 匹配右侧数组下标顺序赋值，**顺序决定取值**。
```js
const arr = [10, 20, 30];
// 完整解构
const [a, b, c] = arr;
console.log(a, b, c); // 10 20 30

// 只取前两个
const [x, y] = arr;
console.log(x, y); // 10 20
```

### 2. 跳过元素（空位）
逗号占位跳过不需要的值
```js
const arr = [1, 2, 3, 4];
const [first, , third] = arr;
console.log(first, third); // 1 3
```

### 3. 剩余运算符 `...rest`（必须放最后）
收集剩余所有元素，生成新数组
```js
const arr = [10, 20, 30, 40];
const [n1, n2, ...rest] = arr;
console.log(n1, n2); // 10 20
console.log(rest); // [30, 40]
```

### 4. 默认值
当对应位置值为 `undefined` 时，启用默认值；`null/0/''` 不会触发
```js
const arr = [10, undefined];
const [a = 0, b = 50] = arr;
console.log(a, b); // 10 50

// null不触发默认值
const [c = 100] = [null];
console.log(c); // null
```

### 5. 交换变量（经典用法，无需临时变量）
```js
let m = 1, n = 2;
[m, n] = [n, m];
console.log(m, n); // 2 1
```

### 6. 函数返回数组快速拆解
```js
function getPos() {
  return [100, 200];
}
const [x, y] = getPos();
```

# 嵌套解构（数组+对象混合层级）
### 1. 嵌套对象
```js
const data = {
  user: {
    id: 1,
    info: { height: 180 }
  }
};
// 逐层匹配结构
const { user: { info: { height } } } = data;
console.log(height); // 180

// 嵌套+重命名+默认值
const { user: { info: { weight = 70 } } } = data;
console.log(weight); //70
```

### 2. 对象套数组
```js
const res = { list: [10, 20, 30] };
const { list: [first, second] } = res;
console.log(first, second); // 10 20
```

### 3. 数组套对象
```js
const arr = [{ title: "JS" }, { title: "Vue" }];
const [{ title: book1 }, { title: book2 }] = arr;
console.log(book1, book2); // JS Vue
```

# 函数参数解构（开发高频场景）
### 1. 对象参数解构（替代传统 options 取值）
```js
// 传统写法
function showUser(opt) {
  const name = opt.name;
  const age = opt.age || 18;
}

// 解构简化，直接在参数层提取
function showUser({ name, age = 18 }) {
  console.log(name, age);
}
showUser({ name: "小明" }); // 小明 18
```

### 2. 参数解构 + 重命名
```js
function print({ name: username }) {
  console.log(username);
}
print({ name: "小红" });
```

### 3. 兜底空对象（防止不传参报错）
如果调用时不传参数，`{}` 解构 `undefined` 会报错，设置默认空对象
```js
// 安全写法：参数默认 = {}
function getUser({ name = "匿名" } = {}) {
  console.log(name);
}
getUser(); // 匿名（不传参不报错）
```

### 4. 数组参数解构
```js
function sum([a, b]) {
  return a + b;
}
sum([10, 20]); // 30
```

# 字符串、Map、Set 解构
### 1. 字符串解构（字符串可迭代，按字符拆分）
```js
const str = "abc";
const [s1, s2] = str;
console.log(s1, s2); // a b
```

### 2. Map 解构
```js
const map = new Map([["name", "老王"], ["age", 30]]);
// 遍历解构
for (const [key, val] of map) {
  console.log(key, val);
}
```

# 解构常见边界与坑
1. **默认值仅对 `undefined` 生效**
`null、0、''、false` 都会直接使用原值，不会取默认值
```js
const [a = 10] = [0];
console.log(a); // 0
```

2. **剩余运算符 `...rest` 只能放在最后**
```js
// 报错：Rest element must be last element
const [ ...r, a ] = [1,2,3];
```

3. **解构 `null / undefined` 直接报错**
数组/对象解构的右侧不能是 `null/undefined`
```js
const { name } = null; // Uncaught TypeError
```

4. **对象解构无顺序，数组解构严格按下标顺序**
5. **const / let / var 均可解构，常量解构后不能重新赋值**
```js
const [a] = [10];
a = 20; // 报错，常量不可修改
```

# 实用开发场景汇总
1. 接口返回数据快速提取字段
```js
const apiRes = { code: 200, data: { list: [], total: 100 } };
const { code, data: { list, total } } = apiRes;
```

2. 函数配置参数简化

3. 数组交换两个变量

4. 批量导入模块
```js
import { ref, reactive } from "vue";
```

5. 对象浅拷贝（剩余运算符）
```js
const obj = {a:1,b:2};
const copy = {...obj};
```

6. 循环遍历数组对象快速取值
```js
const users = [{name:"A"}, {name:"B"}];
for(const {name} of users){}
```

原文出处：http://malaoshi.top/show_1GW3iBxuu3Wo.html