Elaborazione delle ripetizioni in JavaScript

In questo articolo spiegheremo l'elaborazione delle ripetizioni in JavaScript.

YouTube Video

L'istruzione for in JavaScript

Sintassi di Base

1for (initialization; condition; update) {
2  // Code to repeat
3}

L'istruzione for in JavaScript è una sintassi per eseguire iterazioni. Esegue ripetutamente un blocco di codice specificato finché una determinata condizione è soddisfatta. Utilizzando l'istruzione for, è possibile eseguire lo stesso processo in modo efficiente più volte.

• Inizializzazione (initialization): La parte che viene eseguita solo una volta prima di avviare il ciclo. Inizializzare variabili come il contatore del ciclo.
• Condizione (condition): La condizione che determina se continuare il ciclo. Se è true, il ciclo continua; se è false, termina.
• Aggiornamento (update): Viene eseguito alla fine di ogni ciclo per aggiornare il contatore del ciclo.

Esempio

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

In questo caso, i inizia a 0 e il ciclo viene eseguito finché i < 5 è true. i++ incrementa i di 1 a ogni iterazione del ciclo. Di conseguenza, vengono visualizzati numeri da 0 a 4.

Ambito del Contatore del Ciclo

Dichiarare o inizializzare variabili nella parte di inizializzazione dell'istruzione for. Le variabili dichiarate qui sono valide solo all'interno del ciclo.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Come mostrato in questo esempio, fare riferimento a una variabile al di fuori dell'istruzione for genererà un errore.

Ciclo Infinito

Impostare una condizione che non termina il ciclo provoca un ciclo infinito. Questo potrebbe sovraccaricare il browser o il sistema, quindi è necessaria cautela.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Array e Istruzione for

È comune utilizzare l'istruzione for in combinazione con gli array. È conveniente per elaborare ogni elemento di un array.

Esempio

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

In questo modo, puoi elaborare ogni elemento di un array utilizzando gli indici.

Altre Strutture di Ciclo

Dichiarazione for...of

La dichiarazione for...of viene utilizzata per oggetti iterabili come array e stringhe.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Ciò consente di elaborare ogni elemento senza utilizzare gli indici.

Dichiarazione for...in

La dichiarazione for...in viene utilizzata per iterare sulle proprietà di un oggetto.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

In questo modo, puoi eseguire operazioni su ogni elemento utilizzando le chiavi.

Riepilogo

• La dichiarazione for è una struttura di ciclo con tre parti: inizializzazione, condizione e aggiornamento.
• Puoi controllare il comportamento dei cicli utilizzando break o continue.
• Quando combinati con array o oggetti, gli elementi o le proprietà possono essere elaborati in modo efficiente.

La Dichiarazione while in JavaScript

Sintassi di Base

1while (condition) {
2    // Code that repeats while the condition is true
3}

La dichiarazione while in JavaScript è una struttura di ciclo che esegue operazioni ripetute finché la condizione specificata è true. Simile alla dichiarazione for, la dichiarazione while specifica solo la condizione.

• Condizione: Scrivi l'espressione condizionale che determina se continuare il ciclo. Il ciclo continua finché è true e termina quando diventa false.

Esempio

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

In questo esempio, il ciclo inizia con la variabile i a 0 ed esegue finché i < 5 è true. In ogni iterazione del ciclo, i viene incrementato di 1, e quando i diventa 5, la condizione diventa false e il ciclo termina. Di conseguenza, la dichiarazione while visualizza da 0 a 4.

A differenza della dichiarazione for, nella dichiarazione while, l'inizializzazione e l'aggiornamento delle variabili sono scritti come dichiarazioni separate. Puoi anche fare riferimento alla variabile dopo la dichiarazione while. In questo caso, 5 viene visualizzato dopo che la dichiarazione while è terminata.

Ciclo Infinito

Se la condizione è sempre true, si verifica un ciclo infinito che non termina. I cicli infiniti dovrebbero essere evitati, ma se usati intenzionalmente, puoi terminare il ciclo con una dichiarazione break.

Esempio

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Elaborazione di array con un ciclo while

È anche possibile elaborare gli array con un'istruzione while.

Esempio

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

Istruzione do...while

Sintassi di Base

1do {
2    // Code that is executed at least once
3} while (condition);

L'istruzione do...while, una variante dell'istruzione while, verifica la condizione dopo aver eseguito il ciclo almeno una volta. Mentre l'istruzione while verifica prima la condizione, l'istruzione do...while esegue il processo una volta prima di verificare la condizione.

Esempio

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

In questo esempio, i viene visualizzato da 0 a 4. L'istruzione do...while si differenzia dall'istruzione while perché viene sempre eseguita una volta, anche se la condizione è false.

Riepilogo

• L'istruzione while viene utilizzata per eseguire ripetutamente il codice finché la condizione rimane true.
• Fai attenzione ai cicli infiniti, ma puoi controllare il flusso dei cicli utilizzando break e continue.
• L'istruzione do...while è utile quando si vuole eseguire il ciclo almeno una volta.

break e continue

Puoi utilizzare break e continue all'interno del ciclo.

• break viene usato per terminare prematuramente il ciclo.
• continue salta l'iterazione corrente e passa 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 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;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

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

Cicli annidati in JavaScript

Nella programmazione in JavaScript, un ciclo annidato è una struttura in cui un ciclo è presente all'interno di un altro. Tali cicli sono molto efficaci quando algoritmi o processi specifici si estendono su più dimensioni o livelli. Ad esempio, elaborare un array multidimensionale con array all'interno di altri array è un caso tipico.

Qui spiegheremo la struttura di base dei cicli annidati, esempi di utilizzo, precauzioni e considerazioni sull'ottimizzazione.

Struttura di base dei cicli annidati

La struttura di base di un ciclo annidato è una forma in cui uno o più cicli sono contenuti all'interno di un altro ciclo. Ogni volta che il ciclo esterno viene eseguito una volta, il ciclo interno viene eseguito tante volte.

Di seguito è riportato un esempio di base di due cicli annidati.

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

Nel codice sopra, i viene contato nel ciclo esterno, e j viene contato nel ciclo interno. Ogni volta che il ciclo esterno viene eseguito una volta, il ciclo interno viene eseguito due volte.

Esempio pratico di cicli annidati

I cicli annidati sono particolarmente utili per la gestione di array multidimensionali. Ad esempio, quando si gestisce un array bidimensionale, è necessario gestire sia le righe (ciclo esterno) che le colonne (ciclo interno).

Nel seguente esempio, gestiamo un array bidimensionale e stampiamo ogni elemento.

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

In questo modo, utilizzare cicli annidati consente di accedere a ogni elemento di un array bidimensionale.

Note

Ci sono alcuni punti da considerare quando si utilizzano cicli annidati.

1. Problemi di prestazioni

   Man mano che i cicli annidati diventano più profondi, il tempo di esecuzione aumenta notevolmente. Ad esempio, se il ciclo esterno viene eseguito 100 volte e il ciclo interno 100 volte, vengono eseguite in totale 10.000 operazioni. Pertanto, se ci sono molte iterazioni del ciclo, dovresti considerare l'ottimizzazione del ciclo per migliorare l'efficienza.

2. Applicazione agli algoritmi complessi

   I cicli annidati sono molto potenti, ma man mano che l'elaborazione diventa complessa, il codice può diventare difficile da capire. Pertanto, per mantenere la leggibilità del codice, è importante organizzare l'elaborazione con commenti e funzioni appropriati.

Considerazioni sull'ottimizzazione

Quando si utilizzano cicli annidati, è possibile considerare le seguenti ottimizzazioni.

1. Terminazione anticipata del ciclo

   Se una specifica condizione viene soddisfatta all'interno del ciclo, puoi utilizzare l'istruzione break per uscire dal ciclo. Questo può evitare cicli inutili e migliorare le prestazioni.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Spostare i calcoli all'esterno

   Invece di eseguire lo stesso calcolo all'interno del ciclo ogni volta, puoi eseguirlo una volta all'esterno del ciclo e utilizzare il risultato per rendere il processo più efficiente.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Riepilogo

I cicli annidati sono molto utili per gestire strutture di dati complesse e algoritmi in JavaScript. Tuttavia, se non utilizzati correttamente, possono causare un degrado delle prestazioni e una ridotta leggibilità del codice. Per utilizzare efficacemente i cicli annidati, è importante mirare all'ottimizzazione dei cicli e all'organizzazione del codice, oltre a adottare approcci appropriati a seconda della situazione.

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

YouTube Video