Bevezetés
Tömbök destrukturálása
A JavaScript tömbbeli destrukturálási szintaxisa tömör módja annak, hogy értékeket nyerj ki egy tömbből, és különálló változókhoz rendeld őket.
Ebben a példában a numberOfMoons tömb minden értéke a hozzá tartozó bolygóhoz van rendelve:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
Röviden:
- A szintaxissal nevet adhatsz egy tömb pozíció szerinti elemeinek, és új értékadással felcserélhetsz változókat.
- A destrukturálási szintaxis függvényparamétereken belül is használható, és bármely iterálható értéken elérhető.
- Ha egy pozíciót név nélkül hagyod (vagyis egyetlen változónevet sem írsz oda), az a pozíció csendben figyelmen kívül marad.
Objektumok destrukturálása
A JavaScriptben destrukturálási szintaxis arra is van, hogy tulajdonságokat nyerj ki egy objektumból, és különálló változókhoz rendeld őket.
Ebben a példában időjárás-szimbólumokat nyerünk ki a weather objektumból:
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;
// => '🌩️'
Röviden:
- A szintaxissal tulajdonságokat nyerhetsz ki, illetve nyerhetsz ki és nevezhetsz át egyszerre.
- A destrukturálási szintaxis függvényparamétereken belül is elérhető.
Utasítások
Elyse, a leendő varázsló, folytatja a képzését.
Van egy kártyapaklija, amivel szeretne bűvészkedni.
Hogy könnyebb legyen a dolga, általában csak a 2-től 10-ig számozott kártyákkal kezd, bár néhány trükkhöz további (figurás) kártyákra is szükség lehet.
Sok módon lehet ide-oda mozgatni a kártyákat, de a varázslat illúziójának fenntartásához elengedhetetlen, hogy egyetlen módszert se használjon, vagyis Elyse nem használja a splice, slice, shift, unshift, push, at metódusokat.
A tömbindexelő array[index] és az objektumelérő (object[key] és object.key) szintén soha nem használható.
Segítenél Elyse-nek szintet lépni a varázslásban?
Minden függvény megvalósítható pusztán a paraméterekkel és egyetlen return expression-ből álló függvénytörzzsel.
1. Szerezd meg az első kártyát
Elyse anélkül idézi meg a pakli első kártyáját, hogy az array[index], a .at(index) vagy a .shift() bármelyikét használná.
Ez már maga a varázslat.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Szerezd meg a második kártyát
Elyse ügyes kézmozdulattal idézi meg a pakli második kártyáját, anélkül hogy az array[index] vagy a .shift() valamelyikét használná.
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Cserélj meg két kártyát
Elyse helyet cseréltet a pakli két kártyájával.
Ehhez egyetlen függvényt sem kell meghívnia.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Mozgasd el három kártyát
Hogy még néhány ügyes mutatványt bemutasson, Elyse fog három kártyát, és gyorsan hátra teszi a felső kártyát: így a középső kártya lesz az első, a régi alsó kártya pedig a középső.
Ehhez egyetlen függvényt sem kell meghívnia.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Válaszd ki a megnevezett kupacot
Elyse két kupacra osztja a paklit.
Ezután megkéri a nézőt, hogy válassza ki az egyik kupacot, amit chosen-nek fogunk nevezni.
A disregarded kupac már nem számít, ezért eltünteti.
Ehhez egyetlen függvényt sem kell meghívnia.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Cseréld meg a kiválasztott kupacot
Sajnos a néző folyton a „rossz” kupacot választja, de némi ügyes, gyors varázslattal Elyse átnevezi a chosen kupacot disregarded névre, a disregarded kupacot pedig chosen névre.
Ehhez egyetlen függvényt sem kell meghívnia.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Tanulófeladat
