Object.keys(obj) ：返回自身的所有可枚举属性

Object.getOwnPropertyNames(obj) ：返回自身的所有属性，不论是否可枚举

for...in ：迭代一个对象的可枚举属性，包括继承的可枚举属性

obj.hasOwnProperty(prop) ：返回布尔值，表实例对象自身是否具有该属性（不论是否为symbol和可枚举）

深拷贝 - 图1

只考虑普通对象

  1. const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null; // 判断是否为非null对象
  3. function deepClone(target, map = new WeakMap()) {
  4.     if(!isObject(target)) // 不是 非null对象 直接返回
  5.         return target;
  6.     // 获取其原型
  7.     let ctor = target.constructor;
  8.     let cloneTarget = new ctor();
  10.     if(map.get(target)) // 避免死循环 eg.环形链表
  11.         return target;
  12.     map.set(target, true);
  14.     for (const prop of Object.getOwnPropertyNames(target)) {
  15.         cloneTarget[prop] = deepClone(target[prop], map); // 递归处理 深度拷贝属性
  16.     }
  17.     for (const prop of Object.getOwnPropertySymbols(target)) { // 考虑Symbol
  18.         cloneTarget[prop] = deepClone(target[prop], map);
  19.     }
  20.     // for (const prop of Reflect.ownKeys(target)) {
  21.     //   cloneTarget[prop] = deepClone(target[prop], map);
  22.     // }
  23.     return cloneTarget;
  24. }

考虑更多类型

  1. const getType = obj => Object.prototype.toString.call(obj); // 根据toString方法转成的字符串来判断类型
  3. const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null; // 判断是否为非null对象
  5. const canTraverse = { // 可遍历的类型
  6.     '[object Map]': true,
  7.     '[object Set]': true,
  8.     '[object Array]': true,
  9.     '[object Object]': true,
  10.     '[object Arguments]': true,
  11. };
  12. const mapTag = '[object Map]';
  13. const setTag = '[object Set]';
  14. const boolTag = '[object Boolean]';
  15. const numberTag = '[object Number]';
  16. const stringTag = '[object String]';
  17. const symbolTag = '[object Symbol]';
  18. const dateTag = '[object Date]';
  19. const errorTag = '[object Error]';
  20. const regexpTag = '[object RegExp]';
  21. const funcTag = '[object Function]';
  23. const handleRegExp = (target) => { // 处理正则
  24.     const { source, flags } = target; // source正则模式的字符串形式 flags修饰符
  25.     return new target.constructor(source, flags);
  26. }
  28. const handleFunc = (func) => { // 处理函数
  29.     if(!func.prototype) return func; // 箭头函数直接返回自身
  30.     const bodyReg = /(?<={)(.|\n)+(?=})/; // 函数体正则匹配
  31.     const paramReg = /(?<=\()(.|\n)+(?=\)\s+\{)/; // 参数正则匹配
  32.     const funcString = func.toString();
  33.     // 分别匹配 函数参数 和 函数体
  34.     const param = paramReg.exec(funcString);
  35.     const body = bodyReg.exec(funcString);
  36.     if(!body) return null; // 未匹配成功会返回 null -> false
  37.     if (param) { // 是否有参数
  38.         const paramArr = param[0].split(',');
  39.         return new Function(...paramArr, body[0]); // Function构造函数的最后一个参数才会被当作是函数体，前面的都被当作参数
  40.     } else {
  41.         return new Function(body[0]);
  42.     }
  43. }
  45. const handleNotTraverse = (target, tag) => { // 处理不可遍历的类型
  46.     const Ctor = target.constructor; // 直接获取其构造函数
  47.     switch(tag) {
  48.         case boolTag:
  49.             return new Object(Boolean.prototype.valueOf.call(target));
  50.         case numberTag:
  51.             return new Object(Number.prototype.valueOf.call(target));
  52.         case stringTag:
  53.             return new Object(String.prototype.valueOf.call(target));
  54.         case symbolTag:
  55.             return new Object(Symbol.prototype.valueOf.call(target));
  56.         case errorTag: 
  57.         case dateTag:
  58.             return new Ctor(target);
  59.         case regexpTag:
  60.             return handleRegExp(target);
  61.         case funcTag:
  62.             return handleFunc(target);
  63.         default:
  64.             return new Ctor(target);
  65.     }
  66. }
  68. const deepClone = (target, map = new WeakMap()) => {
  69.     if(!isObject(target)) // 不是 非null对象 直接返回
  70.         return target;
  71.     const type = getType(target); // 获取类型字符串
  72.     let cloneTarget; // 存储结果
  73.     if(!canTraverse[type]) {
  74.         // 处理不能遍历的对象
  75.         return handleNotTraverse(target, type);
  76.     } else {
  77.         // 处理可遍历对象 拷贝获取其原型
  78.         let ctor = target.constructor;
  79.         cloneTarget = new ctor();
  80.     }
  82.     if(map.get(target)) // 避免死循环 eg.环形链表
  83.         return target;
  84.     map.set(target, true);
  86.     if(type === mapTag) {
  87.         //处理Map
  88.         target.forEach((item, key) => {
  89.             // (键值都进行拷贝处理 这是因为map的键值都可为任意类型)
  90.             cloneTarget.set(deepClone(key, map), deepClone(item, map)); // 递归处理
  91.         })
  92.     }
  94.     if(type === setTag) {
  95.         //处理Set
  96.         target.forEach(item => {
  97.             cloneTarget.add(deepClone(item, map)); // 递归处理
  98.         })
  99.     }
  101.     // 处理数组和对象
  102.     // for...in 可处理对象的可枚举属性 会包括继承的属性
  103.     // Object.keys() 可处理对象的可枚举属性 只包括自身的属性
  104.     // Object.getOwnPropertyNames() 处理自身属性 无论是否可枚举
  105.     // 上面的方法都无法处理 属性名为Symbol类型的属性
  106.     // Object.getOwnPropertySymbols()
  107.     // Reflect.ownKeys()
  108.     for (const prop of Object.getOwnPropertyNames(target)) {
  109.         cloneTarget[prop] = deepClone(target[prop], map); // 递归处理 深度拷贝属性
  110.     }
  111.     for (const prop of Object.getOwnPropertySymbols(target)) { // 考虑Symbol
  112.         cloneTarget[prop] = deepClone(target[prop], map);
  113.     }
  114.     // for (const prop of Reflect.ownKeys(target)) {
  115.     //   cloneTarget[prop] = deepClone(target[prop], map);
  116.     // }
  117.     return cloneTarget;
  118. }

测试：

  1. // 对象
  2. const obj = {
  3.   a: 1,
  4.   b: {
  5.     c: 123,
  6.     d: 465,
  7.     e: {
  8.       f: 5050
  9.     }
  10.   }
  11. }
  12. Object.defineProperty(obj, 'prop', {
  13.   value: '不可枚举',
  14.   enumerable: false,
  15.   configurable: true
  16. })
  17. const prop = Symbol(123);
  18. obj[prop] = 'Symbol属性名';
  19. const newObj = deepClone(obj);
  20. // console.log('newObj: ', newObj);
  21. // obj.a = 456
  22. // obj.b.c = 777;
  23. // obj[prop] = 'Symbol更改';
  24. // console.log('newObj: ', newObj);
  26. const objTest = {
  27.   prop: 123
  28. }
  29. objTest.next = objTest;
  30. // console.log('objTest: ', objTest);
  31. deepClone(objTest)
  32. // console.log('deepClone(objTest): ', deepClone(objTest));
  34. const arr = [1,2,3,obj];
  35. const newArr = deepClone(arr);
  36. // console.log('newArr: ', newArr);
  37. // arr[3].a = 456;
  38. // arr[3].b.c = 777;
  39. // console.log('newArr: ', newArr);
  41. // map
  42. const map = new Map();
  43. map.set('obj', obj);
  44. map.set('arr', arr);
  45. const newMap = deepClone(map);
  46. // console.log('newMap: ', newMap);
  47. // map.get('arr')[3].a = 456;
  48. // map.get('arr')[3].b.c = 777;
  49. // console.log('newMap: ', newMap);
  51. // set
  52. const set = new Set(arr);
  53. const newSet = deepClone(set);
  54. // console.log('newSet: ', newSet);
  55. // set.add(789);
  56. // newSet.add('ABC');
  57. // console.log('newSet: ', newSet);
  59. // function
  60. let func = function (val) {
  61.     return val + '456'
  62. };
  63. const test = func;
  64. const newFunc = deepClone(func);
  65. // console.log('func.name: ', func.name); // func
  66. // console.log('test.name: ', test.name); // func
  67. // console.log('newFunc.name: ', newFunc.name); // anonymous
  68. // console.log('newFunc(123): ', newFunc(123)); // 123456
  70. // 箭头函数
  71. const arrowFunc = (val) => val + '123';
  72. const testArrow = arrowFunc;
  73. const newArrowFunc = deepClone(arrowFunc);
  74. console.log('testArrow === arrowFunc: ', testArrow === arrowFunc); // true
  75. console.log('newArrowFunc === arrowFunc: ', newArrowFunc === arrowFunc); // true(返回本身)
  76. console.log('newArrowFunc(456): ', newArrowFunc(456));
  78. // Date
  79. const date = new Date();
  80. const newDate = deepClone(date);
  81. console.log('date: ', date);
  82. console.log('newDate: ', newDate);
  83. console.log('newDate.getDay(): ', newDate.getDay());