如何实现深拷贝

深拷贝是一种常见的操作,用于创建原对象的完全独立副本,避免原对象和副本之间的数据共享。深拷贝不仅复制了对象的第一层结构,还会递归复制所有嵌套的对象和数组,确保副本是完全独立的

什么叫做深拷贝?

深拷贝是指在复制一个对象或数组时,会递归地复制其所有嵌套的对象和数组,确保复制后的对象与原始对象完全独立,彼此之间互不影响。换句话说,深拷贝会创建一个新的对象,其中包含原始对象所有的值和嵌套对象的值的副本,而不是简单地复制引用。

说完深拷贝不得不提下浅拷贝

深拷贝与浅拷贝的区别在于,浅拷贝只复制对象本身,而不会复制对象内部的嵌套对象,这意味着如果原始对象中包含嵌套对象,浅拷贝后的对象和原始对象会共享这些嵌套对象,导致它们之间的修改会相互影响。

由此看来在处理复杂的数据结构时,深拷贝通常是更为可靠的选择。因为深拷贝是一种更加彻底和安全的复制方式,可以保证复制后的对象与原始对象之间完全独立,不会相互影响。

js实现深拷贝的几种方式

1.递归实现

递归是实现深拷贝的一种常见方式。通过递归遍历对象的所有属性,对每个属性进行复制,如果属性的值是对象或数组,则递归调用深拷贝函数。这样可以确保复制所有层级的嵌套结构,创建一个完全独立的副本。

ini 复制代码
function deepCopy(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    let copy = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }

    return copy;
}

2. JSON序列化与反序列化

另一种实现深拷贝的方式是利用JSON的序列化和反序列化。通过将对象转换为JSON字符串,再将JSON字符串转换回对象,可以实现深拷贝的效果。这种方法简单易用,但不适用于包含函数 、正则表达式等特殊类型的对象。

javascript 复制代码
function deepCopy(obj) {
    return JSON.parse(JSON.stringify(obj));
}

3.使用Proxy对象。结合递归实现深拷贝

通过Proxy对象的construct和get方法来拦截对象的构造和属性访问操作。当访问对象的属性时,如果属性的值是对象,则递归地对该属性进行深拷贝,并返回一个新的代理对象。这样就可以实现一个带有特殊写法的深拷贝函数。

需要注意的是,使用Proxy对象实现深拷贝虽然比较巧妙和骚气,但也可能会增加代码的复杂性和理解难度。在实际应用中,需要根据具体情况选择合适的深拷贝方式,确保代码的可读性和可维护性。

javascript 复制代码
function deepCopy(obj) {
  let cloned = new Proxy(obj, {
    construct(target, args) {
      return deepCopy(args[0]);
    },
    get(target, key) {
      if (typeof target[key] === 'object' && target[key] !== null) {
        return new Proxy(target[key], cloned);
      }
      return target[key];
    }
  });

  return cloned;
}
相关推荐
对空六课3 小时前
两个统计平台数据不同:用同一时间窗和事件样本做差异定位
大数据·前端·网络·数据库
lpfasd12311 小时前
node-sass 停止维护!老项目迁移 Dart Sass 完整教程
前端·rust·sass
Data analyse45614 小时前
rnweb 回放数据量太大怎么办?分片存储与断点续传的实现思路
前端·网络·算法·数据分析
xiaogai_gai14 小时前
金蝶收料通知单查询策略实战教程:从源系统拉取到中间层落地的完整路径
java·前端·数据库
环境栈笔记15 小时前
指纹浏览器 WebRTC 怎么设置?从 ICE 候选、代理出口到功能验证
前端·人工智能·后端·自动化
赵大仁15 小时前
官网性能优化实战:LCP 3.2s → 2.1s、CLS 0.107 → 0,以及被我推翻的 6 个判断
前端·性能优化·cls·lcp·core web vitals
xiancai_xianyu15 小时前
Text2SQL落地生产库前,SQL要过哪三道闸
前端·数据库·sql·sql注入·text2sql·ai agent开发·企业级ai框架
小羊没烦恼!15 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
史瓦辛格16 小时前
给 DeepSeek Harness 写费用插件:把「这次会话花了多少钱」算准
前端·deepseek
星光不问赶路人16 小时前
Vue 3 + TypeScript 中 enum 的使用实践
前端·vue.js