JavaScript深拷贝需创建完全独立副本,避免引用问题;JSON方法简单但有类型限制;structuredClone是现代推荐方案;手写递归可定制但需处理循环引用等细节;Lodash的cloneDeep最全面可靠。

JavaScript 实现深拷贝的核心目标是:创建一个与原对象完全独立的新对象,所有嵌套的属性(包括对象、数组、日期、正则等)都重新分配内存,修改副本不会影响原始数据。引用问题本质上是浅拷贝导致的——只复制了引用地址,而非实际值。
JSON.parse(JSON.stringify()) —— 简单但有局限
这是最常用的一行式方案,适合纯数据对象(仅含字符串、数字、布尔、null、数组、普通对象):
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
⚠️ 注意限制:
- 会丢失函数、undefined、Symbol、BigInt、Date、RegExp、Map、Set、Promise 等类型(序列化时被忽略或转为 null)
- 无法处理循环引用,直接报错 TypeError: Converting circular structure to JSON
- Date 对象变成字符串,RegExp 变成空对象
structuredClone() —— 现代浏览器推荐方案
Chrome 98+、Firefox 94+、Edge 98+ 支持,能正确处理 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、Blob 等,并支持循环引用:
立即学习“Java免费学习笔记(深入)”;
const original = { date: new Date(), regex: /abc/g, map: new Map([['key', 'value']]) };
const copy = structuredClone(original);
✅ 优点:原生、安全、语义清晰、性能较好
❌ 缺点:IE 不支持,部分 Node.js 版本(v17.0+ 启用 --experimental-structured-cloning)才可用
手写递归深拷贝 —— 灵活可控,适合学习和定制
通过递归判断类型,分别处理基本类型、引用类型、特殊对象:
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);
const clone = Array.isArray(obj) ? [] : {};
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = deepClone(obj[key]);
}
}
return clone;
}
? 关键点:
- 必须检查 null(typeof null === 'object' 是 JS 历史 bug)
- 用 Array.isArray() 判断数组,避免用 instanceof 在跨 iframe 场景失效
- 需单独处理 Date、RegExp、Map、Set 等,否则会退化为普通对象
- 要支持循环引用?需额外维护一个 WeakMap 记录已拷贝的对象对
使用成熟库 —— 快速可靠,减少重复造轮子
Lodash 的 _.cloneDeep() 是最广泛使用的方案:
import { cloneDeep } from 'lodash-es';
const copy = cloneDeep(original);
✅ 支持几乎所有 JS 内置类型、循环引用、自定义类实例(可配置)
✅ 经过大量生产环境验证,边界 case 处理完善
⚠️ 注意:体积略大(可按需引入),Tree-shaking 友好(用 lodash-es)
避免引用问题的本质,不是选哪个方法,而是明确你的数据结构和运行环境。简单 JSON 数据用 JSON 方法;现代浏览器项目优先 structuredClone;需要兼容老环境或高度定制就手写或用 Lodash。不复杂但容易忽略细节。











