JavaScript深拷贝极简指南:3种方法解决嵌套与循环引用难题
myzbx 2025-09-01 09:53 5 浏览
为什么需要深拷贝?
首先我们看看浅拷贝,point指向的是同一个地址,这时我们修改obj2.point的属性时,obj1的point属性也会被修改
再看看深拷贝,point指向的是不同地址,这时我们修改obj2.point的属性时,obj1的point属性不受影响
总结一下深拷贝的特点:
- 避免数据污染:修改副本时不影响原始数据
- 解决嵌套问题:确保对象中的子对象被独立复制
- 处理循环引用:当对象相互引用时不导致程序崩溃
三种深拷贝实用解决方案
1. JSON序列化法(适合简单数据)
const copy = JSON.parse(JSON.stringify(original));
优点:实现简单,一行代码搞定
局限:会丢失函数、Symbol等特殊对象类型
2. Lodash库方案(生产环境推荐)
import { cloneDeep } from 'lodash';
const copy = cloneDeep(original);
推荐理由:完整支持所有数据类型,经过大量项目验证
3. 手动实现方案(完全掌控型)
/**
* 深度克隆对象
* @param source 需要克隆的对象
* @param weakMap 弱引用映射表用于处理循环引用(可选)
* @returns 克隆后的新对象
*/
function deepClone<T>(source: T, weakMap = new WeakMap<any, any>()): T {
// 处理基本数据类型和非对象类型
if (
source === null ||
typeof source !== 'object' ||
source instanceof Function
) {
return source;
}
// 特殊对象处理
if (source instanceof Date) return new Date(source);
if (source instanceof RegExp) return new RegExp(source);
// 处理循环引用
if (weakMap.has(source)) {
return weakMap.get(source);
}
const proto = Object.getPrototypeOf(source);
const clone = Object.create(proto);
weakMap.set(source, clone);
// 克隆所有自有属性(包括Symbol和不可枚举属性)
const allKeys = Reflect.ownKeys(source as object);
for (const key of allKeys) {
const descriptor = Object.getOwnPropertyDescriptor(source as object, key)!;
if ('value' in descriptor) {
// 克隆值属性
Object.defineProperty(
clone,
key,
Object.assign(descriptor, {
value: deepClone((source as any)[key], weakMap)
})
);
} else {
// 复制访问器属性(getter/setter)
Object.defineProperty(clone, key, descriptor);
}
}
// 保持原型链完整性
if ((source as any).__proto__ !== Object.prototype) {
clone.__proto__ = (source as any).__proto__;
}
return clone;
}
关键技术要点
- 循环引用:通过WeakMap缓存已拷贝对象
- 函数处理:直接引用而非复制(保持函数特性)
- 特殊对象:Date/RegExp等需调用构造函数
- 原型链:使用Object.create保持原型关系
相关推荐
- 半导体行业术语缩写词典总结-JKL_半导体词汇缩写表
-
作为半导体行业新人来说,最痛苦的莫过于各种缩写词术语了,有的缩写词一样但是会有不同的解释。这里作者给大家整理了部分术语词典,后面会按照更新顺序一一分享出来。废话不多说,直接开始,如有遗漏,欢迎大家在评...
- JD.com Deepens Push Into Embodied Intelligence With Investment in Sensor Maker PaXiniTech
-
ToraOne,thesecond-generationmultidimensionaltactilehumanoidrobotdevelopedbyPaXiniTechTMTPOS...
- Hong Kong's Consumer Market Becomes New Battleground for Chinese Mainland Internet Giants
-
AI-generatedimageTMTPOST--StrollthroughthestreetsofHongKongtoday,anditmightfeellikey...
- http2解决了哪些问题_简述http2的优点
-
HTTP/2(最初称为SPDY)是HTTP协议的第二个主要版本,它在HTTP/1.1的基础上进行了重大改进,旨在解决其在性能和效率方面的诸多瓶颈。以下是HTTP/2主要解决的问题:队头阻...
- China's economy stays strong and vital amid pressure
-
Peoplevisitthe4thChina-CEECExpo&InternationalConsumerGoodsFairinNingbo,eastChina's...
- JD.com Makes $2.4 Billion Bid for Ceconomy in Bold Push to Build a Global Retail Empire
-
TMTPOST--JD.comhasunveiledplanstoacquireGermany’sCeconomyAG—theparentofEurope’sleading...
- 深入剖析 Java 中的装饰器设计模式:原理、应用与实践
-
在Java软件开发的广阔天地里,设计模式犹如璀璨星辰,照亮我们构建高效、可维护系统的道路。今天,让我们聚焦于其中一颗闪耀的星——装饰器设计模式,深入探究它的奥秘,看看如何利用它为我们的代码赋予...
- 组合模式应用-适配器模式_适配器组件
-
写在前面Hello,我是易元,这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误,欢迎大家留言指正!该部分为各模式组合使用,涉及代码较多,熟能生巧。内容回顾定义适配器模式是一种结构型设计模式,...
- OOM (Out Of Memory) 故障排查指南
-
1.确认OOM类型首先需要确认是哪种类型的OOM:JavaHeapOOM:Java堆内存不足NativeMemoryOOM:本地内存不足MetaspaceOOM:元空间内存不足Contai...
- 刷完这49题,面试官当场给Offer!Java程序员必备指南
-
1.问题:如果main方法被声明为private会怎样?答案:能正常编译,但运行的时候会提示”main方法不是public的”。2.问题:Java里的传引用和传值的区别是什么?答案:传引用是指传递的是...
- C#编程基础(看这一篇就够了)_c#编程入门与应用
-
C#及其开发环境简介C#概述C#是一个现代的、通用的、面向对象的编程语言,由微软(Microsoft)开发,经Ecma和ISO核准认可。它由AndersHejlsberg和他的团队在.NET框架开发...
- 说一下JDK的监控和 线上处理的一些case
-
一句话总结JDK监控常用工具包括JConsole、VisualVM、JMC等,用于实时查看内存、线程、GC状态。线上常见问题处理:内存泄漏通过heapdump分析对象引用链;频繁GC可调整-Xmx/...
- JavaScript深拷贝极简指南:3种方法解决嵌套与循环引用难题
-
为什么需要深拷贝?首先我们看看浅拷贝,point指向的是同一个地址,这时我们修改obj2.point的属性时,obj1的point属性也会被修改再看看深拷贝,point指向的是不同地址,这时我们修改o...
- Java 25 在 JEP 519 中集成了紧凑对象头
-
作者|ANMBazlurRahman译者|刘雅梦策划|丁晓昀Java25通过JEP519将紧凑对象头作为产品特性进行了集成,在不需要更改任何代码的情况下,为开发人员提供了...
- 每日一练 Python 面试题(1)_python每日一记
-
以下是5道Python基本语法相关的面试题,涵盖变量、运算符、数据结构、函数和异常处理等核心概念:1.变量与作用域题目:以下代码的输出是什么?解释原因。x=10deffunc():...
- 一周热门
- 最近发表
-
- 半导体行业术语缩写词典总结-JKL_半导体词汇缩写表
- JD.com Deepens Push Into Embodied Intelligence With Investment in Sensor Maker PaXiniTech
- Hong Kong's Consumer Market Becomes New Battleground for Chinese Mainland Internet Giants
- http2解决了哪些问题_简述http2的优点
- China's economy stays strong and vital amid pressure
- JD.com Makes $2.4 Billion Bid for Ceconomy in Bold Push to Build a Global Retail Empire
- 深入剖析 Java 中的装饰器设计模式:原理、应用与实践
- 组合模式应用-适配器模式_适配器组件
- OOM (Out Of Memory) 故障排查指南
- 刷完这49题,面试官当场给Offer!Java程序员必备指南
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)