随着 Web 应用程序的复杂性不断增加，许多前端开发人员发现自己需要处理来自多个源的大量数据。在处理复杂数据结构时，常常需要在代码中使用大量的条件语句，以确保数据的完整性和可靠性。这在某些情况下可能非常繁琐和冗长。ES11 中引入的可选链符解决了这个问题，它使我们能够轻松地访问深层次的嵌套数据，同时减少了冗长的条件代码。在本文中，我们将介绍 ES11 已经推出的可选链符，并给出使用示例。
什么是可选链符
可选链符是一种新的语法，它允许我们在访问嵌套数据时跳过任意级别的 null 和 undefined 值，从而避免了运行时错误。在过去，如果我们要访问一个对象中的属性或方法，通常会像这样写：
if (object && object.property && object.property.method) {
object.property.method();
}如果对象中仅仅少了一个属性或方法，这段代码便会出现问题。使用可选链符，我们可以将上面的代码重写为：
object?.property?.method?.();
这样写的好处在于，只要上述对象中任何一级都为 null 或 undefined，JavaScript 引擎都会安静地跳过它，而不会丢出异常。此外，使用可选链符的代码也更加简洁清晰。
可选链符的使用
了解了可选链符是什么，我们看如何在实际开发中使用它。
- 使用可选链符来访问深层次的嵌套数据
const user = {
name: 'John',
address: {
city: 'New York',
street: {
name: 'Broadway',
number: 1234
}
}
};
console.log(user?.address?.street?.number); // 1234在这个示例中，如果 address 或 street 中任何一个属性为 null 或 undefined，控制台不会抛出异常，而是返回 undefined。
- 使用可选链符在对象数组中获取属性
const cars = [
{ brand: 'BMW', model: 'X5', price: 50000 },
{ brand: 'Mercedes', model: 'C-Class', price: 40000 },
{ brand: 'Audi', model: 'A4', price: 35000 }
];
console.log(cars[1]?.price); // 40000
console.log(cars[3]?.price); // undefined在这个示例中，如果数组 cars 中不存在第二个元素，控制台不会抛出异常，而是返回 undefined。
- 使用可选链符调用对象中的方法
const user = {
name: 'John',
age: 30,
greet() {
console.log('Hello!');
}
};
user?.greet?.(); // 'Hello!'同样的，如果 greet 方法不存在，控制台不会抛出异常，而是返回 undefined。
注意事项
当你使用可选链符时，需要确保你的代码运行在能够支持该语法的环境下，否则便会出现语法错误。在编写代码之前，请先检查您的环境是否支持 ES11。如果你使用的是 Babel，你可以使用 @babel/plugin-proposal-optional-chaining 插件来支持可选链符的语法。
总结
使用可选链符是一种有效地处理嵌套数据的方法，它可以减少代码中的条件语句，并使代码更加简洁清晰。如果你正在处理大量的嵌套数据，并且希望使你的代码更加可读、健壮和可靠，那么不妨试试使用可选链符吧！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ba18feadd4f0e0ff2a4e49