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. 注意事项
-
解构模式必须在赋值表达式的左侧
const { a } = { a: 1 }; // ✅ { a } = { a: 1 }; // ❌（被当作块语句） ({ a } = { a: 1 }); // ✅（用括号包裹） -
数组解构数据源必须可迭代
否则会报错：const [a] = null; // ❌ TypeError -
对象解构是按属性名匹配，顺序无关；数组解构是按索引匹配，顺序相关