JavaScript可选链操作符使用教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript可选链操作符详解教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

可选链操作符?.是用于安全访问深层嵌套属性、可能为空的对象方法及数组索引的语法，遇null/undefined即返回undefined；??则用于null/undefined时的默认值兜底，二者职责分明且常组合使用。

可选链操作符 ?. 不是用来“教你怎么写 JS”的语法糖，而是当你频繁写 obj && obj.user && obj.user.profile && obj.user.profile.name 这类防御性代码时，JS 官方给你的止痛片。

什么时候必须用 ?. 而不是手动判断

核心场景：访问深层嵌套属性、调用可能为 null 或 undefined 的对象方法、读取数组中可能不存在的索引项。

• 你不确定 response.data 是否存在，但想安全取 response.data.items[0].title
• 你调用一个第三方 API，返回结构不稳定，某些字段在灰度阶段才上线
• 你在 React/Vue 中渲染用户头像，但 user.avatar?.url 比 user.avatar && user.avatar.url 更简洁且不会触发额外渲染

?. 和 ?? 到底谁管什么

?. 只负责「安全访问」——遇到 null 或 undefined 就立刻停止并返回 undefined；?? 是「兜底赋值」——只在左侧为 null 或 undefined 时才用右侧值。

它们经常一起用，但职责不重叠：

const title = response?.data?.items?.[0]?.title ?? '暂无标题';

• response?.data?.items?.[0]?.title：整条链只要中间任何一环是 null/undefined，就直接返回 undefined，不会报错
• ?? '暂无标题'：仅当上面整个表达式结果为 undefined（或 null）时，才用默认值
• 注意：?? 不会把 0、false、'' 当作空值处理，而 || 会 —— 这是关键区别

容易踩的坑：这些地方不能用 ?.

?. 只能用于「属性访问」「方法调用」「数组索引」这三种操作，其他地方用了会直接语法报错。

• ❌ 不能用于赋值： obj?.name = 'Alice' → 报错 Invalid left-hand side in assignment
• ❌ 不能用于 delete： delete obj?.name → 报错
• ❌ 不能用于 new： new Constructor?.() → 不合法
• ✅ 正确用法只有这三种：
  • obj?.prop
  • obj?.method()
  • arr?.[index]

真正难的不是记住语法，而是意识到：一旦你开始用 ?.，就得同步检查所有依赖它的逻辑是否能正确处理 undefined —— 比如 ?.length 返回 undefined，传给 Math.max() 就变成 NaN，这种隐性断裂比报错更难调试。

到这里，我们也就讲完了《JavaScript可选链操作符使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！