介绍
使用javascript怎么实现深浅拷贝?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
javascript的特点 1. javascript主要用来向HTML页面添加交互行为。
2. javascript可以直接嵌入到HTML页面,但写成单独的js文件有利于结构和行为的分离。
3.JavaScript具有跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行。
<>强基本类型复制:
var a =, 1;
var b =,,//复制
console.log (b)//1
时间=a 2;//改变一个的值
console.log (b)//1
console.log (a),//2 因为a, b都是属于基本类型,基本类型的复制是不会影响对方的,因为基本类型是每一次创建变量都会在栈内存中开辟一块内存,用来存放值,所以基本类型进行复制是不会对另外一个变量有影响的;
<强>引用类型复制:
引用类型的复制我们分为数组的复制和对象的复制两个方面来进行讲解:
<强> js的浅拷贝:
var arr1 =,(& # 39;红色# 39;& # 39;绿色# 39;];
var arr2 =, arr1;//复制
console.log (arr2)//[& # 39;红色# 39;& # 39;绿色# 39;];
arr1.push(& # 39;黑色# 39;),,//改变color1的值
console.log (arr2)//[& # 39;红色# 39;& # 39;绿色# 39;,& # 39;黑色# 39;】
console.log (arr1),//(“red",,“green",,“black"] 上面的案例是javascript数组的浅拷贝,通过上面的知识我们可以看知道数组是引用类型数据,引用类型数据复制是会进行相互影响的,我们看到arr1.push(& # 39;黑色# 39;)添加了一个新的子项,因为上面var arr2=arr1这行代码是将两个引用类型数据的地址指针指向了同一块堆内存区域,所以不管是arr1还是arr2修改,任何一个一个改动两个数组都是会互相产生影响的;上面的那种直接赋值方式的复制就是我们常说的引用类型的浅拷贝;
关于深拷贝很多同学都误以为js的原生方法concat、片是属于深拷贝,其实不是的;js的原生方法concat、片都是仅适用于一维数组,一旦到了二维数组或者多维数组中就会出现问题,就出现拷贝的不够彻底导致还是会发生数据的相互牵引问题;
<强>片:
var arr1 =,(& # 39;红色# 39;& # 39;绿色# 39;];
var arr2 =, arr1.slice(0);//复制
console.log (arr2)//[& # 39;红色# 39;& # 39;绿色# 39;];
arr1.push(& # 39;黑色# 39;),,//改变color1的值
console.log (arr2)//(“red",,“green"】
console.log (arr1)//(“red",,“green",,“black"] js原生的方法将会返回一个新的数组,上述代码乍一看会以为是深拷贝,因为arr2和arr1相互复制和牵引,而当arr1调用了推方法添加了新数组子项的时候,arr2没有发生变化,是的,这是符合深拷贝的特性,但是拷贝的不够彻底,所以还不能算是真正意义上的深拷贝,所以片只能被称为浅拷贝,片方法只适用于一维数组的拷贝,在二维数组中就会破绽百出;
下面我们再来看一下二维数组的例子:
var arr1=[1, 2, 3, (& # 39; 1 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]];
var arr2=arr1.slice (0);
,arr1 [3] [0]=0;
,console.log (arr1);//[1, 2, 3, (& # 39; 0 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]]
,console.log (arr2);//[1, 2, 3, (& # 39; 0 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]] 上述代码是一个二维数组,当我们在arr1[3][0]里面进行更改arr1的值的时候,我们发现arr1, arr2两个数组的值都发生了变化,所以事实证明片不是深拷贝;
<强> concat:
var arr1 =,(& # 39;红色# 39;& # 39;绿色# 39;];
var arr2 =, arr1.concat();//复制
console.log (arr2)//[& # 39;红色# 39;& # 39;绿色# 39;];
arr1.push(& # 39;黑色# 39;),,//改变color1的值
console.log (arr2)//(“red",,“green"】
console.log (arr1)//(“red",,“green",,“black"] var arr1=[1, 2, 3, (& # 39; 1 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]];
var arr2=arr1.concat ();
,arr1 [3] [0]=0;
,console.log (arr1);//[1, 2, 3, (& # 39; 0 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]]
,console.log (arr2);//[1, 2, 3, (& # 39; 0 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;]] concat方法在一维数组中是不会影响源数组的数据的,而在二维数组中concat的表现和切片是一样的;
<强> js的深拷贝:
