别再固守ES6，克隆对象的新姿势，带你见识一下！

2023-10-17 01:26:23

在ES6时代，深拷贝对象一直是一个热门话题。然而，JavaScript并没有一个可以实现深拷贝的方法。我们常见的实现方式是递归和JSON.parse(JSON.stringify())（听说底层还是用了递归）。然而，一般库函数也只能处理常见的需求。当我们遇到复杂的对象结构或循环引用时，就会遇到困难。

那么，有没有一种方法可以轻松处理各种复杂情况，甚至可以实现循环引用的克隆呢？答案是肯定的。

让我们先来看一下递归方法的实现原理。递归方法的基本思想是，将对象中的每个属性都克隆一遍，如果属性值是一个对象，则继续递归克隆。这种方法虽然简单易懂，但是当对象结构复杂时，递归的深度就会很深，从而导致性能下降。

JSON.parse(JSON.stringify())方法的实现原理与递归方法类似，只不过它使用了JSON作为中间媒介。这种方法的性能要比递归方法好一些，但是它也有一个缺点，就是不能克隆循环引用。

为了解决上述问题，我们可以使用一种新的克隆对象方法。这种方法的基本思想是，使用一个哈希表来存储已经克隆过的对象。当遇到一个新的对象时，先检查哈希表中是否已经存在该对象的克隆。如果存在，则直接返回克隆对象。如果不存在，则将该对象克隆一遍，并将克隆对象添加到哈希表中。

这种方法可以轻松处理各种复杂情况，甚至可以实现循环引用的克隆。同时，它还可以根据实际情况选择浅拷贝或深拷贝，避免不必要的性能开销。

下面是一个使用哈希表克隆对象的示例代码：

function cloneObject(obj) {
  const visitedObjects = new Map();

  function clone(obj) {
    if (typeof obj !== "object" || obj === null) {
      return obj;
    }

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

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

    for (const key in obj) {
      cloneObj[key] = clone(obj[key]);
    }

    return cloneObj;
  }

  return clone(obj);
}