Angular/Firebase项目数组对象值重复问题求助

问题根源 #

你遇到的问题是因为JavaScript对象是引用类型：循环外创建的objectToInsert是同一个对象，每次循环只是修改它的属性值，而push到数组里的都是这个对象的引用。当循环结束时，i最终等于2，数组里的两个引用指向的都是最后修改后的对象，所以两个元素的dropNumber都是2。

修复方案 #

方案1：循环内创建新对象

把对象的定义放到循环内部，确保每次迭代都生成一个全新的对象：

createAutoObject() {
  this.drops.length = 0;

  for (let i = 1; i <= 2; i++) {
    let objectToInsert = {
      campaignName: campaignObject.campaignName,
      dropStatus: '',
      isSeededReceived: false,
      isLastDrop: false,
      isDropCompleted: false,
      dropNumber: i,
      dropVolume: campaignObject.firstDropVolume,
    };
    this.drops.push(objectToInsert);
  }
  return this.drops;
}

方案2：使用对象复制生成独立实例

如果需要复用基础对象结构，可以用展开运算符（...）在每次循环时复制基础对象，再修改特定属性：

createAutoObject() {
  this.drops.length = 0;

  // 定义基础对象模板
  const baseDropObject = {
    dropStatus: '',
    isSeededReceived: false,
    isLastDrop: false,
    isDropCompleted: false,
    dropNumber: 0,
    dropVolume: '',
  };

  for (let i = 1; i <= 2; i++) {
    // 复制基础对象并覆盖动态属性
    const objectToInsert = {
      ...baseDropObject,
      campaignName: campaignObject.campaignName,
      dropNumber: i,
      dropVolume: campaignObject.firstDropVolume,
    };
    this.drops.push(objectToInsert);
  }
  return this.drops;
}

两种方案都能保证数组中的每个元素都是独立的对象实例，修改其中一个不会影响其他元素的属性值。

内容的提问来源于stack exchange，提问作者Wahéb