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 相关文章推荐
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
斜45度寻路实现函数
Aug 20 Javascript
jquery tab标签页的制作
May 10 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
javascript数据类型示例分享
Jan 19 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 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
基于mysql的bbs设计(二)
2006/10/09 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php框架知识点的整理和补充
2021/03/01 PHP
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
python基础知识小结之集合
2015/11/25 Python
python开发之list操作实例分析
2016/02/22 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python通过字典映射函数实现switch
2020/11/06 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
2014年教师培训的自我评价
2014/01/03 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
商务邀请函
2015/01/30 职场文书
西安导游词
2015/02/12 职场文书
个人工作年终总结
2015/03/09 职场文书
合作合同协议书
2016/03/21 职场文书