前端深拷贝、浅拷贝,一起手撕深拷贝

简介: 【7月更文挑战第2天】JavaScript中的深拷贝和浅拷贝关乎对象复制的独立性。浅拷贝(如`Object.assign()`、扩展运算符)创建新对象,但共享引用类型属性的内存地址,导致修改新对象会影响原始对象。深拷贝(如递归复制)创建完全独立的对象副本,不受原始对象变动影响。`JSON.parse(JSON.stringify(obj))`是简单的深拷贝方法,但无法处理函数、undefined、Symbol及循环引用。手动实现深拷贝需递归遍历并处理循环引用问题,以确保复制的完整性。理解这两者差异对编写健壮的代码至关重要。

在JavaScript中,深拷贝和浅拷贝是处理对象复制时常用的两种技术,它们的主要区别在于复制过程中是否创建了完全独立的新对象。了解并掌握这两种拷贝方式对于提高代码质量和避免潜在的数据错误至关重要。

浅拷贝
浅拷贝(Shallow Copy)是指创建一个新对象,并将原始对象的所有属性(包括引用类型的属性)复制到新对象中。然而,对于引用类型的属性,浅拷贝仅复制了引用地址,即新对象和原始对象共享同一个内存地址。这意味着,如果修改了新对象中引用类型属性的内容,原始对象也会受到影响。常见的浅拷贝方法包括Object.assign()、扩展运算符(...)以及数组的slice()和concat()方法(不带参数调用时)。

深拷贝
深拷贝(Deep Copy)则完全不同,它创建一个全新的对象,并递归地复制原始对象中的所有属性,包括嵌套的对象和数组。这样,新对象和原始对象在内存中是完全独立的,修改新对象不会影响原始对象。深拷贝对于需要完全独立副本的场景非常有用,比如当你想在不改变原始数据的情况下对数据进行操作时。

实现深拷贝的挑战
实现深拷贝的一个常见方法是使用JSON.parse(JSON.stringify(obj))。这种方法简单且易于实现,但它有几个显著的限制:

无法处理函数、undefined、Symbol等特殊对象:这些值在序列化过程中会被忽略或转换成字符串,导致它们在新对象中无法保持原样。
无法处理循环引用:如果对象中存在循环引用,这种方法会导致运行时错误。
手撕深拷贝
由于JSON.parse(JSON.stringify(obj))方法的局限性,我们通常需要手动实现深拷贝函数。手动实现深拷贝时,我们需要递归地遍历原始对象的所有属性,如果属性值是对象或数组,则继续递归复制。对于基本数据类型,则直接复制其值。

在实现过程中,还需要特别注意处理循环引用的情况,以避免无限递归导致的堆栈溢出。一种常见的方法是使用WeakMap或Map来记录已经复制过的对象,以避免重复复制。

总结
深拷贝和浅拷贝是JavaScript中处理对象复制时的重要概念。浅拷贝仅复制对象的第一层属性,而深拷贝则递归地复制对象的所有属性,包括嵌套的对象和数组。了解它们之间的区别以及各自的适用场景,对于编写高效、可靠的JavaScript代码至关重要。尽管JSON.parse(JSON.stringify(obj))方法在某些情况下可以作为深拷贝的简便解决方案,但其局限性也要求我们在需要更复杂拷贝逻辑时,能够手动实现深拷贝函数。

目录
打赏
0
0
0
0
2851
分享
相关文章
栈在前端中的应用,顺便再了解下深拷贝和浅拷贝!
该文章探讨了栈在前端开发中的应用,并深入讲解了JavaScript中深拷贝与浅拷贝的区别及其实现方法。
栈在前端中的应用,顺便再了解下深拷贝和浅拷贝!
前端 js 经典:深拷贝
前端 js 经典:深拷贝
41 1
【前端面试题】深拷贝的终极实现
【前端面试题】深拷贝的终极实现
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝2
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝2
67 0
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝2
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝3
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝3
58 0
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝4
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝4
57 0
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝1
前端学习笔记202306学习笔记第四十二天-Es6-实现深拷贝1
103 0
前端学习笔记202306学习笔记第四十二天-深拷贝解决循环引用问题3
前端学习笔记202306学习笔记第四十二天-深拷贝解决循环引用问题3
63 0
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
363 14

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 2
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    13
  • 3
    巧用通义灵码,提升前端研发效率
    16
  • 4
    详解智能编码在前端研发的创新应用
    5
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    29
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    5
  • 7
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    98
  • 8
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    7
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    9
  • 10
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    11
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等