Wie klont man ein Array von Objekten in JavaScript?

Question

...wo jedes Objekt auch Verweise auf andere Objekte innerhalb desselben Arrays hat?

Als ich zum ersten Mal mit diesem Problem konfrontiert wurde, dachte ich nur an etwas wie

var clonedNodesArray = nodesArray.clone()

existieren würde, und suchte nach Informationen darüber, wie man Objekte in JavaScript klont. Ich habe gefunden eine Frage auf Stack Overflow (beantwortet von demselben @JohnResig) und er wies darauf hin, dass man mit jQuery Folgendes tun kann

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

um ein Objekt zu klonen. Ich habe dies jedoch ausprobiert, und es werden nur die Referenzen der Objekte im Array kopiert. Wenn ich also

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

wird der Wert sowohl von nodesArray[0] als auch von clonedNodesArray[0] "grün" sein. Dann habe ich versucht

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

das ein Objekt tief kopiert, aber ich bekomme " zu viel Rekursion " und " Kontrollstapelüberlauf " Nachrichten von beiden Firebug y Oper Libelle beziehungsweise.

Wie würden Sie das machen? Ist das etwas, das gar nicht gemacht werden sollte? Gibt es eine wiederverwendbare Möglichkeit, dies in JavaScript zu tun?

Answer 1

Ich war ziemlich frustriert über dieses Problem. Offenbar tritt das Problem auf, wenn man ein generisches Array an die Methode $.extend sendet. Also, um es zu beheben, fügte ich eine kleine Prüfung, und es funktioniert perfekt mit generischen Arrays, jQuery Arrays und alle Objekte.

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);
    },
});

Aufrufen mit:

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

Answer 2

Ich verwende Vue.js so Arrays/Objekte haben andere Code für Vue.js Funktionalität angeheftet. Ich versuchte viele der Antworten gegeben, aber ich endete mit Klon-Tiefe .

Answer 3

Vergessen Sie eval() (es ist die am meisten missbrauchte Funktion von JavaScript und macht den Code langsam) und slice(0) (funktioniert nur für einfache Datentypen)

Das ist für mich die beste Lösung:

Object.prototype.clone = function() {
  var myObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i != 'clone') {
        if (this[i] && typeof this[i] == "object") {
          myObj[i] = this[i].clone();
        }
        else
          myObj[i] = this[i];
    }
  }
  return myObj;
};

Answer 4

Die prägnanteste Lösung für seichte Texte:

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

Dies würde eine völlig unabhängige Kopie von etwas wie [{a: 1}, {b: 2}] , aber nicht [{a: {b: 2}}, {b: {a: 1}}] .

Answer 5

Einige elegante Möglichkeiten für tiefes Klonen in JavaScript:

• Art: Objekt

• Kopieren von Objekten in JavaScript

1. Eine einfache JavaScript-Methode zum Klonen von Objekten

2. Eine clevere Ausnutzung der JSON-Bibliothek, um Objekte tief zu klonen

3. Mit jQuery's $.extend() Funktion

4. Verwendung von Mootools ' klonen() Funktion zum Klonen von Objekten