JS对象的深度克隆方法示例


Posted in Javascript onMarch 16, 2017

本文实例讲述了JS对象的深度克隆方法。分享给大家供大家参考,具体如下:

js中创建的对象指向内存,所以在开发过程中,往往修改了一个对象的属性,会影响另外一个对象。

尤其是在angular框架中,dom是由数据驱动的,在增删改查对象的操作中,对象属性的继承关系是很让人头痛的!

我之前遇到的问题就是,在编辑页面,操作了对象数据,影响到了展示数据的展现!

我整理了两种深度克隆对象的方法,供大家参考!

首先var 一个假数据

var schedule = {"status":21,"msg":"ok","data":[{"name":"lemon","age":21,"contactList":{"phone":[152,153,154],"email":5295}},{"name":"lara","age":22,"contact":{"phone":152,"email":5295}}]}

方法1:

遍历自身,判断当前对象是obj还是list,克隆出新对象

function deepClone(obj)
{
  var o,i,j,k;
  if(typeof(obj)!="object" || obj===null)return obj;
  if(obj instanceof(Array))
  {
    o=[];
    i=0;j=obj.length;
    for(;i<j;i++)
    {
      if(typeof(obj[i])=="object" && obj[i]!=null)
      {
        o[i]=arguments.callee(obj[i]);
      }
      else
      {
        o[i]=obj[i];
      }
    }
  }
  else
  {
    o={};
    for(i in obj)
    {
      if(typeof(obj[i])=="object" && obj[i]!=null)
      {
        o[i]=arguments.callee(obj[i]);
      }
      else
      {
        o[i]=obj[i];
      }
    }
  }
  return o;
}
var scheduleClone = deepClone(schedule)
scheduleClone.data[0].contactList.phone[0] = 99999999999
console.log('方法1 深度克隆')
console.log(scheduleClone)
console.log(JSON.stringify(schedule))
console.log(JSON.stringify(scheduleClone))

方法2:

用js原生的json序列化的方式,简单粗暴!

var scheduleClone2 = JSON.parse(JSON.stringify(schedule));
console.log('方法2 深度克隆')
console.log(scheduleClone2)
scheduleClone2.data[0].contactList.phone[0] = 8888888
console.log(JSON.stringify(schedule))
console.log(JSON.stringify(scheduleClone2))

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
Apr 22 Javascript
JS对象深度克隆实例分析
Mar 16 #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
You might like
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
javascript window对象属性整理
2009/10/24 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
js date 格式化
2017/02/15 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
python备份文件的脚本
2008/08/11 Python
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python运行DLL文件的方法
2020/01/17 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
党校培训思想汇报
2014/01/03 职场文书
房地产开盘策划方案
2014/02/10 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
MySQL七种JOIN类型小结
2021/10/24 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis
Python函数对象与闭包函数
2022/04/13 Python
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers