?.的写法 后缀修饰符

news/2024/2/21 9:09:18

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

相关文章

QWidget样式

1、设置边框样式: QWidget {font-family:Microsoft YaHei UI;background:#ffffff;/*border:3px solid rgba(207, 209, 208, 170);设置整体边框*/border-bottom: 3px solid rgba(207, 209, 208, 170);/*设置底部边框*/border-top: 3px solid rgba(207, 209, 208, 1…

postman----传参格式(json格式、表单格式)

本文主要讲解postman使用post请求方法的2中传参方式:json格式、表单格式 首先了解下,postman进行接口测试,必须条件是: ♥请求地址 ♥请求协议 ♥请求方式 ♥请求头 ♥参数 json格式 先看一下接口文档,根据接口文档&…

react icon ant简单使用

refer&#xff1a; 文字提示 Tooltip - Ant Design 1.首先保证已经引入了Ant 2.在组件&#xff08;页面&#xff09;引入tooltip import { Form, Tooltip } from antd; 3.在合适的位置使用tooltip&#xff1a; <span>寿命 <Tooltip title"这是寿命的说明&quo…

redis原理 3:未雨绸缪 —— 持久化

redis原理 3&#xff1a;未雨绸缪 —— 持久化 Redis 的数据全部在内存里&#xff0c;如果突然宕机&#xff0c;数据就会全部丢失&#xff0c;因此必须有一种机制来保证 Redis 的数据不会因为故障而丢失&#xff0c;这种机制就是 Redis 的持久化机制。 Redis 的持久化机制有两种…

[Docker实现测试部署CI/CD----自由风格的CI操作[中间架构](4)]

10、自由风格的CI操作&#xff08;中间架构&#xff09; 中间架构图 创建web项目 创建一个 web 项目&#xff0c;就使用简单的 spring boot 工程&#xff0c;例如工程名为 hellojks。仅需导 入 spring web 依赖即可。 import org.springframework.web.bind.annotation.GetMapp…

Spring接口InitializingBean的作用和使用介绍

在Spring框架中&#xff0c;InitializingBean接口是一个回调接口&#xff0c;用于在Spring容器实例化Bean并设置Bean的属性之后&#xff0c;执行一些自定义的初始化逻辑。实现InitializingBean接口的Bean可以在初始化阶段进行一些必要的操作&#xff0c;比如数据的初始化、资源…

深度学习Redis(1):Redis内存模型

前言 Redis是目前最火爆的内存数据库之一&#xff0c;通过在内存中读写数据&#xff0c;大大提高了读写速度&#xff0c;可以说Redis是实现网站高并发不可或缺的一部分。 我们使用Redis时&#xff0c;会接触Redis的5种对象类型&#xff08;字符串、哈希、列表、集合、有序集合…

Agents改变游戏规则,亚马逊云科技生成式AI让基础模型加速工作流

最近&#xff0c;Stability AI正式发布了下一代文生图模型——Stable Diffusion XL 1.0这次的1.0版本是Stability AI的旗舰版生图模型&#xff0c;也是最先进的开源生图模型。 在目前的开放式图像模型中&#xff0c;SDXL 1.0是参数数量最多的。官方表示&#xff0c;这次采用的…

Django的FBV和CBV

Django的FBV和CBV 基于django开发项目时&#xff0c;对于视图可以使用 FBV 和 CBV 两种模式编写。 FBV&#xff0c;function base views&#xff0c;其实就是编写函数来处理业务请求。 from django.contrib import admin from django.urls import path from app01 import view…

Python: Django 服务部署可能遇到的一些问题

502 bad gateway 不要用 python3 manage.py runserver 启动服务&#xff0c; 而要用&#xff1a; daphne -b 0.0.0.0 -p <端口> <工程名>.asgi:application此外&#xff0c;在 setting.py 中&#xff0c;修改&#xff1a; import osSECRET_KEY os.environ.get(D…

kafka权威指南(阅读摘录)

零复制 Kafka 使用零复制技术向客户端发送消息——也就是说&#xff0c;Kafka 直接把消息从文件&#xff08;或者更确切地说是 Linux 文件系统缓存&#xff09;里发送到网络通道&#xff0c;而不需要经过任何中间缓冲区。这是 Kafka 与其他大部分数据库系统不一样的地方&#…

详解使用SSH远程连接Ubuntu服务器系统

演示环境&#xff1a; 1.Windows10系统 2.VMware Workstation Pro虚拟机 2.Ubuntu16.04.6&#xff08;以上版本通用&#xff09; 回归正题 一、在Ubuntu端&#xff1a; 1.首先需要安装SSH服务器&#xff0c;在ubuntu终端输入以下指令 sudo apt-get install ssh2.输入你的ubu…

数据标注对新零售的意义及人工智能在新零售领域的应用?

数据标签对于新零售至关重要&#xff0c;因为它构成了训练和部署人工智能&#xff08;AI&#xff09;和机器学习&#xff08;ML&#xff09;模型的基础。在新零售的背景下&#xff0c;数据标签涉及对数据进行分类、标记或注释以使其能够被机器理解的过程。然后&#xff0c;这些…

C++、python双语言弹窗教程与对比

Messagebox弹窗 MessageBox指的是显示一个模态对话框&#xff0c;其中包含一个系统图标、 一组按钮和一个简短的特定于应用程序消息&#xff0c;如状态或错误的信息。消息框中返回一个整数值&#xff0c;该值指示用户单击了哪个按钮。 例子&#xff1a; 本文介绍了用C、Pytho…

浅谈Vue3 computed计算属性

什么是computed 官方给出的解释&#xff1a;接受一个 getter 函数&#xff0c;返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象 // 只读 function computed<T>(ge…

InterProcessMutex 类的作用和使用

InterProcessMutex 类是Curator框架中的一个分布式锁的实现&#xff0c;用于在分布式环境下实现互斥锁。 InterProcessMutex 的使用步骤如下&#xff1a; 创建 CuratorFramework 客户端实例&#xff0c;并启动客户端连接到 ZooKeeper 服务器。使用 CuratorFramework 的 creat…

【若依管理系统】开发功能流程总结

1.在菜单管理中&#xff0c;新增需要创建的菜单&#xff0c;如图 并添加查询、新增、修改、删除等按钮和对应的权限和路径 例如如果没有添加查询按钮&#xff0c;那么在修改的时候&#xff0c;会存在报错&#xff1a;没有权限。上图对应后台代码 2.domain中创建设计的表结构及操…

Vue 路由 路由守卫

路由守卫 正如其名&#xff0c; vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。简单来说&#xff0c;就是在路由跳转 时候的一些钩子&#xff0c;当从一个页面跳转到另一个页面时&#xff0c;可以在跳转前、中、后做一些事情。 当你打开一个页面的前后需…

亚马逊、temu等跨境电商平台怎么通过自养号测评提升产品排名?

评论在卖家运营中的重要性无需我多言&#xff0c;大家都知道它对产品的销量和排名有着重要影响&#xff0c;那么&#xff0c;如何通过自养号测评提升销量和排名呢&#xff1f; 下面我将详细介绍一下&#xff1a; 稳定的测评环境系统&#xff1a; 选择一个稳定高效的测评环境…

微信小程序:点击按钮实现数据加载(带模糊查询)

效果图 代码 wxml: <!-- 搜索框--> <form action"" bindsubmit"search_all_productiond"><view class"search_position"><view class"search"><view class"search_left">工单号:</view…
最新文章