javascript深拷贝(deepClone)详解


Posted in Javascript onAugust 24, 2016

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类型

javascript中有以下基本类型

类型 描述
undefined undefined类型只有一个值undefined,它是变量未被赋值时的值
null null类型也只有一个值null, 它是一个空的对象引用
Boolean Boolean有两种取值true和false
String 它表示文本信息
Number 它表示数字信息
Object 它是一系列属性的无序集合, 包括函数Function和数组Array
使用typeof是无法判断function和array的,这里使用Object.prototype.toString方法。
[默认情况下,每个对象都会从Object上继承到toString()方法,如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽),则调用该对象的toString()方法时会返回"[object type]",这里的字符串type表示了一个对象类型][1]

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)];
}

实现deepClone

对于非引用值类型的数值,直接赋值,而对于引用值类型(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类型,博主这里是直接赋值的,还是共享一个内存值。这是因为函数更多的是完成某些功能,有个输入值和返回值,而且对于上层业务而言更多的是完成业务功能,并不需要真正将函数深拷贝。

但是function类型要怎么拷贝呢?

其实博主只想到了用new来操作一下,但是function就会执行一遍,不敢想象会有什么执行结果哦!o(?□?)o!其它暂时还没有什么好的想法,欢迎大家指导哦!

到这里差不多也就实现完了深拷贝,又有人觉的怎么没有实现浅拷贝呢?

浅拷贝?

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

如果直接操作这个共享的数据,不做控制的话,会经常出现数据异常,被其它部分更改。所以应该不要直接操作数据源,给数据源封装一些方法,来对数据来进行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)];
}

其它方式?

jquery的实现

详见https://github.com/jquery/jqu...

underscore的实现

详见https://github.com/jashkenas/...

lodash的实现

详见https://github.com/lodash/lod...

JSON实现

先通过JSON.stringify一下,然后再JSON.parse一下,就能实现深拷贝。但是数据类型只支持基本数值类型。

var obj = {
  a: 'a',  
  b: function(){console.log('b')}
}

//在JSON.stringify的时候就会把function给过滤了。

JSON.stringify(obj)// "{"a":"a"}"

小结

这里大概总结了一下深拷贝,以及怎么实现一个深拷贝。在不同的场景下,要根据业务场景,判断是否需要使用深拷贝。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
js实现无缝循环滚动
Jun 23 #Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
You might like
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
PHP中,文件上传
2006/12/06 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP中串行化用法示例
2016/11/16 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
浅析使用Python操作文件
2017/07/31 Python
详解Python发送email的三种方式
2018/10/18 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
家长会学生家长演讲稿
2013/12/29 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
新闻报道策划方案
2014/06/11 职场文书
司法助理专业自荐书
2014/06/13 职场文书
岳庙导游词
2015/02/04 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
离婚被告代理词
2015/05/23 职场文书
高中家长意见怎么写
2015/06/03 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技