1. 首页
  2. 前端基础

理清JS中的深拷贝与浅拷贝

浅拷贝

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

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

深拷贝

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

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

Look See See 例子

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

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

考虑下面的代码:


var employeeDetailsOriginal = { name: '前端小智', age: 18, Profession: '前端开发' };

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

我会这样做:


var employeeDetailsDuplicate = employeeDetailsOriginal; // 浅拷贝

如果咱们改变一个值:


employeeDetailsDuplicate.name = "JS中文网";

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

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


var employeeDetailsDuplicate = { name: employeeDetailsOriginal.name, age: employeeDetailsOriginal.age, Profession: employeeDetailsOriginal.Profession }; // 深拷贝

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

码农进阶题库,每天一道面试题 or Js小知识

谈谈 Object.assign()

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


var employeeDetailsOriginal = { name: '前端小智', family: { name: '前端大家庭' } }; var employeeDetailsDuplicate = Object.assign({}, employeeDetailsOriginal ); employeeDetailsDuplicate.name = "JS中文网" employeeDetailsDuplicate.family.name = '后端大家庭' console.log(employeeDetailsOriginal ); // { name: "JS中文网 www.javascriptc.com", family: {name: "后端大家庭"} } console.log(employeeDetailsDuplicate); // { name: "王大冶智", family: {name: "后端大家庭"} }

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

如何实现深拷贝

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


对于简单的JSON对象,最简单的方法是 var objectIsNew = JSON.parse(JSON.stringify(objectIsOld)); //如果使用jQuery,可以使用: // 浅拷贝 var objectIsNew = jQuery.extend({}, objectIsOld); // 深拷贝 var objectIsNew = jQuery.extend(true, {}, objectIsOld);

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


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);

总结

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

*

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

作者:Manjula Dube
链接:https://we-are.bookmyshow.com/understanding-deep-and-shallow-copy-in-javascript-13438bad941c

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:理清JS中的深拷贝与浅拷贝

链接:https://www.javascriptc.com/3463.html

« 函数式组件 && React Hook
React-Hook 基础使用»
Flutter 中文教程资源

相关推荐

QR code