JavaScript：深度复制循环JSON

Question

介绍:

我正在尝试编写一个深拷贝方法，但需要跟踪我的访问节点，以便我可以链接到先前的visitedNode而不是一直深度复制直到栈溢出。

尝试:

var visitedNodes = {};
var obj = {}; obj.a = obj;   // circular; can't use JSON.stringify)
var obj2 = {};

visitedNodes[obj] = "should need key obj (not obj2) to access this string";

console.log(visitedNodes[obj2]);    // logs the string unfortunately

我没有一种独特的存储内存位置的方法--它会自己存储在[object Object]，而且我不能使用JSON.stringify，因为它是一个循环结构。

---

我尝试使用var visitedNodes = new Map();，但还是不行。

---

我的当前方法是利用Array.prototype.indexOf函数，但我不知道它是否适用于循环结构，因为我在这里也遇到了堆栈溢出问题！！！

this.clone = function (item, visitedNodes) {
    visitedNodes = visitedNodes || [];
    if (typeof item === "object" && !Array.isArray(item)) {
        if (visitedNodes.indexOf(item) === -1) {
            var cloneObject = {};
            visitedNodes.push(cloneObject);
            for (var i in item) {
                if (item.hasOwnProperty(i)) {
                    cloneObject[i] = this.clone(item[i], visitedNodes);
                }
            }
            return cloneObject;
        } else {
            return visitedNodes[visitedNodes.indexOf(item)];
        }
    }
    else if (typeof item === "object" && Array.isArray(item)) {
        if (visitedNodes.indexOf(item) === -1) {
            var cloneArray = [];
            visitedNodes.push(cloneArray);
            for (var j = 0; j < item.length; j++) {
                cloneArray.push(this.clone(item[j], visitedNodes));
            }
            return cloneArray;
        } else {
            return visitedNodes[visitedNodes.indexOf(item)];
        }
    }

    return item; // not object, not array, therefore primitive
};

---

问题：

是否有任何想法可以获取唯一的内存地址，以便确定我以前是否已经访问过该对象的引用？我相信我可以基于Object.keys()和Object.prototype.constructor构建一个唯一的哈希值，但这似乎很荒谬，并且如果父级和子级键相同，则会产生误报。

- neaumusic

---

看看道格拉斯·克罗克福德的JSON.decycle：https://dev59.com/questions/o4Dba4cB1Zd3GeqPDmNz#24075430 - McCroskey

Answer 1

在visitedNodes中保存原始引用，并创建另一个数组，以相同的索引保存克隆对象，以便在引用时使用。

function deepClone(obj) {
    var visitedNodes = [];
    var clonedCopy = [];
    function clone(item) {
        if (typeof item === "object" && !Array.isArray(item)) {
            if (visitedNodes.indexOf(item) === -1) {
                visitedNodes.push(item);
                var cloneObject = {};
                clonedCopy.push(cloneObject);
                for (var i in item) {
                    if (item.hasOwnProperty(i)) {
                        cloneObject[i] = clone(item[i]);
                    }
                }
                return cloneObject;
            } else {
                return clonedCopy[visitedNodes.indexOf(item)];
            }
        }
        else if (typeof item === "object" && Array.isArray(item)) {
            if (visitedNodes.indexOf(item) === -1) {
                var cloneArray = [];
                visitedNodes.push(item);
                clonedCopy.push(cloneArray);
                for (var j = 0; j < item.length; j++) {
                    cloneArray.push(clone(item[j]));
                }
                return cloneArray;
            } else {
                return clonedCopy[visitedNodes.indexOf(item)];
            }
        }

        return item; // not object, not array, therefore primitive
    }
    return clone(obj);
}

var obj = {b: 'hello'};
obj.a = { c: obj };
var dolly = deepClone(obj);
obj.d = 'hello2';
console.log(obj);
console.log(dolly);

代码运行示例： http://jsbin.com/favekexiba/1/watch?js,console

- Fetz

---

我相信我正在做同样的事情，只是使用短路运算符来递归地传递visitedNodes引用，而不是使用辅助函数。 - neaumusic

这应该可以工作，我认为主要问题与我们特定的JS核心有关。 - neaumusic

不，我们没有做同样的事情...你的代码几乎到位了，但是... ({} === {}) === false 这两个对象具有相同的属性，但是它们是两个不同的对象。 - Fetz

你应该这样做而不是这样：visitedNodes.push(cloneObject);，而是这样：visitedNodes.push(item); - Fetz

唯一剩下的步骤是确定 function.bind(visitedNode) 的上下文。 - neaumusic

Answer 2

Fetz提供的代码非常好用，但在处理日期对象时会出现问题。这里是修复后的版本：

const visitedNodes = [];
const clonedCopy = [];

function clone(item) {
  if (typeof item === 'object') {
    if (item instanceof Date) { // Date
      if (visitedNodes.indexOf(item) === -1) {
        visitedNodes.push(item);
        var cloneObject = new Date(item);
        clonedCopy.push(cloneObject);
        return cloneObject;
      }
      return clonedCopy[visitedNodes.indexOf(item)];
    } else if (XMLDocument && item instanceof XMLDocument) { // XML Document
      if (visitedNodes.indexOf(item) === -1) {
        visitedNodes.push(item);
        const cloneObject = item.implementation.createDocument(item.documentElement.namespaceURI, null, null);
        const newNode = cloneObject.importNode(item.documentElement, true);
        cloneObject.appendChild(newNode);
        clonedCopy.push(cloneObject);
        return cloneObject;
      }
      return clonedCopy[visitedNodes.indexOf(item)];
    } else if (!Array.isArray(item)) { // Object
      if (visitedNodes.indexOf(item) === -1) {
        visitedNodes.push(item);
        var cloneObject = {};
        clonedCopy.push(cloneObject);
        for (const i in item) {
          if (item.hasOwnProperty(i)) {
            cloneObject[i] = clone(item[i]);
          }
        }
        return cloneObject;
      }
      return clonedCopy[visitedNodes.indexOf(item)];
    } else if (Array.isArray(item)) { // Array
      if (visitedNodes.indexOf(item) === -1) {
        const cloneArray = [];
        visitedNodes.push(item);
        clonedCopy.push(cloneArray);
        for (let j = 0; j < item.length; j++) {
          cloneArray.push(clone(item[j]));
        }
        return cloneArray;
      }
      return clonedCopy[visitedNodes.indexOf(item)];
    }
  }

  return item; // not date, not object, not array, therefore primitive
}
return clone(obj);

我本想编辑Fetz的答案，但编辑队列已满。

编辑于19/07/2017: 添加了XML文档克隆。

- Robin Goupil