Switch en JavaScript

Expresión switch en javascript tenemos que cuando coincide con el valor de una expresión mediante una declaración case y luego ejecuta las expresiones asociadas.

Características generales

El conmutador acepta una expresión y luego busca el primer caso cuyo valor coincide exactamente con el valor de la expresión (usando el operador de comparación=== ) y luego pasa el control a la sección de caso correspondiente, lo que hace que se ejecuten las expresiones asociadas (si hay más de un caso que coincide el valor dado, solo se especifica el primero).

Si no hubiera, el caso case coincide con la expresión sección del programa default, y se encuentra que tomará el control de esa sección, lo que conduce a la implementación de los términos asociados con el código, aunque default no exista en una sección. Expresiones switch de implementación del programa código que sigue al final. Es una práctica común poner una sección default al final, switch pero esto no es necesario.

Una expresión break opcional que está asociada con un estado y hará que el programa salga de una declaración switchy complete la ejecución de las instrucciones que siguen switch. Si una expresión break no existe, el programa continuará ejecutando las expresiones que siguen al caso coincidente en switch.

Estructura switch en javascript

switch (expression) {
  case value1:
    // expresiones para aplicar 
    // cuando el valor de la expresión coincide con el valor del caso 
    [break;]
  case value2:
    // expresiones para aplicar 
    // cuando el valor de la expresión coincide con el valor del caso 
    [break;]
  ...
  case valueN:
    // las expresiones a aplicar 
    // cuando el valor de la expresión coincide con el valor del caso 
    [break;]
  [default:
    // las expresiones a aplicar 
    // cuando la expresión no coincide con ningún caso
    [break;]]
}

expression

La expresión que coincidirá con cada caso.

case valueN

La sección case que se usa para hacer coincidir la expresión expression, y si la expresión coincide con un expression valor, las instrucciones dentro de la sección se ejecutan hasta el final de la expresión o la existencia de la expresión valueNcaseswitchbreak.

default

Sección default, que proporciona las expresiones que se aplicarán si ningún caso coincide case.

Ejemplos y aplicaciones en código

Uso del switch

En el siguiente ejemplo, si el valor de la expresión expr es igual Bananas, entonces el programa coincide con el estado y Bananas ejecutará las expresiones asociadas. Cuando se ejecuta la expresión break, el programa switch saldrá luego ejecutará las siguientes expresiones switch en javascript. Si se omite la expresión break, Cherries también se ejecutarán las expresiones asociadas al caso :

switch (expr) {
  case 'Oranges':
    console.log( 'Las naranjas cuestan 0,59 euros.' ); 
    break;
  case 'Apples':
    console.log( 'Las manzanas cuestan 0,32 euros.' ); 
    break;
  case 'Bananas':
    console.log( 'Los plátanos cuestan 0,48 euros.' ); 
    break;
  case 'Cherries':
    console.log( 'Las cerezas cuestan 3,00 euros.'); 
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log( 'Los mangos y las papayas cuestan 2,79 euros.' ); 
    break;
  default:
    console.log( 'Lo sentimos, no tenemos'  + expr +  '.' ); 
}
console.log ( "¿Hay algo más que desee?" );

Sin poner expresión break

Si olvida poner la expresión break, el programa ejecutará las expresiones después del estado coincidente y continuará ejecutando las expresiones en los otros estados después del caso coincidente, incluso si no se cumple la condición. Por ejemplo:

var foo = 0;
switch (foo) {
  case -1:
    console.log('negative 1');
    break;
  case 0: // la condición coincidirá, por lo que las expresiones de la 
    console.log(0);
    // olvidamos poner break 
  case 1:  // no rompimos en el primer caso, por lo que la 
    console.log(1);
    break;  // No pasaremos a la siguiente ejecución del caso porque hay un 
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}

Estado por defecto

El estado predeterminado se puede colocar en default cualquier lugar y las instrucciones que siguen se ejecutarán si la expresión no coincide con uno de los estados:

var foo = 5;
switch (foo) {
  case 2:
    console.log(2);
    break;
  default:
    console.log('default')
    // Se ejecutará el siguiente caso porque no hay un break
  case 1:  
    console.log('1');
}

Switch en lugar de múltiples expresiones if

var a = 100;
var b = NaN;
switch (true) {
  case isNaN(a) || isNaN(b):
    console.log('NaNNaN');
    break;
  case a === b:
    console.log(0);
    break;
  case a < b:
    console.log(-1);
    break;
  default:
    console.log(1);
}

Un comportamiento switch cuando la expresión no está disponible, se puede aprovechar mediante break la capacidad de realizar una operación si uno o más estados coinciden:

var Animal = 'Giraffe';
switch (Animal) {
  case 'Cow':
  case 'Giraffe':
  case 'Dog':
  case 'Sheep':
    console.log('This animal is cute.');
    break;
  case 'Dinosaur':
  default:
    console.log('This animal is NOT!.');
}

Implementar una serie de expresiones

En el siguiente ejemplo, usaremos una serie de expresiones cuya salida varía dependiendo del valor del número que se está probando. Este ejemplo muestra que puede organizar los casos como desee y no es necesario ordenarlos. Las cadenas también se pueden usar para hacer coincidir la salida y los números (si tiene sentido):

var foo = 1;
var output = 'Output: ';
switch (foo) {
  case 10:
    output += 'So ';
  case 1:
    output += 'What ';
    output += 'Is ';
  case 2:
    output += 'Your ';
  case 3:
    output += 'Name';
  case 4:
    output += '?';
    console.log(output);
    break;
  case 5:
    output += '!';
    console.log(output);
    break;
  default:
    console.log('Please pick a number from 0 to 6!');

La salida del ejemplo anterior:

Valor	Resultado
El valor de la variable foo es NaN o no es 1, 2, 3, 4, 5 o 10	¡Elija un número del 0 al 6!
10	¿Entonces, cuál es tu nombre?
1	¿Cuál es su nombre?
2	¿Tu nombre?
3	¿Nombre?
4	?
5	!

Soporte de navegadores

Característica	Chrome	Firefox	IE	Opera	Safari
Soporte básico	sí	sí	sí	sí	sí