Klonen eines Objekts in Javascript

70

Im Folgenden werden zuerst 0 und dann 1 protokolliert. Wie speichere ich eine Kopie des Objekts und nicht einen Verweis darauf?

debug.log(vi.details.segment);
vi.nextSegment = vi.details;
vi.nextSegment.segment++;
debug.log(vi.details.segment);
javascript jquery arrays object clone Matrym
quelle

Antworten:

139

So klonen Sie ein Objekt in jQuery:

var vi.nextSegment = jQuery.extend({}, vi.details);

HINWEIS: Das Obige ist eine flache Kopie: Verschachtelte Objekte oder Arrays werden als Referenz kopiert. Dies bedeutet, dass alle Änderungen, an denen Sie teilnehmen, vi.nextSegment.obj[prop]berücksichtigt werden vi.details.obj[prop]. Wenn Sie ein völlig neues Objekt wünschen, das vollständig vom Original getrennt ist , müssen Sie eine tiefe Kopie erstellen ( trueals ersten Parameter übergeben):

var vi.nextSegment = jQuery.extend(true, {}, vi.details);

Weitere Informationen zu Extend finden Sie hier.

Mike Lewis
quelle
11
Das ist keine tiefe Kopie. var a = {b: [1, 2]}; $.extend({}, a).b[0] = 'test';und a.b[0]wird geändert in 'test'. Um eine tiefe Kopie zu machen, setzen Sie trueals erstes Argument:$.extend(true, {}, a);
Reid
6
Eine Gothcha, die mich gerade erwischt hat: jQuery.extend(true, {}, obj);wird eine Kopie erstellen. jQuery.extend(true, obj, {});wird nicht.
Worldsayshi
@worldsayshi: Ich wünschte, ich hätte Ihren Kommentar früher gesehen. Seit Wochen Kopfschmerzen. Vielen Dank.
Nicole
1
Genial, Leute! Genau das, was ich brauchte!
Curveball
8

Dies funktionierte besser für mich beim Klonen eines Objekts mit jQuery "parseJSON ()" und "JSON.stringify ()".

$.ajax({
  url: 'ajax/test.html',
  dataType: 'json',
  success: function(data) {
    var objY = $.parseJSON(JSON.stringify(data));
    var objX = $.parseJSON(JSON.stringify(data));
  }
});

Das Klonen von Datenobjekten in objX & objY besteht aus zwei verschiedenen Objekten. Sie müssen sich nicht mit dem Problem "Nach Referenz" herumschlagen

Gracias!

Mecalito
quelle
1
Sie könnten dies ohne jquery tun, indem Sie die integrierte Methode
JSON.parse
7

Eine andere Möglichkeit, Objekte zu klonen, ist

newObj = JSON.parse(JSON.stringify(oldObj));

Aber seien Sie vorsichtig, wenn es Daten enthält. JSON.parse gibt in diesem Fall date.toString () anstelle von date zurück.

MarkosyanArtur
quelle
3

So kopiere ich Elemente mehrmals:

Zuerst habe ich eine Vorlage:

<div class="forms-container">
    <div class="form-template">
        First Name <input>
         .. a lot of other data ...
        Last Name <input>
     <div>
     <button onclick="add_another();">Add another!</button>
<div>

Nun das JavaScript:

function add_another(){
    jQuery(".form-template").clone().appendTo(".forms-container");
}
Francisco Corrales Morales
quelle
2

Versuchen Sie Immutable.js:

Da es sich jQuerymeistens um etwas handelt DOM Elements, ist es möglicherweise nicht das richtige Werkzeug für den Job. Immutable.jsist eine 56 kb (minified)Bibliothek erstellt von Facebook.

// roughly implementing
import Immutable from 'immutable'
//
const oldObj = { foo: 'bar', bar: 'baz' }
// create a map from the oldObj and then convert it to JS Object
const newObj = Immutable.Map(oldObj).toJS()

Auf diese Weise würden Sie effektiv geklont newObjaus oldObj. Wenn Sie noch keine haben Map, müssen wir grundsätzlich eine Maperste erstellen . Map ist wie eine blue-print, mit der wir arbeiten, um sie zu erstellen copies.

Verweise :

Zuhause - unveränderlich

Docs - Unveränderliche Docs

GitHub - Unveränderlich @ GitHub

Viel Glück.

Aakash
quelle
0

Wenn Sie Ihr ursprüngliches Objekt beibehalten, Ihre Daten jedoch mit Ihren neuen Optionen überschreiben müssen, können Sie mehrere Objekte an $ .extend (jQuery) übergeben, wobei true bei der ersten Option verwendet wird:

var opts_default = {opt1: true, opt2: false};
var opts_new = {opt1: false};
var opts_final = $.extend(true, {}, opts_default, opts_new);
Guillaume
quelle