深拷贝与浅拷贝本质区别在于是否递归复制嵌套引用；浅拷贝仅复制第一层，如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、布尔、数字、字符串、普通对象、普通数组），且不关心原型、方法、特殊类型。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 会丢失
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），而不是无脑深拷贝。
