EMZETT.Seit ES2015 gibt es kompakte Schreibweisen, um Daten aus Arrays und Objekten zu entpacken und zu verteilen.
Array-Destructuring
Ergebnis
10 20 30 x z 1 [ 2, 3, 4 ] 1 6 2 1
Objekt-Destructuring
Ergebnis
Mia 17
Köln DE
Mia { alter: 17, stadt: 'Köln' }Verschachtelt
Ergebnis
7 a
In Funktionsparametern
Ergebnis
Tom (0) bei 0/0 Mia (17) bei 3/4
Spread: Verteilen mit ...
Ergebnis
[ 1, 2, 3, 4, 5 ]
4
{ x: 1, y: 20, z: 3 }
{ x: 1, y: 'neu' }
[ 'a', 'b', 'c' ] [ 1, 2 ]Rest: Sammeln mit ...
Rest sieht gleich aus, steht aber auf der Empfängerseite (Parameterliste oder Destructuring) und sammelt den Rest:
Ergebnis
[ 1, [ 2, 3, 4 ] ]
Praktische Muster
Ergebnis
{ name: 'Mia', rolle: 'user' }
[ 1, 2, 3 ] [ 1, 99, 3 ]
2 9
a 3
b 5Merke
const [a, b] = arrayundconst { x, y } = objektentpacken Werte- Umbenennen (
x: neu), Standardwerte (x = 1), Rest (...rest) - Spread
...verteilt Arrays/Objekte beim Erzeugen oder Aufrufen - Rest
...sammelt übrige Werte beim Empfangen - Mit Spread änderst du Daten, ohne das Original zu verändern
Aufgabe
Schreibe eine Funktion, die ein Objekt mit x und y per Destructuring annimmt und {x, y} verschoben um ein Offset zurückgibt, ohne das Original zu verändern.