3 Min

Der Spread-Operator in JavaScript (...) splittet iterierbare Objekte. Er wurde in ES6 (ECMAScript 2015) eingeführt und wird häufig verwendet, um Arrays oder Objekte zu kopieren, zusammenzuführen oder deren Inhalte zu erweitern.

Grundlegende Verwendung des Spread-Operators

  1. Arrays:
    • Der Spread-Operator kann verwendet werden, um Arrays in ihre einzelnen Elemente „aufzuspalten“.
    const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
  2. Objekte:
    • Er kann auch verwendet werden, um Objekte zu kopieren oder zusammenzuführen.
    const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

Verwendung des Spread-Operators, um Properties zu löschen oder zu überschreiben

Der Spread-Operator wird oft verwendet, um ein Objekt zu „klonen“, und dann kann man entweder Properties überschreiben oder löschen, indem man sie einfach aus dem neuen Objekt weglässt.

Property überschreiben

Um eine Property zu überschreiben, fügt man nach dem Spread-Operator des ursprünglichen Objekts einfach die neue Property hinzu. Diese überschreibt dann die ursprüngliche Property.

const user = { name: "John", age: 30, city: "Berlin" };
const updatedUser = { ...user, age: 31 }; // age wird überschrieben
console.log(updatedUser); // { name: "John", age: 31, city: "Berlin" }

In diesem Beispiel wird das age-Property von 30 auf 31 aktualisiert, während die anderen Properties unverändert bleiben.

Property löschen

Da der Spread-Operator kein direktes Löschen von Properties ermöglicht, wird das Entfernen eines Properties durch Zuweisung eines neuen Objekts erreicht, das das Property nicht mehr enthält. Hierbei hilft die destructuring assignment Syntax:

const user = { name: "John", age: 30, city: "Berlin" };
const { city, ...userWithoutCity } = user; // "city" wird entfernt
console.log(userWithoutCity); // { name: "John", age: 30 }

Hier wird das Property city extrahiert und im neuen Objekt userWithoutCity nicht verwendet.

Verwendung des Spread-Operators für Deep Copy

Eine Shallow Copy (flache Kopie) kann mit dem Spread-Operator erstellt werden, aber es gilt zu beachten, dass der Spread-Operator nur eine flache Kopie von Arrays oder Objekten macht. Bei verschachtelten Objekten wird nur die oberste Ebene kopiert, während tieferliegende Objekte nach wie vor per Referenz kopiert werden.

Shallow Copy mit dem Spread-Operator

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };
shallowCopy.b.c = 3;
console.log(original.b.c); // 3, da es nur eine flache Kopie ist

In diesem Fall wird das innere Objekt { c: 2 } nicht wirklich kopiert, sondern nur die Referenz darauf, was bedeutet, dass Änderungen in der Kopie auch das Original beeinflussen.

Deep Copy mit dem Spread-Operator

Um eine Deep Copy (tiefe Kopie) zu erstellen, müssen alle verschachtelten Objekte ebenfalls kopiert werden. Dies kann manuell erfolgen, oder durch eine Kombination mit Methoden wie JSON.parse() und JSON.stringify().

const original = { a: 1, b: { c: 2 } };

// Deep Copy mittels JSON
const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.b.c = 3;
console.log(original.b.c); // 2, da das Original unverändert bleibt

Die Verwendung von JSON.parse(JSON.stringify(...)) erstellt eine tiefe Kopie eines Objekts, hat aber den Nachteil, dass Funktionen, undefined und andere spezielle Typen verloren gehen.

Deep Copy mit rekursiver Kopie und Spread-Operator

Ein rekursiver Ansatz kann mit dem Spread-Operator kombiniert werden, um eine tiefe Kopie manuell zu erstellen:

function deepCopy(obj) {
  let copy = Array.isArray(obj) ? [] : {};
  
  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      copy[key] = deepCopy(obj[key]); // Rekursion für tiefe Objekte
    } else {
      copy[key] = obj[key]; // Primitive Werte kopieren
    }
  }

  return copy;
}

const original = { a: 1, b: { c: 2, d: { e: 3 } } };
const deepCopyObject = deepCopy(original);
deepCopyObject.b.d.e = 4;

console.log(original.b.d.e); // 3, da das Original unverändert bleibt

Dieser Ansatz verwendet den Spread-Operator nicht direkt für die tiefe Kopie, sondern kopiert rekursiv alle verschachtelten Objekte.

Zusammenfassung

  • Der Spread-Operator (...) wird verwendet, um Arrays oder Objekte zu kopieren, zu erweitern oder zusammenzuführen.
  • Properties überschreiben kann einfach durch Zuweisung nach dem Spread-Operator erfolgen.
  • Properties löschen kann durch destructuring erreicht werden.
  • Deep Copy erfordert zusätzliche Ansätze wie JSON.parse(JSON.stringify(...)) oder rekursive Kopien, da der Spread-Operator nur eine flache Kopie erstellt.

Der Spread-Operator ist besonders nützlich für eine prägnante und saubere Handhabung von Datenstrukturen in JavaScript.

Updated:

Similar Content