在前端领域，JavaScript 是一种非常流行和强大的编程语言。但是，在进行 JavaScript 开发的过程中，我们经常会遇到一些问题。例如，在调用对象的属性或方法时，如果对象不存在，则会抛出异常。为了解决这个问题，ES2020 引入了可选链操作符，这个特性可以帮助我们更加安全地编写 JavaScript 代码。
什么是可选链操作符
可选链操作符是一个类似于点运算符的新操作符，用于简化对嵌套对象的访问。它是在点运算符 (.) 或方括号运算符 ([]) 后面添加一个问号 (?) 来使用的。
通过使用可选链操作符，我们可以避免在访问嵌套对象的时候出现异常情况。如果对象的属性或方法不存在，表达式会返回 undefined 而不会抛出异常。
下面是一个使用可选链操作符访问一个嵌套对象属性的例子：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
------- ----- --------
----- ---- ---------
------ ----
-
--
----- ----- - -----------------------
------------------- -- --在上面的例子中，我们使用可选链操作符 ?. 来访问嵌套对象的属性 state。如果对象 address 或 state 不存在，表达式会返回 undefined。
使用可选链操作符的好处
使用可选链操作符可以带来许多好处。下面列出了一些主要优点：
1. 避免异常
可选链操作符可以避免在访问一个不存在的属性或方法时出现异常。在这种情况下，表达式会直接返回 undefined，而不会导致代码崩溃或执行出错。
2. 减少代码量
使用可选链操作符可以帮助我们减少代码量，因为它可以去掉很多繁琐的判断语句。例如，我们不需要写很多 if 语句来检查对象和方法是否存在。
3. 更加精简和易读
由于可选链操作符可以减少代码量，因此使得代码更加精简和易读。这有助于提高代码的可维护性和可读性。
可选链操作符的使用
了解了可选链操作符的优点之后，我们来看一下如何在实际开发中使用它。
1. 访问嵌套对象属性
我们可以使用可选链操作符来访问嵌套对象的属性。例如，在下面的代码中，我们通过可选链操作符访问了嵌套对象的属性：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
------- ----- --------
----- ---- ---------
------ ----
-
--
----- ----- - -----------------------
------------------- -- --在上面的代码中，我们尝试访问一个名为 state 的嵌套对象属性，但是我们使用了可选链操作符来确保即使 address 对象不存在，代码也能正确执行。
2. 调用嵌套对象方法
我们可以使用可选链操作符来调用嵌套对象的方法。例如，在下面的代码中，我们通过可选链操作符调用了嵌套对象的方法：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
------- ----- --------
----- ---- ---------
------ -----
---------------- -
------ ---------------- ------------- ---------------
-
-
--
----- ----------- - ------------------------------------
------------------------- -- ---- ------- --- -------- --在上面的代码中，我们尝试调用一个名为 getFullAddress 的嵌套对象方法，并使用了可选链操作符确保方法的正确调用。
3. 链式调用
我们可以使用可选链操作符进行链式调用。例如，在下面的代码中，我们通过可选链操作符进行了链式调用：
-- -------------------- ---- -------
----- ------ - -
----- ------
-------- -
------- ----- --------
----- ---- ---------
------ -----
---------------- -
------ ---------------- ------------- ---------------
-
-
--
----- ----------- - ---------------------------------------------------
------------------------- -- ---- ------- --- -------- --在上面的代码中，我们使用了可选链操作符进行链式调用，并使用了 toUpperCase 方法将字符串转换为大写字母。
总结
ES2020 引入了一个非常有用的特性——可选链操作符。它可以帮助我们更加安全地编写 JavaScript 代码，并且可以减少代码量，使得代码更加精简和易读。
在实际开发中，我们可以使用可选链操作符来访问嵌套对象的属性和方法，进行链式调用，并提高代码的可维护性和可读性。
在学习可选链操作符时，我们也需要注意它的一些限制，例如对于数组的使用和对于函数的调用等。只有正确使用可选链操作符，才能发挥其最大的优势，让我们的代码更加安全和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce221eb5eee0b5256132df