理解 ES10 的 “可选链式调用” 操作符
随着 Web 技术的快速发展，前端开发日益复杂和多样化，同时也产生了更多的新技术和新标准。ECMAScript（简称 ES）就是其中之一，它定义了 JavaScript 的语法规范，而 ES10 则是最新的版本，于 2019 年发布。其中一个最重要的新特性就是“可选链式调用”操作符。在本文中，我们将深入探讨这个新特性的实现原理、使用方法，以及如何将其应用于实际项目中。
什么是“可选链式调用”操作符？
在 Web 开发中，我们经常需要在一个对象或数组中访问一个嵌套的属性或方法，比如：
// javascriptcn.com 代码示例
const user = {
name: 'Alice',
age: 30,
address: {
city: 'New York',
street: '123 Main St',
},
getFullName() {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(user.address.city); // 输出：'New York'
console.log(user.getFullName()); // 抛出错误：Cannot read property 'firstName' of undefined在以上示例代码中，我们通过对象的“点”语法来访问 user 对象的属性和方法，但是在访问 getFullName 方法时，由于该方法中使用了未定义的属性，导致抛出了错误。为了避免这种错误，通常我们需要使用“短路”逻辑来进行判断：
if (user && user.address && user.address.city) {
console.log(user.address.city);
}
if (user && user.getFullName && typeof user.getFullName === 'function') {
console.log(user.getFullName());
}以上代码中使用了“短路”逻辑来判断 user 对象、address、city、getFullName 这些属性和方法是否存在，如果存在再进行访问。这种做法代码量大且冗长，而 ES10 引入的“可选链式调用”操作符就是为了解决这个问题。
“可选链式调用”操作符的语法是 ?.，它可以用于访问可能不存在的属性和方法，如果该属性或方法不存在，它会返回 undefined，而不是抛出错误。重新编写上面的代码可以如下：
console.log(user?.address?.city); console.log(user?.getFullName?.());
在以上代码中，我们不再需要使用“短路”逻辑，而是可以直接使用 “?.” 来访问嵌套的属性和方法，如果存在则返回值，如果不存在则返回 undefined。这种写法简洁明了，易于维护和阅读。
如何使用“可选链式调用”操作符？
在实际项目中，我们经常会遇到需要访问一个嵌套的属性或方法的情况，而这些属性或方法可能不存在。在这种情况下，“可选链式调用”操作符可以帮助我们使代码更加精炼和可读。
让我们以一个示例代码来说明如何使用这个新特性：
// javascriptcn.com 代码示例
const cart = {
owner: {
name: 'Alice',
age: 30,
},
items: [
{
name: 'Product 1',
price: 10,
},
{
name: 'Product 2',
price: 20,
},
],
};
console.log(cart.owner?.name); // 输出：'Alice'
console.log(cart.owner?.address?.city); // 输出：undefined
console.log(cart.items?.[0].name); // 输出：'Product 1'
console.log(cart.items?.[2]?.name); // 输出：undefined在以上示例代码中，我们通过“可选链式调用”操作符来访问 cart 对象的 owner、items、name 属性。如果该属性不存在则会返回 undefined，而不会抛出错误。注意，在访问数组的元素时，需要使用“[]”来访问，而不是使用“.”。
解决哪些问题？
在日常开发中，我们可能会遇到以下需求：
- 访问一个对象中的嵌套属性或方法；
- 处理嵌套对象或数组时，避免错误的出现；
- 对于复杂且可能不存在的嵌套属性或方法，增加容错能力。
通过使用“可选链式调用”操作符，我们可以轻松地解决以上所有问题。它帮助我们避免了繁琐的“短路”逻辑语句，可以使代码更加清晰、简洁、易于维护。此外，它还带来了更好的容错能力，可以避免因为一个小错误而导致整个应用崩溃。
总结
“可选链式调用”操作符是 ES10 中非常实用的新特性，可以帮助我们更加方便地访问对象和数组中的嵌套属性和方法，而不需要编写冗长的“短路”逻辑语句。此外，它还增加了容错能力，可以帮助我们避免因为一个小错误而导致整个应用崩溃。
学习了本文中的内容后，你也可以在自己的项目中尝试使用“可选链式调用”操作符来提高代码的质量和效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654343617d4982a6ebceacfc