js怎样实现深拷贝

深拷贝是指创建一个与原对象完全独立的新对象,修改新对象不会影响原对象。1. 实现深拷贝的方法有多种,最简单的是json.parse(json.stringify(obj)),但其无法处理函数、undefined、symbol及循环引用。2. 更可靠的深拷贝需使用递归配合weakmap缓存已拷贝对象,避免循环引用导致的栈溢出。3. 函数无法真正深拷贝,通常只能复制引用,通过闭包或this绑定实现行为一致。4. 性能方面,深拷贝耗时耗资源,应根据对象复杂度选择合适方法,简单对象可用json方法,复杂对象推荐递归或第三方库如lodash的_.clonedeep()。5. 应用场景上,浅拷贝适用于仅需复制引用的场景,如react状态更新;深拷贝适用于需完全隔离数据的场景,如数据备份、防止原始数据被篡改等。因此,选择深拷贝还是浅拷贝应基于具体需求权衡性能与安全性。

js怎样实现深拷贝

深拷贝,简单来说,就是创建一个新对象,这个新对象和原始对象完全独立,修改新对象不会影响到原始对象。这和浅拷贝不同,浅拷贝只是复制对象的引用,修改拷贝后的对象会影响到原始对象。

js怎样实现深拷贝

解决方案

JavaScript实现深拷贝,方法有很多,各有优劣。最简单粗暴的就是

JSON.parse(JSON.stringify(obj))

,但这种方法有局限性,比如不能拷贝函数、

undefined

Symbol

等特殊类型,而且如果对象中存在循环引用,还会报错。

js怎样实现深拷贝

更健壮的深拷贝实现需要递归遍历对象,并对不同类型的值进行特殊处理。

function deepCopy(obj, cache = new WeakMap()) {  // 处理 null 和 undefined  if (obj === null || typeof obj !== "object") {    return obj;  }  // 处理循环引用  if (cache.has(obj)) {    return cache.get(obj);  }  let copy;  if (Array.isArray(obj)) {    copy = [];  } else {    copy = {};  }  cache.set(obj, copy);  for (let key in obj) {    if (obj.hasOwnProperty(key)) {      copy[key] = deepCopy(obj[key], cache);    }  }  return copy;}// 示例const obj = {  name: "Alice",  age: 30,  address: {    city: "New York",    zip: 10001,  },  hobbies: ["reading", "coding"],  greet: function() {    console.log("Hello!");  },  symbol: Symbol('test'),  undef: undefined};obj.circular = obj; // 创建循环引用const newObj = deepCopy(obj);newObj.name = "Bob";newObj.address.city = "Los Angeles";newObj.hobbies.push("hiking");console.log("Original object:", obj);console.log("Copied object:", newObj);

这个

deepCopy

函数使用递归的方式遍历对象,并且用

WeakMap

来缓存已经拷贝过的对象,防止循环引用导致栈溢出。 注意,函数和

Symbol

类型的值不会被拷贝,会丢失。

undefined

会被保留。

js怎样实现深拷贝

如何处理函数类型的深拷贝?

理论上,完全深拷贝函数是不可行的,因为函数内部的状态是无法完全复制的。但是,可以考虑复制函数的引用,或者创建一个新的函数,并复制原始函数的代码。 复制函数代码涉及到解析和重构函数的抽象语法树 (AST),比较复杂,一般不推荐。 大多数情况下,复制函数引用就足够了。

function deepCopyWithFunction(obj, cache = new WeakMap()) {    if (obj === null || typeof obj !== "object") {        return obj;    }    if (cache.has(obj)) {        return cache.get(obj);    }    let copy;    if (Array.isArray(obj)) {        copy = [];    } else if (typeof obj === 'function') {        // 复制函数引用        copy = obj;        return copy;    }    else {        copy = {};    }    cache.set(obj, copy);    for (let key in obj) {        if (obj.hasOwnProperty(key)) {            copy[key] = deepCopyWithFunction(obj[key], cache);        }    }    return copy;}const objWithFunction = {    name: "Alice",    greet: function() {        console.log("Hello, " + this.name);    }};const newObjWithFunction = deepCopyWithFunction(objWithFunction);newObjWithFunction.name = "Bob";newObjWithFunction.greet(); // 输出 "Hello, Bob"objWithFunction.greet(); // 输出 "Hello, Alice"

这种方法仅仅复制了函数的引用,所以

newObjWithFunction.greet()

中的

this.name

会指向

newObjWithFunction

name

属性。

深拷贝的性能考量有哪些?

深拷贝是一个相对耗时的操作,特别是对于大型对象。 递归遍历和创建新对象都需要消耗大量的CPU和内存。

JSON.parse(JSON.stringify(obj))

在处理大型对象时,效率也比较低。

在实际应用中,需要根据对象的复杂度和性能要求,选择合适的深拷贝方法。 如果对象比较简单,且不需要拷贝函数等特殊类型,

JSON.parse(JSON.stringify(obj))

是一个不错的选择。 如果对象比较复杂,且需要处理循环引用,那么就需要使用递归的方式实现深拷贝。

还可以考虑使用一些第三方库,比如Lodash的

_.cloneDeep()

方法,它提供了更完善的深拷贝实现,并且经过了性能优化。

深拷贝和浅拷贝的应用场景分别是什么?

浅拷贝通常用于只需要复制对象的引用,而不需要创建新对象的场景。 比如,在React中,可以使用浅拷贝来更新组件的状态,如果状态对象中的某个属性发生了变化,只需要创建一个新的状态对象,并复制其他属性的引用即可。

深拷贝则用于需要创建完全独立的对象副本的场景。 比如,在处理用户输入的数据时,可以使用深拷贝来防止恶意用户修改原始数据。 又或者,在进行数据持久化时,可以使用深拷贝来创建数据的备份,防止数据丢失

以上就是js怎样实现深拷贝的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/118880.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月30日 03:49:21
下一篇 2025年11月30日 04:16:48

相关推荐

  • exit0在c语言中怎么用

    exit() 函数立即终止正在运行的程序,向父进程或操作系统返回退出状态代码。用法:exit(status),其中 status 为退出状态代码,0 表示正常退出,其他值表示异常退出。该函数不会返回任何值。 exit() 函数在 C 语言中的用法 exit() 函数用于立即终止正在运行的程序。 用法…

    2025年12月18日
    000
  • c++中int和long的区别

    int 和 long 都是 C++ 中的整型类型,主要区别在于范围和存储空间:范围:int 为 32 位整数,范围为 [-2^31, 2^31-1];long 为 64 位整数,范围为 [-2^63, 2^63-1]。存储空间:int 通常占用 4 个字节,long 通常占用 8 个字节。 C++ …

    2025年12月18日
    000
  • C++语法中的陷阱与解决方案

    C++ 语法中的陷阱与解决方案 C++ 是一门强大的编程语言,但它的语法也让程序员很容易陷入陷阱。本文将讨论 C++ 语法中的一些常见陷阱,并提供避免或解决它们的解决方案。 陷阱 1:误用引用 问题:将一个指针错误地用作引用。 立即学习“C++免费学习笔记(深入)”; 代码示例: int& …

    2025年12月18日
    000
  • 如何部署和维护C++ Web应用程序?

    部署和维护 c++++ web 应用程序涉及以下步骤:部署:构建应用程序、部署可执行文件或容器、配置环境。维护:监控应用程序、应用更新、备份和恢复、安全维护。 如何部署和维护 C++ Web 应用程序 部署和维护 C++ Web 应用程序涉及几个关键步骤,以确保顺畅可靠的操作。 部署 立即学习“C+…

    2025年12月18日
    000
  • C++技术中的大数据处理:如何建立健壮的大数据处理系统以应对数据故障和丢失?

    为了构建一个鲁棒的大数据处理系统以应对数据故障和丢失,本文建议使用 c++++ 技术实施以下策略:防止数据故障:计算校验和、创建副本、存储奇偶校验位。恢复数据丢失:记录操作日志、创建快照、使用数据恢复工具。实战案例中,通过计算校验和、创建副本等措施,提高了 hadoop 系统的健壮性。 建立健壮的大…

    2025年12月18日
    000
  • C++技术中的机器学习:使用C++进行机器学习项目的常见错误

    在 c++++ 机器学习中,常见错误包括:变量范围管理不当导致意外结果(使用限定符和局部作用域避免);指针管理错误导致野指针或内存访问问题(使用智能指针或 raii 原则);不正确的类型转换导致数据丢失(使用显式类型转换并检查成功);过度优化导致性能下降(关注算法选择和编码风格);多线程同步问题导致…

    2025年12月18日
    000
  • c语言中int的用法

    int 是 C 语言中的整数类型,存储介于最低值和最高值之间的整数。它可用于声明变量、初始化变量、进行算术和比较运算、位运算。int 类型可使用 short、long、long long 修饰符调整范围。 int 在 C 语言中的用法 int 是 C 语言中用于表示整数类型的数据类型。它可以存储介于…

    2025年12月18日
    000
  • c++中endl的作用

    c++kquote>C++ 中 endl 是一个流插入运算符,作用如下:向输出流插入换行符。刷新输出流。通常建议使用 endl 而不是换行符字符 ‘n’,因为它确保了输出立即被刷新,避免数据丢失或顺序问题。 c++ 中 endl 的作用 endl 是 C++ 中的一个流…

    2025年12月18日
    000
  • C++ 函数隐式类型转换参数传递的风险

    c++++ 隐式类型转换的参数传递可能导致数据或精度丢失、指针错误和运行时错误。建议明确声明函数参数类型并进行必要的类型检查,避免隐式类型转换带来的风险。 C++ 函数隐式类型转换参数传递的风险 隐式类型转换在 C++ 中是一种隐含的类型转换,它允许将一种数据类型自动转换为另一种数据类型。虽然这在某…

    2025年12月18日
    000
  • C# Avalonia如何集成Entity Framework Core Avalonia EF Core教程

    在 Avalonia 中集成 EF Core 可行,关键在于异步操作、DI 注入 DbContextFactory 及正确管理生命周期;需避免 UI 线程阻塞,推荐用 AddDbContextFactory 而非 Scoped 或 Singleton 注册。 在 Avalonia 中集成 Entit…

    2025年12月17日
    000
  • MAUI怎么调用REST API MAUI网络请求HttpClient方法

    在 MAUI 中调用 REST API 应使用单例注册的 HttpClient,避免频繁创建导致套接字耗尽;通过构造函数注入后,可用 GetFromJsonAsync 安全获取 JSON 数据并映射为 record 类型。 在 MAUI 中调用 REST API,最常用、推荐的方式就是使用 Http…

    2025年12月17日
    000
  • Avalonia如何调用文件选择对话框 Avalonia OpenFileDialog使用教程

    Avalonia中调用文件选择对话框需使用OpenFileDialog类,必须传入已激活的Window实例并await ShowAsync(),支持跨平台且返回绝对路径;Filters设置文件类型过滤器,AllowMultiple控制多选,无需额外NuGet包(Avalonia 11+已内置)。 在…

    2025年12月17日
    000
  • C# MAUI怎么实现文件上传 MAUI上传文件到服务器

    .NET MAUI 文件上传需三步:1. 申请存储读取权限(Android/iOS);2. 用 FilePicker.PickAsync 选文件并读为字节数组;3. 用 HttpClient 构造 MultipartFormDataContent 发送,注意流一次性及前后端字段名、MIME 对齐。 …

    2025年12月17日
    000
  • SignalR怎么实现实时通信 SignalR Hub推送消息方法

    SignalR 通过 Hub 建立服务端与客户端的双向长连接实现实时通信,支持自动降级传输方式。Hub 管理连接、分组与消息推送,客户端需调用 start() 并监听指定函数名接收消息。 SignalR 实现实时通信,核心就是靠 Hub(集线器) 建立服务端与客户端的双向长连接,并通过它来主动推送消…

    2025年12月17日
    000
  • Avalonia怎么实现一个类似VSCode的布局 Avalonia可停靠窗口

    Avalonia 本身不内置可停靠布局系统,但可通过第三方库 Avalonia.Dock 实现接近 VSCode 的体验;它支持拖拽停靠、浮动窗口、布局保存/恢复、跨平台及主题适配,并提供事件链与模型接口用于状态管理与扩展。 Avalonia 本身不内置类似 VSCode 的可停靠(Docking)…

    2025年12月17日
    000
  • ASP.NET Core怎么创建Web API ASP.NET Core创建RESTful API步骤

    ASP.NET Core 创建 Web API 的核心是 Controller + [ApiController] + 模型绑定 + 内置 JSON 序列化;需新建项目、添加带特性的控制器、可选配置 JSON 和 CORS。 ASP.NET Core 创建 Web API 很简单,核心是用 Cont…

    2025年12月17日
    000
  • .NET的跨平台能力有多强?在Linux和macOS上运行.NET应用

    .NET已发展为成熟主流的跨平台开发平台,支持Windows、Linux、macOS及多种芯片架构;通过dotnet CLI实现统一开发体验,提供框架依赖和独立部署两种模式;结合Visual Studio Code、Rider等工具构建完整开发生态,可高效开发并部署应用至多平台。 .NET的跨平台能…

    2025年12月17日
    000
  • C# 局部函数(Local Functions)的应用场景 – 提高代码的可读性

    局部函数是C# 7.0引入的轻量级作用域分组工具,用于在方法内定义私有函数,提升逻辑归属清晰度、减少参数传递、避免类作用域污染。 局部函数是 C# 7.0 引入的重要特性,它允许你在方法内部定义一个私有函数,作用域仅限于该方法。它的核心价值不在于功能创新,而在于让逻辑归属更清晰、减少参数传递、避免污…

    2025年12月17日
    000
  • EF Core在控制台程序中怎么用 EF Core控制台应用入门

    EF Core在控制台程序中入门只需四步:建模型、配上下文、跑迁移、写代码操作数据;依次完成项目创建与NuGet安装、定义实体类和DbContext、执行Add-Migration与Update-Database生成数据库、在Main中用Add/SaveChanges/ToList实现增删改查。 E…

    2025年12月17日
    000
  • Avalonia如何实现一个可停靠的布局 Avalonia Docking控件

    Avalonia 本身不内置 Docking 功能,需通过第三方库 Avalonia.Dock 实现专业停靠界面;它支持拖拽、标签页、布局序列化,模仿 Visual Studio 布局体验,是当前最成熟稳定的方案。 Avalonia 本身不内置 Docking(停靠)功能,但可以通过第三方库 Ava…

    2025年12月17日
    000

发表回复

登录后才能评论
关注微信