您如何在Javascript中克隆对象数组？

本文翻译自：How do you clone an Array of Objects in Javascript?

...where each object also has references to other objects within the same array? ...每个对象还引用了同一数组中的其他对象吗？

When I first came up with this problem I just though of something like 当我第一次想到这个问题时

var clonedNodesArray = nodesArray.clone()

would exist and searched for info on how to clone objects in javascript. 将存在并搜索有关如何在javascript中克隆对象的信息。 I did find a question on StackOverflow (answered by the very same @JohnResig) and he pointed out that with jQuery you could do 我确实在StackOverflow上发现了一个问题 （由同样的@JohnResig回答），他指出，使用jQuery，您可以做到

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

to clone an object. 克隆对象。 I tried this though, this only copies the references of the objects in the array. 我尝试了一下，但这只复制了数组中对象的引用。 So if I 所以如果我

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

the value of both nodesArray[0] and clonedNodesArray[0] will turn out to be "green". nodeArray [0]和clonedNodesArray [0]的值都将变为“绿色”。 Then I tried 然后我尝试

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

which deep copies an Object, but I got " too much recursion " and " control stack overflow " messages from both Firebug and Opera Dragonfly respectively. 它深深复制了一个对象，但是我分别从Firebug和Opera Dragonfly得到了“ 太多递归 ”和“ 控制堆栈溢出 ”消息。

How would you do it? 你会怎么做？ Is this something that shouldn't even be done? 这是什至不应该做的事情吗？ Is there a reusable way of doing this in Javascript? 有没有一种可重用的方式来做到这一点在Javascript中？

---

#1楼

参考：https://stackoom.com/question/2VSW/您如何在Javascript中克隆对象数组

---

#2楼

I was pretty frustrated by this problem. 这个问题让我感到非常沮丧。 Apparently the problem arises when you send in a generic Array to the $.extend method. 当您将通用数组发送到$ .extend方法时，显然会出现问题。 So, to fix it, I added a little check, and it works perfectly with generic arrays, jQuery arrays, and any objects. 因此，要解决此问题，我添加了一点检查，它可以与通用数组，jQuery数组以及任何对象完美配合。

jQuery.extend({
    deepclone: function(objThing) {
        // return jQuery.extend(true, {}, objThing);
        /// Fix for arrays, without this, arrays passed in are returned as OBJECTS! WTF?!?!
        if ( jQuery.isArray(objThing) ) {
            return jQuery.makeArray( jQuery.deepclone($(objThing)) );
        }
        return jQuery.extend(true, {}, objThing);
    },
});

Invoke using: 调用使用：

var arrNewArrayClone = jQuery.deepclone(arrOriginalArray);
// Or more simply/commonly
var arrNewArrayClone = $.deepclone(arrOriginalArray);

---

#3楼

This works for me: 这对我有用：

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend({}, obj);
                  });

And if you need deep copy of objects in array: 而且，如果您需要数组中对象的深层副本：

var clonedArray = $.map(originalArray, function (obj) {
                      return $.extend(true, {}, obj);
                  });

---

#4楼

My approach: 我的方法：

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

gives me a nice, clean, deep clone of the original array - with none of the objects referenced back to the original :-) 给了我一个很好的，干净的，深层的原始数组的克隆-没有对象被引用回原始的:-)

---

#5楼

jQuery扩展工作正常，只需要指定要克隆的是数组而不是对象（ 请注意，请使用[]而不是{}作为extend方法的参数 ）：

var clonedNodesArray = jQuery.extend([], nodesArray);

---

#6楼

The following code will perform recursively a deep copying of objects and array : 以下代码将递归执行对象和数组的深层复制 ：

function deepCopy(obj) {
if (Object.prototype.toString.call(obj) === '[object Array]') {
    var out = [], i = 0, len = obj.length;
    for ( ; i < len; i++ ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
if (typeof obj === 'object') {
    var out = {}, i;
    for ( i in obj ) {
        out[i] = arguments.callee(obj[i]);
    }
    return out;
}
return obj;
}

Source 资源