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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
Bootstrap精简教程
Nov 27 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
解决node修改后需频繁手动重启的问题
May 13 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
iView框架问题整理小结
Oct 16 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
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
答题辅助python代码实现
2018/01/16 Python
python模拟事件触发机制详解
2018/01/19 Python
基于python实现简单日历
2018/07/28 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
如何用Python徒手写线性回归
2021/01/25 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
教学实习自我评价
2014/01/28 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
小学见习报告
2014/10/31 职场文书
2014年营业员工作总结
2014/11/18 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书