可选链操作符?.通过三种语法（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
搭配 ?? 设置默认值更精准
?. 负责“不崩”，?? 负责“兜底”，两者配合逻辑清晰：
立即学习“Java免费学习笔记（深入）”；
-
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（少一个?）都可能出错
