什么是可选链操作符（?.）？

在访问深层嵌套的对象属性时，我们常常需要逐级检查中间层级是否存在，否则可能会触发TypeError: Cannot read property 'xxx' of undefined/null的错误。可选链操作符?.是ES2020引入的一个语法糖，它让这种安全检查变得异常简洁和直观。

解决深层属性访问的痛点

在可选链出现之前，我们需要使用冗长的逻辑与&&操作符来确保每一级属性都存在。

const user = {
  profile: {
    name: 'Alice'
  }
};
// 旧的写法
const oldWay = user && user.profile && user.profile.name;

如果对象层级很深，这种写法会变得非常臃肿。可选链操作符优雅地解决了这个问题。

// 使用可选链
const newWay = user?.profile?.name;
console.log(newWay); // 'Alice'

// 如果 user 或 profile 是 null/undefined，表达式会短路，返回 undefined
const missing = user?.profile?.address?.city;
console.log(missing); // undefined，而不会报错

?.操作符的工作原理是：如果?.前面的值是null或undefined，整个表达式会立即短路，返回undefined，而不会继续尝试访问后面的属性。

多种使用场景

除了访问属性，可选链还可以用于安全地调用可能不存在的方法。

const api = {
  fetchData: () => 'data'
};
const result = api.fetchData?.(); // 如果 fetchData 存在则调用
console.log(result); // 'data'

const noMethod = api.someMethod?.(); // 如果 someMethod 不存在，则返回 undefined
console.log(noMethod); // undefined

这对于调用来自第三方或配置对象的方法非常有用，避免因为方法未定义而导致的运行时错误。

在处理数组时，可选链可以安全地访问动态索引。

const arr = [1, 2, 3];
console.log(arr?.[5]); // undefined
console.log(arr?.[0]); // 1

结合空值合并运算符??使用，可以为缺失的值提供一个默认值。

const city = user?.profile?.address?.city ?? '未知城市';
console.log(city); // 如果路径中任何一环缺失，则 city 为 '未知城市'

重要的行为细节

需要明确的是，?.只在它前面的值为null或undefined时才会短路。如果前面的值是其他假值（如空字符串''、数字0或false），操作符仍然会继续尝试访问后续属性。

const obj = { zero: 0 };
console.log(obj.zero?.toString()); // "0"， 因为 obj.zero 是 0，不是 null/undefined

可选链操作符极大地提升了代码的健壮性和可读性，尤其在处理来自API的不可预测数据或复杂的配置对象时。它已经成为现代JavaScript开发中处理属性访问安全性的首选语法。