JavaScript 可选链操作符 "?."

可选链操作符 ?. 是 ES2020 引入的一个非常有用的特性，它允许你安全地访问嵌套对象的属性，而无需验证每个引用是否有效。

基本语法

可选链操作符的语法是在可能为 null 或 undefined 的属性前加上 ?.：

obj?.prop       // 访问属性
obj?.[expr]     // 通过表达式访问属性
func?.(...args) // 调用可能不存在的函数

使用场景

1. 访问嵌套属性

传统方式需要多层检查：

let street = user && user.address && user.address.street;

使用可选链：

let street = user?.address?.street;

2. 调用可能不存在的方法

// 传统方式
let result = obj.method && obj.method();

// 可选链方式
let result = obj.method?.();

3. 访问数组元素

let firstItem = arr?.[0];

4. 结合空值合并操作符 ??

let name = user?.name ?? 'Anonymous';

工作原理

• 如果 ?. 前面的值是 null 或 undefined，表达式会短路并返回 undefined
• 否则，继续访问后面的属性或方法

注意事项

1. 不要滥用可选链：只在确实可能为 null/undefined 的地方使用
2. 浏览器兼容性：现代浏览器都支持，但旧版浏览器需要转译（如 Babel）
3. 不能用于赋值：obj?.prop = value 是语法错误
4. 与 delete 一起使用：delete obj?.prop 是允许的

可选链大大简化了深层嵌套对象的访问代码，减少了冗余的 null/undefined 检查，使代码更加简洁易读。