?.的写法 后缀修饰符

概览:处理后端返回的数据data,写法:data?.name。解决vue框架编译出现的报错Cannot read property 'name' of undefined。出现问题的原因:这是因为我们试图访问对象中不在的 key 为 name 的属性,那么怎么解决呢?
若是当前对象不存在某个属性key,在vue中可以使用后缀修饰符,常用的是?和!。

代码举例:

            const resData = res.data.data || []const params1 = reactive({shyx: resData?.age?.shyx,shzwh: resData?.age?.shzwh,whys: resData?.age?.whys,})const params2 = resData.area?.map((item) => {return {name: item.name,value: item.num}})const params3 = reactive({partymember: resData?.partyMember?.partymember,other: resData?.partyMember?.other,})

vue3中两种后缀运算符:

在Vue 3中,有两个后缀运算符:?!,分别表示可选属性和非空断言。

?可选属性:表示该属性是可选的,如果该属性不存在,不会引发错误。

!非空断言:表示该属性一定存在,如果该属性不存在,则会引发错误。

?后缀运算符:

示例代码:

const message = { text: 'Hello World' }
const greeting = message.text?.toUpperCase() // greeting = 'HELLO WORLD'
const emptyMessage = {}
const emptyGreeting = emptyMessage.text?.toUpperCase() // emptyGreeting = undefined

结果分析:

 在上面的代码中,当message对象存在text属性时,可以将text属性的值转换为大写字母。而当emptyMessage对象不存在text属性时,使用?.运算符访问text属性不会引发错误,返回值为undefined

!后缀运算符: 

实例代码:

const message = { text: 'Hello World' }
const greeting = message.text!.toUpperCase() // greeting = 'HELLO WORLD'
const emptyMessage = {}
const emptyGreeting = emptyMessage.text!.toUpperCase() // TypeError

结果分析:

在上面的代码中,当message对象存在text属性时,可以将text属性的值转换为大写字母。而当emptyMessage对象不存在text属性时,使用!运算符访问text属性会引发错误,因为该属性不存在。 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/74583.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卸载本机已安装的node.js(v.16.13.0版本)

因为要用多版本的node,准备安装一个nvm管理,所以需要先卸载掉原来安装的v.16.13.0版本。 记录一下卸载过程 1、在系统设置-应用里卸载node 妈蛋这样卸载报错。。找了下根本没有这个路径 那就只能最简单的方法了,全部删掉 1、删除node的安装…

IDEA用Gradle构建项目时,lombok插件无效的解决办法

Lombok 可用来帮助开发人员消除 Java 的重复代码,尤其是对于简单的 Java 对象(POJO),比如说getter/setter/toString等方法的编写。它通过注解实现这一目的。 正确使用姿势 一、安装Lombok插件 菜单栏File -> Settings ->…

通过MySQL删除Hive元数据信息

之前遇到过一个问题,在进行Hive的元数据采集时,因为Hive表的文件已经被删除了,当时是无法删除表,导致元数据采集也发生了问题,所以希望通过删除Hive表的元数据解决上述问题。 之前安装时,经过特定的配置后…

Qt实现自定义QDoubleSpinBox软键盘

在Qt应用程序开发中,经常会遇到需要自定义输入控件的需求。其中,对于QDoubleSpinBox控件,如果希望在点击时弹出一个自定义的软键盘,以便用户输入数值,并将输入的值设置给QDoubleSpinBox,该如何实现呢&#…

【MySQL】MySQL数据类型

文章目录 一、数据类型的分类二、tinyint类型2.1 创建有符号数值2.2 创建无符号数值 三、bit类型三、浮点类型3.1 float3.2 decimal类型 四、字符串类型4.1 char类型4.2 varchar类型 五、日期和时间类型六、枚举和集合类型6.1 enum的枚举值和set的位图结构6.2 查询集合find_in_…

大数据技术之Clickhouse---入门篇---SQL操作、副本

星光下的赶路人star的个人主页 积一勺以成江河,累微尘以崇峻极 文章目录 1、SQL操作1.1 Insert1.2 Update 和 Delete1.3 查询操作1.4 alter操作1.5 导出数据 2、副本2.1 副本写入流程2.2 配置步骤 1、SQL操作 基本上来说传统关系型数据库(以 MySQL 为例…

Java 使用 Google Guava 实现接口限流

一、引入依赖 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version> </dependency>二、自定义注解及限流拦截器 自定义注解&#xff1a;Limiter package com.haita…

linux 常用命令

防火墙 1.查看下防火墙的状态&#xff1a;systemctl status firewalld systemctl stop firewalld 关闭 systemctl disable firewalld 开机不启永久关闭 2.查看已开放的端口firewall-cmd --zonepublic --list-ports firewall-cmd --permanent --zonepublic --…

【Android Framework系列】第9章 AMS之Hook实现登录页跳转

1 前言 前面章节我们学习了【Android Framework系列】第5章 AMS启动流程和【Android Framework系列】第6章 AMS原理之Launcher启动流程&#xff0c;大概了解了AMS的原理及启动流程&#xff0c;这一章节我们通过反射和动态代理对不同Android版本下的AMS进行Hook&#xff0c;实现…

SpringCloudAlibaba:服务网关之Gateway的cors跨域问题

目录 一&#xff1a;解决问题 二&#xff1a;什么是跨域 三&#xff1a;cors跨域是什么&#xff1f; 一&#xff1a;解决问题 遇到错误&#xff1a; 前端请求时报错 解决&#xff1a; 网关中添加配置文件&#xff0c;注意springboot版本&#xff0c;添加配置。 springboo…

【FPGA IP系列】FIFO的通俗理解

FPGA厂商提供了丰富的IP核&#xff0c;基础性IP核都是可以直接免费调用的&#xff0c;比如FIFO、RAM等等。 本文主要介绍FIFO的一些基础知识&#xff0c;帮助大家能够理解FIFO的基础概念。 一、FIFO介绍 FIFO全称是First In First Out&#xff0c;即先进先出。 FIFO是一个数…

Go学习第三天

map的三种声明定义方式 声明map后&#xff0c;一定要make开辟空间&#xff0c;否则会报越界且不能使用 package mainimport "fmt"func main() {// 第一种声明方式// 声明myMap1是一种map类型 key是string value是stringvar myMap1 map[string]string// 判断一下map在…

ad+硬件每日学习十个知识点(20)23.7.31 (芯片和天线间的巴伦电路)

文章目录 1.什么是前端电路&#xff1f;2.什么是巴伦电路&#xff1f;3.巴伦电路的性能参数4.LC巴伦电路5.ADS是干什么的&#xff1f;6.HFSS是干什么的&#xff1f;7.ANSYS有限元软件8.常用的电路仿真软件都有什么&#xff1f;9.巴伦电路的复端阻抗LC10.微带巴伦&#xff08;不…

数据可视化(七)常用图表的绘制

1. #seaborn绘制常用图表 #折线图 #replot&#xff08;x&#xff0c;y&#xff0c;kind&#xff0c;data&#xff09; #lineplot&#xff08;x&#xff0c;y&#xff0c;data&#xff09; #直方图 #displot&#xff08;data&#xff0c;rug&#xff09; #条形图 #barplot&…

【雕爷学编程】 MicroPython动手做(35)——体验小游戏

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

机器学习笔记之优化算法(九)收敛速度的简单认识

机器学习笔记之优化算法——收敛速度的简单认识 引言收敛速度的判别标准 Q \mathcal Q Q-收敛速度 R \mathcal R R-收敛速度关于算法复杂度与收敛速度 引言 本节对收敛速度简单介绍。 收敛速度的判别标准 我们之前几节介绍了线搜索方法 ( Line Search Method ) (\text{Line …

bash的特性(二)IO重定向与管道

bash的I/O重定向及管道 一、概述 在shell中&#xff0c;最常使用的fd(file descriptor)有三个&#xff0c;标准输入&#xff0c;标准输出&#xff0c;错误输出。进程用文件描述符来管理打开的文件。 名称 文件描述符 标准输入&#xff08;stdin) 0 键盘&#xff0c;也可以…

【BEV感知】3-BEV开源数据集

3-BEV开源数据集 1 KITTI1.1 KITTI数据怎么采集?1.2 KITTI数据规模有多大?1.3 KITTI标注了哪些目标?1.4 转换矩阵1.5 标签文件 2 nuScenes2.1 nuScenes Vs KITTI2.2 标注文件 1 KITTI KITTI 1.1 KITTI数据怎么采集? 通过车载相机、激光雷达等传感器采集。 只提供了相机正…

【BEV感知】1-BEV感知算法介绍

1-BEV感知算法介绍 1 什么是BEV感知算法&#xff1f;1.1 什么是BEV&#xff1f;1.2 什么是感知&#xff1f;1.3 什么是算法&#xff1f;1.4 什么是BEV感知&#xff1f; 1 什么是BEV感知算法&#xff1f; 1.1 什么是BEV&#xff1f; Bird’s-Eye-View&#xff0c;尺度变化小、…

优化供应链和库存管理:PDM系统的物料控制之道

在现代制造业中&#xff0c;优化供应链和库存管理是企业实现高效运营和降低成本的重要目标。PDM系统作为一款强大的数字化工具&#xff0c;扮演着物料控制之道的角色&#xff0c;帮助企业实现优化供应链和库存管理的目标。让我们一同深入探讨&#xff0c;看看PDM系统是如何通过…