JavaScript解构赋值是从数组或对象中按模式提取值并赋给变量的语法糖，本质是模式匹配加赋值，不改变原数据、非深拷贝；支持跳过元素、剩余参数收集、默认值及重命名，但不能解构null/undefined。
什么是 JavaScript 解构赋值
解构赋值是 JavaScript 中一种从数组或对象中提取值并赋给变量的语法糖，它不创建新数据结构，只是“拆开”已有结构、把其中的值按模式取出。本质是模式匹配 + 赋值的组合操作，不是深拷贝，也不改变原对象或数组。
怎么用数组解构提取多个值
常见于函数返回多个值、处理 API 响应、交换变量等场景。左侧用方括号 [] 描述要取哪些位置的值，右侧是数组表达式。
- 跳过某些元素：用逗号占位，如
const [a, , c] = [1, 2, 3];→a是1，c是3 - 剩余元素收集：用扩展运算符
...，如const [first, ...rest] = [1, 2, 3, 4];→rest是[2, 3, 4] - 默认值只在对应项为
undefined时生效，null或0不触发，默认值支持表达式，如const [x = Math.random()] = [undefined]; - 不能解构
null或undefined，会报TypeError: Cannot destructure property 'xxx' of 'yyy' as it is undefined.
const arr = ['a', 'b', 'c']; const [first, second, third] = arr; console.log(first); // 'a' const [head, ...tail] = arr; console.log(tail); // ['b', 'c']
怎么用对象解构提取属性值
比 obj.prop 更简洁，尤其适合从嵌套对象、函数参数、配置项中取值。左侧用花括号 {}，键名需与源对象属性名一致（或使用别名）。
- 属性名必须完全匹配（区分大小写），不存在则得到
undefined，不会报错，除非你访问了undefined.xxx - 重命名用
oldName: newName语法，如const { name: fullName } = user; - 嵌套解构需保持结构一致：
const { address: { city, zip } } = person;，若address是undefined，会直接报错 - 函数参数可直接解构：
function greet({ name, age }) { return `Hi ${name}, ${age}`; }，调用时传对象即可
const user = { id: 101, name: 'Alice', role: 'admin' };
const { id, name, role } = user;
console.log(name); // 'Alice'
const { name: fullName, role: userRole } = user;
console.log(fullName); // 'Alice'
解构时容易忽略的坑
解构看着简单，但几个边界行为常导致隐性 bug：
立即学习“Java免费学习笔记（深入）”；
-
let/const声明必须出现在解构左侧，不能单独写{ a, b } = obj;（会解析为代码块），得加括号：({ a, b } = obj); - 解构赋值不等于声明，已声明变量再解构需用括号包裹整个赋值表达式
- 对象解构对
getter属性有效，但不会触发 setter；对Symbol属性需显式写出Symbol键 - 性能上无额外开销，但过度嵌套解构（如四层以上）会降低可读性，也增加出错概率
真正省代码的地方，是避免重复写 obj.x、obj.y、obj.z —— 但前提是结构稳定。如果源对象字段经常变动或存在不确定性，硬解构反而让错误更隐蔽。
