Cicli: for..of e for..in

Noi abbiamo coperto i cicli base di JavaScript chiamati for e while. Specialmente il ciclo for è molto flessibile e può essere usato per molti casi d'uso. Anche se, nelle versioni recenti di JavaScript, due nuove versioni del ciclo for sono state aggiunte; Il ciclo for..of e il ciclo for..in.

Il ciclo for..of

Tu puoi usare il ciclo for..of per iterare ogni tipo di oggetto iterabile e mentre noi non abbiamo ancora visto questo specifico topico ancora, questo è un po' avanzato, Io voglio che tu conosco qualcosa del ciclo for..of adesso - possiamo sempre parlare di più sugli oggetti iterabili dopo.

A questo punto, hai bisogno di conoscere che che ci sono diversi oggetti built-in che implementano le funzionalità richieste per funzionare come un oggetto iterabile. L'oggetto Array è quello più ovvio, ma attualmente, l'oggetto String implementa anche questo. Non abbiamo ancora veramente discusso sugli array, oggetti e stringhe in dettaglio ancora, allora a questo punto, manterrò gli esempi semplici e illustrativi - tu puoi sempre ritornare a questo articolo se vuoi rispolverare come funzionano questi speciali cicli for.

Per prima, per illustrare la differenza tra un ciclo for normale ed uno specializzato for..of, ecco come in precedenza avremmo eseguito un ciclo su un Array:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let i = 0; i < fruits.length; i++)
	alert(fruits[i]);

Grazie alla proprietà length dell'Array, noi sappiamo quanto lontano ci possiamo spingere per accedere ad ogni elemento presente nell'array. Questo funziona correttamente, e previamente, e questo potrebbe essere definitivamente il modo in cui possiamo navigare dentro un array.

Ma grazie al ciclo for..of, noi possiamo semplicemente semplificare un po' il processo. Guarda questo esempio, dove facciamo lo stessi, ma con una sintassi molto più semplice:

let fruits = ["Apple", "Pineapple", "Banana"];

for(let fruit of fruits)
	alert(fruit);

Il modo in cui funziona è semplice: Una variabile è dichiarata, chiamata fruit (tu puoi chiamala nel modo in cui vuoi, per certo), e per ogni iterazione, questa variabile è aggiornata con il seguente elemento dell'array. Semplice ed effettivo!

E perche l'oggetto String è anche un oggetto iterabile, noi possiamo facilmente iterare anche attraverso questo:

let text = "Hello!";
for(let c of text)
	console.log(c);
// Expected output:
/*
"H"
"e"
"l"
"l"
"o"
"!"
*/

Il ciclo for..in

Noi abbiamo il ciclo for..of per le collezioni (come gli array) e dopo abbiamo il ciclo for..in per gli oggetti. Da quando gli oggetti in JavaScript sono basicamente delle collezioni con chiavi e valori, noi possiamo iterare attraverso le proprietà che possono essere veramente utili. Di nuovo, noi parleremo di più sugli oggetti dopo in questo tutorial, ma per adesso, giusto considera questo esempio di come il ciclo for..in funziona:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop);
}

// Expected output:
// "name"
// "age"

Come puoi vedere, sembra che si comporti come il ciclo for..of, ma in questo caso, noi otteniamo il nome della proprietà per ogni iterazione. Se noi vogliamo, possiamo certamente usare questo nome per ottenere il valore attuale della proprietà, così:

let obj = 
{
	name: "John Doe",
	age: 42
};

for(let prop in obj)
{
	alert(prop + " = " + obj[prop]);
}

// Expected output:
// "name = John Doe"
// "age = 42"

Cosi come puoi vedere, questo è semplice è poderoso non appena inizi a lavorare con gli oggetti, tu apprezzerai rapidamente il ciclo for..in.

Controlli dei cicli: break e continue

Noi abbiamo già introdotto le parole chiave break e continue nel capitolo previo, dove lo abbiamo usato con i cicli for e while, ma loro funzionano nello stesso modo nel cicli for..of e for..in. La parola chiave continue ti farà passare alla iterazione seguente del ciclo, mentre la parola chiave break ti farà uscire immediatamente da questo. Ecco un esempio:

let text = "Hello!";
for(let c of text)
{
	if(c == "l")
		continue;
	if(c == "!")
		continue;
	alert(c);
}
// Expected output:
// "H"
// "e"
// "o"

In questo esempio, noi usiamo sia break che continue. Noi iteriamo la stringa "Hello!" e quando arriviamo alla "l", noicontinue (continuiamo saltando la iterazione corrente spostandoci alla seguente), e se arriviamo a "!", noi break (ci fermiamo uscendo dal loop). Se ne break o continue sono eseguiti, noi stampiamo il carattere corrente, risultando nelle lettere "H", "e" e "o" le quali vengono stampate.

Riassunto

Il ciclo for..of e for..in sono belli, e recenti, un plus per JavaScript, rendendo più semplice iterare sugli array speciali e gli oggetti. Non offrono un vantaggio diretto usando il buono e vecchio, ciclo for e while, a eccezione del fatto che sono più veloci da scrivere e rendono il tuo codice meno complesso.

Come menzionato, gli array e gli oggetti non sono stati ancora visti in questo tutorial, ma imparerai di più di questo nei seguenti capitoli, allora mantieni questi cicli specializzati in mente quando inizieremo a lavorare con questi tipi.