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 全选效果实现代码
Mar 23 Javascript
Javascript的闭包
Dec 31 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
ajax与302响应代码测试
Oct 23 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
JS常用知识点整理
Jan 21 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
小程序实现左滑删除效果
Jul 25 Javascript
基于vue写一个全局Message组件的实现
Aug 15 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建立Ftp连接的方法
2015/03/07 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Python计算IV值的示例讲解
2020/02/28 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
中国最大的团购网站:聚划算
2016/09/21 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
大四自我鉴定范文
2013/10/06 职场文书
企业给企业的表扬信
2014/01/13 职场文书
教学大赛获奖感言
2014/01/15 职场文书
小学生安全保证书
2014/02/01 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
团结主题班会
2015/08/13 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python