为什么改变一个属性（对象）也会改变另一个单独声明的属性？

Question

我有 2 个属性声明如下：

ngOnInit() {
this.defaultRequirements = myData.property1.countryDocument; //should never change
this.filteredRequirements = myData.property1.countryDocument; 
}

当我运行这个 onFilter 函数时，defaultRequirements 属性也会发生变化。

onFilter(selectedSections) {
    let index = -1;

    this.defaultRequirements.forEach(country => {
      index++;
      const filteredSectionsList = [];

      country.section.forEach(section => {
        selectedSections.value.forEach(selectedSelection => {
          const selection = selectedSelection.split(/\s*[-]\s*/);  

          if (country.countryCode === selection[0]) {
            console.log('matched');
            filteredSectionsList.push(section);
          }
        });

        const countryObj = Object.assign({}, country, {
          section: [...filteredSectionsList]
        })

// Here is the issue, when filtering, this.defaultRequirements also gets changed!
        this.filteredRequirements[index] = countryObj;


      })
    })

}

问题

我不明白变异 this.filteredRequirements 是如何同时变异 this.defaultRequirements（它们都等于同一件事）！我怎样才能避免这种行为并使 defaultRequirements 不受对 filteredRequirements 所做的更改的影响？

Answer 1

试试这个：

ngOnInit() {
    this.defaultRequirements = JSON.parse(JSON.stringify(myData.property1.countryDocument));   
    this.filteredRequirements = JSON.parse(JSON.stringify(myData.property1.countryDocument));
}

或

ngOnInit() {
    this.defaultRequirements = {...myData.property1.countryDocument}
    this.filteredRequirements = {...myData.property1.countryDocument}
}

Answer 2

好的，所以您声明的对象 myData.property1.countryDocument 是一个 non-primitive/reference 值。所以这意味着 this.defaultRequirements 和 this.filteredRequirements 都指向同一条数据。

如果您使用原始值（例如：string）执行此操作，您将获得一份副本；所以 this.defaultRequirements 和 this.filteredRequirements 将是完全独立的，并且可以相互操纵而不会影响彼此。

duplicate/copy 以您想要的方式创建一个对象是完全可能的，并且已经有很多关于它的讨论，我不会重复；我建议 you take a look at this 很好地涵盖了它。

为什么改变一个属性（对象）也会改变另一个单独声明的属性？

Why does mutating one property (Object) also change in a different and separately declared property?

javascript

mutation

angular

为什么改变一个 属性（对象）也会改变另一个单独声明的 属性？

Why does mutating one property (Object) also change in a different and separately declared property?

javascript

mutation

angular

为什么改变一个属性（对象）也会改变另一个单独声明的属性？