修改一个值，另一个值也被影响！？原来是 JS 深浅拷贝的问题

最新推荐文章于 2023-09-01 16:22:28 发布
最新推荐文章于 2023-09-01 16:22:28 发布
阅读量738 收藏
点赞数 1
分类专栏： 前端 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36150316/article/details/107042538
版权
在JavaScript中，遇到一个问题：修改一个对象的值时，另一个对象的相应值也随之改变。这源于对深浅拷贝的理解不足。初始设置的A和B对象从C赋值，导致它们共享同一引用。通过学习，了解到直接赋值实际上是传递对象引用。解决方法是使用浅拷贝（如Object.assign或解构赋值）或深拷贝（如JSON.parse(JSON.stringify)或递归实现），以确保修改不会影响原始对象。对于多层级数据，深拷贝更为适用。
摘要由CSDN通过智能技术生成

需要达到这样子的一个需求：
编辑框需要元素有：时间选择器，文本框，一个下拉选择组
需要每次离开页面时候判断时候和初始值一致，若不一致则跳出提示是否需要保存。

一开始我的想法是 so easy！这次估计自己很快完美完成任务了（心里窃喜=W=）。
一顿操作后的我：设定初始值 A 和数据 B 作对比，两者一开始都是由 C 赋值的。**但是后面 B 每次改动 A 部分数据也对应改动，没有达到可以对比的目的。**部分代码如下：
在这里插入图片描述
我十分疑惑，为什么 A 也会跟着 B 一起改变？我没有在这里之外的地方赋值过了（一头雾水）
后续问了小伙伴才知道这里还涉及到了 JS 浅拷贝和深拷贝 的知识点了

因为我上图中的 points 是一个对象，直接赋值的话是赋值地址过去的。
我一开始给 A 和 B 都直接赋值，其实这时候就是把 C 的地址直接给了这两个玩意儿了！！！
那 B 改变时候 A 当然也跟着改变呀，因为是指向 C 的地址。

对于我现在的情况来说，只是一层 的 Object [{key: '', type: ''},{key: '', type: ''}]，用浅拷贝就好了~浅拷贝包括 Object.assign （

最低0.47元/天 解锁文章
超级无敌小湾娘
关注
专栏目录
深拷贝
m0_57142556的博客
05-23 146
深拷贝 深拷贝是:创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”，新对象跟原对象不共享内存，修改新对象不会改到原对象。 为什么要使用深拷贝？希望在改变新的数组（对象）的时候，不改变原数组（对象)。 实现深拷贝的方法有： ①递归： function deepClone(obj){ // 定义一个变量 并判断是数组还是对象 var objClone = Array.isArray(obj) ? [] : {};
深拷贝和浅拷贝
weixin_46597962的博客
08-18 174
浅拷贝和深拷贝 开发过程中，有时会遇到把现有的一个对象的所有成员变量属性拷贝给另一个对象的需求。比如说对象 A 和对象 B，二者都是 Class C 的对象，具有成员变量 a 和 b，现在对对象 A 进行拷贝赋值给 B，也就是 B.a = A.a; B.b = A.b; 这时再去改变 B 的属性 a 或者 b 时，可能会遇到问题：假设 a 是基础数据类型，b 是引用类型。当改变 B.a 的值时，没有问题；当改变 B.b 的值时，同时也会改变 A.b 的值，因为其实上面的例子中只是把 A.b 赋值给了 B.b
2021-09-26深拷贝错误记录(js更改拷贝数组的值，而不改变原数组 )
kassiaaaa的博客
09-26 244
拷贝在前！！！ 才能做到隔离 js更改拷贝数组的值，而不改变原数组的方法总结 方法一    利用ECMAScript 6 的展开运算符 let arr1 = [1, 2, 3], arr2 = [...arr1];arr2.splice(0, 1); console.log(arr1);console.log(arr2);   方法二   利用json格式化 let arr1 = [1, 2, 3], arr2
java string改变的影响_JAVA中String类对象不可以改变
weixin_31582915的博客
02-16 323
一、String类对象内容不可改变也就是说String类型的字符串的内容--旦声明赋值之后是不可以改变的DEMO:观察代码发现了最后输出的内容是“helloworld!”这与之前的描述不同，其实这里改变的不是原来的字符串的内容，改变的是引用。+通过上面的DEMO发现了最初声明的“hello”并没有改变，改变的是引用。还发现了生成许多没有栈内存指向的对象，这样的对象将会等待GC回收!也说明如果一个S...
JS进阶之深浅拷贝
weixin_45457352的博客
01-28 230
深浅拷贝 深拷贝：改变不会使原数据跟着改变 浅拷贝：改变后会使原数据跟着改变 半深拷贝：嵌套对象中，第一层是深拷贝，第二层及以上为浅拷贝 （我们要尽量避免浅拷贝，多使用深拷贝） 半深拷贝的三种方法 数组 concat() slice() var arr = ['a','b']; var arr2 = arr.concat(); arr2.push('c'); console.log(arr2);//[a,b,c] console.log(arr);//[a
js中的深浅拷贝问题简析
10-17
深浅拷贝的问题经常在我们不希望原始数据被修改，却又想基于原始数据得到一个可修改的副本时出现。如果不注意深浅拷贝的区别，就可能出现由于无意间修改了副本导致原始数据也发生了变化的问题。 在JavaScript中，...
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
10-18
深拷贝则不同，它创建了一个全新的对象，包括对象内的所有属性及其值，与原始对象完全分离。深拷贝后，修改新对象不会影响原始对象。实现深拷贝有多种方法，其中包括： 1. 使用 `JSON.parse()` 和 `JSON.stringify...
JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解
10-15
这意味着两个变量指向的是同一个内存空间，任何一方对对象的修改都会影响到另一方。例如： ```javascript var obj1 = { name: 'zhangsan', age: '18', language: [1, [2, 3], [4, 5]] }; var obj2 = obj1; ``` 在...
详细分析JavaScript中的深浅拷贝
01-18
在说JS中深浅拷贝之前，我们需要对JS中的数据类型有所了解，分为基本数据类型与引用数据类型，对于基本数据类型并没有深浅拷贝的说法，深浅拷贝主要针对引用数据类型。 一、浅拷贝 浅拷贝只复制了引用，并没有复制...
fastjson 不转某些字段_fastjson对JSONObject中的指定字段重新赋值的实现
weixin_35952362的博客
02-06 814
JSONObject对同一个key重新put时，新值就会取代旧值，没有set之类的方法构建json string时，所有的引号都要转义package xx;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;// 对JSONObject中的指定字段重新赋值public class testJsonRepla...
解决antd Form的onChange方法改变的值与getFieldsValue获取的值不同步的问题
最新发布
qq_45174403的博客
09-01 1350
antd的Form表单在onChange时更新的数据和用getFieldsValue获取的数据不一致
深拷贝和浅拷贝的原因以及解决方式
wajueju的博客
07-05 1937
深拷贝和浅拷贝的产生原因以及解决方式
修改JS数组中的一个对象的元素的值，其他对象的元素值都跟着变了
Mjl_666的博客
12-29 2578
// this.xAxis是一个数组对象，给数组添加新属性，输出新数组 for (let i=0;i<count;i++){ this.xAxis.data=data; this.xAxis.gridIndex=i; Data.push(this.xAxis); } console.log(Data) this.xAxis = Data; 我添加this.xAxis.gridIndex新的属性和值，最后输出添加的属性和值都为最后一遍循环 原因：由于数组是引用变量
Vue中把对象中的数据给了某个变量，改变一个对象的值，另一个对象也变化的解决方案
ZKY的博客
05-25 3297
在vue中的data数据中建立这两个对象 var salesOreder = new Vue({ delimiters: ['${', '}'], [想知道这里的作用解释请看这里](https://blog.csdn.net/qq_46124502/article/details/106326034) data(){ return { objData1:{ name:"zky" }，
python剔除异常数据_从数据集中剔除异常数据一般用什么数据算法？
weixin_39969953的博客
12-05 2182
异常值，也称离群值，是指样本中的个别值，其数值明显偏离所属样本的绝大部分观测值。不论什么研究数据，如果数据中存在可能的异常值，均应在分析之前处理，防止异常值带来的干扰，比如异常值会扭曲X和Y之间的相关关系，回归关系等，异常错误的结论；当然其它研究方法基本均会受到异常值的干扰，异常值较多或者异常稍大时，此时会直接扭曲结论。1异常值处理步骤针对异常值，常见的步骤有三步：第一步是异常值检测；第二步是异常...
js赋值改变后原来的东西也改变了，影响了好几个其它使用同一个源数据的原因以及解决方法
热门推荐
df981011512的博客
06-05 1万+
【原因】：数组赋值目测在php/js这两种语言中的赋值都是应用传递(所谓应用传递就是所谓的赋值其就是共享同一个地址)，一般的字串整型等数据类型都是值传递所以不存在这类情况 【解决方法】：在进行数组间赋值时，将原来的赋值方式换以下即可，代码如下 //例如我有一个js数组 result={45,54,65}; json_datas={};//我自定义一个空数组来进行赋值 //一般我们都是
JS控制表单所有数据都是只读不可更改
学习、记录、分享
09-12 6258
用jQuery封装的方法prop()，很方便 $(' 要选择的jQuery对象').prop('readonly',true); 还有一个是$(' ...').attr('readonly',true);（建议第一个）
JavaScript深浅拷贝原理与递归实现详解
在前端JavaScript中，深浅拷贝是一个关键概念，尤其是在处理复杂数据类型如对象和数组时。深浅拷贝主要涉及原始数据类型（基本类型）和引用数据类型（如对象）之间的差异。基本数据类型包括Boolean、Null、Undefined...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值