本文实例讲述了JavaScript实现浅拷贝与深拷贝的方法。分享给大家供大家参考,具体如下:
平时使用数组复制时,我们大多数会使用“=?这只是浅拷贝,存在很多问题。比如
让arr=[1、2、3、4、5);
让arr2=arr;
console.log (arr)//[1、2、3、4、5)
console.log (arr2)//[1、2、3、4、5)
arr [0]=6;
console.log (arr)//[6、2、3、4、5)
console.log (arr2)//[6、2、3、4、5)
arr2 [4]=7;
console.log (arr)//[6, 2、3、4、7]
console.log (arr2)//[6, 2、3、4、7]
之前
很明显,浅拷贝下,拷贝和被拷贝的数组会相互受到影响。所以,必须要有一种不受影响的方法,那就是深拷贝。
深拷贝的实现方式有很多种。
<强>一,循环实现深拷贝
//循环副本
函数副本(arr) {
让卡尔=[]
(让我=0;我& lt;arr.length;我+ +){
cArr.push (arr[我])
}
返回卡尔;
}
让arr3=(1、2、3、4);
让arr4=复制(arr3)//(1、2、3、4)
console.log (arr4)//(1、2、3、4)
arr3 [0]=5;
console.log (arr3)//(5, 2、3、4)
console.log (arr4)//(1、2、3、4)
之前
<强>二,片方法实现深拷贝
//片实现深拷贝
让arr5=(1、2、3、4);
让arr6=arr5.slice (0);
arr5 [0]=5;
console.log (arr5);//(5,2、3、4)
console.log (arr6);//(1、2、3、4)
之前
<强>三,concat实现深拷贝
//concat实现深拷贝
让arr7=(1、2、3、4);
让arr8=arr7.concat ();
arr7 [0]=5;
console.log (arr7);//(5,2、3、4)
console.log (arr8);//(1、2、3、4)
之前
<强>四,es6扩展运算实现深拷贝
//es6扩展运算实现深拷贝
让arr9=(1、2、3、4);
让[…arr10]=arr9;
arr9 [0]=5;
console.log (arr9)//(5, 2、3、4)
console.log (arr10)//(1、2、3、4)
之前
<强>五,对象的循环深拷贝
//循环副本对象
让obj={
id:“0”,
名称:“王”,
性:“男人”
}
让methoda=copy2 (obj)
函数copy2 (obj) {
让cObj={};
(var关键obj) {
cObj[主要]=obj(例子)
}
返回cObj
}
console.log (obj)//{id:“0”,名字:“国王”,性:“男人”}
console.log methoda ()//{id:“0”,名字:“国王”,性:“男人”}
之前
<强>六,对象转换成json实现深拷贝
//转换成json
让obj3=JSON.parse (JSON.stringify (obj));
console.log (obj3)//{id:“0”,名字:“国王”,性:“男人”}
之前
<强>七,es6扩展运算实现深拷贝
让{…obj4}=obj
console.log (obj4)//{id:“0”,名字:“国王”,性:“男人”}
之前
<强>八,通用深拷贝
var克?function (v) {
var o=v。构造函数数组===& # 63;[]:{};
我在v (var) {
o[我]=typeof v[我]==="对象" & # 63;[我]克隆(v): v(我);
}
返回啊;
}
之前
总结:深刻理解javascript的深浅拷贝,可以灵活的运用数组,并且可以避免很多bug。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript面向对象入门教程》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
