JS可选链操作符：安全访问嵌套属性

学习如何使用可选链操作符 ?. 安全地访问深层嵌套的对象属性，避免因中间属性为 null 或 undefined 而导致的错误。 · 难度：入门 · +15XP

什么是可选链操作符？

可选链操作符 ?. 允许你读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。如果某个引用是 null 或 undefined，表达式会短路返回 undefined，而不是抛出错误。

基本语法

object?.property
object?.[expression]
object?.method?.()

为什么要使用可选链？

在传统的 JavaScript 中，访问深层嵌套属性需要多次使用 && 检查：

// 传统方式
if (user && user.address && user.address.city) {
  console.log(user.address.city);
}
// 使用可选链
console.log(user?.address?.city);

可选链不仅代码更简洁，而且更易读。

常见应用场景

注意事项

• 可选链不能用于赋值操作左侧。
• 如果存在属性且不是 null/undefined，则会正常访问。
• 可以与空值合并操作符 ?? 结合使用，提供默认值。

练习提示

尝试修改 starter_code 中的 user 对象，将 profile 设为 null，观察代码是否仍能正常运行而不报错。