[JS] 深拷贝的实现

小褚

浅拷贝和深拷贝的区别

• 浅拷贝：浅拷贝指的是复制一个对象的时候，对于对象的一个属性，
  
  
  
  • 如果是基本数据类型，则复制其值；
    
  • 如果是引用数据类型，则复制其引用。
    
  
  
• 深拷贝：深拷贝指的是复制一个对象的时候，对于对象的一个属性，
  
  
  
  • 如果是基本数据类型，则复制其值；
    
  • 如果是引用数据类型，则递归地深拷贝该对象。
    
  
  

从内存的堆区和栈区上观察它们的区别：

• 浅拷贝：引用数据类型的属性值指向同一个对象实例：
  
  
  
• 深拷贝：引用数据类型的属性值在深拷贝的时候会在堆区申请新的空间，然后填入新内容(递归调用)：
  
  
  

如何实现深拷贝

接口定义：deepClone(sourceObject): newObject
需要注意或者思考的问题：

• 小心循环引用导致的无限递归导致栈溢出；
  可以使用一个WeakMap记录已创建的对象，后续递归过程中如果引用了该对象，则直接填入其引用，而不是递归调用deepClone，从而避免了无限递归。
  

  其中WeakMap用于记录源对象上的引用到目标对象上的引用的映射记录。因为在deepClone的过程中，我们是在使用DFS遍历source的过程中构建target。
  

  
  
• 递归调用什么时候返回？
  
  
  
  • 基本数据类型直接返回；
    
  • 如果WeakMap上已经存在记录，说明存在循环引用，直接返回记录的引用，而不是递归调用。
    
  
  
• 如何获取对象上的key，常规的key、Symbol类型的key、不可遍历的key如何获取？
  直接使用Reflect.ownKeys可以获取对象上的常规key、Symbol-key和不可遍历的key。
  
• 拷贝对象的时候，对象属性的描述符也要复制；
  使用Reflect.getOwnPropertyDescriptor(target, key)方法可以获取target对象上key属性的描述符对象。
  
• 对于特殊类型的引用数据类型，应考虑对应的复制方法，如Set和Map数据类型需要考虑添加记录的顺序
  

如何判断引用数据类型

可以使用typeof判断一个变量是否是object类型，使用typeof需要注意两个特例：

• typeof null === 'object'，null是基本数据类型，但是会返回object；
  
• typeof function(){} === 'function'，function是引用数据类型且是object的子类型，但是会返回function。
  

1. function isObject(target){
2.   return (typeof target==='object' && target!==null) || typeof target==='function';
3. }

复制代码

代码

1. function deepClone(target){
2.   // 提前记录clone的键值对，用于处理循环引用
3.   const map = new WeakMap();
5.   /**
6.    * 辅助函数：判断是否是对象类型  
7.    * 需要注意`null` 和 `function`
8.    * @returns
9.    */
10.   function isObject(target){
11.     return (typeof target === 'object' && target !== null)
12.     || typeof target === 'function'
13.   }
14.   function clone(target){
15.     /**
16.      * 基本数据类型
17.      * 操作：直接返回
18.      */
19.     if(!isObject(target))return target;
21.     /**
22.      * Date和RegExp对象类型
23.      * 操作：使用构造函数复制
24.      */
25.     if([Date, RegExp].includes(target.constructor)){
26.       return new target.constructor(target);
27.     }
29.     /**
30.      * 函数类型
31.      */
32.     if(typeof target==='function'){
33.       return new Function('return ' + target.toString())();
34.     }
36.     /**
37.      * 数组类型
38.      */
39.     if(Array.isArray(target)){
40.       return target.map(el => clone(el));
41.     }
43.     /**
44.      * 检查是否存在循环引用
45.      */
46.     if(map.has(target))return map.get(target);
48.     /**
49.      * 处理Map对象类型
50.      */
51.     if(target instanceof Map){
52.       const res = new Map();
53.       map.set(target, res);
54.       target.forEach((val, key) => {
55.         // 如果Map中的val是对象，也得深拷贝
56.         res.set(key, isObject(val) ? clone(val) : val);
57.       })
58.       return res;
59.     }
61.     /**
62.      * 处理Set对象类型
63.      */
64.     if(target instanceof Set){
65.       const res = new Set();
66.       map.set(target, res);
67.       target.forEach(val => {
68.         // 如果val是对象类型，则递归深拷贝
69.         res.add(isObject(val) ? clone(val) : val);
70.       })
71.       return res;
72.     }
74.     //==========================================
75.     // 接下来是常规对象类型
76.     //==========================================
77.    
78.     // 收集key(包括Symbol和不可枚举的属性)
79.     const keys = Reflect.ownKeys(target);
80.     // 收集各个key的描述符
81.     const allDesc = {};
82.     keys.forEach(key => {
83.       allDesc[key] = Reflect.getOwnPropertyDescriptor(target, key);
84.     })
85.     // 创建新对象(浅拷贝)
86.     const res = Reflect.construct(Reflect.getPrototypeOf(target).constructor, []);
87.     // 在递归调用clone之前记录新对象，避免循环
88.     map.set(target, res);
89.     // 赋值并检查是否val是否为对象类型
90.     keys.forEach(key => {
91.       // 添加对象描述符
92.       Reflect.defineProperty(res, key, allDesc[key]);
93.       // 赋值
94.       const val = target[key];
95.       res[key] = isObject(val) ? clone(val) : val;
96.     });
97.     return res;
98.   }
100.   return clone(target);
101. }

复制代码

使用jest测试

安装jest

1. pnpm install jest --save-dev

复制代码

这里我使用的版本是：

1. {
2.     ...
3.     "devDependencies": {
4.             "jest": "^29.7.0"  
5.     },
6.     ...
7. }

复制代码

指令

package.json

1. {
2.     ...
3.     "scripts": {
4.         "test": "jest"
5.     },
6.     ...
7. }

复制代码

编写测试用例

deepClone.test.js

1. const deepClone = require('./deepClone');
3. test('deep clone primitive types', () => {
4.   expect(deepClone(42)).toBe(42);
5.   expect(deepClone('hello')).toBe('hello');
6.   expect(deepClone(null)).toBeNull();
7.   expect(deepClone(undefined)).toBeUndefined();
8.   expect(deepClone(true)).toBe(true);
9. });
11. test('deep clone array', () => {
12.   const arr = [1, { a: 2 }, [3, 4]];
13.   const clonedArr = deepClone(arr);
14.   expect(clonedArr).toEqual(arr);
15.   expect(clonedArr).not.toBe(arr);
16.   expect(clonedArr[1]).not.toBe(arr[1]);
17.   expect(clonedArr[2]).not.toBe(arr[2]);
18. });
20. test('deep clone object', () => {
21.   const obj = { a: 1, b: { c: 2 } };
22.   const clonedObj = deepClone(obj);
23.   expect(clonedObj).toEqual(obj);
24.   expect(clonedObj).not.toBe(obj);
25.   expect(clonedObj.b).not.toBe(obj.b);
26. });
28. test('deep clone Map', () => {
29.   const map = new Map();
30.   map.set('a', 1);
31.   map.set('b', { c: 2 });
32.   const clonedMap = deepClone(map);
33.   expect(clonedMap).toEqual(map);
34.   expect(clonedMap).not.toBe(map);
35.   expect(clonedMap.get('b')).not.toBe(map.get('b'));
36. });
38. test('deep clone Set', () => {
39.   const obj1 = { a: 1 };
40.   const obj2 = { b: 2 };
41.   const set = new Set([1, 'string', obj1, obj2]);
42.   const clonedSet = deepClone(set);
43.   expect(clonedSet).toEqual(set);
44.   expect(clonedSet).not.toBe(set);
45.   expect(clonedSet.has(1)).toBe(true);
46.   expect(clonedSet.has('string')).toBe(true);
47.   const clonedObj1 = Array.from(clonedSet).find(item => typeof item === 'object' && item.a === 1);
48.   const clonedObj2 = Array.from(clonedSet).find(item => typeof item === 'object' && item.b === 2);
50.   expect(clonedObj1).toEqual(obj1);
51.   expect(clonedObj1).not.toBe(obj1);
53.   expect(clonedObj2).toEqual(obj2);
54.   expect(clonedObj2).not.toBe(obj2);
55. });
57. test('deep clone with Symbol keys', () => {
58.   const sym = Symbol('key');
59.   const obj = { [sym]: 1, a: 2 };
60.   const clonedObj = deepClone(obj);
61.   expect(clonedObj).toEqual(obj);
62.   expect(clonedObj[sym]).toBe(1);
63.   expect(clonedObj.a).toBe(2);
64. });
66. test('deep clone with non-enumerable properties', () => {
67.   const obj = {};
68.   Object.defineProperty(obj, 'a', { value: 1, enumerable: false });
69.   const clonedObj = deepClone(obj);
70.   expect(clonedObj).toHaveProperty('a', 1);
71.   expect(Object.keys(clonedObj)).not.toContain('a');
72. });
74. test('deep clone with property descriptors', () => {
75.   const obj = {};
76.   Object.defineProperty(obj, 'a', {
77.     value: 1,
78.     writable: false,
79.     configurable: false,
80.     enumerable: true
81.   });
82.   const clonedObj = deepClone(obj);
83.   const desc = Object.getOwnPropertyDescriptor(clonedObj, 'a');
84.   expect(desc.value).toBe(1);
85.   expect(desc.writable).toBe(false);
86.   expect(desc.configurable).toBe(false);
87.   expect(desc.enumerable).toBe(true);
88. });
90. test('deep clone circular references', () => {
91.   const obj = { a: 1 };
92.   obj.self = obj;
93.   const clonedObj = deepClone(obj);
94.   expect(clonedObj).toEqual(obj);
95.   expect(clonedObj.self).toBe(clonedObj);
96.   expect(clonedObj.self).not.toBe(obj);
97. });

复制代码

测试结果

1. npm run test

复制代码

来源:https://www.cnblogs.com/feixianxing/p/18305861/javascript-deep-clone-and-shallow-clone
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！