?.的写法 后缀修饰符
概览:处理后端返回的数据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 的属性,那么怎么解决呢ÿ…...
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设置代理并发送爬虫请求时,发现部分url请求没有走代理直接和目标url建立了连接,伪代码如下。初始化okhttpClient时设置了proxySelecter代理,但是调用okhttpClient.newCall请求时并没用调用proxySelecter.select函数获取代…...
python moviepy 自动化音视频处理实践
MoviePy是一个用于视频编辑的Python库。它提供了一种简单且直观的方式来处理视频文件,包括剪辑、合并、裁剪、添加文本、添加音频等操作。使用MoviePy,你可以通过编写Python代码来创建和编辑视频,而无需使用复杂的视频编辑软件。 MoviePy建立…...
聊聊混合动力汽车和纯电骑车的优势和劣势
混合动力汽车和纯电动骑车是两种不同的交通工具,它们都有各自的优势和劣势。本文将分别探讨混合动力汽车和纯电动骑车的优势和劣势,并为文章提供三个备选的好听的标题。 混合动力汽车是一种结合了内燃机和电动机的汽车,它可以同时利用燃油和电…...
算法训练Day39|62.不同路径 ● 63. 不同路径 II
LeetCode:62.不同路径 62. 不同路径 - 力扣(LeetCode) 1.思路 想象成矩阵填格子,两个关键点,初始化和递推公式。 初始化除点(0,0)第一行第一列均为1,递推公式推导dp[i][j] dp[i …...
react中hooks分享
一. HOOKS是什么 在计算机程序设计中,钩子一词涵盖了一系列技术,这些技术用来通过拦截函数调用、消息或在软件组件之间传递的事件来改变或增加操作系统、应用程序或其他软件组件的行为。处理这些被截获的函数调用、事件或消息的代码称为“hook”。 在r…...
LeetCode1207. 独一无二的出现次数
题干 给你一个整数数组 arr,请你帮忙统计数组中每个数的出现次数。 如果每个数的出现次数都是独一无二的,就返回 true;否则返回 false。 示例1: 输入:arr [1,2,2,1,1,3] 输出:true 解释:在该…...
【maven】构建项目前clean和不clean的区别
其实很简单,但是百度搜了一下,还是没人能简单说明白。 搬用之前做C项目时总结结论: 所以自己在IDE里一遍遍测试程序能否跑通的时候,不需要clean,因为反正还要改嘛。 但是这个项目测试好了,你要打成jar包给…...
Stable Diffusion 硬核生存指南:WebUI 中的 CodeFormer
本篇文章聊聊 Stable Diffusion WebUI 中的核心组件,强壮的人脸图像面部画面修复模型 CodeFormer 相关的事情。 写在前面 在 Stable Diffusion WebUI 项目中,源码 modules 目录中,有一个有趣的目录叫做 CodeFormer,它就是本文的…...
从零开始理解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 中的 目标状态,而 De…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程,并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令,把数据流转换成Message,状态转变流程是:State::Created 》 St…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
