前提：原始數據類型和對象類型賦值時的差異
JavaScript的數據類型分為原始數據類型和對象類型。二者在內存中存放的方式不同，導致了其賦值時差異。分別舉個栗子
var x = 1; var y = x; //y獲得了和x同樣的值 y = 2; console.log(x); // 1 var m = [1,2]; //m存放的是指向[1,2]這個數組對象的引用地址 var n = m; //n也獲得 [1,2]數組對象的引用地址 n[0] = 3; console.log(m); //[3,2]
由上栗子可以看出 ：原始數據類型賦值時，給的是實實在在的數據值 ，賦值后二者只是值一樣而已，不會相互影響； 而對象類型，給的是 原數據的引用地址，所以新舊數據會互相影響，因為本質上還是同一個數據對象，如上栗中的數組
什么是淺拷貝？
顧名思義，淺拷貝就是流於表面的拷貝方式；當屬性值為對象類型時，只拷貝了對象數據的引用，導致新舊數據沒有完全分離，還會互相影響。再舉個栗子···
|
1
2
3
4
5
6
7
8
9
10
11
|
//測試數據
var array1 = ['a',1,true,{name:'lei',age:18}];
//concat() slice() 實現淺拷貝
var array2 = array1.concat()
//修改拷貝后的數據
array2[0] = 'b'; //array1[0]是原始數據類型 所以是直接賦值的
array2[3].name = 'zhang'; //array1[3]是對象數據類型 所以拷貝的是對象的引用，其實還是和原數組使用同一對象
console.log(array1); // ['a',1,true,{name:'zhang',age:18}]
|
栗子中 array2是array1的淺拷貝對象，數組元素是原始數據類型的不會相互影響了（array1[0]），但是array1[3]是對象類型，還是會互相影響。
如何實現淺拷貝
- 上栗中的 array.concat()或者array.slice() 是特殊的實現數組淺拷貝的方式。
- 如何自己實現呢？遍歷對象/數組的每個屬性，然后賦值給一個新的對象不就行了么，如下實現
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<strong> //實現淺拷貝
function shallowCopy( target ){
if(typeof target !== 'object') return ;
//判斷目標類型，來創建返回值
var newObj = target instanceof Array ? [] : {};
for(var item in target){
//只復制元素自身的屬性，不復制原型鏈上的
if(target.hasOwnProperty(item)){
newObj[item] = target[item]
}
}
return newObj
}</strong>
//測試
var test = [1,'a',{name:'lei',age:18}];
var copy = shallowCopy(test);
console.log(copy[2].name); //lei
copy[2].name = 'zhang';
console.log(test[2].name); //zhang 原數據也被修改
|
深拷貝及其實現
從淺拷貝解釋基本可以明白，深拷貝就是 ‘完全’拷貝，拷貝之后新舊數據完全分離，不再共用對象類型的屬性值，不會互相影響。
實現方式：
- 取巧方式 JSON.parse(JSON.stringify(Obj)) 不能深拷貝屬性值是函數的對象
|
1
2
3
4
5
6
7
8
|
var test = [1,'a',{name:'lei',age:18}];
var copy1 = JSON.parse(JSON.stringify(test)); //特殊方式
console.log(copy1);
copy1[2].name = 'zhang'
console.log(test); //[1,'a',{name:'lei',age:18}] 未受到影響
|
注意：這種方式不能深拷貝有屬性值為函數的對象， 可自行嘗試
2. 實現深拷貝
已經實現了淺拷貝，思考下應該是對 對象類型屬性值賦值時，導致的沒有完全分離，所以要修改下 拷貝對象類型屬性值的方式，對它再調用一次深拷貝，這樣就實現了深拷貝，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
//實現深拷貝
function deepCopy( target ){
if(typeof target !== 'object') return ;
//判斷目標類型，來創建返回值
var newObj = target instanceof Array ? [] : {};
for(var item in target){
//只復制元素自身的屬性，不復制原型鏈上的
if(target.hasOwnProperty(item)){
newObj[item] = <strong>typeof target[item] == 'object' ? deepCopy(target[item]) : target[item] //判斷屬性值類型
</strong> }
}
return newObj
}
//測試
var test = [1,'a',{name:'lei',age:18}];
var copy2 = deepCopy(test);
copy2[2].name = 'zhang'
console.log(test); ////[1,'a',{name:'lei',age:18}] 未受到影響
|
總結
一定要理解造成淺拷貝的原因：對象類型數據復制時，復制了引用地址，用的還是同一個數據對象；所以實現深拷貝的方式就是要對 對象類型屬性值遞歸進行深拷貝，避免直接賦值。