本文详解如何在 JavaScript 嵌套解构中为中间层级（如 form）安全设置默认空对象 {}，避免因 undefined 或 null 导致的 TypeError，并提供可直接复用的语法模式与实战示例。
本文详解如何在 javascript 嵌套解构中为中间层级（如 `form`）安全设置默认空对象 `{}`，避免因 `undefined` 或 `null` 导致的 typeerror，并提供可直接复用的语法模式与实战示例。
在 JavaScript 解构赋值中，若需从深层嵌套对象（例如 obj.form.data）提取属性，而中间层级（如 form）可能为 undefined 或 null，直接使用 const { form: { data } } = obj 会抛出 TypeError: Cannot destructure property 'data' of 'undefined'。此时，必须为中间对象层级显式声明默认值——但语法有严格要求：默认值需紧邻该层级的解构模式之后，而非置于别名或路径中。
✅ 正确语法结构如下：
const { form: { data = {} } = {} } = obj;- form: { data = {} } 表示：从 form 对象中解构 data，并为其设置默认值 {}；
- = {} 紧跟在 form: 后的花括号 { data = {} } 之后，即为 form 本身设置默认空对象 —— 这是关键！
- 整体含义：若 obj.form 为 undefined 或 null，则用 {} 替代 form，再从中安全解构 data（若 form 存在但无 data 属性，则 data 取默认 {}）。
? 完整可运行示例：
const getData = (object) => {
const { form: { data = {} } = {} } = object;
return data;
};
console.log(getData({})); // → {}
console.log(getData({ form: {} })); // → {}
console.log(getData({ form: { data: { foo: 42 } } })); // → { foo: 42 }
console.log(getData({ form: null })); // → {}（因 `null` 被 `= {}` 覆盖）⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- ❌ 错误写法：const { (form = {}) : { data } } = obj —— 括号包裹 + = 在冒号前不符合解构语法，会报 SyntaxError；
- ❌ 不支持 form?.data 式可选链参与解构（ES2020 可选链不能用于左侧赋值）；
- ✅ 若需处理 null，默认值 = {} 依然生效（因 null 在解构中被视作“falsy”，触发默认值）；
- ? 多层嵌套同理：{ a: { b: { c = 0 } = {} } = {} } = obj —— 每级对象后紧跟 = {}，最内层属性后加 = defaultValue。
掌握这一模式，可显著提升配置解析、API 响应处理等场景下的健壮性，无需额外 ?. 判断或 || 运算符，代码更简洁、语义更清晰。
