Arrow-Funktion verwendet wird.
class User {
// ...
showFriends() {
this.friends.forEach(friend => {
console.log(`${this.firstname} kennt ${friend.firstname}`);
});
}
}
Listing 4–12 Vereinfachung: Arrow Functions werden im Kontext der jeweiligen Klasse ausgeführt.
4.8Spread-Operator und Rest-Syntax
Der Spread-Operator erleichtert den Umgang mit Arrays, Objekten und Argumenten von Funktionen. Mithilfe der Syntax können Teile eines Objekts oder Arrays expandiert werden, um
mehrere Elemente in ein Array zu kopieren,
mehrere Eigenschaften in ein Objekt zu kopieren oder
mehrere Argumente bei Funktionsaufrufen anzugeben.
Praktisch verwenden wir den Spread-Operator vor allem, um Objekte und Arrays zu klonen. Das wollen wir uns an ein paar Beispielen anschauen.
Spread-Operator vs. Spread-Syntax
Genau genommen ist der Spread-Operator kein Operator, sondern eine Syntax – »Operator« klingt aber viel besser. Die beiden Bezeichnungen sind also gleichbedeutend.
Objekteigenschaften kopieren
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.
Klasseninstanzen können nicht geklont werden
Bitte beachten Sie, dass diese Idee nur für Plain Objects funktioniert. Als Grundlage erzeugen wir immer ein leeres untypisiertes Objekt { }, in das wir die Eigenschaften eines anderen Objekts kopieren. »Klonen« wir also auf diese Weise ein Objekt, das eine Instanz einer Klasse ist, so werden nur die Eigenschaften kopiert, nicht aber die klasseneigenen Methoden. Die inhaltliche Verbindung mit der Klasse geht verloren, und es wird lediglich eine flache Kopie (engl. Shallow Copy) erzeugt.
Diese Eigenschaft ist vor allem interessant, wenn wir es mit komplexeren Objekten zu tun haben: Es wird stets nur die obere Ebene eines Objekts kopiert. Tiefere Zweige eines Objekts oder Arrays müssen wir zunächst mit der Spread-Syntax einzeln klonen und anschließend neu zusammenbauen. Wird diese Aufgabe zu kompliziert, sollten wir auf eine Bibliothek zurückgreifen, die eine Deep Copy erzeugt, sodass wir das Objekt gefahrlos verändern können.
Array-Elemente kopieren
Der Spread-Operator funktioniert ähnlich auch für Arrays. Wir können damit die Elemente eines Arrays in ein anderes Array kopieren. Dieses Feature können wir nutzen, um eine Kopie eines Arrays zu erzeugen, aber auch, um mehrere Arrays zusammenzufügen.
const numbers = [1, 2, 3, 4, 5];
const numbers1 = [...numbers, 6];
const numbers2 = [...numbers, 0, ...numbers];
console.log(numbers1); // [1, 2, 3, 4, 5, 6]
console.log(numbers2); // [1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5]
Funktionsargumente übergeben
Die Spread-Syntax lässt sich nicht nur in Arrays einsetzen, sondern auch für Funktionsargumente. Wollen wir die Elemente eines Arrays einzeln als Argumente an eine Funktion übergeben, können wir also den Spread-Operator nutzen.
const args = [5, 'foo', true];
doThings(args[0], args[1], args[2]);
doThings(...args);
Rest-Syntax: Funktionsargumente empfangen
Erhält eine Funktion mehrere Argumente, so können wir diese elegant in einem Array erfassen. Weil wir hiermit den umgekehrten Weg zum vorherigen Beispiel einschlagen, hat diese Syntax auch einen anderen Namen: Rest-Syntax oder Rest-Parameter. Anstatt ein Array zu expandieren, führen wir alle Funktionsargumente in einem Array zusammen.
function doThings(...arguments) {
