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

news/2024/7/11 2:01:18 标签: vue.js, 前端, 经验分享, javascript, es6, js语法, 问题解决

1、数据情况：

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

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

或：

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

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

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

javascript">
if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {
	// 待执行的代码块;
	configurationForm.value.lag_mode = resp.data.lag_mode
    tableData.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、返回值代码为：
javascript">
let resp.data = {
    "data": [],
    "lag_mode": 3,
    "totol": 0
}
B、此时执行如下代码，是能执行 if(){} 语句中的代码的(即：达到目标)

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

javascript">
if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {
	// 待执行的代码块;
	configurationForm.value.lag_mode = resp.data.lag_mode
    tableData.value = resp.data.data
}
A、返回值代码为：
javascript">
let resp.data = {
    "data": [],
    "totol": 0
}
B、此时执行如下代码，是不能执行 if(){} 语句中的代码的(即：出问题)
javascript">
if(resp?.status === 200 && resp?.data?.lag_mode && resp?.data?.data) {
	// 待执行的代码块;
	configurationForm.value.lag_mode = resp.data.lag_mode
    tableData.value = resp.data.data
}

其三、整体的展示：

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

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

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

javascript">
let resp = {
"data": {
    "data": []
},
"totol": 0

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

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

在这里插入图片描述

代码为：

javascript">
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(){} 中的语句;

在这里插入图片描述

代码为：

javascript">
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(){} 中的语句;

在这里插入图片描述

代码为：

javascript">
let resp = {
"data": {
    "data": []
},
"lag_mode": '',
"totol": 0

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

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

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

// 代码为：

javascript">
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("我能成功打印")
}


javascript">
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(){} 中的语句;

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

// 代码为：

javascript">
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("我能成功打印")
}


javascript">
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.niftyadmin.cn/n/5399068.html

相关文章

Python 编程语言以及相关的库和工具来进行金融市场数据分析、策略开发和交易执行的过程。

Python 编程语言以及相关的库和工具来进行金融市场数据分析、策略开发和交易执行的过程。

Python 量化是指利用 Python 编程语言以及相关的库和工具来进行金融市场数据分析、策略开发和交易执行的过程。 Python 由于其简洁、易学、强大的生态系统和丰富的金融库而成为量化交易的首选编程语言之一。 量化交易在金融领域得到广泛应用，它允许交易者通过系统…
阅读更多...
突破编程_C++_高级教程（单元测试与 Google Test 教程）

突破编程_C++_高级教程（单元测试与 Google Test 教程）

1 单元测试简介 单元测试（Unit Testing）是一种编程方法，用于验证代码中的最小可测试单元（通常是函数、方法或模块）是否按照预期工作。在 C 中，单元测试通常涉及编写一组测试用例，每个用例都调用…
阅读更多...
使用 MongoDB Atlas 无服务器实例更高效地开发应用程序

使用 MongoDB Atlas 无服务器实例更高效地开发应用程序

使用 MongoDB Atlas无服务器实例更高效地开发应用程序 身为开发者，数据库并不一定需要您来操心。您可不想耗费时间来预配置集群或调整集群大小。同样地，您也不想操心因未能正确扩展而导致经费超标。 MongoDB Atlas 可为您提供多个数据库部署选项。虽然…
阅读更多...
TDengine 研发分享：利用 Windbg 解决内存泄漏问题的实践和经验

TDengine 研发分享：利用 Windbg 解决内存泄漏问题的实践和经验

内存泄漏是一种常见的问题，它会导致程序的内存占用逐渐增加，最终导致系统资源耗尽或程序崩溃。AddressSanitizer (ASan) 和 Valgrind 是很好的内存检测工具，TDengine 的 CI 过程就使用了 ASan 。不过这次内存泄漏问题发生在 Windows 下&#…
阅读更多...
Django学习笔记-查询及修改MySQL数据库表的所有信息

Django学习笔记-查询及修改MySQL数据库表的所有信息

1.在index中添加一个按钮,用于查询数据 2.urls配置find 3.views定义find,获取PopulationModel模型所有数据渲染到show.html页面上 4.创建show.html,遍历modellist的数据渲染到表格中显示 5.点击查询后页面显示如下 6.添加修改按钮,点击按钮,执行update,urls配置update …
阅读更多...
程序媛的mac修炼手册-- Node.js入门篇

程序媛的mac修炼手册-- Node.js入门篇

最近因为参与一个微信小程序的开发，开始摸索JavaScript。期间，需要基于Node.js安装微信开发工具的依赖项，所以又顺带学习了Node.js的包管理工具npm（Node Package Manager）。不过，之前看到国外的全栈大佬​​…
阅读更多...
WiFi模块引领智能家居革命：连接未来的生活

WiFi模块引领智能家居革命：连接未来的生活

随着科技的快速发展，智能家居正成为现代生活的一部分，极大地改变了我们与家庭环境互动的方式。其中，WiFi模块作为关键的连接技术，在推动智能家居革命中发挥着不可忽视的作用。本文将深入探讨WiFi模块如何驱动智能家居革命。 设备互…
阅读更多...
详细地解析Spring MVC的请求生命周期

详细地解析Spring MVC的请求生命周期

发起请求：当用户在浏览器或其他客户端发出HTTP请求时，这个请求会被发送到服务器的DispatcherServlet。请求到达DispatcherServlet：DispatcherServlet是Spring MVC框架中的前端控制器，它负责接收所有的HTTP请求。查找Handler&#…
阅读更多...
最新文章

Copyright @ 2022~2023