Terminer une boucle forEach en utilisant des exceptions en JavaScript

Sahil Bhosale 17 juin 2021
Terminer une boucle forEach en utilisant des exceptions en JavaScript

Le langage de programmation JavaScript est livré avec diverses variations de la boucle for, contrairement aux autres langages de programmation, nous ne voyons que la boucle for traditionnelle, qui se compose de 3 choses - initialisation, condition et incrémentation ou décrémentation. Nous devons suivre ces 3 éléments pour faire fonctionner une boucle for traditionnelle. Cela peut sembler assez déroutant, surtout si vous êtes nouveau dans la programmation.

JavaScript nous a fourni une nouvelle façon d’écrire la boucle for, et c’est la boucle forEach. La boucle forEach permet d’itérer sur un tableau. De nombreux développeurs préfèrent utiliser la boucle forEach plutôt que la traditionnelle boucle for pour parcourir un tableau car elle est beaucoup plus facile à écrire et est beaucoup plus lisible.

Toute boucle, que ce soit une boucle for ou une boucle while, peut être terminée à l’aide d’une instruction break. Le seul inconvénient de l’utilisation de la boucle forEach pour parcourir un tableau est qu’elle ne peut pas être terminée avec le mot-clé break. Il y a des moments où nous voulons terminer une boucle forEach quand une condition particulière se vérifie (vraie ou fausse) pendant l’exécution du programme. Donc, pour cela, nous pouvons utiliser la gestion des exceptions.

Terminer une boucle forEach en utilisant le bloc try...catch en JavaScript

Pour atteindre la fonctionnalité fournie par l’instruction break à l’intérieur de la boucle array.forEach, nous pouvons utiliser le concept de gestion des exceptions, qui est disponible en JavaScript. La gestion des exceptions n’est rien d’autre que la gestion de conditions anormales si une erreur se produit lors de l’exécution d’un programme et d’éviter les plantages inutiles du programme. Cela se fait à l’aide d’un bloc try...catch.

Le bloc try est l’endroit où vous allez écrire tout le code. Et le bloc catch contiendra le code qui servira à gérer l’exception.

<!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>

Production:

// 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

Ceci est notre document HTML 5. À l’intérieur de la balise <body>. Nous avons une balise de paragraphe et dont id est errorMsg. Cette balise de paragraphe sera utilisée pour afficher le message d’erreur qui sera généré par notre programme JavaScript.

Dans la balise <script>, nous avons notre programme actuel. Ici, tout d’abord, nous avons déclaré un tableau appelé arr, qui contient des éléments de 1 à 5. Le but principal ici est d’itérer sur ce tableau en utilisant la boucle forEach puis de casser la boucle quand il atteint l’élément 4 À l’intérieur du tableau arr.

Dans le bloc try, nous utilisons une boucle forEach pour parcourir ce tableau. À l’intérieur de cette boucle, nous avons passé une fonction anonyme (également appelée fonction de flèche). À l’intérieur de cette fonction, nous avons une instruction if pour vérifier si l’élément à une position particulière dans un tableau est 4 ou non. Si ce n’est pas 4, il imprimera cet élément dans la console du navigateur Web; sinon, il lèvera une exception, disant que le number is equal to four.

Cette exception lancée par le bloc try sera interceptée par le bloc catch et stockée dans la variable e. Nous pouvons maintenant afficher le message d’erreur présent à l’intérieur de la variable e à l’intérieur de la balise p à l’aide d’une propriété HTML appelée innerHTML. C’est tout un processus d’implémentation d’une fonctionnalité break à l’intérieur de la boucle forEach en itérant sur un tableau en JavaScript.

Sahil Bhosale avatar Sahil Bhosale avatar

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

LinkedIn

Article connexe - JavaScript Loop