aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/javascript/reference/statements/switch/index.html
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
commita55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch)
tree5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/javascript/reference/statements/switch/index.html
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip
unslug es: move
Diffstat (limited to 'files/es/web/javascript/reference/statements/switch/index.html')
-rw-r--r--files/es/web/javascript/reference/statements/switch/index.html245
1 files changed, 245 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/statements/switch/index.html b/files/es/web/javascript/reference/statements/switch/index.html
new file mode 100644
index 0000000000..c550477f2c
--- /dev/null
+++ b/files/es/web/javascript/reference/statements/switch/index.html
@@ -0,0 +1,245 @@
+---
+title: switch
+slug: Web/JavaScript/Referencia/Sentencias/switch
+translation_of: Web/JavaScript/Reference/Statements/switch
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p>La <strong>declaración</strong> <code><strong>switch</strong></code> evalúa una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">expresión</a>, comparando el valor de esa expresión con una instancia <code><strong>case</strong></code>, y ejecuta <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias">declaraciones</a> asociadas a ese <code>case</code>, así como las declaraciones en los <code>case</code> que siguen.</p>
+
+<h2 id="Syntaxis">Syntaxis</h2>
+
+<pre class="syntaxbox notranslate">switch (expresión) {
+ case valor1:
+ //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1
+ [break;]
+ case valor2:
+ //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2
+ [break;]
+ ...
+ case valorN:
+ //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN
+ [break;]
+ default:
+ //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión
+ [break;]
+}</pre>
+
+<dl>
+ <dt><code>expresión</code></dt>
+ <dd>Es una expresión que es comparada con el valor de cada instancia <code>case</code>.</dd>
+ <dt><code>case valorN</code></dt>
+ <dd>Una instancia <code>case valorN</code> es usada para ser comparada con la <code>expresión</code>. Si la <code>expresión</code> coincide con el <code>valorN</code>, las declaraciones dentro de la instancia <code>case</code> se ejecutan hasta que se encuentre el final de la declaración <code>switch</code> o hasta encontrar una interrupción <code>break</code>.</dd>
+</dl>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">default</span></font></dt>
+ <dd>Una instancia <code>default</code>, cuando es declarada, es ejecutada si el valor de la <code>expresión</code> no coincide con cualquiera de las otras instancias <code>case valorN</code>.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>Si ocurre una coincidencia, el programa ejecuta las declaraciones asociadas correspondientes. Si la expresión coincide con múltiples entradas, la primera será la seleccionada, incluso si las mayúsculas son tenidas en cuenta.</p>
+
+<p>El programa primero busca la primer instacia <code>case</code> cuya expresión se evalúa con el mismo valor de la expresión de entrada (usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparación estricta</a>, <code>===)</code> y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas. Si no se encuentra una cláusula de <code>case</code> coincidente, el programa busca la cláusula <code>default</code> opcional, y si se encuentra, transfiere el control a esa instancia, ejecutando las declaraciones asociadas. Si no se encuentra una instancia <code>default</code>  el programa continúa la ejecución en la instrucción siguiente al final del <code>switch</code>. Por convención, la instancia <code>default</code> es la última cláusula, pero no tiene que ser así.</p>
+
+<p>La declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> es opcional y está asociada con cada etiqueta de <code>case</code> y asegura que el programa salga del <code>switch</code> una vez que se ejecute la instrucción coincidente y continúe la ejecución en la instrucción siguiente. Si se omite el  <code>break</code>  el programa continúa la ejecución en la siguiente instrucción en la declaración de <code>switch</code> .</p>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Usando_switch">Usando <code>switch</code></h3>
+
+<p>En el siguiente ejemplo, si <code>expresión</code> se resuelve a "Platanos", el algoritmo compara el valor con el <code>case</code> "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un <code>break</code>, el programa sale del condicional <code>switch</code> y ejecuta la declaración que lo procede. Si se omite el <code>break</code>, el <code>case</code> "Cerezas" también es ejecutado.</p>
+
+<pre class="notranslate"><code>switch (expr) {
+ case 'Naranjas':
+ console.log('El kilogramo de naranjas cuesta $0.59.');
+ break;
+ case 'Manzanas':
+ console.log('El kilogramo de manzanas cuesta $0.32.');
+ break;
+ case 'Platanos':
+ console.log('El kilogramo de platanos cuesta $0.48.');
+ break;
+ case 'Cerezas':
+ console.log('El kilogramo de cerezas cuesta $3.00.');
+ break;
+ case 'Mangos':
+ case 'Papayas':
+ console.log('El kilogramo de mangos y papayas cuesta $2.79.');
+ break;
+ default:
+ console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.');
+}
+
+console.log("¿Hay algo más que te quisiera consultar?");</code></pre>
+
+<h3 id="¿Qué_pasa_si_olvido_un_break">¿Qué pasa si olvido un break?</h3>
+
+<p>Si olvidas un <code>break</code>, el script se ejecutará desde donde se cumple la condición y ejecutará el siguiente <code>case</code> independientemente si esta condición se cumple o no. Ver el siguiente ejemplo:</p>
+
+<pre class="brush: js notranslate">var foo = 0;
+switch (foo) {
+ case -1:
+  console.log('1 negativo');
+ break;
+ case 0: // foo es 0, por lo tanto se cumple la condición y se ejecutara el siguiente bloque
+  console.log(0)
+    // NOTA: el "break" olvidado debería estar aquí
+  case 1: // No hay sentencia "break" en el 'case 0:', por lo tanto este caso también será ejecutado
+  console.log(1);
+    break; // Al encontrar un "break", no será ejecutado el 'case 2:'
+  case 2:
+  console.log(2);
+    break;
+  default:
+ console.log('default');
+}
+</pre>
+
+<h3 id="¿Puedo_usar_un_&lt;default>_entre_condiciones">¿Puedo usar un &lt;default&gt; entre condiciones?</h3>
+
+<p>Sí, ¡es posible! JavaScript retornará a la instancia <code>default</code> en caso de no encontrar una coincidencia:</p>
+
+<pre class="notranslate"><code>var foo = 5;
+switch (foo) {
+ case 2:
+ console.log(2);
+ break; // al encontrar este 'break' no se continuará con el siguiente 'default:'
+ default:
+ console.log('default')
+ // fall-through
+ case 1:
+ console.log('1');
+}</code></pre>
+
+<p>Al estar el <code>case 1:</code> a continuación de <code>default</code>, y al no haber un <code>break </code>de por medio, veremos que la declaración del <code>case 1:</code> será ejecutada, apareciendo el resultado <code>1</code> en el <em>log de consola.</em></p>
+
+<h3 id="Metodos_para_casos_con_múltiple_criterio">Metodos para casos con múltiple criterio</h3>
+
+<p>La fuente de esta técnica esta aquí:</p>
+
+<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p>
+
+<h4 id="Operación_única_con_múltiples_casos">Operación única con múltiples casos</h4>
+
+<p>Este método toma ventaja del hecho de que, si no hay un <code>break</code> debajo de una declaración <code>case</code>, continuará la ejecución hasta el siguiente <code>case</code>, ignorando si en dicho caso se cumple o no el criterio indicado. Comprobar en la sección <em>¿Qué pasa si olvido un <code>break</code>?</em></p>
+
+<p>Este es un ejemplo de operación única con sentencia <code>switch</code> secuencial, donde cuatro valores diferentes se comportan exactamente de la misma manera:</p>
+
+<pre class="brush: js notranslate">var Animal = 'Jirafa';
+switch (Animal) {
+ case 'Vaca':
+  case 'Jirafa':
+  case 'Perro':
+  case 'Cerdo':
+  console.log('Este animal subirá al Arca de Noé.');
+    break;
+ case 'Dinosaurio':
+  default:
+  console.log('Este animal no lo hará.');
+}</pre>
+
+<h4 id="Operaciones_encadenadas_con_múltiples_casos">Operaciones encadenadas con múltiples casos</h4>
+
+<p>Este es un ejemplo de una sentencia <code>switch</code> secuencial con múltiples operaciones, donde, dependiendo del valor entero dado, se pueden recibir diferentes resultados. Esto demuestra que el algoritmo correrá en el orden en que se coloquen las declaraciones <code>case</code>, y que no tiene que ser numéricamente secuencial. En JavaScript, también es posible combinar definiciones con valores <em><code>"string"</code> </em>dentro de estas declaraciones <code>case</code>.</p>
+
+<pre class="brush: js notranslate">var foo = 1;
+var output = 'Salida: ';
+switch (foo) {
+ case 10:
+ output += '¿Y ';
+  case 1:
+ output += 'Cuál ';
+ output += 'Es ';
+  case 2:
+  output += 'Tu ';
+ case 3:
+ output += 'Nombre';
+ case 4:
+ output += '?';
+ console.log(output);
+ break;
+ case 5:
+ output += '!';
+ console.log(output);
+ break;
+  default:
+  console.log('Por favor, selecciona un valor del 1 al 6.');
+}</pre>
+
+<p>La salida (output) de este ejemplo:</p>
+
+<table class="standard-table" style="height: 270px; width: 522px;">
+ <tbody>
+ <tr>
+ <th scope="col">Value</th>
+ <th scope="col">Log text</th>
+ </tr>
+ <tr>
+ <td>foo es NaN o no es 1, 2, 3, 4, 5 ni 10</td>
+ <td>Por favor, selecciona un valor del 1 al 6.</td>
+ </tr>
+ <tr>
+ <td>10</td>
+ <td>Salida: ¿Y Cuál Es Tu Nombre?</td>
+ </tr>
+ <tr>
+ <td>1</td>
+ <td>Salida: Cuál Es Tu Nombre?</td>
+ </tr>
+ <tr>
+ <td>2</td>
+ <td>Salida: Tu Nombre?</td>
+ </tr>
+ <tr>
+ <td>3</td>
+ <td>Salida: Nombre?</td>
+ </tr>
+ <tr>
+ <td>4</td>
+ <td>Salida: ?</td>
+ </tr>
+ <tr>
+ <td>5</td>
+ <td>Salida: !</td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Variables_centradas_en_bloques_sin_un_estamento_de_switch">Variables centradas en bloques sin un estamento de switch</h3>
+
+<p>Con ECMAScript 2015 (ES6) </p>
+
+<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+ <tr>
+ <th>Feature</th>
+ <th>Chrome</th>
+ <th>Firefox (Gecko)</th>
+ <th>Internet Explorer</th>
+ <th>Opera</th>
+ <th>Safari</th>
+ </tr>
+ <tr>
+ <td>Basic support</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ <td>{{CompatVersionUnknown}}</td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li>
+</ul>