在 JavaScript 中，当我们需要访问一个对象的属性或方法时，如果该对象不存在，就会产生一个错误。这在编写大型应用程序时经常会出现，因为我们不能保证所有的数据都是完整的。为了解决这个问题，ES2020 引入了一个新的特性：可选链操作符（?.）。
可选链操作符的作用
可选链操作符允许我们在访问对象属性或方法时，如果对象不存在，不会产生错误，而是返回 undefined。这样，我们就可以安全地访问对象的属性和方法，而不必担心会出现错误。
例如，我们有一个对象 person，它包含一个 name 属性和一个 address 属性，而 address 属性又包含一个 city 属性。如果我们想访问 person 对象的 city 属性，可以使用如下代码：
const city = person.address.city;
但是，如果 person 对象不存在，或者 address 属性不存在，就会产生错误。为了避免这种情况，我们可以使用可选链操作符来安全地访问属性：
const city = person?.address?.city;
这样，如果 person 对象不存在，或者 address 属性不存在，city 变量将会是 undefined。
使用可选链操作符的示例
下面是一个使用可选链操作符的示例。假设我们有一个包含一系列用户的数组，每个用户都有一个 ID 和一个名字。我们想要获取第一个用户的 ID 和名字，但是我们不确定该数组是否为空。使用可选链操作符，我们可以这样做：
const users = []; const firstUser = users[0]?.id; const firstName = users[0]?.name;
在这个示例中，如果 users 数组为空，firstUser 和 firstName 变量将会是 undefined。
可选链操作符的进一步使用
可选链操作符不仅可以用于访问对象的属性和方法，还可以用于调用函数和构造函数。例如，我们有一个对象 person，它包含一个 sayHello 方法，我们可以使用可选链操作符来调用该方法：
person?.sayHello?.();
如果 person 对象不存在，或者 sayHello 方法不存在，该语句将不会产生错误。
我们还可以使用可选链操作符来调用构造函数。例如，我们有一个对象 MyClass，它有一个 constructor 方法，我们可以使用可选链操作符来调用该方法：
const myClassInstance = new MyClass?.();
如果 MyClass 对象不存在，或者 constructor 方法不存在，myClassInstance 变量将会是 undefined。
总结
可选链操作符是 ES2020 中一个非常有用的新特性，可以帮助我们安全地访问对象的属性和方法，避免出现错误。它不仅可以用于访问对象的属性和方法，还可以用于调用函数和构造函数。在编写大型应用程序时，使用可选链操作符可以提高代码的可读性和可维护性，减少出错的可能性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c832afadd4f0e0ff20b3e0