js面試題:實現對象深度克隆(deepClone)的三種方案


 方案一:利用現代瀏覽器支持的JSON對象做一次中轉,實現深度克隆。(IE6、IE7不支持原生JSON對象,可載入json2.js補丁來達到兼容)感謝rekey提供此方案。JSON.stringify()與JSON.parse()詳細信息請點擊這里

var deepClone = function (obj) {
    var _tmp,result;
    _tmp = JSON.stringify(obj);
    result = JSON.parse(_tmp);
    return result;
}
var obj1 = {family:{brother:"wangzhipeng",father:"wanglicai",mother:"sunaiyun"},name:"gino",sex:"male",age:"27"};
var obj2 = deepClone(obj1);
obj1.family.brother = "close";
console.log(obj1); 
console.log(obj2); 

 

方案二:確定參數類型為object (這里僅指object literal、Array literal)后,復制源對象的鍵/值到目標對象,否則直接返回源對象。

注:下面這個函數只能說基本滿足生產需求,如果參數是Dom對象、new Object ()的話,就會產生功能性錯誤,要兼容參數的所有數據類型,請點擊這里

var deepClone = function fnDeepClone(obj){
    var result = typeof obj.splice === 'function'?[]:{},
    key;
    if (obj && typeof obj === 'object'){
        for (key in obj ){
            if (obj[key] && typeof obj[key] === 'object'){
                result[key] = fnDeepClone(obj[key]);//如果對象的屬性值為object的時候,遞歸調用deepClone,即再把某個值對象復制一份到新的對象的對應值中
            }else{
                result[key] = obj[key];//如果對象的屬性值不為object的時候,直接復制參數對象的每一個鍵/值到新對象對應的鍵/值中
            }
            
        }
        return result;
    }
    return obj;
    

}

//test array
var arry1= ["a","b","c","d"];
var arry2 = deepClone(arry1);
arry1.pop();
console.log(arry1);
console.log(arry2);

//test object
var obj1 = {name:"gino",sex:"male",age:27,favorite:"pingpang",family:{brother:"zhipeng",mother:"SunAiyun",father:"WangLicai"}};
var obj2 = deepClone(obj1);
obj1.family.brother = "close";
console.log(obj1);
console.log(obj2);

 

 方案三:利用數組的Array.prototype.forEach和其他一些ECMAScript 5中的Object.*函數。經測試,當值的類型為object的時候,會出現功能錯誤。個人水平有限,沒看懂這個函數,如有朋友能幫忙修正下此函數,萬分感激。 鏈接

var deepClone = function (o){
  var copy = Object.create( Object.getPrototypeOf(o) );
  var propNames = Object.getOwnPropertyNames(o);
 
  propNames.forEach(function(name){    
    var desc = Object.getOwnPropertyDescriptor(o, name);   
    Object.defineProperty(copy, name, desc);        
  });
 
  return copy;
}
 
var obj1 = {family:{brother:"wangzhipeng",father:"wanglicai",mother:"sunaiyun"},name:"gino",sex:"male",age:"27"};
var obj2 = deepClone(obj1);
obj1.sex = "close";
console.log(obj1); 
console.log(obj2); 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM