JavaScript中可选链(?.)用法示例详解
作者:前端代码王
简介
在JavaScript
中,我们经常需要处理JSON
数据对象,而JSON
数据对象的层级较深,处理其属性值时就会显得较为麻烦,此时可选链(Optional Chaining
)就派上用场了。
可选链是一种方便的语法糖,可以简化层级深的对象属性访问的过程。也就是说,在访问一个对象中的属性时,如果该属性不存在,我们将不必再像以前那样判断对象的每一层级是否存在这个属性,而是使用可选链的方式直接访问,代码的可读性和简洁性也得到了极大的提升。
下面举个例子,假设我们有一个表示学生的json
对象,里面包含了学生的姓名、年龄和地址等详细信息。现在我们需要使用一系列“.”来访问其中每个属性,这时代码就显得很冗长:
const student = { name: "张三", age: 18, address: { province: "北京", city: "朝阳区", street: "南湖东路1号" } }; let street = ""; if (student.address && student.address.province === "北京" && student.address.city === "朝阳区") { street = student.address.street; } console.log(street);
上面的代码中,我们使用了冗长的if语句来验证是否存在地址信息,并且访问该地址的街道信息。
而使用可选链的方式,我们可以更加简洁的实现:
const student = { name: "张三", age: 18, address: { province: "北京", city: "朝阳区", street: "南湖东路1号" } }; const street = student?.address?.province === "北京" && student.address.city === "朝阳区" ? student.address.street : ""; console.log(street);
代码中的 "?. " 是可选链操作符,它允许我们在属性的值可能为 undefined
的情况下安全地访问对象的属性。例如,在这个示例中,如果属性 student.address
或 student.address.city
是 undefined
,则最后的结果也将是 undefined
,我们就无需再做逐个判断了,更具可读性。
另外一个细节是可选链问号 ? 只能用在点 . 符号之前。如果前面的变量或表达式为 null
或 undefined
,那么整个表达式的返回值就是 undefined
。
值得注意的是,可选链操作符只在最新版的ES2020规范中被正式引入,在一些旧版本下可能会有不兼容的问题。
和其它相似方法的区别
和可选链类似的语法糖还有其它一些方法,如“&&”,使用它们的方式和可选链有些许不同。
举个例子,我们假设有一个user
对象用于存储人们的姓名和地址信息,其中address
也是一个对象类型,里面包含了省市区等信息:
const user = { name: "Amy", address: { province: "湖北省", city: "武汉市", area: "洪山区", } }
如果要获取用户所在区域,我们可以使用&&
运算符将它们连接起来实现类似于可选链式的访问方式:
const area = user.address && user.address.area;// 洪山区
然而,这种方法在处理对象层次结构较多的对象时会显得很麻烦。在这种情况下,可选链会更加直观和方便。
我们可以使用可选链,以更加简练和易于阅读的方式来访问属性:
const area = user?.address?.area
总结
使用可选链可以为写代码带来更加直观和方便的体验
以上就是JavaScript中可选链(?.)用法示例详解的详细内容,更多关于JavaScript可选链(?.)用法的资料请关注脚本之家其它相关文章!