手写系列-手写深拷贝

前言#

什么是深拷贝？

简单理解: b 是 a 的一份拷贝，b 中没有对 a 中对象的引用另一种理解: b 是 a 的一份拷贝，a、b 各自画图，a 与 b 没有连接

简单的方法#

JSON 序列化与反序列化

1
let obj = {a:1,b:[2,3],c:{xx:4,yy:5}}
2
let obj2 = JSON.parse(JSON.stringify(obj))
3
obj2.a = 11
4
obj2.b[0] = 11
5
obj2.c.xx = 44
6
console.log(obj)  // {a:1,b:[2,3],c:{xx:4,yy:5}} 原先的obj不会被改变

缺点:

不支持函数
不支持 undefind(因为 JSON 只有 null)
不支持日期(会把 date 变成 iso8601 格式的日期字符串)
不支持正则
不支持 Error 对象
不支持环状结构
NaN Infinity 会变成 null

1
const obj = {
2
  a: "a",
3
  b: undefined, // undefinde 丢失
4
  c: function () {
5
    // 函数丢失
6
    console.log("this is a fnction");
7
  },
8
  d: NaN, // NaN 变为 null
9
  e: Infinity, // Infinity 变为 null
10
  f: new Date(), // 时间对象变为 iso8601格式字符串
11
  g: /123/, // 正则 变为 空对象
12
  h: new Error("error"), // 变为空对象
13
};
14
console.log(JSON.parse(JSON.stringify(obj)));
15
// {a: 'a',d:null,e: null,f: 'iso8601格式字符串'，g:{},h: {}}
16

17
obj.i = obj;
18
console.log(JSON.parse(JSON.stringify(obj))); // 报错

自己实现一个深拷贝#

复制基本类型#

基本类型：#

Number
String
Boolean
Symbol
undefined
null

基本类型直接返回就好了

1
function deepClone(souce) {
2
  return souce;
3
}

引用类型递归克隆#

普通对象#

1
function deepClone(source) {
2
  if (source instanceof Object) {
3
    const dist = new Object();
4
    for (let key in source) {
5
      dist[key] = deepClone(source[key]);
6
    }
7
    return dist;
8
  } else {
9
    return source;
10
  }
11
}

Array 数组对象#
如果是数组的话用上面的方法去拷贝返回的是一个伪数组 且不会拷贝 length 属性 所以我们的 dist 要是一个数组对象

1
function deepClone(source) {
2
  if (source instanceof Object) {
3
    if (source instanceof Array) {
4
      // 数组
5
      const dist = new Array();
6
      for (let key in source) {
7
        dist[key] = deepClone(source[key]);
8
      }
9
      return dist;
10
    } else {
11
      // 普通对象
12
      const dist = new Object();
13
      for (let key in source) {
14
        dist[key] = deepClone(source[key]);
15
      }
16
      return dist;
17
    }
18
  } else {
19
    return source;
20
  }
21
}

Function 对象#
函数的话有两种方法第一种就是再封装一个函数去调用源函数

1
if(source instance of Function){
2
  const dist = function () {
3
    return source.apply(this, arguments);
4
  };
5
  for (let key in source) {
6
    dist[key] = deepClone(source[key]);
7
  }
8
  return dist;
9
}

但是这种方法不会拷贝 length 属性也就是函数形参个数可以通过正则匹配函数体函数参数然后重新生成函数

1
const sourceString = source.toString();
2
let body = sourceString.match(/(?<={)((\n*.*)*)(?=})/m)[0];
3
let params = sourceString.match(/(?<=\().*(?=\))/)[0];
4
dist = new Function(...params.split(","), body);

RegExp 正则对象#

1
else if (source instanceof RegExp) {
2
  dist = new RegExp(source.source, source.flags);
3
  for (let key in source) {
4
    dist[key] = deepClone(source[key]);
5
  }
6
  return dist
7
}

Date 日期对象#

1
else if (source instanceof Date) {
2
  dist = new Date(source);
3
  for (let key in source) {
4
    dist[key] = deepClone(source[key]);
5
  }
6
  return dist
7
}

环结构#

1
a = { name: "a" };
2
a.self = a;

a 就是环状结构可以通过缓存的方式去拷贝环结构在拷贝 a.self 的时候我们已经拷贝过 a 了可以将 a 与 a 的深克隆结果缓存起来

1
const cache = []
2
function deepClone(source){
3
  if(source instanceof Object){
4
   const sourceDist = cache.find((value) => value[0] === source)?.[1];
5
    if (sourceDist) {
6
      return sourceDist;
7
    } else {
8
      let dist
9
      ...
10
      // 放在for 循环的上面 否则会进入死循环
11
      cache.push([source,dist])
12
      for (let key in source) {
13
        dist[key] = deepClone(source[key]);
14
      }
15
      return dist
16
    }
17
  }
18
}

最终代码#

1
// 会有bug catch 没有清空 会有影响 可以用面向对象的方法解决
2
const cache = [];
3
module.exports = function deepClone(source) {
4
  // 判断是不是对象
5
  if (source instanceof Object) {
6
    const sourceDist = cache.find((value) => value[0] === source)?.[1];
7
    if (sourceDist) {
8
      return sourceDist;
9
    } else {
10
      let dist;
11

12
      // 数组
13
      if (source instanceof Array) {
14
        dist = new Array();
15

16
        // 函数
17
      } else if (source instanceof Function) {
18
        // dist = function () {
19
        //   return source.apply(this, arguments);
20
        // };
21

22
        const sourceString = source.toString();
23
        let body = sourceString.match(/(?<={)((\n*.*)*)(?=})/m)[0];
24
        let params = sourceString.match(/(?<=\().*(?=\))/)[0];
25
        dist = new Function(...params.split(","), body);
26

27
        // 正则
28
      } else if (source instanceof RegExp) {
29
        dist = new RegExp(source.source, source.flags);
30

31
        // 日期
32
      } else if (source instanceof Date) {
33
        dist = new Date(source);
34

35
        // 普通对象
36
      } else {
37
        dist = new Object();
38
      }
39

40
      cache.push([source, dist]);
41
      for (let key in source) {
42
        // 跳过原型上的属性
43
        if (source.hasOwnProperty(key)) {
44
          dist[key] = deepClone(source[key]);
45
        }
46
      }
47
      return dist;
48
    }
49

50
    // 基本类型
51
  } else {
52
    return source;
53
  }
54
};

前言#

简单的方法#

自己实现一个深拷贝#

复制基本类型#

基本类型：#

引用类型 递归克隆#

普通对象#

Array 数组对象#

Function 对象#

RegExp 正则对象#

Date 日期对象#

环结构#

最终代码#

引用类型递归克隆#