浅拷贝深拷贝引发对象数组数据一致的问题

最新推荐文章于 2024-10-12 10:41:56 发布
最新推荐文章于 2024-10-12 10:41:56 发布
阅读量132 收藏
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42440919/article/details/129025315
版权
文章讨论了在处理接口返回的复杂对象时，由于JavaScript的浅拷贝特性，导致多个分类下内容相同的问题。解决方案是使用深拷贝来确保独立修改各个分类的数据。文章提到了在对象包含对象的情况下，需要特别注意拷贝的方式。
摘要由CSDN通过智能技术生成

 

其中类似专科中心、服务套餐、专家团队下面的内容都是通过接口返回的，但是赋值后，发现所有分类下面都一样了。

 

虽然指给this.option[2].children的对应children赋值了，但是option[0]和option[1]也有对应的值。

因为他们都是this.centerList赋值过来的，如果赋值的对象里面包含对象，那么对象的对象就是浅拷贝，其中一个变了其他也会变得，所以如果对象中有对象，需要深拷贝，最简单的处理如下：

 

 

qq_42440919
关注
浅拷贝和深拷贝PPT学习教案.pptx
10-05
【浅拷贝与深拷贝】是编程中的一个重要概念，主要涉及到对象复制时内存管理的问题。在C++中，当我们创建一个对象并将其赋值给另一个对象时，系统会自动调用拷贝构造函数或者赋值运算符。默认情况下，这种复制行为被...
解决vue改变一个数组另一个数组也会改变的问题(数组或者对象的引用问题)
qq_59130674的博客
10-07 2455
js复杂数据类型直接赋值产生的内存地址一致的解决方案
解决vue中浅拷贝问题
rsdtfgyuhygu的博客
05-11 522
如何解决浅拷贝问题 在vue中， let list1 = { 0:[ {isHand:false,id:222,name:‘111’}, {isHand:false,id:222,name:‘111’} ] 1:[ {isHand:false,id:222,name:‘111’}, ] } let list2 = list1 在这里改变list2，list1的内容也会随之改变，这就是浅拷贝 解决方法：let list2 = {…list1} 这样改变list2的话，list1就不会再跟着改变了！ ...
vue两对象赋值后一直相等，或改变一个对象另一个对象跟着改变问题
机智如我
01-07 3879
在vue中，假如定义一个对象 var obj1 = { index:1, name:first } var x = obj1; obj1.index = 2; console.log(x.index) 这个得出的结果也是2，原因好像是vue将obj1的地址给了x，这样x实际是指向的obj1相当于指针。今天在实际应用中也发现一个更隐藏的bug。 load(){ this.old = [...
由vue遍历对象引发对深度拷贝的思考
E_li_na的博客
07-02 1201
项目中用v-for遍历一个对象{ count:"",age:""}进行参数渲染，输入参数后送到后端要转化为JSON字符串，于是提交之前新声明了一个对象，值为原先对象的JSON.stringify字符串。但是，问题来了，后端接口还没部署上去，调用的时候是502,接口调用不成功不会走剩下的流程。 此时，数据已经改动为JSON字符串了，v-for遍历的对象改成JSON字符串“{“count”:“bb”,“age”:“ff”}”。于是遍历时就以字符串的形式进行渲染，出现如下图所示的参数渲染。 那么，如何避免出现这
使用深拷贝解决表单回显上一次数据问题
qq_35946021的博客
04-19 609
vue表单回显上一次数据问题.表单缓存问题。深拷贝的使用方法
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
10-19
深拷贝则是创建一个全新的对象，不仅复制原始对象的所有属性，而且对嵌套的对象或数组也会进行递归拷贝，确保新对象与原始对象完全独立。深拷贝可以通过递归函数、JSON方法（`JSON.stringify()`和`JSON.parse()`，但...
deep-copy-js:javascript的递归深拷贝、克隆和浅拷贝函数
06-30
本项目“deep-copy-js”提供了一种实现JavaScript对象深拷贝、克隆和浅拷贝的解决方案，尤其对于处理复杂的数据结构时，这类功能显得尤为重要。 深拷贝（Deep Copy）与浅拷贝（Shallow Copy）是两种不同的拷贝方式...
C++中的位拷贝与值拷贝
12-22
在这个版本中，`String`类的拷贝构造函数和赋值运算符都实现了深拷贝，确保每个对象都拥有独立的字符串副本，避免了浅拷贝带来的问题。 总结来说，理解和正确处理C++中的深拷贝和浅拷贝至关重要，特别是当你在处理...
C++对象的浅复制和深复制详解及简单实例
08-30
浅复制可能导致意外的共享状态和内存问题，而深复制则可以确保对象的独立性。在处理包含指针或动态分配内存的对象时，务必考虑使用深复制来避免潜在的错误。通过实例和重载赋值运算符，我们可以有效地管理对象复制，...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 255
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
web扩展
x737510的博客
10-10 510
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1372
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
基于Java(Jsp+Sevlet）+MySql 实现的（Web）成绩管理系统
神仙别闹的自留地
10-08 1646
如果能把负责学生成绩管理的模块独立出来形成一个独立的系统，便可以有效降低教务系统的数据量，不仅可以方便管理员对于所有学生的信息进行系统的管理，而且便于教师对学生成绩进行查询和修改，学生也可以查询自己的成绩。因此，开发一套合适的、兼容性好的系统是很有必要的。：DAO层主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此，DAO层的设计首先是设计DAO的接口，然后定义此接口的实现类，然后就可在模块中调用此接口来进行数据业务的处理，而不用关心此接口的具体实现类是哪个类，显得结构非常清晰。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
最新发布
Mr. Zhang Xiaojian's Blog
10-12 311
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 120
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1056
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 327
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
字节跳动青训营开始报名了！
窗外风景随心变幻
10-10 1626
青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生，旨在培养优秀且具有职业竞争力的开发工程师。本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向，在这个飞速发展的 AI 时代，我们将和豆包MarsCode 一起深入探索，在青训营的技术氛围中，学习 AI，使用 Al，高效写码~
JavaScript面试题：24道全面解析数据类型与浅拷贝
6. 深拷贝与浅拷贝：浅拷贝只复制对象的引用，如果对象内部有循环引用或复杂结构，可能引发意外效果。实现浅拷贝的方法包括`Object.assign()`（在目标对象只有一层时等同于深拷贝）和扩展运算符。深拷贝则是完全复制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值