Javascript深拷贝_励志文章
您当前位置:pc蛋蛋公式 > 励志 > 励志文章 >
上一篇:东京医科大学致歉:今后杜绝篡改女生分数 下一篇:用Jsx写Vue组件

Javascript深拷贝

Javascript深拷贝

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

深拷贝(deepClone)?

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

Javascript深拷贝

为啥要用深拷贝?

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

看一个具体的例子

// 给test赋值了一个对象  var test = {  a: 'a',  b: 'b'  };     // 将test赋值给test2  // 此时test和test2是共享了同一块内存对象,这也就是浅拷贝  var test2 = test;     test2.a = 'a2';     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表示了一个对象类型

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类型要怎么拷贝呢?

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

浅拷贝?

更多
本文地址:
本文标题:Javascript深拷贝

励志名言 名人名言 励志电影 励志歌曲 经典语录 励志签名 励志文章 励志故事 人生感悟 伤感日志 创业
Copyright © 2012-2019 pc蛋蛋公式,幸运28公式,加拿大28公式-平台首页 版权所有 | 百度地图 | 联系方式 | 广告服务 [彩票信誉群]