博客站

在 JavaScript 中，当你复制一个对象时，如果不使用正确的方法，新对象和原对象之间可能会存在引用依赖。这意味着新对象中的属性如果是对象类型（如数组、对象等），那么它们仍然会引用相同的内存地址，导致对新对象的修改会影响到原对象。

为了避免这种情况，你可以使用以下几种方法来深拷贝对象：

1. 使用 JSON.parse 和 JSON.stringify

这是最简单的方法，但有一些限制（例如，不能处理函数、undefined、NaN、Infinity、循环引用等）。

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = JSON.parse(JSON.stringify(originalObject));

copiedObject.b.c = 3;
console.log(originalObject.b.c); // 输出 2，说明两个对象已经分离

2. 使用递归拷贝函数

你可以编写一个递归函数来手动拷贝对象的每个属性。这种方法更复杂，但可以处理更多的边缘情况。

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (Array.isArray(obj)) {
        const copy = [];
        for (let i = 0; i < obj.length; i++) {
            copy[i] = deepCopy(obj[i]);
        }
        return copy;
    }

    const copy = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }
    return copy;
}

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = deepCopy(originalObject);

copiedObject.b.c = 3;
console.log(originalObject.b.c); // 输出 2，说明两个对象已经分离

3. 使用 Lodash 库中的 _.cloneDeep 方法

Lodash 是一个流行的 JavaScript 工具库，它提供了许多实用的函数，其中 _.cloneDeep 可以用来进行深拷贝。

首先，你需要安装 Lodash：

npm install lodash

然后，你可以这样使用：

const _ = require('lodash');

const originalObject = { a: 1, b: { c: 2 } };
const copiedObject = _.cloneDeep(originalObject);

copiedObject.b.c = 3;
console.log(originalObject.b.c); // 输出 2，说明两个对象已经分离

4. 使用结构化克隆算法（例如在 Web Workers 中）

在 Web Workers 或者其他支持结构化克隆的环境中，你可以利用这种机制来深拷贝对象。例如，通过传递对象给 Web Worker 并立即接收回来，可以实现深拷贝。不过这种方法主要用于特定场景，不太常用。

// 注意：这种方法在浏览器环境中可能涉及到 Web Worker 的使用，这里只是概念性描述。

选择哪种方法取决于你的具体需求和环境。如果对象结构比较简单且没有特殊类型（如函数、undefined、循环引用等），使用 JSON.parse 和 JSON.stringify 是最简单的方法。对于更复杂的情况，编写递归拷贝函数或使用 Lodash 可能是更好的选择。