JavaScript 如何实现深拷贝

在 JavaScript 中进行深拷贝是一个常见但重要的操作，因为它决定了我们如何处理复杂对象的副本，确保不改变原对象。在处理对象或数组时，深拷贝的概念尤为重要，因为浅拷贝只复制对象的引用，导致对副本的修改会影响到原对象。而深拷贝则是创建对象的一个全新的副本，确保任何修改都只会影响副本，不会影响到原始数据。

为什么深拷贝很重要？

在真实的开发场景中，假设我们正在开发一个 web 应用程序，应用中需要频繁地更新状态。假如有一个全局状态对象 userProfile，它存储了用户的个人信息和偏好设置。每当用户更改某些设置时，我们不希望这些更改直接影响到其他部分正在使用的同一个 userProfile 对象，而是希望基于当前状态生成一个新的副本供更新使用。这种情况下，深拷贝显得尤为重要。

深拷贝 vs 浅拷贝

在 JavaScript 中，浅拷贝只会复制对象的最外层属性，而不会递归复制嵌套的对象。举个例子：

let obj1 = { name: 'Alice', address: { city: 'New York' } };
let obj2 = Object.assign({}, obj1);

obj2.name = 'Bob';
obj2.address.city = 'Los Angeles';

console.log(obj1.name); // Alice
console.log(obj1.address.city); // Los Angeles (因为浅拷贝)

在这个例子中，虽然 obj2 是 obj1 的副本，修改 obj2.name 并没有影响 obj1.name。但修改嵌套对象 address.city 的值时，obj1 和 obj2 的 address 引用仍然指向同一个对象，因此修改了 obj2 的地址也影响了 obj1。这就是浅拷贝的行为。要避免这个问题，我们就需要使用深拷贝。

实现深拷贝的方法

在 JavaScript 中，有几种常见的深拷贝实现方法，每种方法都有其优缺点。

1. JSON 方法

这是最简单的方法之一，适用于只包含可序列化数据的对象。通过 JSON.stringify() 将对象转换为 JSON 字符串，然后再通过 JSON.parse() 将其解析回对象：

let obj1 = { name: 'Alice', address: { city: 'New York' } };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.city = 'Los Angeles';

console.log(obj1.address.city); // New York (深拷贝)

这种方法的优点是简单直接，并且能够很好地处理大多数普通对象。但是它有一些限制：

• 无法处理函数、undefined、Date、Map、Set 等特殊对象。
• 如果对象中有循环引用（即对象的某个属性引用自身），会导致 JSON.stringify() 抛出错误。

2. 递归实现

为了克服 JSON 方法的局限性，我们可以手动实现一个递归的深拷贝函数。这个函数会检查对象的每一个属性，如果属性是对象，它会递归地进行拷贝：

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

    let copy = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]);
        }
    }

    return copy;
}

let obj1 = { name: 'Alice', address: { city: 'New York' }, hobbies: ['reading', 'travelling'] };
let obj2 = deepClone(obj1);

obj2.address.city = 'Los Angeles';
obj2.hobbies.push('coding');

console.log(obj1.address.city); // New York
console.log(obj1.hobbies); // ['reading', 'travelling'] (深拷贝成功)

这种递归实现方法能够处理嵌套对象和数组，确保每一层的数据都被拷贝。然而，它仍然无法处理函数和特殊对象（例如 Date、Map 等），因此在实际应用中还需要进一步完善。

3. 使用第三方库 Lodash

为了简化深拷贝的实现并解决特殊对象的问题，许多开发者使用像 Lodash 这样的库。Lodash 提供了一个名为 _.cloneDeep() 的函数，它可以处理大多数复杂对象。

let _ = require('lodash');

let obj1 = { name: 'Alice', address: { city: 'New York' }, birthdate: new Date() };
let obj2 = _.cloneDeep(obj1);

obj2.address.city = 'Los Angeles';
obj2.birthdate.setFullYear(2000);

console.log(obj1.address.city); // New York
console.log(obj1.birthdate.getFullYear()); // 2023 (深拷贝成功)

Lodash 的 cloneDeep 函数不仅支持基本对象和数组，还能正确处理 Date、Map、Set 等复杂数据结构，因此在许多实际项目中，开发者更倾向于使用这个库来处理深拷贝。

深拷贝的实际应用案例

在 web 应用开发中，深拷贝经常用于状态管理。假设我们在开发一个购物车系统，每当用户添加或删除商品时，我们希望保持原始的购物车对象不变，以便支持“撤销”操作。这种情况下，每次修改购物车时都需要创建购物车对象的一个深拷贝。

假设有一个初始的购物车状态 cart：

let cart = {
    user: 'Alice',
    items: [
        { productId: 1, productName: 'Laptop', quantity: 1 },
        { productId: 2, productName: 'Mouse', quantity: 2 }
    ]
};

当用户增加一个新商品时，我们希望生成一个新的购物车对象，而不是直接修改 cart 对象。我们可以使用深拷贝来实现这个功能：

function addItemToCart(cart, newItem) {
    let newCart = deepClone(cart);
    newCart.items.push(newItem);
    return newCart;
}

let newItem = { productId: 3, productName: 'Keyboard', quantity: 1 };
let updatedCart = addItemToCart(cart, newItem);

console.log(cart.items.length); // 2 (原始购物车没有改变)
console.log(updatedCart.items.length); // 3 (深拷贝成功)

在这个场景中，通过深拷贝，我们能够确保原始的购物车状态保持不变，便于后续进行操作的回滚或撤销。

注意事项

尽管深拷贝在许多场景中非常有用，但它并非总是最佳选择，特别是在处理非常大的对象时，深拷贝的性能可能会成为一个瓶颈。在处理性能敏感的应用时，我们需要权衡深拷贝的必要性，并考虑其他优化策略，例如只拷贝需要修改的部分数据。

另一个需要考虑的点是对象的复杂性。如果对象中包含大量复杂的数据类型或循环引用，直接进行深拷贝可能会引发一些意想不到的问题。因此，开发者需要根据具体情况选择合适的拷贝策略。

太长不看版

深拷贝是 JavaScript 开发中一个非常重要的技术，在处理复杂数据结构时，它能够帮助我们避免副作用和不必要的数据修改。虽然有多种实现方法，每种方法都有其适用场景和局限性，在实际开发中，我们需要根据具体需求选择合适的实现方式。

对于简单对象，JSON.stringify() 和 JSON.parse() 是一种简便的方法。而对于复杂的数据结构，递归实现或使用第三方库如 Lodash 会是更可靠的选择。