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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Vue内容分发slot(全面解析)
Aug 19 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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中常用字符串处理代码片段整理
2011/11/07 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP编程函数安全篇
2013/01/08 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
详解vue v-model
2020/08/31 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python中提高pip install速度
2020/02/14 Python
Django websocket原理及功能实现代码
2020/11/14 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
JSF界面控制层技术
2013/06/17 面试题
心得体会开头
2014/01/01 职场文书
中学生运动会入场词
2014/02/12 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
行政撤诉申请书
2015/05/18 职场文书
运动会通讯稿200字
2015/07/20 职场文书
吧主申请感言怎么写
2015/08/03 职场文书