前言
在前端开发中，经常需要从一个庞杂的对象或数组中获取某些属性或元素，然而这些属性或元素并不总是存在的，而且在不同场合下可能会存在不同的嵌套深度，这就需要我们在取值的时候做出相应的判断，一般来说会采用 if...else 语句来处理。
ES11 中新增的可选链操作符（Optional Chaining Operator），可以让我们用一种更简单、更优雅的方式来访问对象嵌套中的属性或方法，并且可以避免出现意外的错误，本文将详细介绍如何使用。
可选链操作符的简介
可选链操作符是 ES11 中新增的一项语法特性，它由问号（?）和点号（.）组成，其作用是当对象某个属性或方法不存在时，不再像以往那样报错，而是返回 undefined。
下面是一些示例：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -
-
-
-
---------------------- -- -
---------------------- -- ---------- ------ ---- -------- --- -- ---------
------------------------ -- -
------------------------ -- ---------可以看到，当使用可选链操作符时，如果要取值的属性或方法不存在时，不会报错而是返回 undefined。
如何使用可选链操作符
这里将介绍如何使用可选链操作符来代替传统的 if...else 语句。
1. 基本用法
假设有这样一个对象：
-- -------------------- ---- -------
----- ---- - -
----- -----
---- ---
-------- ------ ----- -------
-------- -
--------- -----
----- -----
--------- -----
-
-如果要获取用户的地址区县信息，我们可以用如下的 if...else 语句来处理：
let district = ''
if (user.address && user.address.district) {
district = user.address.district
}
console.log(district) // '南山区'这里需要判断 user.address 和 user.address.district 是否存在，如果存在则将 user.address.district 赋值给变量 district。
而如果使用可选链操作符，可以写成这样：
const district = user.address?.district console.log(district) // '南山区'
这样代码看起来更简洁明了。
2. 链式用法
假设有这样一个对象：
const data = {
items: [
{ name: '苹果', price: 5 },
{ name: '香蕉', price: 3 },
{ name: '樱桃', price: 10 }
]
}现在要获取第一个商品的名称和价格，首先我们需要获取 data.items[0]，然后再从中取出名称和价格，传统的写法如下：
let name = ''
let price = 0
if (data.items && data.items[0]) {
name = data.items[0].name
price = data.items[0].price
}
console.log(name, price) // '苹果' 5而使用可选链操作符，则可以这样写：
const name = data?.items?.[0]?.name const price = data?.items?.[0]?.price console.log(name, price) // '苹果' 5
这样代码看起来更简洁，并且可以避免意外的错误。
总结
使用可选链操作符可以让代码更加简洁明了，并且有助于避免因为属性或方法不存在而导致的错误。但是在使用时也需要注意一些细节，如空数组的判断和安全导航的使用等。通过本文的介绍，相信大家已经了解了可选链操作符的基本用法和链式用法，并能够在代码中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491ece148841e9894fdfa65