Читать книгу Angular - Ferdinand Malcher - Страница 88

Wir gehen von der folgenden Problemstellung aus: Es existiert ein Objekt myObject. Wir wollen davon eine Kopie erzeugen und die Kopie verändern. Das originale Objekt soll dabei natürlich unverändert bleiben.

Auf den ersten Blick scheint diese Aufgabe einfach zu sein. Wir weisen das Objekt einer neuen Variable copy zu und ändern die Eigenschaft year. Bei der Ausgabe sehen wir allerdings, dass diese Herangehensweise nicht funktioniert …

const myObject = { title: 'Angular', year: 2016 };

const copy = myObject;

copy.year = 2020;

console.log(copy); // { title: 'Angular', year: 2020 }

console.log(myObject); // { title: 'Angular', year: 2020 }

Referenzen auf Objekte und Arrays

Um den Fehler zu verstehen, muss man Folgendes wissen: Variablen mit Objekten oder Array enthalten stets nur die Referenz auf das Objekt, nicht das Objekt selbst. Die beiden Variablen myObject und copy zeigen also auf dieselbe Speicherstelle. Ändern wir etwas an den Daten, wird das originale Objekt im Speicher überschrieben.

Object.assign()

Lange Zeit war deshalb die Methode Object.assign() das Mittel der Wahl, um Objekte ineinanderzukopieren. Mit dem Spread-Operator können wir die Aufgabe allerdings viel eleganter lösen:

const myObject = { title: 'Angular', year: 2016 };

const copy = { ...myObject, year: 2020 };

console.log(copy); // { title: 'Angular', year: 2020

} console.log(myObject); // { title: 'Angular', year: 2016 }

Wir initialisieren die Variable copy mit einem neuen (leeren) Objekt. Anschließend kopieren wir mit dem Spread-Operator ... alle Eigenschaften von myObject in das neue Objekt. Im letzten Schritt setzen wir die Eigenschaft year auf den Wert 2020. Existiert die Eigenschaft bereits, wird sie überschrieben. Damit haben wir die Eigenschaften von myObject in ein anderes Objekt expandiert. Das Objekt wurde also kopiert, und wir können es gefahrlos verändern.