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

JavaScript深拷贝优化技巧

2026-02-01 12:38:02 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript对象深拷贝优化方法》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

深克隆需递归复制对象所有层级，基础实现使用递归遍历属性，但需处理循环引用、特殊类型等问题。通过WeakMap缓存已访问对象可避免栈溢出，扩展对Date、RegExp、Map、Set等内置类型的支持提升兼容性，优化性能可采用快速路径和迭代方式。完整实现兼顾正确性与效率，或可直接使用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;
}