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 相关文章推荐
js调用后台servlet方法实例
Jun 09 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
jQuery treeview树形结构应用
Mar 24 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
Phpbean路由转发的php代码
2008/01/10 PHP
一个PHP分页类的代码
2011/05/18 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
vue-router单页面路由
2017/06/17 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
如何实现一个webpack模块解析器
2018/10/24 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python iter()函数用法实例分析
2018/03/17 Python
python可视化text()函数使用详解
2020/02/11 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
PyQt QMainWindow的使用示例
2021/03/24 Python
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android