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 相关文章推荐
jquery live()调用不存在的解决方法
Feb 26 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
简述JS控制台的使用
Jul 15 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
Vue实现滑动拼图验证码功能
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中filter函数校验数据的方法详解
2015/07/31 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
使用js操作css实现js改变背景图片示例
2014/03/10 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
token 机制和实现方式
2020/12/15 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
Python 实现进度条的六种方式
2021/01/06 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
客户代表实习人员自我鉴定
2013/09/27 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
自主招生学校推荐信
2014/09/26 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
实习生个人总结范文
2015/02/28 职场文书
小王子读书笔记
2015/06/29 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers