Javascript中的深拷贝详解

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

什么是深拷贝？

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

浅拷贝与深拷贝的区别

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

javascript">// 浅拷贝示例
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()

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

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

优点：

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

缺点：

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

2. 递归实现

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

javascript">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. 使用第三方库

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

javascript">// 使用 Lodash
const _ = require('lodash');
const deepCopy = _.cloneDeep(original);// 使用 structuredClone (新特性)
const deepCopy = structuredClone(original);

处理特殊情况

1. 循环引用

javascript">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. 特殊类型的处理

javascript">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;
}