当前位置: 首页 > news >正文

?.的写法 后缀修饰符

概览:处理后端返回的数据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属性会引发错误,因为该属性不存在。 

 

相关文章:

?.的写法 后缀修饰符

概览:处理后端返回的数据data,写法:data?.name。解决vue框架编译出现的报错Cannot read property name of undefined。出现问题的原因:这是因为我们试图访问对象中不在的 key 为 name 的属性,那么怎么解决呢&#xff…...

org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决

Error while processing statement: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. show Locks LockManager not specified解决 当在Hive中执行show locks语句时,出现"LockManager not specified"错误通常是由于…...

Adaptive autosar 都有哪些模块?各有什么功能?

Adaptive autosar是一种用于高性能计算ECU的软件平台,它支持自适应应用程序的开发和运行。它由两部分组成:基础(Foundation)和服务(Service)。基础包括了操作系统接口、执行管理、网络管理、识别访问管理、加密、更新和配置管理等功能。服务包括了通信管理、RESTful、时间…...

C++ 动态内存分配

在C中动态内存的分配技术可以保证程序在允许过程中按照实际需要申请适量的内存,使用结束后还可以释放,这种在程序运行过程中申请和释放的存储单元也称为堆。 申请和释放过程一般称为建立和删除。 在C程序中,建立和删除堆对象使用两个运算符&…...

设计模式——面向对象的7大设计原则

1.单一职责原则 一个类中最好只放一种类型的方法,比如Dao中只有和数据库交互相关的代码。实现高内聚,低耦合。 2.开闭原则 对外拓展开放,对内修改关闭,有新的需求时不要修改已有代码,而是添加新的代码,比…...

智慧防汛,数字科技的力量

随着夏日的脚步临近,台风季节即将降临。对于那些居住在沿海地区的人们来说,台风是一种常见的自然灾害,其带来的风雨可能对生命和财产造成严重威胁。然而,随着数字科技的飞速发展,可视化技术为防汛抗台工作带来了全新的…...

“中国软件杯”飞桨赛道晋级决赛现场名单公布

“中国软件杯”大学生软件设计大赛是由国家工业和信息化部、教育部、江苏省人民政府共同主办,是全国软件行业规格最高、最具影响力的国家级一类赛事,为《全国普通高校竞赛排行榜》榜单内赛事。今年,组委会联合百度飞桨共同设立了“智能系统设…...

JDBC处理批量数据提高效率

文章目录 0 说明1 如何使用jdbc操作数据库1.1 加载数据库驱动1.2 建立数据库连接1.3 创建Statement或者PreparedStatement用来执行SQL1.4 开始执行SQL语句1.5 处理结果集1.6 关闭连接1.7 完整代码 2 批量操作数据库3 如何打印SQL语句4 jdbc常用开源类库 1 JDBC实现往MySQL插入百…...

使用css和js给按钮添加微交互的几种方式

使用css和js给按钮添加微交互的几种方式 在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文…...

react面试之context的value变化时,内部所有子组件是否变化

上测试代码 // context const state {a: 1,b: 1, } const context createContext(state);export default context; // A组件 const A () > {const { a } useContext(context);return (<div>{a}</div>) } export default A;// B组件 const B () > {cons…...

使用okHttp不走代理问题

背景 某日使用okhttp设置代理并发送爬虫请求时&#xff0c;发现部分url请求没有走代理直接和目标url建立了连接&#xff0c;伪代码如下。初始化okhttpClient时设置了proxySelecter代理&#xff0c;但是调用okhttpClient.newCall请求时并没用调用proxySelecter.select函数获取代…...

python moviepy 自动化音视频处理实践

MoviePy是一个用于视频编辑的Python库。它提供了一种简单且直观的方式来处理视频文件&#xff0c;包括剪辑、合并、裁剪、添加文本、添加音频等操作。使用MoviePy&#xff0c;你可以通过编写Python代码来创建和编辑视频&#xff0c;而无需使用复杂的视频编辑软件。 MoviePy建立…...

聊聊混合动力汽车和纯电骑车的优势和劣势

混合动力汽车和纯电动骑车是两种不同的交通工具&#xff0c;它们都有各自的优势和劣势。本文将分别探讨混合动力汽车和纯电动骑车的优势和劣势&#xff0c;并为文章提供三个备选的好听的标题。 混合动力汽车是一种结合了内燃机和电动机的汽车&#xff0c;它可以同时利用燃油和电…...

算法训练Day39|62.不同路径 ● 63. 不同路径 II

LeetCode:62.不同路径 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; 1.思路 想象成矩阵填格子&#xff0c;两个关键点&#xff0c;初始化和递推公式。 初始化除点&#xff08;0&#xff0c;0&#xff09;第一行第一列均为1&#xff0c;递推公式推导dp[i][j] dp[i …...

react中hooks分享

一. HOOKS是什么 在计算机程序设计中&#xff0c;钩子一词涵盖了一系列技术&#xff0c;这些技术用来通过拦截函数调用、消息或在软件组件之间传递的事件来改变或增加操作系统、应用程序或其他软件组件的行为。处理这些被截获的函数调用、事件或消息的代码称为“hook”。 在r…...

LeetCode1207. 独一无二的出现次数

题干 给你一个整数数组 arr&#xff0c;请你帮忙统计数组中每个数的出现次数。 如果每个数的出现次数都是独一无二的&#xff0c;就返回 true&#xff1b;否则返回 false。 示例1&#xff1a; 输入&#xff1a;arr [1,2,2,1,1,3] 输出&#xff1a;true 解释&#xff1a;在该…...

【maven】构建项目前clean和不clean的区别

其实很简单&#xff0c;但是百度搜了一下&#xff0c;还是没人能简单说明白。 搬用之前做C项目时总结结论&#xff1a; 所以自己在IDE里一遍遍测试程序能否跑通的时候&#xff0c;不需要clean&#xff0c;因为反正还要改嘛。 但是这个项目测试好了&#xff0c;你要打成jar包给…...

Stable Diffusion 硬核生存指南:WebUI 中的 CodeFormer

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件&#xff0c;强壮的人脸图像面部画面修复模型 CodeFormer 相关的事情。 写在前面 在 Stable Diffusion WebUI 项目中&#xff0c;源码 modules 目录中&#xff0c;有一个有趣的目录叫做 CodeFormer&#xff0c;它就是本文的…...

从零开始理解Linux中断架构(24)软中断核心函数__do_softirq

1)概要 __do_softirq函数处理是总是尽可能的执行所有未决软中断。 (1)关闭软中断:在preempt_count设置软中断标志:SOFTIRQ_OFFSET 让in_interrupt检查条件为真,进入软中断处理临界区,后面进来的处理请求,需要检查in_interrupt(),从而达到禁止本cpu上的软中断嵌套的目…...

【云原生】Kubernetes中deployment是什么?

目录 Deployments 更新 Deployment 回滚 Deployment 缩放 Deployment Deployment 状态 清理策略 金丝雀部署 编写 Deployment 规约 Deployments 一个 Deployment 为 Pod 和 ReplicaSet 提供声明式的更新能力。 你负责描述 Deployment 中的 目标状态&#xff0c;而 De…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...