在前端开发中，JavaScript 是一种非常常用的编程语言。但是，由于 JavaScript 的语法比较灵活，代码中经常会出现一些繁琐而又容易出错的代码。为了解决这个问题，ECMAScript 2020 引入了可选链操作符，使得代码更加简洁易懂。本文将详细介绍可选链的使用方法，并给出一些示例代码。
什么是可选链
可选链是一种新的操作符，用于访问对象的属性或方法，避免因为对象不存在而导致程序崩溃。在 JavaScript 中，如果我们访问一个不存在的对象或属性，会抛出一个错误，导致程序中断。而使用可选链操作符，我们可以判断对象或属性是否存在，从而避免这种情况的发生。
可选链操作符由问号（?）和点号（.）组成，表示如果左侧表达式的值为 null 或 undefined，则不访问右侧属性或方法，直接返回 undefined。
如何使用可选链
下面是一个简单的例子，展示了如何使用可选链：
----- ------ - -
----- -----
---- ---
-------- -
----- -----
------- ------
--------- --------
-
--
---------------------------------- -- -----
------------------------------------- -- ------------在上面的代码中，我们使用了可选链操作符 ?. 来访问 person 对象中的 address 属性。如果 person 对象中不存在 address 属性，则直接返回 undefined。
可选链的嵌套使用
可选链操作符可以嵌套使用，来访问更深层次的属性或方法。下面是一个示例代码：
----- ------ - -
----- -----
---- ---
-------- -
----- -----
------- ------
--------- --------
--
------------ -
------ --------------------- -- -----
-
--
--------------------------------- -- -----在上面的代码中，我们使用了可选链操作符 ?. 和空值合并操作符 ?? 来访问 person 对象中的 address 属性和 getCountry 方法。如果 address 属性不存在，则返回默认值 中国。
可选链的数组访问
除了访问对象属性和方法，可选链操作符还可以用于访问数组元素。下面是一个示例代码：
----- ---- - - - ----- ----- ---- -- -- - ----- ----- ---- -- -- - ----- ----- ---- -- - -- --------------------------- -- ----- --------------------------- -- ------------
在上面的代码中，我们使用了可选链操作符 ?. 来访问数组 list 中的第一个元素的 name 属性。如果数组中不存在第一个元素，则直接返回 undefined。
总结
可选链是 ECMAScript 2020 中引入的一种新的操作符，用于访问对象属性、方法和数组元素，避免因为对象不存在而导致程序崩溃。可选链操作符由问号（?）和点号（.）组成，可以嵌套使用。在实际开发中，我们可以使用可选链来简化代码，提高程序的健壮性和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/650535a995b1f8cacd1b99b2