本文介绍如何利用可选链（?.）与空值合并（??）操作符，安全、简洁地访问嵌套 json 对象中可能为 undefined 或缺失的属性，避免运行时错误，并替代冗长的多层条件判断。
本文介绍如何利用可选链（?.）与空值合并（??）操作符，安全、简洁地访问嵌套 json 对象中可能为 undefined 或缺失的属性，避免运行时错误，并替代冗长的多层条件判断。
在处理深层嵌套的 JSON 数据（如 API 响应）时，传统方式常需层层校验 obj && obj.a && obj.a.b && obj.a.b.c，不仅代码冗长，还容易遗漏边界情况（例如空数组 [] 本身非 null/undefined，但 arr[0] 为 undefined）。而你遇到的问题正体现了这一痛点：body?.data?.names[0]?.firstName 在 names 为空数组时不会报错，但会返回 undefined——此时若需默认值或进一步逻辑判断，仍需额外处理。
✅ 推荐解法：可选链 + 空值合并双操作符组合
// ✅ 安全、简洁、一行解决 const firstName = data?.body?.data?.names?.[0]?.firstName ?? 'Unknown';
该表达式含义如下：
- ?.（可选链）确保每一步访问都“短路”：任一环节为 null 或 undefined，整个链立即返回 undefined，不会抛出错误；
- ?.[0] 显式对数组使用可选索引访问（注意语法：?.[index] 而非 ?[index]），可安全处理空数组或 names: undefined；
- ??（空值合并）仅在左侧为 null 或 undefined 时返回右侧默认值（'Unknown'），区别于 ||（会误将 ''、0、false 等 falsy 值替换）。
? 实际示例对比：
立即学习“Java免费学习笔记（深入）”；
const data = {
body: {
data: {
names: [{ firstName: 'John' }, { firstName: 'Johnn' }]
}
}
};
const dataWithoutNames = {
body: { data: {} }
};
const dataWithEmptyNames = {
body: { data: { names: [] } }
};
// 所有场景均安全返回预期值
console.log(data?.body?.data?.names?.[0]?.firstName ?? 'N/A'); // 'John'
console.log(dataWithoutNames?.body?.data?.names?.[0]?.firstName ?? 'N/A'); // 'N/A'
console.log(dataWithEmptyNames?.body?.data?.names?.[0]?.firstName ?? 'N/A'); // 'N/A'⚠️ 注意事项：
- 浏览器兼容性：需支持 ES2020（Chrome 80+、Firefox 74+、Safari 13.1+；Node.js ≥ 14.0）；旧环境请配合 Babel（@babel/plugin-proposal-optional-chaining + @babel/plugin-proposal-nullish-coalescing-operator）；
- ?. 不适用于普通函数调用前的 this 绑定校验（如 obj?.method() 中 obj 为 null 时不会调用 method，但无法保证 method 自身存在）；
- 数组索引必须显式写作 ?.[i]，?.i 是访问属性而非索引，二者语义不同；
- 若需获取整个数组（而非首项），且允许空数组，直接 data?.body?.data?.names ?? [] 即可。
? 进阶技巧：结合解构与默认值
当需提取多个字段时，可封装为工具函数或使用解构默认值提升可读性：
const { names = [] } = data?.body?.data ?? {};
const firstName = names[0]?.firstName ?? 'Anonymous';总结：放弃繁琐的手动 if 校验，拥抱 ?. 与 ?? 是现代 JavaScript 安全访问嵌套数据的标准实践。它既保持代码简洁性，又具备强健的容错能力，是构建高可靠性前端应用的必备技能。
