JavaScript: caja del interruptor

Puede utilizar varios if...else…ifdeclaraciones, como en el capítulo anterior, para realizar una rama de múltiples vías. Sin embargo, esta no es siempre la mejor solución, especialmente cuando todas las ramas dependen del valor de una sola variable.

A partir de JavaScript 1.2, puede utilizar un switch declaración que maneja exactamente esta situación, y lo hace de manera más eficiente que la repetida if...else if declaraciones.

Diagrama de flujo

El siguiente diagrama de flujo explica que funciona una declaración de cambio de caso.

Sintaxis

El objetivo de un switchdeclaración es dar una expresión para evaluar y varias declaraciones diferentes para ejecutar en función del valor de la expresión. El intérprete revisa cadacasecontra el valor de la expresión hasta que se encuentre una coincidencia. Si nada coincide, undefault se utilizará la condición.

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

los breakLas declaraciones indican el final de un caso particular. Si se omitieran, el intérprete continuaría ejecutando cada declaración en cada uno de los siguientes casos.

Te explicaremos break declaración en Loop Control capítulo.

Ejemplo

Pruebe el siguiente ejemplo para implementar la instrucción switch-case.

<html>
   <body>   
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               break;
            
               case 'B': document.write("Pretty good<br />");
               break;
            
               case 'C': document.write("Passed<br />");
               break;
            
               case 'D': document.write("Not so good<br />");
               break;
            
               case 'F': document.write("Failed<br />");
               break;
            
               default:  document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Salida

Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

Las declaraciones de ruptura juegan un papel importante en las declaraciones de caso de cambio. Pruebe el siguiente código que usa una instrucción switch-case sin ninguna instrucción break.

<html>
   <body>      
      <script type = "text/javascript">
         <!--
            var grade = 'A';
            document.write("Entering switch block<br />");
            switch (grade) {
               case 'A': document.write("Good job<br />");
               case 'B': document.write("Pretty good<br />");
               case 'C': document.write("Passed<br />");
               case 'D': document.write("Not so good<br />");
               case 'F': document.write("Failed<br />");
               default: document.write("Unknown grade<br />")
            }
            document.write("Exiting switch block");
         //-->
      </script>      
      <p>Set the variable to different value and then try...</p>
   </body>
</html>

Salida

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Set the variable to different value and then try...