使用 ES12 的可选链式操作符来避免 undefined/null 引起的 bug
在前端开发中，代码中常常遇到引用对象的属性时出现 undefined/null 的问题，这是因为对象属性值不存在或者为 null，而在访问对象属性时忘记了进行判断。解决这个问题的方式是在访问对象属性之前进行判断，但是这样很容易让代码变得难以维护和阅读。幸运的是，在 ES12 中引入了可选链式操作符（optional chaining），它可以轻松地解决这个问题。
可选链式操作符是一种简洁且安全的 JavaScript 语法，通过使用它，我们可以避免在对象属性为空或不存在的情况下引起未定义的错误。使用该操作符的核心概念是，只有当对象属性存在时才访问该属性，否则返回 undefined。
示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- ---- ------
------ ----
-
-
-- ----
----- ------- - ------ -- -------------- -- -----------------------
-- -------
----- ------- - -------------------------在上面的代码中，我们演示了可选链式操作符的使用。在传统的写法中，我们使用了通过 && 进行短路的方式来判断属性是否存在的方式，但这样的代码可读性差，在需要多个属性访问的情况下，代码会变得非常复杂。而在可选链式操作符的使用中，我们只需要在引用属性的后面加上 ? 即可，非常方便。
另外，可选链式操作符还可以解决回调函数调用时的报错问题。
-- -------------------- ---- -------
----- --------- - ---------- -- -
---------------------------------
---------------- -- ----------------
------------ -- ---------------
-------------- -- -------------- --------
--
-- ----
---------------- ------ -- -
-- ------- -
------------------- -----------
-
---- -
------------------ ----------
-
---
-- -------
---------------- ------ -- -
------------------- --------------------
------------------ ------------------------
---在上面的代码中，我们使用了可选链式操作符（?.）来保证在没有返回值时不会出错。这个例子中我们不需要使用条件分支语句来进行特殊处理，因为使用可选链式操作符时，调用方会自动处理 null 或 undefined 引用导致的异常情况。
在使用可选链式操作符时，需要谨慎考虑实际情况，确保代码的正确性和可读性。它是一个很好的解决方案，但需要适度运用，以避免将问题留给后来人。
总结：
可选链式操作符是 ES12 中一项很实用的功能，可以帮助开发人员更方便地访问对象属性，而不是使用可能会导致代码混乱和错误的传统方式。本文中所讲到的示例代码只是其中的一种应用方式，实际上还有更多的应用场景。所以，在实际开发过程中，我们应该尝试将可选链式操作符应用到代码中，提高代码可读性和维护性，避免因为 undefined/null 引起的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c68a548841e9894ac2cd8