Der Spread-Operator Teil 1

Teil des Abschnitts Logik & Ablauf der JavaScript-Journey von Coddy — Lektion 18 von 65.

Der Spread-Operator (...) hat viele Anwendungsfälle für JSON. Zum Beispiel bei der Durchführung der folgenden Operation:

const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456
console.log(obj2.key1)

Was wäre die Ausgabe?

console.log(obj2.key1)
// Ausgabe: "456"

Das mag überraschend sein! Obwohl wir nur obj1 geändert haben, hat sich auch obj2 geändert.

Dies geschieht, weil wir beim direkten Zuweisen von Objekten (obj2 = obj1) eine Referenz erstellen und keine Kopie. Beide Variablen zeigen auf dasselbe Objekt im Speicher.

Hier wird der Spread-Operator nützlich. Schauen wir uns an, wie man eine echte Kopie erstellt:

const obj1 = {key1: "123"};
const obj2 = {...obj1};
obj1.key1 = "456";
console.log(obj2.key1);
// Ausgabe: "123"

Der Spread-Operator erzeugt ein neues Objekt und kopiert alle aufzählbaren Eigenschaften vom Quellobjekt in das neue.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Spickzettel

Der Spread-Operator (...) erstellt eine Kopie eines Objekts anstelle einer Referenz:

// Referenz (beide Variablen zeigen auf dasselbe Objekt)
const obj1 = {key1: "123"}
const obj2 = obj1
obj1.key1 = "456"
console.log(obj2.key1) // Ausgabe: "456"

// Kopie mit dem Spread-Operator
const obj1 = {key1: "123"}
const obj2 = {...obj1}
obj1.key1 = "456"
console.log(obj2.key1) // Ausgabe: "123"

Der Spread-Operator kopiert alle aufzählbaren Eigenschaften vom Quellobjekt in ein neues Objekt.

Probier es selbst

Diese Lektion enthält keine Programmieraufgabe.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Der Spread-Operator Teil 1

Spickzettel

Alle Lektionen in Logik & Ablauf