在 JavaScript 中，当你在一个对象或数组中查找数据时，你需要访问嵌套的属性或元素。随着应用程序的复杂性的提高，这种嵌套的深度也会逐渐变得更深。如果你经常写 JavaScript，你可能会遇到从一个未定义的值中访问属性或元素的情况。
ES10 介绍了可选链操作符，它可以用于安全地访问深度嵌套的对象属性或数组元素，使代码更加健壮且减少了错误的可能性。这篇文章将介绍可选链操作符和它如何帮助减少代码 bug 数量。
可选链操作符
ES10 可选链操作符是一个点和问号，即 ?.。在访问可能为 null 或 undefined 的对象属性或数组元素时，可选链操作符非常有用。下面是一个示例：
const user = {
name: 'John',
address: {
street: 'Main St',
zip: '12345'
}
}
const zip = user.address?.zip;
console.log(zip); // '12345'在上面的示例中，user.address?.zip 表示 user.address 非空的情况下访问 zip 属性。如果 user.address 的值为 null 或 undefined，那么 user.address?.zip 表达式的结果将是 undefined，而不是抛出一个错误。
如何减少代码 bug 数量
使用可选链操作符可以大大减少未找到属性和元素而引起的类型错误。不过在使用可选链操作符时你仍然需要小心，因为如果你使用了不正确的方式来访问一个对象深度嵌套的属性或一个数组深度嵌套的元素，你仍然可能会遇到错误。
下面是一个示例，显示如何使用可选链操作符在访问对象深度嵌套的属性时减少 bug。假设你需要从一个数组中的最后一个对象中获取一个数字属性：
const data = [
{ name: 'Joe', age: 32 },
{ name: 'Ann', age: 24 },
{ name: 'Bob' }
];
const lastAge = data[data.length - 1]?.age;
console.log(lastAge); // undefined在上面的示例中，我们使用可选链操作符从数组的最后一个对象中获取 age 属性。如果数组的最后一个对象没有 age 属性，那么 lastAge 将为 undefined，而不是抛出一个错误。
这个简单的例子演示了如何使用可选链操作符减少代码 bug 数量。在实现深度嵌套对象时，可选链操作符非常实用，它将允许你安全地访问深层对象中的属性或元素，而无需担心它们是否存在或是否为 null 或 undefined。
总结
可选链操作符是一个非常有用的特性，它可以帮助开发人员在 JavaScript 应用程序中减少代码 bug 数量。通过使用可选链操作符，你可以避免访问 null 或 undefined 值时的类型错误，并更加安全地访问深层次的对象属性或数组元素。当你在编写深嵌套的 JavaScript 对象或数组时，不要忘记使用可选链操作符来编写更健壮和可靠的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659145d4eb4cecbf2d67a796