Diseño switch case

La construcción switch se utiliza para comparar un valor de igualdad con diferentes opciones.

En este caso, la igualdad está implícita en el sentido del operador de igualdad estricta ===, switch no puede compararse con una expresión regular o de otra manera. Es decir, los valores deben ser del mismo tipo para que se mantenga la igualdad.

Si la condición coincide, se ejecuta el bloque de código asociado con el case correspondiente. Si ninguna de las condiciones coincide, entonces se ejecuta el código especificado en el bloque "predeterminado", si corresponde. El comando break se usa para salir de la construcción. Si no se especifica, automáticamente se ejecutará el bloque de código del siguiente case, y así sucesivamente. Por lo tanto, usamos break en nuestros scripts, para no conducir al intérprete a través de todos los case, lo que reduce el rendimiento del script.

Video

Sintaxis

La construcción switch tiene uno o más bloques case y un bloque default opcional.

Se parece a esto:

switch (n) {
  case 1:
    // bloque de código 1;
    break
  case 2:
    // bloque de código 2;
    break
  // .......
  // otras opciones de case
  // .......
  default:
  // bloque de código si ninguna de las condiciones coincide;
}

n es la condición booleana boolean.

Ejemplos

Considere el ejemplo más simple :

Editor en vivo

function learnJavaScript() { let a = 4 let str switch (a) { case 3: str = 'No es suficiente' break case 4: str = '¡Exactamente!' break case 5: str = 'reventar' break default: str = 'No conozco tales significados' } return str }

function learnJavaScript() {
  let a = 4
  let str
  switch (a) {
    case 3:
      str = 'No es suficiente'
      break
    case 4:
      str = '¡Exactamente!'
      break
    case 5:
      str = 'reventar'
      break
    default:
      str = 'No conozco tales significados'
  }
  return str
}

Resultado

Loading...

Aquí, el operador switch comparará secuencialmente a con todas las opciones de case. Primero 3, luego, dado que no hay coincidencia, 4. Si se encuentra una coincidencia, esta opción se ejecutará, desde la línea str = '¡Al punto!' y más allá, hasta el break más cercano, que interrumpirá la ejecución.

Considere este ejemplo :

Editor en vivo

function learnJavaScript() { let a = 'Apples' let str switch (a) { case 'Apples': str = 'I love ' + a break case 'Oranges': str = 'I love ' + a break case 'Bananas': str = 'I love ' + a break default: str = 'I like other fruits' } return str }

function learnJavaScript() {
  let a = 'Apples'
  let str
  switch (a) {
    case 'Apples':
      str = 'I love ' + a
      break
    case 'Oranges':
      str = 'I love ' + a
      break
    case 'Bananas':
      str = 'I love ' + a
      break
    default:
      str = 'I like other fruits'
  }
  return str
}

Resultado

Loading...

Aquí, el operador switch comparará secuencialmente a con todas las opciones de case. Pero aquí hay una comparación no de números, sino de cadenas. Esto se puede hacer con cualquier tipo de datos, lo principal es que se comparan los mismos tipos de datos.

Reemplazando if

También Switch se usa para reemplazar múltiples if.

Por ejemplo, puede reemplazar este código con :

Editor en vivo

function learnJavaScript() { let number = 2 let str if (number === 0) { str = 'Ingresaste el número 0' } if (number === 1) { str = 'Ingresaste el número 1' } if (number === 2 || number === 3) { str = 'Ingresaste el número 2, o tal vez 3' } return str }

function learnJavaScript() {
  let number = 2
  let str
  if (number === 0) {
    str = 'Ingresaste el número 0'
  }

  if (number === 1) {
    str = 'Ingresaste el número 1'
  }

  if (number === 2 || number === 3) {
    str = 'Ingresaste el número 2, o tal vez 3'
  }
  return str
}

Resultado

Loading...

На этот :

Editor en vivo

function learnJavaScript() { let number = 2 let str switch (number) { case 0: str = 'Ingresaste el número 0' break case 1: str = 'Ingresaste el número 1' break case 2: case 3: str = 'Ingresaste el número 2, o tal vez 3' break } return str }

function learnJavaScript() {
  let number = 2
  let str
  switch (number) {
    case 0:
      str = 'Ingresaste el número 0'
      break

    case 1:
      str = 'Ingresaste el número 1'
      break

    case 2:
    case 3:
      str = 'Ingresaste el número 2, o tal vez 3'
      break
  }
  return str
}

Resultado

Loading...

El resultado será el mismo, pero el código será más legible y fácil de trabajar.

Reaccionar nativo

Un ejemplo de uso en aplicaciones React Native.

¿Problemas?

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

Preguntas:

¿Es posible usar switch para comparar algo con expresiones regulares?

1. 'true'
2. 'false'

¿Qué operador de comparación usa switch?

1. =
2. ===
3. ==

¿Qué palabra clave detiene el proceso de comparación en switch?

1. break
2. stop
3. default

Para comprender cuánto ha aprendido esta lección, realice una prueba en la aplicación móvil de nuestra escuela sobre este tema o en nuestro bot de Telegram.

Enlaces:

1. MDN web docs
2. Learn JavaScript
3. Referencia de JavaScript

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Philipp Dvinyaninov

Dmitriy Vasilev 💵

Resoner2005 🐛 🎨 🖋

Navernoss 🖋 🐛 🎨