JavaScript Deep Clone - Stellar Observer Protocol

915 字

5 分钟

JavaScript Deep Clone

2025-08-17

Code

前端

/

JavaScript

/

手写代码

/

数据处理

题目描述#

实现一个健壮的深拷贝函数，要求：

支持所有 JavaScript 数据类型（基础类型/对象/数组/Map/Set等）
处理循环引用问题（对象相互引用）
保留对象原型链关系
正确处理特殊对象（Date, RegExp 等）
处理 Symbol 类型属性
可配置克隆深度（可选）

要求完整实现深拷贝逻辑，并通过测试用例验证。

解题思路#

类型判断：区分基础类型和引用类型
特殊对象处理：Date/RegExp 等创建新实例
原型继承：使用 Object.create 保持原型链
循环引用检测：使用 WeakMap 存储已拷贝对象
递归拷贝：深度遍历对象属性
容器对象处理：Map/Set/Array 单独处理
Symbol 支持：遍历 Symbol 类型属性

关键洞察#

循环引用处理：WeakMap 存储已拷贝对象防止无限递归
原型保持：Object.getPrototypeOf + Object.create 保持原型链
特殊对象克隆：Date/RegExp 等需要重建实例
容器对象区分：Map/Set/Array 需要特殊处理
Symbol 支持：Object.getOwnPropertySymbols 获取 Symbol 属性
性能优化：WeakMap 自动释放内存避免泄漏

代码流程#

flowchart TD 
	A[开始克隆] --> B{类型判断} 
	B -->|基础类型| C[直接返回] 
	B -->|引用类型| D[检查缓存] 
	D -->|已存在| E[返回缓存值] 
	D -->|未缓存| F[特殊对象处理] 
	F -->|Date/RegExp等| G[创建新实例] 
	F -->|Map/Set| H[遍历并递归克隆] 
	F -->|Array/Object| I[创建空对象] 
	I --> J[遍历所有属性] 
	J --> K[递归克隆属性值] 
	K --> L[存入缓存] 
	L --> M[返回克隆对象]

代码实现#

1
function deepClone(target, map = new WeakMap(), depth = Infinity) {
2
// 处理基础类型和函数
3
  if (target === null || typeof target !== 'object' || depth < 0) {
4
    return target;
5
  }
6

7
  // 处理循环引用
8
  if (map.has(target)) {
9
    return map.get(target);
10
  }
11

12
  // 处理特殊对象
13
  if (target instanceof Date) return new Date(target);
14
  if (target instanceof RegExp) return new RegExp(target);
15

16
  // 获取原型对象
17
  const prototype = Object.getPrototypeOf(target);
18
  const clone = Array.isArray(target)
19
    ? []
20
    : prototype === Object.prototype
21
      ? Object.create(prototype)
22
      : Object.create(prototype);
23

24
  // 缓存已拷贝对象
25
  map.set(target, clone);
26

27
  // 处理 Map
28
  if (target instanceof Map) {
29
    const clonedMap = new Map();
30
    target.forEach((value, key) => {
31
      clonedMap.set(key, deepClone(value, map, depth - 1));
32
    });
33
    return clonedMap;
34
  }
35

36
  // 处理 Set
37
  if (target instanceof Set) {
38
    const clonedSet = new Set();
39
    target.forEach(value => {
40
      clonedSet.add(deepClone(value, map, depth - 1));
41
    });
42
    return clonedSet;
43
  }
44

45
  // 处理数组和普通对象
46
  // 克隆常规属性
47
  Object.keys(target).forEach(key => {
48
    clone[key] = deepClone(target[key], map, depth - 1);
49
  });
50

51
  // 克隆 Symbol 属性
52
  Object.getOwnPropertySymbols(target).forEach(sym => {
53
    clone[sym] = deepClone(target[sym], map, depth - 1);
54
  });
55

56
  return clone;
57
}

使用示例#

1
// 创建复杂对象
2
const original = {
3
    num: 1,
4
    str: 'hello',
5
    date: new Date(),
6
    regex: /pattern/g,
7
    arr: [1, 2, {
8
        name: 'obj'
9
    }],
10
    map: new Map([['key', {
11
        value: 'map'
12
    }]]),
13
    set: new Set([1, 2, 3]),
14
    symbol: Symbol('unique'),
15
    [Symbol('private')] : 'secret',
16
    func: function() {
17
        return this.num;
18
    }
19
};
20

21
// 创建循环引用
22
original.self = original;
23
original.arr.push(original);
24

25
// 执行深拷贝
26
const cloned = deepClone(original, new WeakMap(), 5);
27

28
// 验证结果
29
console.log(cloned !== original); // true
30
console.log(cloned.arr !== original.arr); // true
31
console.log(cloned.arr !== original.arr); // true
32
console.log(cloned.map.get('key') !== original.map.get('key')); // true
33
console.log(cloned.self === cloned); // true (循环引用保持)
34
console.log(cloned.date instanceof Date); // true
35
console.log(cloned.func()); // 1 (函数保持)