JavaScript的深浅拷贝

简介: JavaScript的深浅拷贝

在JavaScript中,拷贝一个对象是一项非常常见的操作,常用的方法包括深拷贝和浅拷贝。但是,不同的拷贝方法会产生不同的效果和影响,因此深入了解和掌握深浅拷贝的概念和实现方法是非常重要的。

浅拷贝

首先我们来了解一下浅拷贝的概念。简单地说,浅拷贝就是只复制了对象的引用,而没有复制对象本身。也就是说,如果我们修改了浅拷贝后的对象,原对象也会跟着被修改。

那么如何实现浅拷贝呢?一种简单的方法是使用Object.assign()方法。例如,我们有一个原始对象originalObj:


const originalObj = {a: 1, b: {c: 2}};


我们可以使用Object.assign()方法将它进行浅拷贝:


const shallowCopyObj = Object.assign({}, originalObj);


此时,shallowCopyObj和originalObj的值相同。但是,如果我们修改shallowCopyObj中的某个属性值,那么originalObj也会被修改:


shallowCopyObj.b.c = 3;
console.log(originalObj.b.c); // 输出 3


这是因为浅拷贝只是复制了原对象的引用,而b属性引用的对象实际上是同一个。

深拷贝

相对于浅拷贝,深拷贝会复制整个对象,包括它的所有属性和嵌套对象。这种拷贝方式可以独立地修改新对象,不会对原对象产生任何影响。

实现深拷贝的方法有很多,但是需要注意的是,不同的实现方式对于不同的对象结构可能会有不同的性能和效果。一些常用的方法包括JSON.parse()和JSON.stringify()方法、递归方法等。

例如,我们有一个嵌套的对象originalObj:


const originalObj = {a: 1, b: {c: 2}};


我们可以使用递归方法实现深拷贝:


function deepClone(obj) {
  let result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object' && obj[key] !== null) {
        result[key] = deepClone(obj[key]);
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
}
const deepCopyObj = deepClone(originalObj);


此时,deepCopyObj和originalObj是两个独立的对象,修改其中一个不会影响另一个:


deepCopyObj.b.c = 3;
console.log(originalObj.b.c); // 输出


需要注意的是,递归方法虽然可以实现深拷贝,但是在处理特殊对象时可能会出现问题。例如,对于包含循环引用的对象,递归方法可能会导致死循环或栈溢出等问题。

在实现深拷贝时,可以考虑使用第三方库,例如Lodash、jQuery等,这些库已经对深拷贝进行了充分的测试和优化。


选择浅拷贝还是深拷贝?


选择浅拷贝还是深拷贝,取决于我们的实际需求和对对象引用关系的理解。

浅拷贝适用于对象结构较简单、属性值为基本类型或不需要修改原对象的情况,例如在实现Redux的reducer函数中使用浅拷贝可以保证不修改原始的state对象。

深拷贝适用于对象结构较复杂、包含嵌套对象或需要独立修改新对象的情况,例如在实现撤销重做功能时需要保存历史状态,此时使用深拷贝可以保证历史状态的独立性。

在实际开发中,我们需要根据具体情况灵活选择浅拷贝还是深拷贝,以保证代码的正确性和效率。同时,也需要注意拷贝对象的大小和复杂度,避免出现性能问题。

目录
相关文章
|
8天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
480 124
|
17天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
4天前
|
人工智能 安全 Cloud Native
Higress 新发布:AI Gateway 能力增强,Gateway API 及其推理扩展持续打磨
增强 AI 网关能力,持续打磨 Gateway API 及其推理扩展。
312 124
|
12天前
|
机器学习/深度学习 人工智能 调度
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
HappyHorse 1.1 是新一代视频生成大模型,全面升级动态表现力、角色一致性、指令遵循、视觉质感与音画协同能力。支持I2V/T2V/R2V三类生成,适配短剧、电商广告、品牌营销等场景,提供高质、流畅、可控的AI视频生产力。
799 5
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
|
10天前
|
人工智能 定位技术 SEO
我学 GEO 第 15 天:终于知道AI GEO该如何做?
我是暴走的莉莉酱,边旅行边研究AI GEO的数字游民。专注普通人如何提升“AI可见度”——让AI在回答用户问题时准确识别、理解并推荐你。不讲玄学,只做可测、可调、可持续的GEO实践。
455 127
|
4天前
|
消息中间件 存储 Kafka
Kafka 原生消息入湖能力上线!一键打通实时流与数据湖
阿里云消息队列 Kafka 版正式上线原生消息入湖能力。
266 121
|
3天前
|
人工智能 安全 程序员
终于,Claude Code 封号的原因被曝光了!竟然针对中国用户,植入隐形代码?!
通俗易懂地揭秘 Claude Code 封号的手段,分享一些自己对 AI 编程困境的思考,Codex、Cursor、DeepSeek、智谱 GLM、甚至是豆包,都有所行动了
303 1