可选链式调用运算符（Optional Chaining Operator）是 ECMAScript 2019 中最令人期待的特性之一。这个特性为我们提供了一种简单、优雅的方法来处理对象的嵌套属性。在本文中，我们将深入探讨 ECMAScript 2019 中的可选链式调用运算符：从什么是该特性，到如何使用它们来进行错误处理和代码精简。
可选链式调用运算符是什么？
在 JavaScript 中，当我们尝试访问一个对象中未定义的属性时，会抛出一个异常。为了避免这种异常，通常需要使用实际类型检查或者一些条件语句来避免这种错误。可选链式调用运算符为我们提供了一个简单而安全的方法处理这个问题。
可选链式调用运算符的语法如下：
object?.property object?.method() object?.[computedKey]
在这些代码中，?. 将会检查 object 是否是一个有效对象。如果 object 是 null 或者 undefined，则表达式将会返回 undefined。否则，操作符会继续执行相应的对象属性或方法。
下面我们将通过一个简单的示例来演示可选链式调用运算符的用法：
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
address: {
city: 'Beijing',
street: 'Chaoyang',
},
};
console.log(user.address.city); // Beijing
console.log(user.address.region); // TypeError: Cannot read property 'region' of undefined在这个示例中，我们尝试访问 user.address.region 属性。由于 region 属性未定义，这个代码会抛出一个 TypeError 异常。为了避免这种异常，我们需要显式地检查 address 对象是否存在。这个过程通常需要写一些冗长的代码，如下所示：
let city;
if (user.address && user.address.city) {
city = user.address.city;
}但是，我们现在可以使用可选链式调用运算符来处理此类情况。通过使用 ?. 运算符，我们可以简化上述代码，如下所示：
const city = user.address?.city;
现在，我们可以确保在 address 不存在时不会出现类型错误。
在错误处理中的选用
可选链式调用运算符的一个常见用例是在错误处理中使用。当我们尝试访问不存在的属性或方法时，代码通常会产生异常。我们可以使用可选链式调用运算符来避免这种异常的发生，并提供一些可读性更好的错误消息。
下面是一个简单的例子，通过可选链式调用运算符演示了错误处理的方法：
const user = {
name: 'Alice',
};
console.log(user.address?.city ?? 'Unknown city');在这个示例中，我们检查了 user 对象的 address 属性。如果 address 是 null 或 undefined，代码将返回 'Unknown city'。否则，代码将返回 address.city 属性。
代码精简
另一个可选链式调用运算符的好处是它可以使我们的代码更加精简。在过去，当我们需要访问一个对象的嵌套属性时，通常需要使用多个 if-else 语句或其他大量的代码。
使用可选链式调用运算符，我们可以减少代码的数量，并提高代码的可读性。下面是一个简单的示例，其中我们可以看到可选链式调用运算符如何减少代码的数量：
const book = {
title: 'The Hitchhiker\'s Guide to the Galaxy',
};
console.log(book?.author?.name ?? 'Unknown author');在这个示例中，我们检查 book 对象的 author.name 属性。如果 author 或其中任一属性是 null 或 undefined，代码将返回 'Unknown author'。
总结
在 ECMAScript 2019 中，可选链式调用运算符是一项非常有用的新特性。它可以使我们的代码更加简洁、高效，并在处理嵌套属性时提供更好的错误处理方法。我们鼓励您在编写前端代码时尝试一下，并将其应用到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6528bcd37d4982a6ebb49ca5