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 document.images实例
May 27 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
详解jquery和vue对比
Apr 16 jQuery
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 Ajax实现页面无刷新发表评论
2007/01/02 PHP
php中设置多级目录session的问题
2011/08/08 PHP
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python日志模块logbook使用方法
2019/09/19 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
销售代表求职自荐信
2013/10/01 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
环境卫生倡议书
2014/08/29 职场文书
邓小平理论心得体会
2014/09/09 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
国庆节标语大全
2014/10/08 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
小学英语听课心得体会
2016/01/14 职场文书
公司会议开幕词
2016/03/03 职场文书
利用Python实现模拟登录知乎
2022/05/25 Python