01 源码解析手写 迭代递归方法

  1. function deepCopy(obj, cache = new WeakMap()) {
  2.   if (!obj instanceof Object) return obj
  3.   // 防止循环引用
  4.   if (cache.get(obj)) return cache.get(obj)
  5.   // 支持函数
  6.   if (obj instanceof Function) {
  7.     return function () {
  8.       return obj.apply(this, arguments)
  9.     }
  10.   }
  11.   // 支持日期
  12.   if (obj instanceof Date) return new Date(obj)
  13.   // 支持正则对象
  14.   if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
  15.   // 还可以增加其他对象，比如：Map, Set等，根据情况判断增加即可，面试点到为止就可以了
  17.   // 数组是 key 为数字素银的特殊对象
  18.   const res = Array.isArray(obj) ? [] : {}
  19.   // 缓存 copy 的对象，用于处理循环引用的情况
  20.   cache.set(obj, res)
  22.   // Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。
  23.   Object.keys(obj).forEach((key) => {
  24.     if (obj[key] instanceof Object) {
  25.       res[key] = deepCopy(obj[key], cache)
  26.     } else {
  27.       res[key] = obj[key]
  28.     }
  29.   });
  30.   return res
  31. }
  33. // 测试
  34. const source = {
  35.   name: 'Jack',
  36.   meta: {
  37.     age: 12,
  38.     birth: new Date('1997-10-10'),
  39.     ary: [1, 2, { a: 1 }],
  40.     say() {
  41.       console.log('Hello');
  42.     }
  43.   }
  44. }
  45. source.source = source
  46. const newObj = deepCopy(source)
  47. console.log(newObj.meta.ary[2] === source.meta.ary[2]); // false
  48. console.log(newObj.meta.birth === source.meta.birth); // false

02. JSON.parse( JSON.stringify() ) 序列化和反序列

先将需要拷贝的对象进行JSON字符串化，然后再pase解析出来，赋给另一个变量，实现深拷贝。
这个方法有一些弊端，我开始用一些例子来展示出来。

  1. // 测试数据
  2. var test = {  name: "test"};
  3. var data = {  a: "123", 
  4.               b: 123, 
  5.               c: true, 
  6.               d: [43, 2], 
  7.               e: undefined,
  8.               f: null,
  9.               g: function() {    console.log("g");  },
  10.               h: new Set([3, 2, null]),
  11.               i: Symbol("fsd"),
  12.               j: test,
  13.               k: new Map([    ["name", "张三"],    ["title", "Author"]  ])
  14.             };
  16. JSON.stringify(data)

可以看到data这个对象的属性里基本上包含了所有的数据类型，但通过JSON字符串化后，返回的值却有缺失，原因是JSON在执行字符串化的这个过程时，会先进行一个JSON格式化，获得安全的JSON值，因此如果是非安全的JSON值，就会被丢弃掉。其中undefined、function、symbol这三种类型的值就是非安全的（包括该对象的属性循环赋值该对象），所以格式化后，就被过滤掉了，而set、map这种数据格式的对象，也并没有被正确处理，而是处理成了一个空对象。

可以看到，将含有闭环的对象进行JSON序列化，爆出了错误
所以使用JSON序列化这种方式时，要注意避免包含上述那几种数据类型，不过这种方式也有几个好的地方，还是先看例子。

03. Object.assign(target, source1, source2)

es6新增的方法，可用于对象合并，将源对象的所有可枚举属性，复制到目标对象上。

  1. var data = {
  2.               a: "123",
  3.               b: 123,
  4.               c: true,
  5.               d: [43, 2],
  6.               e: undefined,
  7.               f: null,
  8.               g: function() {    console.log("g");  },
  9.               h: new Set([3, 2, null]),
  10.               i: Symbol("fsd"),
  11.               k: new Map([    ["name", "张三"],    ["title", "Author"]  ])
  12.         };
  14. var newData = Object.assign({},data)
  15. console.log(newData)

可以看到这个API可以将源对象上的全部数据类型属性值完全复制到一个新的对象上，这难道就是我们所寻找的最完美的深拷贝方式了吗？答案是否，只能说是部分深拷贝，或者说就是浅拷贝，为什么这么说呢，接着往下看。

  1. var test = {  name: '张三' }
  2. var data = { 
  3.               a: 123,
  4.               b: test
  5.             }
  6. var newData = Object.assign({},data)
  7. console.log(newData) 
  8. // {  a: 123,  b: {    name: '张三'  }}
  9. test.age = 18
  10. console.log(newData)
  11. // {  a: 123,  b: {    name: '张三',   age: 18  }}

结果很明显，这种方式的拷贝，如果源目标对象中某个属性值是对另一个对象的引用，那么这个属性的拷贝仍然是对引用的拷贝。