在前端开发中，我们经常需要处理对象的属性和方法，但有时候我们并不确定这些属性和方法是否存在。在这种情况下，我们常常需要编写一些冗长的代码来进行判断和处理。为了解决这个问题，ES11 提供了可选链操作符 (?.)，可以让我们更加方便地处理这些情况。
可选链操作符的语法
可选链操作符 (?.) 的语法非常简单，它可以用来访问对象的属性和方法，如果该属性或方法不存在，则返回 undefined。
object?.property object?.method()
在上面的代码中，object 表示要访问的对象，property 表示要访问的属性，method 表示要访问的方法。
可选链操作符的使用场景
可选链操作符 (?.) 主要用于访问对象的属性和方法，如果该属性或方法不存在，则返回 undefined。这种情况在以下场景中非常常见：
1. 访问嵌套对象的属性和方法
在访问嵌套对象的属性和方法时，我们常常需要进行一些判断，以确保该属性或方法存在。例如：
if (object && object.property1 && object.property1.property2 && object.property1.property2.method) {
object.property1.property2.method();
}上面的代码中，我们需要进行多次判断才能访问到 method 方法。如果使用可选链操作符 (?.)，则可以简化代码：
object?.property1?.property2?.method();
如果 property1、property2 或 method 不存在，则返回 undefined。
2. 访问数组的元素
在访问数组的元素时，我们也常常需要进行一些判断，以确保该元素存在。例如：
if (array && array.length > 0 && array[0]) {
// do something with array[0]
}上面的代码中，我们需要先判断数组是否存在，然后再判断数组的长度是否大于 0，最后再判断数组的第一个元素是否存在。如果使用可选链操作符 (?.)，则可以简化代码：
array?.[0];
如果数组不存在或者第一个元素不存在，则返回 undefined。
可选链操作符的注意事项
虽然可选链操作符 (?.) 可以让我们更加方便地处理对象的属性和方法，但在使用时还需要注意以下几点：
1. 可选链操作符只能用于对象和数组
可选链操作符只能用于对象和数组，如果用于其他类型的值，则会报错。
2. 可选链操作符只能用于 ES11 及以上的版本
可选链操作符是 ES11 新增的语法，只能在 ES11 及以上的版本中使用。
3. 可选链操作符不会触发 ReferenceError 异常
如果使用可选链操作符访问一个不存在的变量，则不会触发 ReferenceError 异常，而是返回 undefined。例如：
undefined?.property; // undefined null?.property; // undefined
上面的代码中，undefined 和 null 都不会触发 ReferenceError 异常，而是返回 undefined。
示例代码
下面是一个使用可选链操作符的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -
----- --------
---- ---
--
--
------------------------------ -- -------
----------------------------- -- --
--------------------------------------- -- ---------
----- ----- - --- -- ---
------------------------ -- -
------------------------ -- ---------上面的代码中，我们使用可选链操作符访问了 data 对象中的属性和数组中的元素。如果这些属性或元素不存在，则返回 undefined。
总结
可选链操作符 (?.) 是 ES11 新增的语法，可以让我们更加方便地处理对象的属性和方法。在访问嵌套对象的属性和方法以及访问数组的元素时，可选链操作符能够简化代码，提高开发效率。但在使用时需要注意可选链操作符的语法和注意事项，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66909411dc1ed1a61b576471