Angular 8：数组 .map() .slice() 无功能答案

【问题标题】：Angular 8: Array .map() .slice() No funcionanAngular 8：数组 .map() .slice() 无功能
【发布时间】：2019-09-04 20:48:55
【问题描述】：

带有 Firebase 的 Angular 8：数组 .map () .slice () 不起作用。你好。我一直在尝试使用 Angular 8 中的 .map () 和 .slice () 来制作数组的副本，但是使用这些方法我发现复制的数组仍然具有对原始数组的引用。

我不知道是我做错了，还是这些方法在 Angular 8 中不起作用。

 // Iniciamos la escucha de los cambios de la data del usuario
    if (!this.$userData) {
      this.$userData = this.userService.user().valueChanges().subscribe(data => {
        if (data) {
          this.userData = Object.assign({}, data);
          const temp = data.operationsList.map((x) => {
            x.bank = 'Popular';
            return x;
          });
          console.log(this.userData.operationsList, temp);
          if (!this.userData.validated) {
            this.router.navigate(['register/pendingValidation']);
          }
        }
      });
    }

console.log：

(2) [{…}, {…}]
0: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}
1: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}

(2) [{…}, {…}]
0: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}
1: {bank: "Popular", commission: 0, country: "ve", countryAllowed: "all", maximum: 0, …}

在修改复制的数组时，更改也会反映在原始数组中。

【问题讨论】：

如果您已经在复制数组，为什么不直接使用 const temp = this.userData.operationList.map(...) 来制作地图？
不是直接复制，但有相同的想法。 stackoverflow.com/q/52085758/575527 。 Object.assign() 只做“浅层克隆”。
@Jbluehdorn 我已经试过了，结果是一样的。

标签： javascript arrays angular typescript firebase

【解决方案1】：

通过复制数组，您仍然保留对相同对象的引用。所以你需要更深一层：

const temp = data.operationsList.map((x) => Object.assign({}, x, { bank: 'Popular' }));

【讨论】：

谢谢，它对我有用。我不明白为什么在 javascritp 中 .map () 函数工作正常，但使用 angular 和 firebase 保持对原始数组的引用。
Angular 与它无关。如果你 map 或 slice 一个基元数组（如数字、字符串或布尔值），你很好，你正在创建一个合法的、独立的副本。对于一组对象，您需要更加小心。
Wr8.不过，如果您想为数组赋值，请尝试使用扩展运算符

【解决方案2】：

您正在修改对地图中基础数据的直接引用。将其更改为：

let tempX = Object.assign({}, x);
tempX.bank = 'Popular';
return tempX;

【讨论】：

它不起作用，仍然保持对原始数组的引用。