详解JavaScript对象的深浅复制


Posted in Javascript onMarch 30, 2017

前言

从层次上来看,对象的复制可以简单地分为浅复制和深复制,顾名思义,浅复制是指只复制一层对象的属性,不会复制对象中的对象的属性,对象的深复制会复制对象中层层嵌套的对象的属性。

在复制对象时,除了要复制对象的属性外,还要兼顾到是否保留了对象的constructor属性,是否对每一种数据类型(JavaScript常见的数据类型有String,Number,Boolean,Data,RegExp,Array,Funtion,Object)都实现正确的复制。项目中,我们可以根据实际情况,决定需要实现什么样程度的复制。

本文是我在复制对象方面的一些心得总结,由浅复制到深复制,由只复制简单属性到复制Function,RegExp等复杂属性,层层递进。如有陈述不当之处,烦请指出,不胜感激。

正文

浅复制

浅复制只会依次复制对象的每一个属性,不会对这些属性进行递归复制。下面是一个简单的浅复制实现。

//对象浅复制        
function shadowCopy(obj){
 if(typeof obj !== 'object') return obj;
 for(var prop in obj){
  if(obj.hasOwnProperty(prop)){
  newObj[prop] = obj[prop];
  }
 }
 return newObj;
 }

仔细观察,不难发现上述方法的缺陷:

1.不能正确实现数组的浅复制

2.复制操作丢失了对象的constructor属性

好,我们现在已经发现了问题所在,只需针对性地解决,一个还算完美的浅复制对象的方法就诞生了!

//对象浅复制
 function shadowCopy(obj){
  if(typeof obj !== 'object') return ;
  var newObj;
  //保留对象的constructor属性
  if(obj.constructor === Array){
  newObj = [];
  } else {
  newObj = {};
  newObj.constructor = obj.constructor;
  }
  for(var prop in obj){
  if(obj.hasOwnProperty(prop)){
   newObj[prop] = obj[prop];
  }
  }
  return newObj;
 }

浏览器中测试一下:

var arr1 = [0,1,2];
 console.log(arr1);
 console.log(shadowCopy(arr1));
 var arr2 = [0,1,2,[3,4,5]],
 arr2Copy = shadowCopy(arr2);
 console.log(arr2);
 console.log(arr2Copy);
 arr2Copy[3][0] = 6;
 console.log(arr2[3][0]); //6

详解JavaScript对象的深浅复制

Good! 可以正确实现数组复制和并且保留constructor了,但细心的你一定发现了,浅复制后的对象的 arr2Copy[3] 和 arr2[3] 指向的是一个对象,改变其中一个,同时也会改变另一个。我们想要实现的是 复制,但这并不是复制呀!
这是浅复制的一个弊端所在,接下让我们看看深复制是怎样解决这个问题的。

深复制

深复制需要层层递归,复制对象的所有属性,包括对象属性的属性的属性....(晕~)
如果只是需要简单地复制对象的属性,而不用考虑它的constructor,也不用考虑函数,正则,Data等特殊数据类型,那这里有一个深复制的小trick,两行代码即可:

function deepCopy(obj){
 if(typeof obj !== "object"){ return ;}
 var str = JSON.stringify(obj);
 return JSON.parse(str);
}

大多数情况下,上面的就可以满足要求了,但一些时候,我们需要把函数,正则等特殊数据类型也考虑在内,或者当前环境不支持JSON时,上面的方法也就不适用了。这时,我们可以通过递归来实现对象的深层复制,如下:

function deepCopy(obj){
 if(typeof obj !== "object"){ return ;}
 var newObj;
 //保留对象的constructor属性
 if(obj.constructor === Array){
 newObj = [];
 } else {
 newObj = {};
 newObj.constructor = obj.constructor;
 }
 for(var prop in obj){
 if(typeof obj[prop] === 'object'){
  if(obj[prop].constructor === RegExp ||obj[prop].constructor === Date){
  newObj[prop] = obj[prop];
  } else {
  //递归
  newObj[prop] = deepCopy(obj[prop]);
  }
 } else {
  newObj[prop] = obj[prop];
 }
 }
 return newObj;
}

先用上面的例子测试:

详解JavaScript对象的深浅复制

棒!可以正确实现多维数组的复制,再看是否能实现函数和正则的复制:

function Person(name){
 this.name = name;
 this.age = age;
 this.search = new RegExp(name);
 this.say = function(){
 console.log(this.name + "今年" + this.age + "岁了");
 }
}
var p1 = new Person("Claiyre",20),
 p2 = deepCopy(p1);
console.log(p1);
console.log(p2);
p2.age = 22;
p1.say();
p2.say();

详解JavaScript对象的深浅复制

圆满完成!!

稍加整理,我们就可以得到一个较为通用的js对象复制函数:

function deepCopy(obj){
 var newObj = obj.constructor === Array ? []:{};
 newObj.constructor = obj.constructor;
 if(typeof obj !== "object"){ 
 return ;
 } else if(window.JSON){
 //若需要考虑特殊的数据类型,如正则,函数等,需把这个else if去掉即可
 newObj = JSON.parse(JSON.stringify(obj));
 } else {
 for(var prop in obj){
  if(obj[prop].constructor === RegExp ||obj[prop].constructor === Date){
  newObj[prop] = obj[prop];
  } else if(typeof obj[prop] === 'object'){
  //递归
  newObj[prop] = deepCopy(obj[prop]);
  } else {
  newObj[prop] = obj[prop];
  }
 }
 } 
 return newObj;
}

结语

面向对象的编程语言,其核心是对象,因此深入了解对象的相关操作,纵向比较异同,对学习过程是极有好处的。

以上所述是小编给大家介绍的JavaScript对象的深浅复制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
js实现不提示直接关闭网页窗口
Mar 30 #Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 #jQuery
JavaScript实现弹出广告功能
Mar 30 #Javascript
JavaScript如何一次性展示几万条数据
Mar 30 #Javascript
ECMAScript6--解构
Mar 30 #Javascript
js图片放大镜效果实现方法详解
Oct 28 #Javascript
js a标签点击事件
Mar 30 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
smarty内置函数foreach用法实例
2015/01/22 PHP
实例讲解PHP表单处理
2019/02/15 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Jquery 动态添加按钮实现代码
2010/05/06 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python能在浏览器能运行吗
2020/06/17 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
Android面试题及答案
2015/09/04 面试题
如何清空Session
2015/02/23 面试题
金融专业个人求职信范文
2013/11/28 职场文书
女大学生自我鉴定
2013/12/09 职场文书
应届生求职信
2014/05/31 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
企业员工集体活动方案
2014/08/17 职场文书
大学生英文求职信范文
2015/03/19 职场文书
大学生团日活动总结
2015/05/06 职场文书
2015年高中班级工作总结
2015/07/21 职场文书