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 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
Javascript中的变量使用说明
May 18 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
详解Node.js串行化流程控制
May 04 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS定义函数的几种常用方法小结
May 23 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
oracle资料库函式库
2006/10/09 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP 创建标签云函数代码
2010/05/26 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
简单实现PHP留言板功能
2016/12/21 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
浅谈vue.watch的触发条件是什么
2020/11/07 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python使用pil生成图片验证码的方法
2015/05/08 Python
Python实现配置文件备份的方法
2015/07/30 Python
利用python发送和接收邮件
2016/09/27 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python实发邮件实例详解
2019/11/11 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
flask实现验证码并验证功能
2019/12/05 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
社会治安综合治理责任书
2015/01/29 职场文书
签约仪式致辞
2015/07/30 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python