Table des matières
Utilisez le mot-clé de retour
Grammaire
Exemple 3
Using the return keyword to stop the execution of the forEach() loop.
Arrêtez la boucle forEach() en lançant une exception
Using the try-catch statement to stop the execution of the forEach() loop.
Utilisez un mot-clé for loop et break normal
Using the normal for-loop with break keyword to stop the execution of for-loop.
Maison interface Web js tutoriel Comment arrêter la méthode forEach() en JavaScript ?

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

Aug 23, 2023 pm 07:53 PM

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

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;
   }
}
Copier après la connexion

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

array.forEach(element => {
   // code
   if( some condition ){
      break;
   }
});
Copier après la connexion

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; 
   }
});
Copier après la connexion

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 id="Using-the-i-return-keyword-i-to-stop-the-execution-of-the-forEach-loop">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>
Copier après la connexion

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) {
}
Copier après la connexion

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 id="Using-the-i-try-catch-statement-i-to-stop-the-execution-of-the-forEach-loop">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>
Copier après la connexion

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;
   }
}
Copier après la connexion

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 id="Using-the-normal-for-loop-with-break-keyword-to-stop-the-execution-of-for-loop">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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Remplacer les caractères de chaîne en javascript

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Tutoriel de configuration de l'API de recherche Google personnalisé

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Exemple Couleurs Fichier JSON

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

8 Superbes plugins de mise en page JQuery Page

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Créez vos propres applications Web Ajax

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Qu'est-ce que & # x27; ceci & # x27; en javascript?

Améliorez vos connaissances jQuery avec le spectateur source Améliorez vos connaissances jQuery avec le spectateur source Mar 05, 2025 am 12:54 AM

Améliorez vos connaissances jQuery avec le spectateur source

10 feuilles de triche mobiles pour le développement mobile 10 feuilles de triche mobiles pour le développement mobile Mar 05, 2025 am 12:43 AM

10 feuilles de triche mobiles pour le développement mobile

See all articles