深拷貝VS淺拷貝
本文主要對深拷貝&淺拷貝的解釋及實現做一下簡單記錄。原文鏈接,歡迎star。
之所以會有深拷貝與淺拷貝之分,是因爲不同數據類型的數據在內存中的存儲區域不一樣。
堆和棧是計算機中劃分出來用來存儲的區域,其中堆(heap)則是動態分配的內存,大小不定也不會自動釋放;而棧(stack)爲自動分配的內存空間,它由系統自動釋放。存放在棧內存中的簡單數據段,數據大小確定,內存空間大小可以分配,是直接按值存放的,所以可以直接訪問。
衆所周知,JavaScript中的數據分爲(基本類型和引用類型)。五種基本類型(boolean
,number
,undefined
,null
,string
,)的數據的原始值是大小確定不可變的,所以放在棧內存中;而引用類型(object)是放在堆內存中的,對應賦值的變量只是一個存放在棧內存中的指針,也就是一個指向引用類型存放在堆內存中的地址。
引用類型比較與基本類型比較的區別
引用類型是引用的比較,例如
// a與b是兩個引用類型,但其指針指向的是兩個不同的引用
let a = [1,2,3];
let b = [1,2,3];
a===b; //false
// 引用類型的賦值操作,b的指針也是指向與a同樣的引用
let a = [1,2,3];
let b = a;
a===b; //true
而基本類型間的比較是值的比較,例如
let a = 1;
let b = 1;
a===b; //true
let a = 1;
let b = a;
a===b; //true
賦值操作:傳值與傳址的區別
在對基本類型進行賦值操作的時候實際是傳值,即在棧內存中新開一個區域給新的變量,然後再把值賦給它。所以基本類型賦值的變量是兩個互相獨立變量。
let a = 10;
let b = a;
b++;
console.log(a); //10
console.log(b); //11
而引用類型的賦值操作是傳址,只是在棧內存中新增了一個變量,同時賦值給這個變量的只是保存在堆內存中對象的地址,也就是指針的指向。因此這兩個變量的指針指向同一個地址,相互操作也就會有影響。
let a = {};
let b = a;
a.name = 'slevin';
console.log(b.name); //'slevin'
console.log(a.name); //'slevin'
console.log(a===b); //true
需要注意的是,引用類型的賦值並不算是淺拷貝,因爲賦值操作只相當於是引用,兩個變量還是指向同一對象,任何一方改變了都會影響到另一方;但淺拷貝出來的變量與源變量已經不同,在不包含子對象的情況下(此情況即爲深拷貝),一方改變不會影響到另一方。如下賦值操作:
let a = {};
let b = a;
b.name = 'slevin';
console.log(a.name); //'slevin';對b操作影響到了a
console.log(a===b); //true;因爲兩者指向同一個對象
淺拷貝實現方法
-
自定義實現方法:
// 淺拷貝的方法 function shallowCopy(srcObj) { let copy = {}; for (let key in srcObj) { //只拷貝自身的屬性,__proto__上繼承來的屬性不做拷貝,也可去掉這個限制 if (srcObj.hasOwnProperty(key)) { copy[key] = srcObj[key]; } } return copy; } let obj = { name: 'slevin', age: 18, language: { 'english': 'good', 'mandarin': 'wonderful', } } let copy = shallowCopy(obj); copy.age = 28; console.log(obj.age); // 18; 並沒有改變源對象 console.log(obj === copy); //false;兩者指向不是同一個對象
-
利用
Object.assign(target,...sources)
可將一個或多個源對象上可枚舉屬性的值複製到目標對象,並返回目標對象。但注意,只能做一層屬性的淺拷貝。let obj = { name: 'slevin', age: 18, language: { english: 'good', mandarin: 'wonderful', test: [1, 2, 3] }, fn:function(){ console.log('this:',this.name); } } let copy = Object.assign({},obj); //不會改變源對象 copy.age = 22; //會改變源對象 copy.language.english = 'bad'; console.log('copy===obj:',copy===obj);//false console.log('copy:',copy); console.log('obj:',obj);
-
對於數組來說,也可以使用
Array.prototype.slice()
方法和Array.prototype.concact()
方法let obj = [1,2,['a','b','c']] let copy = obj.slice(); // 不會改變源對象 copy[0]=111; // 會改變源對象 copy[2][0]='aaa'; console.log('copy===obj:',copy===obj);//false console.log('copy:',copy); console.log('obj:',obj);
深拷貝及實現方法
簡單來說,深拷貝就是把對象以及對象的子對象進行拷貝。因爲淺拷貝只複製了一層對象的屬性,而如果對象的數值也爲引用類型,那麼拷貝過來依然是個引用地址,在拷貝對象上對子對象的值進行操作會改變原始數據中的值。
例如上面obj
淺拷貝得到copy對象
,如果在copy
對象上改變子對象copy.language
上的屬性值,會影響到源對象obj
:
copy.language.english = 'bad';
copy.language.mandarin = 'bad';
console.log(obj.language); // {'english': 'bad','mandarin': 'bad',}
那麼如何深拷貝呢?思路就是遞歸調用剛剛的淺拷貝,遍歷所有值爲引用類型的屬性,然後依次賦值給另外一個對象即可。
-
方法一,自定義實現:
/**將源對象source深度合併到目標對象target上
- source 源對象
- target 目標對象,默認{}
- deep 是否深度合併,默認true
*/
function deepCopy (source,target={},deep=true) {
for (let key in source){
// 深拷貝,而且只拷貝自身屬性.(默認傳入的source爲對象)
if (deep && source.hasOwnProperty(key)){
if (typeof(source[key])==='object'){
// // source[key] 是對象,而 target[key] 不是對象, 則 target[key] = {} 初始化一下,否則遞歸會出錯的
// if (!(target[key] instanceof Object) && (source[key] instanceof Object)){
// target[key] = {};
// }
// // source[key] 是數組,而 target[key] 不是數組,則 target[key] = [] 初始化一下,否則遞歸會出錯的
// if (!Array.isArray(target[key]) && Array.isArray(source[key])) {
// target[key] = [];
// }
// 上面的代碼可以簡化爲以下:
target[key] = Array.isArray(source[key]) ? [] : {};
// 遞歸執行拷貝
deepCopy(source[key],target[key],true);
} else {
target[key] = source[key];
}
}
}
return target;
}
let obj = {
name: 'slevin',
age: 18,
language: {
english: 'good',
mandarin: 'wonderful',
test:[1,2,3]
}
}
let copy = deepCopy(obj);
copy.language.test[0] = 111;
console.log('copy:',copy); //111 改變目標對象的子對象屬性值
console.log('obj:',obj); //1 對應源對象上沒有改變
-
利用
JSON.parse(JSON.stringify(copyObj))
方法let obj = { name: 'slevin', age: 18, language: { english: 'good', mandarin: 'wonderful', test: [1, 2, 3] } } let copy = JSON.parse(JSON.stringify(obj)) copy.language.test[0]=111; console.log('copy===obj:',copy===obj);//false console.log('copy.language.test[0]:',copy.language.test[0]);//111 console.log('obj.language.test[0]:',obj.language.test[0]);//1
但要注意,此方法有兩個缺點:
- 如果源對象屬性值有函數,無法拷貝下來
- 無法拷貝源對象原型鏈上的屬性和方法
let obj = { name: 'slevin', age: 18, language: { english: 'good', mandarin: 'wonderful', test: [1, 2, 3] }, fn:function(){ console.log('this:',this.name); } } let copy = JSON.parse(JSON.stringify(obj)); console.log('copy===obj:',copy===obj);//false console.log('obj.fn:',obj.fn); //fn(){}... console.log('copy.fn:',copy.fn); //undefined
最後,再補一張引用類型的賦值操作、淺拷貝深拷貝對比圖,加深印象