Javascript深拷贝

Javascript深拷贝

大家好,又见面了,我是全栈君。

Javascript深拷贝

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

深拷贝(deepClone)?

与深拷贝相对的就是浅拷贝,很多初学者在接触这个感念的时候,是很懵逼的。

Javascript深拷贝

为啥要用深拷贝?

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

看一个具体的例子


  1. // 给test赋值了一个对象 
  2.  
  3. var test = { 
  4.  
  5. a: ‘a’
  6.  
  7. b: ‘b’ 
  8.  
  9. }; 
  10.  
  11.   
  12.  
  13. // 将test赋值给test2 
  14.  
  15. // 此时test和test2是共享了同一块内存对象,这也就是浅拷贝 
  16.  
  17. var test2 = test; 
  18.  
  19.   
  20.  
  21. test2.a = ‘a2’
  22.  
  23.   
  24.  
  25. test.a === ‘a2’// 为true  

图解:

Javascript深拷贝

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

实现

实现一个深拷贝函数,就不得不说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) { 
  2.  
  3. var toString = Object.prototype.toString; 
  4.  
  5. var map = { 
  6.  
  7.     ‘[object Boolean]’  : ‘boolean’
  8.  
  9.     ‘[object Number]’   : ‘number’
  10.  
  11.     ‘[object String]’   : ‘string’
  12.  
  13.     ‘[object Function]’ : ‘function’
  14.  
  15.     ‘[object Array]’    : ‘array’
  16.  
  17.     ‘[object Date]’     : ‘date’
  18.  
  19.     ‘[object RegExp]’   : ‘regExp’
  20.  
  21.     ‘[object Undefined]’‘undefined’
  22.  
  23.     ‘[object Null]’     : ‘null’
  24.  
  25.     ‘[object Object]’   : ‘object’ 
  26.  
  27. }; 
  28.  
  29. return map[toString.call(obj)]; 
  30.  
  31. }  

实现deepClone

对于非引用值类型的数值,直接赋值,而对于引用值类型(object)还需要再次遍历,递归赋值。


  1. function deepClone(data) { 
  2.  
  3. var t = type(data), o, i, ni; 
  4.  
  5. if(t === ‘array’) { 
  6.  
  7.     o = []; 
  8.  
  9. }else if( t === ‘object’) { 
  10.  
  11.     o = {}; 
  12.  
  13. }else { 
  14.  
  15.     return data; 
  16.  
  17.  
  18. if(t === ‘array’) { 
  19.  
  20.     for (i = 0, ni = data.length; i < ni; i++) { 
  21.  
  22.         o.push(deepClone(data[i])); 
  23.  
  24.     } 
  25.  
  26.     return o; 
  27.  
  28. }else if( t === ‘object’) { 
  29.  
  30.     for( i in data) { 
  31.  
  32.         o[i] = deepClone(data[i]); 
  33.  
  34.     } 
  35.  
  36.     return o; 
  37.  
  38.  
  39. }  

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

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

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

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

浅拷贝?

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

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

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

Element类型

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


  1. Object.prototype.toString.call(document.getElementsByTagName(‘div’)[0]) 

答案是[object HTMLDivElement]

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


  1. function type(obj) { 
  2.  
  3. var toString = Object.prototype.toString; 
  4.  
  5. var map = { 
  6.  
  7.     ‘[object Boolean]’  : ‘boolean’
  8.  
  9.     ‘[object Number]’   : ‘number’
  10.  
  11.     ‘[object String]’   : ‘string’
  12.  
  13.     ‘[object Function]’ : ‘function’
  14.  
  15.     ‘[object Array]’    : ‘array’
  16.  
  17.     ‘[object Date]’     : ‘date’
  18.  
  19.     ‘[object RegExp]’   : ‘regExp’
  20.  
  21.     ‘[object Undefined]’‘undefined’
  22.  
  23.     ‘[object Null]’     : ‘null’
  24.  
  25.     ‘[object Object]’   : ‘object’ 
  26.  
  27. }; 
  28.  
  29. if(obj instanceof Element) { 
  30.  
  31.         return ‘element’
  32.  
  33.  
  34. return map[toString.call(obj)]; 
  35.  
  36. }  

其它方式?

1. jquery的实现

详见https://github.com/jquery/jquery/blob/master/src/core.js

2. underscore的实现

详见https://github.com/jashkenas/underscore/blob/master/underscore.js

3. lodash的实现

详见https://github.com/lodash/lodash/blob/master/lodash.js

4. JSON实现

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


  1. var obj = { 
  2.  
  3.     a: ‘a’,     
  4.  
  5.     b: function(){console.log(‘b’)} 
  6.  
  7.  
  8.   
  9.  
  10. //在JSON.stringify的时候就会把function给过滤了。 
  11.  
  12.   
  13.  
  14. JSON.stringify(obj)// “{“a“:”a“}”  

小结

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

作者:佚名

来源:51CTO

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108288.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 记录Depix工具的使用

    记录Depix工具的使用这个月初有一个挺让人振奋的消息,说是出了一款开源去“马赛克“工具,三天就收获了3k+star,现在star数已经达到了13.7k了,项目地址:https://github.com/beurtschipper/Depix。我是没有这种世俗的欲望的,所以当时就没关注,直到昨天”纵横杯”网络安全竞赛Misc中专门出了一个马赛克的题,就给出了下面这张图片师傅们调侃说近视眼摘下眼镜离远一点就能看清楚了,我试了一下只能看出轮廓,但是还是看不清,这就需要用到Depix这个神奇的工具了。我这里是在windows系

  • java 二维数组排序

    java 二维数组排序①使用Comparator生成一个比较器对象初始化数组:int[][]arr=newint[m][n];排序规则:先按数组的第一个元素进行升序排序,若第一个元素相等,则按照第二个元素进行升序排序。使用API:Arrays.sort()(T[]a,Comparator<?superT>c),该API根据给定的比较器(设定排序方式)对指定的数组进行排序。代码实现:Arrays.sort(arr,newComparator<int[]>(){

  • Maven历史版本下载「建议收藏」

    Maven历史版本下载「建议收藏」一.Maven官网下载历史版本1.maven下载地址(1)、打开Mvaen官网下载地址(2)、进入历史版本下载地址(3)、历史版本下载页面,选择一个版本进入。(4)、我们选择一个历史版本进来后显示二进制和源码两个下载方式。二进制版本是编译好的,可以直接使用。源码版本未经编译,需要自行编译(5)、选择二进制版本,点击进入下载。(6)、下载下来后直接解压就可以使用了。…

  • Matlab矩阵操作[通俗易懂]

    Matlab矩阵操作[通俗易懂]第一部分:矩阵基本知识矩阵是进行数据处理和运算的基本元素。在MATLAB中a、通常意义上的数量(标量)可看成是”1*1″的矩阵;b、n维矢量可看成是”n*1″的矩阵;c、多项式可由它的系数矩阵完全确定。一、矩阵的创建在MATLAB中创建矩阵有以下规则:a、矩阵元素必须在”[]”内;b、矩阵的同行元素之间用空格(或”,”)隔开;c、矩阵的行与行之间用”;”(或回车符)隔开;d、矩阵的元素可以是数值、变量、表达式或函数;e、矩阵的尺寸不必预先定义。下面介绍四种矩阵的创建方法:

  • 银行软件测试面试问题_银行外包软件测试如何

    银行软件测试面试问题_银行外包软件测试如何今天参加了一场比较正式的面试,汇丰银行的视频面试。在这里把面试的流程记录一下,结果还不确定,但是面试也是自我学习和成长的过程,所以记录下来大家也可以互相探讨一下。 请你做一下自我介绍?(汇丰要求英文的自我介绍) 使用什么工具来管理项目? 测试用例是怎么管理的?测试用例的协作、更改、不同的版本是怎么管理的? 描述一下最近做的项目,具体做了什么?测试哪些方面?负责什么功能? 对项目中某个功能设计测试用例的时候使用了哪些方法?写了多少条用例? 设计测试用例是

  • Laravel报错Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length()

    Laravel报错Call to undefined function Illuminate\Encryption\openssl_cipher_iv_length()

    2021年10月20日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号