Termina un ciclo forEach utilizzando le eccezioni in JavaScript

Il linguaggio di programmazione JavaScript viene fornito con varie variazioni del ciclo for, a differenza di altri linguaggi di programmazione, possiamo vedere solo il tradizionale ciclo for, che consiste di 3 cose: inizializzazione, condizione e incremento o decremento. Dobbiamo seguire questi 3 elementi per far funzionare un tradizionale ciclo for. Può sembrare abbastanza confuso, soprattutto se sei nuovo nella programmazione.

JavaScript ci ha fornito un nuovo modo di scrivere il ciclo for, e questo è il ciclo forEach. Il ciclo forEach viene utilizzato per iterare su un array. Molti sviluppatori preferiscono usare il ciclo forEach rispetto al tradizionale ciclo for per iterare su un array perché è molto più facile da scrivere ed è molto più leggibile.

Qualsiasi ciclo, sia un ciclo for che un ciclo while, può essere terminato con l’aiuto di un’istruzione break. L’unico inconveniente nell’usare il ciclo forEach per iterare su un array è che non può essere terminato usando la parola chiave break. Ci sono momenti in cui vogliamo terminare un ciclo forEach quando una particolare condizione (vera o falsa) si verifica durante l’esecuzione del programma. Quindi, per questo, possiamo usare la gestione delle eccezioni.

Termina un ciclo forEach usando il blocco try...catch in JavaScript

Per ottenere la funzionalità fornita dall’istruzione break all’interno del ciclo array.forEach, possiamo utilizzare il concetto di gestione delle eccezioni, disponibile in JavaScript. La gestione delle eccezioni non è altro che la gestione di condizioni anomale se si verifica qualche errore durante l’esecuzione di un programma ed evitare inutili crash del programma. Questo viene fatto con l’aiuto di un blocco try...catch.

Il blocco try è dove scriverai tutto il codice. E il blocco catch conterrà il codice che verrà utilizzato per gestire l’eccezione.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <p id="errorMsg"></p>

    <script>
        var arr = [1, 2, 3, 4, 5]
        try {
        arr.forEach((element)=> {
            if (element === 4) throw "number is equal to four";
            console.log(element);
        });
        } 
        catch (e) {
            errorMsg = document.getElementById('errorMsg');
            errorMsg.innerHTML = "Error: " + e + ".";
        }
    </script>
</body>
</html>

Produzione:

// The below output will be printed on the screen.
Error: number is equal to four.

// The below output will be printed inside the web browser console
1
2
3

Questo è il nostro documento HTML 5. All’interno del tag <body>. Abbiamo un tag di paragrafo e il cui id è errorMsg. Questo tag di paragrafo verrà utilizzato per mostrare il messaggio di errore che verrà lanciato dal nostro programma JavaScript.

All’interno del tag <script> abbiamo il nostro programma attuale. Qui, per prima cosa, abbiamo dichiarato un array chiamato arr, che contiene elementi da 1 a 5. L’obiettivo principale qui è di iterare su questo array usando il ciclo forEach e poi interrompere il ciclo quando raggiunge l’elemento 4 All’interno dell’array arr.

Nel blocco try, usiamo un ciclo forEach per iterare su questo array. All’interno di questo ciclo, abbiamo passato una funzione anonima (nota anche come funzione freccia). All’interno di quella funzione, abbiamo un’istruzione if per verificare se l’elemento in una particolare posizione in un array è 4 o meno. Se non è 4, stamperà quell’elemento nella console del browser web; altrimenti, lancerà un’eccezione, dicendo che il number is equal to four.

Questa eccezione lanciata dal blocco try verrà rilevata dal blocco catch e memorizzata all’interno della variabile e. Ora possiamo mostrare il messaggio di errore presente all’interno della variabile e all’interno del tag p con l’aiuto di una proprietà HTML chiamata innerHTML. Questo è un intero processo di implementazione di una funzionalità break all’interno del ciclo forEach durante l’iterazione su un array in JavaScript.

Articolo correlato - JavaScript Loop

  • JavaScript loop attraverso un array