如何简化 JavaScript 中的 undefined 值安全访问？

本文介绍如何利用可选链（?.）与空值合并（??）操作符，安全、简洁地访问嵌套 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 安全访问嵌套数据的标准实践。它既保持代码简洁性，又具备强健的容错能力，是构建高可靠性前端应用的必备技能。