想象一个场景。你要获取一个用户的信息。这个用户可能注册了，也可能没注册。你想获取用户的姓名。你写了这样的代码：

const userName = user.detail.profile.name;

这样写有个问题。如果user是null或者undefined，代码就会报错。控制台会显示：

Uncaught TypeError: Cannot read properties of null

以前，我们这样解决这个问题：

const userName = user && user.detail && user.detail.profile && user.detail.profile.name;

这样写很麻烦。代码很长，不容易看懂。

现在有了可选链操作符。写法变得很简单：

const userName = user?.detail?.profile?.name;

如果user、detail或者profile是null或者undefined，代码不会报错。userName的值会是undefined。

可选链操作符的语法

可选链操作符的写法是在点号前面加一个问号：?.

访问对象属性

obj?.prop

这行代码的意思是：如果obj是null或者undefined，返回undefined。否则，返回obj.prop。

访问数组元素

arr?.[index]

这行代码的意思是：如果arr是null或者undefined，返回undefined。否则，返回arr[index]。

调用函数

func?.(args)

这行代码的意思是：如果func是null或者undefined，返回undefined。否则，调用func(args)。

实际使用例子

获取嵌套对象属性

const user = {
  profile: {
    name: "张三",
    age: 25
  }
};

// 安全地获取姓名
const name = user?.profile?.name; // "张三"

// 尝试获取不存在的属性
const email = user?.contact?.email; // undefined

处理可能不存在的数组

const products = null;

// 安全地访问数组元素
const firstProduct = products?.[0]; // undefined

const validProducts = [{name: "手机"}, {name: "电脑"}];
const productName = validProducts?.[0]?.name; // "手机"

调用可能不存在的函数

const config = {
  onSuccess: function(message) {
    console.log("成功:", message);
  }
};

// 安全地调用函数
config?.onSuccess?.("数据加载完成"); // 输出：成功: 数据加载完成

const emptyConfig = {};
emptyConfig?.onSuccess?.("测试"); // 什么都不发生

可选链操作符的好处

代码更简洁

比较两种写法：

// 以前的写法
const value = obj && obj.a && obj.a.b && obj.a.b.c;

// 现在的写法
const value = obj?.a?.b?.c;

新的写法明显更短，更容易理解。

避免运行时错误

使用可选链操作符后，代码不会因为访问null或undefined的属性而崩溃。

提高代码可读性

代码意图更清晰。一眼就能看出我们在安全地访问可能不存在的属性。

使用注意事项

不要过度使用

只在可能为null或undefined的地方使用可选链操作符。

// 不好的写法（过度使用）
const name = user?.name;

// 好的写法（只在必要处使用）
const name = user?.profile?.name;

注意浏览器兼容性

可选链操作符是ES2020的新特性。现代浏览器都支持，但旧版本浏览器可能不支持。

不能用于赋值

可选链操作符只能用于读取值，不能用于赋值。

// 这样写是错误的
obj?.property = value;

// 正确的写法
if (obj) {
  obj.property = value;
}

可选链操作符让代码更安全、更简洁。下次遇到嵌套对象访问时，记得使用?.来避免潜在的错误！

阅读原文：原文链接