ES11引入了一个新的语法糖——Optional Chaining，这个语法糖可以极大地简化JavaScript代码中的内联if语句，让代码更加简洁易读。本篇文章将带领大家深入了解这个新特性，并通过实例演示如何使用。
Optional Chaining 是什么？
Optional Chaining是ES11中引入的一个新特性，旨在简化 JavaScript 代码中的内联 if 语句。在ES11之前，如果我们要判断某个对象是否存在，并访问对象属性的值，通常要写一些冗长的内联 if 语句。例如：
if (foo && foo.bar && foo.bar.baz) { // do something with foo.bar.baz }
这样的判断语句会很难维护和阅读，特别是当我们处理的对象很复杂时。而使用 Optional Chaining，我们可以把上面的代码简化成一行：
if (foo?.bar?.baz) { // do something with foo.bar.baz }
Optional Chaining 的语法很简单：就是在对象的属性访问中使用“?.”操作符。如果对象属性存在，就返回属性的值；否则返回 undefined。这样，只要对象属性不存在，代码就会自动跳过，不会导致代码的异常。
Optional Chaining 的用法
Optional Chaining 的用法非常的简单，只需要在需要访问对象属性的时候使用“?.”操作符即可。例如，下面的代码演示了如何使用 Optional Chaining：
-- -------------------- ---- ------- ----- ---- - - ----- -------- -------- - ----- ---- ------ ------- ----------- -- -- ------------------------ -- ----- ----------------------- -- --------- --------------------------------- -- --- ---- -------------------------------- -- ---------展开代码
代码中，我们首先创建了一个名为“user”的 JavaScript 对象。然后，在访问这个对象的属性时，我们使用了“?.”操作符。例如，当我们访问“user?.name”时，如果“user”存在且包含属性“name”，那么它将返回属性“name”的值。如果“user”不存在或者不包含属性“name”，那么它会返回“undefined”。类似地，当我们访问“user?.age”时，如果“user”存在且包含属性“age”，那么它将返回属性“age”的值为“undefined”。
Optional Chaining 的指导意义
Optional Chaining是 JavaScript 中一个非常实用的特性，特别是在处理对象嵌套层级较深的情况下，它可以轻松地检查对象的属性是否存在。因此，它可以极大地简化我们的代码并提高代码的可读性。
与 ES6 中的解构赋值和箭头函数一样，Optional Chaining 是 JavaScript 语言发展的一个重要里程碑。它弥补了 JavaScript 中一些短板，并让 JavaScript 语言更加现代、简洁、强大。
结尾
本文介绍了一种激进缩短JavaScript代码的内联 if 操作符——Optional Chaining,它可以极大地简化代码并提高代码的可读性。通过本文的学习，大家应该明白Optional Chaining的语法和用法，并且可以在自己的项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67949700504e4ea9bd92ceee
