解构赋值是JavaScript中改变取值方式的底层机制，支持嵌套、重命名、默认值及函数参数解构，但需防范null/undefined报错、性能开销与默认值陷阱。
解构赋值不是语法糖，它是 JavaScript 中真正改变取值方式的底层机制——你不再需要写 const name = user.name 这类重复属性名的代码，而是直接用模式匹配的方式“拆开”对象。
对象解构的基本写法：变量名必须和属性名一致
最常见错误是以为可以随便起变量名，结果得到 undefined。对象解构默认按属性名映射，const { name, age } = user 要求 user 上必须有 name 和 age 这两个自有属性（不从原型链上找）。
- 如果属性不存在，对应变量值为
undefined - 支持嵌套解构：
const { profile: { city } } = user，但一旦中间某层是null或undefined，会报Cannot destructure property 'xxx' of 'xxx' as it is undefined - 可同时声明并解构：
let { id } = data，无需先let id
重命名变量：用 旧名: 新名 语法
当你要避免命名冲突，或属性名不符合变量命名规范（比如含短横线、数字开头），就必须重命名。这不是可选技巧，而是实际项目里的高频需求。
-
const { first_name: firstName, "user-id": userId } = user—— 注意字符串键必须加引号 - 不能写成
{ first_name as firstName }（那是 TypeScript 的 import 别名语法，JS 不支持） - 重命名后，原属性名不可再访问；未被解构的属性完全忽略
设置默认值：应对 undefined 和缺失字段
默认值只在属性值严格等于 undefined 时生效，null、0、false、空字符串都会被原样赋值。
立即学习“Java免费学习笔记（深入）”；
const { name = "Anonymous", count = 0, tags = [] } = user;
- 默认值支持表达式：
timeout: timeout ?? 5000或id: getId() || 1 - 嵌套解构中设默认值要小心：
{ config: { retry = 3 } = {} } = user—— 必须给中间对象也设默认值，否则config为undefined时会报错 - 函数参数中大量使用：
function connect({ host = "localhost", port = 3000 } = {}) { ... }，注意函数参数默认值本身也要设个空对象兜底
解构时的常见陷阱：null/undefined、循环引用、性能盲区
解构看起来简洁，但隐含运行时风险。它不是静态分析友好的操作，V8 引擎也无法对深层解构做有效优化。
- 解构
null或undefined直接抛TypeError，不像点运算符能静默失败；必须前置校验或用可选链?.配合（但注意?.{}无效，不能混用） - 不要在循环里对大对象反复解构：
arr.map(({ a, b, c }) => ...)看似优雅，实则每次创建新作用域，V8 无法优化掉临时对象开销 - 与展开运算符混用时注意顺序：
{ ...rest, id } = obj是非法语法；正确是const { id, ...rest } = obj，且...rest必须在最后
真正难的不是写出解构语句，而是在接口响应结构不确定、后端字段随时增减、又得兼顾类型安全的场景下，控制好默认值层级和错误边界。这时候一行解构背后，往往要配三行防御性检查。
