在前端开发中，我们经常需要访问一个对象的属性或者方法。但是，当对象的属性或者方法不存在时，我们往往需要写很多的判断语句来避免出现错误。这不仅让代码显得冗长，还容易出错。为了解决这个问题，ECMAScript 2020 引入了 Optional Chaining 操作符，可以让我们更轻松地访问对象的属性和方法，避免冗长的代码。
Optional Chaining 操作符
Optional Chaining 操作符是一个问号（?），可以在对象的属性或者方法后面加上这个操作符来表示如果这个属性或者方法不存在，就返回 undefined 而不是报错。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
-
--------------------------------- -- -----------
------------------------------------ -- ------------在这个例子中，我们使用 Optional Chaining 操作符来访问 person 对象的 address 对象的 city 属性和 zipCode 属性。如果 address 对象不存在，访问 city 属性就会返回 undefined，而不是报错。同样地，如果 zipCode 属性不存在，访问它也会返回 undefined。
使用 Optional Chaining 操作符的场景
Optional Chaining 操作符可以应用于访问对象的属性和方法，特别是当这些属性和方法可能不存在时。下面是一些使用 Optional Chaining 操作符的场景：
1. 访问对象的嵌套属性
当我们需要访问一个对象的嵌套属性时，如果这个对象不存在或者它的某个属性不存在，就需要使用 Optional Chaining 操作符来避免出现错误。
----- ------ - -
----- --------
-------- -
----- ----------
-
-
---------------------------------- -- -----------
------------------------------------- -- ------------
------------------------------- -- ------------2. 调用对象的嵌套方法
当我们需要调用一个对象的嵌套方法时，如果这个对象不存在或者它的某个方法不存在，就需要使用 Optional Chaining 操作符来避免出现错误。
----- ------ - -
----- --------
-------- -
----- -----------
---------------- -
------ -------------- ------
-
-
-
------------------------------------------------ -- ------------ -----
--------------------------------------- -- ------------在这个例子中，我们使用 Optional Chaining 操作符来调用 person 对象的 address 对象的 getFullAddress 方法和 job 对象的 getSalary 方法。如果 address 对象或者 getFullAddress 方法不存在，调用这个方法就会返回 undefined。同样地，如果 job 对象或者 getSalary 方法不存在，调用这个方法也会返回 undefined。
如何避免代码写冗长？
使用 Optional Chaining 操作符可以避免代码写冗长，特别是当访问对象的属性和方法可能不存在时。下面是一些使用 Optional Chaining 操作符的实例：
1. 避免多层嵌套的判断语句
在访问对象的嵌套属性和调用对象的嵌套方法时，如果使用传统的判断语句，代码会变得非常冗长。例如：
----- ------ - -
----- --------
-------- -
----- ----------
-
-
-- ------- -- -------------- -- -------------------- -
--------------------------------
-这段代码用了三个判断语句来判断 person 对象和 address 对象和 city 属性是否存在。如果我们使用 Optional Chaining 操作符，可以更简洁地实现同样的功能：
----- ------ - -
----- --------
-------- -
----- ----------
-
-
----------------------------------2. 避免调用不存在的方法
在调用对象的方法时，如果这个方法不存在，我们需要使用判断语句来避免出现错误。例如：
----- ------ - - ----- ------- - -- ------- -- ---------------- - ----------------- -
这段代码用了一个判断语句来判断 person 对象和 sayHello 方法是否存在。如果我们使用 Optional Chaining 操作符，可以更简洁地实现同样的功能：
----- ------ - - ----- ------- - --------------------
总结
Optional Chaining 操作符是 ECMAScript 2020 中的一个新特性，可以让我们更轻松地访问对象的属性和方法，避免冗长的代码。它可以应用于访问对象的嵌套属性和调用对象的嵌套方法，特别是当这些属性和方法可能不存在时。使用 Optional Chaining 操作符可以避免代码写冗长，让代码更简洁易读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65db877a1886fbafa4883c0c