深拷贝和浅拷贝

3. 使用第三方库

// Lodash
import _ from "lodash";
const cloned = _.cloneDeep(obj);

// jQuery
const cloned = jQuery.extend(true, {}, obj);

// structuredClone（现代浏览器原生API）
const cloned = structuredClone(obj);

4. structuredClone API（现代浏览器）

const original = {
    name: "Alice",
    address: { city: "Paris" },
    date: new Date(),
    array: [1, 2, 3],
    map: new Map([["key", "value"]]),
    set: new Set([1, 2, 3]),
    // 注意：函数、DOM节点、原型链等不能复制
};

const cloned = structuredClone(original);
console.log(cloned.date instanceof Date); // true
console.log(cloned.map instanceof Map); // true

// 支持循环引用
original.self = original;
const clonedWithCycle = structuredClone(original);
console.log(clonedWithCycle.self === clonedWithCycle); // true

特殊情况的处理

1. 循环引用

const obj = { a: 1 };
obj.self = obj;

// 正确处理循环引用的深拷贝
function cloneWithCycle(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== "object") return obj;
    if (hash.has(obj)) return hash.get(obj);

    const clone = Array.isArray(obj) ? [] : {};
    hash.set(obj, clone);

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = cloneWithCycle(obj[key], hash);
        }
    }

    return clone;
}

2. 函数拷贝

// 函数拷贝（通常是引用，但可以创建新函数）
function cloneFunction(func) {
    // 方法1：使用 Function 构造函数
    const funcString = func.toString();
    const clone = new Function("return " + funcString)();

    // 复制属性
    for (let key in func) {
        if (func.hasOwnProperty(key)) {
            clone[key] = func[key];
        }
    }

    return clone;
}

// 使用示例
function originalFunc(x) {
    return x * 2;
}
originalFunc.customProp = "test";

const clonedFunc = cloneFunction(originalFunc);
console.log(clonedFunc(5)); // 10
console.log(clonedFunc.customProp); // 'test'

3. 性能优化

// 使用缓存提高性能
function deepCloneOptimized(obj, cache = new WeakMap()) {
    // 基础类型直接返回
    if (obj === null || typeof obj !== "object") {
        return obj;
    }

    // 检查缓存
    if (cache.has(obj)) {
        return cache.get(obj);
    }

    // 获取构造器
    const Constructor = obj.constructor;

    // 处理特殊类型
    switch (Constructor) {
        case Date:
            return new Date(obj);
        case RegExp:
            return new RegExp(obj);
        case Map:
            return new Map(Array.from(obj, ([k, v]) => [k, deepCloneOptimized(v, cache)]));
        case Set:
            return new Set(Array.from(obj, v => deepCloneOptimized(v, cache)));
        case Array:
        case Object:
            const clone = new Constructor();
            cache.set(obj, clone);

            // 普通属性和Symbol属性
            const allKeys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
            for (let key of allKeys) {
                clone[key] = deepCloneOptimized(obj[key], cache);
            }

            return clone;
        default:
            // 处理其他构造函数创建的对象
            return obj;
    }
}

实践应用场景

1. 什么时候用浅拷贝？

// 场景1：修改顶层属性，保持嵌套对象引用
const config = {
    apiUrl: "https://api.example.com",
    options: { timeout: 5000, retry: 3 }, // 共享给所有副本
};

const userConfig = { ...config, userId: 123 };
// userConfig.options 和 config.options 是同一个对象

// 场景2：性能敏感，对象简单无嵌套
const simpleObj = { x: 1, y: 2 };
const copy = { ...simpleObj }; // 浅拷贝足够

2. 什么时候用深拷贝？

// 场景1：状态管理（React/Vue等）
const initialState = {
    user: {
        profile: { name: "John", age: 30 },
        settings: { theme: "dark" },
    },
    cart: [{ id: 1, quantity: 2 }],
};

function reducer(state, action) {
    switch (action.type) {
        case "UPDATE_PROFILE":
            // 需要深拷贝来保证不变性
            return deepClone(state);
        default:
            return state;
    }
}

// 场景2：撤销/重做功能
class HistoryManager {
    constructor() {
        this.history = [];
        this.currentIndex = -1;
    }

    pushState(state) {
        // 保存深拷贝的状态
        this.history = this.history.slice(0, this.currentIndex + 1);
        this.history.push(deepClone(state));
        this.currentIndex++;
    }

    undo() {
        if (this.currentIndex > 0) {
            this.currentIndex--;
            return deepClone(this.history[this.currentIndex]);
        }
    }
}

3. 性能对比

// 测试不同拷贝方法的性能
const testObj = createDeepObject(5, 5); // 5层深度，每层5个属性

console.time("JSON方法");
const jsonCopy = JSON.parse(JSON.stringify(testObj));
console.timeEnd("JSON方法");

console.time("递归深拷贝");
const recursiveCopy = deepClone(testObj);
console.timeEnd("递归深拷贝");

console.time("structuredClone");
const nativeCopy = structuredClone(testObj);
console.timeEnd("structuredClone");

// 选择建议：
// 1. 简单数据（可序列化） -> JSON方法（最快）
// 2. 复杂数据+现代浏览器 -> structuredClone
// 3. 需要特殊类型支持 -> 自定义深拷贝

最佳实践总结

1. 根据需求选择：

• 如果只有一层结构，用浅拷贝

• 如果有嵌套且需要独立，用深拷贝

2. 根据数据类型选择：

• 可序列化数据：JSON.parse(JSON.stringify())
• 现代浏览器：structuredClone()
• Node.js 或需要特殊类型：自定义深拷贝函数

3. 注意性能：

• 深拷贝比浅拷贝慢得多
• 大数据量时考虑优化策略

4. 处理边界情况：

• 循环引用
• 特殊对象（Date、RegExp 等）
• Symbol 属性
• 原型链继承

5. 使用工具库：

• 生产环境推荐使用 lodash.cloneDeep
• 避免重复造轮子，除非有特殊需求