慎用Object.assign做深拷贝

最近用ES6的Object.assign踩了个坑,研究记录下;

最近有一个项目的功能用到了Object.assign做深拷贝,却发现会出问题。

if(xx){//1
 this.mon = Object.assign([],obj);
}else if(xx){//2
 this.tue= Object.assign([],obj);
} 

第一次只执行1,2条件,this.mon和 this.tue会同时获得相同的对象数据,这里没有问题
但当我只执行条件1时,发现this.tue的数据也被改写成新的与this.mon相同的数据。
可见Object.assign不是简单的深拷贝。查阅官方文档发现它Object.assign只对顶层属性做了赋值,完全没有继续做递归之类的把所有下一层的属性做深拷贝。看官方列出的例子:

function test() {
  'use strict';

  let obj1 = { a: 0 , b: { c: 0}};
  let obj2 = Object.assign({}, obj1);
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj1.a = 1;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
  console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

  obj2.b.c = 3;
  console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}//注意这里对象1里的c属性也发生了改变
  console.log(JSON.stringify(obj2)); // { a: 1, b: { c: 3}}
}

解决方案: JSON.parse(JSON.stringify(oldmon));当然,这种方案可能有一定限制

你可能感兴趣的:(前端学习)