嵌套解构失败时子属性默认值不生效，因解构逐层匹配，上层为undefined/null则下层不执行；必须为每一级中间对象显式设默认空对象（如info = {}, profile = {}）才能兜底。
嵌套解构失败时，子属性默认值不会自动生效——因为解构是“逐层匹配”的，上层结构缺失（比如 undefined 或 null），下层根本不会进入解构流程，自然跳过所有子级默认值。要真正兜住深层属性，必须为**每一级中间对象**显式设置默认值。
必须给每层中间对象设默认空对象
这是最核心、最容易被忽略的一点。例如：
const user = {
info: {
profile: {
name: 'Alice'
}
}
};
如果直接写：
const { info: { profile: { name = 'Anonymous' } } } = user;
✅ 没问题；但若 user.info 是 undefined，这行代码会直接报错：Cannot destructure property 'profile' of 'undefined'。
正确做法是：为 info 和 profile 都提供默认空对象：
-
const { info = {} } = user;→ 确保info不是undefined -
const { info = {} } = user; const { profile = {} } = info;→ 分步更清晰 - 或一行嵌套写法：
const { info = {}, info: { profile = {} } = {} } = user; - 最终提取：
const { info = {}, info: { profile = {} } = {}, profile: { name = 'Anonymous' } = {} } = user;
函数参数中嵌套解构的默认值写法
在函数定义里，同样需要分层兜底。常见错误写法：
function render({ data: { title, content } }) { ... }
❌ 一旦 data 不存在，直接崩溃。
✅ 推荐写法（带完整兜底）：
-
function render({ data = {} } = {}) {→ 外层参数和data都设默认值 const { title = 'No title', content = '' } = data;// 使用 title / content
或者更紧凑的一行解构（需注意括号和等号位置）：
function render({ data = {} } = {}) {
const { title = 'No title', content = '' } = data;
}
用空对象兜底 + 可选链（现代补充方案）
ES2020 引入可选链（?.），虽不属于解构语法，但在兜底场景中常与解构配合使用：
- 先用解构提取顶层安全对象：
const { config = {} } = options; - 再用可选链取深层值：
const timeout = config?.api?.timeout ?? 5000; - 这样既避免了解构层级爆炸，又保持了语义清晰和运行安全
嵌套数组+对象混合结构的兜底技巧
例如数据形如：{ items: [{ id: 1, meta: { tag: 'new' } }] }，想安全取第一个 item 的 tag：
- 错误：
const { items: [{ meta: { tag } }] } = data;→items为空就报错 - 正确：
const { items = [] } = data;→ 兜住数组 - 再解构第一项：
const [firstItem = {}] = items; - 再兜
meta：const { meta = {} } = firstItem; - 最后取值：
const { tag = 'default' } = meta;
也可以合并成一行（注意括号嵌套）：
const { items = [] } = data;
const [{ meta = {} } = {}] = items;
const { tag = 'default' } = meta;
嵌套解构不是“越深越酷”，而是越深越需要主动防御。关键不在最后一层设默认值，而在于让每一层都有“落地垫”。
