Maison > Article > interface Web > Comment arrêter la méthode forEach() en JavaScript ?

Comment arrêter la méthode forEach() en JavaScript ?

WBOYavant: 2023-08-23 19:53:021007parcourir

En JavaScript, les programmeurs peuvent utiliser la méthode forEach() pour parcourir un tableau d'éléments. Nous pouvons appeler la fonction de rappel, en la passant comme argument à la méthode forEach() pour chaque élément du tableau.

Parfois, nous devrons peut-être arrêter la boucle forEach() après avoir exécuté la fonction de rappel. Nous pouvons utiliser le mot-clé 'break' dans une boucle normale pour l'arrêter comme indiqué ci-dessous.

for(let i = 0; i < length; i++){
   // code
   if( some condition ){
      break;
   }
}

Mais nous ne pouvons pas utiliser le mot-clé 'break' dans la méthode forEach().

array.forEach(element => {
   // code
   if( some condition ){
      break;
   }
});

Le code ci-dessus n'arrêtera pas l'exécution de la boucle forEach().

Ce tutoriel enseignera différentes manières d'arrêter une boucle forEach() en JavaScript.

Utilisez le mot-clé de retour

Le mot-clé return arrête l'exécution du code. Dans la boucle forEach(), il est utilisé comme instruction continue.

Grammaire

Les utilisateurs peuvent utiliser le mot-clé return selon la syntaxe suivante pour arrêter l'exécution de la méthode forEach().

array.forEach(function (element, index) {
   if (condition) {
      return; 
   }
});

Dans la syntaxe ci-dessus, si la condition devient vraie, le code de la fonction de rappel de l'élément ne sera pas exécuté.

La traduction chinoise de

Exemple 1

est :

Exemple 1

Dans l'exemple ci-dessous, nous utilisons la méthode forEach() avec le tableau de chaînes. Nous appelons la fonction de rappel pour chaque élément, qui imprime chaque élément. Nous avons utilisé la condition selon laquelle si l'index > fonction. Il n’imprimera donc pas l’élément.

<html>
<body>
   <h2>Using the <i>return keyword</i> to stop the execution of the forEach() loop.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = ["string1", "string2", 10, 20, false, true];
      function callback(element, index) {
         // stop execution of for-loop
         if (index > 2) {
            return; // works like a continue statement
         }
         output.innerHTML += "The array element is " + element + "<br/>";
      }
      array.forEach(callback);
   </script>
</body>
</html>

Le mot-clé "return" n'interrompra pas la méthode forEach(), mais il fonctionnera comme un mot-clé de continuation si la condition est vraie.

Arrêtez la boucle forEach() en lançant une exception

Une autre façon d'arrêter l'exécution de la boucle forEach() consiste à utiliser une instruction try-catch. Lorsque nous voulons arrêter l’exécution de la méthode forEach(), nous pouvons générer une erreur. De plus, nous pouvons détecter les erreurs dans un bloc « catch ». Nous pouvons exécuter n'importe quel code dont nous avons besoin après la méthode forEach() dans le bloc «finally».

Grammaire

Les utilisateurs peuvent utiliser l'instruction try-catch selon la syntaxe suivante pour arrêter la méthode forEach().

try {
   array.forEach((ele) => {
      if (condition) {
         throw new Error("Break the loop.")
      }
   })
} catch (error) {
}

Dans la syntaxe ci-dessus, nous avons utilisé le mot-clé throw pour lever l'exception et interrompre la méthode forEach().

La traduction chinoise de

Exemple 2

est :

Exemple 2

Dans l'exemple ci-dessous, nous avons utilisé la méthode forEach() avec une instruction try-catch. Dans la fonction de rappel de la méthode forEach(), nous vérifions le type d'élément et si nous trouvons un élément de type "number", nous renvoyons une erreur.

Ainsi, il arrêtera d’exécuter la méthode forEach().

<html>
<body>
   <h2>Using the <i>try-catch statement</i> to stop the execution of the forEach() loop.</h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let array = ["Cpp", "c", "Java", "JavaScript", 06, true, 43, false];
      try {
         array.forEach((ele) => {
            if (typeof ele == "number") {
               throw new Error("Break the loop.")
            }
            output.innerHTML += "Element value is " + ele + "<br/>";
         })
      } catch (error) {
         output.innerHTML += "Exception thrown from the forEach loop. " + error;
      }
   </script>
</body>
</html>

Dans la sortie ci-dessus, les utilisateurs peuvent constater qu'il arrête d'imprimer les éléments après avoir trouvé l'élément de type numérique dans le tableau.

Utilisez un mot-clé for loop et break normal

La meilleure solution pour arrêter l'exécution de la méthode forEach() est de remplacer la boucle forEach() par une boucle for normale et d'utiliser le mot-clé break pour arrêter son exécution.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour utiliser la boucle for avec le mot-clé break.

for ( ){
   if (condition) {
      break;
   }
}

Dans la syntaxe ci-dessus, nous utilisons le mot-clé break pour arrêter l'exécution de la boucle for lorsqu'une condition spécifique devient vraie.

La traduction chinoise de

Exemple 3

est :

Exemple 3

Dans l'exemple ci-dessous, nous avons défini un tableau contenant différentes valeurs. Nous utilisons une boucle for normale pour parcourir le tableau, et si la valeur du tableau est supérieure à 30, nous utilisons le mot-clé break pour arrêter l'exécution de la boucle for.

<html>
<body>
   <h2>Using the normal for-loop with break keyword to stop the execution of for-loop. </h2>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arrayElements = [10, 20, 30, 40, 50, 60, 70, 80, 90];
      output.innerHTML += "Some array elements are "
      for (let k = 0; k < arrayElements.length; k++) {
         if (arrayElements[k] > 30) {
            break;
         }
         output.innerHTML += arrayElements[k] + " , ";
      }
   </script>
</body>
</html>

Méthode. La première méthode ne rompt pas la boucle, mais agit comme une instruction « continue ». La deuxième méthode utilise une instruction try-catch pour interrompre la méthode forEach(). Dans le développement réel, nous ne pouvons pas générer d'erreurs pour interrompre la boucle forEach(). Par conséquent, les première et deuxième méthodes ne sont pas recommandées.

Dans la troisième méthode, nous remplaçons la méthode forEach() par une boucle for normale et utilisons le mot-clé break. La troisième méthode fonctionnera correctement, mais une boucle for normale peut être plus lente que la méthode forEach() lors de l'itération à travers les éléments. Par conséquent, les utilisateurs peuvent également essayer les méthodes array.some() et array.each() pour améliorer les performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript print Array if for foreach try throw catch break continue 回调函数循环 using finally number function

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un triangle avec une bordure en pointillés à l'aide de FabricJS ?Article suivant：Comment créer un triangle avec une bordure en pointillés à l'aide de FabricJS ?

Articles Liés

Voir plus