js可选操作符?.解决调用值报错问题

可选链操作符?.解决调用值报错问题

问题描述

用户切换身份权限，点击菜单无反应。
原因：

session的变量以及属性值，只有在用户点击对应的页面才会被初始化。

用户未点击该页面前，先执行路由拦截的流程，引用了存储在session中未被定义的对象属性值，导致进程被阻塞，无法执行权限切换逻辑。

示例

session中存储的动态对象变量：

tempAreaInfo = {
  areaId:'',
  roomId:''
}

路由拦截文件中的错误写法：

let areaObj;
let obj = JSON.parse(window.sessionStorage.getItem('tempAreaInfo'));
if(obj){
  areaObj = { id: obj.checkedWorkId };
}else{
  areaObj = store.state.userBindService.childList[0];
}

解决方法

使用可选链操作符判断对象储值状态

更改后的写法

let areaObj;
let obj = JSON.parse(window.sessionStorage.getItem('tempAreaInfo'));
if(obj?.checkedWorkId){
  areaObj = { id: obj.checkedWorkId };
}else{
  areaObj = store.state.userBindService.childList[0];
}

相关知识点

可选链运算符?.

描述

连接的对象的引用或函数可能时undefined或null，可选链运算符提供一种方法简化被连接对象的访问

例如：

在上面的示例中，不使用可选链操作符的写法：

let areaObj;
let obj = JSON.parse(window.sessionStorage.getItem('tempAreaInfo'));
if(obj&&obj.checkedWorkId){
  areaObj = { id: obj.checkedWorkId };
}else{
  areaObj = store.state.userBindService.childList[0];
}

使用可选链操作符，JavaScript会在尝试访问obj.checkedWorkId前，先隐式地检查并确定obj既不是null也不是undefined,如果obj是null或是undefined，表达式会将短路计算直接返回undefined