ECMAScript 2020是JavaScript语言的最新版本，发布于2020年。本文将介绍ECMAScript 2020中引入的可选链式调用操作符（Optional Chaining Operator），并提供详细的解释、示例代码以及学习和指导意义。
可选链式调用操作符
在ECMAScript 2020之前，当我们需要访问一个对象的深层属性时，我们需要按照以下方式编写代码：
if(obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.prop3) {
// do something with obj.prop1.prop2.prop3
}这种代码风格很繁琐，而且可读性很差，因为它迫使我们提及对象的嵌套层次，而不是只考虑所需的属性。
ECMAScript 2020引入了可选链式调用操作符，可以使我们简化这种情况的代码。下面是可选链式调用操作符的语法：
obj?.prop1?.prop2?.prop3
有了可选链式调用操作符，我们可以通过以下方式编写相同的代码：
if(obj?.prop1?.prop2?.prop3) {
// do something with obj.prop1.prop2.prop3
}这样，我们就可以避免冗长的代码，并且只关注我们需要的属性。
教程和示例
下面是一个使用可选链式调用操作符的示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ----------
------- ----------------
-------- --------
-
--
----- ---- - ---------------------- -- ---------
----- ------- - ------------------------- -- ---------在这个示例中，我们定义了一个person对象，它有一个address属性，其中包含两个子属性：city和zipcode。我们使用可选链式调用操作符获取city属性，并将其指定给city变量。我们没有指定country属性，因此它的值为undefined。
更多示例
在这里，我们将看到可选链式操作符中的一些更高级的示例。
示例1
让我们考虑这样一个场景，其中用户可以选择填写他们的地址。在这种情况下，我们将需要在访问用户地址属性之前进行可选的检查。下面的代码演示了如何使用可选链式调用操作符来实现这一点：
const user = {
name: 'Bob',
address: null
};
const street = user?.address?.street;在这个示例中，我们定义了一个具有name和address属性的对象，但是address属性可以为null。使用可选链式调用操作符，我们可以访问address属性下的street属性，而不必担心出现TypeError异常。
示例2
让我们考虑这样一种情况，即我们需要访问API的JSON响应，该JSON响应包含可能不存在的某些属性：
-- -------------------- ---- -------
----- -------- - -
----- -
------ -
-
----- -------
---- --
--
-
----- ------
---- --
-
-
-
--
----- --------- - ------------------------------ -- -
----- ------------- - --------------------------------- -- ------
----- ------------- - -------------------------------- -- --
----- ------------------- - --------------------------------------- -- ---------在这个示例中，我们定义了一个名为response的对象，该对象包含data属性，该属性又包含名为users的数组。使用可选链式调用操作符，我们可以访问数组的长度、第一个用户的名称、第二个用户的年龄以及不存在的第三个用户的职业属性。
特殊注意事项
在使用可选链式操作符时需要注意以下问题：
- 可选链式操作符只能在支持ECMAScript 2020的浏览器中使用。
- 调用可选链式操作符时，必须省略点号后面的属性名。
- 如果所需属性不存在，则返回
undefined。 - 输出一个属性，如果这个属性是对象，你依然可以调用可选链操作符从这个属性继续看下去。
总结
使用ECMAScript 2020中的可选链式调用操作符，可以简化访问对象深层属性的代码，并提高代码的可读性和可维护性。我们可以通过可选链式调用操作符轻松地使用复杂对象的属性，而无需检查嵌套属性是否存在。
有了可选链式调用操作符，我们可以更容易地编写更健壮的代码，减少了忘记检查嵌套属性是否存在时出现的空指针异常。如果您不想为这种情况编写繁琐的 null 检查代码，则可以考虑在编写JavaScript应用程序时使用可选链式调用操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe07f195b1f8cacdd101e6