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脚本的性能的几个注意事项
Dec 22 Javascript
新手入门常用代码集锦
Jan 11 Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
php获取远程文件大小
2015/10/20 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
mailto的使用技巧分享
2012/12/21 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
Django的models中on_delete参数详解
2019/07/16 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
实习鉴定范文
2013/12/19 职场文书
安全生产专项整治方案
2014/05/06 职场文书
公司承诺书格式
2014/05/21 职场文书
公司应聘求职信
2014/06/21 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
社保转移委托书范本
2014/10/08 职场文书
向女朋友道歉的话
2015/01/20 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
python操作xlsx格式文件并读取
2021/06/02 Python
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript