Tutorial TypeScript : Parte terza - i cicli

Una serie di frammenti di codice riguardante i cicli nel linguaggio TypeScript.

il
Sviluppatore Microsoft .Net, Collaboratore di IProgrammatori

In questa terza parte esamineremo i vari utilizzi di cicli, ossia il ripetersi di un’azione in base ad una condizione.
I cicli for e while, come avviene per molti linguaggi, permettono di eseguire il codice o verificare per una serie di volte una determinata condizione.
Possiamo utilizzare il procedente progetto, quello degli articoli precedenti, oppure crearne un nuovo, in base al proprio gradimento.
Vedremo nei prossimi frammenti di codice i vari utilizzi dei cicli.


Il ciclo for

Il ciclo for è quello standard che viene eseguito diverse volte a seconda di ciò che è stato dichiarato nella parentesi tonde. 

Di seguito si riporta un frammento di codice di tale utilizzo.

TypeScript
ngOnInit(): void {
    let totale: number = 3;
    for (let index = 0; index < totale; index++) {
       alert(index);
    }
 }

Nel frammento di codice illustrato in precedenza viene eseguito il messaggio a video 3 volte, in quanto è stata dichiarata una variabile con valore tre.
La sintassi è molto semplice, viene dichiarata una variabile con un valore di partenza, viene eseguito in base al secondo elemento, in questo caso meno di quanto è stata dichiarata la variabile, e poi la variabile che viene incrementata di volta in volta di un singolo valore.
Possiamo anche dichiarare una variabile esternamente alla sintassi del for. Nel precedente esempio, la dichiarazione di variabile contatore poteva essere dichiarata esternamente.
Di seguito il frammento di codice delle suddette operazioni.

TypeScript
 ngOnInit(): void {
    let totale: number = 3;
    let index = 0
    for (; index < totale; index++) {
       alert(index);
    }
 }

Ciclo For of e for in  

Un’altra sintassi molto utilizzata nei cicli for è quella di effettuare l’iterazione delle operazioni di una determinata lista di valori. Supponiamo di avere un’array o list o comunque un insieme di valori, il ciclo “for of” e “for in” permette di effettuare il ripetersi dell’operazione per i valori dell’insieme.
La differenza tra “for of” e “for in” sta nel fatto che il primo restituisce per ogni volta che effettua il ciclo il valore dell’insieme, mentre nel secondo caso l’indice per ogni elemento.
L’esempio qui di seguito viene effettuato un ciclo in un array di tipo string (le array saranno argomento del prossimo capitolo) visualizzando a video l’indice per ogni elemento.
Il risultato sarà a video, del valore, 0, 1 e 2.

TypeScript
ngOnInit(): void {
    let arrayTesto: string[] = ['Ema', 'Luigi', "Giulia"];
   for (var testo in arrayTesto) {
     alert(testo);
   }
 }

Il ciclo for permette invece di rilevare i valori dell’insieme, restituendo i nomi dell’array di tipo “string” che abbiamo definito in precedenza.
In questo caso il valore restituito sarà “Ema”, “Luigi” e “Giulia”.
Di seguito si riporta il frammento di codice delle suddette operazioni.

TypeScript
ngOnInit(): void {
  let arrayTesto: string[] = ['Ema', 'Luigi', "Giulia"];
  for (var testo of arrayTesto) {
     alert(testo);
   }
 }

Ciclo While e do while

Altra tipologia di ciclo è quella While, che effettua tante volte il ciclo fino a quando la condizione è vera, una volta che la condizione non è più vera, il ciclo termina.
Di seguito si riporta un frammento di codice sull’utilizzo del ciclo While.

TypeScript
ngOnInit(): void {
   let totale: number = 3;
   while (totale  < 5) {
     alert('test');
     totale += 1;
   }
}

Nel frammento di codice precedente, viene effettuato due volte il ciclo, in quanto incrementando la variabile denominata “totale” questa risulta  dopo la seconda esecuzione uguale alla condizione e quindi non più vera.

Altra variante del ciclo While, è quella di eseguire prima il codice e poi verificare la condizione, questo avviene con la sintassi do while.
Nel seguente esempio, viene seguito il codice nonostante la condizione non è rispettata, questo perché prima esegue il codice e poi effettua la verifica delle condizioni.

TypeScript
ngOnInit(): void {
   let totale: number = 3;
   do{
     alert('test');
     totale += 1;
   }
   while (totale  > 5)
 }

Uso di Break e continue

Siamo giunti quasi alla conclusione di questo articolo, illustrando due parole chiavi che possono tornare utile durante l’esecuzione dei cicli. 
In particolare, con le parole break e continue si permette di uscire dal ciclo o non eseguire una determinata porzione di codice.
Utilizzando in un ciclo la parola chiave “Break”, questa permette di uscire dal ciclo.
Di seguito si riporta un frammento di codice, con il quale se la condizione all’interno del ciclo è rispettata si esce dal ciclo stesso.

TypeScript
ngOnInit(): void {
   let totale: number = 3;
   let arrayTesto: string[] = ['Ema', 'Luigi', "Giulia", "Alex", "Olga", "Marco"];
   for (var testo of arrayTesto) {
     if(totale==4)
       break;
     totale +=1;
   }
   alert(totale);
 }

Come si è visto dal precedente codice, effettua un ciclo per ogni elemento trovato nell’array, se la variabile denominata “Totale” ha il valore 4, questa esce dal ciclo. Per ogni esecuzione del codice, viene incrementata la variabile. Al termine, avremo come valore 4 per la variale Totale.
La parla chiave Continue, al contrario non esce dal ciclo, ma nel punto in cui si trova non esegue il codice che si trova al disotto di questa parola, continuando a rieseguire il ciclo. In pratica e come se viene eseguito il ciclo senza l’esecuzione del codice sottostante a tale parola.
Di seguito si riporta un frammento di codice di tale utilizzo.

TypeScript
ngOnInit(): void {
   let totale: number = 3;
   let arrayTesto: string[] = ['Ema', 'Luigi', "Giulia", "Alex", "Olga", "Marco"];
   for (var testo of arrayTesto) {
     totale +=1;
     if(totale < 7)
       continue;
     alert(testo);
   }
   alert(totale);
 }

L'esempio precedente non esegue il codice sotto alla parola chiave “Continue” fino a quando la condizione della If viene rispettata. Il risultato finale sarà che verranno visualizzati a video i nomi da “Alex” in poi, ed al termine del ciclo For, la variabile totale avrà come valore 9.


Conclusioni

Siamo giunti al termine di questa terza parte, un articolo che ha fornito al lettore vari esempi di codice ed informazioni sulla gestione dei cicli.
Per chi già programma con altri linguaggi di programmazione, quali per esempio “C# o Java” troverà molto simile la sintassi al proprio linguaggio.
In questa parte sono stati affrontati i cicli che permettono di eseguire ne volte una porzione di codice fino a quando la condizione è rispettata. Si possono utilizzare per esempio nell’esaminare una serie di record oppure determinate liste, un modo per scorrere determinati elementi.
Nel prossimo articolo si affronteranno gli array, in cui è stato fatto un accenno in questo articolo.