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 相关文章推荐
javascript之对系统的toFixed()方法的修正
May 08 Javascript
js word表格动态添加代码
Jun 07 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
清除js缓存的多种方法总结
Dec 09 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
原生js实现瀑布流效果
Mar 09 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文件大小格式化函数合集
2014/03/10 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vscode vue 文件模板的配置方法
2019/07/23 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
简单实现python收发邮件功能
2018/01/05 Python
python实现两个文件合并功能
2018/04/01 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
交通安全演讲稿
2014/01/07 职场文书
房地产融资计划书
2014/01/10 职场文书
学生生病请假条范文
2014/02/16 职场文书
空乘英文求职信
2014/04/13 职场文书
市场营销工作计划书
2014/09/15 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
创先争优活动个人总结
2015/03/04 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
家长会开场白和结束语
2015/05/29 职场文书
单位同意报考证明
2015/06/17 职场文书