…每个对象在同一个数组中也有对其他对象的引用?

当我第一次想到这个问题的时候,我就想到了

var clonedNodesArray = nodesArray.clone()

并搜索如何在JavaScript中克隆对象的信息。我确实在Stack Overflow上找到了一个问题(同样由@JohnResig回答),他指出用jQuery你可以做到

var clonedNodesArray = jQuery.extend({}, nodesArray);

克隆对象。虽然我尝试了这个,但这只复制了数组中对象的引用。如果我

nodesArray[0].value = "red"
clonedNodesArray[0].value = "green"

nodesArray[0]和clonedNodesArray[0]的值将显示为“绿色”。然后我尝试了

var clonedNodesArray = jQuery.extend(true, {}, nodesArray);

它深度复制了一个对象,但我分别从Firebug和Opera Dragonfly得到了“太多递归”和“控制堆栈溢出”的消息。

你会怎么做?这是不应该做的事情吗?在JavaScript中是否有可重用的方法来做到这一点?


当前回答

我的方法:

var temp = { arr : originalArray };
var obj = $.extend(true, {}, temp);
return obj.arr;

给我一个漂亮的,干净的,深克隆的原始数组-没有对象引用回原始:-)

其他回答

我认为我成功地编写了一种通用方法,主要使用Object深度克隆任何JavaScript结构。所有现代浏览器都支持创建。代码是这样的:

function deepClone (item) {
  if (Array.isArray(item)) {
    var newArr = [];

    for (var i = item.length; i-- !== 0;) {
      newArr[i] = deepClone(item[i]);
    }

    return newArr;
  }
  else if (typeof item === 'function') {
    eval('var temp = '+ item.toString());
    return temp;
  }
  else if (typeof item === 'object')
    return Object.create(item);
  else
    return item;
}

如果你只需要一个浅克隆,最好的方法如下:

使用…ES6扩展运算符。

这里有一个最简单的例子:

var clonedObjArray = [...oldObjArray];

通过这种方式,我们将数组扩展为单独的值,并使用[]操作符将其放入一个新数组中。

下面是一个更长的例子,展示了它的不同工作方式:

let objArray = [ {a:1} , {b:2} ]; let refArray = objArray; // this will just point to the objArray let clonedArray = [...objArray]; // will clone the array console.log( "before:" ); console.log( "obj array" , objArray ); console.log( "ref array" , refArray ); console.log( "cloned array" , clonedArray ); objArray[0] = {c:3}; console.log( "after:" ); console.log( "obj array" , objArray ); // [ {c:3} , {b:2} ] console.log( "ref array" , refArray ); // [ {c:3} , {b:2} ] console.log( "cloned array" , clonedArray ); // [ {a:1} , {b:2} ]

如果您想实现深度克隆,请使用JSON.parse(JSON. parse)。Stringify(你的{}或[])):

const myObj ={ 答:1, 乙: 2, 乙: 3 } const deepClone = JSON.parse(JSON.stringify(myObj)); 深度克隆 = 12; console.log(“deepClone-----”+myObj.a); const withOutDeepClone = myObj; 没有OutDeepClone.a = 12; console.log(“withOutDeepClone----” + myObj.a);

在JavaScript中,数组和对象复制会改变原始值,因此深度复制是解决这个问题的解决方案。

深度复制实际上意味着创建一个新数组并复制值,因为无论它发生什么都不会影响原始数组。

JSON。解析和JSON。Stringify是深度复制的最佳和简单的方法。JSON.stringify()方法将JavaScript值转换为JSON字符串。JSON.parse()方法解析JSON字符串,构造由字符串描述的JavaScript值或对象。

深克隆

let a = [{ x:{z:1} , y: 2}];
let b = JSON.parse(JSON.stringify(a));
b[0].x.z=0

console.log(JSON.stringify(a)); //[{"x":{"z":1},"y":2}]
console.log(JSON.stringify(b)); // [{"x":{"z":0},"y":2}]

更多细节:阅读这里

正如Daniel Lew提到的,循环图有一些问题。如果我有这个问题,我要么向有问题的对象添加特殊的clone()方法,要么记住我已经复制了哪些对象。

我会用一个变量copyCount来做,它在你每次复制代码时增加1。copyCount小于当前复制进程的对象将被复制。如果不是,则应该引用已经存在的副本。这就需要从原文链接到副本。

还有一个问题:内存。如果您从一个对象引用到另一个对象,那么浏览器很可能无法释放这些对象,因为它们总是从某个地方引用。您必须进行第二次传递,将所有复制引用设置为Null。(如果你这样做,你不必有一个copyCount,但一个布尔iscopy就足够了,因为你可以在第二步重置值。)