JavaScript深拷贝技巧与引用问题解析

学习文章要努力，但是不要急！今天的这篇文章《JavaScript深拷贝方法及引用问题解决技巧》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript深拷贝的核心是创建完全独立的新对象以避免引用问题；常用方法包括JSON.parse(JSON.stringify())（简洁但有类型限制）、structuredClone()（现代原生推荐）、递归手写（完全可控）和Lodash的_.cloneDeep()（生产环境稳妥）。

JavaScript 中实现深拷贝的核心目标是创建一个与原对象完全独立的新对象，确保修改副本不会影响原始数据。引用问题（比如修改嵌套对象时意外改变原对象）通常源于浅拷贝或直接赋值，而深拷贝能彻底切断引用链。

JSON.parse(JSON.stringify()) —— 简单但有局限

这是最常用、写法最简洁的深拷贝方式，适合纯数据对象（只含字符串、数字、布尔值、null、数组、普通对象）：

• ✅ 优点：一行代码搞定，性能尚可，兼容性好
• ❌ 缺点：会丢失函数、undefined、Symbol、Date、RegExp、Map、Set、BigInt 等类型；循环引用直接报错；不能处理原型链和不可枚举属性
• ⚠️ 示例：const copy = JSON.parse(JSON.stringify(original));

structuredClone() —— 现代浏览器推荐方案

ES2022 引入的原生 API，支持更多数据类型，且能正确处理 Date、RegExp、Map、Set、ArrayBuffer、TypedArray 等：

• ✅ 优点：原生、安全、语义清晰、支持大部分结构化数据
• ❌ 缺点：目前不支持函数、undefined、Symbol、循环引用（仍会抛错），且在 Node.js 17+ 和较新浏览器中才可用
• ⚠️ 示例：const copy = structuredClone(original);

递归手写深拷贝 —— 完全可控，适合复杂场景

当需要支持函数、自定义类型、循环引用或特殊逻辑时，需手动实现。关键点包括类型判断、递归遍历、缓存已拷贝对象（解决循环引用）：

• 用 typeof 和 Object.prototype.toString.call() 准确识别类型（如 Array、Date、RegExp、Map、Set）
• 维护一个 WeakMap 记录源对象 → 拷贝对象的映射，遇到重复引用直接返回已有拷贝
• 对普通对象和数组递归处理每个键值；对特殊类型（如 Date）调用构造器新建实例
• ⚠️ 注意：不处理原型链上的属性，默认只拷贝自身可枚举属性（类似 Object.assign 行为）

Lodash 的 _.cloneDeep() —— 生产环境稳妥选择

经过大量测试的成熟工具函数，覆盖绝大多数边界情况（包括函数、循环引用、稀疏数组、不可枚举属性等）：

• ✅ 优点：健壮、文档完善、社区验证充分、支持自定义克隆逻辑（通过 customizer）
• ❌ 缺点：引入额外依赖，包体积增加；部分场景略重（如仅需简单拷贝）
• ⚠️ 使用：import { cloneDeep } from 'lodash-es'; const copy = cloneDeep(original);

选择哪种方法取决于你的运行环境、数据结构复杂度和是否允许第三方依赖。日常开发中，优先考虑 structuredClone()（兼容性满足时），否则用 Lodash；临时调试或简单数据可用 JSON 方案；需要极致控制或学习原理，就动手写递归版本。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript深拷贝技巧与引用问题解析》文章吧，也可关注golang学习网公众号了解相关技术文章。