在前端开发中，我们经常需要处理数据的嵌套结构。在访问这些结构时，我们通常会使用 && 运算符来判断是否存在某个属性或方法。然而，这种方式并不够健壮，因为如果访问的属性或方法不存在，代码就会抛出错误，导致程序崩溃。为了解决这个问题，ECMAScript 2020 推出了 optional chaining 运算符，它能够让代码更健壮。
optional chaining 运算符的用法
optional chaining 运算符是一个问号（?）加上一个点（.）的组合（?.），它可以在访问嵌套结构时避免出现错误。下面是一个示例：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- -----
--------- ------
------- --------
-------- --------
-
-
----- ------- - -----------------------
-------------------- -- --------
----- ----------- - ---------------------
------------------------ -- ---------在这个示例中，我们使用 optional chaining 运算符来访问 person.address 对象的 zipCode 属性和 person.contact 对象的 phone 属性。由于 person.address 存在，所以访问 zipCode 属性不会出错，返回正确的值。而 person.contact 不存在，所以访问 phone 属性会返回 undefined，而不是抛出错误。
optional chaining 运算符的优势
使用 optional chaining 运算符有以下优势：
避免代码臃肿
在访问多层嵌套结构时，如果每一层都使用 && 运算符来判断是否存在属性或方法，代码会变得非常冗长，难以阅读和维护。而使用 optional chaining 运算符，可以在一行代码中完成多层访问，让代码更简洁易读。
避免代码错误
使用 && 运算符访问不存在的属性或方法时，代码会抛出错误，导致程序崩溃。而使用 optional chaining 运算符，访问不存在的属性或方法时会返回 undefined，不会导致程序崩溃。这样可以避免代码错误，使程序更健壮可靠。
增强代码可读性
使用 optional chaining 运算符可以更清晰地表达代码的意图，让代码更易读懂。它可以让我们在代码中直接表达“如果属性存在，则访问该属性”的意思，而不需要使用复杂的逻辑运算符来判断属性是否存在。
optional chaining 运算符的注意事项
使用 optional chaining 运算符时需要注意以下几点：
不支持旧版浏览器
optional chaining 运算符是 ECMAScript 2020 新加入的语法，因此不支持旧版浏览器。如果需要在旧版浏览器中使用该语法，需要使用 Babel 等工具进行转译。
无法判断 undefined 和 null
使用 optional chaining 运算符访问 undefined 或 null 的属性时，会返回 undefined，而不会抛出错误。因此，如果需要判断属性是否为 undefined 或 null，仍然需要使用其他方法。
无法访问原型链上的属性
使用 optional chaining 运算符只能访问对象本身的属性和方法，无法访问原型链上的属性和方法。如果需要访问原型链上的属性和方法，仍然需要使用其他方法。
结论
optional chaining 运算符是 ECMAScript 2020 中新增的语法，可以避免访问嵌套结构时出现错误，让代码更健壮可靠。它可以让代码更简洁易读，增强代码可读性。在使用时需要注意其限制和注意事项，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6779eef15c5a933a340e4ec4