js 怎么深拷贝

JS 深拷贝的方法有多种选择，包括：使用 JSON 方法、递归遍历对象、使用第三方库、结构化克隆算法。其中，使用 JSON 方法是最常见且简单的方式，但它有一些限制。递归遍历对象则是更通用且灵活的方法。接下来将详细介绍递归遍历对象的方式。

一、JSON 方法

使用 JSON.stringify 和 JSON.parse 可以实现对象的深拷贝。该方法简单且快速，但它有一些局限性，例如它不能拷贝函数、undefined、Date 对象等。

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

二、递归遍历对象

递归遍历对象是一种更通用的方法，可以处理更多复杂类型的数据。可以创建一个函数，通过递归地遍历对象的每个属性，来实现深拷贝。

function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    if (obj instanceof Date) {
        return new Date(obj.getTime());
    }
    if (obj instanceof Array) {
        const arrCopy = [];
        obj.forEach((item, index) => {
            arrCopy[index] = deepCopy(item);
        });
        return arrCopy;
    }
    if (obj instanceof Object) {
        const objCopy = {};
        Object.keys(obj).forEach(key => {
            objCopy[key] = deepCopy(obj[key]);
        });
        return objCopy;
    }
    throw new Error('Unable to copy object!');
}

三、使用第三方库

有很多第三方库可以帮助实现深拷贝，例如 Lodash 提供了 _.cloneDeep 方法，非常方便。

const _ = require('lodash');
const originalObject = { a: 1, b: { c: 2 } };
const deepCopiedObject = _.cloneDeep(originalObject);

四、结构化克隆算法

浏览器的 structuredClone API 是一种原生的深拷贝方式，它可以处理大部分复杂类型的数据，包括循环引用。

const originalObject = { a: 1, b: { c: 2 } };
const deepCopiedObject = structuredClone(originalObject);

五、深拷贝的应用场景

深拷贝在实际开发中有很多应用场景，特别是在处理复杂的数据结构时。例如在状态管理中，深拷贝可以避免数据的非预期修改，确保数据的独立性。

1、避免数据共享导致的问题

在项目管理中，特别是使用研发项目管理系统PingCode和通用项目协作软件Worktile时，深拷贝可以避免不同模块之间的数据共享导致的问题。例如，在更新任务状态时，可以深拷贝任务数据，确保更新不会影响到其他模块的数据。

const task = { id: 1, status: 'pending', details: { description: 'Task 1' } };
const updatedTask = deepCopy(task);
updatedTask.status = 'completed';

2、处理嵌套数据结构

在处理嵌套的数据结构时，例如树形结构的菜单，深拷贝可以确保每个节点的独立性，避免修改一个节点时影响到其他节点。

const menu = {
    id: 1,
    title: 'Main Menu',
    items: [
        { id: 2, title: 'Sub Menu 1' },
        { id: 3, title: 'Sub Menu 2' }
    ]
};
const copiedMenu = deepCopy(menu);
copiedMenu.items[0].title = 'Updated Sub Menu 1';

六、深拷贝的注意事项

1、性能问题

深拷贝操作通常比浅拷贝要慢，因为它需要遍历整个对象的所有属性。对于大型数据结构，深拷贝可能会带来性能问题。因此，在实际开发中，需要根据具体情况选择合适的拷贝方式。

2、循环引用

在处理循环引用的对象时，递归的方法可能会导致无限循环。可以使用结构化克隆算法或第三方库来处理这种情况。

const obj = {};
obj.self = obj;
const deepCopiedObj = structuredClone(obj); // 处理循环引用

七、总结

深拷贝是 JavaScript 编程中的一个重要技巧，特别是在处理复杂数据结构时。使用 JSON 方法、递归遍历对象、使用第三方库、结构化克隆算法是实现深拷贝的几种常见方法。开发者可以根据具体需求和数据结构的复杂程度，选择合适的深拷贝方法。同时，在实际开发中，应该注意深拷贝的性能问题和循环引用问题，以确保代码的高效性和稳定性。