可选链操作符?.通过三种语法(obj?.prop、obj?.[key]、func?.(args))安全访问嵌套属性或调用函数,任一环节为null/undefined即短路返回undefined,避免报错;配合??可精准设置默认值,但不可赋值、不拦截非null/undefined错误。

用 ?. 就能安全读取深层嵌套属性,只要中间任意一层是 null 或 undefined,整个表达式立刻返回 undefined,不报错、不中断执行。
三种基本写法,对应不同访问场景
可选链不是万能点号,它分三类明确语法,不能混用:
-
属性访问:
obj?.prop—— 适合固定键名,比如user?.profile?.address?.city -
动态键名:
obj?.[key]—— 适合变量作键,比如user?.[field]?.name(field是字符串变量) -
函数调用:
func?.(args)—— 只有func存在且是函数才执行,比如api.getData?.()
为什么比传统写法更可靠
以前常用 && 或三元运算符层层判断,问题不少:
-
user && user.profile && user.profile.address && user.profile.address.city—— 写三遍user.profile,易错且难维护 -
document.querySelector('.elem')?.innerHTML—— 查一次 DOM 就够,不用重复调用 - 嵌套越深,传统写法越容易漏判某一层,一漏就
Cannot read property 'xxx' of undefined
搭配 ?? 设置默认值更精准
?. 负责“不崩”,?? 负责“兜底”,两者配合逻辑清晰:
-
const city = user?.profile?.address?.city ?? '未填写'—— 只有city真是null或undefined才用默认值 - 不用
||,避免把0、false、''这类合法假值误当成空而覆盖
常见误区和限制
可选链很轻便,但有几条硬边界必须注意:
-
不能用于赋值:
obj?.prop = value是语法错误,只支持读取 -
只拦截 null/undefined:如果
user.profile是{ address: null },user?.profile?.address?.city结果是null,不是undefined -
数组索引要写对:
list?.[0]?.name正确,list?[0].name或list?.[0].name(少一个?)都可能出错
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











