JavaScript 如何实现深拷贝

最新推荐文章于 2024-09-16 08:47:17 发布

西门吹雪在编程

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量584

点赞数 5

分类专栏： JavaScript 文章标签： javascript 前端 linux

本文链接：https://blog.csdn.net/m0_55213370/article/details/142281281

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在 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 (深拷贝成功)