React如何避免引用同一对象并创建新副本？代码疑问求解

这是因为你用的slice()和[...arr]都属于浅拷贝——它们只会复制数组的外壳，但数组里的每个对象元素，其实还是和原数组里的对象共享同一个内存引用。换句话说，三个数组里的{value, isChecked, id}对象都是同一个东西，只是被放到了不同的数组容器里而已。

具体分析你的代码： #

• 当你执行this.ClearAllElements = this.DropDownElements.slice();时，新数组ClearAllElements里的每个元素，都是原DropDownElements数组中对象的引用。所以这两个数组看起来内容一样，本质是指向了同一批对象。
• 当你处理SelectAllElements时，map里直接修改了elem.isChecked = true——这里的elem就是原数组里的对象引用，所以修改它会同时影响DropDownElements和ClearAllElements里的对应对象，导致三个数组的内容最终完全一致。
• 哪怕注释掉SelectAllElements的操作，DropDownElements和ClearAllElements看起来值相同，也是因为它们的元素是同一个对象的引用，只是还没修改属性而已。

如何创建真正独立的对象副本？ #

你需要对数组里的每个对象进行深拷贝，确保每个新数组里的对象都是完全独立的。这里有几种适合你场景的方法：

方法1：手动复制每个对象（推荐，可控性强）

利用对象扩展运算符或者Object.assign，在map里为每个元素创建新对象：

// 初始化DropDownElements
this.DropDownElements = this.props.Values.map((element, ind) => ({ 
  value: element, 
  isChecked: false, 
  id: "DropdownElems:" + this.props.UniqueIdentifier + ind, 
}));

// 创建ClearAllElements：每个元素都是新对象
this.ClearAllElements = this.DropDownElements.map(elem => ({...elem}));

// 创建SelectAllElements：基于ClearAllElements的新对象修改isChecked
this.SelectAllElements = this.ClearAllElements.map(elem => ({
  ...elem,
  isChecked: true
}));

方法2：用JSON序列化/反序列化（简单但有局限性）

如果你的对象里没有函数、Symbol、循环引用这类JSON无法处理的内容，可以用这个快捷方式：

this.ClearAllElements = JSON.parse(JSON.stringify(this.DropDownElements));
this.SelectAllElements = JSON.parse(JSON.stringify(this.ClearAllElements)).map(elem => {
  elem.isChecked = true;
  return elem;
});

⚠️ 注意：这个方法会丢失函数、Symbol等非JSON支持的类型，所以如果你的对象结构更复杂，不推荐用。

方法3：使用第三方库（如Lodash的cloneDeep）

如果你项目里已经依赖了Lodash，可以直接用_.cloneDeep，它能处理各种复杂的对象结构：

import _ from 'lodash';

this.ClearAllElements = _.cloneDeep(this.DropDownElements);
this.SelectAllElements = _.cloneDeep(this.ClearAllElements).map(elem => {
  elem.isChecked = true;
  return elem;
});

验证效果 #

修改后再打印三个数组，你会发现它们的对象属性修改后不会互相影响了——因为每个数组里的对象都是独立的副本，不再共享引用。

内容的提问来源于stack exchange，提问作者Shivam Sahil