js 对象和对象赋值去除关联性。

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 ，这样就相当于，我把我原来家的布置等东西，用设计稿的方式展现出来，然后我们又买了一个新家，按着原来的设计方式重构了出来，这样两个房子的内饰是一模一样的，但是门的钥匙不一样，这样就失去了以前的关联性。

以上的方法可以封装成方法方便使用

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}}

转载：https://www.cnblogs.com/xuanyubk/p/7779420.html

js 对象和对象赋值去除关联性。相关推荐

js对象的直接赋值、浅拷贝与深拷贝
最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...
js之删除对象中的属性——delete、es6解构赋值、自执行匿名函数
js之删除对象中的属性--delete.es6解构赋值.自执行匿名函数实例 const person = {name: '李世民',gender: 'male',age: 24 };// 删除目标对 ...
JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
JS中集合对象(Array.Map.Set)及类数组对象的使用与对比在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...
前端之JavaScript：JS之DOM对象一
js之DOM对象一一.什么是HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 ...
【CyberSecurityLearning 50】JS 基础+函数+对象+事件
目录 JavaScript简介: JS 简单的语句如何在HTML中引入JS代码变量声明变量变量类型 null和undefined 数组对象流程控制 if语句判断 for循环 for ... ...
js 数组 ajax php,js里面的对象ajax post到php端直接变成数组了？
本帖最后由 zhoumengkang 于 2013-09-12 10:03:14 编辑事先引入了jquery var str ="{'a':'b','aa':'bb'}";var ...
5.14 js对象函数 js操作document对象
---对象 var myObject ={} /* 声明对象字面变量*/ myObject点语法取值赋值代码格式 var person = { name : "zhangs ...
js判断对象是否为空对象_js对象
七种数据类型 number string bool symbol undefined null object 五个Falsy 值 undefined null 0 NaN '' 对象 object 第 ...
js中的对象、原型链机制、构造函数
一.在js中创建对象的方式 //一.字面量或直接量创建对象var obj1 = {name:"zs",age:12}; //二.通过new来创建对象var obj2 = new O ...

js 对象和对象赋值去除关联性。

js 对象和对象赋值去除关联性。相关推荐

最新文章

热门文章

js 对象和对象赋值 去除关联性。

js 对象和对象赋值 去除关联性。相关推荐

最新文章

热门文章

js 对象和对象赋值去除关联性。

js 对象和对象赋值去除关联性。相关推荐