【JavaScript】深拷贝详解

在JavaScript中，深拷贝是一个常见的操作，它用于创建一个对象（或数组）的完全独立副本。这意味着，如果你对原对象修改属性，深拷贝得到的副本不会受到影响。相对而言，浅拷贝只是复制了对象的引用，因此对原对象的修改会影响到浅拷贝的副本。

深拷贝的实现方式

在JavaScript中，可以有多种方法实现深拷贝，包括使用JSON方法、递归函数、以及现代的structuredClone方法等。下面，我们将逐一介绍这些方法并给出代码示例。

方法一：使用JSON.parse和JSON.stringify

最简单的一种深拷贝方法是利用JSON.stringify和JSON.parse。这种方法将对象序列化为 JSON 字符串，然后再将其解析为新对象。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

// 示例
const original = { name: 'Alice', age: 25, address: { city: 'Beijing' } };
const cloned = deepClone(original);

// 修改原对象
original.address.city = 'Shanghai';

console.log(original.address.city); // Shanghai
console.log(cloned.address.city);    // Beijing

注意：使用这种方法时，无法处理包含函数、日期对象、undefined、正则表达式、Symbol等特殊类型的对象，因为它们在JSON中无法被序列化。

方法二：使用递归函数

如果需要处理更复杂的对象，可以使用递归实现深拷贝。这种方法普遍适用，能够处理大多数数据类型。

function isObject(obj) {
    return obj !== null && typeof obj === 'object';
}

function deepCloneRecursive(target) {
    if (!isObject(target)) {
        return target; // 基本数据类型直接返回
    }

    const clone = Array.isArray(target) ? [] : {}; // 判断目标是数组还是对象

    for (const key in target) {
        if (target.hasOwnProperty(key)) {
            clone[key] = deepCloneRecursive(target[key]); // 递归拷贝
        }
    }

    return clone;
}

// 示例
const original = { name: 'Alice', age: 25, address: { city: 'Beijing' } };
const cloned = deepCloneRecursive(original);

// 修改原对象
original.address.city = 'Shanghai';

console.log(original.address.city); // Shanghai
console.log(cloned.address.city);    // Beijing

方法三：使用structuredClone

从ES2021开始，JavaScript 引入了structuredClone方法，这是一种内置的深拷贝方法，能够处理大多数对象，包括 Date、Map、Set、ArrayBuffer 等。

const original = { name: 'Alice', age: 25, address: { city: 'Beijing' }, date: new Date() };
const cloned = structuredClone(original);

// 修改原对象
original.address.city = 'Shanghai';

console.log(original.address.city); // Shanghai
console.log(cloned.address.city);    // Beijing
console.log(original.date === cloned.date); // false

总结

深拷贝可以帮助我们在开发中避免对象引用带来的意外修改。选择适合的深拷贝方法依赖于具体的需求。如果对象结构简单，使用JSON.stringify和JSON.parse可以快速实现；如果对象结构复杂，可以使用递归方法进行更精细的控制；而structuredClone是最现代、通用的解决方案。了解并掌握这些深拷贝的实现方式，将有助于你更有效地管理 JavaScript 中的数据结构。