为什么改变一个属性 (Object) 也会在另一个单独声明的属性中更改

Question

我有 2 个属性声明如下：

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

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

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;

      })
    })

}

问题所在

我不明白如何改变这个.filteredRequirements 也会改变这个.defaultRequirements(它们都等于同一件事(！如何避免此行为，并使默认要求不受对筛选需求所做的更改的影响？

Answer 1

好的，所以你声明的对象myData.property1.countryDocument是一个非基元/引用值。 因此，这意味着this.defaultRequirements和this.filteredRequirements都指向同一条数据。

如果你使用基元值(例如：string(来执行此操作，你会得到一个副本;所以this.defaultRequirements和this.filteredRequirements将是完全独立的，可以相互操作而不影响。

以您想要的方式复制/复制对象是完全可能的，并且已经有很多关于它的讨论，我不会复制;我建议你看看这个，它很好地涵盖了它。

Answer 2

试试这个：

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}
}