JavaScript - controle de loop

JavaScript fornece controle total para lidar com loops e instruções de switch. Pode haver uma situação em que você precise sair de um loop sem atingir sua parte inferior. Também pode haver uma situação em que você deseja pular uma parte do seu bloco de código e iniciar a próxima iteração do loop.

Para lidar com todas essas situações, o JavaScript fornece break e continueafirmações. Essas instruções são usadas para sair imediatamente de qualquer loop ou para iniciar a próxima iteração de qualquer loop, respectivamente.

A declaração de quebra

o breakinstrução, que foi brevemente introduzida com a instrução switch , é usada para sair de um loop antecipadamente, saindo das chaves.

Fluxograma

O fluxograma de uma instrução break seria o seguinte -

Exemplo

O exemplo a seguir ilustra o uso de um breakinstrução com um loop while. Observe como o loop começa uma vezx chega a 5 e chega a document.write (..) declaração logo abaixo da chave de fechamento -

<html>
   <body>     
      <script type = "text/javascript">
         <!--
         var x = 1;
         document.write("Entering the loop<br /> ");
         
         while (x < 20) {
            if (x == 5) {
               break;   // breaks out of loop completely
            }
            x = x + 1;
            document.write( x + "<br />");
         }         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Resultado

Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

Já vimos o uso de break declaração dentro a switch declaração.

The continue Statement

o continueinstrução diz ao interpretador para iniciar imediatamente a próxima iteração do loop e pular o bloco de código restante. Quando umcontinue for encontrada, o fluxo do programa se move para a expressão de verificação de loop imediatamente e, se a condição permanecer verdadeira, ele inicia a próxima iteração, caso contrário, o controle sai do loop.

Exemplo

Este exemplo ilustra o uso de um continueinstrução com um loop while. Observe como ocontinue declaração é usada para pular a impressão quando o índice é mantido na variável x chega a 5 -

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var x = 1;
            document.write("Entering the loop<br /> ");
         
            while (x < 10) {
               x = x + 1;
               
               if (x == 5) {
                  continue;   // skip rest of the loop body
               }
               document.write( x + "<br />");
            }         
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Resultado

Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

Usando rótulos para controlar o fluxo

A partir do JavaScript 1.2, um rótulo pode ser usado com break e continuepara controlar o fluxo com mais precisão. UMAlabelé simplesmente um identificador seguido por dois pontos (:) que é aplicado a uma instrução ou bloco de código. Veremos dois exemplos diferentes para entender como usar rótulos com break e continue.

Note - Quebras de linha não são permitidas entre os ‘continue’ ou ‘break’declaração e seu nome de rótulo. Além disso, não deve haver nenhuma outra instrução entre o nome do rótulo e o loop associado.

Experimente os dois exemplos a seguir para uma melhor compreensão dos rótulos.

Exemplo 1

O exemplo a seguir mostra como implementar Label com uma instrução break.

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            document.write("Entering the loop!<br /> ");
            outerloop:        // This is the label name         
            for (var i = 0; i < 5; i++) {
               document.write("Outerloop: " + i + "<br />");
               innerloop:
               for (var j = 0; j < 5; j++) {
                  if (j > 3 ) break ;           // Quit the innermost loop
                  if (i == 2) break innerloop;  // Do the same thing
                  if (i == 4) break outerloop;  // Quit the outer loop
                  document.write("Innerloop: " + j + " <br />");
               }
            }        
            document.write("Exiting the loop!<br /> ");
         //-->
      </script>      
   </body>
</html>

Resultado

Entering the loop!
Outerloop: 0
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 1
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 2
Outerloop: 3
Innerloop: 0 
Innerloop: 1 
Innerloop: 2 
Innerloop: 3 
Outerloop: 4
Exiting the loop!

Exemplo 2

<html>
   <body>
   
      <script type = "text/javascript">
         <!--
         document.write("Entering the loop!<br /> ");
         outerloop:     // This is the label name
         
         for (var i = 0; i < 3; i++) {
            document.write("Outerloop: " + i + "<br />");
            for (var j = 0; j < 5; j++) {
               if (j == 3) {
                  continue outerloop;
               }
               document.write("Innerloop: " + j + "<br />");
            }
         }
         
         document.write("Exiting the loop!<br /> ");
         //-->
      </script>
      
   </body>
</html>

Resultado

Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

↰ Previous page Next page ↱