[Medium] Deep Clone
1. What is Deep Clone?
什么是 Deep Clone？
**深拷贝（Deep Clone）**是指创建一个新对象，并且递归地复制原始对象及其所有嵌套对象和数组的所有属性。深拷贝后的对象与原始对象完全独立，修改其中一个不会影响另一个。
浅拷贝 vs 深拷贝
浅拷贝（Shallow Clone）：只复制对象的第一层属性，嵌套对象仍然共享引用。
// 浅拷贝示例
const original = {
name: 'John',
address: {
city: 'Taipei',
country: 'Taiwan',
},
};
const shallowCopy = { ...original };
shallowCopy.address.city = 'Kaohsiung';
console.log(original.address.city); // 'Kaohsiung' ❌ 原始对象也被修改了
深拷贝（Deep Clone）：递归复制所有层级的属性，完全独立。
// 深拷贝示例
const original = {
name: 'John',
address: {
city: 'Taipei',
country: 'Taiwan',
},
};
const deepCopy = deepClone(original);
deepCopy.address.city = 'Kaohsiung';
console.log(original.address.city); // 'Taipei' ✅ 原始对象不受影响
2. Implementation Methods
实现方法
方法 1：使用 JSON.parse 和 JSON.stringify
优点：简单快速 缺点：无法处理函数、undefined、Symbol、Date、RegExp、Map、Set 等特殊类型
function deepClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
// 测试
const original = {
name: 'John',
age: 30,
address: {
city: 'Taipei',
country: 'Taiwan',
},
hobbies: ['reading', 'coding'],
};
const cloned = deepClone(original);
cloned.address.city = 'Kaohsiung';
cloned.hobbies.push('swimming');
console.log(original.address.city); // 'Taipei' ✅
console.log(original.hobbies); // ['reading', 'coding'] ✅
限制：
const obj = {
date: new Date(),
func: function () {},
undefined: undefined,
symbol: Symbol('test'),
regex: /test/g,
};
const cloned = deepClone(obj);
console.log(cloned.date); // {} ❌ Date 变成空对象
console.log(cloned.func); // undefined ❌ 函数丢失
console.log(cloned.undefined); // undefined ✅ 但 JSON.stringify 会移除
console.log(cloned.symbol); // undefined ❌ Symbol 丢失
console.log(cloned.regex); // {} ❌ RegExp 变成空对象
方法 2：递归实现（处理基本类型和对象）
function deepClone(obj) {
// 处理 null 和基本类型
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理 Date
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 处理 RegExp
if (obj instanceof RegExp) {
return new RegExp(obj);
}
// 处理数组
if (Array.isArray(obj)) {
return obj.map((item) => deepClone(item));
}
// 处理对象
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key]);
}
}
return cloned;
}
// 测试
const original = {
name: 'John',
date: new Date(),
regex: /test/g,
hobbies: ['reading', 'coding'],
address: {
city: 'Taipei',
},
};
const cloned = deepClone(original);
cloned.date.setFullYear(2025);
cloned.hobbies.push('swimming');
console.log(original.date.getFullYear()); // 2024 ✅ 不受影响
console.log(original.hobbies); // ['reading', 'coding'] ✅
方法 3：完整实现（处理 Map、Set、Symbol 等）
function deepClone(obj, map = new WeakMap()) {
// 处理 null 和基本类型
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理循环引用
if (map.has(obj)) {
return map.get(obj);
}
// 处理 Date
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 处理 RegExp
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags);
}
// 处理 Map
if (obj instanceof Map) {
const clonedMap = new Map();
map.set(obj, clonedMap);
obj.forEach((value, key) => {
clonedMap.set(deepClone(key, map), deepClone(value, map));
});
return clonedMap;
}
// 处理 Set
if (obj instanceof Set) {
const clonedSet = new Set();
map.set(obj, clonedSet);
obj.forEach((value) => {
clonedSet.add(deepClone(value, map));
});
return clonedSet;
}
// 处理数组
if (Array.isArray(obj)) {
const clonedArray = [];
map.set(obj, clonedArray);
obj.forEach((item) => {
clonedArray.push(deepClone(item, map));
});
return clonedArray;
}
// 处理对象
const cloned = {};
map.set(obj, cloned);
// 处理 Symbol 属性
const symbolKeys = Object.getOwnPropertySymbols(obj);
const stringKeys = Object.keys(obj);
// 复制普通属性
stringKeys.forEach((key) => {
cloned[key] = deepClone(obj[key], map);
});
// 复制 Symbol 属性
symbolKeys.forEach((symbolKey) => {
cloned[symbolKey] = deepClone(obj[symbolKey], map);
});
return cloned;
}
// 测试
const symbolKey = Symbol('test');
const original = {
name: 'John',
[symbolKey]: 'symbol value',
date: new Date(),
map: new Map([['key', 'value']]),
set: new Set([1, 2, 3]),
hobbies: ['reading', 'coding'],
};
const cloned = deepClone(original);
console.log(cloned[symbolKey]); // 'symbol value' ✅
console.log(cloned.map.get('key')); // 'value' ✅
console.log(cloned.set.has(1)); // true ✅
方法 4：处理循环引用
function deepClone(obj, map = new WeakMap()) {
// 处理 null 和基本类型
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理循环引用
if (map.has(obj)) {
return map.get(obj);
}
// 处理 Date
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 处理 RegExp
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags);
}
// 处理数组
if (Array.isArray(obj)) {
const clonedArray = [];
map.set(obj, clonedArray);
obj.forEach((item) => {
clonedArray.push(deepClone(item, map));
});
return clonedArray;
}
// 处理对象
const cloned = {};
map.set(obj, cloned);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key], map);
}
}
return cloned;
}
// 测试循环引用
const original = {
name: 'John',
};
original.self = original; // 循环引用
const cloned = deepClone(original);
console.log(cloned.self === cloned); // true ✅ 正确处理循环引用
console.log(cloned !== original); // true ✅ 是不同的对象
3. Common Interview Questions
常见面试题目
题目 1：基本深拷贝实现
请实现一个 deepClone 函数，能够深拷贝对象和数组。
点击查看答案
function deepClone(obj) {
// 处理 null 和基本类型
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理 Date
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 处理 RegExp
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags);
}
// 处理数组
if (Array.isArray(obj)) {
return obj.map((item) => deepClone(item));
}
// 处理对象
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key]);
}
}
return cloned;
}
// 测试
const original = {
name: 'John',
age: 30,
address: {
city: 'Taipei',
country: 'Taiwan',
},
hobbies: ['reading', 'coding'],
};
const cloned = deepClone(original);
cloned.address.city = 'Kaohsiung';
cloned.hobbies.push('swimming');
console.log(original.address.city); // 'Taipei' ✅
console.log(original.hobbies); // ['reading', 'coding'] ✅
题目 2：处理循环引用
请实现一个能够处理循环引用的 deepClone 函数。
点击查看答案
function deepClone(obj, map = new WeakMap()) {
// 处理 null 和基本类型
if (obj === null || typeof obj !== 'object') {
return obj;
}
// 处理循环引用
if (map.has(obj)) {
return map.get(obj);
}
// 处理 Date
if (obj instanceof Date) {
return new Date(obj.getTime());
}
// 处理 RegExp
if (obj instanceof RegExp) {
return new RegExp(obj.source, obj.flags);
}
// 处理数组
if (Array.isArray(obj)) {
const clonedArray = [];
map.set(obj, clonedArray);
obj.forEach((item) => {
clonedArray.push(deepClone(item, map));
});
return clonedArray;
}
// 处理对象
const cloned = {};
map.set(obj, cloned);
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key], map);
}
}
return cloned;
}
// 测试循环引用
const original = {
name: 'John',
};
original.self = original; // 循环引用
const cloned = deepClone(original);
console.log(cloned.self === cloned); // true ✅
console.log(cloned !== original); // true ✅
关键点：
- 使用
WeakMap来追踪已经处理过的对象 - 在创建新对象前先检查是否已经存在于 map 中
- 如果存在，直接返回 map 中的引用，避免无限递归
题目 3：JSON.parse 和 JSON.stringify 的限制
请说明使用 JSON.parse(JSON.stringify()) 进行深拷贝的限制，并提供解决方案。
点击查看答案
限制：
-
无法处理函数
const obj = { func: function () {} };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned.func); // undefined ❌ -
无法处理 undefined
const obj = { value: undefined };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned.value); // undefined（但属性会被移除）❌ -
无法处理 Symbol
const obj = { [Symbol('key')]: 'value' };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned); // {} ❌ Symbol 属性丢失 -
Date 变成字符串
const obj = { date: new Date() };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned.date); // "2024-01-01T00:00:00.000Z" ❌ 变成字符串 -
RegExp 变成空对象
const obj = { regex: /test/g };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned.regex); // {} ❌ 变成空对象 -
无法处理 Map、Set
const obj = { map: new Map([['key', 'value']]) };
const cloned = JSON.parse(JSON.stringify(obj));
console.log(cloned.map); // {} ❌ 变成空对象 -
无法处理循环引用
const obj = { name: 'John' };
obj.self = obj;
JSON.parse(JSON.stringify(obj)); // ❌ 报错：Converting circular structure to JSON
解决方案：使用递归实现，针对不同类型进行特殊处理。
4. Best Practices
最佳实践
推荐做法
// 1. 根据需求选择合适的方法
// 如果只需要处理基本对象和数组，使用简单的递归实现
function simpleDeepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj.getTime());
if (Array.isArray(obj)) return obj.map((item) => simpleDeepClone(item));
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = simpleDeepClone(obj[key]);
}
}
return cloned;
}
// 2. 如果需要处理复杂类型，使用完整实现
function completeDeepClone(obj, map = new WeakMap()) {
// ... 完整实现
}
// 3. 使用 WeakMap 处理循环引用
// WeakMap 不会阻止垃圾回收，适合用于追踪对象引用
避免的做法
// 1. 不要过度使用 JSON.parse(JSON.stringify())
// ❌ 会丢失函数、Symbol、Date 等特殊类型
const cloned = JSON.parse(JSON.stringify(obj));
// 2. 不要忘记处理循环引用
// ❌ 会导致栈溢出
function deepClone(obj) {
const cloned = {};
for (let key in obj) {
cloned[key] = deepClone(obj[key]); // 无限递归
}
return cloned;
}
// 3. 不要忘记处理 Date、RegExp 等特殊类型
// ❌ 这些类型需要特殊处理
5. Interview Summary
面试总结
快速记忆
深拷贝：
- 定义：递归复制对象及其所有嵌套属性，完全独立
- 方法：递归实现、JSON.parse(JSON.stringify())、structuredClone()
- 关键：处理特殊类型、循环引用、Symbol 属性
实现要点：
- 处理基本类型和 null
- 处理 Date、RegExp 等特殊对象
- 处理数组和对象
- 处理循环引用（使用 WeakMap）
- 处理 Symbol 属性
面试回答示例
Q: 请实现一个 Deep Clone 函数。
"深拷贝是指创建一个完全独立的新对象，递归复制所有嵌套属性。我的实现会先处理基本类型和 null，然后针对 Date、RegExp、数组、对象等不同类型进行特殊处理。为了处理循环引用，我会使用 WeakMap 来追踪已经处理过的对象。对于 Symbol 属性，我会使用 Object.getOwnPropertySymbols 来获取并复制。这样可以确保深拷贝后的对象与原始对象完全独立，修改其中一个不会影响另一个。"
Q: JSON.parse(JSON.stringify()) 有什么限制？
"这个方法的主要限制包括：1) 无法处理函数，函数会被移除；2) 无法处理 undefined 和 Symbol，这些属性会被忽略；3) Date 对象会变成字符串；4) RegExp 会变成空对象；5) 无法处理 Map、Set 等特殊数据结构；6) 无法处理循环引用，会报错。如果需要处理这些特殊情况，应该使用递归实现的方式。"