js可选链操作符?.

2026-05-12 15:00:26 1359阅读 0评论

别再堆叠 && 判断了，JS 可选链 ?. 才是救命的糖

做前端开发久了，谁没被 Cannot read property of 'xxx' of undefined 这条报错支配过恐惧？尤其是面对后端传来结构不稳定的 JSON 数据时，我们习惯性地开始写“防御性代码”。

const city = user && user.profile && user.profile.address && user.profile.address.city;

这段代码逻辑没错，但可读性简直灾难。一旦嵌套层级深一点，维护起来就像在走迷宫。好在 ES2020 引入了可选链操作符 ?.，它允许你在读取深层对象属性时，不必担心中间某个环节是 null 或 undefined，直接短路返回 undefined，而不是让程序崩溃。

从冗长到优雅的转变

使用 ?. 之后，上面的写法瞬间变得清爽：

const city = user?.profile?.address?.city;

这不仅仅是少敲了几次键。核心在于它将“判空”的逻辑内嵌到了语法层面。如果 user 不存在，整个表达式立即停止求值并返回 undefined，后续的属性访问根本不会执行。这种机制彻底消除了因中途断链导致的运行时错误，让业务逻辑回归到“获取数据”本身，而不是“防止崩溃”。

不止是属性访问，还能调用函数

很多人知道可选链能取值，却忽略了它在方法调用上的威力。当你要调用一个可能不存在的函数时，传统的写法往往很狼狈：

if (callback && typeof callback === 'function') {
  callback();
}

换成可选链后，只需一行：

callback?.();

如果 callback 存在且可调，它就执行；如果不存或者不是函数，整个语句静默失败，不会抛出异常。这在处理第三方插件回调或动态注册的事件监听器时，简直是救命稻草。此外，配合数组索引使用也完全没问题，比如 list[0]?.name，即便 list 为空或第一个元素不存在，也能安全地拿到结果。

黄金搭档：?+ 空值合并运算符

单独的 ?. 虽然解决了报错问题，但它返回的永远是 undefined。很多时候我们需要一个默认值，这时候空值合并运算符 ?? 就该登场了。这两个家伙组合在一起，构成了现代 JS 处理数据的标准范式。

const name = user?.profile?.name ?? '匿名用户';

这里有个细节需要注意：?? 只会在左侧值为 null 或 undefined 时才取右侧默认值，而不会把 0 或空字符串 '' 当作假值处理。相比旧时代的 ||，这种组合更加精准。试想，如果用户名字叫“无名氏”，用 || 可能会误判为假值从而触发默认名，但 ?? 会忠实保留真实数据。