当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript深拷贝优化技巧分享

JavaScript深拷贝优化技巧分享

2026-03-25 10:09:33 0浏览收藏

JavaScript对象深拷贝看似简单，实则暗藏诸多陷阱——从循环引用导致的栈溢出，到Date、RegExp、Map、Set等特殊类型的丢失，再到函数、Symbol和不可枚举属性的处理难题；本文系统剖析了手写深克隆的核心挑战与进阶方案：通过WeakMap缓存破解循环引用、扩展多类型判断提升兼容性、引入快速路径与迭代思路优化性能，并在原理与实践间架起桥梁——既帮你避开JSON序列化等“伪深拷贝”的坑，也为你权衡自研实现与lodash.cloneDeep等成熟方案提供扎实依据。

JavaScript对象拷贝_深克隆算法优化

JavaScript中的对象拷贝，尤其是深克隆，是开发中常见的需求。浅拷贝只能复制对象的第一层属性，而深克隆需要递归复制所有层级的引用类型数据。实现一个高效、安全的深克隆算法并不简单，尤其在处理循环引用、特殊对象（如Date、RegExp）、函数和Symbol等类型时容易出错。

基础深克隆实现

最简单的深克隆方法是使用 JSON.parse(JSON.stringify(obj))，但它有明显缺陷：无法处理函数、undefined、Symbol、Date、RegExp 和循环引用。

因此，通常需要手动实现递归拷贝。基本思路如下：

判断当前值是否为引用类型（对象或数组）
创建一个新的对象或数组作为副本
遍历原对象的可枚举属性，递归调用深克隆函数赋值到新对象
返回新对象

示例代码：

function cloneDeep(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 cloned = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = cloneDeep(obj[key]);
    }
  }
  return cloned;
}

解决循环引用问题

当对象存在循环引用时，上述递归方法会陷入无限循环，最终导致栈溢出。例如：

const a = { name: 'test' };
a.self = a;

为了避免这个问题，可以使用 WeakMap 记录已访问的对象，每次进入函数时先检查该对象是否已被克隆。

传入 WeakMap 作为缓存存储已克隆的对象
如果当前对象已在缓存中，直接返回对应的克隆结果
否则继续递归，并将原始对象与克隆对象存入缓存

优化后的代码片段：

function cloneDeep(obj, cache = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);

  if (cache.has(obj)) {
    return cache.get(obj);
  }

  const cloned = Array.isArray(obj) ? [] : {};
  cache.set(obj, cloned);

  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = cloneDeep(obj[key], cache);
    }
  }
  return cloned;
}

支持更多内置类型

除了普通对象和数组，实际应用中还可能遇到 Map、Set、TypedArray 等类型。为了提升兼容性，可以在判断时增加对这些类型的处理。

Map 类型：创建新的 Map，遍历其键值对并分别克隆键和值
Set 类型：创建新的 Set，遍历其元素并克隆每个元素
其他内置对象可通过 Object.prototype.toString.call() 判断

扩展类型判断示例：

const toString = Object.prototype.toString;

function isPlainObject(obj) {
  return toString.call(obj) === '[object Object]';
}

// 在 cloneDeep 中加入：
if (obj instanceof Map) {
  const clonedMap = new Map();
  cache.set(obj, clonedMap);
  for (let [key, value] of obj) {
    clonedMap.set(cloneDeep(key, cache), cloneDeep(value, cache));
  }
  return clonedMap;
}