深拷贝与浅拷贝区别详解
时间:2026-01-01 22:19:40 353浏览 收藏
今天golang学习网给大家带来了《JavaScript对象深拷贝与浅拷贝区别详解》,其中涉及到的知识点包括等等,无论你是小白还是老手,都适合看一看哦~有好的建议也欢迎大家在评论留言,若是看完有所收获,也希望大家能多多点赞支持呀!一起加油学习~
深拷贝创建完全独立的新对象,所有嵌套层级均重新分配内存;浅拷贝仅复制顶层,引用类型仍共享内存。推荐优先使用structuredClone(),兼容性要求高时可用JSON序列化或Lodash的_.cloneDeep()。

JavaScript 中深拷贝对象,核心是创建一个与原对象完全独立的新对象,所有嵌套层级的属性都重新分配内存,修改新对象不会影响原对象。浅拷贝只复制第一层属性的值(对基本类型是值拷贝,对引用类型是地址拷贝),所以嵌套对象仍共享同一内存地址。
浅拷贝:只复制顶层,引用类型仍共用
浅拷贝后,如果原对象里有数组、对象、日期、正则等引用类型,新对象和原对象会指向同一块内存。改其中一方的嵌套内容,另一方也会变。
- 常见方法:展开运算符
{...obj}、Object.assign({}, obj)、数组的slice()、concat()、[...arr] - 典型问题示例:
const a = { name: 'Alice', info: { age: 25 } }; const b = { ...a }; b.info.age = 30; console.log(a.info.age); // 输出 30 —— 被意外改了
深拷贝:彻底隔离,各用各的内存
深拷贝递归遍历对象所有层级,对每个引用类型都新建实例,确保新旧对象完全无关。适合配置备份、状态快照、避免副作用等场景。
- 推荐方式(安全通用):使用结构化克隆(
structuredClone()),支持大多数内置类型(对象、数组、Map、Set、Date、RegExp、ArrayBuffer 等),且能处理循环引用(现代浏览器及 Node.js 17.0+) - 兼容性方案:JSON 序列化反序列化(
JSON.parse(JSON.stringify(obj))),但不支持函数、undefined、Symbol、Date 对象(变成字符串)、RegExp、循环引用,且会丢弃原型链 - 自定义实现要点:需判断类型(null / 基本类型 / 引用类型 / 循环引用),用 WeakMap 记录已拷贝对象,避免无限递归
怎么选?看需求和环境
不需要支持老旧环境时,优先用 structuredClone();需要兼容 IE 或旧 Node 版本,且数据结构简单(纯 JSON 可序列化),可用 JSON.parse(JSON.stringify());若含函数、特殊对象或需精细控制,建议用 Lodash 的 _.cloneDeep() 或手写带循环检测的递归函数。
基本上就这些。深拷贝不是“越深越好”,而是按需选择——能用浅拷贝解决的别硬上深拷贝,性能更优;真要隔离,就选靠谱、能覆盖你数据类型的方案。
终于介绍完啦!小伙伴们,这篇关于《深拷贝与浅拷贝区别详解》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!
-
502 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
336 收藏
-
379 收藏
-
183 收藏
-
471 收藏
-
498 收藏
-
339 收藏
-
426 收藏
-
221 收藏
-
343 收藏
-
212 收藏
-
475 收藏
-
301 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习