当前位置：首页 > 文章列表 > 文章 > 前端 > JS对象深拷贝技巧与方法详解

JS对象深拷贝技巧与方法详解

2025-04-09 13:17:07 0浏览收藏

本文深入探讨了JavaScript对象深拷贝的多种方法及技巧，涵盖了JSON方法、自定义函数以及处理循环引用的高级方法。JSON方法简单易用，但存在局限性，无法处理函数、undefined等类型；自定义函数能处理更多数据类型，但无法处理循环引用；而使用WeakMap记录已拷贝对象的函数则能有效解决循环引用问题，但性能可能会有所下降。文章详细比较了不同方法的优缺点，并结合实际案例分析了深拷贝在性能和复杂数据结构处理方面的挑战，最终为读者选择合适的深拷贝方法提供了指导。

在 JavaScript 中进行深拷贝可以通过以下方法实现：1. 使用 JSON 方法：let copiedObj = JSON.parse(JSON.stringify(originalObj));，但它无法处理函数、undefined、Symbol、循环引用和 Date 对象的类型信息。2. 编写自定义函数：function deepCopy(obj) { ... }，能处理更多数据类型和嵌套结构，但仍无法处理循环引用。3. 使用 Map 记录已拷贝对象的函数：function deepCopyWithCircularReference(obj, hash = new WeakMap()) { ... }，能处理循环引用，但性能可能不如 JSON 方法。

js 怎么对对象进行深拷贝

要在 JavaScript 中对对象进行深拷贝，我们需要理解为什么这是一个重要的操作以及如何正确实现它。深拷贝不仅是简单地复制对象的引用，而是创建一个完全独立的新对象，确保任何对新对象的修改都不会影响原对象。

在 JavaScript 中，对象是引用类型，如果我们简单地使用赋值操作符 = 来复制对象，那么我们实际上只是复制了对象的引用。这意味着原对象和新对象指向同一个内存地址，修改其中一个对象会影响到另一个对象。为了避免这种情况，我们需要进行深拷贝。

让我们来看看如何实现深拷贝，以及在实际应用中需要注意的细节。

首先，我们可以使用 JSON 方法来进行深拷贝，这种方法简单但有一定的局限性：

let originalObj = {
    name: "John",
    age: 30,
    hobbies: ["reading", "swimming"]
};

let copiedObj = JSON.parse(JSON.stringify(originalObj));

这个方法的优点是简单易用，但它有几个明显的缺点：

无法处理函数、undefined、Symbol 等类型
无法处理循环引用
会丢失 Date 对象的类型信息

为了克服这些限制，我们可以编写一个自定义的深拷贝函数：

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

    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if (obj instanceof RegExp) {
        return new RegExp(obj);
    }

    if (Array.isArray(obj)) {
        return obj.map(deepCopy);
    }

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

    return copiedObj;
}

let originalObj = {
    name: "John",
    age: 30,
    hobbies: ["reading", "swimming"],
    address: {
        city: "New York",
        zip: "10001"
    },
    birthDate: new Date('1993-05-15'),
    sayHello: function() {
        console.log("Hello!");
    }
};

let copiedObj = deepCopy(originalObj);

console.log(copiedObj);

这个自定义函数能够处理更多的数据类型，包括 Date 对象、正则表达式、数组，并且能够正确处理对象的嵌套结构。然而，它仍然无法处理循环引用。

处理循环引用是一个更复杂的问题，因为在深拷贝过程中，我们可能会遇到已经处理过的对象。为了解决这个问题，我们可以使用一个 Map 来记录已经拷贝过的对象：

function deepCopyWithCircularReference(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }

    if (obj instanceof RegExp) {
        return new RegExp(obj);
    }

    if (hash.has(obj)) {
        return hash.get(obj);
    }

    let result;
    if (Array.isArray(obj)) {
        result = [];
        hash.set(obj, result);
        result = obj.map(item => deepCopyWithCircularReference(item, hash));
    } else {
        result = {};
        hash.set(obj, result);
        for (let key in obj) {
            if (obj.hasOwnProperty(key)) {
                result[key] = deepCopyWithCircularReference(obj[key], hash);
            }
        }
    }

    return result;
}

let originalObj = {
    name: "John",
    age: 30,
    hobbies: ["reading", "swimming"],
    address: {
        city: "New York",
        zip: "10001"
    },
    birthDate: new Date('1993-05-15'),
    sayHello: function() {
        console.log("Hello!");
    }
};

originalObj.self = originalObj; // 循环引用

let copiedObj = deepCopyWithCircularReference(originalObj);

console.log(copiedObj);

这个版本的深拷贝函数能够处理循环引用，确保不会陷入无限循环。

在实际应用中，深拷贝的性能也是一个需要考虑的因素。自定义函数虽然功能强大，但可能在处理大型对象时性能不如 JSON 方法。为了在功能和性能之间找到平衡，我们可以根据具体需求选择不同的方法。

最后，分享一下我在实际项目中遇到的一些经验：