js对象操作对象原型操作把⼀个对象A赋值给另⼀个对象B并且
对象B修改不会影响A对象
我最近在做⼀个vue + element-UI + vue-resource + vuex项⽬的时候,遇到了⼀个对象的问题。
当我们在项⽬需要复制⼀个对象到另⼀个对象并且被复制的对象不能受复制后的对象的影响。
我先总结下我们哪些⽅法可以复制对象
// 直接赋值
var obj1 = { a: 1 };
var obj2 = obj1;
console.log(obj2); // { a: 1 }
// 通过 Object.assign() 这个属性来进⾏复制
var obj = { a: 1 };
var obj2 = Object.assign({}, obj);
console.log(obj2); // { a: 1 }
// 通过 for in 循环赋值
var obj1={ a: 1, b: { c: 2 }, c: 0 }
var obj2={}
for( var key in obj1 ){
obj2[key]=obj[key]
}
console.log(obj2); // { a: 1, b: { c: 2 }, c: 0 }
以上的⽅法中都可以把⼀个对象的键值赋值给另⼀个对象(但是我们可以测试出来obj2修改他的键值,obj1的键值也会被修改),
这就跟我家的钥匙刚开始是⼀把钥匙,然后我到配钥匙的地⽅配了⼀把⼀模⼀样的钥匙,那么我的这把原来的钥匙可以开我家的门,拿我家的东西,那么配的那把钥匙,也可以打开我家的门,拿⾛我家的东西。
其实我们想做的是,我们⼼买了⼀个房⼦,只是房⼦⾥的东西摆设跟我原来的房⼦是⼀模⼀样的,唯独不⼀样的就是,我原来家的钥匙只能开原来家的门,新家的钥匙只能开新家的门,虽然两个房⼦⾥的东西是⼀模⼀样的,但是都是没有实际的关联关系。那么这样我门需要怎么做呢。
我们可以先看看下⾯的这个⽅法
// 使⽤ Object.assign() ⽅法复制对象
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.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}
我们可以看到上⾯ Object.assign() 的这个⽅法虽然可以复制我第⼀层的对象值,并且当我obj2修改第⼀层的数据时,obj1不会受到影响。
但是我们在修改obj2 ⾥ b 对象⾥的c的值得时候,这个时候 obj1 ⾥的 b 对象⾥的 c 的值也发⽣了改变,这就说明了,Object.assign()这个⽅法不是深层的复制对象,只是让对象⾥第⼀层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。那么我们其实可以想象,怎么才能让他们完全没有关联性没呢。
字符串类型和对象类型肯定是没有关联性的,因为它们的类型都不⼀样,肯定是没有可⽐性和关联性的。有了这样的想法我觉得我们就有办法决绝这个问题了;
// 这个最简单暴⼒的处理两个对象的关联性的问题
obj1 = { a: 0 , b: { c: 0}};
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}}
上⾯的代码已经可以体现出来我们刚才的⼀个假设,我们先把obj1 转成了字符串类型,这样他就失去了对象的属性和⼀切的特性,然后我们再把它转成⼀个对象类型,这样我们⼼⽣成的对象是通过字符串转换过来的,已经是⼀个新的对象,然后再赋值给obj2 ,这样就相当于,我把我原来家的布置等东西,⽤设计稿的⽅式展现出来,然后我们⼜买了⼀个新家,按着原来的设计⽅式重构了出来,这样两个房⼦的内饰是⼀模⼀样的,但是门的钥匙不⼀样,这样就失去了以前的关联性。
vuejson转对象以上的⽅法可以封装成⽅法⽅便使⽤
var function cloneObjectFn (obj){ // 对象复制
return JSON.parse(JSON.stringify(obj))
}
var obj1={a:2,b{c:0}}
var obj2=cloneObjectFn(obj1)
console.log(obj2) // {a:2,b{c:0}}
第⼀次写博客,写的不好的地⽅希望各位不要喷(*^__^*)
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论