首先深復(fù)制和淺復(fù)制只針對(duì)像 Object, Array 這樣的復(fù)雜對(duì)象的。簡(jiǎn)單來(lái)說(shuō),淺復(fù)制只復(fù)制一層對(duì)象的屬性,而深復(fù)制則遞歸復(fù)制了所有層級(jí)。
一、數(shù)組的slice()和concat()方法
var arr = [1, 2, {a: 1}]
var arr1 = arr.slice()
arr1[2].a = 10
console.log(arr[2].a) // 10
var arr = [1, 2, {a: 1}];
var arr1 = [];
arr1 = arr1.concat(arr);
arr1[2].a = 10;
console.log(arr[2].a); //10
從上面的代碼可以看出當(dāng)改變 ‘a(chǎn)rr1’ 中的值時(shí),arr也隨著改變,所以數(shù)組的slice()和concat()的方法為淺拷貝
二、json的api方法
var json = {a:12,b:5, c: {d: 90}};
var str = JSON.stringify(json); //這里將json內(nèi)的數(shù)據(jù)轉(zhuǎn)換成一個(gè)字符串存起來(lái)
var json2 = JSON.parse(str); //這里將字符串的內(nèi)容"還原"成原來(lái)的"面目"
json2.c.d = 100;
console.log(json.c.d); //輸出 90
可以看出json的api方法是深拷貝,但有一點(diǎn)需要注意,當(dāng)對(duì)象中有函數(shù)的話,拷貝出來(lái)的話會(huì)是undefined, 例子如下:
var json = {a: 12, b: 5, c: function() { console.log(10) }}
var str = JSON.stringify(json);
var json2 = JSON.parse(str);
console.log(json2.c) //undefined
三、實(shí)現(xiàn)深拷貝和淺拷貝
1、淺拷貝
var shallowCopy = function(Obj) {
if(typeof Obj !== 'object') {
return
}
var newObj = Obj instanceof Array ? [] : {}; 將新數(shù)組或新的對(duì)象初始化為空
for(var val in Obj) {
if(Obj.hasOwnProperty(val)){ // 判斷屬性是否為自身屬性
newObj[val] = Obj[val];
}
}
return newObj
}
var obj = {a: 1, b: 2, c: 3}
console.log(shallowCopy(obj))
2、深拷貝
var deepCopy = function(Obj) {
if(typeof Obj !== 'object') {
return
}
var newObj = Obj instanceof Array ? [] : {};
for(var val in Obj) {
if(Obj.hasOwnProperty(val)){
newObj[val] = typeof Obj[val] === 'object' ? deepCopy(Obj[val]) : Obj[val] //遞歸便利數(shù)組和對(duì)象
}
}
return newObj
}
var obj = {a: 1, b: 2, c: {d: 9}}
deepCopy(obj)