let 连续复制_实现一个深拷贝函数

最简单的深拷贝

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

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

经过此方法转换之后，Date 对象将会变成字符串

如果 obj 里有 RegExp、Error 对象，则序列化的结果将只得到空对象；

如果 obj 里有 undefined，function，会丢失

如果 obj 里有 infinity，-infinity，NaN，会变成 null

JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果 obj 中的对象是有构造函数生成的，则使用 JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的 constructor；

如果对象中存在循环引用的情况也无法正确实现深拷贝；

整理数据类型

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

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

11function 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

12const 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

15function 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

4function 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

61const 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

24const 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

93const 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;

}

}