在 JavaScript 编码中，避免访问未定义的变量是一个常见的问题。通常，当我们试图访问一个未定义的变量或属性时，程序会抛出一个异常。这种错误非常容易发生，特别是在处理嵌套数据结构时。ECMAScript 2018 引入了可选链操作符，这是一个非常实用的功能，可以消除这种情况下的错误。
什么是可选链操作符？
可选链操作符是一种新的操作符，用于访问 JavaScript 对象的属性，以避免找到未定义或空对象引用时引发的异常。可选链操作符解决了对象链中间任何一个属性为 undefined 的问题。这种操作符可以用来访问嵌套对象的属性，这些属性可能不存在，以及可能未加载到该对象中。
在以前的版本中，我们通常使用 if 语句或三元运算符来检查对象属性是否存在。这些检查不仅使代码变得冗长，还增加了处理异常情况的代码工作量。
if (object && object.property && object.property.nestedProperty) {
// Do something with object.property.nestedProperty
}现在使用可选链操作符可以简化这个过程：
object?.property?.nestedProperty
可选链操作符使用示例
假设我们要获取一个包含城市名称和国家名称的嵌套对象。如果某个属性不存在或为 null，则可以使用可选链操作符轻松地访问它。
-- -------------------- ---- -------
----- -------- - -
----- -
--------- -
----- --------
-------- --------
-
-
--
-- ---------
----- ---- - -------------------------------
----- ------- - ----------------------------------
------------------ -- -- -------
--------------------- -- -- --------当我们尝试访问嵌套对象的属性时，我们使用可选链操作符 ?，而不是访问属性之前使用冗长的检查。
另一个示例是使用可选链操作符从数组中获取元素。我们可以使用可选链操作符简化访问嵌套数组的语法。
-- -------------------- ---- -------
----- ----------- - -
-
----- --------
-------- ---------
------- -------
--
-
----- ---- ------
-------- ------
------- ---------
-
--
----- ------ - -------------------------
-------------------- -- -- -------在这个例子中，我们检查 travelPlans 数组是否定义并且数组的第一个元素是否定义。然后，我们使用可选链接操作符来获取第一个元素的月份值。如果数组中不存在 0 元素，则返回 undefined。
可选链操作符的指导意义
可选链操作符是一个简化代码的好工具，可以减少代码的分支和判断的数量，减少代码的复杂性。使用可选链操作符可以沉淀编程思维：不要假定一个属性已经存在，始终使用可选链操作符进行访问。
如果您的代码依赖于访问复杂对象的嵌套属性，使用可选链操作符可以让代码更加令人清晰易懂。更重要的是，它可以避免您在代码中引入错误，满足了代码的可维护性。因此，它是值得在你的日常代码编写中使用的实用功能。
结论
ECMAScript 2018 中的可选链操作符是一个非常有用的功能，可以避免在 JavaScript 编程中出现访问未定义变量和属性的错误。使用可选链操作符，您可以避免冗长的代码和繁琐的条件语句，让代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67130591ad1e889fe209ee81