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…

强缓存和协商缓存原理,及前端如何和服务端一同控制影响浏览器缓存,以及代码实战

1.强缓存(也称为本地缓存)和协商缓存是Web开发中用于优化页面加载性能的两种主要缓存机制。 强缓存: 工作原理: 当客户端首次请求资源时,服务器会返回带有缓存控制信息的响应头,如Cache-Control或Expires。…

nginx反向代理,获取客户端ip

一、获取客户端ip代码 /*** description: 获取客户端IP* return string*/ public static function getClientIp(){$ip ;if(getenv(HTTP_CLIENT_IP) && strcasecmp(getenv(HTTP_CLIENT_IP),unknown)){$ip getenv(HTTP_CLIENT_IP);}else if(getenv(HTTP_X_FORWARDED_F…

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

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

算法D29 | 回溯算法5|491.递增子序列 46.全排列 47.全排列 II

491.递增子序列 本题和大家刚做过的 90.子集II 非常像,但又很不一样,很容易掉坑里。 代码随想录 视频讲解:回溯算法精讲,树层去重与树枝去重 | LeetCode:491.递增子序列_哔哩哔哩_bilibili 一个是去重,一…

在WPF MVVM 框架下实现DataGrid内容的增删查改

在WPF应用程序开发中,使用DataGrid控件来展示和编辑数据是一种常见的做法。Prism是一个模块化的WPF应用程序框架,它支持MVVM模式,使得实现数据操作和界面展示的分离变得更加容易。本文将指导您如何在使用Prism框架的WPF应用程序中实现DataGri…

【leetcode】链表分割

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

忙碌生活下的技术适应力:应对新应用学习带来的困扰与挑战

在当今信息时代,各类应用程序(APP)渗透到我们生活的方方面面,无论是工作效率提升,还是日常生活便利,都离不开它们的支持。然而,对于在快节奏工作中疲于奔命的现代人来说,当因为生活所…

GO语言学习笔记(与Java的比较学习)(七)

结构与方法 结构体定义 结构体定义的一般方式如下: type identifier struct {field1 type1field2 type2... } type T struct {a, b int} 也是合法的语法,它更适用于简单的结构体。 结构体里的字段都有 名字,像 field1、field2 等&#…

linux服务器连接数

一、要查看 Linux 服务器的最大连接数 我们需要关注两个值:文件描述符限制(file descriptor limit)和内核参数 "net.core.somaxconn"。 1. 查看文件描述符限制(file descriptor limit) 文件描述符限制决定了…

System Verilog学习笔记(十)——任务和函数

System Verilog学习笔记(十)——任务和函数 函数(function)和任务(task)可以提高代码的复用性和整洁度。他们的目的在于将大型的过程块切分为更小的片段,而便于阅读和代码维护。 区别 functi…

物联网边缘计算云边协同

文章目录 一、物联网云边协同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三层架构模式…

React 模态框的设计(五)主体设计

弹窗的主体设计没什么特别,就是把细分化后的各个功能封装在一个个的小组件内,然后再整合。这样逻辑就分开了,不乱。 弹窗容器 这个容器是弹窗主体的根组件(不含遮罩),要能根据主题的变化能做出相应的改变。还要记录渲染后的主体…

java016学习记录

Java Web 使用 Java 开发语言完成 Web 后端的项目开发 基于 Web 的应用:网站、APP、小程序 Java 不是做前端的,做后端 Tomcat、Servlet Tomcat 的作用让 Java Web 程序可以正常运行,被浏览器访问 浏览器默认不能访问电脑上的资源&#…

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…

C++之vector

1、vector概念 功能:vector的功能和数组非常相似,可以看成是一个升级版的数组。 vector和普通数组的区别: (1)数组是静态的,长度不可改变,而vector可以动态扩展,增加长度。…

协议和序列化反序列化

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