JS对象深度克隆实例分析


Posted in Javascript onMarch 16, 2017

本文实例讲述了JS对象深度克隆。分享给大家供大家参考,具体如下:

首先看一个例子:

var student = {
  name:"yxz",
  age:25
}
var newStudent = student;
newStudent.sex = "male";
console.log(student); //{name:"yxz",age:25,sex:"male"}

由此可见,将一个对象通过简单的传递赋值传递给一个新的变量时,仅仅是给该对象增添了一个别名。所以,对该别名的操作也会作用到原对象上去,所以通过newStudent.sex给对象student添加属性可以实现。然而,更多的时候我们希望newStudent和student对象是独立的,那么就需要生成一个原对象的副本,请看下面的例子:

var cloneObj = function(obj){
  var str, newobj = obj.constructor === Array ? [] : {};
  if(typeof obj !== 'object'){
    return;
  } else if(window.JSON){
    str = JSON.stringify(obj), //序列化对象
    newobj = JSON.parse(str); //还原
  } else {
    for(var i in obj){
      newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; 
    }
  }
  return newobj;
};
//测试
var student = {
  name:"yxz",
  age:25,
  sex:"male"
};
//执行深度克隆
var newStudent = cloneObj(student);
delete newStudent.sex;
console.log(newStudent); //{name:"yxz",age:25}
console.log(student); //{name:"yxz",age:25,sex:"male"}

通过执行结果可以看出newStudent已经成为了一个克隆出来的副本,对newStudent的任何操作将不再影响student对象。

备注:JSON.stringify和parse分别为JSON对象的序列化和反序列化函数,即分别负责将对象序列化成字符串和将json字符串反序列化成对象,因为这个是属于ECMAScript5规范,所以上面程序标注部分做了一个兼容处理。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
koa-router路由参数和前端路由的结合详解
May 19 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
JS异步加载的三种实现方式
Mar 16 #Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 #Javascript
基于JavaScript实现滑动门效果
Mar 16 #Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
You might like
php使用qr生成二维码的示例分享
2014/01/20 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
php时间计算相关问题小结
2016/05/09 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
2020/04/27 Javascript
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python3.5绘制随机漫步图
2018/08/27 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
《孔子拜师》教学反思
2014/02/24 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
房屋买卖协议样本
2014/11/16 职场文书
台风停课通知
2015/04/24 职场文书
会议室管理制度范本
2015/08/06 职场文书
教师旷工检讨书
2015/08/15 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
python pyhs2 的安装操作
2021/04/07 Python
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android