可选链操作符(?.)用于安全访问嵌套属性、方法或数组索引,遇 null 或 undefined 时自动短路返回 undefined,避免报错;常与空值合并操作符(??)配合提供默认值。

可选链操作符(?.)是 JavaScript 中用于安全访问嵌套对象属性的语法糖,它能在访问过程中遇到 null 或 undefined 时自动停止并返回 undefined,而不是抛出错误。
它解决什么问题
在没有可选链之前,访问类似 user.profile.address.city 这样的深层属性,必须层层检查是否为 null 或 undefined,否则一碰到中间某个值为空就会报错:Cannot read property 'address' of undefined。
用传统方式写,得这样兜底:
const city = user && user.profile && user.profile.address && user.profile.address.city;
怎么用可选链操作符
只需在可能为空的对象后加 ?.,它会“短路”:一旦左侧求值为 null 或 undefined,整个表达式立刻返回 undefined,不再继续访问。
立即学习“Java免费学习笔记(深入)”;
-
user?.profile?.address?.city—— 安全读取嵌套属性 -
obj?.method?.()—— 安全调用方法(先检查方法是否存在,再调用) -
arr?.[index]—— 安全访问数组索引(如list?.[0]?.name)
注意边界情况
可选链只对 null 和 undefined 短路,其他假值(如 false、0、空字符串)不会中断。
它不能替代逻辑判断,比如:
-
user?.name || '匿名'是常见搭配,用于提供默认值 -
user?.profile?.address?.toString()如果address是null,不会报错,但结果是undefined;如果想确保调用toString,得确认address存在且有该方法
和空值合并操作符(??)配合使用
可选链常和 ?? 搭配,让默认值更清晰:
const city = user?.profile?.address?.city ?? '未知城市';
这里 ?. 防止报错,?? 提供兜底值,语义明确、不易出错。
基本上就这些。它不复杂,但容易忽略——尤其在处理 API 返回的不确定结构时,一个 ?. 就能省掉一堆防御性代码。











