Angular Typescript 数组仅在 array.push() 上添加最后一个元素答案

【问题标题】：Angular Typescript array only adds last element on array.push()Angular Typescript 数组仅在 array.push() 上添加最后一个元素
【发布时间】：2021-09-02 08:16:55
【问题描述】：

我有一个在 ngInit() 中调用的函数，它使用 array.push() 用 for 循环 中生成的值填充一个类的对象数组.

但是，一旦 for 循环完成，所有数组项都是该类的最后添加的实例。

类定义

class ABC{
time: number;
id: number;
 }

函数定义

addToArray(){
 let arrayTemp : ABC[]= [];
 let tempClass ={} as ABC;

 for (let i = 0; i < 4; i++) {
 
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

console.log(arrayTemp[val])的输出

for循环后console.log(arrayTemp)的输出

我不知道为什么会这样，任何帮助将不胜感激。

【问题讨论】：

数组中的每个元素都包含相同的 ABC 类实例。所以每次更新 tempClass 值时，每个元素都会反映变化。
如果你想在 for 循环的每次迭代中创建一个类的新实例，请将 let tempClass ={} as ABC; 放入 for 循环中。
@cWerning 为什么你在评论中回答了这个问题？只需发布答案即可。
@AustinTFrench 因为我不遵守男人的规则
Javascript 不是 C++，请阅读有关函数功能的文档，是否复制参数

标签： node.js arrays angular typescript

【解决方案1】：

当你直接修改 Class 时，像这里

   tempClass.timei+1;
   tempClass.id=i;

您正在修改现有类实例。
因为您将这个已经存在的实例添加到数组中
arrayTemp.push(tempClass);
这意味着您编辑您在开头创建的类let tempClass ={} as ABC;

你真正想做的是为每次迭代创建一个新的类实例，就像这样

addToArray(){
 let arrayTemp : ABC[]= [];

 for (let i = 0; i < 4; i++) {
   // create new instance of class for each iteration
   let tempClass = new ABC();
   tempClass.timei+1;
   tempClass.id=i;

    let val=i;
    arrayTemp.push(tempClass);
    console.log(arrayTemp[val]);   // here class objects displayed correctly
}

   console.log(arrayTemp);  // here all elements are just the last added class object
  
  }
 }

编辑：
不要忘记使用 new 关键字创建您的课程！如果您直接以let tempClass ={} as ABC; 进行初始化，您将不会得到一个类的实际表示，您只会得到一个空对象，只有 看起来 像一个 ABC 类来打字。

【讨论】：

谢谢，打字稿新手，所以这个解释帮助了很多人！