08、关于语法:resp?.data?.data 的含义与实际操作中可能遇到的问题

1、数据情况:

其一、从后端拿到的数据为:


let resp.data = {"data": [],"lag_mode": 3,"totol": 0
}

或:


let resp.data = {"data": [],"totol": 0
}
其二、目标数据为:

// 想要执行 if(){} 语句中的代码;

// 可以不用考虑 resp?.status === 200 这个语句,因为 resp 中永远存在 status 属性,且其值为 200;


if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {// 待执行的代码块;configurationForm.value.lag_mode = resp.data.lag_modetableData.value = resp.data.data
}

2、操作过程:

其一、如何理解前端语法 "?" 的含义:

A、resp?.data?.data 如何理解(即:字面理解)?

答:这是 js 中的一种新的语法;resp?.data?.data 的意思是尝试获取 resp 中的 data 中的 data 属性,它和 resp.data.data 的意思是一样的,但是比 resp.data.data 的容错性更高。

B、resp?.data?.data 如何理解(即:具体理解)?
step1、此时 resp.data.data 的执行结果为:TypeError

在这里插入图片描述

step2、此时 resp?.data?.data 的执行结果为:undefined

在这里插入图片描述

3、可能遇到的问题:

其一、以存在 lag_mode 的返回值为例:

A、返回值代码为:

let resp.data = {"data": [],"lag_mode": 3,"totol": 0
}
B、此时执行如下代码,是能执行 if(){} 语句中的代码的(即:达到目标)

其二、以不存在 lag_mode 的返回值为例:


if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {// 待执行的代码块;configurationForm.value.lag_mode = resp.data.lag_modetableData.value = resp.data.data
}
A、返回值代码为:

let resp.data = {"data": [],"totol": 0
}
B、此时执行如下代码,是不能执行 if(){} 语句中的代码的(即:出问题)

if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {// 待执行的代码块;configurationForm.value.lag_mode = resp.data.lag_modetableData.value = resp.data.data
}

其三、整体的展示:

A、虽然数据中的 resp?.data?.data 语句,拿到的值是

// 但仍然是可以执行 if(){} 中的语句;

在这里插入图片描述
代码为:


let resp = {
"data": {"data": []
},
"totol": 0}
console.log(resp?.data?.data,1111111)
if(resp?.data?.data) {
console.log("我能成功打印")
}
B、数据中的 resp?.data?.lag_mode 语句,拿到的值是 ‘’(即:空(字符串)):

// 但不可以执行 if(){} 中的语句,因为拿到的值为空;

在这里插入图片描述

代码为:


let resp = {
"data": {"data": [],"lag_mode": '',
},
"totol": 0}
console.log(resp?.data?.lag_mode,2222222)
if(resp?.data?.lag_mode) {
console.log("我能成功打印")
}
C、数据中的 resp?.data?.lag_mode 语句,拿到的值是 0

// 但仍然是可以执行 if(){} 中的语句;

在这里插入图片描述

代码为:


let resp = {
"data": {"data": [],"lag_mode": '0',
},
"totol": 0}
console.log(resp?.data?.lag_mode,333333333)
if(resp?.data?.lag_mode) {
console.log("我能成功打印")
}
D、数据中的 resp?.data?.lag_mode 语句,拿到的值是 undefined(即:根本没有 lag_mode 这个属性值):

// 是不可以执行 if(){} 中的语句;

在这里插入图片描述

代码为:


let resp = {
"data": {"data": []
},
"lag_mode": '',
"totol": 0}
console.log(resp?.data?.lag_mode,444444444444)
if(resp?.data?.lag_mode) {
console.log("我能成功打印")
}
E、只要某个属性值不存在或某个属性值的返回值为空:

// 联合下来(即:&& 操作),都不会执行 if(){} 中的语句;

在这里插入图片描述
在这里插入图片描述

// 代码为:


let resp = {
"data": {"data": []
},
"lag_mode": '',
"totol": 0}
console.log(resp?.data?.lag_mode,5555555555)
console.log(resp?.data?.data,6666666666)
if(resp?.data?.lag_mode && resp?.data?.data) {
console.log("我能成功打印")
}

let resp = {
"data": {"data": [],"lag_mode": '',
},
"lag_mode": '',
"totol": 0}
console.log(resp?.data?.lag_mode,7777777777)
console.log(resp?.data?.data,88888888888)
if(resp?.data?.lag_mode && resp?.data?.data) {
console.log("我能成功打印")
}
F、只要所有的属性值存在且不为空,哪怕是 0 等值:

// 联合下来(即:&& 操作),都会执行 if(){} 中的语句;

在这里插入图片描述
在这里插入图片描述

// 代码为:


let resp = {
"data": {"data": [],"lag_mode": '0',
},
"lag_mode": '',
"totol": 0}
console.log(resp?.data?.lag_mode,99999999)
console.log(resp?.data?.data,11223344)
if(resp?.data?.lag_mode && resp?.data?.data) {
console.log("我能成功打印")
}

let resp = {
"data": {"data": [],"lag_mode": 3,
},
"lag_mode": '',
"totol": 0}
console.log(resp?.data?.lag_mode,55667788)
console.log(resp?.data?.data,123456879)
if(resp?.data?.lag_mode && resp?.data?.data) {
console.log("我能成功打印")
}
G、总结:使用 resp?.data?.data 语法且 && 判断,那么一定要存在最后的那个属性值(如:data), 且返回值不能为空,否则就不会执行 if(){} 中的语句;

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

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

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

相关文章

Git保姆级使用教程

一、版本控制 1.1 团队开发问题 企业项目一般以团队形式实施开发,那团队开发中会出现哪些问题呢? 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之…

数据库常见理论常见面试题(总结)

一、前言 这里呢,博主会介绍一些平时关于数据库的理论的问题,比如数据库的三级模式两级映射、触发器、范式、存储过程、视图等等概念知识,但是像索引、事务、锁等内容,之前的文章就讲解过了,这里就不作过多的介绍了&am…

android工程师面试题目,安卓开发面试宝典

一、前言 不知不觉自己已经做了几年开发了,由记得刚出来工作的时候感觉自己能牛逼,现在回想起来感觉好无知。懂的越多的时候你才会发现懂的越少。 如果你的知识是一个圆,当你的圆越大时,圆外面的世界也就越大。 最近看到很多An…

Delegate动画案例(P30 5.6delegate动画)

一、ListElement,ListModel,ListView 1. ListElement ListElement 是 QML 中用于定义列表项的元素。它可以包含多个属性,每个属性对应列表项中的一个数据字段。通过在 ListModel 中使用 ListElement,可以定义一个列表的数据模型…

【leetcode】链表分割

大家好,我是苏貝,本篇博客带大家刷题,如果你觉得我写的还不错的话,可以给我一个赞👍吗,感谢❤️ 目录 方法1. 不用哨兵位方法2. 用哨兵位 点击查看题目 思路: 将链表分为2个链表list1和list2,…

物联网边缘计算云边协同

文章目录 一、物联网云边协同1.IoT云边协同设计2.物联网平台设计3.物联网平台实现 二、部署环境1.节点配置2.版本信息 三、IoT云边协同部署1.部署Kubernetes集群2.部署KubeEdge3.部署ThingsBoard集群4.部署Node-RED边缘网关4.1.边缘网关功能4.2.部署EMQX4.2.部署Node-RED 5.配置…

(正规api接口代发布权限)短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态

短视频账号矩阵系统实现开发--技术全自动化saas营销链路生态源头开发(本篇禁止抄袭复刻) 一、短视频矩阵系统开发者架构 云罗短视频矩阵系统saas化系统,开发层将在CAP原则基础上使用分布式架构,对此网站的整体架构采用了基于B/S三层架构模式…

Django Web架构:全面掌握Django模型字段(下)

Django Web架构 全面掌握Django模型字段(下) - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article…

协议和序列化反序列化

“协议”和序列化反序列化 “协议”的概念: “协议”本身是一种约定俗成的东西,由通讯双方必须共同遵从的一组约定,因此我们一定要将这种约定用计算机语言表达出来,此时双方计算机才能识别约定的相关内容 我们把这个规矩叫做“…

机器学习|决策树

左图的点是一种线性不可分的情况,无法拿一条直线去将进行分开。 每一个节点都代表一个决策,从而导致节点的分流。 最终的目标肯定是要达到分类。 但取得目标的过程是有所谓的好坏。 而这个好坏用熵/信息增益来衡量。 熵是一种用于反映系统混乱程度的物理…

思科网络设备监控

思科是 IT 行业的先驱之一,提供从交换机到刀片服务器的各种设备,以满足中小企业和企业的各种 IT 管理需求。管理充满思科的 IT 车间涉及许多管理挑战,例如监控可用性和性能、管理配置更改、存档防火墙日志、排除带宽问题等等,这需…

Makefile从入门到项目编译实战(学习笔记)

1.make和makefile介绍 1. make make 是一个应用程序,位于 /usr/bin/make 目录下,make 有如下的功能: (1)解析源程序之间的依赖关系 (2)根据依赖关系自动维护编译工作 (3&#xff09…

Jmeter插件PerfMon Metrics Collector安装使用及报错解决

Jmeter作为一个轻量级的性能测试工具,开源、小巧、灵活的特性使其越来越受到测试人员喜爱。在实际的项目中,特别是跨地区项目,排除合作方指定要求使用Loadrunner作为性能测试工具外,Jmeter会是首选。 本篇文章,就着重…

【MATLAB源码-第149期】基于MATLAB的2ASK,2FSK,2PSK,2DPSK等相干解调仿真,输出各节点波形。

操作环境: MATLAB 2022a 1、算法描述 2ASK(二进制幅移键控)、2FSK(二进制频移键控)、2PSK(二进制相移键控)和2DPSK(二进制差分相移键控)是数字调制技术中的基本调制方…

汽车三元催化器的废品项目详解,三元催化再生项目的回收技术教学

一、教程描述 这是一个收废品项目,就收那些别人不懂的,三元催化器的附加值高,只要掌握技术,怎么玩都行的,只是要放得下你的面子。三元催化器,是安装在汽车排气系统中最重要的机外净化装置,它可…

MATLAB环境基于全局和局部多特征融合的红外图像分割主动轮廓模型

红外图像是一种热图像,不受光照影响,在光照条件差、有烟雾遮挡的环境中,可以辅助或代替可见光成像在各个领域中应用,同时作为热成像,对景物的热辐射敏感,在安全监测、质量检验等领域具有优势。在以下几个方…

CSS的弹性布局

CSS 的弹性布局 前言 前端中为了实现页面的布局效果,采用的一个技术手段,它在前端开发的技术场景是非常广泛的 实现上述区域的页面相关的布局效果,就可以使用弹性布局来完成 弹性布局(flex布局) flex 是 flexible box 的缩写,…

文生视频基础1:sora技术报告学习

sora技术报告学习 背景学后理解训练流程技术拆解编码解码扩散模型训练用数据 28号直播交流会后的一些想法自身的一点点想法 参考 原文地址:Video generation models as world simulators 背景 此项目的背景是基于Datawhale的关于sora技术文档的拆解和相关技术讲解…

GEE入门篇|图像处理(二):在Earth Engine中进行波段计算

目录 波段计算 1.NDVI的计算 2.NDVI 归一化差值的单次运算计算 3.使用 NDWI 的归一化差值 波段计算 许多指数可以使用 Earth Engine 中的波段运算来计算。 波段运算是对图像中两个或多个波段进行加、减、乘或除的过程。 在这里,我们将首先手动执行此操作&#x…

Redis第6讲——主从复制模式详解

Redis的读写性能很高,但在面对大规模数据和高发访问的挑战时,单节点的Redis可能无法满足需求,这就引出了Redis集群的概念。本节先介绍一下Redis高可用方案之一的主从复制模式,虽说现在基本不会用这种模式,但是无论是哨…