可选链运算符(?.)

简介: 可选链运算符(?.)

(一)遇到的bug情景及解决方案

在刚开始写尚品汇项目的时候,由于没有对axios进行requests二次封装,导致返回的请求 state.xx.xx.xx.xx层级比较深

const res = this.$store.state.xxx.xx.xx.xx
console.log(res)

控制台输出的时候 总是显示输出的值为undefined但是在Vuex中却能拿到这个res 也就是说这个res拿到的时间比mounted的时间更慢

解决方法:

const res = this.$store.state.xxx.xx.xx?.xx
console.log(res)

即可

(二)拓展延伸新知识

2.1简介

  1. 可选链运算符**?.**允许读取位于连接对象链深处的属性的值,

      而不必明确验证链中的每个引用是否有效。或者可以说是不必知道所引用的值是否有内容

  1. ?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
  2. 在使用?.读取较为深的对象时 速度会比.更快

2.2语法

obj.state.data.abc
obj.state.data.asbc.bc

在想要拿到bc的值的时,如果此时bc的值为null则在进行

const res = obj.state.data.abc.bc
console.log(res)

则会报错,此时需要进行一一排查obj.state–obj.state.data–obj.state.abc要知道此时对应的值是null或者undefined

当使用(?.)可选链式运算符的时候。js会隐式的对以上属性进行一一排查。如果值不为null或者undefined则进行下一步获取内容。如果有任何一个为undefined则会直接打印出undefined


可选链与函数调用

当尝试调用一个可能不存在的方法时也可以使用可选链。这将是很有帮助的,比如,当使用一个 API 的方法可能不可用时,要么因为实现的版本问题要么因为当前用户的设备不支持该功能。


函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回undefined而不是抛出一个异常。

let result = someInterface.customMethod?.();

(三)总结

使用可选链操作符可以避免由于调用对象不存在的属性或方法导致的报错,报错有可能导致程序无法正常执行。

目录
相关文章
|
10月前
|
安全 程序员 C++
7运算符
7运算符
63 1
|
10月前
1-6 运算符
1-6 运算符
58 0
|
4月前
|
Python
海象运算符
海象运算符。
74 2
|
6月前
|
前端开发 JavaScript
前端基础(五)_运算符(算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性、数据类型的隐式转换)
本文介绍了JavaScript中的算术运算符、赋值运算符、比较运算符、逻辑运算符、三目运算符、运算符优先级和结合性以及数据类型的隐式转换。
115 3
|
10月前
|
算法 程序员 C语言
c运算符介绍
c运算符介绍
57 1
|
10月前
|
编译器 测试技术 Go
表达式求值——隐式类型转换与操作符属性
表达式求值——隐式类型转换与操作符属性
|
10月前
|
开发框架 .NET 程序员
C#三元运算符使用技巧
C#三元运算符使用技巧
87 0
|
10月前
|
存储 弹性计算 运维
使用OR运算符
【4月更文挑战第29天】
54 0
|
10月前
? : 运算符(三元运算符)
? : 运算符(三元运算符)。
67 7
|
10月前
|
JavaScript
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
TypeScript 中常用的运算符:算术运算符、赋值运算符、逻辑运算符、比较运算符和位运算符
186 1