为什么Angular会覆盖原始变量

Question

我是Angular的新手，所以希望这对其他人来说非常有意义，但我已经做了几个小时了。

export class QuizComponent implements OnInit {
originalArray: IArray[] = [];
tempArray: IArray[] = [];
constructor(
private fetchService: FetchService
) {}
ngOnInit(): void {
this.originalArray = this.fetchService.getData();
this.tempArray = this.originalArray
}
onWin() {
this.tempArray = this.originalArray;
}
}
export class FetchService {
constructor() {}
nameArray: IArray[] = [
{name: 'John'},
{name: 'Jade'},
{name: 'Dave'},
{name: 'Rose'},
];
getData() {
return this.nameArray;
}
}

我希望的是，一旦有人获胜，我可以将tempArray恢复为原始数组。不幸的是，每次修改tempArray(使用角度拖放(时，originalArray也会被修改——我在进行更改时记录了originalArray以确保情况确实如此——所以没有原始状态可恢复。

我尝试了很多不同的返回getData的变体，以及不同的设置变量的方法-在ngOnInit((和构造函数中输入和输出，直接在QuizComponent中，使其只读等。

任何指示都将不胜感激。

编辑：有人回答了，然后立即删除了他们的回答，这就是我最终要做的。不管你是谁，谢谢！非常感谢所有帮助我的人。

this.tempArray = Object.assign([], this.originalArray);

Answer 1

试试这个

ngOnInit(): void {
this.originalArray = this.fetchService.getData();
this.tempArray = [...this.originalArray];
}
onWin() {
this.tempArray = [...this.originalArray];
}
}

有关解释，请参阅：在Javascript/Typescript 中克隆数组

Answer 2

在原始数组上调用.slice克隆数组：

ngOnInit(): void {
this.originalArray = this.fetchService.getData();
this.tempArray = this.originalArray.slice();
}
onWin() {
this.tempArray = this.originalArray.slice();
}

克隆阵列

Answer 3

没有太多信息可供参考。但有一点很突出，那就是您正在制作数组的浅层副本。请注意，在Javascript中，数组(或对象(的副本作为引用传递。因此，对一个变量的任何更改都会自然地影响它的浅拷贝。

深度复制的一个快速解决方法是转换为字符串并返回

ngOnInit(): void {
this.originalArray = JSON.parse(JSON.stringify(this.fetchService.getData()));
this.tempArray = JSON.parse(JSON.stringify(this.originalArray));
}
onWin() {
this.tempArray = JSON.parse(JSON.stringify(this.originalArray));
}