在前端开发中，我们经常需要访问对象的属性或方法。如果对象嵌套层数比较深，则需要使用多个 && 运算符来访问其中某个属性或方法，这样的代码不仅不美观，而且不易读。好在 ES2020 中新增了可选链操作符，可以优雅地访问对象，本文将详细介绍这个语法特性。
可选链操作符
可选链操作符是一个 ?，它紧跟在对象属性或方法名之后，表示如果该属性或方法存在，则访问该属性或方法，否则返回 undefined。
下面是一个示例，使用 ? 访问一个嵌套对象的属性：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
----- ---------
----- -----
-
-
----- ------- - ---------------- -- ------
----- ------- - ---------------- -- ---
----- ------ - --------------- -- ---------在上面的示例中，我们使用可选链操作符 ? 来访问 person.pet 对象的 name 和 type 属性，如果 person.pet 不存在，那么 petName 和 petType 将返回 undefined。
此外，可选链操作符还可以用于访问数组的元素和方法。下面是一个示例，使用 ? 访问一个数组的第一个元素：
const arr = [] const firstElem = arr?.[0] // undefined
在上面的示例中，我们使用可选链操作符 ? 来访问空数组 arr 的第一个元素，因为 arr 为空数组，所以 firstElem 将返回 undefined。
替代多个 && 运算符
在访问对象的属性或方法时，我们经常需要使用多个 && 运算符。下面是一个使用 && 运算符访问嵌套对象属性的示例：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
----- ---------
----- -----
-
-
----- ------- - ---------- -- --------------- -- ------
----- ------- - ---------- -- --------------- -- ---
----- ------ - ---------- -- -------------- -- ---------在上面的示例中，我们使用 && 运算符来访问 person.pet 对象的 name 和 type 属性，如果 person.pet 不存在，则返回 undefined。
使用可选链操作符 ? 可以替代上面的代码，使代码更简洁和易读。下面是上面示例的可选链版本：
-- -------------------- ---- -------
----- ------ - -
----- --------
---- ---
---- -
----- ---------
----- -----
-
-
----- ------- - ---------------- -- ------
----- ------- - ---------------- -- ---
----- ------ - --------------- -- ---------注意事项
在使用可选链操作符时，需要注意以下几点：
可选链操作符
?必须紧跟在对象属性或方法名之后，否则会报错。在使用可选链操作符访问对象属性时，如果对象存在但属性不存在，则返回
undefined。而在访问对象方法时，如果方法不存在，则不会抛出异常，而是返回undefined。可选链操作符还支持调用函数。下面是一个示例，使用可选链操作符调用对象方法：
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ------- - ------------------- -- ---- -- -------------- - - ---------------- -- ------ -- ---- -- -----在上面的示例中，我们使用可选链操作符
?来调用对象的greet方法，如果person.greet不存在，则不会抛出异常，而是返回undefined。
总结
在本文中，我们学习了 ES2020 中新增的可选链操作符 ?，它可以优雅地访问嵌套对象的属性和方法，可以替代多个 && 运算符，使代码更简洁和易读。但是在使用可选链操作符时，需要注意以上几点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6489164548841e9894762045