Javascript中的深復制

Lin_YT 發布于2019-08-20 15:25 / 2145人閱讀

摘要：對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象很明顯這個對象是存在兩層的，不是基本類型值，而是另一個對象。上面講的就是淺復制，在實際應用中存在很嚴重的問題。基于的做法是這樣的淺復制深復制

對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象

let obj={
    a:1,
    b:{
        a:1,
        b:2
    },
    c:3
}

很明顯這個對象是存在兩層的，obj[b]不是基本類型值，而是另一個對象。如果使用淺復制去拷貝這個對象的話，那么拷貝出來新的對象的b屬性的值是原來對象b屬性的引用地址，也就是說，如果改變源對象的b屬性，新的對象也會受到影響，因為我們只使用淺復制拷貝了一層。

上面講的就是淺復制，在實際應用中存在很嚴重的問題。所以我們一般復制對象都是用深復制，深復制不是簡單的復制一層，而是遍歷整個對象，一直到獲取到的值不是引用類型，而是基本類型的時候才進行復制，這樣就使得新的對象跟原來的對象完全是兩個不同的對象了。

下面是我寫的一個簡單的深復制函數

let obj={
    a:1,
    b:{
        a:1,
        b:2
    },
    c:3
}

function deepClone(object){
    let obj=new Object();
    if(object instanceof Object){
//         說明是對象
        for(let attr in object){
            if(object.hasOwnProperty(attr)){
//                 過濾基本類型值
                if(typeof object[attr]!="object"||object[attr]==null){
                    obj[attr]=object[attr];
                }else{
                    obj[attr]=deepClone(object[attr]);
                }
            }
        }
    }
    return obj;
}

let obj2=deepClone(obj);
obj.b=1;
console.log(obj,obj2);

注意，這個函數是存在問題的，因為這個函數只能處理純對象類型，也就是說屬性中包含數組的對象該方法是無法處理的。

下面這里有一個方法是stackoverflow上的答案，兼容了數組與對象的

function clone(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn"t supported.");
}

還有一種比較抖機靈的做法就是

var cloneOfA = JSON.parse(JSON.stringify(a));

這種做法也是可以實現深復制，但是由于JSON.stringify()方法在遇到undefined值時會省略對應的屬性，所以這個方法不太推薦使用，存在問題。

基于jQ的做法是這樣的

var copiedObject = jQuery.extend({}, originalObject) // shallow copy淺復制

var copiedObject = jQuery.extend(true, {}, originalObject) // deep copy深復制

GPU云服務器云服務器 javascript復制 javascript中的 javaScript中的this javascript中的函數

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

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

深入剖析 JavaScript 的深復制

摘要：的不能算作深復制，但它至少比直接賦值來得深一些，它創建了一個新的對象。它們的主要用途是對存在環的對象進行深復制。比如源對象中的子對象在深復制以后，對應于。希望這篇文章對你們有幫助深復制方法所謂擁抱未來的深復制實現參考資料本文最初發布于我的個人博客：咀嚼之味一年前我曾寫過一篇 Javascript 中的一種深復制實現，當時寫這篇文章的時候還比較稚嫩，有很多地方沒有考慮仔細。...

gclove 2019-08-22 11:51 評論0 收藏0
Javascript中的深復制

摘要：對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象很明顯這個對象是存在兩層的，不是基本類型值，而是另一個對象。上面講的就是淺復制，在實際應用中存在很嚴重的問題。基于的做法是這樣的淺復制深復制對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象 let obj={ a:1, b:{ a:1...

104828720 2019-08-29 12:19 評論0 收藏0
Javascript中的深復制

摘要：對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象很明顯這個對象是存在兩層的，不是基本類型值，而是另一個對象。上面講的就是淺復制，在實際應用中存在很嚴重的問題。基于的做法是這樣的淺復制深復制對一個對象或者數組這種引用類型的值進行復制可以分為淺復制和深復制，比如這樣的一個對象 let obj={ a:1, b:{ a:1...

AbnerMing 2019-08-01 16:36 評論0 收藏0
在js中的深復制實現方法

摘要：針對本話題，我在年月發布了新的文章深入剖析的深復制要實現深復制有很多辦法，比如最簡單的辦法有上面這種方法好處是非常簡單易用，但是壞處也顯而易見，這會拋棄對象的，也就是深復制之后，無論這個對象原本的構造函數是什么，在深復制之后都會變成。針對本話題，我在2015年5月發布了新的文章：深入剖析 JavaScript 的深復制要實現深復制有很多辦法，比如最簡單的辦法有： var...

Alliot 2019-08-19 14:44 評論0 收藏0