JavaScript对象拷贝_深克隆算法优化-js教程-PHP中文网

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

夜晨

发布： 2025-11-27 13:56:02

原创

703人浏览过

深克隆需递归复制对象所有层级，基础实现使用递归遍历属性，但需处理循环引用、特殊类型等问题。通过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;
}

登录后复制

解决循环引用问题

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

立即学习“Java免费学习笔记（深入）”；

MarsX

AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则

159

查看详情

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;
}

登录后复制