vue用splice给数组动态循环添加对象踩坑

最新推荐文章于 2023-12-16 17:57:07 发布

孤身不觉晚

最新推荐文章于 2023-12-16 17:57:07 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/qq_40043424/article/details/115434037

版权

博客讲述了在JavaScript中动态向数组中插入对象时遇到的问题，即如何确保插入的对象在数组中保持唯一性。作者通过示例代码展示了错误的实现方式导致的多个对象被错误地添加了属性，然后提出了解决方案，即为每个插入的对象添加唯一的ID属性，从而避免了属性重复添加的问题。最后，作者希望了解这个问题背后的原理并寻求更深入的理解。

摘要由CSDN通过智能技术生成

动态向数组中添加对象，例如：

//比如说这是一个后台返回的数组
list: [{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					}
				],

但因为前端效果，我想得到如下数组：

list: [{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{}
				],

错误示例：

var obj = {};
for (var i = 0; i < this.list.length; i++) {
				if ((i + 1) % 3 == 0) {
					this.list.splice(i, 0, obj);
				}
			};
			this.list.push(obj);

好了，现在想要的数组也得到了。但现在有个问题，就比如我点击事件后想给下标为‘2’的对象添加一个属性，但当我操作后我发现下标‘2,5,8’都添加了该属性，但我现在只需要‘2’有该属性，所以这就是一个问题了。

正确示例：

尝试了好久后感觉其实很简单，就是添加的时候对象相同而已，只需要每次添加的对象不相同就很完美。正确示例：

var id = 0;
for (var i = 0; i < this.list.length; i++) {
				if ((i + 1) % 3 == 0) {
					id = id+1;
					let obj = {
						'id':id
					};
					this.list.splice(i, 0, obj);
				}
			};
			this.list.push({});