JS 解构赋值语法

解构赋值的语法规则其实不复杂，但它的灵活性很高，所以初学者容易混淆。

---

1. 基本概念

解构赋值（Destructuring Assignment）是 ES6 引入的一种语法，用于从数组或对象中提取值，并赋给变量。
语法上，它是赋值表达式的一种特殊形式，左边是“解构模式”，右边是“数据源”。

<解构模式> = <数据源>

• 解构模式：数组模式 [ ... ] 或对象模式 { ... }，可以嵌套、使用默认值、重命名等。
• 数据源：必须是一个可迭代对象（数组解构）或普通对象（对象解构）。

---

2. 对象解构规则

2.1 按属性名匹配

对象解构是 按属性名 取值的：

const obj = { a: 1, b: 2 };
const { a, b } = obj; // a=1, b=2

2.2 属性不存在 → undefined

const { c } = obj; // c = undefined

2.3 设置默认值

const { a = 10, c = 5 } = obj; // a=1, c=5

2.4 重命名变量

const { a: x, b: y } = obj; // x=1, y=2

注意：冒号 : 左边是属性名，右边是变量名。

2.5 嵌套解构

const user = { info: { name: 'Alice', age: 25 } };
const { info: { name } } = user; // name = 'Alice'

注意：info 只是匹配路径，不会变成变量。

---

3. 数组解构规则

3.1 按位置匹配

数组解构是 按索引位置 取值：

const arr = [10, 20, 30];
const [first, second] = arr; // first=10, second=20

3.2 跳过元素

const [ , , third] = arr; // third = 30

3.3 默认值

const [a, b = 5] = [1]; // a=1, b=5

3.4 剩余元素

const [head, ...rest] = [1, 2, 3, 4]; // head=1, rest=[2,3,4]

3.5 嵌套解构

const arr2 = [1, [2, 3]];
const [x, [y, z]] = arr2; // x=1, y=2, z=3

---

4. 混合解构

数组和对象可以嵌套使用：

const data = { list: [ { id: 1, name: 'Pen' }, { id: 2, name: 'Book' } ] };
const { list: [ firstItem ] } = data;
// firstItem = { id: 1, name: 'Pen' }

---

5. 函数参数解构

直接在函数参数位置进行解构：

function greet({ name, age = 18 }) {console.log(name, age);
}
greet({ name: 'Alice' }); // Alice 18

---

6. 注意事项

1. 解构模式必须在赋值表达式的左侧

   const { a } = { a: 1 }; // ✅
   { a } = { a: 1 };       // ❌（被当作块语句）
   ({ a } = { a: 1 });     // ✅（用括号包裹）
   

2. 数组解构数据源必须可迭代
   否则会报错：

   const [a] = null; // ❌ TypeError
   

3. 对象解构是按属性名匹配，顺序无关；数组解构是按索引匹配，顺序相关