[記錄] JavaScript 中的深淺拷貝(克隆)
阿新 • • 發佈:2018-08-08
ray 方式 pro 是否 span div ext 引用 針對
二、深拷貝
思路:
遍歷對象 for (var prop in obj)
1. 判斷是不是原始值 typeof() object
2. 判斷是數組還是對象 instanceof constructor toString(在iframe父子作用域中依舊正確)
3. 建立相應的數組或對象 然後遞歸
淺拷貝和深拷貝針對的是Object、Array這樣復雜的引用類型數據
簡單說:淺拷貝只復制一層的屬性,而深拷貝則遞歸復制所有層級的屬性
一、淺拷貝
1 function clone(origin, target) { 2 var result = target || {}; 3 for ( var prop in origin ){ 4 target[prop] = origin[prop]; 5 } 6 return result; 7 }
如果對象的屬性值是數組或對象,實際上,存儲的值是一個內存地址;
原始數據和拷貝的數據指向的是同一個地址,可能別篡改。
二、深拷貝
思路:
遍歷對象 for (var prop in obj)
1. 判斷是不是原始值 typeof() object
2. 判斷是數組還是對象 instanceof constructor toString(在iframe父子作用域中依舊正確)
3. 建立相應的數組或對象 然後遞歸
1 function deepClone(origin, target) { 2 var target = target || {}, 3 toStr = Object.prototype.toString, 4 arrStr = "[object Array]";5 for(var prop in origin) { 6 // 判斷對象是否包含特定的自身屬性 7 if(origin.hasOwnProperty(prop)) { 8 // 排除null這個特殊的object並且是對象類型的引用類型數據 9 if(origin[prop] !== null && typeof(origin[prop]) == ‘object‘){ 10 target[prop] = (toStr.call(origin[prop]) == arrStr) ? [] : {};11 deepClone(origin[prop], target[prop]); 12 }else{ 13 // 拷貝基本類型數據 14 target[prop] = origin[prop]; 15 } 16 } 17 } 18 return target; 19 }
深拷貝不僅將原對象的基本類型數據拷貝,而且將原對象上的引用類型數據采用遞歸的方式拷貝到新的對象上。這樣就不會出現引用類型數據指向同一對象的問題。
jQuery提供了 $.extend() 深淺拷貝方法
淺拷貝:$.extend({}, obj1, obj2);
深拷貝:$.extend(true, obj1, obj2);
[記錄] JavaScript 中的深淺拷貝(克隆)