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编写技巧整理
Aug 23 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
vue的状态管理模式vuex
Nov 30 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
JavaScript实现复选框全选功能
Apr 11 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
B2K与车机的中波PK
2021/03/02 无线电
PHP中的类-什么叫类
2006/11/20 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
JS求平均值的小例子
2013/11/29 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
js实现缓动动画
2020/11/25 Javascript
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
Java如何格式化日期
2012/08/07 面试题
STP的判定过程
2012/10/01 面试题
车间主管岗位职责
2013/11/14 职场文书
仓库组长岗位职责
2014/01/29 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2016年元旦主持词
2015/07/06 职场文书
学习雷锋主题班会
2015/08/14 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript