在 JavaScript 中，当我们需要访问一个对象的属性或者方法时，通常会使用点运算符或者方括号运算符进行访问。这种方式在访问深层嵌套的对象时，容易出现 chain error 的问题，即出现 undefined 或 null 的属性或方法访问。
ES11 中引入了 Optional Chaining 运算符，可以解决这个问题。本文将详细介绍 Optional Chaining 运算符的使用、优点以及示例代码，帮助读者更好地理解和应用这个新特性。
Optional Chaining 的使用
Optional Chaining 运算符使用问号（?）表示，可以在访问对象属性或方法时，避免出现 chain error 的问题。具体使用方式如下：
obj?.prop // 访问对象属性 obj?.method() // 调用对象方法
上面的代码中，如果 obj 为 null 或者 undefined，则不会报错，而是直接返回 undefined。
除了访问对象属性和方法外，Optional Chaining 运算符还可以在访问数组元素时使用。使用方式如下：
arr?.[index] // 访问数组元素
同样地，如果 arr 为 null 或者 undefined，则不会报错，而是直接返回 undefined。
需要注意的是，Optional Chaining 运算符只能用于访问对象、数组以及函数的返回值，不能用于访问基本类型的值。
Optional Chaining 的优点
使用 Optional Chaining 运算符可以避免出现 chain error 的问题，提高代码的健壮性和可读性。在访问深层嵌套的对象时，可以大大简化代码，避免出现大量的 if 判断语句。
另外，Optional Chaining 运算符还可以与空值合并运算符（??）一起使用，进一步简化代码。使用方式如下：
const result = obj?.prop ?? 'default value'
上面的代码中，如果 obj.prop 为 null 或者 undefined，则 result 的值为 'default value'，否则为 obj.prop 的值。
Optional Chaining 的示例代码
下面是一些使用 Optional Chaining 运算符的示例代码，帮助读者更好地理解和应用这个新特性。
访问嵌套对象属性
-- -------------------- ---- -------
----- ---- - -
----- -------
-------- -
----- ---- ------
-------- -------
-
-
----- ---- - ------------------- -- ---- -----
----- ------- - ---------------------- -- ---------在这个示例中，使用 Optional Chaining 运算符访问了嵌套的对象属性。如果 user.address 或者 user.address.city 为 null 或者 undefined，则返回 undefined。
调用嵌套对象方法
-- -------------------- ---- -------
----- ---- - -
----- -------
------------ -
------ -
----- ---- ------
-------- -------
-
-
-
----- ---- - -------------------------- -- ---- -----
----- ------- - ----------------------------- -- ---------在这个示例中，使用 Optional Chaining 运算符调用了嵌套的对象方法。如果 user.getAddress 或者 user.getAddress() 的返回值为 null 或者 undefined，则返回 undefined。
访问数组元素
const arr = [1, 2, 3] const first = arr?.[0] // 1 const fourth = arr?.[3] // undefined
在这个示例中，使用 Optional Chaining 运算符访问了数组元素。如果 arr 或者 arr[index] 为 null 或者 undefined，则返回 undefined。
总结
Optional Chaining 运算符是 ES11 中的新特性，可以避免访问对象、数组、函数返回值时出现 chain error 的问题，提高代码的健壮性和可读性。本文介绍了 Optional Chaining 运算符的使用、优点以及示例代码，希望能够帮助读者更好地理解和应用这个新特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d3060fadd4f0e0ffb45011