深拷贝的实现

本是古典何须时尚 2023-10-16 12:49 14阅读 0赞

https://cloud.tencent.com/developer/article/2019581

function deepClone(source) {
        
      if (typeof source !== 'object' || source == null) {
        
        return source;
      }
      const target = Array.isArray(source) ? [] : {
        };
      for (const key in source) {
        
        if (Object.prototype.hasOwnProperty.call(source, key)) {
        
          if (typeof source[key] === 'object' && source[key] !== null) {
        
            target[key] = deepClone(source[key]);
          } else {
        
            target[key] = source[key];
          }
        }
      }
      return target;
    }

解决循环引用的问题：

function deepCopy(obj, map = new Map()) {
        
      // 如果 obj 不是对象或者是 null，直接返回 obj
      if (typeof obj !== 'object' || obj === null) {
        
        return obj;
      }
      
      // 检查 map 中是否已经存储了 obj 的拷贝
      if (map.has(obj)) {
        
        return map.get(obj);
      }
      
      // 如果 obj 是数组，则创建一个新数组，否则创建一个新对象
      const copy = Array.isArray(obj) ? [] : {
        };
      
      // 将 copy 存储到 map 中，与原 obj 建立映射关系
      map.set(obj, copy);
      
      // 遍历 obj 的所有属性，递归拷贝
      for (const key in obj) {
        
        if (Object.hasOwnProperty.call(obj, key)) {
        
          copy[key] = deepCopy(obj[key], map);
        }
      }
      
      return copy;
    }
    
    const obj = {
         a: 1, b: {
         c: 2 } };
    obj.self = obj;
    const copy = deepCopy(obj);
    console.log(copy);

经过测试，函数可以拷贝。但是date和正则表达式无法拷贝：

const objWithDateAndRegExp = {
        
      date: new Date(),
      regExp: /abc/gi,
    };

function deepCopy(obj, map = new Map()) {
        
          // 如果 obj 不是对象或者是 null，直接返回 obj
          if (typeof obj !== "object" || obj === null) {
        
            return obj;
          }
    
          // 检查 map 中是否已经存储了 obj 的拷贝
          if (map.has(obj)) {
        
            return map.get(obj);
          }
    
          let copy;
          if (obj instanceof Date) {
        
            copy = new Date(obj);
          } else if (obj instanceof RegExp) {
        
            copy = new RegExp(obj.source, obj.flags);
          } else {
        
            // 如果 obj 是数组，则创建一个新数组，否则创建一个新对象
            copy = Array.isArray(obj) ? [] : {
        };
          }
    
          map.set(obj, copy);
    
          for (const key in obj) {
        
            if (Object.hasOwnProperty.call(obj, key)) {
        
              copy[key] = deepCopy(obj[key], map);
            }
          }
    
          return copy;
        }
    
        // 含有 Date 和 RegExp 属性的对象
        const obj = {
        
          date: new Date(),
          regExp: /abc/gi,
        };
    
        const result = deepCopy(obj);
        console.log(result); // 输出：{ date: 2023-09-25T...Z, regExp: /abc/gi }

接下来是处理symbol 和undefined属性

首先我们要介绍一个函数Object.getOwnPropertySymbols（），它会返回一个对象上所有的symbol属性。为什么需要它呢？因为普通的for in 无法遍历symbol属性，需要通过它来获取。

const sym = Symbol("symbolKey");
        const obj = {
        
          a: "1",
          b: "2",
          [sym]: "symbolValue",
        };
    
        // 使用 for...in 循环遍历 obj 的属性
        for (const key in obj) {
        
          console.log(key); // 输出：a  b
        }
    
        // 使用 Object.getOwnPropertySymbols 获取 symbol 类型的属性
        const symbolKeys = Object.getOwnPropertySymbols(obj);
        for (const key of symbolKeys) {
        
          console.log(key); // 输出：Symbol(symbolKey)
          console.log(obj[key]); // 输出：symbolValue
        }

在理解了Object.getOwnPropertySymbols的作用之后，我们就可以在深拷贝中使用它了。

function deepCopy(obj, map = new Map()) {
        
          if (typeof obj !== "object" || obj === null) {
        
            return obj;
          }
    
          if (map.has(obj)) {
        
            return map.get(obj);
          }
    
          let copy;
          if (obj instanceof Date) {
        
            copy = new Date(obj);
          } else if (obj instanceof RegExp) {
        
            copy = new RegExp(obj.source, obj.flags);
          } else {
        
            copy = Array.isArray(obj) ? [] : {
        };
          }
    
          map.set(obj, copy);
    
          for (const key in obj) {
        
            if (Object.hasOwnProperty.call(obj, key)) {
        
              copy[key] = deepCopy(obj[key], map);
            }
          }
    
          // 处理 symbol 类型的属性
          const symbolKeys = Object.getOwnPropertySymbols(obj);
          for (const key of symbolKeys) {
        
            copy[key] = deepCopy(obj[key], map);
          }
    
          return copy;
        }
    
        //  symbol 和 undefined 属性
        const sym = Symbol("test");
        const obj = {
        
          [sym]: "symbol value",
          undef: undefined,
        };
    
        const copy = deepCopy(obj);
        console.log(copy);

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关字节一面：深拷贝浅拷贝的区别？如何实现一个深拷贝？

最近博主在字节面试中遇到这样一个面试题，这个问题也是前端面试的高频问题，我们经常需要对后端返回的数据进行处理才能渲染到页面上，一般我们会讲数据进行拷贝，在副本对象里进行处...

àì夳堔傛蜴生んèń/ 2024年04月17日 10:28/ 0 赞/ 24 阅读

相关深拷贝的实现方式

现象复制对象后，如果修改了原对象或新对象的数据，造成了对其他对象的数据也同时发生了变化的现象，就是浅拷贝；对象之间仍然存在关联。如果复制后的对象与原对象，无论数据如

叁歲伎倆/ 2024年04月08日 10:13/ 0 赞/ 40 阅读

相关前端深拷贝与浅拷贝的实现

1、浅拷贝和深拷贝的定义 1.1、浅拷贝有两种方式，一种是把一个对象里面的所有的属性值和方法都复制给另一个对象，另一种是直接把一个对象赋给另一个对象，使得两个都指

墨蓝/ 2024年02月20日 13:07/ 0 赞/ 14 阅读

相关深拷贝的实现

https://cloud.tencent.com/developer/article/2019581 function deepClone(source) {

本是古典何须时尚/ 2023年10月16日 12:49/ 0 赞/ 15 阅读

相关 JS实现深拷贝

[JS实现深拷贝][JS] 一、赋值、浅拷贝与深拷贝的区别 ![format_png][] 二、深拷贝的方法 1.JSON转换 var

桃扇骨/ 2023年06月16日 08:08/ 0 赞/ 23 阅读

相关如何实现深拷贝？

利用正则快速转换指定时间格式 \[AppleScript\] 纯文本查看复制代码 [?][Link 1] <table> <tbody> <tr> <

朱雀/ 2023年03月14日 13:23/ 0 赞/ 163 阅读

相关 js深拷贝的实现

deepClone(obj){ var target = { }; //目标数组 for(var key in o

╰+哭是因爲堅強的太久メ/ 2023年02月10日 15:29/ 0 赞/ 139 阅读

相关面试官：深拷贝浅拷贝的区别？如何实现一个深拷贝？

![format_png][] 一、数据类型存储 `JavaScript`中存在两大数据类型：基本类型引用类型基本类型数据保存在在栈内存中引用

向右看齐/ 2022年10月29日 07:48/ 0 赞/ 139 阅读

相关浅拷贝与深拷贝的实现

文章目录 1 问题背景 2 浅拷贝 2.1 概念 2.2 例子 3 深拷贝 3.1 概念 3.2 例

我不是女神ヾ/ 2022年10月12日 01:34/ 0 赞/ 159 阅读

相关 JavaScript实现深拷贝与浅拷贝

深拷贝的两种实现： 1、递归深拷贝这个函数中，申请了一块新的内存，将数组的值复制过去。 function deepCopy(source) {

╰半夏微凉°/ 2022年06月12日 07:14/ 0 赞/ 187 阅读