JavaScript：对象数组多对象值批量更新的问题及解决方案

错误实现及问题现象 #

最初尝试通过嵌套循环修改对象数组的属性值，代码如下：

// for..of loop with variable i to access second array to get values

const AntraegeListe = new Array();
for (let i = 0; i < MESRForm.MitarbeiterListe.length; i++) {
  AntraegeListe.push(obj);
}
for (var i = 0; i < MESRForm.MitarbeiterListe.length; i++) {
  for (const _antrag of AntraegeListe) {
    _antrag.Mitarbeiter = MESRForm.MitarbeiterListe[i].Mitarbeiter;
    _antrag.UserIDMitarbeiter =
      MESRForm.MitarbeiterListe[i].UserIDMitarbeiter;
    _antrag.Vorgesetzter = MESRForm.MitarbeiterListe[i].Vorgesetzter;

    console.log(_antrag);
    break;
  }
}

console.log(AntraegeListe);

执行后发现：控制台打印单个对象时属性值已更新，但整个AntraegeListe数组的所有元素属性值完全一致，无法生成包含3个对应MitarbeiterListe数组值的对象数组。

问题根源 #

对象属于引用类型，最初的代码中，循环推入数组的是同一个obj对象的内存引用。数组里的所有元素实际上指向同一个对象，后续修改属性时，所有数组元素都会同步变化，最终所有元素的属性值都会被最后一次迭代的赋值覆盖。

正确实现方案 #

将对象声明放入循环内部，每次迭代创建新对象并赋值后推入数组，代码如下：

createMESR(MESRForm: any): void {
  const AntraegeListe = new Array();
  for (var i = 0; i < MESRForm.MitarbeiterListe.length; i++) {
    var obj = {....};

    obj.AntragID = '';
    obj.Timestamp = '';
    obj.Antragsteller = MESRForm.Antragsteller;
    obj.Mitarbeiter = MESRForm.MitarbeiterListe[i].Mitarbeiter;
    // 其他属性赋值...

    AntraegeListe.push(obj);
  }

  console.log(AntraegeListe);
}

解决原理 #

每次循环迭代时创建新的对象实例，每个对象拥有独立的内存地址。将这些独立对象推入数组后，各自保存对应MitarbeiterListe元素的属性值，最终数组会生成对应数量的独立对象，属性值与目标数组元素一一匹配。

内容的提问来源于stack exchange，提问作者K.VYN