?.的写法 后缀修饰符

概览:处理后端返回的数据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.mzph.cn/news/21329.shtml

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

相关文章

cpolar内网穿透外网远程访问本地网站

cpolar内网穿透外网远程访问本地网站 文章目录 cpolar内网穿透外网远程访问本地网站 在现代人的生活中,电脑是离不开的重要设备,大家看到用到的各种物品都离不开电脑的支持。尽管移动电子设备发展十分迅速,由于其自身存在的短板,使…

SpringBoot2.5.6整合Elasticsearch7.12.1

SpringBoot2.5.6整合Elasticsearch7.12.1 下面将通过SpringBoot整合Elasticseach,SpringBoot的版本是2.5.6,Elasticsearch的版本是7.12.1。 SpringBoot整合Elasticsearch主要有三种方式,一种是通过elasticsearch-rest-high-level-client&am…

科技的成就(四十九)

381、机器人 Unimate 诞生 "1961 年,第一款工业机器人 Unimate 诞生。工程师恩格尔伯格受阿西莫夫小说《我,机器人》影响,与发明家德沃尔成立了 Unimation。1961 年,公司的第一台机器 人 Unimate 开始在通用电气新泽西工厂试…

Kotlin~Facade

概念 又称门面模式,为复杂系统提供简单交互接口。 角色介绍 Facade:外观类,供客户端调用,将请求委派给响应的子系统。SubSystem:子系统,独立的子设备或子类 UML 代码实现 class Light(val name: Strin…

STM32基础回顾

文章目录 单片机编程的原理GPIO中断EXTI外部中断定时器中断、串口中断 定时器定时器中断配置过程通用定时器输出比较功能:PWM波的生成定时器的输入捕获功能主从触发模式PWMI模式 定时器的编码器接口 DMA简介通信接口USART软件配置流程:1、仅发数据的配置…

java 异常 java.util.ConcurrentModificationException java 删除集合中满足条件的元素

java 异常 java.util.ConcurrentModificationException java.util.ConcurrentModificationException是Java中的一个常见异常,通常在使用迭代器或并发操作时发生。当集合在迭代过程中被修改时,就可能会抛出这个异常。 这个异常是为了帮助开发人员发现并…

计算两个日期相差几年几月几天,考虑闰年平年

java8以下 计算两个日期相差几年几月几天,考虑闰年平年 // java 计算两个日期相差几年几月几天,考虑闰年平年public void calculateDifference(String startDade, String endDate) {Calendar calendar1 Calendar.getInstance(); // 第一个日期&#…

深度解析线程池的文章

java 系统的运行归根到底是程序的运行,程序的运行归根到底是代码的执行,代码的执行归根到底是虚拟机的执行,虚拟机的执行其实就是操作系统的线程在执行,并且会占用一定的系统资源,如CPU、内存、磁盘、网络等等。所以&a…

【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT 3

1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨,在1995年出版的《未来之路》一书中,提及“物物互联”。1998年麻省理工学院提出,当时被称作EPC系统的物联网构想。2005年11月,国际电信联盟发布《ITU互联网…

JavaScript高阶函数和闭包

在JavaScript编程中,高阶函数和闭包是两个重要而又常见的概念。它们是函数式编程的重要组成部分,可以让我们的代码更加灵活、简洁和高效。本文将详细解释高阶函数和闭包的概念、用法以及它们在JavaScript中的重要性。 高阶函数 1. 什么是高阶函数&…

uniapp 中过滤获得数组中某个对象里id:1的数据

// 假设studentData是包含多个学生信息的数组 const studentData [{id: 1, name: 小明, age: 18},{id: 2, name: 小红, age: 20},{id: 3, name: 小刚, age: 19},{id: 4, name: 小李, age: 22}, ]; // 过滤获取id为1的学生信息 const result studentData.filter(item > ite…

Akuity Certified ArgoCD课程学习与认证

今天是「DevOps云学堂」与你共同进步的第 48天 第⑦期DevOps实战训练营 7月15日已开营 实践环境升级基于K8s和ArgoCD 本文主要分享,如何免费地参与由Akuity Academy提供的ArgoCD GitOps 培训课程并取得认证证书。 目前Akuity Academy只发布了Introduction to Contin…

Django学习笔记-默认的用户认证系统(auth)

一、Django默认的用户认证系统 Django 自带一个用户验证系统。它负责处理用户账号、组、权限和基于cookie的用户会话。 Django 验证系统处理验证和授权。简单来说,验证检验用户是否是他们的用户,授权决定已验证用户能做什么。这里的术语验证用于指代这…

Python-操作Excel表-openpyxl模块使用

openpyxl简介 openpyxl是一个强大的Python库,用于读写Excel(xlsx/xlsm/xltx/xltm)文件。 主要功能和特点如下: 读取、修改、写入Excel文件,支持格式如xlsx、xlsm等支持 Excel 2003 以上格式可以很方便地遍历工作表中的行和列获取单元格对象后,可以修改单元格的值、样式、格式…

使用 FastGPT 构建高质量 AI 知识库

作者:余金隆。FastGPT 项目作者,Sealos 项目前端负责人,前 Shopee 前端开发工程师 FastGPT 项目地址:https://github.com/labring/FastGPT/ 引言 自从去年 12 月 ChatGPT 发布以来,带动了一轮新的交互应用革命。尤其在…

GPT Prompt编写的艺术:如何提高AI模型的表现力

随着AI技术的迅速发展,人工智能模型变得越来越强大,能够协助我们完成各种任务。然而,如何更好地利用AI的能力仍然存在很大的探索空间。在与AI进行交互的过程中,我们主要依赖于Prompt,不管是直接与大模型交互&#xff0…

layui之layer弹出层的icon数字及效果展示

layer的icon样式 icon如果在信息提示弹出层值(type为0)可以传入0-6,icon与图标对应关系如下: 如果是加载层(type为3)可以传入0-2,icon与图标对应关系如下:

Java中运算符要注意的一些点

目录 1. 算术运算符 1. 1 基本四则运算符:加减乘除模( - * / %) 1.2. 增量运算符 - * % 2. 关系运算符 3. 逻辑运算符 3.1. 逻辑与 && 3.2. 逻辑 || 3.3. 逻辑非 ! 3.4. 短路求值 4. 位运算符 4.1. 按位与 &: 如果两个二进制位都是 …

骨传导耳机什么牌子好?盘点最受欢迎的几款骨传导耳机

骨传导耳机最近一两年越来越受欢迎,市场上不同形态的非入耳式耳机都有,从骨传导,夹耳式到气传导等等都有。骨传导耳机的好处有很多,非入耳式,不伤耳朵,佩戴更舒适更安全。但是一直以来,骨传导耳…

Effective Java笔记(25)限制源文件为单个顶级类

虽然 Java 编译器允许在一个源文件中定义多个顶级类,但这么做并没有什么好处,只会带来巨大的风险 。 因为在一个源文件中定义多个顶级类,可能导致给一个类提供多个定义 。 哪一个定义会被用到,取决于源文件被传给编译器的顺序 。 …