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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
理解JavaScript中的对象
Aug 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
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP在线书签系统分享
2016/01/04 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JavaScript使用atan2来绘制箭头和曲线的实例
2017/09/14 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
python遍历类中所有成员的方法
2015/03/18 Python
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python编程线性回归代码示例
2017/12/07 Python
python实现画圆功能
2018/01/25 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
Python有参函数使用代码实例
2020/01/06 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
出国导师推荐信
2014/01/16 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
应届毕业生自荐书
2014/06/18 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
导游词创作书写原则以及开场白技巧怎么学?
2019/09/25 职场文书