原生JS 實現復雜對象深拷貝（對象值包含函數）

MkkHou 發布于2019-08-23 15:27 / 1217人閱讀

摘要：網上有很多方法，比如對象的和的等，但是它們有一個共同的問題就是對簡單對象可以實現深拷貝，但是對復雜對象就不行了，比如這樣一個對象屬性值有函數數組復雜對象等這個時候剛才那幾個方法就不行了。

以前對深拷貝和淺拷貝沒有太深的印象，后來才知道是因為沒掉進去過它的坑里。最近掉坑了才意識到它們的重要性。

閑話少敘，來說說坑：如果我需要保存一個復雜的對象 obj 并把它賦值給 originalObj ，后來對obj對象的某個屬性值進行了修改，然后，，，我保存的初始值originalObj 也被修改了?。。?br>這個時候明眼人應該看出問題來了：因為我給originalObj 賦值的時候用的是淺拷貝，所以修改obj 的屬性值的時候，originalObj 也跟著變了。這就是淺拷貝的直接表現。
那么假如我想保存一份初始值originalObj ，不管 obj 怎么修改，都保持originalObj 始終不變，該怎么辦呢？答案就是用深拷貝。。。
網上有很多方法，比如Object.assign()、JSON對象的parse和stringify、JQ的extend等，但是它們有一個共同的問題就是對簡單對象可以實現深拷貝，但是對復雜對象就不行了，比如這樣一個對象（屬性值有函數、數組、復雜對象等）：

這個時候剛才那幾個方法就不行了。那該怎么辦呢？
這個時候就需要自己寫一個函數了：

function copyFn(obj) {
    if (obj == null) { return null } 
    var result = Array.isArray(obj) ? [] : {}; 
    for (let key in obj) { 
        if (obj.hasOwnProperty(key)) { 
            if (typeof obj[key] === "object") { 
            result[key] = copyFn(obj[key]); // 如果是對象，再次調用該方法自身 
            } else { 
            result[key] = obj[key]; 
            } 
        } 
    } 
    return result; 
}

然后 copy 對象的效果如下：

let obj_2 = deepCopy(obj_1); 
console.log(obj_1); // 修改name屬性之前，打印出來 name 也是 Edited 
obj_1.name = "Edited"; 
console.log(obj_1); // 修改name屬性之后，打印出來 name 是 Edited 
console.log(obj_2); // 由于是深拷貝，修改obj_1 的 name屬性之前，不影響 obj_2 的 name 屬性

希望這個用函數實現復雜對象的深拷貝的方法對您有所幫助！

云服務器 GPU云服務器復雜對象 java鍵值對象函數對象 javascript函數對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102080.html

js基礎深入淺出

摘要：當多個事件觸發的時候，會把異步事件依次的放入里等同步事件執行完之后，再去隊列里一個個執行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系持續不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0
React 的性能優化（一）當 PureComponent 遇上 ImmutableJS

摘要：四是在年出的持久性數據結構的庫，持久性指的是數據一旦創建，就不能再被更改，任何修改或添加刪除操作都會返回一個新的對象。避免大量使用操作，這樣會浪費性能。盡量將設計成扁平狀的。一、痛點在我們的印象中，React 好像就意味著組件化、高性能，我們永遠只需要關心數據整體，兩次數據之間的 UI 如何變化，則完全交給 React Virtual Dom 的 Diff 算法去做。以至于我們很...

plus2047 2019-08-21 16:50 評論0 收藏0
Zepto核心模塊之工具方法拾遺

摘要：舉例需要注意的是，此時回調函數中的指向的就是數組或者對象的某一項。中提供的拷貝方法，默認為淺拷貝，如果第一個參數為布爾值則表示深拷貝。前言平時開發過程中經常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數身上，作為靜態方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現分析。源...

Alex 2019-08-20 19:04 評論0 收藏0
Zepto核心模塊之工具方法拾遺

摘要：舉例需要注意的是，此時回調函數中的指向的就是數組或者對象的某一項。中提供的拷貝方法，默認為淺拷貝，如果第一個參數為布爾值則表示深拷貝。前言平時開發過程中經常會用類似each、map、forEach之類的方法，Zepto本身也把這些方法掛載到$函數身上，作為靜態方法存在，既可以給Zepto的實例使用，也能給普通的js對象使用。今天我們主要針對其提供的這些api做一些源碼實現分析。源...

lcodecorex 2019-08-01 17:31 評論0 收藏0