Angular 浅拷贝之...日记文

又踩雷啦啊哈哈哈哈哈。
来重现一下遇到的情境吧

bug 出现

export class AppComponent implements OnInit {
  fruit : any = {
    apple: {},
    banana: {},
  };

  ngOnInit() {
    this.fruit = {
      apple: {
        id: 1,
        isSelect: false,
      },
      banana: {
        id: 2,
        isSelect: false,
      },
    };
  }

  onClick(isSelect: boolean) {
    this.fruit = {
      apple: {
        id: 1,
        isSelect,
      },
    };
  }

• 一开始建了一个 fruit 的物件，里面有 apple 与 banana 这两样空物件
• 在 OnInit 时，赋予了 apple 与 banana 值
• 当我按下 button Click 的 时後， apple 里的 isSelect 为 true

啊！踩到雷了！

如图，按下去後，喷错了！

发现 banana 的 id 不见了，原来是我把 this.fruit 整个值给改掉了
本以为上述的写法，只会修改我有填的值 XD

解法：解构赋值 => 浅拷贝(shallow copy)

这里我使用了 js 里的解构赋值处理，也可以用来做 浅拷贝(shallow copy)
将 onClick 的写测改成这样

onClick(isSelect: boolean) {
  this.fruit = {
    ...this.fruit,  // shallow copy
    apple: {
      id: 1,
      isSelect,
    },
  };
}

来看看成果。嗯...没喷错了 XD 结案！

笔记：深拷贝 (deep copy)

将原本的物件转字串後再转成物件，就会又是全新的一个物件了！

JSON.parse(JSON.stringify(objArray));

objArray 为要带入的物件

後记：

本来以为是浅(深)拷贝的问题，後来仔细一看，原来是我自己搞错了，将 this.fruit 里面的整个值都盖掉，所以才会喷错，不过也刚好再度对深拷贝与浅拷贝的这件事加深印象。

案例：https://stackblitz.com/edit/angular-ivy-wvmptw

参考资料：
变量的解构赋值
深入探讨 JavaScript 中的参数传递：call by value 还是 reference？
关於 JS 中的浅拷贝(shallow copy)以及深拷贝(deep copy)