Question

我的caseService内部有一个模拟数组，该数组中的数据通过整个Web应用程序分发。

要在另一个组件中获取数据，我使用以下代码：

this.cases = this.caseService.data;

它工作正常，但是有一件事困扰着我。

在我的组件之一中，我可以无限滚动：

@HostListener('window:scroll', ['$event'])
scroll() {
  const pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
  const max = document.documentElement.scrollHeight;
  if (pos === max) {
    this.cases.push(...this.casesService.data);
    // causes trouble
  }
}

随着用户滚动，数组this.cases被推入。它工作正常，但是当我通过返回或路由到其他地方离开该组件时，this.cases甚至this.casesService.data都会保留条目的数量（该数量取决于用户滚动多长时间）-因此每个其他组件显示的案件数量都将增加。

重新加载页面可以再次解决该问题。

Answer 1

发生这种情况是因为this.cases和this.caseService.data是对同一对象的不同引用。

为说明问题：

var a = [];
var b = a;
b.push("test");
console.log(a) // ["test"]

要解决此问题，您需要确保两个对象不同。设置初始值时，只需克隆数组：

this.cases = [...this.caseService.data];

注意：克隆数组的方法有很多，这只是我个人的喜好。

现在，您可以自由修改this.cases，而无需更改this.caseService.data。

正如@Rich所指出的，这将仅防止更改数组的内容。这不会阻止更改这些对象的 properties 。

例如：

var a = [{ name: "Original Name" }];
var b = [...this.caseService.data];
b[0].name = "Test Name";
a[0].name === "Test Name"; // True

为避免这种情况，您需要执行深度克隆：

this.cases = JSON.parse(JSON.stringify(this.caseService.data));

注意：同样，有很多方法可以完成深层克隆，这只是我个人的喜好。

Array.push（）全局增加条目数量

1 个答案: