先上栗子🌰:
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