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模块化是什么及其优缺点介绍
Sep 02 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
jquery 手势密码插件
Mar 17 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python 通过 socket 发送文件的实例代码
2018/08/14 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
保安自我鉴定范文
2013/12/08 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL