在 ECMAScript 2021 中，可选链操作符 ?. 是一个非常有用的新特性。它允许我们在访问对象的属性或方法时，避免出现 undefined 或 null 的错误，从而使代码更加健壮和可读性更好。
可选链操作符的语法
可选链操作符的语法非常简单，就是在要访问的属性或方法之前加上 ?.，例如：
const name = person?.name;
上面的代码中，如果 person 对象存在，那么 name 变量就会被赋值为 person.name 的值，否则 name 变量会被赋值为 undefined。
可选链操作符的使用示例
下面我们来看一些具体的使用示例，以便更好地理解可选链操作符的作用。
示例一：访问嵌套对象的属性
假设我们有一个 person 对象，它包含了一个嵌套的 address 对象，我们想要访问 address 对象的 city 属性，代码如下：
const city = person.address.city;
上面的代码看起来很简单，但是如果 address 属性不存在，那么就会抛出一个错误，导致程序崩溃。为了避免这种情况，我们可以使用可选链操作符，代码如下：
const city = person?.address?.city;
上面的代码中，如果 person 对象或 address 对象不存在，那么 city 变量会被赋值为 undefined。
示例二：调用对象的方法
假设我们有一个 person 对象，它包含了一个 sayHi 方法，我们想要调用这个方法，代码如下：
person.sayHi();
上面的代码同样存在一个问题，如果 person 对象不存在，那么就会抛出一个错误。为了避免这种情况，我们可以使用可选链操作符，代码如下：
person?.sayHi();
上面的代码中，如果 person 对象不存在，那么 sayHi 方法就不会被调用。
示例三：访问数组的元素
假设我们有一个 list 数组，我们想要访问数组的第一个元素，代码如下：
const first = list[0];
上面的代码存在一个问题，如果 list 数组不存在或者为空，那么就会抛出一个错误。为了避免这种情况，我们可以使用可选链操作符，代码如下：
const first = list?.[0];
上面的代码中，如果 list 数组不存在或者为空，那么 first 变量会被赋值为 undefined。
可选链操作符的指导意义
可选链操作符使得我们的代码更加健壮和可读性更好。在访问对象的属性或方法时，如果使用可选链操作符，就可以避免出现 undefined 或 null 的错误，从而减少程序崩溃的风险。此外，可选链操作符还可以使得代码更加简洁和易于理解。
然而，我们也需要注意可选链操作符的使用场景。在某些情况下，我们可能需要对 undefined 或 null 做一些特殊的处理，此时就不能使用可选链操作符。因此，在使用可选链操作符时，我们需要根据具体的情况进行判断，以确保代码的正确性和可读性。
总结
本文介绍了 ECMAScript 2021 中的可选链操作符，并给出了一些使用示例。可选链操作符可以避免出现 undefined 或 null 的错误，使得代码更加健壮和可读性更好。然而，在使用可选链操作符时，我们需要注意其使用场景，以确保代码的正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65519178d2f5e1655db4fc39