diff options
Diffstat (limited to 'files/es/web/javascript/referencia/sentencias/switch/index.html')
| -rw-r--r-- | files/es/web/javascript/referencia/sentencias/switch/index.html | 245 |
1 files changed, 0 insertions, 245 deletions
diff --git a/files/es/web/javascript/referencia/sentencias/switch/index.html b/files/es/web/javascript/referencia/sentencias/switch/index.html deleted file mode 100644 index c550477f2c..0000000000 --- a/files/es/web/javascript/referencia/sentencias/switch/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -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_<default>_entre_condiciones">¿Puedo usar un <default> 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> |