在前端开发过程中，我们经常需要对对象属性或方法进行访问和调用操作。然而，在实际开发中，我们不可避免地会遇到属性或方法不存在的情况。此时，我们需要进行判断和处理，以避免代码抛出异常并停止运行。ES12（ECMAScript 2021）中新增加的 Optional Chaining 操作符可以轻松地解决这个问题。
Optional Chaining 操作符
Optional Chaining 操作符（?.）允许我们在访问对象属性或方法时，对其进行可选的链式访问。如果访问的属性或方法不存在，则会立即返回 undefined，而不是抛出 TypeError 错误。以下是一些示例：
-- -------------------- ---- -------
-- -- -------- -------- -----------
----- ---- - -
----- --------
---- ---
-------- -
------ --------------------
------ ------------
-
--
----- ----- - -------------------- -- -------------------
----- ------ - ------------------------------ -- ---------
-- -- -------- -------- -------
----- ----- - --------------- -- ---------如何使用 Optional Chaining 操作符
在访问对象属性或方法时，可以在该属性或方法后面加上 ?. ，表示这是一个可选的访问操作。如果该属性或方法不存在，则该表达式会立即返回 undefined。
访问嵌套对象属性
Optional Chaining 操作符可以用来访问嵌套对象属性，比如：
-- -------------------- ---- -------
----- ---- - -
----- --------
---- ---
-------- -
------ --------------------
------ ------------
-
--
----- ----- - --------------------
----- ------ - ------------------------------在以上代码中，如果 user.contact 存在，则可以访问 user.contact.email 属性；如果 user.contact.address 不存在，则 county 变量的值为 undefined。
调用函数
Optional Chaining 操作符还可以应用于函数调用，如：
const obj = {
something: function() {
return 'Hello World';
}
};
const result = obj.something?.();在以上代码中，如果 obj.something 存在，则调用该函数并获取其返回值；如果 obj.something 不存在，则 result 变量的值为 undefined。
注意事项
在使用 Optional Chaining 操作符时，需要注意以下几点：
- Optional Chaining 操作符仅在访问对象属性或调用函数时生效，不适用于其他情况，比如赋值操作；
- 如果使用 Optional Chaining 操作符访问对象属性或调用函数时出错，则会返回 undefined；
- Optional Chaining 操作符可以嵌套使用，以对多层链式访问进行处理。
总结
ES12 中的 Optional Chaining 操作符为我们提供了一种简便的链式访问方式，使我们能够轻松地访问对象属性或调用函数，并避免代码抛出异常。在实际开发中，我们应该根据需要使用该操作符，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645679bf968c7c53b09963a8