解构默认值仅对undefined生效，需用||{}兜底防报错；处理null需??或归一化；嵌套解构须为中间层设默认空对象；函数属性推荐赋空箭头函数兜底。
直接在解构表达式中用 = 为属性指定默认值，是最常用也最有效的防 undefined 手段。但关键在于：默认值只在对应属性值严格等于 undefined 时生效，对 null、0、false、空字符串等“falsy”值无效。
基础写法：对象解构 + 默认值
必须确保解构源本身不是 null 或 undefined，否则会直接报错 “Cannot destructure property of undefined”。所以通常要先兜底：
const { name = '匿名', age = 18 } = userData || {};- 如果
userData是null或undefined，||{}提供空对象，解构才安全 - 若
userData.name是undefined，name取默认值；若是null或' '，仍取原值
处理 null 的场景：先归一化再解构
接口常返回 null 字段（如 avatar: null），这时仅靠默认值不够。需提前把 null 转成期望的默认态：
- 用空值合并操作符：
const { avatar } = { ...userData, avatar: userData?.avatar ?? '/default.png' }; - 或一步到位：
const { avatar = '/default.png' } = (userData && typeof userData === 'object') ? userData : {}; - 更稳妥可封装工具函数统一清洗，避免每处重复判断
嵌套解构：每层都要设默认空对象
深层字段解构容易因中间层缺失而失败。例如想取 user.profile.avatar，不能只给最后一层设默认值：
- ❌ 错误：
const { profile: { avatar = '/default.png' } } = user;（若user.profile是undefined，直接报错） - ✅ 正确：
const { profile = {} } = user; const { avatar = '/default.png' } = profile; - 或一行写法：
const { profile: { avatar = '/default.png' } = {} } = user || {};（注意= {}在嵌套解构的中间层）
函数类型属性：推荐用空箭头函数兜底
对于回调类字段（如 onClick、onSuccess），设默认空函数能避免调用时报错：
const { onClick = () => {}, onSuccess = () => {} } = props || {};- 后续可直接写
onClick()或onSuccess(data)，无需每次判空 - 注意：空函数虽安全，但大量使用可能掩盖逻辑缺失，建议配合 TypeScript 类型或文档说明预期行为
