JavaScript 可选链操作符 (?.) 完全指南#

1. 访问深度嵌套的对象属性#

这是最常见和最能体现其价值的场景。当你需要访问一个可能在任何层级中断的属性链时。

const user = {
  id: 1,
  // address: { street: '123 Main St', city: 'Anytown' } // address 可能不存在
};

// 旧方法
const cityOld = user && user.address && user.address.city;

// 使用可选链
const cityNew = user?.address?.city; // 如果 user.address 不存在，cityNew 会是 undefined
console.log(cityNew); // undefined

2. 有条件地调用方法#

如果一个对象可能不存在，或者对象上的某个方法可能不存在，可以使用可选链来安全地尝试调用它。

const service = {
  // fetchData: () => console.log('Data fetched!') // fetchData 方法可能不存在
};

service.fetchData?.(); // 如果 fetchData 存在则调用，否则什么也不做 (不会报错)

const user = {
    // getName: () => 'Alice'
};
const username = user.getName?.(); // 如果 getName 方法存在，则调用并赋值，否则 username 为 undefined
console.log(username); // undefined

3. 访问可能不存在的数组元素#

结合可选链和方括号表示法，可以安全地访问数组元素，前提是数组本身也可能为 null 或 undefined。

const data = {
  // items: ['apple', 'banana'] // items 数组可能不存在
};

const firstItem = data?.items?.[0];
console.log(firstItem); // undefined

4. 处理不确定的 API 响应#

API 返回的数据结构可能并不总是完整的，可选链非常适合处理这种情况。

async function getUserProfile(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();
  // API 可能返回 { user: { profile: { avatar: 'url' } } }
  // 或 { user: null }
  // 或 {}
  const avatarUrl = data?.user?.profile?.avatar;
  return avatarUrl || 'default_avatar.png';
}

1. 不要掩盖本应存在的错误#

如果某个属性或对象在你的应用逻辑中必须存在，而它却不存在，这通常是一个错误。使用可选链会使这个错误静默地变成 undefined，从而掩盖了潜在的 bug。

// 反例
// 假设 `config.settings.theme` 必须存在，否则应用无法正确渲染
const theme = config?.settings?.theme; // 如果 config 或 settings 不存在，theme 会是 undefined，应用可能以非预期方式运行

// 更好的做法是明确检查或让其抛出错误，以便尽早发现问题
if (!config || !config.settings || !config.settings.theme) {
  throw new Error("Critical configuration 'theme' is missing!");
}
const themeBetter = config.settings.theme;

2. 当根对象确定存在时#

如果链的第一个对象是确定存在的（例如，window 对象、模块的顶级导出、一个已明确初始化的变量），那么在它上面使用可选链是不必要的。

// window 总是存在的 (在浏览器环境中)
const path = window?.location?.pathname; // 第一个 `?.` 是多余的
const pathBetter = window.location?.pathname; // 这样更好

3. 警惕成为糟糕数据结构的”遮羞布”#

如果你发现代码中到处都是 ?.?.?.，这可能意味着你的数据结构设计得不够好，或者数据源不可靠。此时，应该考虑重构数据结构或在数据进入系统时进行更严格的校验和转换，而不是仅仅用可选链来”容错”。

4. 考虑代码清晰度和团队习惯#

对于非常浅的层级（例如只有一级），obj && obj.prop 的写法对于不熟悉可选链的开发者可能依然清晰。但通常情况下，可选链因其简洁性而更受欢迎。关键是团队内部达成一致。

5. 当需要区分 null 和 undefined 时#

可选链在遇到 null 或 undefined 时都会短路并返回 undefined。如果你需要区分这两种情况并做不同处理，可选链可能不适用，你需要更显式的检查。