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.hqwc.cn/news/500961.html

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

相关文章

深度强化学习入门(待修改)

目录 前言 一、强化学习 1.马可洛夫链 2.蒙地卡罗 3.时序差分TD 4.gym学习​编辑 FrozenLake 二、RL基本算法 1.Q-learning和SARSA 2.DQN Deep network Qlearning DQN 三、PG策略算法 总结 前言 这段时间学习深度强化学习的总结。 一、强化学习 强化学习是做出最佳决策的科学…

选项 打光 试题总结

试题1 被测物体100100mm,精度要求被测物体 ,精度要求0.1mm,相机距被测物体在200~320mm之间,要求选择合适的相机和镜头? 分析如下: 通常我们用的相机靶面是4:3 的所以我们要用短边来计算视场&am…

亿道信息发布两款升级款全加固笔记本电脑

2022年5月19日,加固手持终端。加固平板电脑、加固笔记本电脑专业设计商和制造商,以及加固型移动计算机软硬件整体定制解决方案提供商亿道信息,宣布对其两款广受欢迎的加固笔记本电脑产品EM-X14U和EM-X15U进行重大升级。新发布的两款升级款全加…

Vue3+vite打包后页面空白问题

vite.config.js vite.config.js 增加 base: ./ import { fileURLToPath, URL } from node:url import { defineConfig } from vite import vue from vitejs/plugin-vue// https://vitejs.dev/config/ export default defineConfig({base: ./,resolve: {alias: {: fileURLToPath…

初学selenuim[1]($x(‘xpath语法’)、WebDriverWait())

文章目录 初学selenuim记录1、执行driver webdriver.Chrome()后很久才打开浏览器2、浏览器多元素定位 $x(‘xpath语法’)3、打开浏览器driver.get("网址")执行了很久才开始定位元素:等待(1)driver.set_page_load_timeout(t)&#…

yolov9从头开始训练

yolov9从头开始训练 一、准备数据集 数据集相关文件存放布局如下 yolov9-datasets ├── train │ ├── images │ │ ├── image.jpg │ │ ├── │ └── labels │ ├── image.txt │ ├── ├── valid │ ├── images │ │ ├── image.jpg │ │ ├─…

Gitlab: 私有化部署

目录 1. 说明 2. 资源要求 3. 安装 4. 配置实践 4.1 服务器 4.2 人员与项目 4.2 部署准备 4.2.1 访问变量及用户账号设置 4.2.2 Runner设置 4.2.3 要点 5. 应用项目 CI/CD 6. 参考 1. 说明 gitlab是一个强大且免费的代码管理/部署工具,能统一集成代码仓…

【探索AI】十二 深度学习之第2周:深度神经网络(一)深度神经网络的结构与设计

第2周:深度神经网络 将从以下几个部分开始学习,第1周的概述有需要详细讲解的的同学自行百度; 深度神经网络的结构与设计 深度学习的参数初始化策略 过拟合与正则化技术 批标准化与Dropout 实践:使用深度学习框架构建简单的深度神…

单词规律00

题目链接 单词规律 题目描述 注意点 pattern只包含小写英文字母s只包含小写英文字母和 ’ ’s不包含任何前导或尾随对空格s中每个单词都被 单个空格 分隔 解答思路 本题与上一次同构字符串类似,思路可以参照同构字符串 代码 class Solution {public boolean …

Facebook Messenger链接分享:如何创建链接并设置自动化内容

Facebook Messenger链接是指基于Facebook用户名创建的会话链接,用户可以在其Facebook页面的设置部分复制此链接进行分享。然后将该链接直接粘贴到独立站、电子邮件、名片或社交媒体中,让目标受众可以一键进入对话。为了满足某些商家的需求,Fa…

理想汽车狂飙18%,造车新势力洗牌

2月27日,#理想汽车狂飙18%#话题冲上热搜;前一日,理想汽车(02015.HK)公布了2023年第四季度及全年财报。尽管其营收净利双增长,但业绩增长背后仍有隐忧。 「不二研究」据其2023年报发现:2023年,理想汽车研发…

Vivado Vitis 2023.2 环境配置 Git TCL工程管理 MicroBlaze和HLS点灯测试

文章目录 本篇概要Vivado Vitis 环境搭建Vivado 免费标准版 vs 企业版Vivado Windows 安装Vivado 安装更新 Vivado 工程操作GUI 创建工程打开已有工程从已有工程创建, 重命名工程GUI导出TCL, TCL复原工程TCL命令 Vivado 版本控制BlinkTcl脚本新建导出重建工程纯Verilog BlinkTc…