前端开发中经常会涉及到访问对象的属性，但是在实际开发中，有些对象的属性可能不存在，这时候就需要进行判断。在过去，我们通常会通过 ?? 运算符或者使用条件判断语句来确保对象属性的存在。但在 ECMAScript 2020 中，JS 新增了一种可选链操作符（optional chaining），通过它我们可以方便地访问对象的属性，而无需手动去做属性的存在性检测。
可选链操作符的使用
可选链操作符 ?. 是一个非常方便的语法糖，我们可以通过它来进行类似“短路”的操作。当我们以 obj?.foo?.bar?.xxx 的方式访问某个对象 foo.bar.xxx 属性时，如果 obj 对象或者 foo 对象不存在则直接返回 undefined，不再报错了。
示例代码如下：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- ------- ------
-
-
--
----- ------- - -------------------
--------------------- -- ------ -----在这个示例代码中，我们首先声明了一个 obj 对象，并进行了一系列属性的链式访问。当所有的对象和属性都存在时，message 变量的值为 'Hello, World'。如果存在任何一个对象或者属性不存在，比如 obj.foo.xxx，那么 message 的值就会是 undefined。
此外，可选链操作符还可以结合函数的调用来实现更精细的操作。
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- -- -- - ------------------- --------- -
-
-
--
----------------------- -- ------- ------- -------在这个示例代码中，我们在 xxx 属性上定义了一个无参函数。如果所有的对象和属性都存在时，执行 obj?.foo?.bar?.xxx?.(); 就会输出 'Hello, World!'。如果 bar 对象不存在时，函数就不会被调用。
可选链操作符的高级用法
除了基本操作之外，可选链操作符还有一些高级的用法，能够让我们的代码更加简洁。
使用连续的判断
在过去，我们一般会使用连续的条件判断语句来检测对象的属性是否存在。例如：
if (obj && obj.foo && obj.foo.bar) {
console.log(obj.foo.bar);
}但是使用可选链操作符之后，我们可以用更加简洁的方式来达到相同的效果：
if (obj?.foo?.bar) {
console.log(obj.foo.bar);
}短路表达式
当我们需要进行一些复杂的属性访问操作时，可选链操作符同样也很好用。
例如，当我们需要访问一个数组中的某个元素时，我们通常需要使用条件判断语句来防止数组溢出。如下所示：
let firstBookTitle;
if (books && books.length > 0 && books[0].title) {
firstBookTitle = books[0].title;
}但是使用可选链操作符之后，我们就可以直接写出一行代码来实现这个操作：
const firstBookTitle = books?.[0]?.title;
空值合并运算符
在过去，判断一个对象属性是否存在的方法通常是使用三元运算符或者 || 运算符。例如：
const title = obj && obj.title ? obj.title : 'Untitled';
但是在 ECMAScript 2020 中，我们可以使用空值合并运算符（nullish coalescing operator）来更加优化这个操作，如下所示：
const title = obj?.title ?? 'Untitled';
这里的 ?? 运算符会仅在 obj.title 为 null 或者 undefined 时才返回 'Untitled'。
结论
在本文中，我们介绍了 ECMAScript 2020 中的可选链操作符的使用。我们发现可选链操作符是一种非常简洁、方便、实用的语法糖，既可以减少大量的手动属性存在性检测的代码，同时也提高了代码的可读性和可维护性。当然，这项新特性在某些老的浏览器中可能不被支持，但我们可以通过使用 Babel 等工具来实现后向兼容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719c82d9b4aadf9e0052a72