Introduzione
Destrutturazione degli array
La sintassi di destrutturazione degli array di JavaScript è un modo conciso per estrarre valori da un array e assegnarli a variabili distinte.
In questo esempio, ogni valore dell'array numberOfMoons viene assegnato al suo pianeta corrispondente:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
In breve:
- La sintassi permette di dare un nome agli elementi posizionati di un array e anche di scambiare le variabili tramite riassegnazione.
- La sintassi di destrutturazione è disponibile all'interno dei parametri di una funzione e su qualsiasi iterabile.
- Lasciare una posizione senza nome (non scrivendo nessun nome di variabile) ignora silenziosamente quella posizione.
Destrutturazione degli oggetti
In JavaScript esiste anche la sintassi di destrutturazione per estrarre proprietà da un oggetto e assegnarle a variabili distinte.
In questo esempio, i simboli del tempo vengono estratti dall'oggetto weather:
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;
// => '🌩️'
In breve:
- La sintassi permette sia di estrarre le proprietà sia di estrarle e rinominarle.
- La sintassi di destrutturazione è disponibile all'interno dei parametri di una funzione.
Istruzioni
Elyse, aspirante maga, continua il suo addestramento.
Ha un mazzo di carte che vuole manipolare.
Per semplificare le cose, di solito parte solo con carte numerate da 2 a 10, anche se alcuni trucchi possono coinvolgere altre carte (le figure).
Ci sono molti modi per spostare le carte, ma per mantenere viva l'illusione della magia è fondamentale che non venga usato un unico metodo, ad esempio Elyse non usa splice, slice, shift, unshift, push, at.
Anche l'accessor dell'array array[index] e l'accessor dell'oggetto (object[key] e object.key) non vanno mai usati.
Vuoi aiutare Elyse a far salire di livello la sua magia?
Ogni funzione può essere implementata usando i parametri e un corpo di funzione con un solo return expression.
1. Ottenere la prima carta
Elyse evoca la prima carta del mazzo senza usare array[index], .at(index) o .shift().
È proprio magia.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Ottenere la seconda carta
Elyse fa un gioco di prestigio ed evoca la seconda carta del mazzo senza usare array[index] o .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Scambiare due carte
Elyse fa scambiare di posto le due carte del mazzo.
Non ha bisogno di chiamare nemmeno una funzione.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Spostare tre carte
Per eseguire un altro gioco di prestigio, Elyse prende tre carte e sposta rapidamente la carta in cima in fondo, facendo diventare la carta centrale la prima carta e la vecchia carta in fondo quella centrale.
Non ha bisogno di chiamare nemmeno una funzione.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Scegliere il mucchio con nome
Elyse separa il mazzo in due mucchi.
Poi chiede all'osservatore di scegliere uno dei due mucchi, che chiameremo chosen.
Il mucchio disregarded non è più rilevante, e lei lo fa sparire.
Non ha bisogno di chiamare nemmeno una funzione.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Scambiare il mucchio scelto
Purtroppo l'osservatore continua a scegliere il mucchio «sbagliato», ma con un po' di magia astuta e veloce Elyse rinomina il mucchio chosen in disregarded e il mucchio disregarded in chosen.
Non ha bisogno di chiamare nemmeno una funzione.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Esercizio di apprendimento
