当前位置：首页 > article >正文

Javascript中的深拷贝详解

article 2025/2/22 6:25:29

在 Javascript 开发中，深拷贝（Deep Clone）是一个经常遇到的问题。本文将详细介绍深拷贝的概念、实现方法以及注意事项。

什么是深拷贝？

在 Javascript 中，数据类型分为基本类型（如 Number、String、Boolean 等）和引用类型（如 Object、Array 等）。当我们复制引用类型数据时，如果仅仅进行浅拷贝，那么新变量和原变量会指向同一个内存地址，导致其中一个变量的修改会影响另一个变量。而深拷贝则是创建一个完全独立的副本，两个变量互不影响。

浅拷贝与深拷贝的区别

让我们通过一个简单的例子来理解：

// 浅拷贝示例
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 3;
console.log(original.b.c); // 输出: 3

// 深拷贝示例
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 4;
console.log(original.b.c); // 输出: 3

常见的深拷贝实现方法

1. JSON.parse() + JSON.stringify()

这是最简单的深拷贝方法：

const deepClone = obj => JSON.parse(JSON.stringify(obj));

优点：

实现简单
可以处理嵌套对象

缺点：

无法处理函数、undefined、Symbol
无法处理循环引用
会丢失对象的原型链

2. 递归实现

一个基础的递归实现方案：

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

    const clone = Array.isArray(obj) ? [] : {};
    
    for (let key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    
    return clone;
}

3. 使用第三方库

在实际项目中，我们常常使用成熟的第三方库来实现深拷贝：

// 使用 Lodash
const _ = require('lodash');
const deepCopy = _.cloneDeep(original);

// 使用 structuredClone (新特性)
const deepCopy = structuredClone(original);

处理特殊情况

1. 循环引用

function deepCloneWithMap(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 (Object.prototype.hasOwnProperty.call(obj, key)) {
            clone[key] = deepCloneWithMap(obj[key], hash);
        }
    }
    
    return clone;
}

2. 特殊类型的处理

function complexDeepClone(obj, hash = new WeakMap()) {
    // 处理 null 和非对象
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }
    
    // 处理日期对象
    if (obj instanceof Date) {
        return new Date(obj);
    }
    
    // 处理正则表达式
    if (obj instanceof RegExp) {
        return new RegExp(obj);
    }
    
    // 处理循环引用
    if (hash.has(obj)) {
        return hash.get(obj);
    }
    
    const clone = Array.isArray(obj) ? [] : {};
    hash.set(obj, clone);
    
    // 处理可枚举属性
    Reflect.ownKeys(obj).forEach(key => {
        clone[key] = complexDeepClone(obj[key], hash);
    });
    
    return clone;
}