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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 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实现查看邮件是否已被阅读的方法
2013/12/03 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
详解js闭包
2014/09/02 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python根据文件大小打log日志
2014/10/09 Python
python简单商城购物车实例代码
2018/03/15 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
Pycharm安装python库的方法
2020/11/24 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
阿里云:Aliyun.com
2017/02/15 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
求职信结尾怎么写
2014/05/26 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技