学习链接

鉴定一下网络热门面试题：对象深克隆（上）

鉴定一下网络热门面试题：对象深克隆（下）

MDN：structuredClone

MDN：Object.assign

深浅拷贝

浅拷贝

  1. function shallowClone(source) {
  2.     const target = {};
  4.     for (const prop of Object.keys(source)) {
  5.            target.prop = source.prop;
  6.     }
  8.     return target;
  9. }

深拷贝

递归

  1. function deepClone(source) {
  2.     const target = {};
  4.     for (const property of Object.keys(source)) {
  5.            if (typeof source[property] === 'object' && source[property] !== null) {
  6.                target[property] = deepClone(source[property]);
  7.            } else {
  8.                target[property] = source[property];
  9.            }
  10.     }
  12.     return target;
  13. }

递归👉迭代

  1. function deepClone(source) {
  2.     const target = {};
  4.     let stack = [{ target, source }];
  6.     while (stack.length) {
  7.         const { target, source } = stack.pop();
  9.         for (const property of Object.keys(source)) {
  10.             // 非 null 对象
  11.             if (typeof source[property] === 'object' && source[property] !== null) {
  12.                 target[property] = {};
  14.                 stack.push({ target: target[property], source: source[property] });
  16.                 continue;
  17.             }
  19.             target[property] = source[property];
  20.         }
  21.     }
  23.     return target;
  24. }

考虑循环引用

  1. function deepClone(source) {
  2.     const target = {};
  3.     const map = new Map();
  5.     const stack = [{ source, target }];
  6.     map.set(source, target);
  8.     while (stack.length) {
  9.         const { source, target } = stack.pop();
  11.         for (const property of Object.keys(source)) {
  12.             // 循环引用
  13.             if (map.has(source[property])) {
  14.                 target[property] = map.get(source[property]);
  15.                 continue;
  16.             }
  18.             // 非 null 对象
  19.             if (typeof source[property] === 'object' && source[property] !== null) {
  20.                 target[property] = {};
  22.                 stack.push({ source: source[property], target: target[property] });
  23.                 map.set(source[property], target[property]);
  24.                 continue;
  25.             }
  27.             target[property] = source[property];
  28.         }
  29.     }
  31.     return target;
  32. }

考虑原型

  1. function deepClone(source) {
  2.     const target = Object.create(
  3.         Object.getPrototypeOf(source)
  4.     );
  5.     // const target = {};
  6.     // Object.setPrototypeOf(
  7.     //   target,
  8.     //   Object.getPrototypeOf(source)
  9.     // );
  11.     const map = new Map();
  13.     const stack = [{ source, target }];
  14.     map.set(source, target);
  16.     while (stack.length) {
  17.         let { source, target } = stack.pop();
  19.         for (const property of Object.keys(source)) {
  20.             // 原始类型
  21.             if (typeof source[property] !== 'object' || source[property] === null) {
  22.                 target[property] = source[property];
  23.                 continue;
  24.             }
  26.             // 循环引用
  27.             if (map.has(source[property])) {
  28.                 target[property] = map.get(source[property]);
  29.                 continue;
  30.             }
  32.             // 处理原型
  33.             target[property] = Object.create(
  34.                 Object.getPrototypeOf(source[property])
  35.             );
  36.             // target[property] = {};
  37.             // Object.setPrototypeOf(
  38.             //   target[property],
  39.             //   Object.getPrototypeOf(source[property])
  40.             // );
  42.             stack.push({ source: source[property], target: target[property] });
  43.             map.set(source[property], target[property]);
  44.         }
  45.     }
  47.     return target;
  48. }

考虑 descriptor

  1. function deepClone(source) {
  2.     const target = Object.create(
  3.         Object.getPrototypeOf(source)
  4.     );
  6.     const map = new Map();
  8.     let stack = [{ source, target }];
  9.     map.set(source, target);
  11.     while (stack.length) {
  12.         let { source, target } = stack.pop();
  14.         for (const property of Object.getOwnPropertyNames(source)) {
  15.             const descriptor = Object.getOwnPropertyDescriptor(source, property);
  17.             // getter setter 属性
  18.             if (!descriptor.hasOwnProperty('value')) {
  19.                 Object.defineProperty(target, property, descriptor);
  20.                 continue;
  21.             }
  23.             // 原始类型
  24.             if (typeof source[property] !== 'object' || source[property] === null) {
  25.                 descriptor.value = source[property];
  26.                 Object.defineProperty(target, property, descriptor);
  27.                 continue;
  28.             }
  30.             // 循环引用
  31.             if (map.has(source[property])) {
  32.                 descriptor.value = map.get(source[property]);
  33.                 Object.defineProperty(target, property, descriptor);
  34.                 continue;
  35.             }
  37.             // 处理原型
  38.             descriptor.value = Object.create(
  39.                 Object.getPrototypeOf(source[property])
  40.             );
  42.             stack.push({ source: source[property], target: descriptor.value });
  43.             map.set(source[property], descriptor.value);
  45.             // 添加属性
  46.             Object.defineProperty(target, property, descriptor);
  47.         }
  48.     }
  50.     return target;
  51. }

考虑 freeze，seal，preventExtensions

补充知识：

深浅拷贝 - 图1

  1. const obj = { a: 1 }
  3. // Object.preventExtensions(obj) // false false false
  4. // Object.seal(obj) // false true false
  5. // Object.freeze(obj) // flase true true
  7. console.log('Object.isExtensible(obj): ', Object.isExtensible(obj));
  8. console.log('Object.isSealed(obj): ', Object.isSealed(obj));
  9. console.log('Object.isFrozen(obj): ', Object.isFrozen(obj));
  1. function deepClone(source) {
  2.     const target = Object.create(
  3.         Object.getPrototypeOf(source)
  4.     );
  6.     const map = new Map();
  8.     let stack = [{ source, target }];
  9.     map.set(source, target);
  11.     while (stack.length) {
  12.         let { source, target } = stack.pop();
  14.         for (const property of Object.getOwnPropertyNames(source)) {
  15.             const descriptor = Object.getOwnPropertyDescriptor(source, property);
  17.             // getter setter 属性
  18.             if (!descriptor.hasOwnProperty('value')) {
  19.                 Object.defineProperty(target, property, descriptor);
  20.                 continue;
  21.             }
  23.             // 原始类型
  24.             if (typeof source[property] !== 'object' || source[property] === null) {
  25.                 descriptor.value = source[property];
  26.                 Object.defineProperty(target, property, descriptor);
  27.                 continue;
  28.             }
  30.             // 循环引用
  31.             if (map.has(source[property])) {
  32.                 descriptor.value = map.get(source[property]);
  33.                 Object.defineProperty(target, property, descriptor);
  34.                 continue;
  35.             }
  37.             // 处理原型
  38.             descriptor.value = Object.create(
  39.                 Object.getPrototypeOf(source[property])
  40.             );
  42.             stack.push({ source: source[property], target: descriptor.value });
  43.             map.set(source[property], descriptor.value);
  45.             // 添加属性
  46.             Object.defineProperty(target, property, descriptor);
  48.             // '冻结' 对象
  49.             if (Object.isFrozen(source)) {
  50.                 Object.freeze(target);
  51.             } else if (Object.isSealed(source)) {
  52.                 Object.seal(target);
  53.             } else if (!Object.isExtensible(source)) {
  54.                 Object.preventExtensions(target);
  55.             }
  56.         }
  57.     }
  59.     return target;
  60. }

考虑更多对象类型

  1. function deepClone(source) {
  2.     if (typeof source !== 'object') return source;
  4.     // ...... 
  6.     const target = createObjectFromSameClassObject(source);
  8.     // ......
  10.     while (stack.length) {
  11.         let { source, target } = stack.pop();
  13.         for (const property of Object.getOwnPropertyNames(source)) {
  14.             //    ......
  16.             // 处理原型
  17.             descriptor.value = createObjectFromSameClassObject(source[property]);
  19.             // ......
  20.         }
  21.         // ......
  22.     }
  24.     return target;
  25. }
  28. function createObjectFromSameClassObject(source) {
  29.     let target;
  31.     let type = typeof source;
  32.     let toStringResult = Object.prototype.toString.call(source);
  33.     let prototype = Object.getPrototypeOf(source);
  35.     if (prototype === Array.prototype && toStringResult === '[object Array]') {
  36.         target = source.slice();
  37.     } else if (prototype === String.prototype && toStringResult === '[object String]') {
  38.         target = new String(source.valueOf());
  39.     } else {
  40.         target = Object.create(
  41.             Object.getPrototypeOf(source)
  42.         );
  43.     }
  45.     return target;
  46. }

改为易于拓展的版本

  1. function deepClone(source) {
  2.     // ......    
  3. }
  6. const classes = [
  7.     {
  8.         typeCheck(source, type, toStringResult, prototype) {
  9.             return prototype === Array.prototype && toStringResult === '[object Array]';
  10.         },
  11.         createObj(source) {
  12.             return source.slice();
  13.             // return []; // 觉得这样也可以
  14.         }
  15.     },
  16.     {
  17.         typeCheck(source, type, toStringResult, prototype) {
  18.             return prototype === String.prototype && toStringResult === '[object String]';
  19.         },
  20.         createObj(source) {
  21.             return new String(source.valueOf());
  22.         }
  23.     }
  24. ];
  26. function createObjectFromSameClassObject(source) {
  27.     let type = typeof source;
  28.     let toStringResult = Object.prototype.toString.call(source);
  29.     let prototype = Object.getPrototypeOf(source);
  31.     // 处理特殊类型
  32.     for (const { typeCheck, createObj } of classes) {
  33.         if (typeCheck(source, type, toStringResult, prototype)) {
  34.             return createObj(source);
  35.         }
  36.     }
  38.     return Object.create(
  39.         Object.getPrototypeOf(source)
  40.     );
  41. }

举例：处理 Map 类型

  1. classes.push({
  2.     checkType(source, type, toStringResult, prototype) {
  3.         return prototype === Map.prototype && toStringResult === '[object Map]';
  4.     },
  5.     createObj(source) {
  6.         const map = new Map();
  8.         for (const [key, value] of source) {
  9.             // (键值都进行拷贝处理 这是因为map的键值都可为任意类型)
  10.             map.set(deepClone(key), deepClone(value));
  11.         }
  13.         return map;
  14.     }
  15. });

测试

  1. it('clone a object', () => {
  2.     const obj = { a: 1 };
  3.     const cloneObj = deepClone(obj);
  5.     return (
  6.         cloneObj !== obj &&
  7.         JSON.stringify(obj) === JSON.stringify(cloneObj)
  8.     );
  9. });
  11. it('clone a object with ciruclar reference', () => {
  12.     const obj = { a: 1, b: { x: 1 } };
  13.     obj.b.c = obj.b;
  15.     const cloneObj = deepClone(obj);
  17.     return (
  18.         cloneObj !== obj &&
  19.         cloneObj.b !== obj.b &&
  20.         cloneObj.b.c === cloneObj.b
  21.     );
  22. });
  24. it('clone a object with prototype', () => {
  25.     function Cls() {
  26.         this.a = 1;
  27.     }
  28.     Cls.prototype.b = 2;
  30.     const obj = new Cls();
  31.     const cloneObj = deepClone(obj);
  33.     return (
  34.         cloneObj.a === obj.a &&
  35.         cloneObj.b === obj.b &&
  36.         !cloneObj.hasOwnProperty('b')
  37.     );
  38. });
  40. it('clone a object with property with enumberable: false', () => {
  41.     const obj = {};
  42.     Object.defineProperty(obj, 'a', {
  43.         value: 1,
  44.         writable: true,
  45.         enumerable: false,
  46.         configurable: true
  47.     });
  49.     const cloneObj = deepClone(obj);
  51.     for (const p in cloneObj) {
  52.         return false;
  53.     }
  55.     return true;
  56. });
  58. it('clone a frozen object', () => {
  59.     const obj = { a: 1, b: { x: 2 } };
  60.     Object.freeze(obj);
  62.     const cloneObj = deepClone(obj);
  64.     return Object.isFrozen(cloneObj);
  65. });
  67. it('clone a sealed object', () => {
  68.     const obj = { a: 1, b: { x: 2 } };
  69.     Object.seal(obj);
  71.     const cloneObj = deepClone(obj);
  73.     return Object.isSealed(cloneObj);
  74. });
  76. it('clone a unextensible object', () => {
  77.     const obj = { a: 1, b: { x: 2 } };
  78.     Object.preventExtensions(obj);
  80.     const cloneObj = deepClone(obj);
  82.     return !Object.isExtensible(cloneObj);
  83. });
  85. it('clone a Array', () => {
  86.     const arr = ['a', 'b', 'c'];
  88.     const cloneArr = deepClone(arr);
  90.     return (
  91.         JSON.stringify(arr) === JSON.stringify(cloneArr) &&
  92.         arr !== cloneArr &&
  93.         Array.isArray(cloneArr)
  94.     );
  95. });
  97. it('clone a String Object', () => {
  98.     const str = new String('abc');
  100.     const cloneStr = deepClone(str);
  102.     return (
  103.         JSON.stringify(str) === JSON.stringify(cloneStr) &&
  104.         str !== cloneStr &&
  105.         cloneStr.valueOf() === 'abc'
  106.     );
  107. });
  109. function it(str, fun) {
  110.     if (fun()) {
  111.         console.log(str);
  112.     } else {
  113.         console.log(false);
  114.     }
  115. }