从 angular 中的服务函数返回后，组件的复杂服务对象发生变化
Complex object of Service changes from component after returning from service function in angular 5
进一步阐述我的问题，
我有一个名为 hero.service.ts 的服务正在一个名为 hero.component.ts 的组件中使用。 hero.service.ts 包含一个变量 heros，它是一个 array 并包含许多项。
我正在通过一个名为 getHeroes() 的函数从 hero.service.ts 获取 heros 的值，其中 returns 变量为 return this.heros; 并获取组件上的值通过 this.heros = this.heroService.getHeroes().
在我的组件中，英雄列表在 table 中。 当我从 table 中删除行时，它实际上也会从 hero.service.ts 的变量 heros 中删除。
- 为什么会这样？
- 为什么它返回变量引用而不只是一个值。
仅供参考，我通过返回 heros 和 ... 扩展运算符（如 return [...this.heros];）来实现它。但是为什么服务传递变量的引用。请大家帮忙。
在 JavaScript 中，数组和对象等复杂数据类型通过引用传递，而不是通过值传递。
当您从您的服务返回 this.heros; 时，您的组件没有获得 heroes 数组。它得到了内存中英雄数组的引用。
基本上在这一点上，组件和服务中的 heroes 属性都指向内存中的同一个数组。
为了在您 return [...this.heros]; 时修复此问题，这次它将 heroes 数组的元素分散到一个动态创建的新数组中，然后将对该新创建的数组的引用返回给您组件。
那个时候，组件 heroes 指向内存中的另一个数组。因此，当您这样做时，您会得到预期的结果，即英雄从组件数组中删除，而不是从服务数组中删除。
这里有一个 StackBlitz 供您参考。
进一步阐述我的问题，
我有一个名为 hero.service.ts 的服务正在一个名为 hero.component.ts 的组件中使用。 hero.service.ts 包含一个变量 heros，它是一个 array 并包含许多项。
我正在通过一个名为 getHeroes() 的函数从 hero.service.ts 获取 heros 的值，其中 returns 变量为 return this.heros; 并获取组件上的值通过 this.heros = this.heroService.getHeroes().
在我的组件中，英雄列表在 table 中。 当我从 table 中删除行时，它实际上也会从 hero.service.ts 的变量 heros 中删除。
- 为什么会这样？
- 为什么它返回变量引用而不只是一个值。
仅供参考，我通过返回 heros 和 ... 扩展运算符（如 return [...this.heros];）来实现它。但是为什么服务传递变量的引用。请大家帮忙。
在 JavaScript 中，数组和对象等复杂数据类型通过引用传递，而不是通过值传递。
当您从您的服务返回 this.heros; 时，您的组件没有获得 heroes 数组。它得到了内存中英雄数组的引用。
基本上在这一点上，组件和服务中的 heroes 属性都指向内存中的同一个数组。
为了在您 return [...this.heros]; 时修复此问题，这次它将 heroes 数组的元素分散到一个动态创建的新数组中，然后将对该新创建的数组的引用返回给您组件。
那个时候，组件 heroes 指向内存中的另一个数组。因此，当您这样做时，您会得到预期的结果，即英雄从组件数组中删除，而不是从服务数组中删除。
这里有一个 StackBlitz 供您参考。