深拷贝与浅拷贝本质区别在于是否递归复制嵌套引用;浅拷贝仅复制第一层,如Object.assign、扩展运算符;JSON.parse(JSON.stringify())非真正深拷贝,会丢失Date、RegExp、函数等且不支持循环引用;手写需处理类型识别、循环引用、构造信息保留;Lodash cloneDeep覆盖多数边界情况,推荐优先使用。

深拷贝和浅拷贝不是“选一个用就行”的问题,而是你一不小心改了原对象却不知道——尤其在 React/Vue 的响应式数据、Redux state 更新、或配置对象复用场景下,JSON.parse(JSON.stringify(obj)) 看似能用,但会默默丢掉 Date、RegExp、undefined、函数、循环引用,甚至 Map/Set。
浅拷贝只复制第一层引用
所有基础赋值(=)、Object.assign()、扩展运算符 {...obj}、Array.prototype.slice()、[...arr] 都是浅拷贝。它们只复制对象自身的可枚举属性,不递归处理嵌套对象。
常见错误现象:修改拷贝后的嵌套数组或对象,原对象同步变化。
-
Object.assign({}, obj)对obj.a.b = 1无效,a仍是同一引用 -
[...arr]只对一维数组安全;若arr = [{x: 1}],修改copy[0].x会影响原项 - Vue 中用
Object.assign(this.form, data)替换表单对象?如果data含嵌套对象,后续响应式更新可能失效
JSON.parse(JSON.stringify()) 是最危险的“深拷贝”幻觉
它根本不是通用深拷贝方案,而是一个带严重副作用的序列化/反序列化操作。
立即学习“Java免费学习笔记(深入)”;
使用场景仅限于:纯 JSON 兼容数据(即只含 null、布尔、数字、字符串、普通对象、普通数组),且不关心原型、方法、特殊类型。
本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。 本书内容全面深入,适合各层次PHP和MySQL开发人员阅读,既是优秀的学习教程,也可用作参考手册。
- 会丢失
undefined字段(被忽略)、function(被跳过)、Symbol(被忽略) -
Date变成字符串,RegExp变成空对象{} - 遇到循环引用直接抛错:
TypeError: Converting circular structure to JSON - BigInt 报错:
TypeError: Do not know how to serialize a BigInt
手写可靠深拷贝要处理哪些关键点
真正健壮的深拷贝需识别类型、避免循环引用、保留构造信息,并合理处理不可枚举/原型链属性(视需求而定)。以下是核心判断逻辑和建议做法:
- 先用
Object.prototype.toString.call(val)区分[object Object]、[object Array]、[object Date]、[object RegExp]、[object Map]、[object Set]等 - 用
WeakMap缓存已拷贝的对象,检测并复用循环引用节点(否则无限递归) -
Date和RegExp直接用构造函数新建:new Date(val)、new RegExp(val) -
Map/Set需遍历键值对重建:new Map([...val.entries()]) - 函数通常不拷贝(保留原引用),除非明确需要
eval或toString重构造(极少必要)
示例片段(简化版,不含 WeakMap 循环检测):
function deepClone(obj) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (obj instanceof Array) return obj.map(item => deepClone(item));
if (obj instanceof Object) {
const cloned = {};
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
cloned[key] = deepClone(obj[key]);
}
}
return cloned;
}
return obj;
}
Lodash 的 cloneDeep 为什么仍是首选
它覆盖了 99% 的边界情况:支持 Map/Set/TypedArray/Error/Promise(保留状态)、自定义类型、循环引用、不可枚举属性(可选)、原型继承等。而且经过大量生产环境验证。
不要自己造轮子,除非你清楚每一行在应对什么 edge case。
- 安装:
npm install lodash.clonedeep - 使用:
import cloneDeep from 'lodash.clonedeep'; const copy = cloneDeep(original); - 注意:CDN 引入时别用全量
lodash,按需引入更轻量
真正容易被忽略的是:深拷贝永远有代价——性能开销、内存占用、以及“你以为拷全了,其实没拷”的认知偏差。在多数场景下,优先考虑不可变更新模式(如 Immer)或结构共享(如 Immutable.js),而不是无脑深拷贝。










