时间戳

首页 > 解决方案 > 为什么当我处理新列表时父列表对象的属性会更新

javascript - 为什么当我处理新列表时父列表对象的属性会更新

问题描述

我有两个清单：

parentList = [{ name: "Item1", flag: true }, { name: "Item2", flag: true }, { name: "Item3", flag: true }];

childList = [];

我正在将单击的项目从 parentList 推送到 childList 数组中，

哪个工作正常，但是当我从 childList 中删除一个项目并且如果我更改 parentList 的属性时：

在 parentList 列表上单击：

this.childList.push(item);

在 childList 上删除单击：

var index = this.childList.indexOf(item);
this.childList.splice(index, 1)
item.flag = false;

该项目已从子列表中删除，但是当我控制 parentList 的值时，它会给我false一个标志键。

无法理解为什么它会改变财产的价值parentList？

StackBlitz 示例

标签： javascript

解决方案

当您在子列表中推送项目时，您插入的是同一个对象。当你这样做时：

var object1 = new Object(); var object2 = object1;

您不是将对象复制到另一个变量中，而是复制它的引用，这是一种用于在计算机内存中定位对象的地址。因此，因为它们具有相同的引用，所以这两个变量会将您引导到内存中的同一个对象。

当您从列表中取出一个对象并将其推送到另一个列表中时，也会发生同样的情况。您正在获取参考，然后将参考放在另一个列表中。

所以你需要传递两个完全不同的对象。您可以使用以下方法创建要传递的对象的副本：

  • let newObj = Object.assign({}, yourObj)，基本上就是把'youObj'的所有属性都复制到新对象'{}'中，然后返回这个新对象。但这仅在属性未嵌套时才有效！
  • let newObj = JSON.parse(JSON.stringify(yourObj))，创建对象的 JSON 字符串，然后使用相同的字符串将对象重新创建为新对象（JSON 是表示 Javascript 对象的字符串格式）。

推荐阅读