深拷贝和浅拷贝的理解与应用
发布日期:2021-10-16 12:04:55 浏览次数:29 分类:技术文章

本文共 1830 字,大约阅读时间需要 6 分钟。

场景:很多情况,我们需要给变量赋值,给内存地址赋值;但是在给引用类型赋值,不会改变内存地址的值

对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的,主要是为了在新的上下文环境中复用对象的部分或全部 数据。JavaScript中有两种类型的对象拷贝:浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。

深拷贝与浅拷贝的区别

深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。

浅复制 —只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做“(浅复制)浅拷贝”,换句话说,浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变。

深复制 —在计算机中开辟了一块新的内存地址用于存放复制的对象。

浅拷贝实例

//此递归方法不包含数组对象var obj = { a:1, arr: [2,3] };var shallowObj = shallowCopy(obj);function shallowCopy(src) {  var newobj = {};  for (var prop in src) {    if (src.hasOwnProperty(prop)) {      newobj[prop] = src[prop];    }  }  return newobj;}

因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址

导致的结果就是:

shallowObj.arr[1] = 5;console.log(obj.arr[1]);   //  5

深拷贝实例

而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = {     a:1,     arr: [1,2],    nation : '中国',    birthplaces:['北京','上海','广州']};var obj2 = {name:'杨'};obj2 = deepCopy(obj,obj2);console.log(obj2);//深复制,要想达到深复制就需要用递归function deepCopy(o,c){   var c = c || {};   for(var i in o){   if(typeof o[i] === 'object'){          //要考虑深复制问题了          if(o[i].constructor === Array){            //这是数组            c[i] =[];          }else{            //这是对象            c[i] = {};          }          deepCopy(o[i],c[i]);        }else{          c[i] = o[i];        }     }     return c }

这样obj和obj2分别拥有不同的内存地址,两边值的改变互不影响。

深浅拷贝也可以使用JQuery的extend方法,注意使用合并返回值

let newObj = $.extend(true,{},partcontent);

深拷贝 也可以通过序列化实现

1、序列化与反序列化
把对象写到流里的过程是序列化(Serialization)过程,而把对象从流中读出来的过程则叫做反序列化(Deserialization)过程。应当指出的是,写在流里的是对象的一个拷贝,而原对象仍然存在于JVM中。常常可以先使对象实现Serializable接口,然后把对象(实际上只是对象的一个拷贝)写到一个流里,再从流里读出来,便可以重建对象;

let obj = {name: '哈哈',age: 16};let obj2 = JSON.parse(JSON.stringify(obj));

转载地址:https://blog.csdn.net/snow51/article/details/80743826 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:javascript 知识点小结
下一篇:js 判断数据类型

发表评论

最新留言

很好
[***.229.124.182]2024年04月23日 17时59分37秒