【解决】数组中循环插入对象，当上一个对象的值改变后，数组内对象也跟着变化

最新推荐文章于 2023-10-10 16:42:08 发布
原创 最新推荐文章于 2023-10-10 16:42:08 发布 · 713 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#数据结构 #vue.js #前端 #typescript
在循环处理数组时，如果将对象push到新数组而未做深拷贝，会导致所有对象引用同一内存地址。当对象值改变，数组内所有对象都会受影响。通过JSON.parse(JSON.stringify())方法可实现深拷贝，确保每次push都是新对象，避免值的同步变动。

遇到的问题：

循环一个数组，将需要的属性插入到一个对象【newObj】中，然后push到一个数组【newArr】，当每次对象的值改变时，已经插入数组内的对象的值也会随之改变；

 newArr.push(newObj)

解决办法：

每次push到数组【newArr】的时候，对对象【newObj】进行深拷贝；
数组每次push的时候都是引用的同一个对象地址，所以当对象每次改动的时候，数组内的对象也会随之改变；
使用深拷贝就相当于每次都是新建了一个新的对象新的内存地址

newArr.push(JSON.parse(JSON.stringify(newObj)))
循环往数组中插入对象
ljmkmnkl的博客
05-03 1万+
循环往数组中插入对象时要确保每次都创建一个新的对象，不能重复使用之前的对象   //错误的方法 var arr = []; var obj = {}; for (var i = 0; i      obj.id = i;     arr.push(obj); } //正确的方法 var arr = []; for (var i = 
往数组中循环添加对象
m0_53136368的博客
04-12 652
这里的操作就是把后台传过来的数据进行循环，并且在循环内部声明一个对象，把后台的属性赋值给项目所需要的属性值。最后把对象push进所需要的数组里面。（这里的data是项目本来的假数据数组，为了和后台对接，首先要设data为空，然后这里进行和后台数据的对接push就行）遇到一个需求就是关于原本的属性不能动，但是后台传过来的参数和原本的属性不相符，所以这里循环的时候就需要重新操作下。
Vue中循环注意点和动态改变数组或对象的方法
风里有诗句哈的博客
02-07 3014
基础部分： <template></template>模板占位符作用类似于div来包裹一些元素，但不会渲染到页面上 Vue默认会复用相同的组件，但可以传入不同的key值来解决这个问题 列表循环注意点： 提高循环性能最好有独一无二的key值，且尽量不要使用index作为key值，一般后端会在传入数据时使用id作为前值，可以使用id作为key值 在Vue中不能...
JS中为对象数组添加新对象结果导致数组中已存在的对象也修改了
热门推荐
Mr_Bobcp的博客
11-25 1万+
问题描述 为对象数组添加新对象结果导致数组中已存在的对象也改变了 我需要将一个空数组中存放已有的某个对象，这个对象是复用的，结果每次执行添加后所有对象都成为了最后添加的那个。 this.ObjList.push(this.Obj); 问题分析 因为数组是引用传递而不是值传递，指向的是同一个内存地址 ,所以赋值给数组里的对象其实一直都是同一个地址里存的同一个数组 ，所以最后一次输入的值会将每个引用的值都修改。 解决方法 先先将需要操作的Obj对象转换成字符串，然后再转换成对象这样就会新分配一块内存新创建一个
04rapidJson学习之往doc根对象插入数组，并在数组中插入对象案例
weixin_44517656的博客
12-12 2484
04rapidJson学习之往doc根对象插入数组，并在数组中插入对象案例 概述： 上两篇我们已经讲了数组和对象的创建和遍历，下面我们使用个案例巩固一下，并且这个案例也是项目中用得比较多的方法。 1 代码 //往数组中插入对象.一般使用多个函数组成json时,都是从最小单位开始组建 //注意：这里并非是返回数组，只是开一个函数处理数组的引用而已。防止某个函数过长 void InsertObjInDoc(Document &doc, Value &array, std::string came
关于新建一个对象，插入数组时的变量变动
czxvzxzczcc的博客
06-22 134
var arr001 = []; // -----------------------------------------------1 var person = { value: 1, label: "1", }; for( var i = 0; i <= 2; i++ ){ console.log(i) person.value =...
 JS的数组、对象和类数组对象
U R My Sunshine
06-16 1031
昨天的TS的课上听到了类数组对象，想到之前面试的时候被问到过，回想了一下，当时就提了一下函数的arguments参数是类数组对象，对其数据结构和与数组或者对象的区别的理解其实很模糊，来补一篇。 数组 Array 定义：一组有序的数据集合，其索引为从0开始且自然增长的整数，其元素值可以是任何js数据。其包含一个名为length的属性，该属性表示数组元素的个数。 数组元素的索引和length属性是在数组定义时根据数组元素语言自动定义的。如下图。 对数组，日常工作中对数组的处理蛮多的，涉及到一些的算法，
JS 之 数组、对象 、函数
A4465643的博客
09-15 420
一、数组 数组是JS中的引用类型之一 引用类型和值类型的区别：存放的位置    引用类型存放在内存里，堆内存 (引用类型比较的时候比的是地址)    值类型存放在内存里，栈内存 数组的定义 (1)字面量、直接量 : var arr = [ ] ; (2) 构造函数: var arr1 = new Array() ;       var arr2 = Array(); 数组的使用 设置数据 : var
uni-app 在已有的数据对象中动态添加更多的数据对象
UserGuan的博客
10-10 2003
它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hello，ningzaichun')Vue.set()：将 set 函数绑定在 vue 构造函数中，设置实例创建之后添加的新的响应式属性，且触发视图更新，但是不允许添加根级响应式属性，只可以向嵌套对象添加响应式属性。Vue.set() 是将 set 函数绑定在 Vue 构造函数上，this.$set() 是将 set 函数绑定在 Vue 原型上。
uni——foreach遍历 创建对象数组、遍历数组中的数组
努力、拼搏、奋进
12-29 1972
uni——foreach遍历 创建对象数组、遍历数组中的数组
循环数组赋值给对象并push到数组中
weixin_34408717的博客
05-15 9479
var a = {b:[]}; var c = { name:'', age:'7' }; var d = ['bj','sh','sz','gz'] for(var i in d){ c.name = d[i]; a.b.push(c) }复制代码如上图所示：循环遍历数组d 并把每一项赋值给c.name 然后在push到a.b中代码感觉没有问题但是经打印得出结果：...
对象数据如何转化成数组
daishu_shu的博客
04-21 7323
文章目录前言一、后端给的数据二、如何转换三、最终结果 前言 项目中后端给的数据有时候不可能完全符合前端的数据要求，比如element-ui+vue项目组合中，下拉框数据是数组的形式。然而后端同事给的确是对象数据，当然你可以和后端协商改成你想要的数据… 但是这样往往比较麻烦，喜欢安静写代码的前端决定自己转换。 提示：正文内容 一、后端给的数据 二、如何转换 console.log('res:', res); let resObj = res.data.data; //获取后
把对象添加进数组后，改变一个对象的值，数组内对象也跟变化的解决办法！
Fang格子的博客
08-01 4017
问题： 把用户每次输入的值（businessBuyer）都存入一个空的数组（BusinessBuyer）内，累加，但发现每次用户输入后，数组内每一个对象的元素值全都跟改变了，所以数组内的所有对象的元素全都变成了用户最后一次输入的值。 this.BusinessBuyer.push(this.businessBuyer) 解决方法: 看到一些博主给出的思路，因为数组是引用传递而不是值传递，...
数组变异方法(pop,push,shift,unshift,splice,sort,reverse)与替换数组(filter,concat,slice)
小阿兜的博客
06-11 926
数组变异方法 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展 push() 往数组最后面添加一个元素，成功返回当前数组的长度 pop() 删除数组的最后一个元素，成功返回删除元素的值 shift() 删除数组的第一个元素，成功返回删除元素的值 unshift() 往数组最前面添加一个元素，成功返回当前数组的长度 splice() 有三
关于Java的增强for循环修改数组元素的问题
weixin_45454859的博客
04-14 9217
曾经没怎么多想过for each有什么特殊的地方，以为就是for循环的简便写法，直到今天写力扣发现了不对劲，使用for each就是过不了，而用正规for循环就过了，决定来好好了解一下for each。 最后发现，是否能理解for each的修改与是否理解Java是值传递有很大的关系。 （完整代码放在最后） 决定从基本数据类型和引用数据类型两种类型来看。 首先简单看一下for each的遍历： 自定义了一个Person类，有name（String）和age（int）两个属性。 用int数组代表基本数据类型的
问题五：一个对象push到数组中此时改变原对象数组中的数据也会被修改是为什么
qq_45279574的博客
06-08 3490
直接上domo <template> <div class=""> <form action=""> <p>姓名：<input type="text" v-model="user.name" /></p> <p>年龄：<input type="text" v-model="user.age" /></p> <p>爱好：<input ty
js对象赋值问题(对象赋值影响原对象、对象赋值后原对象值随之变化)
帅的博客
01-03 2898
js对象赋值问题(对象赋值影响原对象、对象赋值后原对象值随之变化)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别改我bug

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值