JS可选链操作符 (?.)
学习使用可选链操作符安全地访问深层嵌套的对象属性，避免冗长的空值检查。 · 难度：入门 · +15XP
什么是可选链操作符？
在JavaScript中，访问深层嵌套的对象属性时，经常需要检查每一级是否存在，否则会抛出 TypeError。可选链操作符 ?. 允许你安全地读取链式属性，如果某个中间属性为 null 或 undefined，表达式会直接返回 undefined，而不会中断执行。
基本语法
obj?.prop // 访问静态属性
obj?.[expr] // 动态属性访问
obj.func?.() // 可选函数调用与传统写法对比
| 传统写法 | 可选链写法 |
|---|---|
if (obj && obj.child && obj.child.name) | obj?.child?.name |
obj && obj.method && obj.method() | obj.method?.() |
常见应用场景
- API 响应解析： 后端返回的数据结构可能缺失部分字段。
- 配置对象： 多层嵌套的配置项不必逐层校验。
- 可选回调函数： 对可能不存在的函数进行调用。
注意事项
可选链不能用在赋值操作的左侧，例如 obj?.prop = value 会报错。同时，过度使用可选链可能隐藏代码中的逻辑错误，建议仅在预期值可能缺失的地方使用。
练习提示
在右侧编辑器中，我们定义了一个模拟的用户数据对象 user，其中 profile 可能为 null。请使用可选链操作符安全地获取用户邮箱地址，并将结果赋值给 email 变量。