JavaScript深拷贝原理与实现方法

一分耕耘，一分收获！既然打开了这篇文章《JavaScript深拷贝详解及实现方法》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

JavaScript深拷贝是创建内存独立的新对象，修改互不影响；常用方法包括JSON.parse(JSON.stringify())（限纯数据）、structuredClone()（现代推荐）、手写递归（可控性强）、lodash.cloneDeep()（生产首选）。

JavaScript深拷贝是指创建一个新对象或数组，其内容与原对象完全相同，且新对象与原对象在内存中完全独立——修改新对象不会影响原对象，反之亦然。这与浅拷贝（只复制第一层引用）有本质区别，尤其在处理嵌套对象、数组、日期、正则等复杂类型时尤为关键。

为什么需要深拷贝

JavaScript中对象和数组是引用类型。直接赋值只是复制了引用地址，两个变量指向同一块内存：

let a = { name: "Alice", info: { age: 25 } };
let b = a; // 浅赋值
b.name = "Bob";
b.info.age = 30;
console.log(a.info.age); // 输出 30 —— a 被意外修改！

深拷贝能切断这种引用关联，确保数据隔离。

常用深拷贝方法及适用场景

1. JSON.parse(JSON.stringify()) —— 简单快捷但有局限
适合纯数据对象（仅含字符串、数字、布尔、null、数组、普通对象）：

• ✅ 优点：一行代码，无依赖，性能尚可
• ❌ 缺点：丢失函数、undefined、Symbol、Date、RegExp、Map、Set、NaN、Infinity；会忽略原型链和循环引用；Date 变成字符串

const deepCopy = obj => JSON.parse(JSON.stringify(obj));

2. structuredClone() —— 现代浏览器推荐方案
原生 API，支持更多类型（Date、RegExp、Map、Set、ArrayBuffer 等），且能处理循环引用（部分环境）：

• ✅ 优点：标准、安全、简洁；支持大多数内置类型
• ❌ 缺点：Node.js 17+ / Chrome 98+ 才支持；不支持函数、undefined、Symbol、Promise

const copy = structuredClone(originalObj);

3. 手写递归深拷贝 —— 完全可控，适合学习和定制
核心思路：判断类型 → 分类处理 → 递归复制子属性：

• 基础类型（string/number/boolean/null/undefined/Symbol）直接返回
• Date、RegExp、Array、Object 等构造出新实例，再遍历属性递归拷贝
• 需用 WeakMap 记录已拷贝对象，避免循环引用导致栈溢出

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  const cloned = Array.isArray(obj) ? [] : {};
  hash.set(obj, cloned);
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = deepClone(obj[key], hash);
    }
  }
  return cloned;
}

第三方库方案（如 lodash）

lodash 的 _.cloneDeep() 经过大量测试，覆盖边缘情况（函数、原型、循环引用、特殊对象等），适合生产环境：

• ✅ 稳定可靠，兼容性好，文档完善
• ❌ 增加包体积；若项目已用 Lodash，复用很自然；否则为深拷贝单独引入略重

import { cloneDeep } from 'lodash-es';
const copy = cloneDeep(original);

选择建议

日常开发可按优先级选择：

• 目标环境支持且数据不含函数/Symbol → 用 structuredClone()
• 需兼容老浏览器或要精确控制逻辑 → 手写递归（带 WeakMap）
• 项目已引入 Lodash → 直接用 _.cloneDeep()
• 仅简单扁平数据 → JSON.parse(JSON.stringify()) 快速应急

注意：深拷贝有性能开销，避免在高频循环中滥用；对大型对象，考虑是否真需要深拷贝，或改用不可变更新策略（如 Immer）。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript深拷贝原理与实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。