在日常的前端开发中，我们通常会操作 JavaScript 对象。而当我们需要访问对象嵌套深度比较大的属性时，代码可能会变得冗长而难以维护。针对这种情况，JavaScript 新增了可选链式操作符，使得操作对象变得更加方便和灵活。
什么是可选链式操作符？
可选链式操作符（Optional Chaining）是 ECMAScript 2020 中的新特性，它允许在访问对象属性时，如果该属性不存在，不会抛出异常，而是返回 undefined。这样就可以避免代码因为不存在的属性而崩溃。
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- ---- ----------
-
-
-- ----
----- ---- - -------------- - ------------------- - ---------
-- ---------
----- ---- - --------------------在上面的代码中，我们使用了可选链式操作符 ?. 来访问 person 对象中嵌套的 address 对象的 city 属性。如果 address 不存在，返回值则为 undefined。
可选链式操作符的基本语法
可选链式操作符的语法与常规的属性访问操作符一样，只需要在对象属性后添加一个问号 ? 即可。
// 常规写法 object.property // 可选链式操作符写法 object?.property
我们还可以使用可选链式操作符访问嵌套对象的属性或方法：
object?.nestedObject?.nestedProperty object?.method?.() object?.['property']
使用示例
为了更好地了解可选链式操作符的使用，我们来看几个示例。
示例 1: 判断对象是否存在
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- -- - -- -- ------ ------ ---- -- -- -------------- - ------------------------ -
在上面的代码中，我们首先使用了可选链式操作符 ?. 判断 person 对象是否存在 name 属性，如果存在则打印出该属性对应的值。
示例 2: 使用可选链式操作符调用函数
const person = {
sayHello() {
console.log('Hello, World!')
}
}
// 判断 person 对象是否存在 sayHello 方法
person?.sayHello?.()在上面的代码中，我们使用了可选链式操作符 ?. 判断 person 对象是否存在 sayHello 方法，并在存在的情况下进行调用。
示例 3: 访问嵌套对象的属性
-- -------------------- ---- -------
----- ------ - -
----- -------
-------- -
----- ---- ----------
-
-
-- ------------------
----- ---- - --------------------在上面的代码中，我们使用了可选链式操作符 ?. 访问 person 对象嵌套的 address 对象的 city 属性。如果 address 不存在，返回值则为 undefined。
可选链式操作符的局限性
虽然可选链式操作符提供了便利的访问对象属性的方式，但是需要注意的是，它并不能使用在所有场景中。
首先，可选链式操作符只能在访问对象属性或方法时使用，无法使用在访问数组元素或函数参数上。
其次，可选链式操作符只能在部分现代浏览器中支持，如果需要在过时的浏览器中使用，需要使用转译工具将代码转换为相应的 ES5 代码。
总结
可选链式操作符是 JavaScript 中一个非常有用的新特性。它可以简化操作对象嵌套属性的代码，减少代码错误和异常情况的出现。需要注意的是，在使用时需要了解其局限性，保证代码的兼容性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a43d8968c7c53b09f4a65