我最近在作一个vue + element-UI + vue-resource + vuex项目的时候,遇到了一个对象的问题。javascript
当咱们在项目须要 复制一个对象到另外一个对象而且 被复制的对象不能受复制后的对象的影响。vue
我先总结下 咱们哪些方法能够复制对象java
// 直接赋值 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的键值也会被修改),vuex
这就跟我家的钥匙刚开始是一把钥匙,而后我到配钥匙的地方配了一把如出一辙的钥匙,那么个人这把原来的钥匙能够开我家的门,拿我家的东西,那么配的那把钥匙,也能够打开我家的门,拿走我家的东西。vue-resource
其实咱们想作的是,咱们心买了一个房子,只是房子里的东西摆设跟我原来的房子是如出一辙的,惟独不同的就是,我原来家的钥匙只能开原来家的门,新家的钥匙只能开新家的门,虽然两个房子里的东西是如出一辙的,可是都是没有实际的关联关系。那么这样我门须要怎么作呢。测试
咱们能够先看看下面的这个方法设计
// 使用 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()这个方法不是深层的复制对象,只是让对象里第一层的数据没有了关联性,可是对象内的对象则跟被复制的对象有着关联性的。那么咱们其实能够想象,怎么才能让他们彻底没有关联性没呢。blog
字符串类型 和 对象类型 确定是没有关联性的 ,由于它们的类型都不同,确定是没有可比性和关联性的。 有了这样的想法我以为咱们就有办法决绝这个问题了;ip
// 这个最简单暴力的处理 两个对象的关联性的问题 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 ,这样就至关于,我把我原来家的布置等东西,用设计稿的方式展示出来,而后咱们又买了一个新家,按着原来的设计方式重构了出来,这样两个房子的内饰是如出一辙的,可是门的钥匙不同,这样就失去了之前的关联性。
以上的方法能够封装成方法方便使用
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}}
第一次写博客,写的很差的地方但愿各位不要喷(*^__^*)