JavaScript 淺複製和深複製

Advoster發表於2023-01-16
JavaScript

JavaScript 中的複製分為兩種：淺複製和深複製。

一、淺複製

淺複製是指在複製過程中，只複製一個物件中的指標，而不複製實際的資料。所以，淺複製中修改新物件中的資料時，原物件中的資料也會被改變。

JavaScript 中淺複製可以透過如下幾種方式實現：

  • 使用結構賦值的方式，例如 let newObject = {...oldObject}
  • 使用 Object.assign() 方法，例如 let newObject = Object.assign({}, oldObject)

二、深複製

深複製是指在複製過程中，複製一個物件中的所有資料，並建立一個新物件，對新物件進行操作並不會影響到原物件。

1、常規場景

JavaScript 中深複製可以透過如下幾種方式實現：

  • 使用 JSON.parse(JSON.stringify(object)) 方法

需要注意的是：該方法會忽略 undefined 以及正規表示式型別的屬性。

const A = { a: 7788, b: undefined, c: new RegExp(/-/ig) },
    B = JSON.parse(JSON.stringify(A));

console.log('A', A);
console.log('B', B);

JavaScript 淺複製和深複製

  • 使用遞迴的方式，手動複製物件的每一層
function deepCopy(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
        for (let i = 0; i < obj.length; i++) {
            copy[i] = deepCopy(obj[i]);
        }
    } else {
        copy = {};
        for (let key in obj) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const objA = { a: 123 },
    objB = { b: 456 };

// 淺複製
const objC = {...objA};
console.log('objA.a', objA.a);  // objA.a 123
console.log('objC.a', objA.a);  // objC.a 123
objC.a = 788;
console.log('objA.a', objA.a);  // objA.a 788
console.log('objC.a', objC.a);  // objC.a 788

// 深複製
const objD = deepCopy(objB);
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 456
objD.b = 899;
console.log('objB.b', objB.b);  // objB.b 456
console.log('objD.b', objD.b);  // objD.b 899

這個函式接受一個引數 obj，如果它不是物件或者是 null，那麼直接返回該引數。如果它是陣列，則建立一個新陣列並遞迴複製每一項。否則，建立一個新物件並遞迴複製每一個屬性。

  • 使用 lodash 類庫的_.cloneDeep函式、 underscore 中的 _.clone() 函式等第三方庫

2、特定場景一：內建物件型別的深複製

JavaScript 中複製內建物件型別（例如 Date，RegExp 等）的深複製可以使用特定的建構函式來重新建立該物件。

例如，對於 Date 物件，可以使用 new Date(originalDate.getTime()) 來建立一個新的日期物件，其中 originalDate.getTime() 返回原始日期物件的時間戳。

對於 RegExp 物件，可以使用 new RegExp(originalRegExp) 或 new RegExp(originalRegExp.source, originalRegExp.flags) 來建立一個新的正規表示式物件。

下面是一個使用建構函式來複制內建物件型別的深複製示例：


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof Date) {
        copy = new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
        copy = new RegExp(obj);
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這個示例的深複製函式首先檢查當前物件是否為內建物件型別，如果是，則使用相應的建構函式重新建立該物件，否則建立一個普通物件或陣列。然後進行遞迴複製每一個屬性。

需要注意的是，使用建構函式複製內建物件型別只適用於部分內建物件型別，對於其他的內建物件型別，可能需要使用其他的方法來進行復制，或者使用第三方庫來進行復制。

總之，深複製複製內建物件型別需要考慮使用建構函式來重新建立物件，如果需要對這些物件進行深複製操作，可以使用上述方法或其他庫來實現。

3、特定場景二：自定義物件型別的深複製

JavaScript 中自定義物件的深複製可以使用同樣的遞迴方式實現，可以使用 WeakMap 方法。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (obj instanceof MyCustomObject) {
        copy = new MyCustomObject();
    } else if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這個函式首先檢查當前物件是否為自定義物件，如果是，則建立一個新的自定義物件，否則建立一個普通物件或陣列。然後進行遞迴複製每一個屬性。

注意，如果自定義物件中包含迴圈引用，需要使用 WeakMap 來避免出現死迴圈。

4、特定場景三：物件中存在函式或迴圈引用

對於函式，通常會忽略它們，因為函式不能被複制，而是需要重新定義。

對於迴圈引用，可以使用 WeakMap 來儲存已經複製過的物件。每次遇到迴圈引用時，可以檢查 WeakMap 中是否已經有該物件的副本，如果有，則直接使用副本，而不是重新建立。

function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    return copy;
}

這是使用 WeakMap 的一種示例，這個示例的深複製函式遞迴地複製物件，但檢查 WeakMap 中是否已經存在該物件的副本，如果存在則直接使用副本，而不是重新建立。

此外，使用 JSON.parse(JSON.stringify(obj)) 方法會自動忽略函式和迴圈引用，但是會忽略 undefined 以及正規表示式型別的屬性。

還有，還可以使用第三方庫，如 lodash 中的 _.cloneDeep() 函式、 underscore 中的 _.clone() 函式等來實現物件中存在函式或迴圈引用的深複製。

5、特定場景四：物件中有對其他物件的引用或者包含 Symbol 屬性的物件

對於物件中有對其他物件的引用，可以使用 WeakMap 來儲存已經複製過的物件。每次遇到對其他物件的引用時，可以檢查 WeakMap 中是否已經有該物件的副本，如果有，則直接使用副本，而不是重新建立。

對於物件中包含 Symbol 屬性的物件，可以使用 Object.getOwnPropertySymbols() 方法來獲取該物件所有的 Symbol 屬性，然後使用 Object.getOwnPropertyDescriptor() 方法來獲取這些 Symbol 屬性的值，最後將這些值賦給新物件。


function deepCopy(obj) {
    let copiedObjects = new WeakMap();
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (copiedObjects.has(obj)) {
        return copiedObjects.get(obj);
    }
    let copy;
    if (Array.isArray(obj)) {
        copy = [];
    } else {
        copy = {};
    }
    copiedObjects.set(obj, copy);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                copy[key] = deepCopy(obj[key], copiedObjects);
            } else {
                copy[key] = obj[key];
            }
        }
    }
    let symbols = Object.getOwnPropertySymbols(obj);
    symbols.forEach(symbol => {
        let descriptor = Object.getOwnPropertyDescriptor(obj, symbol);
        Object.defineProperty(copy, symbol, descriptor);
    });
    return copy;
}

這是使用 WeakMap 和 Symbol 屬性的一種示例，這個示例的深複製函式首先檢查 WeakMap 中是否已經存在該物件的副本，如果存在則直接使用副本，而不是重新建立。然後使用 Object.getOwnPropertySymbols() 方法獲取該物件所有的 Symbol 屬性，最後使用 Object.getOwnPropertyDescriptor() 方法獲取這些 Symbol 屬性的值，並將這些值賦給新物件。

這種方法可以保證深複製物件中包含的所有屬性，包括對其他物件的引用和 Symbol 屬性，但還是不能複製內建物件型別，這些物件型別是不可列舉的。

三、迴圈引用

JavaScript 中的迴圈引用指的是兩個或多個物件之間相互引用的情況。這種情況通常發生在將一個物件賦給另一個物件的屬性時，同時還將另一個物件賦給第一個物件的屬性。

以下是一個示例：

let obj1 = {};
let obj2 = {};

obj1.prop = obj2;
obj2.prop = obj1;

這樣就會產生一個迴圈引用，因為 obj1 和 obj2 相互引用。

迴圈引用可能導致 JavaScript 引擎無法正確處理記憶體，並導致記憶體洩漏。因此，在編寫 JavaScript 程式碼時需要特別注意避免迴圈引用。如果您需要在兩個物件之間建立關係，可以使用弱引用來避免迴圈引用。

在深複製中遇到迴圈引用就會導致死迴圈，因此需要使用特殊的演算法來解決這個問題。可以使用遞迴演算法和深度優先遍歷來實現深複製，在遍歷過程中跟蹤已經遍歷過的物件，如果遇到迴圈引用就直接返回已經遍歷過的物件的引用。

 

總的來說，在使用淺複製和深複製時，需要根據需求和物件的結構來進行選擇。通常來說，如果需要對物件進行修改並且不希望對原物件造成影響，那麼應該使用深複製。如果只是需要讀取物件中的資料而不需要修改，那麼可以使用淺複製。在實現深複製時，需要特別注意迴圈引用和特殊屬性問題。

相關文章