对象解构需严守数据边界，null/undefined源值会直接报错；嵌套解构须逐层设默认值或用可选链；默认值仅对undefined生效；解构已声明变量需加括号。
对象解构写起来很爽，但一上线就报错、取到 undefined、甚至直接崩掉——不是语法不对，而是没守住数据边界。核心就一条：解构不是取值快捷键，而是带结构校验的变量绑定操作。
必须处理 null/undefined 源值
解构对象时，若源值是 null 或 undefined，JS 会直接抛出 TypeError，不走默认值逻辑。比如：
-
const { name } = null→ 报错："Cannot destructure property 'name' of 'null' as it is undefined" - 正确做法是先做空值保护：
const { name } = data ?? {}或const { name } = data || {} - 函数参数中更常见，推荐统一用默认参数：
function render({ name = '匿名', age = 0 } = {}) { ... }
嵌套解构要防中间层断裂
像 { user: { profile: { avatar } } } = data 这种写法，只要 data.user 或 data.user.profile 是 undefined，就会立刻报错。
- 安全写法是逐层设默认值：
const { user = {} } = data; const { profile = {} } = user; const { avatar } = profile; - 或用可选链 + 空值合并：
const avatar = data?.user?.profile?.avatar ?? 'default.png'; - ES2024 起支持嵌套默认值语法（需环境支持）：
const { user: { profile: { avatar } = {} } = {} } = data;
默认值只在属性为 undefined 时生效
很多人误以为 null、''、0 也会触发默认值，其实不会。只有严格等于 undefined 才启用。
-
const { count = 10 } = { count: 0 }→count是0，不是10 - 如需“falsy 值兜底”，得手动判断：
const count = data.count ?? 10或const { count } = data; const finalCount = count !== undefined ? count : 10; - 别名+默认值可一起用：
const { total: sum = 0 } = response;
解构已有变量时记得加括号
当你要把解构结果赋给已声明的变量（比如 let name;），直接写 { name } = obj 会语法错误——JS 把花括号当成代码块了。
- 必须加小括号：
({ name } = obj); - 或者改用
var（不推荐）或重新声明：const { name } = obj; - 函数内常踩这个坑，尤其配合
let/const使用时
