Klonen eines Objekts in Javascript

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

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.

Schauen Sie sich den Beitrag an: Was ist der effizienteste Weg, um ein Javascript-Objekt zu klonen?

Nach John Resigs Antwort:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Weitere Informationen finden Sie in der jQuery-Dokumentation.

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!

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.

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

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.

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