在前端开发中，我们经常会遇到需要获取嵌套对象属性的情况。这种情况下，我们通常会使用判断语句来确保对象和属性的存在性，例如：
-- ---- -- --------- -- ---------------- - -- -- --------- ---- --------------- -
然而，这种方式不仅代码冗长，还容易出错。在 ECMAScript 2020 中，新添加了 Optional Chaining 运算符 ?.，可以用来解决这个问题。
Optional Chaining 运算符
Optional Chaining 运算符 ?. 的作用是在对象链式调用时判断前面的成员是否存在，如果不存在，则立即返回 undefined。它的使用方式如下：
-----------------
如果 obj 不存在，返回 undefined。如果 prop1 不存在，也返回 undefined。只有 prop2 存在时，才返回 prop2 的值。
示例
下面是一个获取嵌套对象属性的示例，我们可以看到 Optional Chaining 的使用之后代码更简洁了：
-- -- -------- -------- ----- ----- - ------------------ -- ------- -- ---- -- --------- -- ---------------- - ----- ----- - ---------------- -
同样的，我们也可以在函数调用中使用 Optional Chaining，例如：
----- ------ - -------------------
如果 obj 或 func 不存在，会直接返回 undefined。如果存在，则调用函数并返回结果。
注意事项
需要注意的是，在使用 Optional Chaining 的过程中，如果前面的成员返回了 null 或者 undefined，则会停止运算并返回 undefined，而不会继续运算后面的成员。例如：
----- ----- - -------------------------
如果 prop1 不存在，则返回 undefined，不会继续运算后面的 prop2 和 prop3。
此外，Optional Chaining 运算符不能用于赋值和逗号运算。如果需要进行赋值操作，可以使用 nullish coalescing 运算符 ?? 结合 Optional Chaining 使用，例如：
----- ----- - ---------- -- ----------
总结
Optional Chaining 运算符是 ECMAScript 2020 中新增的语法，可以用来简化获取嵌套对象属性的代码。它的使用方式简单明了，需要注意运算中止和赋值等注意事项。在实际开发中，我们可以结合 Optional Chaining 运算符和 nullish coalescing 运算符使用，来编写更加简洁、优雅的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66458261d3423812e437d3cc