可选链运算符（?.）

（一）遇到的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. 可选链运算符**?.**允许读取位于连接对象链深处的属性的值，
   而不必明确验证链中的每个引用是否有效。或者可以说是不必知道所引用的值是否有内容
2. ?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
3. 在使用?.读取较为深的对象时 速度会比.更快

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?.();

（三）总结

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