數(shù)組的深淺拷貝
在使用JavaScript對數(shù)組進(jìn)行操作的時候,我們經(jīng)常需要將數(shù)組進(jìn)行備份心包,事實證明如果只是簡單的將它賦予其他變量类咧,那么我們只要更改其中的任何一個,然后其他的也會跟著改變,這就導(dǎo)致了問題的發(fā)生痕惋。
淺拷貝
var arr = ["One","Two","Three"];
console.log(arr);//["One", "Two", "Three"]
var arrto = arr;
arrto[1] = "test";
console.log("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,test,Three
console.log("數(shù)組的新值:" + arrto + "<br />");//Export:數(shù)組的新值:One,test,Three
像上面的這種直接賦值的方式就是淺拷貝区宇,很多時候,這樣并不是我們想要得到的結(jié)果值戳,其實我們想要的是arr的值不變议谷,不是嗎?
深拷貝
方法一:js的slice函數(shù)
var arr = ["One","Two","Three"];
var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,Two,Three
document.writeln("數(shù)組的新值:" + arrtoo + "<br />");//Export:數(shù)組的新值:One,set Map,Three
方法二:js的concat方法
var arr = ["One","Two","Three"];
var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln("數(shù)組的原始值:" + arr + "<br />");//Export:數(shù)組的原始值:One,Two,Three
document.writeln("數(shù)組的新值:" + arrtooo + "<br />");//Export:數(shù)組的新值:One,set Map To,Three
Obj的深淺拷貝
直接引用堕虹,修改了原對象
let conf = {
adapter:'sqlite',
db: {
sqlite:{
name:'xxx.sqlite'
},
mysql:{
name:'xxx',
username:'work',
passwd:'******'
}
}
}
//直接引用
let conf2 =conf;
conf2.adapter = 'mysql';
console.log(conf);
console.log(conf2)
淺拷貝
let conf = {
adapter:'sqlite',
db: {
sqlite:{
name:'xxx.sqlite'
},
mysql:{
name:'xxx',
username:'work',
passwd:'******'
}
}
}
//淺拷貝
let copied = Object.assign({},conf);
copied.adapter = 'mysql';
console.log(conf.adapter);//"sqlite"
console.log(copied.adapter);//"mysql"
copied.db.sqlite.name ='yyy.sqlite';
//多級屬性無法被拷貝卧晓,而是引用
console.log(conf.db.sqlite.name);//"yyy.sqlite"
console.log(copied.db.sqlite.name);//"yyy.sqlite"
所以使用深拷貝
let conf = {
adapter:'sqlite',
db: {
sqlite:{
name:'xxx.sqlite'
},
mysql:{
name:'xxx',
username:'work',
passwd:'******'
}
}
}
//深拷貝
function deepCopy(des,src) {
for(var key in src) {
let prop = src[key];
if (typeof prop === 'object') {
des[key] = des[key]||{}; //判斷目標(biāo)對象是否有自身的key
deepCopy(des[key],prop);
}else{
des[key] = src[key];
}
}
return des;
}
let obj1= {
db:{
c:"name"
},
ad:'ad'
}
let deepCopied = deepCopy(obj1,conf);
let deepCopied2= deepCopy({},conf);
console.log(deepCopied);
console.log(deepCopied2);
deepCopied.db.sqlite.name = 'zzz.sqlite';
console.log([deepCopied.db.sqlite.name,conf.db.sqlite.name]);
//console
[object Object] {
ad: "ad",
adapter: "sqlite",
db: [object Object] {
c: "name",
mysql: [object Object] { ... },
sqlite: [object Object] { ... }
}
}
[object Object] {
adapter: "sqlite",
db: [object Object] {
mysql: [object Object] { ... },
sqlite: [object Object] { ... }
}
}
["zzz.sqlite", "xxx.sqlite"]