JavaScript 深拷贝方案全解析：从兼容性到健壮性的优先级指南

在 JavaScript 中，对象是引用类型，简单的赋值操作只会复制引用而非对象本身。深拷贝 这一操作旨在创建一个完全独立的新对象，包括所有嵌套属性。本文将按照bug尽量少、兼容性尽量好的优先级，系统分析各种深拷贝方案，并给出明确的推荐顺序。

📋 太长不看版：优先级推荐

根据"bug尽量少、浏览器支持尽量多"的核心要求，深拷贝方案的推荐优先级如下：

使用 Lodash 的 _.cloneDeep()（最可靠）
加固的递归深拷贝函数（无外部依赖的最佳选择）
原生 structuredClone() API（现代浏览器/Node.js环境首选）
JSON.parse(JSON.stringify())（仅适用于简单数据场景）

方案一：Lodash --- 生产级可靠性（最高推荐）

核心实现

javascript 复制代码

// 安装：npm install lodash
import { cloneDeep } from 'lodash';
// 或按需引入：import cloneDeep from 'lodash/cloneDeep';

const original = { a: 1, b: { c: 2 } };
const cloned = cloneDeep(original);

为什么这是首选？

处理边界情况最全面：自动处理循环引用、特殊对象（Date、RegExp、Map、Set）、Symbol 属性等
经过千万级项目验证：Lodash 的深拷贝函数经过长期实战测试，几乎涵盖了所有你能想到的边界情况
优秀的浏览器兼容性：支持到 IE9+ 等绝大多数环境
性能优化良好：内部做了大量性能优化，比大多数手写实现更高效

注意事项

需要引入外部库（但可通过按需引入减小体积）
对于极简单的对象结构可能"杀鸡用牛刀"

方案二：加固的递归实现 --- 无依赖的最佳选择

核心代码

javascript 复制代码

export function deepClone(obj, hash = new WeakMap()) {
  // 1. 处理基本类型和函数
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // 2. 处理循环引用
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  
  // 3. 处理特殊对象类型
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  
  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }
  
  // 4. 处理数组和对象
  let newObj = Array.isArray(obj) ? [] : {};
  
  // 5. 存储当前对象，必须在递归前存入
  hash.set(obj, newObj);
  
  // 6. 安全遍历属性（修复原型链污染问题）
  const keys = [...Object.keys(obj), ...Object.getOwnPropertySymbols(obj)];
  for (let key of keys) {
    newObj[key] = deepClone(obj[key], hash);
  }
  
  return newObj;
}

关键技术点

循环引用处理：使用 WeakMap 存储已拷贝对象，避免无限递归导致的栈溢出
特殊对象支持：正确拷贝 Date、RegExp 等内置对象
安全属性遍历：避免遍历原型链上的意外属性
Symbol 属性支持：处理 ES6+ 的 Symbol 类型键

浏览器兼容性

支持到 IE11+（WeakMap 支持）
如需支持更旧浏览器，可用数组替代 WeakMap：

javascript 复制代码

// 兼容旧浏览器的循环引用处理
let cache = [];
function findCache(source) {
  for (let i = 0; i < cache.length; i++) {
    if (cache[i].source === source) {
      return cache[i].copy;
    }
  }
  return null;
}

方案三：原生 `structuredClone()` --- 未来的标准

核心用法

javascript 复制代码

const original = { a: 1, b: { c: 2 } };
const cloned = structuredClone(original);

优势

真正的"标准"实现：W3C 规范定义的原生方法
性能优秀：由 JavaScript 引擎原生实现
类型支持广泛：支持循环引用、ArrayBuffer、Map、Set 等复杂类型

兼容性现状

Chrome 98+、Firefox 94+、Safari 15.4+
Node.js 17.0+
不支持 IE 和旧版浏览器

使用建议

适合现代浏览器项目或 Node.js 服务端应用，不适用于需要广泛浏览器支持的场景。

方案四：JSON 方法 --- 条件适用方案

核心代码

javascript 复制代码

function simpleDeepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

适用场景

数据完全是 JSON 兼容类型（无函数、undefined、Symbol等）
无需处理循环引用
对 Date 对象转为字符串可接受
需要极致简洁或受限环境（如某些嵌入式JS环境）

致命缺陷

丢失函数、undefined、Symbol
无法处理循环引用（会报错）
Date 对象被转为字符串
RegExp、Map、Set 等转为空对象

🎯 决策指南：如何选择？

场景	推荐方案	原因
生产环境，稳定性至上	Lodash 的 `_.cloneDeep()`	最全面、最可靠的解决方案
不想引入外部依赖	加固的递归实现	自主控制，处理了关键边界情况
现代浏览器/Node.js项目	`structuredClone()`	原生标准，性能最佳
简单 JSON 数据，快速实现	JSON 方法	代码极简，兼容性最好
React 状态管理等不可变数据需求	考虑 Immer	专门为不可变数据操作设计

📝 特别提醒：避免常见陷阱

不要忽略循环引用：这是手写深拷贝最常见的崩溃原因
考虑原型链：某些场景需要保持对象的原型关系
注意性能：深度嵌套对象可能带来性能问题
函数是否需要克隆：通常函数共享即可，无需深度克隆

总结

在 JavaScript 中实现健壮的深拷贝需要综合考虑兼容性、健壮性和性能。对于大多数项目，引入 Lodash 使用 _.cloneDeep() 是最稳妥的选择。如果希望避免外部依赖，使用加固的递归实现 并特别注意循环引用问题。随着浏览器生态发展，structuredClone() 将成为未来的首选标准。

选择哪种方案最终取决于你的具体需求，但无论如何，避免使用最初展示的那种基础递归实现（缺少循环引用处理等关键机制），因为它可能在复杂对象上导致程序崩溃。

JavaScript 深拷贝方案全解析：从兼容性到健壮性的优先级指南