js中對象深度克隆,以及ES6中的深度克隆的實現

簡要介紹:js中的對象的賦值,其實是實現了對象的引用,在賦值對象上修改屬性會影響到原來的對象。

–ES5中我們可以通過遞歸函數來實現深層次的克隆。
–ES6中我們可以通過Object.assign的方式來實現深度克隆。

1.javascript(ES5)中對象的克隆

function deepClone(obj){
    var newObj= obj instanceof Array?[]:{};
    for(var i in obj){
       newObj[i]=typeof obj[i]=='object'?  
       deepClone(obj[i]):obj[i];    
    }
    return newObj;
}

缺點:不能實現包裝類型比如通過new String()或者new Number()創建的對象的深度克隆

2.ES6下的對象深度克隆

(1)通過Object.assigin實現

const deepClone=(obj)=>{
   var proto=Object.getPrototypeOf(obj);
   return Object.assign({},Object.create(proto),obj);
}

通過Object.getPrototypeOf函數得到obj被克隆函數的原型上的屬性,然後通過Object.assign實現深度克隆。

(2)通過proto來實現(僅適合瀏覽器端)

const deepClone=(obj)=>({

  __proto__: Object.getPrototypeOf(obj),
  ...obj
})

通過擴展運算符…和proto屬性來實現

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章