实现一个深拷贝函数

发表于 | 分类于

最简单的深拷贝

1
const copyObj = JSON.parse(JSON.stringify(obj));

这个深拷贝方法是最简单的，就是利用JSON.stringify将 js 对象序列化（JSON 字符串），再使用JSON.parse来反序列化(还原)js 对象，但是它有它的局限性。

  1. Date 对象 经过此方法转换之后，Date 对象将会变成字符串
  2. 如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象；
  3. 如果 obj 里有 undefined，function，会丢失
  4. 如果 obj 里有 infinity，-infinity，NaN，会变成 null
  5. JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果 obj 中的对象是有构造函数生成的，则使用 JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的 constructor；
  6. 如果对象中存在循环引用的情况也无法正确实现深拷贝；

整理数据类型

在写深拷贝函数前，我们先把所有的数据类型都整理下： 

1
2
3
4
// 判断类型
function getType(original) {
  return Object.prototype.toString.call(original);
}

Object&Array

首先，我们来实现一下 Object 和 Array 的深拷贝，在实际场景中，这两个其实已经够用了。

如果是浅拷贝的话，我们的思路是：创建一个新对象，遍历需要克隆的对象，将需要克隆的对象依次添加到新对象上，返回。 如果深拷贝的话我们需要继续考虑它的深度，如果有更深层次的对象可以继续递归直到属性为原始类型，我们来完成一个最简单的 Object 和 Array 的深拷贝：

1
2
3
4
5
6
7
8
9
10
11
function deepClone(original) {
  if (["[object Object]", "[object Array]"].includes(getType(original))) {
    let targetClone = Array.isArray(original) ? [] : {};
    Object.keys(original).forEach(key => {
      targetClone[key] = deepClone(original[key]);
    });
    return targetClone;
  } else {
    return original;
  }
}

测试：

1
2
3
4
5
6
7
8
9
10
11
12
const obj = {
  field1: 1,
  field2: undefined,
  field3: null,
  field4: {
    child: "child",
    child2: {
      child3: "child"
    }
  },
  field5: [2, 4, 8]
};

结果： 测试通过。

循环引用

我们往上面的 obj 里面加点东西：obj.field6 = obj： 我们可以看到报错，原因是递归进入了死循环。
为了解决循环引用的问题，我们选择使用Map（不了解 Map 可以先去看看 ES6 的 Map），思路是

  • Map 中有没有当前需要克隆的对象
  • 有，返回该对象
  • 没有，将该对象存到 Map，继续 copy
    我们再来改造一下上面的 function：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function deepClone(original, map = new Map()) {
  if (["[object Object]", "[object Array]"].includes(getType(original))) {
    let targetClone = Array.isArray(original) ? [] : {};
    if (map.get(original)) {
      return map.get(original);
    }
    map.set(original, targetClone);
    Object.keys(original).forEach(key => {
      targetClone[key] = deepClone(original[key], map);
    });
    return targetClone;
  } else {
    return original;
  }
}

测试结果： 测试通过。

  • 可以用WeakMap代替Map，减少性能消耗（有利于垃圾回收）。

其他数据类型

上述代码中我们只考虑了Object和Array两种数据类型，实际上的引用类型远远不止，我们先写个判断引用类型的 function：

1
2
3
4
function isObject(original) {
  const type = typeof original;
  return original !== null && type === "object";
}

接下来，我们来整理一下各个数据类型：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 可继续遍历的数据类型
const mapTag = "[object Map]";
const setTag = "[object Set]";
const arrayTag = "[object Array]";
const objectTag = "[object Object]";

// 不可继续遍历的数据类型
const boolTag = "[object Boolean]";
const dateTag = "[object Date]";
const errorTag = "[object Error]";
const numberTag = "[object Number]";
const regexpTag = "[object RegExp]";
const stringTag = "[object String]";
const symbolTag = "[object Symbol]";

Boolean、Number、String、Date、Error这几种类型我们都可以直接用构造函数和原始数据创建一个新对象

1
2
3
4
5
// 初始化被克隆的对象
function initCopy(original) {
  const Ctor = original.constructor;
  return new Ctor();
}

Map、Set是可以继续遍历的数据类型，下面我们先来实现这些功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const deepTags = [mapTag, setTag, arrayTag, objectTag, argumentTag];
function deepClone(original, map = new WeakMap()) {
  const type = getType(original);

  // 判断引用类型,原始数据直接返回
  // copy function是没有实际应用场景的，两个对象使用同一个引用地址的function没有任何问题，所以这里直接返回
  if (!isObject(original)) {
    return original;
  }

  if (deepTags.includes(type)) {
    let targetClone = initCopy(original);

    // 处理环
    if (map.get(original)) {
      return map.get(original);
    }
    // 处理Set
    if (type === setTag) {
      original.forEach(value => {
        targetClone.add(value);
      });
    }
    // 处理map
    if (type === mapTag) {
      original.forEach((value, key) => {
        targetClone.set(key, value);
      });
    }
    map.set(original, targetClone);
    Object.keys(original).forEach(key => {
      targetClone[key] = deepClone(original[key], map);
    });
    return targetClone;
  } else {
    // 处理其他数据类型
    const Ctor = original.constructor;
    if (otherTags.includes(type)) {
      return new Ctor(original);
    }
    // 处理Boolean
    if (type === boolTag) {
      return new original.constructor(original.valueOf());
    }
    // 处理Symbol
    if (type === symbolTag) {
      return Object(Symbol.prototype.valueOf.call(original));
    }
    // 处理reg
    if (type === regexpTag) {
      const reFlags = /\w*$/;
      const result = new original.constructor(
        original.source,
        reFlags.exec(original)
      );
      result.lastIndex = original.lastIndex;
      return result;
    }
    return null;
  }
}

我们补充下测试对象，然后测试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const obj = {
  field1: 1,
  field2: undefined,
  field3: null,
  field4: {
    child: "child",
    child2: {
      child3: "child"
    }
  },
  field5: [2, 4, 8],
  num: new Number(1),
  map: new Map([["a1", "1"], ["a2", "2"]]),
  set: new Set([1, 2, 3, 4]),
  date: new Date(),
  boolean: new Boolean(false),
  str: new String("123"),
  symbol: Object(Symbol(1)),
  reg: /\d+/,
  func: () => {
    console.log("123");
  }
};
obj.field6 = obj;

结果： 测试通过。

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
const mapTag = "[object Map]";
const setTag = "[object Set]";
const arrayTag = "[object Array]";
const objectTag = "[object Object]";

const boolTag = "[object Boolean]";
const dateTag = "[object Date]";
const errorTag = "[object Error]";
const numberTag = "[object Number]";
const regexpTag = "[object RegExp]";
const stringTag = "[object String]";
const symbolTag = "[object Symbol]";

const otherTags = [dateTag, errorTag, numberTag, stringTag];
const deepTags = [mapTag, setTag, arrayTag, objectTag, argumentTag];

// 判断类型
function getType(original) {
  return Object.prototype.toString.call(original);
}

// 判断是否为引用类型
function isObject(original) {
  const type = typeof original;
  return original !== null && type === "object";
}

// 初始化被克隆的对象
function initCopy(original) {
  const Ctor = original.constructor;
  return new Ctor();
}

export function deepClone(original, map = new WeakMap()) {
  const type = getType(original);

  // 判断引用类型,原始数据直接返回
  // copy function是没有实际应用场景的，两个对象使用同一个引用地址的function没有任何问题，所以这里直接返回
  if (!isObject(original)) {
    return original;
  }

  if (deepTags.includes(type)) {
    let targetClone = initCopy(original);

    // 处理环
    if (map.get(original)) {
      return map.get(original);
    }
    // 处理Set
    if (type === setTag) {
      original.forEach(value => {
        targetClone.add(value);
      });
    }
    // 处理map
    if (type === mapTag) {
      original.forEach((value, key) => {
        targetClone.set(key, value);
      });
    }
    map.set(original, targetClone);
    Object.keys(original).forEach(key => {
      targetClone[key] = deepClone(original[key], map);
    });
    return targetClone;
  } else {
    // 处理其他数据类型
    const Ctor = original.constructor;
    if (otherTags.includes(type)) {
      return new Ctor(original);
    }
    // 处理Boolean
    if (type === boolTag) {
      return new original.constructor(original.valueOf());
    }
    // 处理Symbol
    if (type === symbolTag) {
      return Object(Symbol.prototype.valueOf.call(original));
    }
    // 处理reg
    if (type === regexpTag) {
      const reFlags = /\w*$/;
      const result = new original.constructor(
        original.source,
        reFlags.exec(original)
      );
      result.lastIndex = original.lastIndex;
      return result;
    }
    return null;
  }
}