javascript中的深复制详解及实例分析


Posted in Javascript onDecember 29, 2016

 javascript中的深复制

JavaScript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,并不能很好的理解javascript的深拷贝。

       深拷贝(deepClone)是神马,与深拷贝相对应的就是浅拷贝,刚开始我也没弄懂。

       在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一直性。

看一个具体的例子

// 给test赋值了一个对象
var test = {
  a: 'a',
  b: 'b'
};

// 将test赋值给test2
// 此时test和test2是共享了同一块内存对象,这也就是浅拷贝
var test2 = test;

test2.a = 'a2';

test.a === 'a2'// 为true

如下图:

javascript中的深复制详解及实例分析

这下就很好理解为什么引用值类型数据相互影响问题。

       实现一个深拷贝函数,就不得不说javascript的数值类型。下面我们先来看一个js有哪几种数据类型:

类型 描述
undefined undefined类型只有一个值undefined,它是变量未被赋值时的值
null null类型也只有一个值,它是一个空对象的引用
Boolean Boolean有两种值true和false
String 字符串类型
Number 数字类型,包括整数和浮点数
Object 它是一系列属性的无序集合,包括函数Function和数组Array

       使用typeof是无法判断function和array的,使用instanceof在多个iframe里也会出错,我们可以使用Object.prototype.toString方法,它可判断出各种类型。

       默认情况下,每个对象都会从Object上继承到toString()方法,如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽),则调用该对象的toString()方法时会返回[object type],这里的字符串type表示了一个对象类型。

我们先写一个type函数,用于接下来的深复制时判断类型:

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  return map[toString.call(obj)];
}

       现在已经很清楚了,如何实现深复制呢,对于非引用类型的数值,直接赋值,而对于引用类型的值(object)需要多次遍历,递归复制。

function deepClone(data) {
  var t = type(data), o, i, ni;

  if(t === 'array') {
    o = [];
  }else if( t === 'object') {
    o = {};
  }else {
    return data;
  }

  if(t === 'array') {
    for (i = 0, ni = data.length; i < ni; i++) {
      o.push(deepClone(data[i]));
    }
    return o;
  }else if( t === 'object') {
    for( i in data) {
      o[i] = deepClone(data[i]);
    }
    return o;
  }
}

       这里有个点大家要注意下,对于function类型,这里是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝。

       浅拷贝,对于浅拷贝而言,可以理解为只操作一个共同的内存区域!这里会存在危险!

       如果直接操作这个共享的数据,不做控制的话,会经常出现数据异常,被其它部分更改。所以应该不要直接操作数据源,给数据源封装一些方法,来对数据来进行CURD操作。

       到这里估计就差不多了,但是作为一个前端,不仅仅考虑javascript本身,还得考虑到dom、浏览器等。

       Element类型,来看下面代码,结果会返回啥呢?

Object.prototype.toString.call(document.getElementsByTagName('div')[0])

经过测试,返回的是:[object HTMLDivElement]

       有时候保存了dom元素, 一不小心进行深拷贝,上面的深拷贝函数就缺少了对Element元素的判断。而判断Element元素要使用instanceof来判断。因为对于不同的标签,toString会返回对应不同的标签的构造函数。

function type(obj) {
  var toString = Object.prototype.toString;
  var map = {
    '[object Boolean]' : 'boolean', 
    '[object Number]'  : 'number', 
    '[object String]'  : 'string', 
    '[object Function]' : 'function', 
    '[object Array]'  : 'array', 
    '[object Date]'   : 'date', 
    '[object RegExp]'  : 'regExp', 
    '[object Undefined]': 'undefined',
    '[object Null]'   : 'null', 
    '[object Object]'  : 'object'
  };
  if(obj instanceof Element) {
    return 'element';
  }
  return map[toString.call(obj)];
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS 强制设为首页的代码
Jan 31 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
Jquery Ajax请求代码(2)
Jan 07 Javascript
js call方法详细介绍(js 的继承)
Nov 18 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
详解Puppeteer 入门教程
May 09 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
canvas学习之API整理笔记(一)
Dec 29 #Javascript
Javascript Function.prototype.bind详细分析
Dec 29 #Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Django 再谈一谈json序列化
2020/03/16 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
免税水晶:Duty Free Crystal
2019/05/13 全球购物
岗位职责说明书
2014/05/07 职场文书
妇女工作先进事迹
2014/08/17 职场文书
2016年会开场白台词
2015/06/01 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
如何在Python项目中引入日志
2021/05/31 Python