如何在JavaScript中克隆对象数组?

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

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

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中是否有可重用的方法来做到这一点?

当前回答

Map将从旧数组创建一个新数组(不引用旧数组)，在Map中创建一个新对象，遍历属性(键)，并将旧array对象的值赋给新对象的相应属性。

这将创建完全相同的对象数组。

let newArray = oldArray.map(a => {
               let newObject = {};
               Object.keys(a).forEach(propertyKey => {
                    newObject[propertyKey] = a[propertyKey];
               });
               return newObject;
});

2018-04-09 13:15:41

其他回答

这个问题让我很沮丧。显然，当你发送一个泛型数组到$。扩展方法。因此，为了解决这个问题，我添加了一个小检查，它可以完美地与通用数组、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);
    },
});

调用使用:

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

2012-06-04 17:46:54

function deepCloneArray(array) {
    return Array.from(Object.create(array));
}

2018-02-13 19:05:44

$.evalJSON($.toJSON(origArray));

2010-08-04 20:00:42

最简洁的浅拷贝解决方案:

array = array.map(obj => {
    return { ...obj };
});

这将生成[{a: 1}， {b: 2}]等内容的完全独立副本，而不是[{a: {b: 2}}， {b: {a: 1}}]。

2021-10-07 20:49:26

我用Object.assign解决了克隆对象数组的问题

const newArray = myArray.map(a => Object.assign({}, a));

如果使用扩展语法，甚至更短

const newArray = myArray.map(a => ({...a}));

2016-10-27 11:16:47

如何在JavaScript中克隆对象数组?

推荐文章

最新文章

标签