JavaScript解构赋值支持多层嵌套，可直接提取深层字段并避免空值报错；需用对象/数组混合语法匹配数据结构，中间层级作路径占位符，末级字段生成变量；通过默认值和空对象兜底处理可选层级；支持重命名、数组索引提取及组合写法提升可读性。
JavaScript 解构赋值支持多层嵌套，能直接从深层结构中提取所需字段，避免冗长的点链访问和空值报错。关键在于用对象/数组混合语法精准匹配数据形状，并合理处理可能缺失的层级。
基础嵌套对象解构
当目标对象有层级时，在解构模式中按相同结构书写大括号即可逐层进入：
const user = {
profile: {
name: 'Alice',
contact: { email: 'a@example.com', phone: '123' }
},
settings: { theme: 'dark', notifications: true }
};
// 一层层写进去，直接拿到深层值
const {
profile: {
name,
contact: { email }
},
settings: { theme }
} = user;
console.log(name, email, theme); // 'Alice' 'a@example.com' 'dark'
注意：中间层级（如 profile、contact）只是路径占位符，不声明变量；只有最末级字段（name、email、theme）才会被创建为变量。
处理可选层级与默认值
若某层可能为 undefined 或 null，直接嵌套解构会报错。此时需结合默认值 + 空对象兜底：
立即学习“Java免费学习笔记（深入）”；
- 给中间层级设默认空对象：{ profile: {} }
- 给最终字段设默认值：email = 'no-email'
const {
profile: {
name = 'Anonymous',
contact: { email = 'no-email' } = {}
} = {},
settings: { theme = 'light' } = {}
} = user || {};
// 即使 user 是 null 或缺少 profile/contact，也不会报错
混用数组与对象嵌套
实际数据常含数组（如列表项），可在解构中嵌入方括号提取特定索引或展开：
const data = {
users: [
{ id: 1, info: { role: 'admin' } },
{ id: 2, info: { role: 'user' } }
]
};
// 提取第一个用户的 role，同时保留整个 users 数组
const {
users: [firstUser = {}],
users
} = data;
const { info: { role = 'guest' } = {} } = firstUser;
console.log(role, users.length); // 'admin' 2
重命名 + 嵌套 + 默认值组合写法
灵活组合可读性更强，尤其字段名不理想或需避免冲突时：
- 重命名：用 oldName: newName 语法
- 嵌套路径中重命名：在任意层级使用冒号
- 默认值放在重命名后：顺序是 key: alias = defaultValue
const {
profile: {
name: userName = 'Guest',
contact: { email: userEmail = '' } = {}
} = {},
settings: { theme: uiTheme = 'auto' } = {}
} = user;
console.log(userName, userEmail, uiTheme);
