一起了解JS中的深拷贝与浅拷贝


本文摘自PHP中文网,作者青灯夜游,侵删。

浅拷贝

浅拷贝是对象的逐位复制。创建一个新对象,该对象具有原始对象中值的精确副本。如果对象的任何字段是对其他对象的引用,则只复制引用地址,即,复制内存地址。

大白话讲就是,浅拷贝是对对象地址的复制,并没有开辟新的栈,也就是复制的结果是两个对象指向同一个地址,修改其中一个对象的属性,则另一个对象的属性也会改变。

深拷贝

深拷贝复制所有字段,并复制字段所指向的动态分配内存。深拷贝发生在对象及其引用的对象被复制时。

大白话讲就是,深拷贝则是开辟新的栈,两个对象对应两个不同的地址,修改一个对象的属性,不会改变另一个对象的属性。

Look See See 例子

浅拷贝:它将X的引用复制到Y中。因此,XY的地址是相同的,也就是说它们指向相同的内存位置。

深拷贝:复制X的所有成员,为Y分配不同的内存位置,然后将复制的成员分配给Y,实现深拷贝。这样,如果X消失了,Y在内存中仍然有效。

考虑下面的代码:

1

2

3

4

5

var employeeDetailsOriginal = { 

  name: '前端小智',

  age: 18,

  Profession: '前端开发'

};

假设你想创建一个这个对象的副本,这样即使原始值被改变了,仍然可以通过副本得到原始对象的值。

我会这样做:

1

var employeeDetailsDuplicate = employeeDetailsOriginal; // 浅拷贝

如果咱们改变一个值:

1

employeeDetailsDuplicate.name = '王大治';

这样操作,咱们的原始对象 employeeDetailsOriginal 的属性 name 也会跟着改变,因为这里是一个浅拷贝。这样咱们就获取不到原始对象的值了。所以这种拷贝做法是不对的。

但是,通过使用原始employeeDetailsOriginal变量的属性创建一个全新的变量,就可以创建一个深拷贝副本。

1

2

3

4

5

var employeeDetailsDuplicate = {

  name: employeeDetailsOriginal.name,

  age: employeeDetailsOriginal.age,

  Profession: employeeDetailsOriginal.Profession

}; // 深拷贝

现在,如果更改employeeDetailsDuplicate.name,它只会影响employeeDetailsDuplicate,而不会影响employeeDetailsOriginal

1.png

谈谈 Object.assign()

Object.assign()是咱们经常用到的方法,其实这个方法就是浅拷贝。但是它又有一点特殊的地方,就是可以处理第一层的深拷贝。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

var employeeDetailsOriginal = { 

  name: '前端小智',

  family: {

    name: '前端大家庭'

  }

};

 

var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal );

 

employeeDetailsDuplicate.name = '王大治'

employeeDetailsDuplicate.family.name = '后端大家庭'

 

console.log(employeeDetailsOriginal );

// { name: "前端小智", family: {name: "后端大家庭"} }

console.log(employeeDetailsDuplicate);

// { name: "王大冶智", family: {name: "后端大家庭"} }

看上面的例子,属性name的值并没有跟着变,但是属性中familyname的值跟着变了。

如何实现深拷贝

唯一的作法就是克隆这个对象。

1

2

3

4

5

6

7

8

9

10

11

对于简单的JSON对象,最简单的方法是

 

var objectIsNew  = JSON.parse(JSON.stringify(objectIsOld));

 

//如果使用jQuery,可以使用:

 

// 浅拷贝

var objectIsNew = jQuery.extend({}, objectIsOld);

 

// 深拷贝

var objectIsNew = jQuery.extend(true, {}, objectIsOld);

纯JS方法来深拷贝对象(并非最佳方法)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

function keepCloning(objectpassed) {

  if (objectpassed=== null || typeof objectpassed!== 'object') {

    return objectpassed;

  }

   

  // 临时存储原始的obj的构造

  var temporary_storage = objectpassed.constructor();

  for (var key in objectpassed) {

    temporary_storage[key] = keepCloning(objectpassed[key]);

  }

   return temporary_storage;

}

 

var employeeDetailsOriginal = { 

  name: '前端小智',

  age: 18,

  Profession: '前端开发'

};

 

var employeeDetailsDuplicate = (keepCloning(employeeDetailsOriginal));

 

employeeDetailsOriginal.name = "前端大治";

 

console.log(employeeDetailsOriginal);

console.log(employeeDetailsDuplicate);

总结

了解深拷贝也不仅仅是为了应付面试题,在实际开发中也是非常有用的。例如后台返回了一堆数据,你需要对这堆数据做操作,但多人开发情况下,你是没办法明确这堆数据是否有其它功能也需要使用,直接修改可能会造成隐性问题,深拷贝能帮你更安全安心的去操作数据,根据实际情况来使用深拷贝,大概就是这个意思。

本文转载自:https://segmentfault.com/a/1190000020438346

相关教程推荐:JavaScript视频教程

以上就是一起了解JS中的深拷贝与浅拷贝的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

js的表单传值与url编码转换详解

javascript和typescript的区别是什么

图片懒加载是什么意思?图片懒加载的实现方法

javascript中字母如何转为数字

es6是什么前端技术?

javascript有几种方式为元素添加事件

javascript中如何将url转换成汉字

javascript怎么改变css

js同源策略是什么

javascript可以获取input的值吗

更多相关阅读请进入《javascript》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...