以下是一篇关于JavaScript深拷贝的详细文章结构，您可以直接使用或调整：
深入解析JavaScript深拷贝：原理、实现与避坑指南
一、为什么需要深拷贝？
在前端开发中，我们经常遇到对象/数组的复制需求。当直接使用=赋值时，实际上只是复制了引用地址（浅拷贝），导致修改新对象会影响原对象：
const obj = { a: 1, b: { c: 2 } };const shallowCopy = obj;shallowCopy.b.c = 3;console.log(obj.b.c); // 3 原对象被修改！
深拷贝能彻底解决这个问题，创建完全独立的新对象。---## 二、深拷贝常见方案对比### 1. JSON方法（有局限性）
const deepCopy = JSON.parse(JSON.stringify(obj));
缺点：- 无法处理undefined、function、Symbol- 忽略原型链- 循环引用会报错- 丢失特殊对象类型（如Date变为字符串）### 2. 第三方库（推荐）
// lodashimport { cloneDeep } from 'lodash';const deepCopy = cloneDeep(obj);
3. 手动实现（本文重点）---## 三、手写深拷贝函数（进阶版）### 基础版本
function deepClone(target) { if (typeof target !== 'object' || target === null) { return target; // 基本类型直接返回 } const cloneTarget = Array.isArray(target) ? [] : {}; for (let key in target) { if (target.hasOwnProperty(key)) { cloneTarget[key] = deepClone(target[key]); } } return cloneTarget;}
进阶优化逐步解决以下问题：1. 循环引用问题
function deepClone(target, map = new WeakMap()) { if (map.has(target)) return map.get(target); // ...其他逻辑 map.set(target, cloneTarget); // ...递归拷贝}```2. **特殊对象处理**```javascript// 获取对象的构造函数const constructor = target.constructor;// 处理Dateif (target instanceof Date) { return new Date(target);}// 处理RegExpif (target instanceof RegExp) { return new RegExp(target);}// 处理Map/Setif (target instanceof Map) { const cloneMap = new Map(); target.forEach((value, key) => { cloneMap.set(key, deepClone(value)); }); return cloneMap;}// Set同理
- 函数拷贝（视需求决定是否保留引用）
javascript if (typeof target === 'function') { return target.bind({}); // 简单处理}
四、现代API方案
1. structuredClone
支持：Array/Object/Date/RegExp/Map/Set等 限制：不支持函数、DOM节点、原型链### 2. MessageChannel
function structuralClone(obj) { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port2.onmessage = ev => resolve(ev.data); port1.postMessage(obj); });}
五、总结
- 深拷贝的核心是递归遍历+类型判断
- 生产环境推荐使用成熟的工具库
- 注意特殊对象类型和循环引用问题
- 根据业务需求选择合适的拷贝方式
