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 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
js回调函数仿360开机
Dec 26 Javascript
vue-socket.io跨域问题有效解决方法
Feb 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
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
介绍一下linux的文件系统
2015/10/06 面试题
安全标语口号
2014/06/09 职场文书
公司租房协议书
2014/10/14 职场文书
八月一日观后感
2015/06/10 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
golang 实现时间戳和时间的转化
2021/05/07 Golang
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers