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);

• 使用遞歸的方式，手動拷貝對象的每一層

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 代碼時需要特別註意避免迴圈引用。如果您需要在兩個對象之間建立關係，可以使用弱引用來避免迴圈引用。

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

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