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/1514024.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 08:09:43
下一篇 2025年12月20日 08:09:54

相关推荐

  • JS如何实现剪切功能

    javascript实现剪切功能的核心是先复制内容到剪贴板再删除原始内容。1. 使用 document.execcommand(‘cut’) 可在用户交互下自动完成剪切,但该方法已被废弃,依赖文本选中且兼容性逐渐受限;2. 采用 clipboard api 配合手动删除,通过…

    2025年12月20日
    000
  • javascript怎么实现数组环形缓冲区

    javascript实现环形缓冲区的核心是使用固定大小数组和头尾指针配合模运算实现高效fifo操作。1. 其应用场景包括实时数据流处理(如webrtc音视频帧)、固定大小日志记录、撤销重做功能、固定缓存和游戏事件队列,均需满足固定容量、先进先出、自动淘汰旧数据的需求。2. 性能优化策略包括合理设定初…

    2025年12月20日 好文分享
    000
  • JavaScript异步操作进阶:高效管理并发Promise与forEach陷阱

    在JavaScript中,处理并发异步操作时,forEach循环与async/await的组合常会导致意想不到的行为,因为forEach不会等待其回调函数中的异步操作完成。本文将深入探讨这一常见陷阱,解释其发生原因,并提供使用Promise.all结合map的健壮解决方案,以确保所有并发Promis…

    2025年12月20日
    000
  • 有效管理JavaScript中并发异步操作:Promise.all的应用实践

    本文旨在探讨在JavaScript中,特别是在AWS Lambda等无服务器环境中,如何正确处理多个并发的异步操作。文章将深入分析forEach循环与async/await结合使用时常见的陷阱,并提供一个健壮的解决方案:利用Promise.all结合Array.prototype.map来确保所有异…

    2025年12月20日
    000
  • 递归算法中数组引用的陷阱:深入理解为何直接推送可变数组导致空结果

    本文深入探讨了在JavaScript递归函数中,当尝试将一个可变数组(如临时路径tmp)直接推送到结果数组(res)时,为何最终会得到空结果的常见问题。我们将解释JavaScript中数组引用的工作原理,以及为什么需要创建数组的浅拷贝(如使用slice()或扩展运算符)才能正确捕获并保存递归过程中的…

    2025年12月20日
    000
  • SessionStorage有何区别

    SessionStorage与LocalStorage的核心区别在于生命周期和共享范围:前者仅在当前会话的单个标签页内有效,关闭即消失,适合临时状态存储;后者持久化保存,跨会话存在,且同源下所有标签页共享,适用于长期数据留存。 SessionStorage和LocalStorage最核心的区别在于它…

    2025年12月20日
    000
  • 云存储文件夹内容批量复制教程:基于文件列表与迭代操作

    本文旨在提供一个实用的教程,指导如何在云存储服务(如Google Cloud Storage或Firebase Storage)中批量复制“文件夹”的内容。由于云存储服务通常没有传统文件系统中的文件夹概念,文件路径仅是对象名称的一部分,因此无法直接通过单个API复制整个文件夹。核心策略是:首先列出源…

    2025年12月20日
    000
  • 云存储文件夹迁移策略:使用Firebase Admin SDK批量复制文件

    云存储文件夹迁移策略:使用Firebase Admin SDK批量复制文件。本文详细介绍了如何使用Firebase Admin SDK实现云存储中“文件夹”的批量复制。由于云存储本质上不直接支持文件夹概念,因此需要通过列出指定前缀下的所有文件,然后逐一将它们复制到新的目标前缀下,从而模拟文件夹迁移。…

    2025年12月20日
    000
  • js如何阻止表单默认提交

    阻止表单默认提交的核心方法是调用event.preventdefault(),它能阻止页面刷新和跳转,使开发者可自定义提交逻辑;2. 其他方法包括在事件处理函数中返回false(会同时阻止事件冒泡且仅限特定上下文)和使用stoppropagation()(仅阻止冒泡,不能阻止默认行为);3. 实际开…

    2025年12月20日
    000
  • 如何通过URL查询参数在不同HTML页面间传递数据

    本教程详细阐述了如何在不同HTML页面之间传递数据,特别聚焦于使用URL查询参数的方法。我们将通过一个点餐系统示例,演示如何从一个菜单页面获取商品名称和价格,并通过点击按钮将其安全地传递到支付页面,并在支付页面自动填充相应的表单输入框。文章涵盖了数据编码、URL构建以及在目标页面解析和使用这些数据,…

    2025年12月20日
    000
  • javascript怎么实现数组原子操作

    javascript的“原子操作”概念与传统不同,是因为其主线程单线程特性避免了并发冲突,但在异步或多线程(web workers)场景下仍需保证数据一致性。1. 通过不可变数据结构实现逻辑上的原子性:每次数组更新都返回新实例,如使用扩展运算符添加元素、filter或slice删除元素、map更新元…

    2025年12月20日 好文分享
    000
  • js 如何使用toString将数组转为字符串

    数组转换为字符串最直接的方法是使用tostring(),它将数组元素用逗号连接成字符串;2. tostring()等价于join(‘,’),但不接受参数,只能使用逗号分隔;3. join()更灵活,可自定义分隔符,适合需要不同分隔符或未来可能变更的场景;4. 处理嵌套数组时t…

    2025年12月20日
    000
  • JS如何实现深拷贝

    js实现深拷贝的核心答案是通过递归复制对象所有层级并切断引用关系,以确保副本与原数据完全独立。最简单的方法是使用json.parse(json.stringify(obj)),适用于仅含基本类型和普通对象的“纯净”数据,但会丢失函数、undefined、symbol等,且无法处理循环引用;更通用的方…

    2025年12月20日
    000
  • 使用 localStorage 持久化 React 应用中的状态:收藏夹功能实现

    本文旨在解决 React 应用中使用 localStorage 持久化状态,特别是收藏夹功能遇到的问题。我们将深入探讨如何正确地更新和保存状态到 localStorage,以确保数据在页面刷新后依然保留。通过修改 toggleFavorites 函数,并在每次更新收藏状态后立即保存到 localSt…

    2025年12月20日
    000
  • React Drag and Drop:跨组件状态共享问题及解决方案

    ))} );}export default App;注意事项onDragEnd 事件通常更适合处理拖拽结束后的逻辑,因为它只在被拖拽的元素上触发,而 onDrop 事件会在目标元素上触发。在复杂的 Drag and Drop 应用中,可以使用状态管理库(如 Redux 或 Zustand)来更好地管…

    2025年12月20日
    000
  • js怎么实现原型链的深拷贝

    javascript中实现原型链的深拷贝,核心在于创建一个与原对象具有相同原型但属性完全独立的新对象,并递归复制所有自身可枚举属性,同时处理循环引用和特殊类型。1. 对于基本类型、null、undefined、symbol和函数,直接返回原值或引用;2. 使用weakmap记录已处理对象,防止循环引…

    2025年12月20日 好文分享
    000
  • javascript怎么实现数组深拷贝

    数组深拷贝的核心是创建一个与原数组完全独立的新数组,修改新数组不会影响原数组。1. json序列化/反序列化:适用于仅含基本数据类型和普通对象且无循环引用的数组,优点是简单高效,缺点是无法处理函数、undefined、symbol及循环引用。2. 递归拷贝:可处理嵌套结构,需通过map记录已拷贝对象…

    2025年12月20日 好文分享
    000
  • JavaScript双指针技巧:反转字符串中的元音字母

    本文旨在讲解如何使用双指针技巧解决LeetCode上的“反转字符串中的元音字母”问题。我们将深入探讨使用JavaScript实现此算法时需要注意的细节,特别是关于变量赋值和临时变量使用的重要性。通过对比两种不同的交换变量方法,帮助读者理解其背后的原理,从而写出更健壮、更高效的代码。 使用双指针反转元…

    2025年12月20日
    000
  • JavaScript双指针法反转元音字母:为何临时变量至关重要

    本文旨在阐述使用JavaScript双指针法解决LeetCode反转元音字母问题时,直接赋值交换与使用临时变量交换的区别。通过代码示例和原理分析,深入理解临时变量在正确实现元素交换中的作用,避免因疏忽导致逻辑错误,并掌握双指针法的应用技巧。 双指针法反转元音字母 双指针法是一种常用的算法技巧,尤其适…

    2025年12月20日
    000
  • 使用 Zod 实现未在 Schema 中定义的字段透传

    本文介绍了如何使用 Zod 验证请求数据子集,并保留未在 Schema 中明确指定的字段。通过 passthrough() 方法,可以轻松实现未识别键的透传,避免数据丢失,从而更灵活地处理请求数据。 Zod 是一个流行的 TypeScript 优先的 schema 声明和验证库。默认情况下,Zod …

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信