随着 JavaScript 的不断发展，越来越多的新特性被引入到 ECMAScript 中。其中，ECMAScript 2021 引入了一项非常实用的新特性：可选链操作符（Optional Chaining Operator），它可以让我们更加方便地访问对象的属性和方法，同时避免了出现 undefined 或 null 的错误。
什么是可选链操作符？
在 JavaScript 中，访问对象的属性和方法时，如果该对象不存在该属性或方法，就会返回 undefined 或者抛出 TypeError 错误。例如，下面的代码会抛出 TypeError 错误：
const person = {
name: 'Alice',
job: {
title: 'Developer'
}
};
console.log(person.job.location.city);在上面的代码中，person 对象有一个 job 属性，它又有一个 title 属性，但是没有 location 属性，因此访问 person.job.location.city 会抛出 TypeError 错误。
为了避免这种错误，我们通常需要在访问属性或方法之前先判断该对象是否存在。例如，可以使用下面的代码来访问 person.job.location.city：
if (person && person.job && person.job.location) {
console.log(person.job.location.city);
}这样做虽然可以避免出现错误，但是代码显得冗长且不易读写。而可选链操作符就是为了解决这个问题而引入的。
可选链操作符是一个问号（?）后跟一个点号（.）或两个点号（..），用于访问对象的属性或方法。如果该对象不存在该属性或方法，就会返回 undefined 而不是抛出错误。例如，可以使用下面的代码来访问 person.job.location.city：
console.log(person?.job?.location?.city);
如果 person、job、location 或 city 中的任何一个不存在，就会返回 undefined，而不会抛出错误。
如何使用可选链操作符？
可选链操作符的使用非常简单，只需要在访问对象的属性或方法时加上问号（?）即可。例如，下面的代码使用可选链操作符访问对象的属性和方法：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- -
------ ------------
--------- -
----- ---- -----
-
-
--
-------------------------- -- -------
------------------------- -- ---------
-------------------------------- -- -----------
----------------------------------------- -- ---- -----
-------------------------------------------- -- ---------
---------------------------------- -- ---------在上面的代码中，我们使用可选链操作符访问了 person 对象的 name、age、job、title、location、city、country 和 sayHello 属性或方法。如果这些属性或方法不存在，就会返回 undefined，而不会抛出错误。
需要注意的是，可选链操作符只能用于访问对象的属性或方法，不能用于访问数组的索引。例如，下面的代码是不合法的：
const arr = [1, 2, 3]; console.log(arr?.[0]); // SyntaxError: Unexpected token '['
可选链操作符的指导意义
可选链操作符的引入，使得访问对象的属性和方法更加方便和安全。它可以避免代码中出现 undefined 或 null 的错误，同时也可以减少代码的冗余，使代码更加简洁和易读。
在实际开发中，我们经常需要访问多层嵌套的对象或数组，而使用可选链操作符可以让我们更加方便地访问这些对象或数组的属性和方法，避免了代码的冗余和错误。
示例代码
下面是一些使用可选链操作符的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- -
------ ------------
--------- -
----- ---- -----
-
-
--
-------------------------- -- -------
------------------------- -- ---------
-------------------------------- -- -----------
----------------------------------------- -- ---- -----
-------------------------------------------- -- ---------
---------------------------------- -- ---------
----- --- - --- -- ---
---------------------- -- -
---------------------- -- ---------
------------------------------------ -- ------
------------------------------------ -- ---------在上面的代码中，我们使用可选链操作符访问了 person 对象和 arr 数组的属性和方法，并且避免了出现 undefined 或 null 的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d94d62a941bf71340e32c8
