深拷贝和浅拷贝

175 阅读1分钟

先上栗子🌰:

eg1:

let object1 = { a: 1, b: 2, c: 3 };

let  object2 = Object.assign({}, object1);

object2.a = 44444

console.log(object1) // {a: 1, b: 2, c: 3}

console.log(object2) // {a: 4444, b: 2, c: 3}

object2改变  object1没有改变

eg2:

let  object1 = { a: [{item:1}], b: 2, c: 3 };

let  object2 = Object.assign({}, object1);

object2.a[0].item =444444

console.log(object1)

console.log(object2)


object2改变 object2也改变了!!!

这就是浅拷贝带来的问题!!!


解决方法:深拷贝

给大家提供一个深拷贝的方法:

function deepCopy(p, c) {
  var c = c || {};

  for (var i in p) {

    if (typeof p[i] === 'object') {

      c[i] = (p[i].constructor === Array) ? [] : {};

      deepCopy(p[i], c[i]);

    } else {

      c[i] = p[i];

    }
  }

  return c;
}
deepCopy(p, c) // p 原对象  c目标对象

现在进行深拷贝

let object1 = {
  a: [{item:1}],
  b: 2,
  c: 3
};
let  object2 = {}
deepCopy(object1, object2)

object2.a[0].item =444444

console.log('object1',object1)
console.log('object2', object2)



进行深拷贝之后,object2改变不影响object1!!!!


使用场景补充:我们在使用 vue的时候会遇到Vue 不能检测对象属性的添加或删除:

vue文档里说了:还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:

所以想要动态添加对象的属性并且页面能更新到你可以用下面的的方法:

this.obj = Object.assign({}, this.obj,{a:1}) //方法二 可以添加多个属性

详细介绍见:juejin.cn/post/684490…


这时候我们又要动态添加的属性能被页面更新到,又要对数据进行深拷贝:

Object.assign(this.chosenListData, _.cloneDeep(this.copyStoreLists))

_.cloneDeep()是lodash封装的方法!链接:lodash.com/docs/4.17.4

这时候this.chosenListData的数据的改变不会影响到this.copyStoreLists

理解的比较浅显,希望大家补充纠正