JS进阶篇:数据的深浅拷贝

数据类型

基本数据类型

1	Undefined，Null， Boolean， Number， String

undefined:已声明未赋值
null:不存在的对象

复杂数据类型

1

object

简单数据类型和复杂数据类型复制的区别

简单数据类型的复制

1 2	var a = 1; var b = a;

基本数据类型的复制就是创建副本的过程，a和b占据大小相同但位置不同的内存空间。

复杂数据类型的复制

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

var obj = { name:'zhq', age:24 } var obj2 = obj; obj2.name = 'FFF'; console.log(obj.name); 可以发现，修改obj2的属性值，obj的属性值也跟着发生改变了，这是因为obj和obj2这两个变量都指向同一个指针，赋值只是复制了指针，所以我们改变其中任何一个变量的值另一个变量的值也会跟着改变。 ## 深拷贝 ## 上面复杂数据类型的代码可以说是浅拷贝，那么我们如何实现数据的深拷贝，即完全复制生成一个占有自己内存空间的数据呢？ ### 数组的深拷贝 ### ```javascript slice var arr = ['html','css','js']; var copyarr = arr.slice(0); copyarr[0] = 'HTML'; console.log(arr); //["html", "css", "js"] console.log(copyarr); //["HTML", "css", "js"]

1 2 3 4 5 6

concat var arr = [ 'html', 'css', 'js']; var copyarr = arr.concat; copyarr[ 0] = 'HTML'; console.log(arr); //["html", "css", "js"] console.log(copyarr); //["HTML", "css", "js"]

对象的深拷贝

蠢方法：

1	var copyObj = new Object();

遍历复制对象的每个属性值

不是很蠢的方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

var deepCopy = function(source){ var result = {}; for( var key in source){ if( typeof source[key] === 'object'){ result[key] = deepCopy(source[key]); } else{ result[key] = source[key]; } } return result; } var obj = { name: 'zhq', age: 24 } var obj2 = deepCopy(obj); obj2.name = 'kobe'; console.log(obj.name); //zhq

对象包括数组的深拷贝

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

Object.prototype.deepCopy= function(){ var obj= null; //用于最后返回一个对象，这个对象是深复制的结果 for( var attr in this){ //遍历这个对象的每一个属性 if( this.hasOwnProperty(attr)){ //主要是递归自有属性 if( typeof ( this[attr]=== 'object')){ //如果对象的属性是一个对象，就递归复制它的每一个属性 if( this[attr]=== null){ //如果对象为null obj[attr]= null; } else if( Object.prototype.toString( this[attr])=== '[object Array]'){ //如果是个数组 obj[attr]=[]; for( var i= 0;i< this[attr].length;i++){ obj[attr].push( this[attr][i].deepCopy()); } } else{ //object obj[attr]= this[attr].deepCopy(); } } else{ obj[attr]= this[attr]; } } } return obj; }

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我微信：iamaixiaoxiao。