Tutorial JS

JS INICIO JS Introducción JS Dónde Salida JS Declaraciones JS Sintaxis JS Comentarios JS Variables JS JS Vamos Constante JS Operadores JS Aritmética JS Tarea JS Tipos de datos JS Funciones JS Objetos JS Eventos JS Cadenas JS Métodos de cadena JS Búsqueda de cadenas JS Plantillas de cadena JS Números JS Métodos numéricos JS Matrices JS Métodos de matriz JS Clasificación de matriz JS Iteración de matriz JS Constante de matriz JS Fechas JS Formatos de fecha JS Métodos de obtención de fecha JS Métodos de configuración de fechas JS Matemáticas JS JS al azar Booleanos JS Comparaciones JS Condiciones JS Interruptor JS Bucle JS para Bucle JS para entrada Bucle JS para de Bucle JS mientras descanso JS Iterables JS Conjuntos JS Mapas JS JS Tipo de Conversión de tipo JS JS bit a bit JS expresión regular Errores JS Alcance JS JS Elevación Modo estricto JS JS esta palabra clave Función de flecha JS Clases JS JSJSON Depuración JS Guía de estilo JS Prácticas recomendadas de JS Errores JS Rendimiento JS Palabras reservadas de JS

Versiones JS

Versiones JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Borde Historia de JS

Objetos JS

Definiciones de objetos Propiedades del objeto Métodos de objeto Visualización de objetos Accesores de objetos Constructores de objetos Prototipos de objetos Objeto iterables Conjuntos de objetos Mapas de objetos Referencia de objeto

Funciones JS

Definiciones de funciones Parámetros de función Invocación de función Llamada de función Función Aplicar Cierres de funciones

Clases JS

Introducción a la clase Herencia de clase Clase estática

JS asíncrono

Devoluciones de llamada JS JS asíncrono Promesas JS JS asíncrono/espera

JS HTML DOM

Introducción al DOM Métodos DOM Documento DOM Elementos DOM DOM HTML Formularios DOM DOM CSS Animaciones DOM Eventos DOM Oyente de eventos DOM Navegación DOM Nodos DOM Colecciones DOM Listas de nodos DOM

Lista de materiales del navegador JS

Ventana JS Pantalla JS Ubicación de JS Historia de JS Navegador JS Alerta emergente JS Tiempo JS Galletas JS

API web de JS

Introducción a la API web API de formularios web API de historial web API de almacenamiento web API de trabajo web API de búsqueda web API de geolocalización web

JS AJAX

Introducción a AJAX AJAX XMLHttp Solicitud AJAX Respuesta AJAX Archivo XML AJAX AJAXPHP Ajax ASP Base de datos AJAX Aplicaciones AJAX Ejemplos de AJAX

JSJSON

Introducción JSON Sintaxis JSON JSON frente a XML Tipos de datos JSON Análisis JSON Cadena JSON Objetos JSON Matrices JSON Servidor JSON JSONPHP JSONHTML JSON JSONP

JS frente a jQuery

Selectores jQuery HTML de jQuery CSS de jQuery DOM de jQuery

Gráficos JS

Gráficos JS Lienzo JS JS Trazado Gráfico JS.js Gráfico de Google JS JS D3.js

Ejemplos de JS

Ejemplos de JS JS HTML DOM Entrada HTML JS Objetos JS HTML Eventos JS HTML Navegador JS Editor JS Ejercicios JS Prueba JS Certificado JS

Referencias JS

Objetos JavaScript Objetos HTML DOM


Declaración de cambio de JavaScript


La switchdeclaración se utiliza para realizar diferentes acciones basadas en diferentes condiciones.


La declaración de cambio de JavaScript

Utilice la switchinstrucción para seleccionar uno de los muchos bloques de código que se ejecutarán.

Sintaxis

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Así es como funciona:

  • La expresión de cambio se evalúa una vez.
  • El valor de la expresión se compara con los valores de cada caso.
  • Si hay una coincidencia, se ejecuta el bloque de código asociado.
  • Si no hay ninguna coincidencia, se ejecuta el bloque de código predeterminado.

Ejemplo

El getDay()método devuelve el día de la semana como un número entre 0 y 6.

(Domingo=0, Lunes=1, Martes=2 ..)

Este ejemplo usa el número del día de la semana para calcular el nombre del día de la semana:

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

El resultado del día será:

Saturday


La palabra clave de ruptura

Cuando JavaScript llega a una break palabra clave, sale del bloque interruptor.

Esto detendrá la ejecución dentro del bloque del interruptor.

No es necesario romper el último caso en un bloque de cambio. El bloque se rompe (termina) allí de todos modos.

Nota: si omite la instrucción break, el siguiente caso se ejecutará incluso si la evaluación no coincide con el caso.


La palabra clave predeterminada

La defaultpalabra clave especifica el código que se ejecutará si no hay coincidencia de mayúsculas y minúsculas:

Ejemplo

El getDay()método devuelve el día de la semana como un número entre 0 y 6.

Si hoy no es sábado (6) ni domingo (0), escriba un mensaje predeterminado:

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

El resultado del texto será:

Today is Saturday

El defaultcaso no tiene que ser el último caso en un bloque de cambio:

Ejemplo

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

Si defaultno es el último caso en el bloque de cambio, recuerde finalizar el caso predeterminado con un descanso.


Bloques de código comunes

A veces querrá que diferentes casos de interruptores usen el mismo código.

En este caso de ejemplo, 4 y 5 comparten el mismo bloque de código, y 0 y 6 comparten otro bloque de código:

Ejemplo

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

Detalles de conmutación

Si varios casos coinciden con un valor de caso, se selecciona el primer caso.

Si no se encuentran casos coincidentes, el programa continúa con la etiqueta predeterminada .

Si no se encuentra una etiqueta predeterminada, el programa continúa con las sentencias posteriores al cambio .


Comparación estricta

Los casos de cambio utilizan una comparación estricta (===).

Los valores deben ser del mismo tipo para que coincidan.

Una comparación estricta solo puede ser verdadera si los operandos son del mismo tipo.

En este ejemplo no habrá ninguna coincidencia para x:

Ejemplo

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

Ponte a prueba con ejercicios

Ejercicio:

Cree una switchdeclaración que avise "Hola" si fruitses "plátano" y "Bienvenido" si fruitses "manzana".

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}