当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript深浅拷贝实现详解

JavaScript深浅拷贝实现详解

2026-01-31 12:12:59 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《JavaScript深拷贝与浅拷贝实现方法》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

浅拷贝只复制第一层引用，修改嵌套对象仍会影响原数据；深拷贝需递归或序列化处理所有层级，structuredClone()是现代推荐方案但有类型限制，循环引用需WeakMap缓存避免栈溢出。

javascript如何实现深拷贝与浅拷贝？【教程】

浅拷贝只复制第一层引用，修改嵌套对象仍会影响原数据

JavaScript 中的浅拷贝（shallow copy）仅复制对象或数组的顶层属性，对嵌套的引用类型（如对象、数组）只是复制了指针，新旧对象共享同一块内存。常见错误是以为 Object.assign() 或展开运算符 [...arr] 能完全隔离数据，结果在修改深层属性时意外改动了原始数据。

适用场景：只需隔离顶层字段，且确定内部结构不会被后续修改；或作为性能敏感场景下的临时方案。

Object.assign({}, obj) 对对象有效，但不处理 null、undefined 或原型链
[...arr] 或 Array.from(arr) 适合一维数组，对含对象的数组无效
structuredClone() 是现代浏览器推荐方式，但目前不支持函数、undefined、Symbol 和循环引用

深拷贝必须递归或序列化处理嵌套结构

真正意义上的深拷贝需确保所有层级的引用类型都生成独立副本。没有银弹方案，选择取决于环境限制和数据特征。

最稳妥的手写递归实现要处理：null、日期、正则、数组、普通对象、Map/Set 等类型，还要避免循环引用导致栈溢出。但多数项目中，更倾向用成熟方案降低维护成本。

JSON 序列化（JSON.parse(JSON.stringify(obj))）最常用，但会丢弃 function、undefined、Symbol、Date、RegExp、NaN，且无法处理循环引用
structuredClone() 是浏览器原生 API，支持 Date、Map、Set、ArrayBuffer 等，但 Node.js 17+ 才支持，且仍不支持函数
Lodash 的 _.cloneDeep() 兼容性最好，能处理函数（作为空对象）、循环引用、稀疏数组等边界情况，但引入依赖需权衡

遇到循环引用时，JSON 和 structuredClone 都会报错

当对象存在自引用（比如 a.b = a）或相互引用（a.b = b; b.a = a），JSON.stringify() 抛出 TypeError: Converting circular structure to JSON，structuredClone() 则抛出 DATA_CLONE_ERR。

此时必须用带缓存的递归方案：用 WeakMap 记录已拷贝的对象，遇到重复引用直接返回已有副本。

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

Node.js 环境下注意 structuredClone 的可用性与替代方案

Node.js 17.0+ 默认启用 structuredClone()，但低于该版本需降级处理。不能简单 fallback 到 JSON 方法——它会静默丢失数据，而应明确判断不可序列化字段并报错，或引入 node:util 的 inspect() + 自定义解析逻辑。

如果项目已使用 fast-copy 或 klona 这类轻量库，要注意它们对 Map/Set 的支持程度，以及是否默认处理 prototype 属性。

klona 极快且无依赖，但不处理 Map、Set、Date
fast-copy 支持更多类型，但比 structuredClone() 慢约 2–3 倍
自己实现时，别忘了检查 obj.constructor === Object，否则 new obj.constructor() 可能误调用自定义类构造器

实际项目里，90% 的深拷贝需求用 structuredClone() 就够了；剩下那 10%，往往是因为你正在操作一个带方法或 Symbol 键的配置对象——这时候就得承认：拷贝不是目的，设计才是。

好了，本文到此结束，带大家了解了《JavaScript深浅拷贝实现详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！