JavaScript解构赋值是从数组或对象中提取值并赋给变量的简洁语法，支持跳过、默认值、剩余元素、重命名、嵌套及函数参数解构，提升代码可读性与健壮性。
JavaScript解构赋值是一种从数组或对象中提取值并赋给变量的简洁语法，它让代码更清晰、更少冗余，尤其在处理函数返回值、配置项、API响应等场景时非常实用。
数组解构：按位置取值，支持跳过、默认值和剩余元素
数组解构依据元素索引顺序匹配，左侧用方括号，右侧是可迭代对象（如数组）。
- 基础用法：const [a, b] = [1, 2]; → a=1，b=2
- 跳过某项：const [, , c] = [1, 2, 3]; → c=3（忽略前两个）
- 设置默认值：const [x = 10, y = 20] = [5]; → x=5，y=20（y未提供，取默认）
- 获取剩余元素：const [first, ...rest] = [1, 2, 3, 4]; → first=1，rest=[2,3,4]
- 交换变量无需临时变量：[a, b] = [b, a];
对象解构：按属性名取值，支持重命名、默认值和嵌套解构
对象解构依据属性名匹配，左侧用花括号，右侧是对象。属性名必须一致，否则得到undefined（除非设默认值）。
- 基础用法：const { name, age } = { name: 'Alice', age: 30 };
- 重命名变量：const { name: fullName, age: years } = user; → 把name赋给fullName
- 设置默认值：const { city = 'Beijing' } = user; → 若user无city，city='Beijing'
- 嵌套解构：const { profile: { email, address: { zip } } } = data; → 直接取深层字段
- 解构函数参数：function greet({ name = 'Guest', level = 'user' }) { ... } → 调用时传对象即可
实用技巧与注意事项
解构不只是语法糖，用对了能显著提升可读性和健壮性。
立即学习“Java免费学习笔记（深入）”；
- 解构时右侧必须是“可解构的值”（null/undefined会报错），可用逻辑运算符兜底：const { id } = data || {};
- 结合展开运算符实现浅拷贝或合并：const newConfig = { ...defaultConfig, ...userConfig };
- 函数返回多个值？直接用数组解构：const [err, result] = await apiCall();
- 避免过度嵌套解构——太深会降低可维护性，必要时拆成多步或加类型检查
常见误区提醒
初学者容易踩的几个坑：
- 对象解构不看顺序，只看属性名；数组解构严格依赖位置
- 解构赋值语句不能以{开头（会被解析为代码块），需加括号：({ a } = obj);
- 默认值只有在对应属性值为undefined时才生效，null不会触发默认值
- 解构不会修改原数组或对象，它是“读取”，不是“赋值操作”
