Istruzioni di Ripetizione TypeScript

Questo articolo spiega le istruzioni di ripetizione in TypeScript.

YouTube Video

L'istruzione for in TypeScript

L'istruzione for in TypeScript è una struttura base per eseguire operazioni ripetute. In un ciclo for, lo stesso blocco di codice può essere eseguito ripetutamente in base a un numero specifico di volte o a determinate condizioni.

Sintassi di Base

1for (initialization; condition; update) {
2    // Code to execute repeatedly while the condition is true
3}

• • Si'. Questa è la parte che viene eseguita solo una volta prima di iniziare il loop. Inizializzare variabili come contatori a ciclo.
• Condizioni (condizione): Determina se il ciclo continua. Se è vero, continuare a loop, e se falso, uscire.
• Revisione: Eseguire alla fine di ogni ciclo e aggiornare il contatore del loop.

Esempio 1: Ciclo for di base

Nell'esempio qui sotto, stampa in ordine i numeri da 0 a 4.

1for (let i = 0; i < 5; i++) {
2    console.log("The value of i is: " + i);
3}
4// Outputs:
5// The value of i is: 0
6// The value of i is: 1
7// The value of i is: 2
8// The value of i is: 3
9// The value of i is: 4

Esempio 2: Ciclo for con un array

Puoi anche utilizzare un ciclo for per elaborare in ordine gli elementi di un array.

1let fruits: string[] = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log("Fruit: " + fruits[i]);
5}
6// Outputs:
7// Fruit: apple
8// Fruit: banana
9// Fruit: cherry

Esempio 3: Ciclo for-in

Il ciclo for-in viene utilizzato per iterare sulle proprietà di un oggetto o sugli indici di un array in ordine.

1let car = { brand: "Toyota", model: "Corolla", year: 2020 };
2
3for (let key in car) {
4    console.log(key + ": " + car[key]);
5}
6// Outputs:
7// brand: Toyota
8// model: Corolla
9// year: 2020

Esempio 4: Ciclo for-of

Il ciclo for-of viene utilizzato per ottenere il valore di ciascun elemento in ordine da oggetti iterabili come array o stringhe.

1let colors: string[] = ["red", "green", "blue"];
2
3for (let color of colors) {
4    console.log("Color: " + color);
5}
6// Outputs:
7// Color: red
8// Color: green
9// Color: blue

Esempio 5: Ciclo for annidato

È anche possibile utilizzare un ciclo for all'interno di un altro ciclo for, noto come ciclo annidato. Questo ti consente, tra le altre cose, di creare cicli doppi.

 1for (let i = 0; i < 3; i++) {
 2    console.log("Outer loop i: " + i);
 3    for (let j = 0; j < 2; j++) {
 4        console.log("  Inner loop j: " + j);
 5    }
 6}
 7// Outputs:
 8// Outer loop i: 0
 9//   Inner loop j: 0
10//   Inner loop j: 1
11// Outer loop i: 1
12//   Inner loop j: 0
13//   Inner loop j: 1
14// Outer loop i: 2
15//   Inner loop j: 0
16//   Inner loop j: 1

Riepilogo

• La dichiarazione for esegue elaborazioni ripetitive basate su conteggi o condizioni specificate.
• for-in viene utilizzato per recuperare le proprietà di un oggetto o gli indici di un array.
• for-of recupera i valori degli elementi da oggetti iterabili come gli array.
• È possibile eseguire elaborazioni ripetitive complesse anche con cicli for annidati.

L'istruzione for in TypeScript fornisce un'elaborazione ripetitiva potente e flessibile, simile ad altri tipi di cicli.

Istruzioni while in TypeScript

In TypeScript, un'istruzione while è una struttura di ciclo che esegue un processo ripetitivo finché la condizione specificata è true. Simile al ciclo for, il ciclo while è adatto per casi in cui il numero di iterazioni non è predeterminato o quando si desidera controllare la ripetizione in base a una condizione.

Sintassi di Base

1while (condition) {
2    // Code to execute repeatedly while the condition is true
3}

• Condizione: La condizione sotto cui il ciclo viene eseguito. Il ciclo continua finché questa condizione è true e si interrompe quando diventa false.

Esempio 1: Ciclo while di base

Nell'esempio seguente, continua a visualizzare il valore di i finché i è minore di 5.

 1let i: number = 0;
 2
 3while (i < 5) {
 4    console.log("The value of i is: " + i);
 5    i++;
 6}
 7// Outputs:
 8// The value of i is: 0
 9// The value of i is: 1
10// The value of i is: 2
11// The value of i is: 3
12// The value of i is: 4

In questo esempio, il ciclo termina quando i diventa 5 o maggiore perché la condizione diventa false.

Esempio 2: Esempio di ciclo infinito

Se la condizione in un ciclo while è sempre true, può diventare un ciclo infinito. Questo di solito provoca l'incapacità del programma di interrompersi come previsto, quindi è necessaria attenzione.

 1let x: number = 0;
 2
 3while (true) {
 4    console.log("The value of x is: " + x);
 5    x++;
 6    if (x >= 5) {
 7        break; // Exit the loop when the condition is met
 8    }
 9}
10// Outputs:
11// The value of x is: 0
12// The value of x is: 1
13// The value of x is: 2
14// The value of x is: 3
15// The value of x is: 4

Puoi usare l'istruzione break per uscire forzatamente dal ciclo quando una condizione viene soddisfatta.

Esempio 3: Ciclo do-while

Il ciclo do-while è una struttura in cui il processo del ciclo viene eseguito almeno una volta. Poiché la condizione viene valutata dopo il processo, il processo viene eseguito almeno una volta anche se la condizione è false.

1let j: number = 5;
2
3do {
4    console.log("The value of j is: " + j);
5    j++;
6} while (j < 5);
7// Outputs: The value of j is: 5

In questo esempio, j è 5 dall'inizio e j < 5 è false, ma in un ciclo do-while, viene eseguito almeno una volta indipendentemente dalla condizione.

Riepilogo

• Un ciclo while ripete il processo finché la condizione è true.
• Se la condizione di terminazione del ciclo non è chiara, è necessario prestare attenzione ai cicli infiniti.
• Un ciclo do-while si differenzia da un normale ciclo while perché il processo viene eseguito almeno una volta.

L'istruzione while in TypeScript è utile per processi ciclici con un numero di iterazioni incerto o quando è necessaria una verifica dinamica delle condizioni.

break e continue

Puoi usare break e continue all'interno dei cicli.

• break viene utilizzato per terminare prematuramente un ciclo.
• continue viene utilizzato per saltare l'iterazione corrente e passare a quella successiva.

Esempio di break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

In questo caso, break viene eseguito quando i diventa 5. Di conseguenza, vengono visualizzati i numeri da 0 a 4.

Esempio di continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10
11while (i < 5) {
12    i++;
13    if (i === 3) {
14        continue;  // Skips when i is 3
15    }
16    console.log(i);
17}
18// Outputs 1, 2, 4, 5

In questo caso, continue viene eseguito quando i è 2. Di conseguenza, vengono visualizzati tutti i numeri tranne 2.

Cicli annidati in TypeScript

Un ciclo annidato è una struttura in cui viene utilizzato un ciclo all'interno di un altro ciclo. In TypeScript sono supportati costrutti di ciclo come for, while e do-while. Utilizzando cicli annidati, è possibile elaborare array bidimensionali (matrici) e semplificare l'elaborazione basata su più condizioni.

Sintassi di Base

La sintassi di base di un ciclo annidato è la seguente.

1for (let i: number = 0; i < n; i++) {
2  for (let j: number = 0; j < m; j++) {
3    // Processing for the inner loop
4  }
5}

Per ogni esecuzione del ciclo esterno, il ciclo interno completa tutte le sue iterazioni. Questa struttura è molto utile quando si gestiscono più cicli o strutture dati.

Esempio di un ciclo annidato in TypeScript

Attraversare un array bidimensionale

I cicli annidati sono spesso utilizzati per manipolare strutture dati multidimensionali come gli array bidimensionali. Nel seguente esempio, gli elementi di un array bidimensionale vengono attraversati e i loro valori vengono visualizzati nella console.

 1const matrix: number[][] = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row: number = 0; row < matrix.length; row++) {
 8  for (let col: number = 0; col < matrix[row].length; col++) {
 9    console.log(`matrix[${row}][${col}] = ${matrix[row][col]}`);
10  }
11}
12// Output
13// matrix[0][0] = 1
14// matrix[0][1] = 2
15// matrix[0][2] = 3
16// matrix[1][0] = 4
17// matrix[1][1] = 5
18// matrix[1][2] = 6
19// matrix[2][0] = 7
20// matrix[2][1] = 8
21// matrix[2][2] = 9

In questo esempio, stiamo attraversando l'array bidimensionale matrix. Il ciclo esterno gestisce le righe, mentre il ciclo interno gestisce le colonne, visualizzando ogni elemento in ordine.

Combinazione di due array

Successivamente, introduciamo un esempio per calcolare tutte le combinazioni di due array. Ad esempio, puoi prendere un elemento da ciascuno dei due array e generare tutte le coppie possibili.

 1const array1: string[] = ['A', 'B', 'C'];
 2const array2: number[] = [1, 2, 3];
 3
 4for (let i: number = 0; i < array1.length; i++) {
 5  for (let j: number = 0; j < array2.length; j++) {
 6    console.log(`Pair: (${array1[i]}, ${array2[j]})`);
 7  }
 8}
 9// Output
10// Pair: (A, 1)
11// Pair: (A, 2)
12// Pair: (A, 3)
13// Pair: (B, 1)
14// Pair: (B, 2)
15// Pair: (B, 3)
16// Pair: (C, 1)
17// Pair: (C, 2)
18// Pair: (C, 3)

In questo esempio, vengono create tutte le coppie tra l'array di stringhe array1 e l'array di numeri array2. Il ciclo esterno estrae elementi da array1, mentre il ciclo interno estrae elementi da array2, mostrando ogni coppia.

Generazione di coordinate con un ciclo triplo

Utilizzando cicli nidificati tripli, puoi generare, ad esempio, coordinate in uno spazio tridimensionale.

 1for (let x: number = 0; x < 3; x++) {
 2  for (let y: number = 0; y < 3; y++) {
 3    for (let z: number = 0; z < 3; z++) {
 4      console.log(`Coordinate: (${x}, ${y}, ${z})`);
 5    }
 6  }
 7}
 8// Output
 9// Coordinate: (0, 0, 0)
10// Coordinate: (0, 0, 1)
11// Coordinate: (0, 0, 2)
12// ...
13// Coordinate: (2, 2, 1)
14// Coordinate: (2, 2, 2)

In questo modo, l'utilizzo di cicli nidificati tripli consente di generare facilmente coordinate in uno spazio tridimensionale.

Prestazioni dei cicli nidificati

I cicli nidificati sono pratici, ma il costo computazionale aumenta rapidamente all'aumentare della profondità dei cicli. Ad esempio, se ci sono n iterazioni del ciclo esterno e m iterazioni del ciclo interno, il numero totale di iterazioni sarà n * m. Quando si aggiungono ulteriori nidificazioni, la complessità computazionale aumenta esponenzialmente, influenzando potenzialmente le prestazioni del programma.

Di seguito sono riportate le complessità computazionali quando si attraversano tre array.

 1const array1: number[] = [1, 2, 3];
 2const array2: number[] = [4, 5, 6];
 3const array3: number[] = [7, 8, 9];
 4
 5for (let i: number = 0; i < array1.length; i++) {
 6  for (let j: number = 0; j < array2.length; j++) {
 7    for (let k: number = 0; k < array3.length; k++) {
 8      console.log(`Combination: (${array1[i]}, ${array2[j]}, ${array3[k]})`);
 9    }
10  }
11}

In questo caso, è necessario calcolare array1.length * array2.length * array3.length, risultando in 3 * 3 * 3 = 27 iterazioni per elaborare tutte le combinazioni.

Ottimizzazione dei cicli nidificati

Quando utilizzi cicli nidificati, puoi migliorare le prestazioni considerando le seguenti ottimizzazioni.

1. Introdurre ritorni anticipati: Esci dal ciclo quando l'obiettivo è stato raggiunto per evitare iterazioni inutili.
2. Memorizzare in cache le variabili dei cicli: Memorizza in cache i valori delle variabili usate all'interno del ciclo (specialmente lunghezze e intervalli) per ridurre il costo del calcolo ad ogni iterazione.
3. Modificare le strutture dati: Rivedere la struttura degli array e degli oggetti può essere efficace per velocizzare specifici processi ripetitivi.

Conclusione

I cicli nidificati sono uno strumento potente per l'elaborazione complessa dei dati e degli algoritmi. Tuttavia, all'aumentare della profondità dei cicli e del numero di iterazioni, potrebbero sorgere problemi di prestazioni. Con ottimizzazioni appropriate e una progettazione attenta, puoi sfruttare efficacemente i cicli nidificati in TypeScript.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video