Einführung
Array-Destrukturierung
Die Array-Destrukturierung in JavaScript ist eine prägnante Möglichkeit, Werte aus einem Array zu extrahieren und sie einzelnen Variablen zuzuweisen.
In diesem Beispiel wird jeder Wert im Array numberOfMoons seinem entsprechenden Planeten zugewiesen:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
Kurz gesagt:
- Die Syntax erlaubt es, positionierte Elemente in einem Array zu benennen und Variablen durch Neuzuweisung zu vertauschen.
- Die Destrukturierungssyntax ist in Funktionsparametern verfügbar und funktioniert mit jedem Iterable.
- Wenn du eine Position unbenannt lässt (indem du keinen Variablennamen schreibst), wird diese Position stillschweigend ignoriert.
Objekt-Destrukturierung
In JavaScript gibt es außerdem eine Destrukturierungssyntax, um Eigenschaften aus einem Objekt zu extrahieren und sie einzelnen Variablen zuzuweisen.
In diesem Beispiel werden Wettersymbole aus dem Objekt weather extrahiert:
const weather = {
sun: '☀️',
sun_behind_small_cloud: '🌤️',
sun_behind_cloud: '⛅',
sun_behind_large_cloud: '🌥️',
sun_behind_rain_cloud: '🌦️',
cloud: '☁️',
cloud_with_rain: '🌧️',
cloud_with_snow: '🌨️',
cloud_with_lightning: '🌩️',
cloud_with_lightning_and_rain: '⛈️',
};
const { sun, cloud, cloud_with_lightning: thunder } = weather;
sun;
// => '☀️'
cloud;
// => '☁️'
thunder;
// => '🌩️'
Kurz gesagt:
- Die Syntax erlaubt es, Eigenschaften zu extrahieren sowie sie zu extrahieren und dabei umzubenennen.
- Die Destrukturierungssyntax ist in Funktionsparametern verfügbar.
Anleitung
Elyse, angehende Zauberin, setzt ihre Ausbildung fort.
Sie hat ein Kartendeck, das sie manipulieren möchte.
Um es einfacher zu machen, beginnt sie meist nur mit Karten, die von 2 bis 10 nummeriert sind, obwohl einige der Tricks zusätzliche (Bild-)Karten enthalten können.
Es gibt viele Möglichkeiten, die Karten zu mischen, aber um die Illusion der Magie aufrechtzuerhalten, ist es entscheidend, dass keine einzige Methode verwendet wird, z. B. benutzt Elyse weder splice, slice, shift, unshift, push noch at.
Auch der Array-Zugriff array[index] und der Objekt-Zugriff (object[key] und object.key) dürfen niemals verwendet werden.
Möchtest du Elyse helfen, ihre Magie auf das nächste Level zu bringen?
Jede Funktion kann mit den Parametern und einem Funktionskörper implementiert werden, der aus einem einzigen return expression besteht.
1. Die erste Karte holen
Elyse beschwört die erste Karte im Deck, ohne array[index], .at(index) oder .shift() zu verwenden.
Es ist wie Magie.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Die zweite Karte holen
Elyse führt einen Taschenspielertrick vor und beschwört die zweite Karte im Deck, ohne array[index] oder .shift() zu verwenden.
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Zwei Karten tauschen
Elyse lässt die beiden Karten des Decks die Plätze tauschen.
Sie muss keine einzige Funktion aufrufen.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Drei Karten verschieben
Um noch einen Taschenspielertrick vorzuführen, nimmt Elyse drei Karten und schiebt die oberste Karte schnell nach hinten, sodass die mittlere Karte zur ersten Karte wird und die alte unterste Karte zur mittleren Karte.
Sie muss keine einzige Funktion aufrufen.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Den benannten Stapel auswählen
Elyse teilt das Deck in zwei Stapel.
Dann bittet sie den Zuschauer, einen der beiden Stapel auszuwählen, den wir chosen nennen.
Der Stapel disregarded ist nicht mehr relevant, und sie lässt ihn verschwinden.
Sie muss keine einzige Funktion aufrufen.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Den ausgewählten Stapel tauschen
Leider wählt der Zuschauer immer wieder den „falschen" Stapel, doch mit etwas cleverer, schneller Magie benennt Elyse den Stapel chosen in disregarded um und den Stapel disregarded in chosen.
Sie muss keine einzige Funktion aufrufen.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Lernübung
