js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

我最近在做一个vue + element-UI + vue-resource + vuex项目的时候,遇到了一个对象的问题。

当我们在项目需要 复制一个对象到另一个对象并且  被复制的对象不能受复制后的对象的影响。

我先总结下 我们哪些方法可以复制对象


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 直接赋值

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

forvar key in obj1 ){

    obj2[key]=obj[key]

}

console.log(obj2); // { a: 1, b: { c: 2 }, c: 0 }

 以上的方法中 都可以把一个对象的键值赋值给另一个对象(但是我们可以测试出来obj2修改他的键值,obj1的键值也会被修改),

这就跟我家的钥匙刚开始是一把钥匙,然后我到配钥匙的地方配了一把一模一样的钥匙,那么我的这把原来的钥匙可以开我家的门,拿我家的东西,那么配的那把钥匙,也可以打开我家的门,拿走我家的东西。

 其实我们想做的是,我们心买了一个房子,只是房子里的东西摆设跟我原来的房子是一模一样的,唯独不一样的就是,我原来家的钥匙只能开原来家的门,新家的钥匙只能开新家的门,虽然两个房子里的东西是一模一样的,但是都是没有实际的关联关系。那么这样我门需要怎么做呢。

 我们可以先看看下面的这个方法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

// 使用 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()这个方法不是深层的复制对象,只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。那么我们其实可以想象,怎么才能让他们完全没有关联性没呢。

  字符串类型 和 对象类型 肯定是没有关联性的 ,因为它们的类型都不一样,肯定是没有可比性和关联性的。 有了这样的想法我觉得我们就有办法决绝这个问题了;

  


1

2

3

4

5

6

7

// 这个最简单暴力的处理 两个对象的关联性的问题

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

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


1

2

3

4

5

6

7

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/xieli26/p/10108921.html

时间: 2024-08-11 16:32:52

js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象的相关文章

JS基础:基于原型的对象系统

简介: 仅从设计模式的角度讲,如果我们想要创建一个对象,一种方法是先指定它的类型,然后通过这个类来创建对象,例如传统的面向对象编程语言 "C++"."Java" 等:另一种方式是,我们不需要关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象,就像所有吸血鬼故事必然有一个吸血鬼祖先一样,在 "Javascript" 世界中 "Object" 对象就是这个吸血鬼祖先,所有其他对象都是继承自 "Ob

JS核心系列:原型对象

在JS中,每当创建一个函数对象f1 时,该对象中都会内置一些属性,其中包括prototype和proto, prototype即原型对象. 每一个构造函数都有一个与之相关联的对象,该对象称之为原型对象.每个实例对象都能共享其原型对象上的属性和方法.原型对象的作用主要用来实现属性的继承,让实例对象能共享原型对象的属性,减少内存分配.所以,在上一节中,我们想在每个Person对象中共享同一个say方法,可以这样来实现.function Person(name, age) {this.name = n

前端学习(38)~js学习(十五):原型对象

原型对象 原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name); } } //创建一个Person的实例 var per = new Person("孙悟空", 18, "

js 中对象--对象结构(原型链基础解析)

对于本篇对于如何自定义对象.和对象相关的属性操作不了解的话,可以查我对这两篇博客.了解后可以更容易理解本篇文章 用构造函数创建了一个对象  obj对象的本身创建了两个属性  x=1   ,y=2      对象本的的两个属性都有属性特征  writable是否可写的,enumerable是否可枚举的 configurable是否可重置的,getter  ,setter  obj对象本身也有三大特性    proto 原型    class 类     extensible可拓展  foo.pro

JavaScript:对Object对象的一些常用操作总结

JavaScript对Object对象的一些常用操作总结. 一.Object.assign() 1.可以用作对象的复制 var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 } 2.可以用作对象的合并 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3)

JS对象中的原型

对象的原型:每个对象都连接一个原型对象,并且它可以从中继承属性.所有通过对象字面量创建的对象都连接到object.prototype.当你创建一个新对象时,你可以选择某个对象作为它的原型.原型连接在更新时不起作用.当我们对某个对象作出改变时,不会触及该对象的原型.原型连接只有在检索值的时候才被用到.如果我们尝试去获取对象的某个属性值,但该对象没有此属性名,那么JS会试着从原型对象中获取属性值,如果那个原型对象也没有该属性,那么再从它的原型中找,以此类推,直到该过程最后到达终点Object.pro

JS中类方法、对象方法、原型方法

1.对象方法:包括构造函数中的方法以及构造函数原型上面的方法:2.类方法:其实这里的类就是一个函数.在js中由于函数也是一个对象,所以可以为函数添加属性以及方法,这种方法在node中用的比较多:3.原型方法:一般用于对象实例共享,在原型上面添加该方法,就能实现共享.这样就不用每一次初始化一个实例的时候,为其分配相应的内存了.Javascript中的function作为构造函数时,就是一个类,搭配上new操作符,可以返回一个对象. function People(name){ this.name=

hiberante对象方式的投影操作与sql语句的投影方式(聚集函数的hibernate用法)

hiberante对象方式的投影操作与sql语句的投影方式(聚集函数的hibernate用法) 最近用到了hibernate的投影,写日记出来记录一下. (⊙o⊙)… 前提:搭配好hibernate环境了. myclass指的是已经映射好的实体类 如下3个函数是我写来测试投影的方法:   此三个方法我写在basedao中(基础dao类,做常用dao操作) 1 /** 2 * 斌临城下增加! 3 * <p/> 4 * ---(⊙o⊙)… 5 * <p/> 6 * * 7 */ 8 p

BOM对象,math对象document对象的属性和操作

Math对象 //该对象中的属性方法 和数学有关. abs(x) 返回数的绝对值. exp(x) 返回 e 的指数. floor(x) 对数进行下舍入. log(x) 返回数的自然对数(底为e). max(x,y) 返回 x 和 y 中的最高值. min(x,y) 返回 x 和 y 中的最低值. pow(x,y) 返回 x 的 y 次幂. random() 返回 0 ~ 1 之间的随机数. round(x) 把数四舍五入为最接近的整数. sin(x) 返回数的正弦. sqrt(x) 返回数的平方