在前端开发中，我们经常需要在对象链（Object Chain）中访问深层嵌套的属性或方法。在 ES6 之前，我们只能通过连续使用 && 运算符来构造防御式代码防止对象不存在的错误，这种代码显得很冗长且难以维护。ECMAScript 2021 引入了一个新的 JavaScript 操作符，Optional Chaining 操作符，可以优化这种情况下的代码，实现更加简洁和高效的开发。

Optional Chaining 操作符是一个 '?. ' 号，放置在对象的可选属性或方法的间隔处。下面是结构和使用范例：

obj?.prop // 可选属性
obj?.['prop'] // 可选属性
obj?.method() // 可选方法

可以看到，Optional Chaining 操作符用于对对象的属性或方法进行链式访问时防止 undefined 错误。如果属性或方法存在，代码按照正常方式执行，否则返回 undefined。下面是一些使用 Optional Chaining 操作符的实际示例：

-- -------------------- ---- -------
----- ------ - -
  ----- -------
  -------- -
    ----- --------
  -
--

-- -- -------- -------- ---
----- ---- - ---------------------- -- --------

-- ---- --------- --
----- -------- - -------------------------- -- ---------

在上面的示例中，如果没有 Optional Chaining 操作符，访问 city 和 postcode 属性可能会导致代码抛出异常，但使用 Optional Chaining 操作符可以避免这种情况。

除了使用 Optional Chaining 操作符之外，应该注意一些 Best Practice：

不要在对象的末尾使用 Optional Chaining 操作符，这种情况下，如果对象不存在，会抛出 TypeError 异常。
不要将 Optional Chaining 操作符与 delete 运算符一起使用。
在数组中使用 Optional Chaining 操作符时，表示对应索引元素不存在时返回 undefined，而不是 NaN 或者其他异常值。

总结

Optional Chaining 操作符为链式访问对象属性和方法提供了一个高效的解决方案，避免了代码繁琐和难以维护的问题。我们应该习惯使用它，同时注意最佳实践和细节，来编写更加优雅和高效的代码。

以下为附录代码：

-- -------------------- ---- -------
----- ------ - -
  ----- -------
  -------- -
    ----- --------
  -
--

-- -- -------- -------- ---
----- ---- - ---------------------- -- --------

-- ---- --------- --
----- -------- - -------------------------- -- ---------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6657082fd3423812e4c254f1

ECMAScript 2021 中的 Optional chaining 操作符

总结

纠错反馈