• JS高级 之 深拷贝 && 浅拷贝

    目录

    一、浅拷贝的实现

    1. Object.assgin

    2. 展开运算符

    3. Array.prototype.concat

    4. Array.prototype.slice

    二、深拷贝的实现

    0. 判断一个值是否是对象类型

    1. JSON实现

    2. 手写深拷贝函数

    01 - 基本手写

    02 - 优化 => 数组

    03 - 优化 => 函数、Set、Map、Symbol

    04 - 优化 => 循环引用 

    04 - 最终方案 

    一、浅拷贝的实现

    1. Object.assgin

    1. const obj = {
    2.   name: 'star',
    3.   age: 18,
    4.   friend: {
    5.     name: 'coder'
    6.   }
    7. };
    8.  
    9. // 浅拷贝
    10. const info = Object.assign({}, obj);
    11. console.log(info); // { name: 'star', age: 18, friend: { name: 'coder' } }
    12.  
    13. // 修改引用类型数据，同时会更改
    14. obj.friend.name = '123';
    15. console.log(info); // { name: 'star', age: 18, friend: { name: '123' } }
    16.  
    17.

    2. 展开运算符

    1. const obj = {
    2.   name: 'star',
    3.   age: 18,
    4.   friend: {
    5.     name: 'coder'
    6.   }
    7. };
    8.  
    9. // 浅拷贝
    10. const info = { ...obj };
    11. console.log(info); // { name: 'star', age: 18, friend: { name: 'coder' } }
    12.  
    13. // 修改引用类型数据，同时会更改
    14. obj.friend.name = '123';
    15. console.log(info); // { name: 'star', age: 18, friend: { name: '123' } }

    3. Array.prototype.concat

    1. const arr = [1, { name: 'coder' }, '4'];
    2.  
    3. // 浅拷贝
    4. const info = [].concat.call(arr, [{ age: 18 }]);
    5. // const info = Array.prototype.concat.call(arr, [{ age: 18 }]);
    6.  
    7. console.log(info); //[ 1, { name: 'coder' }, '4', { age: 18 } ]
    8.  
    9. // 修改引用类型数据，同时会更改
    10. arr[1].name = '123';
    11. console.log(info); // [ 1, { name: '123' }, '4', { age: 18 } ]

    4. Array.prototype.slice

    1. const arr = [1, 2, { name: 'coder' }, '4'];
    2.  
    3. // 浅拷贝
    4. const info = [].slice.call(arr);
    5. // const info = [].slice.call(arr, 0);
    6. // const info = [].slice.call(arr, 0, 4);
    7. // const info = Array.prototype.slice.call(arr);
    8.  
    9. console.log(info); // [ 1, 2, { name: 'coder' }, '4' ]
    10.  
    11. // 修改引用类型数据，同时会更改
    12. arr[2].name = '123';
    13. console.log(info); // [ 1, 2, { name: '123' }, '4' ]

    二、深拷贝的实现

    0. 判断一个值是否是对象类型

    1. // 判断一个标识符是否是对象类型
    2. function isObject(value) {
    3.   const valueType = typeof value;
    4.   return value !== null && (valueType === 'object' || valueType === 'function');
    5. }

    1. JSON实现

    1. const obj = {
    2.   name: 'star',
    3.   age: 18,
    4.   friend: {
    5.     name: 'coder',
    6.     arr: [1, 2, 3, 4]
    7.   }
    8. };
    9.  
    10. // 深拷贝
    11. const info = JSON.parse(JSON.stringify(obj));
    12. console.log(info);
    13.  
    14. // 修改原来属性，不会影响新创建的对象
    15. obj.friend.name = '123';
    16.  
    17. console.log(info);

    缺点 : 

            1. function 不会被转化，直接忽略掉了

            2. symbal 不会被转化，直接忽略掉了

            3. 存在undefined、NaN 之类情况会转化错误

            4. 存在循环引用的情况直接报错

    2. 手写深拷贝函数

    01 - 基本手写

    1. function isObject(value) {
    2.   const valueType = typeof value;
    3.   return value !== null && (valueType === 'object' || valueType === 'function');
    4. }
    5.  
    6. function deepCopy(originValue) {
    7.   // 1. 如果不是引用类型，直接返回
    8.   if (!isObject(originValue)) {
    9.     return originValue;
    10.   }
    11.   // 2. 创建新对象
    12.   const newObj = {};
    13.   for (const key in originValue) {
    14.     // 3. 赋值的时候，进行递归
    15.     newObj[key] = deepCopy(originValue[key]);
    16.   }
    17.   // 4. 返回新对象
    18.   return newObj;
    19. }
    20.  
    21. const obj = {
    22.   name: 'star',
    23.   age: 18,
    24.   friend: {
    25.     name: 'coder'
    26.   }
    27. };
    28.  
    29. // 深拷贝
    30. const info = deepCopy(obj);
    31. console.log(info);
    32.  
    33. // 修改原来属性，不会影响新创建的对象
    34. obj.friend.name = '123';
    35.  
    36. console.log(info);

    02 - 优化 => 数组

    1. function isObject(value) {
    2.   const valueType = typeof value;
    3.   return value !== null && (valueType === 'object' || valueType === 'function');
    4. }
    5.  
    6. function deepCopy(originValue) {
    7.   // 1. 如果不是引用类型，直接返回
    8.   if (!isObject(originValue)) {
    9.     return originValue;
    10.   }
    11.   // 2. 创建新对象 | 数组
    12.   const newObj = Array.isArray(originValue) ? [] : {};
    13.   for (const key in originValue) {
    14.     // 3. 赋值的时候，进行递归
    15.     newObj[key] = deepCopy(originValue[key]);
    16.   }
    17.   // 4. 返回新对象
    18.   return newObj;
    19. }
    20.  
    21. const obj = {
    22.   name: 'star',
    23.   age: 18,
    24.   friend: {
    25.     name: 'coder',
    26.     info: [1, 2, 3, 4, 5]
    27.   }
    28. };
    29.  
    30. // 深拷贝
    31. const info = deepCopy(obj);
    32. console.log(info);
    33. obj.age = 20;
    34. console.log(info);

    03 - 优化 => 函数、Set、Map、Symbol

    1. function isObject(value) {
    2.   const valueType = typeof value;
    3.   return value !== null && (valueType === 'object' || valueType === 'function');
    4. }
    5.  
    6. // 深拷贝函数
    7. function deepCopy(originValue) {
    8.   /**
    9.    * 值是 symbol数据类型
    10.    * 需写在基本数据类型之前，否则会被返回错误
    11.    */
    12.   if (typeof originValue === 'symbol') {
    13.     return Symbol(originValue.description);
    14.   }
    15.   /**
    16.    * 基本数据类型，直接返回
    17.    */
    18.   if (!isObject(originValue)) {
    19.     return originValue;
    20.   }
    21.   /**
    22.    * 函数类型
    23.    * 不需要拷贝，直接返回
    24.    */
    25.   if (typeof originValue === 'function') {
    26.     return originValue;
    27.   }
    28.   /**
    29.    * set类型
    30.    * 因为set类型不能被for...in，所以单独处理
    31.    */
    32.   if (originValue instanceof Set) {
    33.     const newSet = new Set();
    34.     for (const item of originValue) {
    35.       newSet.add(deepCopy(item));
    36.     }
    37.     return newSet;
    38.   }
    39.   /**
    40.    * map类型
    41.    * 因为set类型不能被for...in，所以单独处理
    42.    */
    43.   if (originValue instanceof Map) {
    44.     const newMap = new Map();
    45.     for (const [key, value] of originValue) {
    46.       newMap.set(deepCopy(key), deepCopy(value));
    47.     }
    48.     return newMap;
    49.   }
    50.   /**
    51.    * 对象，数组类型
    52.    */
    53.   const newObj = Array.isArray(originValue) ? [] : {};
    54.   // one - 遍历普通的key
    55.   for (const key in originValue) {
    56.     newObj[key] = deepCopy(originValue[key]);
    57.   }
    58.   // two - 遍历Symbol的key
    59.   const symbolKeys = Object.getOwnPropertySymbols(originValue);
    60.   for (const symbolKey of symbolKeys) {
    61.     newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey]);
    62.   }
    63.   // 4. 返回新对象 | 数组
    64.   return newObj;
    65. }
    66.  
    67. const symbolKey = Symbol('key是Symbol');
    68. const obj = {
    69.   name: 'star',
    70.   age: 18,
    71.   friend: {
    72.     name: 'coder',
    73.     info: [1, 2, 3, 4, 5]
    74.   },
    75.   play() {
    76.     console.log('playing!');
    77.   },
    78.   set: new Set([1, 22, 3]),
    79.   map: new Map([
    80.     [{ name: 5 }, 5],
    81.     [6, { name: 6 }]
    82.   ]),
    83.   [symbolKey]: 'key是Symbol',
    84.   symbolValue: Symbol('value是Symbol')
    85. };
    86.  
    87. // 深拷贝
    88. const info = deepCopy(obj);
    89. console.log(info);

    04 - 优化 => 循环引用 

    1. function isObject(value) {
    2.   const valueType = typeof value;
    3.   return value !== null && (valueType === 'object' || valueType === 'function');
    4. }
    5.  
    6. /**
    7.  * 循环引用解决方案 :
    8.  * 拷贝过的对象，不需要再次拷贝，直接返回即可
    9.  *    1. 使用 WeakMap 进行弱引用，用来判断是否拷贝过
    10.  *    2. 使用同一个 WeakMap
    11.  */
    12. function deepCopy(originValue, map = new WeakMap()) {
    13.   if (typeof originValue === 'symbol') {
    14.     return Symbol(originValue.description);
    15.   }
    16.  
    17.   if (!isObject(originValue)) {
    18.     return originValue;
    19.   }
    20.  
    21.   if (typeof originValue === 'function') {
    22.     return originValue;
    23.   }
    24.  
    25.   if (originValue instanceof Set) {
    26.     const newSet = new Set();
    27.     for (const item of originValue) {
    28.       // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    29.       newSet.add(deepCopy(item, map));
    30.     }
    31.     return newSet;
    32.   }
    33.  
    34.   if (originValue instanceof Map) {
    35.     const newMap = new Map();
    36.     for (const [key, value] of originValue) {
    37.       // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    38.       newMap.set(deepCopy(key, map), deepCopy(value, map));
    39.     }
    40.     return newMap;
    41.   }
    42.  
    43.   /**
    44.    * 每次创建对象前，判断map中是否已经拥有了 => 即是否已经拷贝过了
    45.    * 如果有，直接返回以前创建的对象
    46.    */
    47.   if (map.get(originValue)) {
    48.     return map.get(originValue);
    49.   }
    50.   const newObj = Array.isArray(originValue) ? [] : {};
    51.   /**
    52.    * 1. 每次创建新对象后，推入 WeakMap 中，用来保存
    53.    * 2. 当前的对象的地址作为 key ，值为新创建出来的对象
    54.    */
    55.   map.set(originValue, newObj);
    56.  
    57.   for (const key in originValue) {
    58.     // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    59.     newObj[key] = deepCopy(originValue[key], map);
    60.   }
    61.   const symbolKeys = Object.getOwnPropertySymbols(originValue);
    62.   for (const symbolKey of symbolKeys) {
    63.     // 为了使得使用的 map 都为同一个，调用时把map传入，使得map 都为最开始创建的那一个
    64.     newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map);
    65.   }
    66.   return newObj;
    67. }
    68.  
    69. const symbolKey = Symbol('key是Symbol');
    70. const obj = {
    71.   name: 'star',
    72.   age: 18,
    73.   friend: {
    74.     name: 'coder',
    75.     info: [1, 2, 3, 4, 5]
    76.   }
    77. };
    78. // 自己引用自己
    79. obj.obj = obj;
    80.  
    81. // 深拷贝
    82. const info = deepCopy(obj);
    83. console.log(info);

    04 - 最终方案 

    1. // 判断一个值是否是对象类型
    2. function isObject(value) {
    3.   const valueType = typeof value;
    4.   return value !== null && (valueType === 'object' || valueType === 'function');
    5. }
    6. // 深拷贝函数
    7. function deepCopy(originValue, map = new WeakMap()) {
    8.   if (typeof originValue === 'symbol') {
    9.     return Symbol(originValue.description);
    10.   }
    11.   if (!isObject(originValue)) {
    12.     return originValue;
    13.   }
    14.   if (typeof originValue === 'function') {
    15.     return originValue;
    16.   }
    17.   if (originValue instanceof Set) {
    18.     const newSet = new Set();
    19.     for (const item of originValue) {
    20.       newSet.add(deepCopy(item, map));
    21.     }
    22.     return newSet;
    23.   }
    24.   if (originValue instanceof Map) {
    25.     const newMap = new Map();
    26.     for (const [key, value] of originValue) {
    27.       newMap.set(deepCopy(key, map), deepCopy(value, map));
    28.     }
    29.     return newMap;
    30.   }
    31.  
    32.   if (map.get(originValue)) {
    33.     return map.get(originValue);
    34.   }
    35.   const newObj = Array.isArray(originValue) ? [] : {};
    36.   map.set(originValue, newObj);
    37.   for (const key in originValue) {
    38.     newObj[key] = deepCopy(originValue[key], map);
    39.   }
    40.   const symbolKeys = Object.getOwnPropertySymbols(originValue);
    41.   for (const symbolKey of symbolKeys) {
    42.     newObj[Symbol(symbolKey.description)] = deepCopy(originValue[symbolKey], map);
    43.   }
    44.   return newObj;
    45. }

  • 相关阅读:
    测试/开发程序员该不该跳槽？别忘了当初的梦想......
    【中秋国庆不断更】OpenHarmony组件内状态变量使用：@State装饰器
    IBM MQ 连接属性-示例
    WebSocket: 实时通信的理解与认识
    Redis - 11、集群（Cluster）
    JVM虚拟机：通过日志学习PS+PO垃圾回收器
    setTimeout引发的刨根问底
    Kotlin okhttp3 HttpClient
    Java运算符
    单目3D自动标注
  • 原文地址：https://blog.csdn.net/a15297701931/article/details/126711180