Guinguette Marais Poitevin

In diesem Beitrag finden Sie 3 einfache Wege, um einen flachen Klon (auch bekannt als Kopie) von Objekten in JavaScript durchzuführen.

Als Bonus zeige ich, wie Sie auch Eigenschaften an Ort und Stelle auf dem Klon aktualisieren, hinzufügen oder entfernen können. Das ist nützlich, wenn Sie eine Aktualisierung des Objekts auf unveränderliche Weise durchführen wollen.

Hinweis

Die 3 in diesem Beitrag beschriebenen Möglichkeiten, Objekte zu klonen, führen eine oberflächliche Kopie durch.

Eine oberflächliche Kopie bedeutet, dass nur das eigentliche Objekt kopiert wird. Wenn das kopierte Objekt verschachtelte Objekte enthält – werden diese verschachtelten Objekte nicht geklont.

1. Klonen mit Object.spread

Der einfachste Weg, ein einfaches JavaScript-Objekt zu klonen, ist der Aufruf des Object.spread-Operators:

const clone = { ...object};

Wobei object das Objekt ist, das Sie kopieren möchten, und clone die flache Kopie von object ist.

Zum Beispiel wollen wir eine flache Kopie des Objekts hero erstellen:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = { ...hero};heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

heroClone ist ein Klonobjekt von hero, das heißt, es enthält alle Eigenschaften von hero.

hero === heroClone wird zu false ausgewertet – hero und heroClone sind jedoch unterschiedliche Objektinstanzen.

1.1 Objektverteilungs-Bonus: Hinzufügen oder Aktualisieren von geklonten Requisiten

Ein unmittelbarer Vorteil der Verwendung von Objektverteilungen ist, dass Sie das geklonte Objekt an Ort und Stelle aktualisieren oder neue Eigenschaften hinzufügen können, wenn Sie dies benötigen.

Lassen Sie uns das hero Objekt klonen, aber die name Eigenschaft auf einen anderen Wert aktualisieren und eine neue Eigenschaft realName hinzufügen:

const hero = { name: 'Batman', city: 'Gotham'};const heroEnhancedClone = { ...hero, name: 'Batman Clone', realName: 'Bruce Wayne'};heroEnhancedClone; // { name: 'Batman Clone', city: 'Gotham', realName: 'Bruce Wayne' }

2. Klonen mit Objektrest

Eine weitere gute Möglichkeit, Objekte oberflächlich zu klonen, ist die Verwendung des Objektrest-Operators:

const { ...clone } = object;

Auch hier wollen wir den Rest-Operator verwenden, um eine Kopie des hero Objekts zu erstellen:

const hero = { name: 'Batman', city: 'Gotham'};const { ...heroClone } = hero;heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Nach Anwendung des Rest-Operators const { ...heroClone } = hero enthält die Variable heroClone eine Kopie des Objekts hero.

2.1 Bonus von Object Rest: Überspringen von geklonten Requisiten

Ein netter Bonus bei der Verwendung von Object Rest ist die Möglichkeit, bestimmte Eigenschaften beim Klonen zu überspringen.

Erzeugen wir zum Beispiel einen Klon des hero Objekts, überspringen aber die city Eigenschaft im Klon:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = hero;heroClone; // { name: 'Batman' }

2.2 Super-Bonus: Kombination von Objektspreizung und Rest

Objektspreizung bringt den Bonus, Eigenschaften zu aktualisieren oder neu hinzuzufügen, während Objektrest den Vorteil hat, Eigenschaften im resultierenden Klon zu überspringen.

Kann man object spread und rest in einer Anweisung kombinieren, um alle diese Vorteile zu erben? Ja, das können Sie!

Lassen Sie uns das hero-Objekt klonen und dabei eine neue Eigenschaft realName hinzufügen und die Eigenschaft city überspringen:

const hero = { name: 'Batman', city: 'Gotham'};const { city, ...heroClone } = { ...hero, realName: 'Bruce Wayne'};heroClone; // { name: 'Batman', realName: 'Bruce Wayne' }

Das Klonen von Objekten und die Manipulation von Eigenschaften in einer einzigen Anweisung zu kombinieren, ist toll!

3. Klonen mit Object.assign()

Schließlich können Sie mit Object.assign(target, ...sources) auch das Klonen von Objekten durchführen:

const clone = Object.assign({}, object);

Lassen Sie uns Object.assign() in der Praxis verwenden und ein Klon-Objekt von hero Objekt erzeugen:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero);heroClone; // { name: 'Batman', city: 'Gotham' }hero === heroClone; // => false

Object.assign({}, hero) erzeugt einen Klon des hero Objekts, indem das zweite Argument hero in das erste Argument {} eingebunden wird.

3.1 Object.assign()-Bonus: geklonte Requisiten hinzufügen oder aktualisieren

Object.assign() ermöglicht auch das Aktualisieren oder Hinzufügen neuer Eigenschaften zum Klon.

Lassen Sie uns das hero Objekt kopieren, aber gleichzeitig die name Eigenschaft aktualisieren:

const hero = { name: 'Batman', city: 'Gotham'};const heroClone = Object.assign({}, hero, { name: 'Batman Clone' });heroClone; // { name: 'Batman Clone', city: 'Gotham' }

Object.assign({}, hero, { name: 'Batman Clone' }) erstellt das Objekt in 2 Schritten.

Zunächst wird das zweite Argument hero mit dem ersten Argument {} zusammengeführt. Dies entspricht dem { name: 'Batman', city: 'Gotham' }.

Zweitens wird das dritte Argument { name: 'Batman Clone' } in das Ergebnis aus dem vorherigen Schritt gemischt und überschreibt die Eigenschaft name. Schließlich erhält man das Objekt { name: 'Batman Clone', city: 'Gotham' }.

4. Zusammenfassung

JavaScript bietet 3 gute Möglichkeiten, Objekte zu klonen: mit dem Spread-Operator, dem Rest-Operator und der Object.assign()-Funktion.

Neben dem reinen Klonen von Objekten ermöglicht die Verwendung von object spread und Object.assign() das Hinzufügen oder Aktualisieren von Eigenschaften beim Erstellen des Klons.

Der Rest-Operator bietet außerdem den Vorteil, dass bestimmte Eigenschaften beim Klonen übersprungen werden können.

Und das Tolle ist, dass Sie die Objektausbreitung und den Rest in einer einzigen Anweisung kombinieren können, so dass Sie das Objekt klonen und gleichzeitig Eigenschaften hinzufügen, aktualisieren oder überspringen können, die nicht geklont werden.

Das ist nützlich, wenn Sie die Unveränderlichkeit nutzen möchten und die Eigenschaften des geklonten Objekts an Ort und Stelle manipulieren können.

Welche anderen guten Möglichkeiten, Objekte in JavaScript zu klonen, kennen Sie?