在开发前端应用过程中，我们经常会遇到需要进行多层嵌套的对象属性访问的场景。这时，如果不加以判断很容易就会遇到 null 或 undefined 的错误，导致整个程序崩溃。而在 ES11 中新增的 Optional Chaining（可选链式调用）可以有效地解决这个问题，提高程序的健壮性和可读性。
什么是 Optional Chaining？
Optional Chaining 允许我们在访问对象的属性时，使用严格的“安全导航”语法，让我们可以简单高效地避免程序由于对象属性不存在而导致的错误。这种语法的符号是“？”。
示例
我们来看一个简单的例子，假设我们有一个 user 对象，其内部又有一个 address 对象，这个对象包含城市和街道信息。而我们需要获取 user 的街道信息（如果存在），如果没有的话，就忽略该操作。在未使用 Optional Chaining 的情况下，代码可能如下：
if (user && user.address && user.address.street) {
console.log(user.address.street);
}这段代码需要进行三层嵌套的判断，如果我们在开发过程中不小心遗漏了其中的某一层，那么就会导致程序抛出错误。而使用 Optional Chaining 后，可以通过这样一行代码完美地解决这个问题：
console.log(user?.address?.street);
这行代码只有一行，而且使用了“安全导航”语法，可以避免任何对象属性不存在而导致的错误。
高级用法
除了基本的 Optional Chaining 外，ES11 还提供了多种高级用法和扩展操作符，可以帮助我们更好地利用 Optional Chaining 的优势。
optional chaining 和多种操作符结合使用
let myValue = obj?.name ?? 'default';
这行代码使用了我们熟悉的 nullish operator（??）操作符。当 obj 中的 name 属性为 null 或 undefined 时，myValue 的值将被赋为 default。
使用可选链式调用调用函数
let x = something?.[‘prop’] ();
这行代码中，使用方括号来操作属性，来保证可以使用 Optional Chaining 调用函数或方法。
使用更多的条件
我们还可以在 Optional Chaining 的“安全导航”语法中使用更多的条件，如引用数组或正则表达式。
指导意义
Optional Chaining 是 ES11 中非常实用的一个新功能，它可以减少编写重复代码的冗余性，同时提高了代码的可维护性和可读性。在未来的开发工作中，我们应该充分掌握这个新功能，并在需要的地方加以灵活使用。
结论
本文介绍了 ES11 中的 Optional Chaining（可选链式调用）功能，让我们在访问对象属性时，不必再担心导致程序崩溃的风险，这个新功能在提高代码质量和可读性等方面发挥了重要作用。大家在日常开发中使用，会发现不必再写大量的 if 语句来进行安全检查。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672ddd2deedcc8a97c8630be