17370845950

可选链操作符?.是用于安全访问深层嵌套属性、可能为空的对象方法及数组索引的语法，遇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，这种隐性断裂比报错更难调试。