JavaScript深拷贝技巧与引用问题解决

有志者，事竟成！如果你在学习文章，那么本文《JavaScript深拷贝实现方法及引用问题解决技巧》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

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 等，并支持循环引用：

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。不复杂但容易忽略细节。

理论要掌握，实操不能落！以上关于《JavaScript深拷贝技巧与引用问题解决》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！