LOOP IN JAVASCRIPT

CICLO FOR

I loop possono eseguire un blocco di codice un certo numero di volte. Sono utili, se si desidera eseguire lo stesso codice più e più volte.

TIPI DI LOOP

JavaScript supporta diversi tipi di loop:

for – scorre un blocco di codice un certo numero di volte
for/in – scorre le proprietà di un oggetto
for/of – scorre i valori di un oggetto iterabile
while – scorre un blocco di codice mentre una condizione specificata è vera
do/while – variante del ciclo while. Scorre anche un blocco di codice mentre una condizione specificata è vera. Esegue il ciclo almeno una volta.

SINTASSI DEL CICLO FOR

for (statement 1; statement 2; statement 3) {
// code block to be executed
}

Lo statement 1 viene eseguito (una volta) prima dell’esecuzione del blocco di codice.
Lo statement 2 definisce la condizione per l’esecuzione del blocco di codice.
Lo statement 3 viene eseguito (ogni volta) dopo l’esecuzione del blocco di codice.

for (let i = 0; i < 5; i++) {
text += “The number is ” + i;
}

Dall’esempio sopra, puoi leggere:

Lo statement 1 imposta una variabile i prima dell’inizio del ciclo (i = 0), lo statement 2 definisce la condizione per l’esecuzione del ciclo (i deve essere inferiore a 5),lo statement 3 aumenta il valore i++ ogni volta che il blocco di codice è stato eseguito.

STATEMENT 1

Viene eseguito solo una volta, normalmente si utilizza statement 1 per inizializzare la variabile utilizzata nel ciclo (let i = 0).Questo non è sempre il caso di utilizzo. Lo statement 1 è facoltativo. È possibile avere molti valori separati da virgola:

for (let i = 0, len = cars.length, text = “”; i < len; i++) {
text += cars[i] + ‘ ‘;
}

Si può omettere lo statement 1 impostando i valori prima dell’inizio del ciclo:

let i = 2;
let len = cars.length;
let text = “”;
for (; i < len; i++) {
text += cars[i] + ‘ ‘;
}

STATEMENT 2

Statement 2 viene utilizzata per valutare la condizione della variabile iniziale. Se restituisce true, il ciclo continua, se restituisce false, il ciclo termina. Se ometti statement 2, devi fornire un break all’interno del ciclo, altrimenti il ciclo non finirà mai (Loop infinito). Questo manderà in crash il browser.

STATEMENT 3

Viene eseguita per ogni iterazione del ciclo for, statement 3 di solito incrementa il valore della variabile iniziale. Questo non è sempre vero, lo statement è facoltativo. Lo statement 3 può fare un incremento negativo (i–), incremento positivo (i = i + 15). Può anche essere omessa (l’importante è incrementare o decrementare in base al caso la variabile di controllo per uscire dal loop):

let i = 0;
let len = cars.length;
let text = “”;
for (; i < len; ) {
text += cars[i] + ‘ ‘;
i++;
}

SCOPE

var i = 5;
for (var i = 0; i <= 10; i++) {
// qualche codice
}
// Qui i è 10

usando let si ha invece:

let i = 5;
for (let i = 0; i < 10; i++) {
// qualche codice
}
// Qui i è 5

Nel primo esempio, usando var, la variabile dichiarata nel ciclo ridichiara la variabile al di fuori del ciclo. Nel secondo esempio, usando let, la variabile dichiarata nel ciclo non dichiara nuovamente la variabile al di fuori del ciclo. Quando si usa let per dichiarare la variabile i in un ciclo, la variabile i sarà visibile solo all’interno del ciclo.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Loop</title>
    <script type="rocketlazyloadscript">
        function loopFor()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
            let text = "";
            for (let i = 0; i < cars.length; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
        //Statemet 1 con più istruzioni
        function loopForVariante1()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford"];
            let i, len, text;
            for (i = 0, len = cars.length, text = ""; i < len; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
        }
        //Statement 1 assente
        function loopForVariante2()
        {
            const cars = ["BMW", "Volvo", "Saab", "Ford"];
            let i = 2;
            let len = cars.length;
            let text = "";
            for (; i < len; i++) {
                text += cars[i] + "<br>";
            }
            document.getElementById("demo").innerHTML = text;
            }
    </script>
</head>
<body>
    <h2>JavaScript ciclo For</h2>
    <p id="demo"></p>
    <button onclick="loopFor()">Ciclo For</button>
    <br>
    <br>
    <button onclick="loopForVariante1()">For Variante 1</button>
    <br>
    <br>
    <button onclick="loopForVariante2()">For Variante 2</button>
</body>
</html>

CICLO FOR IN

L’istruzione JavaScript for in scorre le proprietà di un oggetto:

for (key in object) {
// blocco di codice da eseguire
}

const person = {fname:”John“, lname:”Doe“, age:25};

let text = “”;
for (let x in person) {
text += person[x] + ‘ ‘;
}

//output John Doe 25

Il ciclo for in itera su un oggetto persona
Ogni iterazione restituisce una key (x)
La chiave viene utilizzata per accedere al valore
Il valore della chiave è person[x]

CICLO FOR IN NEGLI ARRAY

L’istruzione JavaScript for in può anche scorrere le proprietà di un array:

for (variable in array) {
//code
}

const numbers = [45, 4, 9, 16, 25];

let txt = “”;
for (let x in numbers) {
txt += numbers[x] + ‘ ‘;
}

//output 45 4 9 16 25

Non utilizzare for in su un array se l’ordine dell’indice è importante. L’ordine dell’indice dipende dall’implementazione e potrebbe non essere possibile accedere ai valori dell’array nell’ordine previsto. È meglio usare un ciclo for, un ciclo for of o Array.forEach() quando l’ordine è importante.

Copy to Clipboard

CICLO FOR OF

BROWSER COMPATIBILITY

L’istruzione JavaScript for of scorre i valori di un oggetto iterabile. Ti consente di scorrere strutture di dati iterabili come array, strings, maps, NodeLists e altro:

for (variable of iterable) {
// code block to be executed
}

variable – Ad ogni iterazione viene assegnato alla variabile il valore della proprietà successiva. La variabile può essere dichiarata con const, let o var.
iterable – Un oggetto con proprietà iterable.

const cars = [“BMW”, “Volvo”, “Mini”];
let text = “”;
for (let x of cars) {
text += x;
}

Copy to Clipboard

CICLO WHILE

Il ciclo while esegue il ciclo di un blocco di codice finché una condizione specificata è vera.

while (condition) {
// code block to be executed
}

let i = 0;

while (i < 10) {
text += “The number is ” + i;
i++;
}

Se dimentichi di aumentare la variabile i di controllo utilizzata nella condizione, il ciclo non finirà mai. Questo manderà in crash il browser.

Copy to Clipboard

CICLO DO WHILE

Il ciclo do while è una variante del ciclo while. Questo ciclo eseguirà il blocco di codice una volta, prima di verificare se la condizione è vera; quindi, ripeterà il ciclo finché la condizione è vera.

do {
// code block to be executed
}
while (condition);

L’esempio seguente utilizza un ciclo do while. Il ciclo verrà sempre eseguito almeno una volta, anche se la condizione è falsa, perché il blocco di codice viene eseguito prima che la condizione venga verificata:

let i = 0;

do {
text += “The number is ” + i;
i++;
}
while (i < 10);

Non dimenticare di aumentare la variabile utilizzata nella condizione, altrimenti il ciclo non finirà mai!

BREAK E CONTINUE

L’istruzione break “esce” da un ciclo.
L’istruzione continue “salta” un’iterazione nel ciclo.

let text = “”;

for (let i = 0; i < 10; i++) {
if (i === 3) { break; }
text += “The number is ” + i;
}

OUTPUT

//The number is 0
//The number is 1
//The number is 2

let text = “”;

for (let i = 0; i <= 5; i++) {
if (i === 3) { continue; }
text += “The number is ” + i;
}

OUTPUT

//The number is 0
//The number is 1
//The number is 2
//The number is 4
//The number is 5

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB