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 mapreduce工作原理简析
Nov 25 Javascript
jquery ajax,ashx,json的用法总结
Feb 12 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
JS随机数产生代码分享
Feb 24 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
详解JSON.stringify()的5个秘密特性
May 26 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将数据导入到Foxmail
2006/10/09 PHP
PHP4之COOKIE支持详解
2006/10/09 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php把session写入数据库示例
2014/02/26 PHP
Linux下创建nginx脚本-start、stop、reload…
2014/08/03 PHP
FireFox JavaScript全局Event对象
2009/06/14 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
python实现图片素描效果
2020/09/26 Python
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
给校长的建议书100字
2014/05/16 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
新郎新娘致辞
2015/07/31 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL