在编写 JavaScript 代码时，我们经常会面对对属性或方法的调用可能会返回 undefined 或 null 的情况。为了避免在不必要的情况下出现错误，我们往往需要使用一些额外的操作符或方法来判断是否存在这些属性或方法。在 ES2020 中，新增了一个可选链操作符 ?.，可以帮助我们完成这项任务，本文将详细介绍可选链的用法和指导意义，并提供示例代码帮助你更好地理解。
什么是可选链操作符
在使用 JavaScript 的过程中，我们常常要写一些类似下面的逻辑：
const name = user && user.name console.log(name)
其中，我们必须要判断 user 是否存在，才能安全地获取 user.name 的值。还有另一种判断方式：
const name = user ? (user.name || '') : '' console.log(name)
这种情况下，我们也必须要对 user 做非空判断，不过这里使用了短路运算符 ||，在 user.name 是 null 或者 undefined 的情况下，可以取到一个空字符串。
无论是哪一种判断方式，都不是很优雅，而且在代码量变多后，很容易出现嵌套过深，不利于维护。为了使代码更优雅、更易读、更易维护，ES2020 中新增了一个可选链操作符 ?.。它的最基本用法是在一个对象属性或方法前面加上 ?.，可以让我们在访问属性或方法时，避免手动判断空值。
下面是一些使用可选链操作符的示例代码：
示例 1：使用可选链操作符访问对象属性
如果我们要访问 person 对象的 address.province 属性，使用可选链操作符，可以简化代码，并且避免手动判断 person.address 是否存在：
const person = { name: 'Lily' }
console.log(person.address?.province)如果 person.address 存在，输出 undefined；如果 person.address 不存在，输出 undefined 但不会抛出异常。
另外，在上述代码中，我们使用了 ?. 操作符来链式访问对象的属性方法。这个操作符的含义是，只有当前面的表达式的值不是 null 或 undefined 时，才会继续后续的 <property>。这个操作符的作用就是在不确定对象是否存在时，安全地访问对象的属性方法。
示例 2：使用可选链操作符访问数组元素
使用可选链操作符可以避免数组下标越界的问题，下面是一个例子：
const arr = [1, 2, 3] console.log(arr[3]?.name)
上述代码中，arr[3] 没有定义，但是程序不会抛出异常，而是直接输出 undefined。这个操作符不能避免整个数组访问越界的问题，只能避免当前访问元素越界的问题。
示例 3：使用可选链操作符调用方法
使用可选链操作符也可以避免手动判断方法是否存在，下面是一个例子：
const obj = {
method: function() {
console.log('method invoked')
}
}
console.log(obj.method?.())上述代码中，obj 对象中定义了 method 方法。因此可以通过 obj.method() 调用该方法。但是，使用可选链操作符，即使 obj 对象不存在 method 方法，程序也不会出错，而是直接输出 undefined。
可选链的指导意义
使用可选链操作符可以避免反模式的出现。反模式是指一些编程习惯或代码实现，不仅不好看，而且非常容易出现错误。在数组索引、字符串操作、对象属性等多个场景中，每次都需要手动判断 undefined 或 null 的存在，这样容易写出冗长、难以理解的代码。而可选链操作符能够避免这个问题，让代码变得更为优雅和简洁。
在某些特定情况下，使用可选链操作符会更加简单，比如在 React 的组件开发中，通常会有许多处理复杂嵌套数据的情况，使用可选链操作符能够让我们更快地处理数据，避免许多不必要的代码。在开发大型 Web 应用程序时，可选链操作符能够极大地提高代码的可维护性，并减少由于代码细节造成的 bug。
总结
在 ES2020 引入可选链操作符 ?. 后，我们可以在访问对象、数组、函数等类型的属性或方法时，更加优雅、简洁地避免手动判断 undefined 或 null 的情况。使用这个特性，能够让我们的代码更加简洁、易读、易维护，提高效率，并减少代码中由判断错误情况引起的 bug。
下面是一个示例代码，展示了如何使用可选链操作符：
const value = user?.friends?.[0]?.name console.log(value)
在这个代码中，user 对象、friends 数组和 name 字段都可能不存在。使用可选链操作符连接，一旦其中任何一个不存在，那么输出 undefined，不会抛出异常。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f2fd51f6b2d6eab3c82365