可选链运算符(?.)

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

(一)遇到的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?.();

(三)总结

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

目录
相关文章
|
JavaScript
Vue 父传子组件传参 defineProps
Vue 父传子组件传参 defineProps
336 0
|
JavaScript 前端开发 安全
javascript中的可选链操作符
javascript中的可选链操作符
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
1806 0
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
712 2
|
6月前
|
人工智能 安全 API
身份证二、三要素实名认证API文档介绍
身份证二、三要素实名认证API,通过姓名、身份证号及头像比对权威数据源,快速核验用户身份真实性。广泛应用于金融、政务、电商等场景,助力企业合规运营,防范冒用身份等风险,保障账户安全与业务可信。
|
开发者 容器
【HarmonyOS Next之旅】ArkTS语法(二) -> 动态构建UI元素
当开发者创建自定义组件,并想对该组件添加特定功能时(例如在自定义组件中添加一个点击跳转操作)。为解决此问题,引入了@BuilderParam装饰器,此装饰器修饰的属性值可为@Builder装饰的函数,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。@BuilderParam装饰器用于修饰自定义组件内函数类型的属性(例如:@BuilderParam noParam: () => void),并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
331 11
|
JavaScript 前端开发 API
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
Vue Router【详解】含路由配置、路由定义、路由跳转、路由传参、自动注册路由、路由守卫、页面滚动、监听路由、$route、$router、路由过渡动画等
3903 1
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
在使用`for...of`循环时,如何跳出循环?
在使用`for...of`循环时,如何跳出循环?
676 58
|
安全 网络安全 开发者
2024 全网热门的服务器面板测评推荐
在当今数字化时代,服务器管理的效率和便捷性对于企业和开发者来说至关重要。服务器面板作为服务器管理的得力助手,能够极大地简化操作流程,提高管理效能。本
2024 全网热门的服务器面板测评推荐