可选链操作符(?.)是防止“Cannot read property”错误的核心机制,用于安全访问可能为null/undefined的嵌套属性、方法或索引,但不可用于赋值或独立表达式,需配合??而非||做兜底。

可选链操作符(?.)不是语法糖,而是防止 TypeError: Cannot read property 'x' of null/undefined 的核心防护机制。
什么时候必须用 ?. 而不是手动判断
当你访问深层嵌套属性、且中间任意一层可能为 null 或 undefined 时,?. 能避免短路崩溃。手动写 obj && obj.a && obj.a.b && obj.a.b.c 不仅冗长,还容易漏判某一层(比如忘了检查 a 是否存在)。
常见场景包括:
• API 返回的嵌套响应数据(如 res?.data?.user?.profile?.avatar)
• DOM 查询结果(document.querySelector('.foo')?.textContent)
• React/Vue 中的 props 链式访问(props.user?.settings?.theme)
?. 和 ?? 经常一起用但职责不同
?. 控制「访问是否继续」,?? 控制「取不到值时用什么兜底」。两者互补,但不能互相替代:
立即学习“Java免费学习笔记(深入)”;
-
obj?.a?.b ?? 'default':先安全访问b,若最终结果是null或undefined,才用'default' -
obj?.a?.b || 'fallback'错误:如果b是0、false或'',也会触发 fallback,语义不对 -
obj?.a?.b?.():支持方法调用,但如果b不是函数,不会报错,直接返回undefined
这些地方不能用 ?.,用了会报语法错误
?. 只能用于属性访问、方法调用、可选索引(?[index]),不能用于赋值、声明或作为独立表达式:
- ❌
obj?.a = 123(赋值左侧不支持) - ❌
let x = ?.(无左值,语法错误) - ❌
obj?.[key1]?.[key2]中,key1或key2本身不能是null/undefined(可选链不保护 key 值,只保护对象本身) - ⚠️
arr?.[0]?.prop:如果arr是null,没问题;但如果arr是数组但arr[0]是undefined,后续.prop仍安全
真正容易被忽略的是:可选链在严格模式下不会静默吞掉所有错误——如果访问的是一个非对象类型(比如数字)的属性,123?.toString 合法,但 123?.nonexistent 返回 undefined,而 123.nonexistent 本来也返回 undefined;但一旦涉及原型链或 getter,行为可能和直觉不符。别把它当成万能防错开关,关键路径该加类型守卫还得加。











