在前端开发中，我们经常需要处理嵌套的对象或数组，但是有时候这些对象或数组中某个属性或元素可能不存在，这时候访问它们会导致 undefined 错误。为了避免这种情况，ECMAScript 2020 引入了可选链操作符，本文将介绍如何在 ECMAScript 2020 中使用可选链操作符避免 undefined 错误。
可选链操作符的基本用法
可选链操作符（Optional Chaining Operator）是一种新的语法，它可以在访问对象的属性或数组的元素时，判断它们是否存在，如果存在则返回对应的值，否则返回 undefined。可选链操作符的语法如下：
---------------- --------------
其中，object 表示要访问的对象，property 表示要访问的属性，array 表示要访问的数组，index 表示要访问的元素的索引。问号 ? 表示如果 object 或 array 不存在，则直接返回 undefined，不会抛出错误。
下面是一个示例代码：
----- ---- - -
----- -------
-------- -
----- ---- ------
-------- -----
-
--
-------------------------------- -- -- --- ----
----------------------------------- -- -- ---------
-------------------------------- -- -- ---------在上面的示例中，我们使用了可选链操作符访问了 user 对象的 address 属性和 phone 属性。user.address?.city 返回了 New York，因为 user.address 存在且有 city 属性；user.address?.zipCode 返回了 undefined，因为 user.address 存在但没有 zipCode 属性；user.phone?.number 也返回了 undefined，因为 user.phone 不存在。
可选链操作符的高级用法
除了基本用法之外，可选链操作符还有一些高级用法，可以更加灵活地处理对象和数组。
函数调用
在 JavaScript 中，函数也是对象，因此可选链操作符也可以用于函数调用。如果一个对象有某个方法，我们可以使用可选链操作符调用这个方法，如果这个对象不存在，则直接返回 undefined，不会抛出错误。
下面是一个示例代码：
----- ---- - -
----- -------
------------ -
------ -------------
-
--
--------------------------------- -- -- ---------
----- ----- - -
----- -------
-------- -
----- --------
-------- ---------
---------------- -
------ -------------- -----------------
-
-
--
----------------------------------------------- -- -- ------ ------
--------------------------------------------- -- -- ---------在上面的示例中，我们使用了可选链操作符调用了两个对象的方法。对于 user 对象，因为它没有 address 属性，因此调用 getAddress 方法会返回 undefined；对于 user2 对象，因为它有 address 属性，且这个属性有 getFullAddress 方法，因此调用 getFullAddress 方法会返回 Paris, France。
数组长度
在 JavaScript 中，数组也是对象，因此可选链操作符也可以用于获取数组的长度。如果一个数组存在，则返回它的长度，否则返回 undefined。
下面是一个示例代码：
----- ------ - --- -- --- ----- ------ - --- ---------------------------- -- -- - ---------------------------- -- -- - ---------------------------- -- -- ---------
在上面的示例中，我们使用了可选链操作符获取了两个数组的长度。对于 array1 和 array2，它们都存在，因此返回了它们的长度；对于 array3，它不存在，因此返回了 undefined。
总结
在 ECMAScript 2020 中，可选链操作符是一种非常有用的语法，可以帮助我们避免 undefined 错误，更加安全地访问对象和数组。除了基本用法之外，可选链操作符还有一些高级用法，可以更加灵活地处理对象和数组。在实际开发中，我们应该根据具体情况选择使用可选链操作符还是传统的判断语句，以保证代码的可读性和性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65607fa6d2f5e1655dab2a06