ECMAScript 2019 中引入了 Optional Chaining 操作符，这是一种新的语法，可以简化 JavaScript 中的一些常见操作。这个操作符的主要作用是在访问对象的属性时，可以避免出现 undefined 或 null 的情况，从而增强代码的健壮性和可读性。在本文中，我们将详细介绍 Optional Chaining 操作符的使用方法和注意事项，并提供一些实用的示例代码。
Optional Chaining 操作符的基本用法
Optional Chaining 操作符使用问号（?）来表示。它可以在对象的属性或方法调用中插入一个问号，表示如果该属性或方法不存在，则返回 undefined，而不会抛出错误。例如，我们可以使用 Optional Chaining 操作符来访问一个可能不存在的属性：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- -----
-
--
---------------------------------- -- ---- -----
------------------------------------- -- ---------在上面的示例中，我们使用了 Optional Chaining 操作符来访问 person 对象中的 address 属性，如果 address 属性不存在，则返回 undefined。这样，我们就避免了在访问不存在的属性时出现错误的情况。
Optional Chaining 操作符也可以用于方法调用。例如，我们可以使用 Optional Chaining 操作符来调用一个可能不存在的方法：
-- -------------------- ---- -------
----- ------ - -
----- --------
---------- -
----------------------
-
--
-------------------- -- --------
---------------------- -- ---------在上面的示例中，我们使用了 Optional Chaining 操作符来调用 person 对象中的 sayHello 方法，如果 sayHello 方法不存在，则返回 undefined。这样，我们就可以避免在调用不存在的方法时出现错误的情况。
Optional Chaining 操作符的高级用法
除了基本用法之外，Optional Chaining 操作符还有一些高级用法，可以更好地适应复杂的编程需求。
链式调用
Optional Chaining 操作符可以与链式调用结合使用，可以在多层嵌套的对象中访问属性或方法。例如，我们可以使用 Optional Chaining 操作符来访问嵌套在对象中的属性：
-- -------------------- ---- -------
----- ------ - -
----- --------
-------- -
----- ---- ------
-------- -------
-
--
-------------------------------------- -- -------
---------------------------------------------- -- -在上面的示例中，我们使用了 Optional Chaining 操作符来访问 person 对象中嵌套的 address 属性。如果 address 属性不存在，则返回 undefined，不会抛出错误。这样，我们就可以在多层嵌套的对象中安全地访问属性。
函数调用
在函数调用中，Optional Chaining 操作符可以用来检查函数是否存在，避免在调用不存在的函数时出现错误。例如，我们可以使用 Optional Chaining 操作符来检查对象中是否存在一个方法，并调用该方法：
-- -------------------- ---- -------
----- ------ - -
----- --------
---------- -
----------------------
-
--
--------------------- -- --------
----------------------- -- ---------在上面的示例中，我们使用了 Optional Chaining 操作符来检查 person 对象中是否存在 sayHello 方法，并调用该方法。如果 sayHello 方法不存在，则返回 undefined，不会抛出错误。
数组访问
在访问数组元素时，Optional Chaining 操作符可以用来检查数组是否存在，避免在访问不存在的元素时出现错误。例如，我们可以使用 Optional Chaining 操作符来访问可能不存在的数组元素：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 1 console.log(arr?.[3]); // undefined
在上面的示例中，我们使用了 Optional Chaining 操作符来访问 arr 数组中的元素。如果元素不存在，则返回 undefined，不会抛出错误。
注意事项
在使用 Optional Chaining 操作符时，需要注意以下几点：
- Optional Chaining 操作符只能用于对象、数组和函数的调用，不能用于普通变量的访问。
- Optional Chaining 操作符不能用于赋值操作，只能用于访问操作。
- Optional Chaining 操作符只能用于 ECMAScript 2019 或更高版本的 JavaScript 中，如果在旧版 JavaScript 中使用将会导致语法错误。
结论
Optional Chaining 操作符是 ECMAScript 2019 中引入的一个新功能，可以避免在访问对象、数组和函数时出现 undefined 或 null 的情况，从而增强代码的健壮性和可读性。在本文中，我们介绍了 Optional Chaining 操作符的基本用法和高级用法，并提供了一些实用的示例代码。希望本文能够帮助读者更好地理解和应用 Optional Chaining 操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675547b61b963fe9cc53c421