为什么在处理新列表时父列表对象的属性得到更新

时间:2018-12-04 12:31:19

标签: 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 Example

2 个答案:

答案 0 :(得分:2)

它更改了parentList的属性,因为您正在传递对象的引用。

引用指向同一对象,不是副本。

如果您要复制对象,则可以复制该对象并将其放在第二个列表中

JSON.parse(JSON.stringify(item))

答案 1 :(得分:2)

当您在子级列表中推送该项目时,就是在插入相同的对象。 当您这样做时:

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

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

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

因此,您需要传递两个完全不同的对象。您可以使用以下方法创建要传递的对象的副本:

  • let newObj = Object.assign({}, yourObj),它基本上采用了'youObj'的所有属性,并将它们复制到新对象'{}'中,然后返回此新对象。但这仅在属性未嵌套的情况下有效!
  • let newObj = JSON.parse(JSON.stringify(yourObj)),它创建对象的JSON字符串,然后使用相同的字符串作为新对象重新创建对象(JSON是表示Javascript对象的字符串格式)。