解构默认值仅对 undefined 生效，null 不触发；需用 ?? 或 ?. 预处理 null 为 undefined 或空对象后再解构，如 const { user } = data; const { id = 0 } = user ?? {};
当后端接口返回 null 字段时，直接解构会得到 null 或 undefined，导致后续访问属性报错（如 Cannot read property 'xxx' of null）。用解构赋值的默认值可以提前兜底，让代码更健壮、可读性更高。
理解 null 与 undefined 在解构中的区别
null 是一个真实值，不是“假值”意义上的“空”——它不会被默认值覆盖；而 undefined 才会触发默认值。所以如果后端返回 { user: null }，写 const { user = {} } = data 不生效，user 仍是 null。
解决思路：先确保解构目标是 undefined，再利用默认值。常见做法是配合逻辑运算符或空值合并操作符（??）做预处理。
方案一：用空值合并操作符（??）预处理字段
ES2020 引入的 ?? 只在左侧为 null 或 undefined 时取右侧，默认值，语义清晰且安全。
- 适用于单层字段：
const { name, avatar } = { ...data, name: data.name ?? '', avatar: data.avatar ?? '' }; - 嵌套场景更推荐结合解构与
??：const { user } = data; const { id = 0, nickname = '匿名用户' } = user ?? {}; - 注意：不要写成
const { user = {} } = data ?? {}—— 因为data本身不为null，这步无效
方案二：解构 + 默认值 + 空对象保护（最常用）
对可能为 null 的嵌套对象，先用 ?? {} 转为对象，再解构：
const { profile = {} } = data ?? {};const { username = '未知', email = '' } = profile ?? {};- 连写也行：
const { username = '未知', email = '' } = (data?.profile) ?? {};（?.防报错，?? {}兜底null）
方案三：封装工具函数统一处理（适合中大型项目）
避免重复写 ?? {}，可抽象一个安全解构函数：
-
（示例）
const safeDestructure = (obj, defaults) => ({ ...defaults, ...obj }); - 使用：
const user = safeDestructure(data.user, { id: 0, name: '游客' }); - 进阶版支持路径解析（如
'profile.avatar'），可用 Lodash 的get或自研轻量函数
核心原则就一条：解构默认值只对 undefined 生效，所以要把 null 先转成 undefined 或空对象。用好 ?? 和 ?. ，配合一层解构一层兜底，代码既简洁又不易出错。
