简介
ECMAScript 2020 新增了一个非常实用的特性：可选链运算符（Optional Chaining Operator）。该特性可以帮助开发者更加方便地访问嵌套对象属性或方法，避免因为某个属性不存在而导致的错误。
在以往的开发中，我们需要先判断一个对象的某个属性是否存在，然后再进行访问。代码通常是这样写的：
if (obj && obj.property1 && obj.property1.property2) {
// 访问 obj.property1.property2
}在这样的代码中，我们需要进行多次判断，非常复杂且容易出错。而可选链运算符的出现，可以让我们更加方便地实现这样的操作。
可选链运算符的使用
可选链运算符的语法很简单，就是在要访问的属性或方法之前加上 ?.，代码如下：
obj?.property1?.property2
如果 obj 或者 property1 不存在，访问会直接返回 undefined，而不会导致代码抛出异常。
例如，我们现在有这样一个对象：
const user = {
name: 'Tom',
address: {
city: 'Shanghai'
}
};如果我们想要获取 user 对象的 address 属性中的 city 值，那么以前的写法可能是这样的：
if (user && user.address && user.address.city) {
console.log(user.address.city); // 输出 'Shanghai'
}而使用可选链运算符，我们可以直接写成：
console.log(user?.address?.city); // 输出 'Shanghai'
这样就方便了很多。
可选链运算符的应用
可选链运算符不仅仅可以用于访问对象属性，还可以用于访问数组下标和调用函数。下面分别介绍一下它们的使用方法。
访问数组下标
我们可以通过 ?. 运算符来访问数组元素：
array?.[index]
如果 array 不存在或者长度小于等于 index，则访问会返回 undefined。
例如，如果我们有一个数组可能为空，我们需要获取其第二个元素，那么以前的写法可能是这样的：
if (array && array.length > 1) {
console.log(array[1]);
}而使用可选链运算符，我们可以直接写成：
console.log(array?.[1]);
调用函数
我们可以使用 ?. 运算符来安全地调用对象方法，例如：
object?.method()
如果 object 不存在，则方法调用会立即返回 undefined。
例如，我们现在有这样一个对象：
const obj = {
foo() {
console.log('foo');
}
};如果我们要执行 obj 对象的 foo 方法，以前的写法可能是这样的：
if (obj && obj.foo) {
obj.foo();
}而使用可选链运算符，我们可以直接写成：
obj?.foo?.();
注意这里的 ?.()，后面的小括号是必须的。
链式使用
如果我们要访问某个对象的嵌套属性，以前的写法可能是这样的：
if (obj && obj.property1 && obj.property1.property2 && obj.property1.property2.property3) {
console.log(obj.property1.property2.property3);
}每一级属性都需要进行一次检查，非常复杂，而使用可选链运算符，可以将其简写为：
obj?.property1?.property2?.property3
如果其中任何一级属性不存在，访问都会返回 undefined。
总结
可选链运算符是 ECMAScript 2020 中非常实用的一个特性，可以帮助我们更加方便地访问嵌套对象属性或方法，避免因为某个属性不存在而导致的错误。它的语法简单，应用广泛，建议开发者尽早掌握并使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dbf80968c7c53b088e817