前端之深拷贝

embedded/2024/11/25 17:41:11/

前提:

就是在实际开发中,我有一个编辑的弹窗,可以查看和编辑,因为弹窗里面是一个步骤条,点击下一步就要向对应的接口发送请求,考虑到就比如我点击下一步,此次表箱信息其实不需要修改,我要修改的是控制器的信息,那么点击下一步发送请求其实是没有必要的,我就考虑到了进行比对,如果没有变化就直接下一步,不发送请求

我的想法是,在点击编辑时,把变化前的值给一个变量(旧值),然后在点击下一步用现在的值和旧值进行对比

javascript">const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
//编辑
const handleEdit = async (data: any) => {editVisible.value = true;
//在弹窗弹出的时候,把传递过来的值给一个变量initialFormData.value=data
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {switch (editCurrent.value) {case 1:const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);if (formDataChanged) {
...
}else{editCurrent.value += 1;
}
}

这是我刚开始的想法,原本我以为就是initialFormData这个值不会变化,然后我发现表单值变化了也没有发送请求,我就输出formDataChanged这个值,发现每次都是false,进而输出initialFormData它的值,就发现它既然是变化后的值,我就想问题在哪里,原因是:

在 JavaScript 中,当你将一个对象赋值给另一个变量时,实际上是将对象的引用赋值给了这个变量,而不是对象本身的拷贝。这意味着,如果你修改了其中一个变量所引用的对象,另一个变量也会受到影响,因为它们引用的是同一个对象。

在你的代码中,initialFormDataeditDataBox 都是使用 ref 创建的响应式对象。当你在 handleEdit 函数中将 data 赋值给 initialFormData.valueeditDataBox.value 时,它们实际上是引用了同一个对象。

因此,当你修改 editDataBox.value 后,initialFormData.value 也会受到影响,因为它们引用的是同一个对象。

为了避免这种情况,你需要确保 initialFormDataeditDataBox 引用的是不同的对象,而不是同一个对象的引用。这就是为什么需要进行深拷贝的原因,因为深拷贝会创建一个新的对象,其值与原始对象相同,但是引用不同,这样就可以独立地修改新对象而不影响原始对象。

我的解决办法是使用 JSON.parse() 和 JSON.stringify() 进行深拷贝,修改后的代码是,加了一个deepCopy函数进行深拷贝

JSON.parse() 和 JSON.stringify()

javascript">const editDataBox = ref<any>({});
const initialFormData = ref<any>({});
const deepCopy = (obj: any) => {return JSON.parse(JSON.stringify(obj));
};
//编辑
const handleEdit = async (data: any) => {editVisible.value = true;initialFormData.value = deepCopy(data);
editDataBox.value = data;
....
}
const isFormDataEqual = (formData1: any, formData2: any) => {return JSON.stringify(formData1) === JSON.stringify(formData2);
};
//下一步
const editNext = () => {switch (editCurrent.value) {case 1:const formDataChanged = !isFormDataEqual(editDataBox.value, initialFormData.value);if (formDataChanged) {
...
}else{editCurrent.value += 1;
}
}

使用 Object.assign():

这个方法只能实现浅拷贝,但如果对象的结构比较简单且不包含嵌套对象,也可以考虑使用它 

javascript">const deepCopy = (obj) => {return Object.assign({}, obj);
};

 使用递归:

可以编写一个递归函数来遍历对象的所有属性,并对每个属性进行拷贝。这需要一些额外的代码,但也是一个有效的方法。

javascript">const deepCopy = (obj) => {if (typeof obj !== 'object' || obj === null) {return obj;}let newObj = Array.isArray(obj) ? [] : {};for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepCopy(obj[key]);}}return newObj;
};

使用 Lodash 库 

Lodash 提供了 _.cloneDeep() 方法,可以实现对象的深拷贝。这是一个非常流行且易于使用的方法。

javascript">const _ = require('lodash');// 使用 _.cloneDeep() 进行深拷贝
const deepCopy = (obj) => {return _.cloneDeep(obj);
};

深拷贝在编程中几个重要的优势和应用场景: 

  1. 数据独立性: 深拷贝创建了原始对象的完全独立副本,这意味着修改拷贝后的对象不会影响原始对象。这对于需要在多个地方使用同一份数据,但又需要独立修改数据的情况非常有用。

  2. 避免引用问题: 在 JavaScript 中,如果你简单地将一个对象赋值给另一个变量,实际上是将对象的引用传递给了新变量。这意味着如果你修改了新变量中的对象,原始对象也会受到影响。深拷贝可以避免这种问题,因为它创建了一个完全独立的对象,不会共享内存地址。

  3. 数据传递: 在许多情况下,你可能需要将数据传递给其他函数或组件,并且希望确保传递的是数据的副本而不是引用。深拷贝可以确保你传递的是数据的完整副本,而不会影响原始数据。

  4. 数据比较: 当需要比较两个对象是否相等时,深拷贝可以确保比较的是对象的值而不是引用。这在进行单元测试、数据验证或其他需要比较对象的场景中非常有用。

总的来说,深拷贝是一种保护数据完整性和独立性的重要工具,可以帮助避免由于对象共享引起的意外行为,并确保数据在不同部分之间的传递和修改时保持一致。

你学会了吗?

嗯,可能有的朋友还不太了解JSON.parse() 和 JSON.stringify()?我也是一知半解。

我在想应该写在另一篇文章还是写在这里?emmm,还是重新写一个吧,可以点击跳转

最后,我也是刚入行时间不长的前端,如果有写的有什么问题欢迎指正与交流。


http://www.ppmy.cn/embedded/34129.html

相关文章

抓包证书安装到安卓7.0+手机

前言: 首先理解一下,这个不只是证书到浏览器,而是抓包证书到安卓7.0+手机上的文章; 还有一点区分,在浏览器上装的证书,只是让抓包工具可以抓取手机浏览器的包,而不是抓取手机app上的包; 如果你的证书只是简单的在浏览器下进行安装,那么你的手机app是走不了代理网络的…

探索CSS3文本效果:打造魅力无限的网页排版

CSS3为网页设计带来了革命性的变化&#xff0c;特别是在文本效果方面&#xff0c;它赋予了开发者前所未有的创意空间。本文将带你深入了解CSS3中一些令人兴奋的文本效果&#xff0c;从基本的阴影处理到复杂的动画效果&#xff0c;每个技巧都将通过实际代码示例展现其魅力所在。…

Linux——命名管道

管道特点 只能用于具有具体祖先的进程之间的通信&#xff0c;通常&#xff0c;一个管道由一个进程创建&#xff0c;然后该进程调用fork&#xff0c;创建子进程&#xff0c;关闭相应的读写端&#xff0c;然后父子进程就可以通信了管道提供流式服务一般而言&#xff0c;进程退出…

UDP通信

文章目录 recvfrom和sendto函数UDP通信server和client流程UDP实现的并发服务器和客户端 recvfrom和sendto函数 ssize_t recvfrom(int sockfd, void *buf, size_t len, int flags,struct sockaddr *src_addr, socklen_t *addrlen);sockfd&#xff1a; 套接字buf&#xff1a;缓冲…

PC端Discord设置代理2022

开始使用 方法非常简单&#xff0c;在此下载release.zip并解压version.dll https://github.com/aiqinxuancai/discord-proxy/releases​github.com/aiqinxuancai/discord-proxy/releases 将version.dll放在Discord.exe所在目录&#xff08;如Discord有更新&#xff0c;则可能…

自适应调节Q和R的自适应UKF(AUKF_QR)的MATLAB程序

简述 基于三维模型的UKF&#xff0c;设计一段时间的输入状态误差较大&#xff0c;此时通过对比预测的状态值与观测值的残差&#xff0c;在相应的情况下自适应调节系统协方差Q和观测协方差R&#xff0c;构成自适应无迹卡尔曼滤波&#xff08;AUKF&#xff09;&#xff0c;与传统…

Eclipse中开启服务,网页无法打开 运行程序显示404

一、eclipse中开启服务后&#xff0c;网页无法打开的问题 当你在eclipse中开启服务后&#xff0c;如果网页无法打开&#xff0c;可能是以下几个原因导致的&#xff1a; 1. 端口冲突&#xff1a;请确保你所使用的端口没有被其他程序占用。可以尝试更换一个未被占用的端口。 2…

Unity 性能优化之动态批处理(四)

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 前言一、动态合批是什么&#xff1f;二、使用动态批处理1.打开动态合批2.满足条件 三、检查动态合批是否成功五、动态合批弊端总结 前言 动态批处理是常用优…