跟bug较劲的第n天,undefined === undefined

news2024/12/23 13:32:53

前情提要

在这里插入图片描述

场景复现

在这里插入图片描述
看到这张图片,有的同学也许不知道这个冷知识,分享一下,是因为我在开发过程中踩到的坑,花了三小时排查出问题的原因在这,你们说值不值。。。

我分享下我是怎么碰到的这个问题,下面看代码

(e.data.id === item.data.id || e.data.timestamp === item.data.timestamp
							) && i >= index

是的这是一个关于元素对象的判断,我的理想状态是上面这种条件成立,但是我忽略了一个点,e.data.timestamp有undefined的情况,这就导致我这个判断,是不准确的


实战解析

我是怎么排查到的?-----把条件拆开,分别打印发现的😂
类似于这样。。。

arr.forEach((e, i) => {
	console.log(
		e.data.timestamp,
		 e.data.timestamp === clickItem.data.timestamp,
		i
	)
	console.log(e.data.id, e.data.id === clickItem.data.id, i)
	console.log(i >= clickIndex, i)
})

最终打印发现 e.data.timestamp这个东西===undefined,去和另一个undefined比较,条件成立了,所以发现问题,就修复问题

(e.data.id === item.data.id || e.data.timestamp
								? e.data.timestamp === item.data.timestamp
								: false) && i >= index

加一个三目运算符,undefined的情况下返回false,这样我就达成我的目的了,说实话还是才疏学浅啊,大家觉得有启发可以点点赞支持一下,谢谢


最后

📚 vue
☃️ 个人简介:一个喜爱技术的人。
🌞 励志格言: 脚踏实地,虚心学习。
❗如果文章还可以,记得用你可爱的小手点赞👍关注✅,我会在第一时间回、回访,欢迎进一步交流。

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

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

相关文章

可视化大屏的应用(12):在智慧制造中的十大价值

一、什么是智慧制造 智慧制造是指通过信息技术、物联网、人工智能等先进技术的应用,实现生产过程的数字化、网络化、智能化,从而提高生产效率、降低成本、提高产品质量和灵活性的一种制造模式。 智慧制造的核心是将传统的制造过程与先进的信息技术相结合…

【opencv】示例-grabcut.cpp 使用OpenCV库的GrabCut算法进行图像分割

left mouse button - set rectangle SHIFTleft mouse button - set GC_FGD pixels CTRLleft mouse button - set GC_BGD pixels 这段代码是一个使用OpenCV库的GrabCut算法进行图像分割的C程序。它允许用户通过交互式方式选择图像中的一个区域,并利用GrabCut算法尝试…

【大语言模型】基础:如何处理文章,向量化与BoW

词袋模型(BoW)是自然语言处理(NLP)和机器学习中一种简单而广泛使用的文本表示方法。它将文本文档转换为数值特征向量,使得可以对文本数据执行数学和统计操作。词袋模型将文本视为无序的单词集合(或“袋”&a…

洛谷题单 -- 图论的简单入门

B3643 图的存储 链接 : 图的存储 - 洛谷 思路 : 这一题要考察图的存储方式 , 一般可以使用邻接矩阵 或 邻接表来存储 图的结点 和1 边的信息 &#xff0c;详情请看代码 : 代码 #include<bits/stdc.h> using namespace std;const int N 1010 ; int n , m ; int …

建造者模式:构造复杂对象的艺术

在面向对象的设计中&#xff0c;建造者模式是一种重要的创建型设计模式&#xff0c;专门用来构建复杂的对象。它主要目的是将对象的构造代码与其表示代码分离&#xff0c;使同样的构建过程可以创建不同的表示。本文将详细介绍建造者模式的定义、实现、应用场景以及优缺点&#…

VBA中如何对工作表进行排序

代码 在VBA中对工作表进行排序的最简单方法是直接使用Move方法来移动工作表。 Sub SortSheetsByNameDescending()Dim sheetsDim sheet As WorksheetDim i As Integer, j As IntegerDim sortedSheets() As Array 获取当前工作簿中的所有工作表Set sheets ThisWorkbook.Sheets…

【深入理解Java IO流0x09】解读Java NIO核心知识(下篇)

1. NIO简介 在开始前&#xff0c;让我们再简单回顾一下NIO。 在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。也就是说&#xff0c;当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多…

【研发效能·创享大会-嗨享技术轰趴】-IDCF五周年专场

一、这是一场创新分享局&#xff01; 来吧&#xff0c;朋友们! 参加一场包含AIGC、BizDevOps、ToB产品管理、B端产品运营、平台工程、研发效能、研发度量、职业画布、DevOps国标解读的研发效能创享大会&#xff0c;会有哪些收益呢&#xff1f; 知识更新与技能提升&#xff1a;…

给现有rabbitmq集群添加rabbitmq节点

现有的&#xff1a;10.2.59.216 rabbit-node1 10.2.59.217 rabbit-node2 新增 10.2.59.199 rabbit-node3 1、分别到官网下载erlang、rabbitmq安装包&#xff0c;我得版本跟现有集群保持一致。 erlang安装包&#xff1a;otp_src_22.0.tar.gz rabbitmq安装包&#xff1…

Linux系统启动过程详解

启动过程是指计算机从开机自检到操作系统完全加载的一系列动作。深入理解启动过程对于有效解决启动问题、提升系统性能以及高效管理系统的启动组件至关重要。例如&#xff0c;可以帮助我们识别和处理在启动过程中可能出现的诸如硬件故障、配置错误等问题。例如帮助我们个性化定…

C语言之九九乘法表||素数||最小公倍数

一、九九乘法表 &#xff08;1&#xff09;思路 1、九九乘法表中存在三个变量&#xff0c;以 x1 ; x2 ; y 为例&#xff08;这里也可以使用两个变量&#xff0c;用x1和x2来表示y&#xff0c;方法一样&#xff09; 2、想好了变量之后&#xff0c;我们要想怎样将他实现呢&#x…

Robotstudio2024中从备份文件恢复和创建工作站的具体方法演示

Robotstudio2024中从备份文件恢复和创建工作站的具体方法演示 如下图所示,打开Robotstudio2024软件,有需要的可以从以下链接获取: ABB机器人编程仿真软件RobotStudio 2024.1-链接baiduyun 点击“新建”—工作站—创建, 如下图所示,点击“ABB模型库”,选择自己使用的机器…

二刷大数据(一)- Hadoop

目录 大数据4V Hadoop概念Hadoop大版本区别HDFS产生背景架构文件块大小写文件流程读数据流程NameNode & SecondNameNodeDataNode工作机制 YARNMapReduce为什么不适合实时核心思想切片与MapTask原理MapTask机制MapReduceApplicationMasterApplicationMaster shuffle机制Redu…

jenkins+sonar配置

安装插件 Sonar Scanner 用于扫描项目 配置sonar scanner jenkins集成sonar 1、sonar生成token 生成完保存好&#xff0c;刷新后无法查看 2、jenkins配置全局凭据 3、jenkins配置系统设置

扭蛋机小程序:线上扭蛋机模式发展空间有多大?

潮玩行业近几年的发展非常快&#xff0c;推动了扭蛋机市场的发展&#xff0c;越来越多的人加入到了扭蛋机赛道中&#xff0c;市场迎来了新的发展期。如今&#xff0c;我国的二次元文化的发展不断成熟&#xff0c;扭蛋机主打的二次元商品迎来了更多的商业机会。 一、互联网扭蛋机…

改变LoRA的初始化方式,北大新方法PiSSA显著提升微调效果

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 随着大模型的参数量日益增长&#xff0c;微调整个模型的开销逐渐变得难以接受。 为此&#x…

RestTemplate—微服务远程调用—案例解析

简介&#xff1a;总结来说&#xff0c;微服务之间的调用方式有多种&#xff0c;选择哪种方式取决于具体的业务需求、技术栈和架构设计。RESTful API和HTTP客户端是常见的选择&#xff0c;而Feign和Ribbon等辅助库可以简化调用过程。RPC和消息队列适用于特定的场景&#xff0c;如…

FPGA - 以太网UDP通信(三)

一&#xff0c;引言 前文链接&#xff1a;FPGA - 以太网UDP通信&#xff08;一&#xff09; FPGA - 以太网UDP通信&#xff08;二&#xff09; 在以上文章中介绍了以太网简介&#xff0c;以太网UDP通信硬件结构&#xff0c;以及PHY芯片RGMII接口-GMII接口转换逻辑&#xff0c…

Node.js从基础到高级运用】二十三、Node.js中自动重启服务器

引言 在Node.js开发过程中&#xff0c;我们经常需要修改代码后重启服务器来应用这些更改。手动重启不仅效率低下&#xff0c;而且会打断开发流程。幸运的是&#xff0c;有一些工具可以帮助我们自动化这个过程。本文将介绍如何使用nodemon来实现Node.js服务器的自动重启。 什么是…

清楚明了的凸松弛最优潮流!基于混合整数二阶锥规划的主动配电网最优潮流研究程序代码!

前言 最优潮流(optimal power flow&#xff0c;OPF)问题&#xff0c;是电力系统中最常见、最基础的一类优化问题。在满足基尔霍夫定律、线路容量约束以及运行安全约束等电力网络物理约束的前提下&#xff0c;OPF问题旨在寻找一个最优的潮流稳态工作点&#xff0c;使得在该工作…