什么是可选链操作符？
可选链操作符（optional chaining operator）是 ES10 新增的一个语法特性。它通过让开发者可以在一个可能为 null 或 undefined 的值上进行属性访问（或方法调用），避免了出现 ReferenceError 异常，同时可以让代码更加简洁易读。
在 ES10 之前，一般需要通过以下代码来避免 null 或 undefined 值引起的异常：
if (obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
// ...
}或者：
try {
const value = obj.prop1.prop2.prop3;
// ...
} catch (e) {
// ...
}这种写法不仅繁琐，而且代码看起来也不够直观。
然而，有了可选链操作符 ?. 之后，我们可以轻松地避免这个问题：
const value = obj?.prop1?.prop2?.prop3;
if (value) {
// ...
}可选链操作符的语法
可选链操作符的语法非常简单，就是在属性访问或方法调用的后面加上 ?.，如下所示：
obj?.prop; // 如果 obj 为 null 或 undefined，则返回 undefined，否则返回 obj.prop obj?.[expr]; // 如果 obj 为 null 或 undefined，则返回 undefined，否则返回 obj[expr] func?.(...args); // 如果 func 为 null 或 undefined，则返回 undefined，否则返回 func(...args)
其中，[expr] 表示以变量形式访问属性的语法，如 obj['prop']。
可选链操作符的实例演示
下面我们来看一些使用可选链操作符的实例。
实例 1：简化条件语句
const obj = { foo: { bar: { baz: 'hello' } } };
const value = obj?.foo?.bar?.baz; // 'hello'上面的代码中，我们可以避免在每个属性访问前加上条件语句。
实例 2：安全访问嵌套对象
const obj = { foo: { bar: { baz: 'hello' } } };
const value = obj?.nonExistent?.prop; // undefined在上面代码中，我们尝试访问一个不存在的属性，但因为可选链操作符的存在，不会抛出异常，而是返回 undefined。
实例 3：安全调用嵌套函数
const obj = { foo: { bar: { baz: () => 'hello' } } };
const value = obj?.foo?.bar?.baz?.(); // 'hello'在上面代码中，我们尝试调用嵌套的函数，在函数不存在时，不会抛出异常，而是返回 undefined。
实例 4：使用可选链操作符与 Nullish 合并操作符
const obj = { foo: null };
const value = obj?.foo ?? 'default'; // 'default'在上面代码中，我们使用了可选链和 Nullish 合并操作符，当 foo 为 null 或 undefined 时，返回默认值 default。
可选链操作符的兼容性
可选链操作符在 Chrome 80、Firefox 74、Edge 80 和 Safari 13.1 中得到了支持，但在 IE11 和旧版浏览器中不支持。如果需要在这些浏览器中兼容，需要使用 polyfill 或 babel 转换。
总结
本文介绍了 ES10 新增的可选链操作符，它可以让开发者在处理可能为 null 或 undefined 的值时避免异常抛出，让代码更加简洁易读。我们应该充分利用这个语法特性，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fb0d15f6b2d6eab31c40bd