diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
| commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
| tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/javascript/referencia/operadores | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip | |
unslug es: move
Diffstat (limited to 'files/es/web/javascript/referencia/operadores')
40 files changed, 0 insertions, 7165 deletions
diff --git a/files/es/web/javascript/referencia/operadores/adición/index.html b/files/es/web/javascript/referencia/operadores/adición/index.html deleted file mode 100644 index 888845158a..0000000000 --- a/files/es/web/javascript/referencia/operadores/adición/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Adición (+) -slug: Web/JavaScript/Referencia/Operadores/Adición -translation_of: Web/JavaScript/Reference/Operators/Addition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de adición (<code>+</code>) produce la suma de operandos numéricos o la concatenación de (cadenas) string.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> - -<div></div> - -<p class="hidden">La fuente para este ejemplo interactivo está almacenado en un repositorio Github. Si te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una pull-request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Adición_numérica">Adición numérica</h3> - -<pre class="brush: js notranslate">// Número + Número -> adición -1 + 2 // 3 - -// Booleano + Número -> adición -true + 1 // 2 - -// Booleano + Booleano -> adición -false + false // 0 -</pre> - -<h3 id="Concatenación_de_cadenas_String">Concatenación de (cadenas) String</h3> - -<pre class="brush: js notranslate">// String + String -> concatenación -'fut' + 'bol' // "futbol" - -// Número + String -> concatenación -5 + 'oh' // "5oh" - -// String + Booleano -> concatenación -'fut' + false // "futfalse"</pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_Explorador">Compatibilidad de Explorador</h2> - -<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía un pull request.</div> - -<p>{{Compat("javascript.operators.addition")}}</p> - -<h2 id="También_revisa">También revisa</h2> - -<ul> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/aritméticos/index.html b/files/es/web/javascript/referencia/operadores/aritméticos/index.html deleted file mode 100644 index 71968fda85..0000000000 --- a/files/es/web/javascript/referencia/operadores/aritméticos/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Operadores Aritméticos -slug: Web/JavaScript/Referencia/Operadores/Aritméticos -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).</p> - -<p>Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</p> - -<h2 id="Suma_o_adición_()"><a name="Addition">Suma o adición (+)</a></h2> - -<p>La operación suma se produce mediante la suma de número o strings concatenados.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x + y</pre> - -<h3 id="Ejemplos">Ejemplos:</h3> - -<pre class="brush: js">// Número + Número = Adición - -1 + 2 // 3 - -// Bolean + Número = Adición - -true + 1 // 2 - -// Bolean + Bolean // Adición - -false + false // 0 - -// Número + String = Concatenación - -5 + 'foo' // "5foo" - -// String + Bolean = Concatenación - -'foo' + true // "footrue" - -// String + String = Concatenación - -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Resta_o_sustracción_(-)"><a name="Subtraction">Resta o sustracción (-)</a></h2> - -<p>La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x - y</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN -</pre> - -<h2 id="División_()"><a name="Division">División (/)</a></h2> - -<p>El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> - -<h3 id="Sintaxis_3">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x / y</pre> - -<h3 id="Ejemplos_3">Ejemplos</h3> - -<pre class="brush: js">1 / 2 // devuelve 0.5 en JavaScript -1 / 2 // devuelve 0 en Java -// (Ninguno de los números es explícitamente un número de punto flotante) - -1.0 / 2.0 // devuelve 0.5 en JavaScript y Java - -2.0 / 0 // devuelve Infinito en JavaScript -2.0 / 0.0 // devuelve Infinito -2.0 / -0.0 // devuelve -Infinito en JavaScript -</pre> - -<h2 id="Multiplicación_(*)"><a name="Multiplication">Multiplicación (*)</a></h2> - -<p>El operador multiplicación produce el producto de la multiplicación de los operandos.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x * y</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinito * 0 // NaN -Infinito * Infinito // Infinito -'foo' * 2 // NaN</pre> - -<h2 id=".25_.28modular.29" name=".25_.28modular.29">Resto o Residuo (%)</h2> - -<p>El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de <code>modulo</code> incorporada para producir el resultado, que es el resto entero de dividir <code>var1</code> por <code>var2</code> - por ejemplo - <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript</a>, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> var1 % var2</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5</pre> - -<h2 id="Exponenciación_(**)">Exponenciación (**)</h2> - -<p>El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, <code>var1<sup>var2</sup></code>, en la declaración anterior, donde <code>var1</code> y <code>var2</code> son variables. El operador de exponenciación es asociativo a la derecha. <code>a ** b ** c</code> es igual a <code>a ** (b ** c)</code>.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre><strong>Operador:</strong> var1 ** var2</pre> - -<p> </p> - -<h3 id="Notas">Notas</h3> - -<p>En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (<code>+/-/~/!/delete/void/typeof</code>) inmediatamente antes del número de base.</p> - -<pre class="brush: js">-2 ** 2; -// 4 en Bash, -4 en otros idiomas. -// Esto no es válido en JavaScript, ya que la operación es ambigua. - - --(2 ** 2); -// -4 en JavaScript y la intención del autor no es ambigua.</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<p>Para invertir el signo del resultado de una expresión de exponenciación:</p> - -<pre class="brush: js">-(2 ** 2) // -4</pre> - -<p>Para forzar la base de una expresión de exponenciación a ser un número negativo:</p> - -<pre class="brush: js">(-2) ** 2 // 4</pre> - -<div class="note"> -<p><strong>Nota:</strong> JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">un operador bit a bit ^ (logical XOR)</a>. <code>**</code> y <code>^</code> son diferentes (por ejemplo: <code>2 ** 3 === 8</code> cuando <code>2 ^ 3 === 1</code>.)</p> -</div> - -<p> </p> - -<h2 id=".2B.2B_.28incremento.29" name=".2B.2B_.28incremento.29">Incremento (++)</h2> - -<p> </p> - -<p>El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo, con el operador después del operando (por ejemplo, x++), devuelve el valor antes de incrementar.</li> - <li>Si se usa prefijo, con el operador antes del operando (por ejemplo, ++x), devuelve el valor después de incrementar.</li> -</ul> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre><strong>Operador:</strong> x++ o ++x</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefijo -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="--_.28decremento.29" name="--_.28decremento.29">Decremento (--)</h2> - -<p>El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo (por ejemplo, x--), devuelve el valor antes de decrementar.</li> - <li>Si usa el prefijo (por ejemplo, --x), entonces devuelve el valor después de decrementar.</li> -</ul> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre><strong>Operador:</strong> x-- o --x</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefijo -var a = 2; -b = --a; // a = 1, b = 1</pre> - -<p> </p> - -<h2 id="-_.28negaci.C3.B3n_unitario.29" name="-_.28negaci.C3.B3n_unitario.29">Negación unaria (-)</h2> - -<p>El operador de negación unaria precede su operando y lo niega.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre><strong>Operador:</strong> -x</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// el operador de negación unario puede convertir no-números en un número -var x = "4"; -y = -x; // y = -4</pre> - -<h2 id="Unario_más_()">Unario más (+)</h2> - -<p>El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas <code>true</code>, <code>false</code> y <code>null</code>. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre><strong>Operador:</strong> +x</pre> - -<h3 id="Ejemplos_10">Ejemplos</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN</pre> - -<p> </p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td><a href="https://github.com/rwaldron/exponentiation-operator">Operador de exponenciación</a> agregado.</td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Asignación</a></li> -</ul> - -<p> </p> diff --git a/files/es/web/javascript/referencia/operadores/asignacion/index.html b/files/es/web/javascript/referencia/operadores/asignacion/index.html deleted file mode 100644 index 1fa4b79ac4..0000000000 --- a/files/es/web/javascript/referencia/operadores/asignacion/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Asignacion (=) -slug: Web/JavaScript/Referencia/Operadores/Asignacion -tags: - - JS - - JavaScript - - Operador de Asignacion - - Operadores JavaScript - - Referências -translation_of: Web/JavaScript/Reference/Operators/Assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de asignación (=) se utiliza para asignar un valor a una variable. La operación de asignación evalúa el valor asignado. Es posible encadenar el operador de asignación para asignar un solo valor a múltiples variables</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<div></div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Asignación">Asignación</h3> - -<pre class="brush: js notranslate">// Asumimos las siguientes variables -// x = 5 -// n = 10 -// z = 25 - -x = n // La variable x contiene el valor 10 -x = n = z // x = n (es decir 10) y z pisa el valor total remplazandolo por 25</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - - - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/assignment_operators/index.html b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html deleted file mode 100644 index 979eff63f2..0000000000 --- a/files/es/web/javascript/referencia/operadores/assignment_operators/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Operadores de asignación -slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Un <strong>operador de asignacion</strong> asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.</p> - -<h2 id="Visión_general"><span class="short_text" id="result_box" lang="es"><span>Visión general</span></span></h2> - -<p>El operador de asignación basico es el igual (<code>=</code>), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Nombres</th> - <th>Abreviaciones</th> - <th>Significado</th> - </tr> - <tr> - <td><a href="#Assignment">Asignación</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">Asignación de adición</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de sustracción</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de multiplicación</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de división</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">Asignación de Resto</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation_assignment">Asignación de exponenciación</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la derecha</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">Asignacion AND</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion XOR</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion OR</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Asignación"><a name="Assignment">Asignación</a></h2> - -<p>Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y -</pre> - -<h3 id="Ejemplos">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// x = 5 -// y = 10 -// z = 25 - - -x = y // x es 10 -x = y = z // x, y, z son todas 25 -</pre> - -<h2 id="Asignación_de_Adición"><a name="Addition_assignment">Asignación de Adición</a></h2> - -<p>El operador de asignación de suma <strong>agrega</strong> el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x += y -<strong>Significado:</strong> x = x + y -</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asuma las siguientes variables -// foo = "foo" -// bar = 5 -// baz = true - - -// Number + Number -> Adición -bar += 2 // 7 - -// Boolean + Number -> Adición -baz += 1 // 2 - -// Boolean + Boolean -> Adición -baz += false // 1 - -// Number + String -> concatenación -bar += "foo" // "5foo" - -// String + Boolean -> concatenación -foo += false // "foofalse" - -// String + String -> concatenación -foo += "bar" // "foobar" -</pre> - -<h2 id="Asignación_de_Sustracción"><a name="Subtraction_assignment">Asignación de Sustracción</a></h2> - -<p>El operador de asignación de sustracción <strong>sustrae </strong>el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.</p> - - - -<h4 id="Sintaxis_3">Sintaxis</h4> - - - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x -= y -<strong>Significado:</strong> x = x - y -</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h2 id="Asignación_de_Multiplicación">Asignación de Multiplicación </h2> - -<p>El operador de asignación de multiplicación <strong>multiplica </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x *= y -<strong>Significado:</strong> x = x * y -</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar *= 2 // 10 -bar *= "foo" // NaN -</pre> - -<h2 id="Asignación_de_división"><a name="Division_assignment">Asignación de división</a></h2> - -<p>El operador de asignación de división <strong>divide </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x /= y -<strong>Significado:</strong> x = x / y -</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h2 id="Asignación_de_resto"><a name="Remainder_assignment">Asignación de resto</a></h2> - -<p>El operador de asignación de resto <strong>divide </strong>la variable por el valor del operador derecho y asigna el <strong>resto </strong>a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x %= y -<strong>Significado:</strong> x = x % y -</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar %= 2 // 1 -bar %= "foo" // NaN -bar %= 0 // NaN -</pre> - -<h2 id="Asignación_de_exponenciación"><a id="Exponentiation_assignment" name="Exponentiation_assignment"></a>Asignación de <span id="result_box" lang="es"><span>exponenciación</span></span></h2> - -<p>El operador de asignación de exponente evalua el resultado de elevar primero el operando a la <strong>potencia </strong>del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles</p> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x **= y -<strong>Significado:</strong> x = x ** y -</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar **= 2 // 25 -bar **= "foo" // NaN</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_izquierda"><a name="Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></h2> - -<p>El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x <<= y -<strong>Significado:</strong> x = x << y -</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_derecha"><a name="Right_shift_assignment">Asignación de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>= y -<strong>Significado:</strong> x = x >> y -</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h2 id="Asignación_sin_signo_de_desplazamiento_a_la_derecha"><a name="Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>>= y -<strong>Significado:</strong> x = x >>> y -</pre> - -<h3 id="Ejemplo">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h2 id="Asignación_AND"><a name="Bitwise_AND_assignment">Asignación AND</a></h2> - -<p>El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_11">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &= y -<strong>Significado:</strong> x = x & y -</pre> - -<h3 id="Ejemplo_2">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h2 id="Asignación_XOR"><a name="Bitwise_XOR_assignment">Asignación XOR</a></h2> - -<p>El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_12">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x ^= y -<strong>Significado:</strong> x = x ^ y -</pre> - -<h3 id="Ejemplo_3">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Asignación_OR"><a name="Bitwise_OR_assignment">Asignación OR</a></h2> - -<p>El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_13">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x |= y -<strong>Significado:</strong> x = x | y -</pre> - -<h3 id="Ejemplo_4">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Ejemplos_10">Ejemplos</h2> - -<h3 id="Operador_izquierdo_con_otros_operadores_de_asignación">Operador izquierdo con otros operadores de asignación</h3> - -<p>En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:</p> - -<pre class="brush: js notranslate">a[i++] += 5 // i es evaluado una vez -a[i++] = a[i++] + 5 // i es evaluado dos veces -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES1')}}</td> - <td> - <p>Definición inicial</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_tambien">Vea tambien</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Operadores Aritméticos</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/async_function/index.html b/files/es/web/javascript/referencia/operadores/async_function/index.html deleted file mode 100644 index 12e76e6ce5..0000000000 --- a/files/es/web/javascript/referencia/operadores/async_function/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Expresión de función asíncrona -slug: Web/JavaScript/Referencia/Operadores/async_function -tags: - - Expresión Primaria - - JavaScript - - Operador - - función -translation_of: Web/JavaScript/Reference/Operators/async_function ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La palabra clave <strong><code>async function</code></strong> puede ser utilizada para definir funciones <code>async</code> dento de expresiones.</p> - -<p>También se pueden definir funciones asíncronas utilizando un<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions."> enunciado de función asíncrona</a>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">async function [nombre]([<var>param1</var>[, <var>param2</var>[, ..., <var>paramN</var>]]]) { - <var>enunciados</var> -}</pre> - -<p>A partir de ES2015 (ES6), también se pueden emplear <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones flecha.</a></p> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code><var>name</var></code></dt> - <dd>El nombre de la función. Puede ser omitida, en cuy caso la función es <em>anónima</em>. El nombre es sólo local al cuerpo de la función The name is only local to the function body.</dd> - <dt><code><var>paramN</var></code></dt> - <dd>El nombre de un argumento a ser pasado a la función.</dd> - <dt><code><var>statements</var></code></dt> - <dd>Los enunciados que componen el cuerpo de la función.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>Una expresión <code>async function</code> es miuy similar, y casi tiene la misma sintaxis que, una {{jsxref('Statements/async_function', 'async function statement')}}. La principal diferencia entre una expresión <code>async function</code> y un enunciado <code>async function</code> es el <em>nombre de la función</em>, que puede ser omitido en una expresión <code>async function</code> para crear funciones <em>anonymous</em>. Una expresión <code>async function</code> puede ser utilizada como un {{Glossary("IIFE")}} (Expresión de función inmediatamente invocada, Immediately Invoked Function Expression) que se ejecuta tan rápido como es definida. Ver el capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a> para tener más información.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3> - -<pre class="brush: js">function resuelve2SegundosDespues(x) { - return new Promise(resolve => { - setTimeout(() => { - resolve(x); - }, 2000); - }); -}; - - -const agregar= async function(x) { // Expresión de una función asíncrona asignada a una variable - let a = await resuelve2SegundosDespues(20); - let b = await resuelve2SegundosDespues(30); - return x + a + b; -}; - -agregar(10).then(v => { - console.log(v); // imprime 60 después de 4 segundos. -}); - - -(async function(x) { // expresión de una función asíncrona utilizada como una IIFE - let p_a = resuelve2SegundosDespues(20); - let p_b = resuelve2SegundosDespues(30); - return x + await p_a + await p_b; -})(10).then(v => { - console.log(v); // imprime 60 después de 2 segundos. -}); -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> - -<div> - - -<p>{{Compat("javascript.operators.async_function_expression")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Statements/async_function", "async function")}}</li> - <li>Objeto {{jsxref("AsyncFunction")}}</li> - <li>{{jsxref("Operators/await", "await")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/await/index.html b/files/es/web/javascript/referencia/operadores/await/index.html deleted file mode 100644 index d1a84251f1..0000000000 --- a/files/es/web/javascript/referencia/operadores/await/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: await -slug: Web/JavaScript/Referencia/Operadores/await -translation_of: Web/JavaScript/Reference/Operators/await ---- -<div>{{jsSidebar("Operators")}}</div> - -<div>El operador <code>await</code> es usado para esperar a una {{jsxref("Promise")}}. Sólo puede ser usado dentro de una función {{jsxref("Statements/async_function", "async function")}}.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>Una {{jsxref("Promise")}} o cualquier otro valor por el cual haya que esperar.</dd> - <dt><code>rv</code></dt> - <dd> - <p>Regresa el valor terminado de la promesa o solamente un valor si no es una<code>Promise</code>.</p> - </dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>La expresión <code>await</code> provoca que la ejecución de una función <code>async</code> sea pausada hasta que una <code>Promise</code> sea terminada o rechazada, y regresa a la ejecución de la función <code>async</code> después del término. Al regreso de la ejecución, el valor de la expresión <code>await</code> es la regresada por una promesa terminada.</p> - -<p>Si la <code>Promise</code> es rechazada, el valor de la expresión <code>await</code> tendrá el valor de rechazo.</p> - -<p>Si el valor de la expresión seguida del operador <code>await</code> no es una promesa, será convertido a una <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<p>Si una <code>Promise</code> se pasa a una expresión <code>await</code>, espera a que la <code>Promise</code> se resuelva y devuelve el valor resuelto.</p> - -<pre class="brush: js">function resolveAfter2Seconds(x) { - return new Promise(resolve => { - setTimeout(() => { - resolve(x); - }, 2000); - }); -} - -async function f1() { - var x = await resolveAfter2Seconds(10); - console.log(x); // 10 -} -f1(); -</pre> - -<p>Si el valor no es una <code>Promise</code>, convierte el valor a una <code>Promise</code> resuelta, y espera por dicho valor.</p> - -<pre class="brush: js">async function f2() { - var y = await 20; - console.log(y); // 20 -} -f2();</pre> - -<p>Si la <code>Promise</code> es rechazada, se lanza una excepción con dicho el valor.</p> - -<pre class="brush: js">async function f3() { - try { - var z = await Promise.reject(30); - } catch(e) { - console.log(e); // 30 - } -} -f3();</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Initial definition in ES2017.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div> -<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de información estructurada. Si quisieras contribuir a esta información, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> - -<p>{{Compat("javascript.operators.await")}}</p> -</div> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Statements/async_function", "async function")}}</li> - <li>{{jsxref("Operators/async_function", "async function expression")}}</li> - <li>{{jsxref("AsyncFunction")}} object</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html deleted file mode 100644 index c4276c1c95..0000000000 --- a/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html +++ /dev/null @@ -1,722 +0,0 @@ ---- -title: Operadores a nivel de bit -slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Los operadores a nivel de bit </strong>tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">números</a> decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.</p> - -<p>La siguiente tabla resume los operadores a nivel de bit de JavaScript:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">AND binario</a></td> - <td><code>a & b</code></td> - <td>Devuelve un uno en cada posición en la que ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">OR binario </a></td> - <td><code>a | b</code></td> - <td>Devuelve un uno en cada posición en la que uno o ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Devuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. </td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>Invierte los bits del operando.</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift</a></td> - <td><code>a << b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la izquierda, desplazando en ceros desde la derecha.</td> - </tr> - <tr> - <td><a href="#Right_shift">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, descartando los bits desplazados fuera.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> - <td><code>a >>> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, desplazando en ceros desde la izquierda.</td> - </tr> - </tbody> -</table> - -<h2 id="Enteros_con_signo_de_32_bits">Enteros con signo de 32 bits</h2> - -<p>Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>A continuación se codifica <code>~314</code> como complemento a uno de 314:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Por último, se codifica <code>-314 como complemento a dos de </code><code>314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado <em>bit de signo.</em></p> - -<p>El número 0 es el entero compuesto íntegramente por bits en 0.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) - -</pre> - -<p>El número -1 es el entero compuesto íntegramente por bits de 1.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>El número <code>-2147483648</code> (representación hexadecimal: <code>-0x80000000</code>) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>El número <code>2147483647</code> (representación hexadecimal: <code>0x7fffffff</code>) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. </p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>Los números <code>-2147483648</code> and <code>2147483647</code> son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.</p> - -<h2 id="Operadores_lógicos_a_nivel_de_bit">Operadores lógicos<strong> a nivel de bit</strong></h2> - -<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p> - -<ul> - <li>Los operandos son convertidos en enteros de 32 bits y representados por series de bits (ceros y unos). Los numeros con más de 32 bits se convierten para que sus bits más significativos sean descartados. Por ejemplo, el siguiente entero con más de 32 bits se convierte a un entero de 32 bits.</li> - <li> - <pre><code>Antes: 1100110111110100000000000000110000000000001 -Después: 10100000000000000110000000000001</code></pre> - </li> - <li>Cada bit del primer operando es emparejado con su bit correspondiente en el segundo operando: el primero con el primero, el segundo con el segundo, y así.</li> - <li>El operador se aplica a cada pareja de bits, y el resultado se construye bit a bit. </li> -</ul> - -<h3 id="(Bitwise_AND_o_AND_a_nivel_de_bits)"><a name="Bitwise_AND">& (Bitwise AND o AND a nivel de bits)</a></h3> - -<p>Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, <code>a</code> AND <code>b</code> es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. </p> - -<h3 id="(Bitwise_OR_o_OR_a_nivel_de_bits)"><a name="Bitwise_OR">| (Bitwise OR o OR a nivel de bits)</a></h3> - -<p>Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.</p> - -<h3 id="(Bitwise_XOR_o_XOR_a_nivel_de_bits)"><a name="Bitwise_XOR">^ (Bitwise XOR o XOR a nivel de bits)</a></h3> - -<p>Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x</p> - -<h3 id="(Bitwise_NOT_o_Negación_a_nivel_de_bits)"><a name="Bitwise_NOT">~ (Bitwise NOT o Negación a nivel de bits)</a></h3> - -<p>Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<p> </p> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p> </p> - -<p>Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.</p> - -<p>Ejemplo con indexOf:</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// esta es un forma alternativa de escribir (-1*str.indexOf('a') <= 0) -if (~str.indexOf(searchFor)) { - // searchFor esta en el string -} else { - // searchFor no esta en el string -} - -// aquí verás los valores que retorna (~str.indexOf(searchFor)) -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="Operadores_de_desplazamiento_a_nivel_de_bit">Operadores de desplazamiento <strong>a nivel de bit</strong></h2> - -<p>Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.</p> - -<p>Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.</p> - -<h3 id="<<_(Desplazamiento_a_la_izquierda)"><a name="Left_shift"><< (Desplazamiento a la izquierda)</a></h3> - -<p>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</p> - -<p>Por ejemplo, 9 << 2 devuelve 36:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Desplazar a la izquierda cualquier número <strong>x</strong> por <strong>y</strong> bits da por resultado <strong>x * 2^y</strong>.</p> - -<h3 id=">>_(Desplazamiento_a_la_derecha_con_propagación_de_signo_o_Desplazamiento_aritmético_a_la_derecha)"><a name="Right_shift">>> (Desplazamiento a la derecha con propagación de signo o </a><a name="Unsigned_right_shift">Desplazamiento aritmético a la derecha</a><a name="Right_shift">)</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".</p> - -<p>Por ejemplo, <code>9 >> 2</code> devuelve 2:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Igualmente, <code>-9 >> 2</code> devuelve-3, porque se mantiene el signo:</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Desplazamiento_a_la_derecha_con_relleno_de_ceros_o_Desplazamiento_lógico_)"><a name="Unsigned_right_shift">>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. </p> - -<p><br> - Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, <code>9 >>> 2</code> da 2, al igual que <code>9 >> 2</code>:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Sin embargo, no es el caso para números negativos. Por ejemplo, <code>-9 >>> 2</code> da 1073741821, que es diferente de <code>-9 >> 2</code> (que da -3):</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Banderas_y_máscaras_de_bits">Banderas y máscaras de bits</h3> - -<p>Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).</p> - -<p>Supongamos que hay 4 banderas:</p> - -<ul> - <li>bandera A: tenemos un problema de hormigas</li> - <li>bandera B: somos dueños de un murciélago</li> - <li>bandera C: somos dueños de un gato</li> - <li>bandera D: somos dueños de un pato</li> -</ul> - -<p>Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>Este valor indica:</p> - -<ul> - <li>la bandera A es verdadera (tenemos un problema de hormigas);</li> - <li>la bandera B es falsa (no tenemos un murciélago);</li> - <li>la bandera C es verdadera (somos dueños de un gato);</li> - <li>la bandera D es falsa (no tenemos pato);</li> -</ul> - -<p>Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.</p> - -<p>Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, -// and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finalmente, todas las banderas se pueden voltear con el operador NOT:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Fragmentos_de_conversión">Fragmentos de conversión</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = "1011"; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p> </p> - -<p>Convierte una cadena binaria a un número decimal:</p> - -<p> </p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automatiza_la_creación_de_una_máscara.">Automatiza la creación de una máscara.</h3> - -<p>Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:</p> - -<pre class="brush: js">function createMask () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Algoritmo_inverso_una_matriz_de_valores_booleanos_de_una_máscara">Algoritmo inverso: una matriz de valores booleanos de una máscara</h3> - -<p>Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:</p> - -<pre class="brush: js">function arrayFromMask (nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError("arrayFromMask - out of range"); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert("[" + array1.join(", ") + "]"); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>Puedes probar ambos algoritmos al mismo tiempo ...</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:</p> - -<pre class="brush: js">function createBinaryString (nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definicion inicial</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</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><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</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/Operators/Logical_Operators">Operadores logicos</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/class/index.html b/files/es/web/javascript/referencia/operadores/class/index.html deleted file mode 100644 index e654359035..0000000000 --- a/files/es/web/javascript/referencia/operadores/class/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: expresión class -slug: Web/JavaScript/Referencia/Operadores/class -tags: - - Classes - - ECMAScript6 - - Expression - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/class ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La <strong>expresión class</strong> es una forma de definir una clase en ECMAScript 2015 (ES6). Similar a las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">funciones</a>, las expresiones de clase pueden ser nombradas o no. Si se nombran, el nombre de la clase es local sólo en el cuerpo de la clase. Las clases en JavaScript utilizan herencia basada en prototipos.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { - // class body -};</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Una expresión de clase tiene una sintaxis similar a la <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración de una clase</a>. Sin embargo, con las expresiones de clases, está permitido omitir el nombre de la clase ("identificador de enlace"), cosa que no se puede hacer con las declaraciones de clases. Además, las expresiones de clases permiten redefinir/redeclarar clases y <strong>no lanzar</strong> ningún tipo de error como las <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaraciones de clases</a>. La propiedad <code>constructor</code> es opcional. Y el <em>typeof </em>de las clases generadas con esta palabra clave siempre será "function".</p> - -<p>Tal y como en la declaración de clases, el cuerpo de la expresión de clase se ejecuta en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p> - -<pre class="brush: js">'use strict'; -var Foo = class {}; // la propiedad constructor es opcional -var Foo = class {}; // Se permite repetir declaraciones - -typeof Foo; // devuelve "function" -typeof class {}; // devuelve "function" - -Foo instanceof Object; // true -Foo instanceof Function; // true -class Foo {}; // Lanza TypeError, no permite volver a declararla -</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Una_clase_sencilla">Una clase sencilla</h3> - -<p>Esta es una sencilla expresión de clase anónima a la que se puede hacer referencia utilizando la variable "Foo".</p> - -<pre class="brush: js">var Foo = class { - constructor() {} - bar() { - return "Hello World!"; - } -}; - -var instance = new Foo(); -instance.bar(); // "Hello World!" -Foo.name; // "Foo" -</pre> - -<h3 id="Expresiones_de_clase_con_nombre">Expresiones de clase con nombre</h3> - -<p>Si se quiere hacer referencia a la clase actual dentro del cuerpo de la clase, se puede crear una expresión de clase con nombre. Este nombre sólo será visible en el mismo contexto de la expresión de clase.</p> - -<pre class="brush: js">var Foo = class NamedFoo { - constructor() {} - whoIsThere() { - return NamedFoo.name; - } -} -var bar = new Foo(); -bar.whoIsThere(); // "NamedFoo" -NamedFoo.name; // ReferenceError: NamedFoo no está definido -Foo.name; // "NamedFoo" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(45)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome para Android</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoMobile(45)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">expresión <code>function</code></a></li> - <li><code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración class</a></code></li> - <li><a href="/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/comparacion/index.html b/files/es/web/javascript/referencia/operadores/comparacion/index.html deleted file mode 100644 index c60efcaada..0000000000 --- a/files/es/web/javascript/referencia/operadores/comparacion/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Comparación (==) -slug: Web/JavaScript/Referencia/Operadores/Comparacion -tags: - - JS - - JavaScript - - Operador de comparacion - - Operadores - - Referências -translation_of: Web/JavaScript/Reference/Operators/Equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de comparacion (<code>==</code>) comprueba si sus dos operandos son iguales y devuelve un resultado booleano. A diferencia del operador de igualdad estricta (<code>===</code>), es que este convierte y compara operandos que son de diferentes tipos.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Los operadores de igualdad (<code>==</code>y <code>!=</code>) Utilizan el algoritmo de comparación de igualdad abstracta para comparar dos operandos. Esto se puede resumir a grandes rasgos como:</p> - -<ul> - <li>Si los operandos ambos son objetos, devuelve <code>true </code>solo si ambos operandos hacen referencia al mismo objeto.</li> - <li>Si un operando es <code>null</code>y el otro <code>undefined</code>, devuelve verdadero(<code>true</code>).</li> - <li>Si los operandos son de diferente tipos, intenta convertirlos al mismo tipo antes de comparar: - <ul> - <li>Al comparar un número con una cadena, convierte la cadena en un valor numérico.</li> - <li>Si uno de los operandos es booleano, convierte el operando booleano en 1 si es verdadero y en 0 en el caso de falso.</li> - <li>Si uno de los operandos es un objeto y el otro es un número o una cadena, convierte el objeto en una primitiva utilizando los métodos <code>valueOf()</code>y <code>toString()</code> del objeto.</li> - </ul> - </li> - <li>Si los operandos tienen el mismo tipo, se comparan de la siguiente manera: - <ul> - <li><code>String</code>: devuelve verdadero solo si ambos operandos tienen los mismos caracteres y en el mismo orden.</li> - <li><code>Number</code>: devuelve verdadero solo si ambos operandos tienen el mismo valor. <code>+0</code> y <code>-0</code> se tratan como el mismo valor. Si alguno de los operandos es <code>NaN</code>, devuelve falso.</li> - <li><code>Boolean</code>: retorna verdadero solo si ambos operandos son verdaderos o falsos.</li> - </ul> - </li> -</ul> - -<p>La diferencia más notable entre este operador y el operador de igualdad estricta (<code>===</code>) es que el operador de igualdad estricta no realiza la conversión de tipos. </p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Comparación_sin_conversión_de_tipo">Comparación sin conversión de tipo</h3> - -<pre class="brush: js notranslate">1 == 1; // true -"Hola" == "Hola"; // true</pre> - -<h3 id="Comparación_con_conversión_de_tipos">Comparación con conversión de tipos</h3> - -<pre class="brush: js notranslate">"1" == 1; // true -1 == "1"; // true -0 == false; // true -0 == null; // false -0 == undefined; // false -0 == !!null; // true, Operador Logico NOT -0 == !!undefined; // true, Operador Logico NOT -null == undefined; // true - -const number1 = new Number(3); -const number2 = new Number(3); -number1 == 3; // true -number1 == number2; // false</pre> - -<h3 id="Comparación_de_objetos">Comparación de objetos</h3> - -<pre class="brush: js notranslate">const object1 = {"key": "value"} -const object2 = {"key": "value"}; - -object1 == object2 // false -object2 == object2 // true</pre> - -<h3 id="Comparar_String_y_objetos_String">Comparar String y objetos String</h3> - -<p>Tenga en cuenta que las cadenas construidas con <code>new String() </code>son objetos. Si compara uno de estos con un String literal, el objeto String se convertirá en un <code>String</code> literal y se comparará el contenido. Sin embargo, si ambos operandos son objetos de tipo String, entonces se comparan como objetos y deben hacer referencia al mismo objeto para que la comparación sea exitosa:</p> - -<pre class="brush: js notranslate">const string1 = "Hola"; -const string2 = String("Hola"); -const string3 = new String("Hola"); -const string4 = new String("Hola"); - -console.log(string1 == string2); // true -console.log(string1 == string3); // true -console.log(string2 == string3); // true -console.log(string3 == string4); // false -console.log(string4 == string4); // true</pre> - -<h3 id="Comparación_de_fechas_y_cadenas">Comparación de fechas y cadenas</h3> - -<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); -const s = d.toString(); // Por ejemplo: "Sun Dec 17 1995 03:24:00 GMT-0800 (Hora estándar del Pacífico)" -console.log(d == s); //true</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificaciones</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - - - -<p>{{Compat("javascript.operators.equality")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/comparison_operators/index.html b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html deleted file mode 100644 index 8685790d2c..0000000000 --- a/files/es/web/javascript/referencia/operadores/comparison_operators/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: Operadores de Comparación -slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators -tags: - - JavaScript - - Operador - - Referencia -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, <code>===</code>) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, <code>==</code>) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <code><=</code>), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.</p> - -<p>Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.</p> - -<pre class="brush: js notranslate">console.log(1 == 1) -// Esperamos True - -console.log("1" == 1 ) -// Esperamos true - -console.log( 1 === 1) -// Esperamos true - -console.log( "1" === 1) -// Esperamos false -</pre> - -<p>Características de las comparaciones:</p> - -<ul> - <li>Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.</li> - <li>Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico). <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre sí. </li> - <li>Dos operandos booleanos son estrictamente iguales si ambos son <code>true</code> o ambos son <code>false</code>.</li> - <li>Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas.</li> - <li>Una expresión que compara objetos solo es verdadera si los operandos hacen referencia al mismo objeto.</li> - <li>Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractivamente iguales entre sí.</li> -</ul> - -<h2 id="Operadores_de_igualdad">Operadores de igualdad</h2> - -<h3 id="Igualdad"><a name="Equality">Igualdad (==)</a></h3> - -<p>El operador de igualdad convierte los operandos si <strong>no son del mismo tipo</strong>, luego aplica una comparación estricta. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.</p> - -<h4 id="Sintaxis">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Ejemplos">Ejemplos</h4> - -<pre class="brush: js notranslate">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 == object2 // false -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Desigualdad_!"><a name="Inequality">Desigualdad (!=)</a></h3> - -<p>El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos <strong>no son del mismo tipo</strong>, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.</p> - -<h4 id="Sintaxis_2">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Ejemplos_2">Ejemplos</h4> - -<pre class="brush: js notranslate">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Identidad_igualdad_estricta"><a name="Identity">Identidad / igualdad estricta (===)</a></h3> - -<p>El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) <strong>sin conversión de tipo</strong>.</p> - -<h4 id="Sintaxis_3">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 // false</pre> - - - -<h3 id="Sin_identidad_desigualdad_estricta_!"><a name="Nonidentity">Sin identidad / desigualdad estricta (!==)</a></h3> - -<p>El operador sin identidad devuelve verdadero si los operandos <strong>no son iguales y / o no del mismo tipo</strong>.</p> - -<h4 id="Sintaxis_4">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Ejemplos_4">Ejemplos</h4> - -<pre class="brush: js notranslate">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Operadores_relacionales">Operadores relacionales</h2> - -<p>Cada uno de estos operadores llamará a la función <code>valueOf()</code> en cada operando antes de realizar una comparación.</p> - -<h3 id="Operador_mayor_que_>"><a name="Greater_than_operator">Operador mayor que (>)</a></h3> - -<p>El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.</p> - -<h4 id="Sintaxis_5">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Ejemplos_5">Ejemplos</h4> - -<pre class="brush: js notranslate">4 > 3 // true -</pre> - -<h3 id="Operador_mayor_o_igual_>"><a name="Greater_than_or_equal_operator">Operador mayor o igual (>=)</a></h3> - -<p>El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_6">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Ejemplos_6">Ejemplos</h4> - -<pre class="brush: js notranslate">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Operador_menor_que_<"><a name="Less_than_operator"> Operador menor que (<)</a></h3> - -<p>El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.</p> - -<h4 id="Sintaxis_7">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Ejemplos_7">Ejemplos</h4> - -<pre class="brush: js notranslate">3 < 4 // true -</pre> - -<h3 id="Operador_menor_o_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor o igual (<=)</a></h3> - -<p>El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_8">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Ejemplos_8">Ejemplos</h4> - -<pre class="brush: js notranslate">3 <= 4 // true -</pre> - -<h2 id="Usando_los_operadores_de_igualdad">Usando los operadores de igualdad</h2> - -<p>Los operadores de igualdad estándar (<code>==</code> y <code>!=</code>) utilizan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparación de Igualdad Abstracta</a> para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión <code>5 == '5'</code>, la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.</p> - -<p>Los operadores de igualdad estricta (<code>===</code> y <code>!==</code>) usan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de Comparación de Igualdad Estricta</a> y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es <code>false</code>, entonces <code>5 !== '5'</code>.</p> - -<p>Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.</p> - -<p>Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:</p> - -<ul> - <li>Al comparar un número y una cadena, la cadena se convierte en un valor numérico. JavaScript intenta convertir el literal numérico de cadena a un valor de tipo <code>Number</code>. Primero, un valor matemático se deriva del literal numérico de cadena. A continuación, este valor se redondea al valor de tipo <code>Number</code> más cercano.</li> - <li>Si uno de los operandos es <code>Boolean</code>, el operando <code>Boolean</code> se convierte en 1 si es <code>true</code> y +0 si es <code>false</code>.</li> - <li>Si un objeto se compara con un número o cadena, JavaScript intenta devolver el valor predeterminado para el objeto. Los operadores intentan convertir el objeto a un valor primitivo, un valor <code>String</code> o <code>Number</code>, utilizando los métodos <code>valueOf</code> y <code>toString</code> de los objetos. Si falla este intento de convertir el objeto, se genera un error de tiempo de ejecución.</li> - <li>Tenga en cuenta que un objeto se convierte en una primitiva si, y solo si, su comparando es una primitiva. Si ambos operandos son objetos, se comparan como objetos, y la prueba de igualdad es verdadera solo si ambos refieren el mismo objeto.</li> -</ul> - -<div class="note"><strong>Nota:</strong> Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:</div> - -<pre class="brush:js notranslate">// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a == b - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a === b - -// true como a y 'foo' son de tipo diferente y, el Objeto (a) -// se convierte en cadena 'foo' antes de la comparación -a == 'foo'</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> - <p>Agrega <code>===</code> y <code>!==</code> operadores. Implementado en JavaScript 1.3</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y uniformidad</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html b/files/es/web/javascript/referencia/operadores/conditional_operator/index.html deleted file mode 100644 index 6b48295902..0000000000 --- a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: Operador condicional (ternario) -slug: Web/JavaScript/Referencia/Operadores/Conditional_Operator -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<div>El<strong> operador condicional </strong>(<strong>ternario</strong>) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/if...else">if</a>.</div> - -<div> </div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>condición </em>? <em>expr1</em> : <em>expr2</em> </pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>condición</code></dt> - <dd>Una expresión que se evalúa como true o false.</dd> - <dt> - <div class="syntaxbox"><code>expr1</code>, <code>expr2</code></div> - </dt> - <dd>Expresión con valores de algún tipo.</dd> - <dt> - <h2 id="Descripción">Descripción</h2> - </dt> -</dl> - -<p>Si la <code>condición</code> es <code>true</code>, el operador retorna el valor de la <code>expr1</code>; de lo contrario, devuelve el valor de <code>expr2</code>. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable <em><code>isMember,</code></em> se puede usar esta declaración:</p> - -<pre class="brush: js">"La Cuota es de: " + (isMember ? "$2.00" : "$10.00") -</pre> - -<p>También puedes asignar variables dependiendo del resultado de la condición ternaria:</p> - -<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Sip" : "Nop";</pre> - -<p>También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):</p> - -<pre class="brush: js">var firstCheck = false, - secondCheck = false, - access = firstCheck ? "Acceso Denegado" : secondCheck ? "Acceso Denegado" : "Acceso Permitido"; - -console.log( access ); // muestra "Acceso Permitido"</pre> - -<p>También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:</p> - -<pre class="brush: js">var stop = false, age = 16; - -age > 18 ? location.assign("continue.html") : stop = true; -</pre> - -<p>También puede realizar más de una operación por caso, separándolas con una coma:</p> - -<pre class="brush: js">var stop = false, age = 23; - -age > 18 ? ( - alert("OK, puedes continuar."), - location.assign("continue.html") -) : ( - stop = true, - alert("Disculpa, eres menor de edad!") -); -</pre> - -<p>También puede realizar más de una operación durante la asignación de un valor. En este caso, <strong><em>el último valor separado por una coma del paréntesis </em>será el valor asignado</strong>.</p> - -<pre class="brush: js">var age = 16; - -var url = age > 18 ? ( - alert("OK, puedes continuar."), - // alert devuelve "undefined", pero será ignorado porque - // no es el último valor separado por comas del paréntesis - "continue.html" // el valor a ser asignado si age > 18 -) : ( - alert("Eres menor de edad!"), - alert("Disculpa :-("), - // etc. etc. - "stop.html" // el valor a ser asignado si !(age > 18) -); - -location.assign(url); // "stop.html"</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial implementada en JavaScript 1.0.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/decremento/index.html b/files/es/web/javascript/referencia/operadores/decremento/index.html deleted file mode 100644 index 01fa5f0ee2..0000000000 --- a/files/es/web/javascript/referencia/operadores/decremento/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Decremento(--) -slug: Web/JavaScript/Referencia/Operadores/Decremento -tags: - - Decremento - - JavaScript - - JavaScript basico - - Operadores -translation_of: Web/JavaScript/Reference/Operators/Decrement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de decremento (--) disminuye (o resta de a uno) su operando y retorna un valor.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> - -<div></div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operadores:</strong> <var>x</var>-- o --<var>x</var> -</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Si usamos la forma de sufijo, operador después del operando (por ejemplo, <code>x--</code>), el operador de disminución disminuye y devuelve el valor antes de disminuir.</p> - -<p>Si se usamos la forma de prefijo, operador antes del operando (por ejemplo, <code>--x</code>), el operador de disminución disminuye y devuelve el valor después de disminuir.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_Sufijo">Usando Sufijo </h3> - -<pre class="brush: js notranslate">let x = 3; -y = x--; - -// y = 3 -// x = 2 -</pre> - -<h3 id="Usando_Prefijo">Usando Prefijo</h3> - -<pre class="brush: js notranslate">let a = 2; -b = --a; - -// a = 1 -// b = 1 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificaciones</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.decrement")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/delete/index.html b/files/es/web/javascript/referencia/operadores/delete/index.html deleted file mode 100644 index 99ec3e73dd..0000000000 --- a/files/es/web/javascript/referencia/operadores/delete/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: operador delete -slug: Web/JavaScript/Referencia/Operadores/delete -translation_of: Web/JavaScript/Reference/Operators/delete ---- -<div> -<div>{{jsSidebar("Operators")}}</div> -</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El operador <code>delete</code> elimina una propiedad de un objeto.</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox">delete expresión </pre> - -<p>donde la <em>expresión</em> debe evaluar una referencia de la propiedad, por ejemplo:</p> - -<pre class="syntaxbox">delete <em>objeto.propiedad</em> -delete <em>objeto</em>['<em>propiedad</em>'] -</pre> - -<h3 id="Parameters" name="Parameters">Parámetros</h3> - -<dl> - <dt><code>objeto</code></dt> - <dd>El nombre de un objeto, o una expresión que evalua a un objeto.</dd> - <dt><code>propiedad</code></dt> - <dd>La propiedad a eliminar.</dd> -</dl> - -<h3 id="Returns" name="Returns">Retorno</h3> - -<p>En <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">modo estricto</a> arroja una excepción si la propiedad no es configurable (retorna <code>false</code> en modo no estricto). Retorna <code>true</code> en cualquier otro caso.</p> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Al contrario de lo que se podría pensar, el operador <code>delete</code> no tiene nada que ver con liberar memoria (sólo lo hace de manera indirecta eliminando referencias. Más detalles en la página de<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Gestion_de_Memoria"> gestión de memoria</a>).</p> - -<p>Si la operación <code>delete</code> funciona correctamente, eliminará la propiedad del objeto por completo. Sin embargo, si existe otra propiedad con el mismo nombre en la cadena del <code>prototype </code>del objeto, éste heredará la propiedad del <code>prototype</code>.</p> - -<p><code>delete</code> sólo es efectivo en propiedades de objetos. No tiene ningún efecto en variables o en nombres de funciones.<br> - Aunque a veces son mal identificados como variables globales, las asignaciones que no especifican al objeto (ejemplo: x = 5), son en realidad propiedades que se asignan al objeto global.</p> - -<p><code>delete</code> no puede eliminar ciertas propiedades de los objetos predefinidos (como Object, Array, Math etc). Estos están descritos en ECMAScript 5 y más tarde como no configurables.</p> - -<h3 id="Temporal_dead_zone">Temporal dead zone</h3> - -<p>The "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone"</a> (TDZ), specified in ECMAScript 6 for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> declarations, also applies to the <code>delete</code> operator. Thus, code like the following will throw a {{jsxref("ReferenceError")}}.</p> - -<pre class="brush: js">function foo() { - delete x; - let x; -} - -function bar() { - delete y; - const y; -}</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: js">x = 42; // crea la propiedad x en el objeto global -var y = 43; // crea la propiedad y en el objeto global, y la marca como no configurable -myobj = { - h: 4, - k: 5 -}; - -// x es una propiedad del objeto global y puede ser eliminada -delete x; // retorna true - -// y no es configurable, por lo tanto no puede ser eliminada -delete y; // retorna false - -// delete no afecta a ciertas propiedades predefinidas -delete Math.PI; // retorna false - -// las propiedades definidas por el usuario pueden eliminarse -delete myobj.h; // retorna true - -// myobj es una propiedad del objeto global, no una variable, -// por lo tanto puede eliminarse -delete myobj; // retorna true - -function f() { - var z = 44; - - // delete no afecta a nombres de variables locales - delete z; // retorna false -} -</pre> - -<p>Si el objeto hereda una propiedad de un prototype, y no tiene la propiedad en sí, la propiedad no puede ser eliminada por referencia al objeto. Aun así, puedes eliminarla directamente en el prototype.</p> - -<p>If the object inherits a property from a prototype, and doesn't have the property itself, the property can't be deleted by referencing the object. You can, however, delete it directly on the prototype.</p> - -<pre class="brush: js">function Foo(){} -Foo.prototype.bar = 42; -var foo = new Foo(); - -// retorna true, pero sin ningún efecto, -// ya que bar es una propiedad heredada -delete foo.bar; - -// logs 42, propiedad aún heredada -console.log(foo.bar); - -// elimina la propiedad en el prototype -delete Foo.prototype.bar; - -// logs "undefined", propiedad no heredada -console.log(foo.bar); </pre> - -<h3 id="Deleting_array_elements" name="Deleting_array_elements">Eliminando elementos de un array</h3> - -<p>Cuando eliminas un elemento de un array, la longitud del array no se ve afectada. Esta se mantiene incluso si eliminas el último elemento del array.</p> - -<p>Cuando el operador <code>delete</code> elimina un elemento de un array, este elemento ya no está en el array. En el siguiente ejemplo, <code>trees[3]</code> es eliminado mediante <code>delete</code>.</p> - -<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; -delete trees[3]; -if (3 in trees) { - // esto no se ejecuta -}</pre> - -<p>Si quieres que exista un elemento de un array pero que tengo un valor no definido, utiliza el valor <code>undefined</code> en vez del operador <code>delete</code>. En el siguiente ejemplo, <code>trees[3]</code> es asignado con el valor <code>undefined</code>, pero el elemento del array aún existe:</p> - -<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; -trees[3] = undefined; -if (3 in trees) { - // esto se ejecuta -}</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Definición inicial. Implementado en JavaScript 1.2</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</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> - <tr> - <td>Temporal dead zone</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop(36)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Temporal dead zone</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile(36)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Cross-browser_issues">Cross-browser issues</h3> - -<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p> - -<p>So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p> - -<h2 id="See_also" name="See_also">Ver también</h2> - -<ul> - <li><a href="http://perfectionkills.com/understanding-delete/">Análisis en profundidad sobre delete</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html b/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html deleted file mode 100644 index b56e3d3b52..0000000000 --- a/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: La desestructuración -slug: Web/JavaScript/Referencia/Operadores/Destructuring_assignment -tags: - - Característica del lenguaje - - Desestructuración - - Desestructurar arreglos y objetos anidados - - ECMAScript 2015 - - ES6 - - JavaScript - - Objetos anidados y desestructuración de array - - Operador -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -<div>{{jsSidebar("Operators", "Operadores")}}</div> - -<p>La sintaxis de <strong>desestructuración</strong> es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> - -<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush:js notranslate">let a, b, rest; -[a, b] = [10, 20]; -console.log(a); // 10 -console.log(b); // 20 - -[a, b, ...rest] = [10, 20, 30, 40, 50]; -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // [30, 40, 50] - -({ a, b } = { a: 10, b: 20 }); -console.log(a); // 10 -console.log(b); // 20 - - -// Propuesta de etapa 4 (terminada) -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // {c: 30, d: 40} -</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Las expresiones de objetos y arreglos literales proporcionan una manera fácil de crear paquetes de datos <em>ad hoc</em>.</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];</pre> - -<p>La desestructuración utiliza una sintaxis similar, pero en el lado izquierdo de la asignación para definir qué valores desempacar de la variable origen.</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5]; -const [y, z] = x; -console.log(y); // 1 -console.log(z); // 2 -</pre> - -<p>Esta capacidad es similar a las características presentes en lenguajes como Perl y Python.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Desestructuración_de_arreglos">Desestructuración de arreglos</h3> - -<h4 id="Asignación_básica_de_variables">Asignación básica de variables</h4> - -<pre class="brush: js notranslate">const foo = ['one', 'two', 'three']; - -const [red, yellow, green] = foo; -console.log(red); // "one" -console.log(yellow); // "two" -console.log(green); // "three" -</pre> - -<h4 id="Asignación_separada_de_la_declaración">Asignación separada de la declaración</h4> - -<p>A una variable se le puede asignar su valor mediante una desestructuración separada de la declaración de la variable.</p> - -<pre class="brush:js notranslate">let a, b; - -[a, b] = [1, 2]; -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Valores_predeterminados">Valores predeterminados</h4> - -<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del arreglo sea <code>undefined</code>.</p> - -<pre class="brush: js notranslate">let a, b; - -[a=5, b=7] = [1]; -console.log(a); // 1 -console.log(b); // 7 -</pre> - -<h4 id="Intercambio_de_variables">Intercambio de variables</h4> - -<p>Los valores de dos variables se pueden intercambiar en una expresión de desestructuración.</p> - -<p>Sin desestructurar la asignación, intercambiar dos valores requiere una variable temporal (o, en algunos lenguajes de bajo nivel, el algoritmo del <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">truco XOR-swap</a>).</p> - -<pre class="brush:js notranslate">let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1 - -const arr = [1,2,3]; -[arr[2], arr[1]] = [arr[1], arr[2]]; -console.log(arr); // [1,3,2] - -</pre> - -<h4 id="Analizar_un_arreglo_devuelto_por_una_función">Analizar un arreglo devuelto por una función</h4> - -<p>Siempre ha sido posible devolver un arreglo desde una función. La desestructuración puede hacer que trabajar con un valor de retorno de arreglo sea más conciso.</p> - -<p>En este ejemplo, <code>f()</code> devuelve los valores <code>[1, 2]</code> como su salida, que se puede procesar en una sola línea con desestructuración.</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2]; -} - -let a, b; -[a, b] = f(); -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Ignorar_algunos_valores_devueltos">Ignorar algunos valores devueltos</h4> - -<p>Puedes ignorar los valores de retorno que no te interesan:</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2, 3]; -} - -const [a, , b] = f(); -console.log(a); // 1 -console.log(b); // 3 - -const [c] = f(); -console.log(c); // 1 -</pre> - -<p>También puedes ignorar todos los valores devueltos:</p> - -<pre class="brush:js notranslate">[,,] = f(); -</pre> - -<h4 id="Asignar_el_resto_de_un_arreglo_a_una_variable">Asignar el resto de un arreglo a una variable</h4> - -<p>Al desestructurar un arreglo, puedes desempacar y asignar la parte restante a una variable usando el patrón <code>rest</code>o:</p> - -<pre class="brush: js notranslate">const [a, ...b] = [1, 2, 3]; -console.log(a); // 1 -console.log(b); // [2, 3]</pre> - -<p>Ten en cuenta que se lanzará un {{jsxref("SyntaxError")}} si se usa una coma final en el lado derecho con un elemento <code>rest</code>o:</p> - -<pre class="brush: js example-bad notranslate">const [a, ...b,] = [1, 2, 3]; - -// SyntaxError: el elemento rest no puede tener una coma al final -// Siempre considera usar el operador rest como último elemento -</pre> - -<h4 id="Desempacar_valores_coincidentes_con_una_expresión_regular">Desempacar valores coincidentes con una expresión regular</h4> - -<p>Cuando el método de expresión regular {{jsxref("Global_Objects/RegExp/exec", "exec()", "", 1)}} encuentra una coincidencia, devuelve un arreglo que contiene primero toda la parte coincidente de la cadena y luego las partes de la cadena que coinciden con cada grupo entre paréntesis en la expresión regular. La desestructuración te permite desempacar fácilmente las partes de este arreglo, ignorando la coincidencia completa si no es necesaria.</p> - -<pre class="brush:js notranslate">function parseProtocol(url) { - const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); - if (!parsedURL) { - return false; - } - console.log(parsedURL); - // ["https://developer.mozilla.org/es/Web/JavaScript", - "https", "developer.mozilla.org", "es/Web/JavaScript"] - - const [, protocol, fullhost, fullpath] = parsedURL; - return protocol; -} - -console.log(parseProtocol('https://developer.mozilla.org/es/Web/JavaScript')); -// "https" -</pre> - -<h3 id="Desestructuración_de_objetos">Desestructuración de objetos</h3> - -<h4 id="Asignación_básica">Asignación básica</h4> - -<pre class="brush: js notranslate">const user = { - id: 42, - is_verified: true -}; - -const {id, is_verified} = user; - -console.log(id); // 42 -console.log(is_verified); // true -</pre> - -<h4 id="Asignación_sin_declaración">Asignación sin declaración</h4> - -<p>A una variable se le puede asignar su valor con desestructuración separada de su declaración.</p> - -<pre class="brush:js notranslate">let a, b; - -({a, b} = {a: 1, b: 2});</pre> - -<div class="note"> -<p><strong>Notas</strong>: los paréntesis <code>(...)</code> alrededor de la declaración de asignación son obligatorios cuando se usa la desestructuración de un objeto literal sin una declaración.</p> - -<p><code>{a, b} = {a: 1, b: 2}</code> no es una sintaxis independiente válida, debido a que <code>{a, b}</code> en el lado izquierdo se considera un bloque y no un objeto literal.</p> - -<p>Sin embargo, <code>({a, b} = {a: 1, b: 2})</code> es válido, al igual que <code>const {a, b} = {a: 1, b: 2}</code></p> - -<p>tu expresión <code>( ... )</code> debe estar precedida por un punto y coma o se puede usar para ejecutar una función en la línea anterior.</p> -</div> - -<h4 id="Asignar_a_nuevos_nombres_de_variable">Asignar a nuevos nombres de variable</h4> - -<p>Una propiedad se puede desempacar de un objeto y asignar a una variable con un nombre diferente al de la propiedad del objeto.</p> - -<pre class="brush: js notranslate">const o = {p: 42, q: true}; -const {p: foo, q: bar} = o; - -console.log(foo); // 42 -console.log(bar); // true</pre> - -<p>Aquí, por ejemplo, <code>const {p: foo} = o</code> toma del objeto <code>o</code> la propiedad llamada <code>p</code> y la asigna a una variable local llamada <code>foo</code>.</p> - -<h4 id="Valores_predeterminados_2">Valores predeterminados</h4> - -<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del objeto sea <code>undefined</code>.</p> - -<pre class="brush: js notranslate">const {a = 10, b = 5} = {a: 3}; - -console.log(a); // 3 -console.log(b); // 5</pre> - -<h4 id="Asignar_nombres_a_nuevas_variables_y_proporcionar_valores_predeterminados">Asignar nombres a nuevas variables y proporcionar valores predeterminados</h4> - -<p>Una propiedad puede ser ambas</p> - -<ul> - <li>Desempacada de un objeto y asignada a una variable con un nombre diferente.</li> - <li>Se le asigna un valor predeterminado en caso de que el valor desempacado sea <code>undefined</code>.</li> -</ul> - -<pre class="brush: js notranslate">const {a: aa = 10, b: bb = 5} = {a: 3}; - -console.log(aa); // 3 -console.log(bb); // 5 -</pre> - -<h4 id="Desempacar_campos_de_objetos_pasados_como_parámetro_de_función">Desempacar campos de objetos pasados como parámetro de función</h4> - -<pre class="brush:js notranslate">const user = { - id: 42, - displayName: 'jdoe', - fullName: { - firstName: 'John', - lastName: 'Doe' - } -}; - -function userId({id}) { - return id; -} - -function whois({displayName, fullName: {firstName: name}}) { - return `${displayName} es ${name}`; -} - -console.log(userId(user)); // 42 -console.log(whois(user)); // "jdoe es John"</pre> - -<p>Esto desempaca el <code>id</code>, <code>displayName</code> y <code>firstName</code> del objeto <code>user</code> y los imprime.</p> - -<h4 id="Establecer_el_valor_predeterminado_de_un_parámetro_de_función">Establecer el valor predeterminado de un parámetro de función</h4> - -<pre class="brush: js notranslate">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { - console.log(size, coords, radius); - // haz un dibujo de gráfico -} - -drawChart({ - coords: {x: 18, y: 30}, - radius: 30 -});</pre> - -<div class="note"> -<p>En la firma de la función para <strong><code>drawChart</code></strong> anterior, el lado izquierdo desestructurado se asigna a un objeto literal vacío en el lado derecho: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code>. También podrías haber escrito la función sin la asignación del lado derecho. Sin embargo, si omites la asignación del lado derecho, la función buscará al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a <code><strong>drawChart()</strong></code> sin proporcionar ningún parámetro. El diseño actual es útil si deseas poder llamar a la función sin proporcionar ningún parámetro, el otro puede ser útil cuando deseas asegurarte de que se pase un objeto a la función.</p> -</div> - -<h4 id="Desestructuración_de_arreglos_y_objetos_anidados">Desestructuración de arreglos y objetos anidados</h4> - -<pre class="brush:js notranslate">const metadata = { - title: 'Scratchpad', - translations: [ - { - locale: 'de', - localization_tags: [], - last_edit: '2020-08-29T08:43:37', - url: '/de/docs/Tools/Scratchpad', - title: 'JavaScript-Umgebung' - } - ], - url: '/es/docs/Tools/Scratchpad' -}; - -let { - title: englishTitle, // renombrar - translations: [ - { - title: localeTitle, // renombrar - }, - ], -} = metadata; - -console.log(englishTitle); // "Scratchpad" -console.log(localeTitle); // "JavaScript-Umgebung"</pre> - -<h4 id="Iteración_for...of_y_desestructuración">Iteración "<code>for...of</code>" y desestructuración</h4> - -<pre class="brush: js notranslate">const people = [ - { - name: 'Mike Smith', - family: { - mother: 'Jane Smith', - father: 'Harry Smith', - sister: 'Samantha Smith' - }, - age: 35 - }, - { - name: 'Tom Jones', - family: { - mother: 'Norah Jones', - father: 'Richard Jones', - brother: 'Howard Jones' - }, - age: 25 - } -]; - -for (const {name: n, family: {father: f}} of people) { - console.log('Nombre: ' + n + ', Padre: ' + f); -} - -// "Nombre: Mike Smith, Padre: Harry Smith" -// "Nombre: Tom Jones, Padre: Richard Jones" -</pre> - -<h4 id="Nombres_de_propiedades_de_objetos_calculados_y_desestructuración">Nombres de propiedades de objetos calculados y desestructuración</h4> - -<p>Los nombres de propiedad calculados, como en un {{jsxref("Operators/Object_initializer", "Objeto literal", "#Computed_property_names", 1)}}, se pueden usar con la desestructuración.</p> - -<pre class="brush: js notranslate">let key = 'z'; -let {[key]: foo} = {z: 'bar'}; - -console.log(foo); // "bar" -</pre> - -<h4 id="Rest_en_la_desestructuración_de_objetos"><code>Rest</code> en la desestructuración de objetos</h4> - -<p>La propuesta <a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Propiedades <code>rest</code>/propagación para ECMAScript</a> (etapa 4) agrega la sintaxis {{jsxref("Functions/rest_parameters", "rest", "", 1)}} para desestructurar. Las propiedades de <code>rest</code> recopilan las claves de propiedades enumerables restantes que aún no han sido seleccionadas por el patrón de desestructuración.</p> - -<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} -a; // 10 -b; // 20 -rest; // { c: 30, d: 40 }</pre> - -<h4 id="Identificador_de_JavaScript_no_válido_como_nombre_de_propiedad">Identificador de JavaScript no válido como nombre de propiedad</h4> - -<p>La desestructuración se puede utilizar con nombres de propiedad que no son {{Glossary("Identifier", "identificadores")}} válidos en JavaScript proporcionando un identificador alternativo que sea válido.</p> - -<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; -const { 'fizz-buzz': fizzBuzz } = foo; - -console.log(fizzBuzz); // "true" -</pre> - -<h4 id="Desestructuración_combinada_de_arreglos_y_objetos">Desestructuración combinada de arreglos y objetos</h4> - -<p>La desestructuración de arreglos y objetos se puede combinar. Supongamos que deseas manipular el tercer elemento del siguiente arreglo <code>props</code>, y luego deseas la propiedad <code>name</code> en el objeto, puedes hacer lo siguiente:</p> - -<pre class="brush: js notranslate">const props = [ - { id: 1, name: 'Fizz'}, - { id: 2, name: 'Buzz'}, - { id: 3, name: 'FizzBuzz'} -]; - -const [,, { name }] = props; - -console.log(name); // "FizzBuzz" -</pre> - -<h4 id="Se_busca_la_cadena_de_prototipos_al_desestructurar_el_objeto.">Se busca la cadena de prototipos al desestructurar el objeto.</h4> - -<p>Al deconstruir un objeto, si no se accede a una propiedad en sí misma, continuará buscando a lo largo de la cadena de prototipos.</p> - -<pre class="brush: js notranslate">let obj = {self: '123'}; -obj.__proto__.prot = '456'; -const {self, prot} = obj; -// self "123" -// prot "456" (Acceso a la cadena de prototipos)</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Desestructuración de asignación')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<div> -<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> - -<p>{{Compat("javascript.operators.destructuring")}}</p> -</div> - -<h2 id="Ve_también">Ve también</h2> - -<ul> - <li>{{jsxref("Operators/Assignment_Operators", "Operadores de asignación", "", 1)}}</li> - <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 en profundidad: Desestructuración" en hacks.mozilla.org</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/division/index.html b/files/es/web/javascript/referencia/operadores/division/index.html deleted file mode 100644 index d29816e37a..0000000000 --- a/files/es/web/javascript/referencia/operadores/division/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Division (/) -slug: Web/JavaScript/Referencia/Operadores/Division -tags: - - JS - - JavaScript - - Operador de Division - - Operadores - - Referências -translation_of: Web/JavaScript/Reference/Operators/Division ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de división (<code>/</code>) produce el cociente de sus operandos donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> - -<div></div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>x</var> / <var>y</var> -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Division_basica">Division basica</h3> - -<pre class="brush: js notranslate">1 / 2 // 0.5 - -Math.floor(3 / 2) // 1 - -1.0 / 2.0 // 0.5 -</pre> - -<h3 id="Division_por_cero">Division por cero</h3> - -<pre class="brush: js notranslate">2.0 / 0 // Retorna Infinity - -2.0 / 0.0 // Retorna Infinity, Dado que 0.0 === 0 - -2.0 / -0.0 // Retorna -Infinity</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> - - - -<p>{{Compat("javascript.operators.division")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html b/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html deleted file mode 100644 index 06ccb5a999..0000000000 --- a/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: Encadenamiento opcional -slug: Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional -translation_of: Web/JavaScript/Reference/Operators/Optional_chaining ---- -<div>{{JSSidebar("Operators")}}</div> - -<p>El operador de <strong>encadenamiento opcional</strong> <strong><code>?.</code></strong> permite leer el valor de una propiedad ubicada dentro de una cadena de objetos conectados sin tener que validar expresamente que cada referencia en la cadena sea válida. <span class="seoSummary">El operador <code>?.</code> funciona de manera similar a el operador de encadenamiento <code>.</code>, excepto que en lugar de causar un error si una referencia es <a href="/en-US/docs/Glossary/nullish">casi-nula</a> ({{JSxRef("null")}} o {{JSxRef("undefined")}}), la expresión hace una evaluación de circuito corto con un valor de retorno de <code>undefined</code>.</span> Cuando se usa con llamadas a funciones, devuelve <code>undefined</code> si la función dada no existe.</p> - -<p>Esto da como resultado expresiones más cortas y simples cuando se accede a propiedades encadenadas dónde existe la posibilidad de que falte una referencia. También puede ser útil al explorar el contenido de un objeto cuando no hay una garantía conocida de qué propiedades se requieren.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> -<var>obj</var>?.[<var>expr</var>] -<em>arr</em>?.[<var>index</var>] -<var>func</var>?.(<var>args</var>) -</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>El operador de encadenamiento opcional proporciona una forma de simplificar el acceso a los valores a través de objetos conectados cuando es posible que una referencia o función sea <code>undefined</code> o <code>null</code>.</p> - -<p>Por ejemplo, considere un objeto <code>obj</code> que tiene una estructura anidada. Sin encadenamiento opcional, buscar una subpropiedad profundamente anidada requiere validar las referencias intermedias, como:</p> - -<pre class="brush: js">let nestedProp = obj.first && obj.first.second; -</pre> - -<p>Se confirma que el valor de <code>obj.first</code> no es <code>null</code> (y no es <code>undefined</code>) antes de acceder al valor de <code>obj.first.second</code>. Esto evita el error que ocurriría si simplemente accediera a <code>obj.first.second</code> directamente sin probar <code>obj.first</code>.</p> - -<p>Sin embargo, con el operador de encadenamiento opcional (<code>?.</code>), No tiene que probar explícitamente, ni realizar una evaluación de circuito corto basada en el estado de <code>obj.first</code> antes de intentar acceder a <code>obj.first.second</code>:</p> - -<pre class="brush: js">let nestedProp = obj.first?.second; -</pre> - -<p>Al usar el operador <code>?.</code> en lugar de solo el <code>.</code>, JavaScript sabe verificar implícitamente para asegurarse de que <code>obj.first</code> no es <code>null</code> o <code>undefined</code> antes de intentar acceder <code>obj.first.second</code>. Si <code>obj.first</code> es <code>null</code> o <code>undefined</code>, la expresión hace una evaluación de circuito corto automáticamente y retorna <code>undefined</code>.</p> - -<p>Esto es equivalente a lo siguiente, excepto que la variable temporal es de hecho no creada:</p> - -<pre class="brush: js">let temp = obj.first; -let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); -</pre> - -<h3 id="Encadenamiento_opcional_con_llamadas_a_funciones">Encadenamiento opcional con llamadas a funciones</h3> - -<p>Puede usar el encadenamiento opcional cuando intente llamar a un método que puede no existir. Esto puede ser útil, por ejemplo, cuando se usa una API en la que un método podría no estar disponible, ya sea debido a la antigüedad de la implementación o debido a una característica que no está disponible en el dispositivo del usuario.</p> - -<p>El uso de encadenamiento opcional con llamadas a funciones hace que la expresión regrese automáticamente <code>undefined</code> en lugar de lanzar una excepción si no se encuentra el método:</p> - -<pre class="brush: js">let result = someInterface.customMethod?.();</pre> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Si hay una propiedad con ese nombre y que no es una función, usar <code>?.</code> aún levantará una excepción {{JSxRef("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> -</div> - -<h4 id="Manejo_de_callbacks_opcionales_o_manejadores_de_eventos">Manejo de callbacks opcionales o manejadores de eventos</h4> - -<p>Si utiliza callbacks o métodos de recuperación de un objeto con<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring"> una asignación de desestructuración</a>, es posible que tenga valores inexistentes que no puede llamar como funciones a menos que haya probado su existencia. Usando <code>?.</code>, Puede evitar esta prueba adicional:</p> - -<pre class="brush: js">// Escrito a partir de ES2019 -function doSomething(onContent, onError) { - try { - // ... hacer algo con los datos - } - catch (err) { - if (onError) { // Probando si onError realmente existe - onError(err.message); - } - } -} -</pre> - -<pre class="brush: js">// Usando encadenamiento opcional con llamado de funciones -function doSomething(onContent, onError) { - try { - // ... hacer algo con los datos - } - catch (err) { - onError?.(err.message); // Sin excepción si onError esta undefined - } -} -</pre> - -<h3 id="Encadenamiento_opcional_con_expresiones">Encadenamiento opcional con expresiones</h3> - -<p>También puede usar el operador de encadenamiento opcional al acceder a propiedades con una expresión usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notación de corchetes</a>:</p> - -<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; -</pre> - -<h3 id="El_encadenamiento_opcional_no_es_válido_al_lado_izquierdo_de_una_asignación">El encadenamiento opcional no es válido al lado izquierdo de una asignación</h3> - -<pre class="brush: js"><code>let object = {}; -object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> - -<h3 id="Acceso_a_elementos_de_un_arreglo_con_encadenamiento_opcional">Acceso a elementos de un arreglo con encadenamiento opcional</h3> - -<pre class="brush: js">let arrayItem = arr?.[42];</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_básico">Ejemplo básico</h3> - -<p>Este ejemplo busca el valor de la propiedad <code>name</code> para el miembro <code>bar</code> en un mapa cuando no existe dicho miembro. El resultado es por lo tanto es <code>undefined</code>.</p> - -<pre class="brush: js">let myMap = new Map(); -myMap.set("foo", {name: "baz", desc: "inga"}); - -let nameBar = myMap.get("bar")?.name;</pre> - -<h3 id="Evaluación_de_circuito_corto">Evaluación de circuito corto</h3> - -<p>Cuando se usa el encadenamiento opcional con expresiones, si el operando izquierdo es <code>null</code> o <code>undefined</code>, la expresión no se evaluará. Por ejemplo:</p> - -<pre class="brush: js">let potentiallyNullObj = null; -let x = 0; -let prop = potentiallyNullObj?.[x++]; - -console.log(x); // 0 como x no se incrementó -</pre> - -<h3 id="Apilando_el_operador_de_encadenamiento_opcional">Apilando el operador de encadenamiento opcional</h3> - -<p>Con estructuras anidadas, es posible usar encadenamiento opcional varias veces:</p> - -<pre class="brush: js">let customer = { - name: "Carl", - details: { - age: 82, - location: "Paradise Falls" // "detailed address" es desconocida - } -}; -let customerCity = customer.details?.address?.city; - -// … esto también funciona con la función opcional de encadenamiento -let duration = vacations.trip?.getTime?.(); -</pre> - -<h3 id="Combinando_con_el_operador_de_fusión_nulo">Combinando con el operador de fusión nulo</h3> - -<p>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "operador de fusión nulo", '', 1)}} se puede usar después del encadenamiento opcional para generar un valor predeterminado cuando no se encontró ninguno:</p> - -<pre class="brush: js">let customer = { - name: "Carl", - details: { age: 82 } -}; -const customerCity = customer?.city ?? "Unknown city"; -console.log(customerCity); // Unknown city</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<div> - - -<p>{{Compat("javascript.operators.optional_chaining")}}</p> -</div> - -<h3 id="Progreso_de_implementación">Progreso de implementación</h3> - -<p>La siguiente tabla proporciona un estado de implementación diaria para esta característica, porque esta característica aún no ha alcanzado la estabilidad entre navegadores. Los datos se generan ejecutando las pruebas de características relevantes en <a href="https://github.com/tc39/test262">Test262</a>, el conjunto de pruebas estándar de JavaScript, en la compilación nocturna o la última versión del motor de JavaScript de cada navegador.</p> - -<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/function/index.html b/files/es/web/javascript/referencia/operadores/function/index.html deleted file mode 100644 index d5739239b2..0000000000 --- a/files/es/web/javascript/referencia/operadores/function/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: function -slug: Web/JavaScript/Referencia/Operadores/function -tags: - - Function - - JavaScript - - Operator - - Primary Expressions -translation_of: Web/JavaScript/Reference/Operators/function ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>El operador <code>function</code> define una función dentro de una expresión.</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="eval">function [<em>name</em>]([<em>param1</em>, <em>param2</em>, ..., <em>paramN</em>]) { - <em>statements</em> -} -</pre> - -<h2 id="Parameters" name="Parameters">Parámetros</h2> - -<dl> - <dt><code>name</code></dt> - <dd>El nombre de la función. Puede ser omitido, en cuyo caso la función es <em>anonymous</em>. El nombre sólo es local para el cuerpo de la función.</dd> -</dl> - -<dl> - <dt><code>paramN</code></dt> - <dd>El nombre de un argumento que será pasado a la función. Una función puede tener hasta 255 argumentos.</dd> -</dl> - -<dl> - <dt><code>statements</code></dt> - <dd>Las declaraciones que conforman el cuerpo de la función.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>La expresión de una función es muy similar y tiene casi la misma sintaxis que la declaración de una función (véase {{jsxref("Sentencias/function", "function")}} para más detalles). Véase <a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a> para ver más información sobre las diferencias entre declaraciones de funciones y expresiones de funciones.</p> - -<h2 id="Examples" name="Examples">Ejemplos</h2> - -<p>El siguiente ejemplo define una función sin nombre y se le asigna a la variable x. La función devuelve como resultado el cuadrado de su argumento:</p> - -<pre class="brush: js">var x = function(y) { - return y * y; -}; -</pre> - -<h3 id="Expresión_de_función_nombrada">Expresión de función nombrada</h3> - -<p>Si quiere referirse a la función actual dentro del cuerpo de la función, debe crear una expresión de función nombrada. Luego, este nombre será local solo para el cuerpo de la función (alcance). Esto también evita usar la propiedad no estándar {{jsxref("Funciones/arguments/callee", "arguments.callee")}}.</p> - -<pre class="brush: js">var math = { - 'factorial': function factorial(n) { - if (n <= 1) - return 1; - return n * factorial(n - 1); - } -}; -</pre> - -<h2 id="See_also" name="See_also">Consulte también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> - <li>{{jsxref("Function")}}</li> - <li>Sentencias {{jsxref("Sentencias/function", "function")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/function_star_/index.html b/files/es/web/javascript/referencia/operadores/function_star_/index.html deleted file mode 100644 index 9c38872b7e..0000000000 --- a/files/es/web/javascript/referencia/operadores/function_star_/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: expresión function* -slug: Web/JavaScript/Referencia/Operadores/function* -tags: - - ECMAScript 2015 - - Expresión Primaria - - Function - - Iterator - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/function* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La palabra clave <strong><code>function*</code></strong> puede ser utilizada para definir una función generadora en una expresión.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> - -<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si le gustaría contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un pull request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">function* [<em>nombre</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { - <em>sentencias</em> -}</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code>nombre</code></dt> - <dd>Nombre de la función. Puede ser omitido, en cuyo caso la funcipón es <em>anínima</em>. El nombre sólo es local al cuerpo de la función.</dd> - <dt><code>paramN</code></dt> - <dd>Nombre de un parámetro a ser pasado a la función. Una función puede tener hasta 255 argumentos.</dd> - <dt><code>sentencias</code></dt> - <dd>Sentencias que componen el cuerpo de la función.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>Una expresión <code>function*</code> es muy similar y tiene casi la misma sintaxis que una {{jsxref('Statements/function*', 'function* statement')}}. La principal diferencia entre una expresión <code>function*</code> y una sentencia <code>function*</code> es el <em>nombre de la función</em>, que en expresiones <code>function*</code> puede ser omitido para creaar funciones generadoras <em>anónimas</em>. Para más información vea también el capítulo acerca de <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a>.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<p>El siguiente ejemplo define una función generadora sin nombre y la asigna a <code>x</code>. La función produce el cuadrado de su argumento:</p> - -<pre class="brush: js">var x = function*(y) { - yield y * y; -}; -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#', 'function*')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición Inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#', 'function*')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si usted desea contribuir a esos datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> - -<p>{{Compat("javascript.operators.function_star")}}</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Statements/function*", "Sentencia function*")}}</li> - <li>Objeto {{jsxref("GeneratorFunction")}}</li> - <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">El protocolo iterable</a></li> - <li>{{jsxref("Operators/yield", "yield")}}</li> - <li>{{jsxref("Operators/yield*", "yield*")}}</li> - <li>Objeto {{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function", "Sentencia function")}}</li> - <li>{{jsxref("Operators/function", "Expresión function")}}</li> - <li>{{jsxref("Functions_and_function_scope", "Funciones y alcance de funciones")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/grouping/index.html b/files/es/web/javascript/referencia/operadores/grouping/index.html deleted file mode 100644 index ec78e8518f..0000000000 --- a/files/es/web/javascript/referencia/operadores/grouping/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Operador de agrupación -slug: Web/JavaScript/Referencia/Operadores/Grouping -tags: - - Expresiones primarias - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Grouping ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de agrupación <code>( )</code> controla la precedencia de las expresiones a evaluar.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"> ( )</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>El operador de agrupación consiste en un par de paréntesis alrededor de la expresión (o sub-expresión) que sobrescribe el comportamiento por defecto de la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, lo que causa que expresiones con menor precedencia puedan ser evaluadas antes que expresiones con una mayor precedencia.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<p>Sobrescribir la precedencia de operadores aritméticos por defecto para que se evalúe primero la adición y luego la multiplicación.</p> - -<pre class="brush:js">var a = 1; -var b = 2; -var c = 3; - -// precedencia por defecto -a + b * c // 7 -// es evaluada por defecto como: -a + (b * c) // 7 - -// ahora se sobrescribe la precedencia -// para que la adición se evalúe antes que la multiplicación -(a + b) * c // 9 - -// que es equivalente a: -a * c + b * c // 9 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Estándar</td> - <td>Definición inicial. Implementado en JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</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> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Temas_relacionados">Temas relacionados</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Precedencia de operadores</a></li> - <li>{{jsxref("Operators/delete", "delete")}}</li> - <li>{{jsxref("Operators/typeof", "typeof")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/in/index.html b/files/es/web/javascript/referencia/operadores/in/index.html deleted file mode 100644 index 051056a25f..0000000000 --- a/files/es/web/javascript/referencia/operadores/in/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: in -slug: Web/JavaScript/Referencia/Operadores/in -tags: - - JavaScript - - Operator - - Relational Operators -translation_of: Web/JavaScript/Reference/Operators/in ---- -<div>{{jsSidebar("Operators")}}</div> - -<div>El <strong>operador <code>in</code></strong> devuelve <code>true</code> si la propiedad especificada está en el objeto especificado o su prototipo.</div> - -<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> - -<pre><code><em>prop</em> in <em>object</em></code></pre> - -<h3 id="Parámetros" name="Parámetros">Parámetros</h3> - -<dl> - <dt><code>prop</code></dt> - <dd>Una cadena o expresión númerica que representa el nombre de una propiedad o el índice de un array (lo que no sea un símbolo se forzará a string).</dd> -</dl> - -<dl> - <dt><code>object</code></dt> - <dd>El objeto (o su cadena de prototipo) sobre el que comprobar si contiene la propiedad con el nombre especificado.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Los siguientes ejemplos muestran algunos de los usos del operador <code>in</code>.</p> - -<pre class="brush:js">// Arrays -var arboles = new Array("secoya", "pino", "cedro", "roble", "arce"); -0 in arboles // devuelve true -3 in arboles // devuelve true -6 in arboles // devuelve false -"pino" in arboles // devuelve false (debe especificar el número de índice, - // no el valor del índice) -"length" in arboles // devuelve true (length es una propiedad de Array) - -// Objetos predefinidos -"PI" in Math // devuelve true - -// Objetos personalizados -var micoche = {marca: "Honda", modelo: "Accord", año: 1998}; -"marca" in micoche // devuelve true -"modelo" in micoche // devuelve true -</pre> - -<p>Debe especificar un objeto en el lado derecho del operador <code>in</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code> , pero no puede especificar una cadena literal.</p> - -<pre class="brush:js">var color1 = new String("verde"); -"length" in color1 // devuelve true - -var color2 = "coral"; -"length" in color2 // genera un error (color2 no es un objeto String) -</pre> - -<h3 id="Using_in_with_deleted_or_undefined_properties" name="Using_in_with_deleted_or_undefined_properties">Usando <code>in</code> con propiedades eliminadas o no definidas</h3> - -<p>Si se elimina una propiedad con el operador {{jsxref("Operadores/delete", "delete")}}, el operador <code>in</code> devuelve <code>false</code> para esa propiedad.</p> - -<pre class="brush:js">var micoche= {marca: "Honda", modelo: "Accord", año: 1998}; -delete micoche.marca; -"marca" in micoche; // devuelve false - -var arboles = new Array("secoya", "pino", "cedro", "roble", "arce"); -delete arboles[3]; -3 in arboles; // devuelve false -</pre> - -<p>Si se cambia una propiedad a {{jsxref("Objetos_globales/undefined", "undefined")}} pero no se elimina, el operador <code>in</code> devuelve true para esa propiedad.</p> - -<pre class="brush:js">var micoche = {marca: "Honda", modelo: "Accord", año: 1998}; -micoche.marca = undefined; -"marca" in micoche; // devuelve true -</pre> - -<pre class="brush:js">var arboles = new Array("secayo", "pino", "cedro", "roble", "arce"); -arboles[3] = undefined; -3 in arboles; // devuelve true -</pre> - -<h3 id="Inherited_properties" name="Inherited_properties">Propiedades heredadas</h3> - -<p>El operador <code>in</code> devuelve <code>true</code> para propiedades en la cadena del prototipo.</p> - -<pre class="brush:js">"toString" in {}; // devuelve true -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.4.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("javascript.operators.in")}}</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> - <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> - <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> - <li>{{jsxref("Reflect.has()")}}</li> - <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/index.html b/files/es/web/javascript/referencia/operadores/index.html deleted file mode 100644 index dca4964faa..0000000000 --- a/files/es/web/javascript/referencia/operadores/index.html +++ /dev/null @@ -1,280 +0,0 @@ ---- -title: Expresiones y operadores -slug: Web/JavaScript/Referencia/Operadores -tags: - - Descripción - - JavaScript - - Operadores - - Operators - - Referencia -translation_of: Web/JavaScript/Reference/Operators ---- -<div>{{jsSidebar("Operators", "Operadores")}}</div> - -<p class="summary">Este capítulo documenta todos los operadores, expresiones y palabras clave del lenguaje JavaScript.</p> - -<h2 id="Expresiones_y_operadores_por_categoría">Expresiones y operadores por categoría</h2> - -<p>Para obtener una lista alfabética, consulta la barra lateral de la izquierda.</p> - -<h3 id="Expresiones_primarias">Expresiones primarias</h3> - -<p>Palabras clave básicas y expresiones generales en JavaScript.</p> - -<dl> - <dt>{{jsxref("Operators/this", "this")}}</dt> - <dd>La palabra clave <code>this</code> se refiere a una propiedad especial de un contexto de ejecución.</dd> - <dt>{{jsxref("Operators/function", "function")}}</dt> - <dd>La palabra clave <code>function</code> define una expresión de función.</dd> - <dt>{{jsxref("Operators/class", "class")}}</dt> - <dd>La palabra clave <code>class</code> define una expresión de clase.</dd> - <dt>{{jsxref("Operators/function", "function")}}</dt> - <dd>La palabra clave <code>function*</code> define una expresión de función generadora.</dd> - <dt>{{jsxref("Operators/yield", "yield")}}</dt> - <dd>Pausar y reanudar una función generadora.</dd> - <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> - <dd>Delegar a otra función generadora u objeto iterable.</dd> - <dt>{{jsxref("Operators/async_function", "async function")}}</dt> - <dd>La <code>async function</code> define una expresión de función asíncrona.</dd> - <dt>{{jsxref("Operators/await", "await")}}</dt> - <dd>Pausa y reanuda una función asíncrona y espera la resolución/rechazo de la promesa.</dd> - <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> - <dd>Iniciador de arreglo/sintaxis literal.</dd> - <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> - <dd>Iniciador de objeto/sintaxis literal.</dd> - <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>Sintaxis de expresión regular literal.</dd> - <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> - <dd>Operador de agrupación.</dd> -</dl> - -<h3 id="Expresiones_del_lado_izquierdo">Expresiones del lado izquierdo</h3> - -<p>Los valores de la izquierda son el destino de una asignación.</p> - -<dl> - <dt>{{jsxref("Operators/Property_accessors", "Propiedad accessors", "", 1)}}</dt> - <dd>Los operadores miembro proporcionan acceso a una propiedad o método de un objeto<br> - (<code>object.property</code> y <code>object["property"]</code>).</dd> - <dt>{{jsxref("Operators/new", "new")}}</dt> - <dd>El operador <code>new</code> crea una instancia auxiliado por un constructor.</dd> - <dt>{{jsxref("Operators/new%2Etarget", "new.target")}}</dt> - <dd>En los constructores, <code>new.target</code> se refiere al constructor que fue invocado por {{jsxref("Operators/new", "new")}}.</dd> - <dt>{{jsxref("Operators/super", "super")}}</dt> - <dd>La palabra clave <code>super</code> llama al constructor padre.</dd> - <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt> - <dd>La sintaxis de extensión permite expandir una expresión en lugares donde se esperan múltiples argumentos (para llamadas a funciones) o múltiples elementos (para arreglos literales).</dd> -</dl> - -<h3 id="Incremento_y_decremento">Incremento y decremento</h3> - -<p>Operadores de incremento sufijo/prefijo y decremento sufijo/prefijo.</p> - -<dl> - <dt>{{jsxref("Operators/Increment", "A++")}}</dt> - <dd>Operador de incremento sufijo.</dd> - <dt>{{jsxref("Operators/Decrement", "A--")}}</dt> - <dd>Operador de incremento sufijo.</dd> - <dt>{{jsxref("Operators/Increment", "A++")}}</dt> - <dd>Operador de incremento prefijo.</dd> - <dt>{{jsxref("Operators/Decrement", "--A")}}</dt> - <dd>Operador de decremento prefijo.</dd> -</dl> - -<h3 id="Operadores_unarios">Operadores unarios</h3> - -<p>Una operación unaria es una operación con un solo operando.</p> - -<dl> - <dt>{{jsxref("Operators/delete", "delete")}}</dt> - <dd>El operador <code>delete</code> elimina una propiedad de un objeto.</dd> - <dt>{{jsxref("Operators/void", "void")}}</dt> - <dd>El operador <code>void</code> descarta el valor de retorno de una expresión.</dd> - <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> - <dd>El operador <code>typeof</code> determina el tipo de un objeto dado.</dd> - <dt>{{jsxref("Operators/Unary_plus", "+")}}</dt> - <dd>El operador unario <code>más</code> convierte su operando al tipo <code>Number</code>.</dd> - <dt>{{jsxref("Operators/Unary_negation", "-")}}</dt> - <dd>El operador unario de negación convierte su operando al tipo <code>Number</code> y luego lo niega.</dd> - <dt>{{jsxref("Operators/Bitwise_NOT", "~")}}</dt> - <dd>Operador <code>NOT</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Logical_NOT", "!")}}</dt> - <dd>Operador <code>NOT</code> lógico.</dd> -</dl> - -<h3 id="Operadores_aritméticos">Operadores aritméticos</h3> - -<p>Los operadores aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y devuelven un solo valor numérico.</p> - -<dl> - <dt>{{jsxref("Operators/Addition", "+")}}</dt> - <dd>Operador de adición o suma.</dd> - <dt>{{jsxref("Operators/Subtraction", "-")}}</dt> - <dd>Operador de sustracción o resta.</dd> - <dt>{{jsxref("Operators/Division", "/")}}</dt> - <dd>Operador de división.</dd> - <dt>{{jsxref("Operators/Multiplication", "*")}}</dt> - <dd>Operador de multiplicación.</dd> - <dt>{{jsxref("Operators/Remainder", "%")}}</dt> - <dd>Operador de residuo.</dd> - <dt>{{jsxref("Operators/Exponentiation", "**")}}</dt> - <dd>Operador de exponenciación.</dd> -</dl> - -<h3 id="Operadores_relacionales">Operadores relacionales</h3> - -<p>Un operador de comparación compara sus operandos y devuelve un valor <code>Boolean</code> basado en si la comparación es verdadera o no.</p> - -<dl> - <dt>{{jsxref("Operators/in", "in")}}</dt> - <dd>El operador <code>in</code> determina si un objeto tiene una determinada propiedad.</dd> - <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> - <dd>El operador <code>instanceof</code> determina si un objeto es una instancia de otro objeto.</dd> - <dt>{{jsxref("Operators/Less_than", "<")}}</dt> - <dd>Operador menor que.</dd> - <dt>{{jsxref("Operators/Greater_than", ">")}}</dt> - <dd>Operador mayor que.</dd> - <dt>{{jsxref("Operators/Less_than_or_equal", "<=")}}</dt> - <dd>Operador menor o igual a.</dd> - <dt>{{jsxref("Operators/Greater_than_or_equal", ">=")}}</dt> - <dd>Operador mayor o igual a.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Nota: =></strong> no es un operador, sino la notación para {{jsxref("Functions/Arrow_functions", "Funciones de flecha")}}.</p> -</div> - -<h3 id="Operadores_de_igualdad">Operadores de igualdad</h3> - -<p>El resultado de evaluar un operador de igualdad siempre es de tipo <code>Boolean</code> basado en si la comparación es verdadera.</p> - -<dl> - <dt>{{jsxref("Operators/Equality", "==")}}</dt> - <dd>Operador de igualdad.</dd> - <dt>{{jsxref("Operators/Inequality", "!=")}}</dt> - <dd>Operador de desigualdad.</dd> - <dt>{{jsxref("Operators/Strict_equality", "===")}}</dt> - <dd>Operador de igualdad estricta.</dd> - <dt>{{jsxref("Operators/Strict_inequality", "!==")}}</dt> - <dd>Operador de desigualdad estricta.</dd> -</dl> - -<h3 id="Operadores_de_desplazamiento_de_bits">Operadores de desplazamiento de bits</h3> - -<p>Operaciones para cambiar todos los bits del operando.</p> - -<dl> - <dt>{{jsxref("Operators/Left_shift", "<<")}}</dt> - <dd>Operador de desplazamiento bit a bit a la izquierda.</dd> - <dt>{{jsxref("Operators/Right_shift", ">>")}}</dt> - <dd>Operador de desplazamiento bit a bit a la derecha.</dd> - <dt>{{jsxref("Operators/Unsigned_right_shift", ">>>")}}</dt> - <dd>Operador de desplazamiento bit a bit a la derecha sin signo.</dd> -</dl> - -<h3 id="Operadores_binarios_bit_a_bit">Operadores binarios bit a bit</h3> - -<p>Los operadores bit a bit tratan a sus operandos como un conjunto de 32 bits (ceros y unos) y devuelven valores numéricos estándar de JavaScript.</p> - -<dl> - <dt>{{jsxref("Operators/Bitwise_AND", "&")}}</dt> - <dd><code>AND</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Bitwise_OR", "|")}}</dt> - <dd><code>OR</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Bitwise_XOR", "^")}}</dt> - <dd><code>XOR</code> bit a bit.</dd> -</dl> - -<h3 id="Operadores_lógicos_binarios">Operadores lógicos binarios</h3> - -<p>Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un valor booleano.</p> - -<dl> - <dt>{{jsxref("Operators/Logical_AND", "&&")}}</dt> - <dd><code>AND</code> lógico.</dd> - <dt>{{jsxref("Operators/Logical_OR", "||")}}</dt> - <dd><code>OR</code> lógico.</dd> -</dl> - -<h3 id="Operador_condicional_ternario">Operador condicional (ternario)</h3> - -<dl> - <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> - <dd> - <p>El operador condicional devuelve uno de dos valores según el valor lógico de la condición.</p> - </dd> -</dl> - -<h3 id="Operadores_de_asignación">Operadores de asignación</h3> - -<p>Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho.</p> - -<dl> - <dt>{{jsxref("Operators/Assignment", "=")}}</dt> - <dd>Operador de asignación.</dd> - <dt>{{jsxref("Operators/Multiplication_assignment", "*=")}}</dt> - <dd>Asignación de multiplicación.</dd> - <dt>{{jsxref("Operators/Division_assignment", "/=")}}</dt> - <dd>Asignación de división.</dd> - <dt>{{jsxref("Operators/Remainder_assignment", "%=")}}</dt> - <dd>Asignación de residuo.</dd> - <dt>{{jsxref("Operators/Addition_assignment", "+=")}}</dt> - <dd>Asignación de suma.</dd> - <dt>{{jsxref("Operators/Subtraction_assignment", "-=")}}</dt> - <dd>Asignación de sustracción</dd> - <dt>{{jsxref("Operators/Left_shift_assignment", "<<=")}}</dt> - <dd>Asignación de desplazamiento a la izquierda.</dd> - <dt>{{jsxref("Operators/Right_shift_assignment", ">>=")}}</dt> - <dd>Asignación de desplazamiento a la derecha.</dd> - <dt>{{jsxref("Operators/Unsigned_right_shift_assignment", ">>>=")}}</dt> - <dd>Asignación de desplazamiento a la derecha sin signo.</dd> - <dt>{{jsxref("Operators/Bitwise_AND_assignment", "&=")}}</dt> - <dd>Asignación de <code>AND</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Bitwise_XOR_assignment", "^=")}}</dt> - <dd>Asignación de <code>XOR</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Bitwise_OR_assignment", "|=")}}</dt> - <dd>Asignación de <code>OR</code> bit a bit.</dd> - <dt>{{jsxref("Operators/Logical_AND_assignment", "&&=")}}</dt> - <dd>Asignación de <code>AND</code> lógico.</dd> - <dt>{{jsxref("Operators/Logical_OR_assignment", "||=")}}</dt> - <dd>Asignación de <code>OR</code> lógico.</dd> - <dt>{{jsxref("Operators/Logical_nullish_assignment", "??=")}}</dt> - <dd>Asignación de anulación lógica.</dd> - <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> - <dd> - <p>La desestructuración te permite asignar las propiedades de un arreglo u objeto a variables utilizando una sintaxis que se parece a los arreglos u objetos literales.</p> - </dd> -</dl> - -<h3 id="Operador_coma">Operador coma</h3> - -<dl> - <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> - <dd>El operador <code>coma</code> permite evaluar múltiples expresiones en una sola declaración y devuelve el resultado de la última expresión.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> - -<p>{{Compat("javascript.operators")}}</p> - -<h2 id="Ve_también">Ve también</h2> - -<ul> - <li>{{jsxref("Operators/Operator_Precedence", "Operator de precedencia")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/instanceof/index.html b/files/es/web/javascript/referencia/operadores/instanceof/index.html deleted file mode 100644 index 3b9a45162d..0000000000 --- a/files/es/web/javascript/referencia/operadores/instanceof/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: instanceof -slug: Web/JavaScript/Referencia/Operadores/instanceof -tags: - - JavaScript - - Operator - - Relational Operators -translation_of: Web/JavaScript/Reference/Operators/instanceof ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El operador <strong><code>instanceof</code></strong> verifica si un objeto en su cadena de prototipos contiene la propiedad <code>prototype</code> de un constructor.</p> - -<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>objeto</em> instanceof <em>constructor</em></pre> - -<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> - -<dl> - <dt><code>objeto</code></dt> - <dd>Objeto a verificar.</dd> -</dl> - -<dl> - <dt><code>constructor</code></dt> - <dd>Función contra la que se hará la verificación.</dd> -</dl> - -<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> - -<p>Utilice <code>instanceof</code> cuando necesite confirmar el tipo de un objeto en tiempo de ejecución. Por ejemplo, cuando controle excepciones, puede recurrir a diferentes códigos de manipulación de excepciones dependiendo del tipo de excepción tomada.</p> - -<p>Debe especificar un objeto en el lado derecho del operador <code>instanceof</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code>, pero no puede especificar un literal de cadena.</p> - -<pre>color1=new String("verde") -color1 instanceof String // devuelve verdadero (true) -color2="coral" -color2 instanceof String // devuelve falso (color2 no es un objeto String) -</pre> - -<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> - -<p>También vea los ejemplos de {{jsxref("Sentencias/throw", "throw")}}.</p> - -<h4 id="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date" name="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date">Ejemplo: Determinando si <code>elDia</code> es un objeto <code>Date</code></h4> - -<p>El siguiente código utiliza <code>instanceof</code> para determinar si <code>elDia</code> es un objeto <code>Date</code>. Debido a que <code>elDia</code> es un objeto <code>Date</code>, las instrucciones de la sentencia if se ejecutan.</p> - -<pre>elDia = new Date(1995, 12, 17) -if (elDia instanceof Date) { - // instrucciones a ejecutar -} -</pre> - -<h4 id="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object" name="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object">Ejemplo: Demostrando que <code>String</code> y <code>Date</code> son del tipo <code>Object</code></h4> - -<p>El siguiente código utiliza <code>instanceof</code> para demostrar que los objetos <code>String</code> y <code>Date</code> son también del tipo <code>Object</code> (éstos se derivan de <code>Object</code>).</p> - -<pre>miCadena = new String() -miFecha = new Date() - -miCadena instanceof String // devuelve true -miCadena instanceof Object // devuelve true -miCadena instanceof Date // devuelve false - -miFecha instanceof Date // devuelve true -miFecha instanceof Object // devuelve true -miFecha instanceof String // devuelve false -</pre> - -<h4 id="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object" name="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object">Ejemplo: Demostrando que <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code></h4> - -<p>El siguiente código crea un objeto del tipo <code>Coche</code> y una instancia de ese tipo de objeto, <code>miCoche</code>. El operador <code>instanceof</code> demuestra que el objeto <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code>.</p> - -<pre>function Coche(fabricante, modelo, ejercicio) { - this.fabricante = fabricante - this.modelo = modelo - this.ejercicio= ejercicio -} -miCoche = new Coche("Honda", "Accord", 1998) -a = miCoche instanceof Coche // devuelve verdadero (true) -b = miCoche instanceof Object // devuelve verdadero (true) -</pre> - -<div class="noinclude"> </div> diff --git a/files/es/web/javascript/referencia/operadores/miembros/index.html b/files/es/web/javascript/referencia/operadores/miembros/index.html deleted file mode 100644 index 565a8b7f92..0000000000 --- a/files/es/web/javascript/referencia/operadores/miembros/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Miembros -slug: Web/JavaScript/Referencia/Operadores/Miembros -tags: - - JavaScript - - Operator -translation_of: Web/JavaScript/Reference/Operators/Property_Accessors ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>Los operadores de miembros proporcionan acceso a las propiedades y métodos de un objeto.</p> - -<p>Un objeto es en realidad un<em> arreglo asociativo</em> (por ejemplo<em> map</em> ,<em>dictionary</em> ,<em>hash</em> ,<em>lookup table</em> ). Las <em>claves</em> en este arreglo son los nombres de las propiedades y los métodos (propiedades que hacen referencia a funciones). Hay dos modos de acceder a estas propiedades: notación por punto y notación por corchete (es decir, operador de subscripción).</p> - -<p>Nota: La especificación <a href="/es/docs/Glossary/ECMAScript">ECMAScript</a> etiqueta estos operadores como "property accessors" en vez de "operadores de miembro" (member operators).</p> - -<h3 id="Notaci.C3.B3n_por_punto" name="Notaci.C3.B3n_por_punto">Notación por punto</h3> - -<pre class="brush: js">get = objeto.propiedad; -objeto.propiedad = set; -</pre> - -<p><code>propiedad</code> debe ser un identificador válido de JavaScript, esto es, una secuencia alfanumérica de caracteres, incluyendo también el guión bajo ("<code>_</code>") y el signo dolar ("<code>$</code>"), que no puede comenzar por un número. Por ejemplo, <code>objeto.$1</code> es válido, mientras que <code>objeto.1</code> no lo es.</p> - -<p>Ejemplo:</p> - -<pre class="brush: js">document.createElement('pre'); -</pre> - -<p>Aquí, el método llamado "createElement" se recupera de <code>document</code> y se le llama.</p> - -<h3 id="Notaci.C3.B3n_por_corchetes" name="Notaci.C3.B3n_por_corchetes">Notación por corchetes</h3> - -<pre class="brush: js">get = objeto[nombre_propiedad]; -objeto[nombre_propiedad] = set; -</pre> - -<p><code>nombre_propiedad</code> es una cadena. La cadena no tiene que ser un identificador válido; puede tener cualquier valor, por ejemplo "1foo", "!bar!", o incluso " " (un espacio).</p> - -<p>Ejemplo:</p> - -<pre class="brush: js">document['createElement']('pre'); -</pre> - -<p>Esto hace exactamente lo mismo que el ejemplo anterior.</p> - -<h3 id="Nombres_de_propiedades" name="Nombres_de_propiedades">Nombres de propiedades</h3> - -<p>Los nombres de propiedades deben ser cadenas. Esto significa que no pueden usarse objetos distintos a cadenas como claves en un objeto. Cualquier objeto que no sea una cadena, incluyendo números, se convierte al tipo cadena a través de su método {{jsxref("Object.toString")}}.</p> - -<p>Ejemplos:</p> - -<pre class="brush: js">var objeto = {}; -objeto['1'] = 'valor'; -alert(objeto[1]); -</pre> - -<p>Ésto tendrá como resultado "valor", ya que 1 se convertirá por tipo a '1'.</p> - -<pre class="brush: js">var foo = {propiedad_unica: 1}, bar = {propiedad_unica: 2}, objeto = {}; -objeto[foo] = 'valor'; -alert(objeto[bar]); -</pre> - -<p>Ésto también tiene como resultado "valor", ya que tanto foo como bar se convierten a la misma cadena. En el motor de JavaScript <a href="/es/docs/Mozilla/SpiderMonkey">SpiderMonkey</a>, esta cadena sería "{{ mediawiki.external('objeto Object') }}".</p> - -<h3 id="Enlace_a_m.C3.A9todos" name="Enlace_a_m.C3.A9todos">Enlace a métodos</h3> - -<p>Un método no está enlazado al objeto del que es método. Específicamente, <code>this</code> no está establecido en un método, es decir, <code>this</code> no se refiere necesariamente a un objeto conteniendo el método. <code>this</code>, en cambio, se "pasa" mediante la llamada de función.</p> - -<p>Vea <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this#Funciones_enlazadas">enlace a métodos</a>.</p> - -<h3 id="Nota_sobre_eval" name="Nota_sobre_eval">Nota sobre <code>eval</code></h3> - -<p>Los principiantes en JavaScript a menudo tienen el error de usar {{jsxref("eval")}} cuando la notación por corchetes puede usarse a cambio. Por ejemplo, la siguiente sintaxis se ve a menudo en muchos scripts.</p> - -<pre class="brush: js">x = eval('document.nombre_formulario.' + cadenaControlFormulario + '.value'); -</pre> - -<p><code>eval</code> es lenta y se debería evitar en la medida de lo posible. Es mejor usar la notación por corchetes a cambio:</p> - -<pre class="brush: js">x = document.nombre_formulario[cadenaControlFormulario].value; -</pre> diff --git a/files/es/web/javascript/referencia/operadores/new.target/index.html b/files/es/web/javascript/referencia/operadores/new.target/index.html deleted file mode 100644 index 0faa0f0878..0000000000 --- a/files/es/web/javascript/referencia/operadores/new.target/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: new.target -slug: Web/JavaScript/Referencia/Operadores/new.target -tags: - - Clases - - ECMAScript6 - - JavaScript - - Referencia -translation_of: Web/JavaScript/Reference/Operators/new.target ---- -<div>{{JSSidebar("Operators")}}</div> - -<p>La propiedad<strong> <code>new.target</code></strong> te permite detectar si una función o constructor fue llamado usando el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>. En constructores y funciones instanciadas con el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>, <code>new.target</code> devuelve una referencia al constructor o función. En llamadas a funciones normales, <code>new.target</code> es {{jsxref("undefined")}}.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">new.target</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>La sintaxis <code>new.target</code> consiste en el keyword <code>"new</code>", un punto, y el nombre de propiedad <code>"target"</code>. Normalmente "<code>new."</code> sirve como contexto para el acceso a la propiedad, pero aquí, <code>"new."</code> no es realmente un objeto. En llamadas a constructores, sin embargo, <code>new.target</code> hace referencia al constructor invocado por new por lo que "<code>new.</code>" se convierte en un contexto virtual.</p> - -<p>La propiedad <code>new.target</code> es una meta propiedad que está disponible para todas las funciones. En <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a>, <code>new.target</code> se refiere al <code>new.target</code> de la función que la contiene.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="new.target_en_llamadas_a_funciones">new.target en llamadas a funciones</h3> - -<p>En llamadas a funciones normales (en contraposición a llamadas a constructores), <code>new.target</code> es {{jsxref("undefined")}}. Esto te permite detectar si la función fue llamada con <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a> como constructor.</p> - -<pre class="brush: js">function Foo() { - if (!new.target) throw 'Foo() debe ser llamado con new'; - console.log('Foo instanciado con new'); -} - -Foo(); // Lanza "Foo() debe ser llamado con new" -new Foo(); // escribe en el log "Foo instanciado con new" -</pre> - -<h3 id="new.target_en_constructores">new.target en constructores</h3> - -<p>En constructores de clase, <code>new.target</code> hace referencia al constructor que fue directamente invocado por <code>new</code>. Este también es el caso si el constructor está en una clase padre y fue delegado desdes el constructor hijo.</p> - -<pre class="brush: js">class A { - constructor() { - console.log(new.target.name); - } -} - -class B extends A { constructor() { super(); } } - -var a = new A(); // escribe en el log "A" -var b = new B(); // escribe en el log "B" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<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>{{CompatChrome(46.0)}}</td> - <td>{{CompatGeckoDesktop(41)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(46.0)}}</td> - <td>{{CompatGeckoMobile(41)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(46.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones">Funciones</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li> - <li><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a></code></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/new/index.html b/files/es/web/javascript/referencia/operadores/new/index.html deleted file mode 100644 index 4635b12402..0000000000 --- a/files/es/web/javascript/referencia/operadores/new/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Operador new -slug: Web/JavaScript/Referencia/Operadores/new -tags: - - Expresiones del lado izquierdo - - JavaScript - - Left-hand-side expressions - - Operador - - Operator - - Referencia -translation_of: Web/JavaScript/Reference/Operators/new ---- -<div>{{jsSidebar("Operators", "Operadores")}}</div> - -<p><span class="seoSummary">El <strong>operador <code>new</code></strong> permite a los desarrolladores crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados que tiene un función constructora.</span></p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate">new <var>constructor</var>[([<var>arguments</var>])]</pre> - -<h3 id="Parámetros">Parámetros</h3> - -<dl> - <dt><code><var>constructor</var></code></dt> - <dd>Una clase o función que especifica el tipo de instancia del objeto.</dd> -</dl> - -<dl> - <dt><code><var>arguments</var></code></dt> - <dd>Una lista de valores con los que se llamará al <code><var>constructor</var></code>.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>La palabra clave <strong><code>new</code></strong> hace lo siguiente:</p> - -<ol> - <li>Crea un objeto JavaScript simple y en blanco;</li> - <li>Vincula (establece el constructor de) este objeto a otro objeto;</li> - <li>Pasa el objeto recién creado del <em>Paso 1</em> como el contexto <code>this</code>;</li> - <li>Devuelve <code>this</code> si la función no devuelve un objeto.</li> -</ol> - -<p>La creación de un objeto definido por el usuario requiere dos pasos:</p> - -<ol> - <li>Defina el tipo de objeto escribiendo una función.</li> - <li>Crea una instancia del objeto con <code>new</code>.</li> -</ol> - -<p>Para definir un tipo de objeto, crea una función para el tipo de objeto que especifique su nombre y propiedades. Un objeto puede tener una propiedad que en sí misma es otro objeto. Ve los siguientes ejemplos.</p> - -<p>Cuando se ejecuta el código <code>new <em>Foo</em>(...)</code>, sucede lo siguiente:</p> - -<ol> - <li>Se crea un nuevo objeto, heredado de <code><em>Foo</em>.prototype</code>.</li> - <li>La función constructora <code><em>Foo</em></code> se llama con los argumentos especificados y con {{JSxRef("Operators/this", "this")}} vinculado al objeto recién creado. <code>new <em>Foo</em></code> es equivalente a <code>new <em>Foo</em>()</code>, es decir, si no se especifica una lista de argumentos, <code><em>Foo</em></code> se llama sin argumentos.</li> - <li>El objeto (no nulo, <code>false</code>, 3.1415 u otros tipos primitivos) devuelto por la función constructora se convierte en el resultado de toda la expresión <code>new</code>. Si la función constructora no devuelve explícitamente un objeto, en su lugar se utiliza el objeto creado en el paso 1. (Normalmente, los constructores no devuelven un valor, pero pueden elegir hacerlo si quieren redefinir el proceso normal de creación de objetos).</li> -</ol> - -<p>Siempre puedes agregar una propiedad a un objeto definido previamente. Por ejemplo, la instrucción <code>car1.color = "black"</code> agrega una propiedad <code>color</code> a <code>car1</code> y le asigna un valor de "<code>black</code>". Sin embargo, esto no afecta a ningún otro objeto. Para agregar la nueva propiedad a todos los objetos del mismo tipo, debes agregar la propiedad a la definición del tipo de objeto <code>Car</code>.</p> - -<p>Puedes agregar una propiedad compartida a un tipo de objeto definido previamente mediante la propiedad {{JSxRef("Global_Objects/Function/prototype", "Function.prototype")}}. Esto define una propiedad que comparten todos los objetos creados con esa función, en lugar de solo una instancia del tipo de objeto. El siguiente código agrega una propiedad de color con el valor <code>"color original"</code> a todos los objetos de tipo <code>Car</code>, y luego redefine ese valor con la cadena "<code>black</code>" solo en la instancia <code>car1</code> del objeto. Para obtener más información, consulta {{JSxRef("Global_Objects/Function/prototype", "prototype")}}.</p> - -<pre class="brush: js notranslate">function Car() {} -car1 = new Car(); -car2 = new Car(); - -console.log(car1.color); // undefined - -Car.prototype.color = 'color original'; -console.log(car1.color); // 'color original' - -car1.color = 'black'; -console.log(car1.color); // 'black' - -console.log(Object.getPrototypeOf(car1).color); // 'color original' -console.log(Object.getPrototypeOf(car2).color); // 'color original' -console.log(car1.color); // 'black' -console.log(car2.color); // 'color original' -</pre> - -<div class="note"> -<p>Si no escribiste el operador <code>new</code>, <strong>la función <code>constructor</code> se invocará como cualquier función normal</strong>, <em>sin crear un objeto.</em> En este caso, el valor de <code>this</code> también es diferente.</p> -</div> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Tipo_de_objeto_e_instancia_de_objeto">Tipo de objeto e instancia de objeto</h3> - -<p>Supongamos que deseas crear un tipo de objeto para <code>cars</code>. Quieres que este tipo de objeto se llame <code>Car</code>, y quieres que tenga propiedades para marca, modelo y año (<code>make</code>, <code>model</code> y <code>year</code> en inglés respectivamente). Para ello, podrías escribir la siguiente función:</p> - -<pre class="brush: js notranslate">function Car(make, model, year) { - this.make = make; - this.model = model; - this.year = year; -} -</pre> - -<p>Ahora puedes crear un objeto llamado <code>myCar</code> de la siguiente manera:</p> - -<pre class="brush: js notranslate">var myCar = new Car('Eagle', 'Talon TSi', 1993); -</pre> - -<p>Esta declaración crea <code>myCar</code> y le asigna los valores especificados para sus propiedades. Entonces el valor de <code>myCar.make</code> es la cadena "Eagle", <code>myCar.year</code> es el entero 1993, y así sucesivamente.</p> - -<p>Puedes crear cualquier número de objetos <code>car</code> mediante llamadas a <code>new</code>. Por ejemplo:</p> - -<pre class="brush: js notranslate">var kensCar = new Car('Nissan', '300ZX', 1992); -</pre> - -<h3 id="Propiedad_del_objeto_que_en_sí_mismo_es_otro_objeto">Propiedad del objeto que en sí mismo es otro objeto</h3> - -<p>Supongamos que defines un objeto llamado <code>Person</code> de la siguiente manera:</p> - -<pre class="brush: js notranslate">function Person(name, age, sex) { - this.name = name; - this.age = age; - this.sex = sex; -} -</pre> - -<p>Y luego creas una instancia de dos nuevos objetos <code>Person</code> de la siguiente manera:</p> - -<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M'); -var ken = new Person('Ken Jones', 39, 'M'); -</pre> - -<p>Luego, puedes reescribir la definición de <code>Car</code> para incluir una propiedad para <code>owner</code> (propietario en español) que tome un objeto <code>Person</code>, de la siguiente manera:</p> - -<pre class="brush: js notranslate">function Car(make, model, year, owner) { - this.make = make; - this.model = model; - this.year = year; - this.owner = owner; -} -</pre> - -<p>Para crear instancias de los nuevos objetos, utiliza lo siguiente:</p> - -<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); -var car2 = new Car('Nissan', '300ZX', 1992, ken); -</pre> - -<p>En lugar de pasar una cadena literal o un valor entero al crear los nuevos objetos, las declaraciones anteriores pasan los objetos <code>rand</code> y <code>ken</code> como parámetros para los propietarios. Para conocer el nombre del propietario de <code>car2</code>, puedes acceder a la siguiente propiedad:</p> - -<pre class="brush: js notranslate">car2.owner.name -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-new-operator', 'El operador new')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> - -<p>{{Compat("javascript.operators.new")}}</p> - -<h2 id="Ve_también">Ve también</h2> - -<ul> - <li>{{JSxRef("Function", "Funciones")}}</li> - <li>{{jsxref("Reflect.construct()")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/operador_coma/index.html b/files/es/web/javascript/referencia/operadores/operador_coma/index.html deleted file mode 100644 index a62701b3e1..0000000000 --- a/files/es/web/javascript/referencia/operadores/operador_coma/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Operador Coma -slug: Web/JavaScript/Referencia/Operadores/operador_coma -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador coma evalua cada uno de sus operandos (de izquierda a derecha) y retorna el valor del último operando.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> - -<h2 id="Parámetros">Parámetros</h2> - -<dl> - <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> - <dd>Cualquier expresión.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>Puede usar el operador coma cuando deseé mútiples expresiones en una localización que requiere una sola expresión. El uso más común de este operador es proveer múltiples parámetros en un búcle for</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Si a es un array de dos dimensiones con 10 elementos en un lado, el siguiente código usa el operador coma para incrementar dos variables a la vez. Note que la coma en la sentencia var <strong>no </strong>es el operador coma, porque no existe adentro de una expresión.Más bien, es un carácter especial en sentencias var para combinar a múltiples de ellas en una sola. Sin embargo, esa coma se comporta casi igual que el operador coma. El código imprime los valores de los elementos diagonales en el array:</p> - -<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) - document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);</pre> - -<h3 id="Procesar_y_luego_retornar">Procesar y luego retornar:</h3> - -<p>Otro ejemplo de lo que se puede hacer con el operador coma es procesar antes de retornar. Como se mencionó, solo el último elemento será retornado pero todos los otros también van a ser evaluados. Así, se puede hacer:</p> - -<pre class="brush: js">function myFunc () { - var x = 0; - - return (x += 1, x); // the same as return ++x; -}</pre> - -<h2 id="Específicaciones">Específicaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<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>3.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</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/for">for loop</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html deleted file mode 100644 index 4c9cb860a9..0000000000 --- a/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Operadores lógicos -slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operadores_lógicos")}}</div> - -<p>Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores && y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>Los operadores lógicos se describen en la tabla siguiente:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td> - <p>Regresa <code>expr1 </code>si tal puede convertirse a false; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.</p> - </td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td> - <p>Regresa<code> expr1</code> si tal puede convertirse a true; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".</p> - </td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td><code>!<em>expr</em></code></td> - <td> - <p>Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.</p> - </td> - </tr> - </tbody> -</table> - -<p>Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.</p> - -<p>A pesar de que los operadores && y || pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.</p> - -<h3 id="Evaluación_contra_corto_circuitos">Evaluación contra "corto circuitos"</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:</p> - -<ul> - <li><code>false && (<em>cualquier valor)</em></code> evalúa a "false".</li> - <li><code>true || (<em>cualquier valor)</em></code> evalúa a "true".</li> -</ul> - -<p>Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).</p> - -<p>Por ejemplo, las siguientes dos expresiones son equivalentes.</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Sin embargo, las siguientes expresiones no son equivalentes debido a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).</p> - -<pre class="brush: js">false && true || true // regresa true -false && (true || true) // regresa false</pre> - -<h3 id="AND_()_lógico"><a name="Logical_AND">AND (<code>&&</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador && (AND lógico).</p> - -<pre class="brush: js">a1 = true && true // t && t regresa true -a2 = true && false // t && f regresa false -a3 = false && true // f && t regresa false -a4 = false && (3 == 4) // f && f regresa false -a5 = "Cat" && "Dog" // t && t regresa "Dog" -a6 = false && "Cat" // f && t regresa false -a7 = "Cat" && false // t && f regresa false -</pre> - -<h3 id="OR_()_lógico"><a name="Logical_OR">OR (<code>||</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>||</code> (OR lógico).</p> - -<pre class="brush: js">o1 = true || true // t || t regresa true -o2 = false || true // f || t regresa true -o3 = true || false // t || f regresa true -o4 = false || (3 == 4) // f || f regresa false -o5 = "Cat" || "Dog" // t || t regresa "Cat" -o6 = false || "Cat" // f || t regresa "Cat" -o7 = "Cat" || false // t || f regresa "Cat" -</pre> - -<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>!</code> (NOT lógico).</p> - -<pre class="brush: js">n1 = !true // !t regresa false -n2 = !false // !f regresa true -n3 = !"Cat" // !t regresa false -</pre> - -<h3 id="Reglas_de_conversión">Reglas de conversión</h3> - -<h4 id="Convertir_de_AND_a_OR">Convertir de AND a OR</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Convertir_de_OR_a_AND">Convertir de OR a AND</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Convertir_entre_operadores_NOT">Convertir entre operadores NOT</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="Eliminando_paréntesis_anidados">Eliminando paréntesis anidados</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.</p> - -<h4 id="Eliminando_operadores_AND_anidados">Eliminando operadores AND anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Eliminando_operadores_OR_anidados">Eliminando operadores OR anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</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/Operators/Bitwise_Operators">Operaciones binarias</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html b/files/es/web/javascript/referencia/operadores/operator_precedence/index.html deleted file mode 100644 index 2ff0464afd..0000000000 --- a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: Precedencia de operadores -slug: Web/JavaScript/Referencia/Operadores/Operator_Precedence -tags: - - JavaScript - - Operator - - operator details - - operator precedence -translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Summary" name="Summary">Sumario</h2> - -<p>La precedencia de operadores determina el orden en el cual los operadores son evaluados. Los operadores con mayor precedencia son evaluados primero.</p> - -<p>Ejemplo:</p> - -<pre class="brush: js">3 + 4 * 5 // retorna 23 -</pre> - -<p>El operador de multiplicación ("*") tiene una precedencia mas alta que el operador de suma ("+") y por eso sera evaluado primero.</p> - -<h2 id="Associativity" name="Associativity">Asociatividad</h2> - -<p>La asociatividad determina el orden en el cual los operadores con el mismo nivel de precedencia son procesados. Por ejemplo:</p> - -<pre class="brush: js">a OP b OP c -</pre> - -<p>La asociatividad de izquierda a derecha significa que esa expresión es procesada como <code>(a OP b) OP c, </code>mientras que la asociatividad de derecha a izquierda significa que es procesada como a<code> OP (b OP c). </code>Los operadores de asignación tienen asociatividad de derecha a izquierda, por lo que puedes escribir:</p> - -<pre class="brush: js">a = b = 5; -</pre> - -<p>para asignar 5 a las dos variables. Esto es porque el operador de asignación retorna el valor que asignó. Primero <code>b</code> es inicializada a 5. Despues <code>a</code> es inicializada al valor de <code>b</code>.</p> - -<h2 id="Table" name="Table">Tabla</h2> - -<p>La siguiente tabla esta ordenada de la precedencia más alta (0) a la más baja (18).</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Precedencia</th> - <th>Tipo de operador</th> - <th>Asociatividad</th> - <th>Operador</th> - </tr> - <tr> - <td>0</td> - <td>grouping</td> - <td>n/a</td> - <td><code>(</code>…<code>)</code></td> - </tr> - <tr> - <td rowspan="3">1</td> - <td rowspan="2"><a href="/en-US/docs/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">member</a></td> - <td rowspan="2">left-to-right</td> - <td>…<code>.<var>…</var></code></td> - </tr> - <tr> - <td>…<code>[<var>…</var>]</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td> - <td>n/a</td> - <td><code>new</code> … <code>(<var>…</var>)</code></td> - </tr> - <tr> - <td rowspan="2">2</td> - <td><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">function call</a></td> - <td>left-to-right</td> - <td>…<code>(<var>…</var>)</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td> - <td>right-to-left</td> - <td><code>new</code> …</td> - </tr> - <tr> - <td rowspan="2">3</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">increment</a></td> - <td>n/a</td> - <td>…<code>++</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">decrement</a></td> - <td>n/a</td> - <td>…<code>--</code></td> - </tr> - <tr> - <td rowspan="7">4</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-not</a></td> - <td>right-to-left</td> - <td><code>!</code>…</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise not</a></td> - <td>right-to-left</td> - <td><code>~</code>…</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary +</a></td> - <td>right-to-left</td> - <td><code>+</code>…</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary negation</a></td> - <td>right-to-left</td> - <td><code>-</code>…</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> - <td>right-to-left</td> - <td><code>typeof</code> …</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> - <td>right-to-left</td> - <td><code>void</code> …</td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> - <td>right-to-left</td> - <td><code>delete</code> …</td> - </tr> - <tr> - <td rowspan="3">5</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">multiplication</a></td> - <td>left-to-right</td> - <td><code>*</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">division</a></td> - <td>left-to-right</td> - <td><code>/</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">modulus</a></td> - <td>left-to-right</td> - <td><code>%</code></td> - </tr> - <tr> - <td rowspan="2">6</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">addition</a></td> - <td>left-to-right</td> - <td><code>+</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">subtraction</a></td> - <td>left-to-right</td> - <td><code>-</code></td> - </tr> - <tr> - <td rowspan="3">7</td> - <td rowspan="3"><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise shift</a></td> - <td rowspan="3">left-to-right</td> - <td><code><<</code></td> - </tr> - <tr> - <td><code>>></code></td> - </tr> - <tr> - <td><code>>>></code></td> - </tr> - <tr> - <td rowspan="6">8</td> - <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">relational</a></td> - <td rowspan="4">left-to-right</td> - <td><code><</code></td> - </tr> - <tr> - <td><code><=</code></td> - </tr> - <tr> - <td><code>></code></td> - </tr> - <tr> - <td><code>>=</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> - <td>left-to-right</td> - <td><code>in</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> - <td>left-to-right</td> - <td><code>instanceof</code></td> - </tr> - <tr> - <td rowspan="4">9</td> - <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">equality</a></td> - <td rowspan="4">left-to-right</td> - <td><code>==</code></td> - </tr> - <tr> - <td><code>!=</code></td> - </tr> - <tr> - <td><code>===</code></td> - </tr> - <tr> - <td><code>!==</code></td> - </tr> - <tr> - <td>10</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-and</a></td> - <td>left-to-right</td> - <td><code>&</code></td> - </tr> - <tr> - <td>11</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-xor</a></td> - <td>left-to-right</td> - <td><code>^</code></td> - </tr> - <tr> - <td>12</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-or</a></td> - <td>left-to-right</td> - <td><code>|</code></td> - </tr> - <tr> - <td>13</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-and</a></td> - <td>left-to-right</td> - <td><code>&&</code></td> - </tr> - <tr> - <td>14</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-or</a></td> - <td>left-to-right</td> - <td><code>||</code></td> - </tr> - <tr> - <td>15</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">conditional</a></td> - <td>right-to-left</td> - <td>… <code>?</code> … <code>:</code> …</td> - </tr> - <tr> - <td rowspan="12">16</td> - <td rowspan="12"><a href="/en-US/docs/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">assignment</a></td> - <td rowspan="12">right-to-left</td> - <td><code>=</code></td> - </tr> - <tr> - <td><code>+=</code></td> - </tr> - <tr> - <td><code>-=</code></td> - </tr> - <tr> - <td><code>*=</code></td> - </tr> - <tr> - <td><code>/=</code></td> - </tr> - <tr> - <td><code>%=</code></td> - </tr> - <tr> - <td><code><<=</code></td> - </tr> - <tr> - <td><code>>>=</code></td> - </tr> - <tr> - <td><code>>>>=</code></td> - </tr> - <tr> - <td><code>&=</code></td> - </tr> - <tr> - <td><code>^=</code></td> - </tr> - <tr> - <td><code>|=</code></td> - </tr> - <tr> - <td>17</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> - <td>right-to-left</td> - <td><code>yield</code>…</td> - </tr> - <tr> - <td>18</td> - <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Comma_Operator" title="JavaScript/Reference/Operators/Special_Operators/Comma_Operator">comma</a></td> - <td>left-to-right</td> - <td><code>,</code></td> - </tr> - </tbody> -</table> - -<p></p> diff --git a/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html b/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html deleted file mode 100644 index cb671264cc..0000000000 --- a/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: Operador Pipeline -slug: Web/JavaScript/Referencia/Operadores/Pipeline_operator -tags: - - Encadenamiento - - Experimental - - JavaScript - - Operador - - Pipeline -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>El operador experimental pipeline <code>|></code> (actualmente en su fase1) conduce el valor de una expresión dentro de una función. Esto permite la creación de llamadas de función en cadena de un modo más legible. El resultado es una simplificación sintáctica en la cual la llamada a una función con un único parámetro puede ser escrita del siguiente modo:</p> - -<pre class="brush: js">let url = "%21" |> decodeURI;</pre> - -<p>La llamada equivalente en sintaxis tradicional tiene este aspecto:</p> - -<pre class="brush: js">let url = decodeURI("%21"); -</pre> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"><em>expression</em> |> <em>function</em> -</pre> - -<p>El valor especificado en la <code>expression</code> se pasa dentro de la <code>function</code> como su único parámetro.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Encadenando_llamadas_a_funciones">Encadenando llamadas a funciones</h3> - -<p>El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// sin operador pipeline -double(increment(double(double(5)))); // 42 - -// con operador pipeline -5 |> double |> double |> increment |> double; // 42 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Borrador del operador Pipeline</a></td> - <td>Fase 1</td> - <td>Todavía no forma parte de la especificación ECMAScript</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div> -<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si quieres contribuir a estos datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una pull request.</div> - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> - <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/resto/index.html b/files/es/web/javascript/referencia/operadores/resto/index.html deleted file mode 100644 index 1a6a7c56da..0000000000 --- a/files/es/web/javascript/referencia/operadores/resto/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Resto (%) -slug: Web/JavaScript/Referencia/Operadores/Resto -translation_of: Web/JavaScript/Reference/Operators/Remainder ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador resto (<code>%</code>) devuelve el resto de la división entre dos operandos. Siempre toma el signo del dividendo.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> - -<div></div> - -<p class="hidden">El código fuente para este ejemplo interactivo se encuentra en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivas, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y realiza un pull request.</p> - -<p>Tener en cuenta que en la mayoría de los lenguajes de programación, el operador de resto es ‘%’, pero en otros (como <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python, Perl</a>) es el operador módulo. Ambos son iguales para valores positivos, pero cuando el divisor y el dividendo son de signos distintos, se obtienen distintos resultados. Para obtener el módulo en JavaScript, en lugar de <code>a % n</code>, usa <code>((a % n ) + n ) % n</code>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>var1</var> % <var>var2</var> -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Resto_con_dividendo_positivo">Resto con dividendo positivo</h3> - -<pre class="brush: js notranslate"> 12 % 5 // 2 - 1 % -2 // 1 - 1 % 2 // 1 - 2 % 3 // 2 -5.5 % 2 // 1.5 -</pre> - -<h3 id="Resto_con_dividendo_negativo">Resto con dividendo negativo</h3> - -<pre class="brush: js notranslate">-12 % 5 // -2 --1 % 2 // -1 --4 % 2 // -0</pre> - -<h3 id="Resto_con_NaN">Resto con NaN</h3> - -<pre class="brush: js notranslate">NaN % 2 // NaN</pre> - -<h3 id="Resto_con_Infinity">Resto con Infinity</h3> - -<pre class="brush: js notranslate">Infinity % 2 // NaN -Infinity % 0 // NaN -Infinity % Infinity // NaN -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.remainder")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html b/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html deleted file mode 100644 index 5a17cd05a2..0000000000 --- a/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Sintáxis Spread -slug: Web/JavaScript/Referencia/Operadores/Sintaxis_Spread -tags: - - ECMAScript6 - - Iteradores - - JavaScript -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax ---- -<div>{{jsSidebar("Operators")}}</div> - -<div><strong>La sintaxis extendida o spread</strong> <strong>syntax</strong> permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_Array">Array literales</a>) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales">literales Tipo Objeto</a>) son esperados.</div> - -<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> - -<div></div> - -<p class="hidden">La fuente para este ejemplo interactivo está almacenada en el repositorio de GitHub. Si quieres contribuir al proyecto interactivo de ejemplos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de descarga (pull).</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Para llamadas de funciones:</p> - -<pre class="syntaxbox notranslate">myFunction(...iterableObj); -</pre> - -<p>Para arreglos literales o cadenas de caracteres:</p> - -<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> - -<p>Para objetos literales (nuevo en ECMAScript 2018):</p> - -<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Spread_en_llamadas_de_función">Spread en llamadas de función</h3> - -<h4 id="Reemplaza_apply">Reemplaza "apply"</h4> - -<p>Es frecuente usar {{jsxref( "Function.prototype.apply")}} en casos donde quieres usar los elementos de un arreglo como argumentos de una función.</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -var args = [0, 1, 2]; -myFunction.apply(null, args);</pre> - -<p>Con la sintaxis expandida (spread syntax), el código anterior puede ser escrito como:</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -var args = [0, 1, 2]; -myFunction(...args);</pre> - -<p>Cualquier argumento en la lista de argumentos puede usar la sintáxis expandida y esto puede ser usado varias veces.</p> - -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } -var args = [0, 1]; -myFunction(-1, ...args, 2, ...[3]);</pre> - -<h4 id="Apply_para_new">"Apply" para "new"</h4> - -<p>Cuando se llama un constructor con <code>new</code>, no es posible usar <strong>directamente</strong> un arreglo y <code>apply</code> (<code>apply</code> hace un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). Sin embargo, un arreglo puede ser fácilmente usado con un new gracias a la sintáxis expandida:</p> - -<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 -var d = new Date(...dateFields); -</pre> - -<p>Para usar <strong>new </strong>con un arreglo de parámetros sin la sintáxis expandida, podrías tener que hacerlo <strong>indirectamente </strong>a través de una aplicación parcial:</p> - -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { - function partial () { - return constructor.apply(this, args); - }; - if (typeof constructor.prototype === "object") { - partial.prototype = Object.create(constructor.prototype); - } - return partial; -} - - -function myConstructor () { - console.log("arguments.length: " + arguments.length); - console.log(arguments); - this.prop1="val1"; - this.prop2="val2"; -}; - -var myArguments = ["hi", "how", "are", "you", "mr", null]; -var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); - -console.log(new myConstructorWithArguments); -// (internal log of myConstructor): arguments.length: 6 -// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] -// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> - -<h3 id="Expandir_Array_literales">Expandir Array literales</h3> - -<h4 id="Un_literal_Array_más_poderoso">Un literal Array más poderoso</h4> - -<p>Sin <code><strong>sintaxis expandida (spread syntax)</strong></code>, para crear un nuevo arreglo usando un arreglo existente como parte de él,no es suficiente la sintaxis de Array literal y en su lugar se debe usar código imperativo con una combinación de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis expandida, esto se vuelve mucho mas práctico:</p> - -<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes']; -// ["head", "shoulders", "knees", "and", "toes"] -</pre> - -<p>Así como para expandir listas de argumentos, <code>...</code> puede ser usado en cualquier parte dentro del Array literal, y múltiples veces.</p> - -<h4 id="Copiar_un_arreglo">Copiar un arreglo</h4> - -<pre class="brush: js notranslate">var arr = [1, 2, 3]; -var arr2 = [...arr]; // like arr.slice() -arr2.push(4); - -// arr2 becomes [1, 2, 3, 4] -// arr remains unaffected -</pre> - -<p><strong>Nota:</strong> La sintaxis expandida efectivamente va a un nivel de profundidad mientras copia un arreglo. Por lo tanto, esto no permite copiar arreglos multidimensionales como se muestra en los siguientes ejemplos (es lo mismo con {{jsxref("Object.assign()")}} y sintaxis spread).</p> - -<pre class="brush: js notranslate">var a = [[1], [2], [3]]; -var b = [...a]; -b.shift().shift(); // 1 -// Now array a is affected as well: [[], [2], [3]] -</pre> - -<h4 id="Una_forma_mejor_para_concatenar_arreglos">Una forma mejor para concatenar arreglos</h4> - -<p>{{jsxref("Array.concat")}} es usada a menudo para concatenar un arreglo al final de un arreglo ya existente. Sin la sintaxis spread se realiza:</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Append all items from arr2 onto arr1 -arr1 = arr1.concat(arr2);</pre> - -<p>Con la sintaxis spread se transforma en:</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1 = [...arr1, ...arr2]; -</pre> - -<p>{{jsxref("Array.unshift")}} es a menudo usada para insertar un arreglo de valores al inicio de un arreglo existente. Sin la sintáxis spread, esto es hecho como:</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Prepend all items from arr2 onto arr1 -Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> - -<p>Con la sintaxis spread se convierte en [Observa, sin embargo, que esto crea un nuevo arreglo <code>arr1</code>. Diferente a {{jsxref("Array.unshift")}}, esto no modifica el arreglo original en sitio <code>arr1</code>]:</p> - -<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] -</pre> - -<h3 id="Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</h3> - -<p>La propuesta <a href="https://github.com/tc39/proposal-object-rest-spread">Propiedades Rest/Spread para ECMAScript</a> (etapa 4) agrega propiedades spread a los <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">literales Tipo Objeto</a>. Esto copia sus propiedades enumerables desde un objeto provisto dentro de un nuevo objeto.</p> - -<p>Shallow-cloning (excluyendo prototype) o la combinación de objetos es ahora posible usando una sintaxis más corta que {{jsxref("Object.assign()")}}.</p> - -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; -var obj2 = { foo: 'baz', y: 13 }; - -var clonedObj = { ...obj1 }; -// Object { foo: "bar", x: 42 } - -var mergedObj = { ...obj1, ...obj2 }; -// Object { foo: "baz", x: 42, y: 13 }</pre> - -<p>Observa que {{jsxref("Object.assign()")}} desencadena <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mientras que la sintaxis spread no lo hace.</p> - -<p>Observa que tú no puedes reemplazar o replicar la función {{jsxref("Object.assign()")}}:</p> - -<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; -var obj2 = { foo: 'baz', y: 13 }; -const merge = ( ...objects ) => ( { ...objects } ); - -var mergedObj = merge ( obj1, obj2); -// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } - -var mergedObj = merge ( {}, obj1, obj2); -// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> - -<p>En el ejemplo de arriba, el operador spread no trabaja como uno podría esperar: este dispersa un <em>arreglo</em> de argumentos en el literal Tipo Objeto, debido al parámetro rest.</p> - -<h3 id="Sólo_para_iterables">Sólo para iterables</h3> - -<p>La sintaxis Spread (otra que en el caso de las propiedades spread) puede ser aplicada sólo a los objetos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterables</a>:</p> - -<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; -var array = [...obj]; // TypeError: obj is not iterable -</pre> - -<h3 id="Spread_con_muchos_valores">Spread con muchos valores</h3> - -<p>Cuando se usa la sintaxis spread para llamados de funciones, tenga en cuenta la posibilidad de exceder el límite de longitud de argumentos del motor de JavaScript. Vea <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> para más detalles.</p> - -<h2 id="Sintaxis_Rest_parámetros">Sintaxis Rest (parámetros)</h2> - -<p>La sintaxis Rest luce exactamente como la sintaxis spread, pero esto es usado por la desestructuración de arreglos y objetos. De cierta forma, la sintaxis rest es la opuesta a la sintaxis spread: spread 'expande' un arreglo en sus elementos, mientras rest agrupa múltiples elementos y los 'condensa' en un único elemento. Consulta <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">parámetros rest.</a></p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Sin cambios.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Definido en <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir con esta información, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud (pull).</div> - -<p>{{Compat("javascript.operators.spread")}}</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (también ‘<code>...</code>’)</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/spread_operator/index.html b/files/es/web/javascript/referencia/operadores/spread_operator/index.html deleted file mode 100644 index 050a2026f6..0000000000 --- a/files/es/web/javascript/referencia/operadores/spread_operator/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Operador de propagación -slug: Web/JavaScript/Referencia/Operadores/Spread_operator -tags: - - Experimental - - Expérimental(2) - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de propagación <em><strong>spread operator</strong></em> permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamadas a funciones:</p> - -<pre class="brush: js">f(...iterableObj); -</pre> - -<p>Arrays literales:</p> - -<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre> - -<p>Desestructuración <em>destructuring</em>:</p> - -<pre class="brush: js">[a, b, ...iterableObj] = [1, 2, 3, 4, 5];</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Un_mejor_método_apply">Un mejor método apply</h3> - -<p><strong>Ejemplo:</strong> Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f.apply(null, args);</pre> - -<p>Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - -<p>Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación <em>spread, </em>donde además puede ser usada varias veces.</p> - -<pre class="brush: js">function f(v, w, x, y, z) { } -var args = [0, 1]; -f(-1, ...args, 2, ...[3]);</pre> - -<h3 id="Un_array_literal_mas_poderoso">Un array literal mas poderoso</h3> - -<p><strong>Ejemplo:</strong> La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis de propagación <em>spread</em> esta tarea resulta mucho mas concisa:</p> - -<pre class="brush: js">var parts = ['shoulder', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes'];</pre> - -<p>Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.</p> - -<h3 id="Combinación_del_método_apply_y_el_operador_new">Combinación del método apply y el operador new</h3> - -<p><strong>Ejemplo:</strong> En ES5 no es posible combinar <code>new</code> y <code>apply</code> (en ES5 el método <code>apply</code> crea un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). En ES6 la sintaxis de propagación <em>spread</em> soporta esto de forma natural:</p> - -<pre class="brush: js">var dateFields = readDateFields(database); -var d = new Date(...dateFields);</pre> - -<h3 id="Un_método_push_mejorado">Un método push mejorado</h3> - -<p><strong>Ejemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Agregar todos los elementos de arr2 a arr1 -Array.prototype.push.apply(arr1, arr2);</pre> - -<p>Usando el operador de propagación <em>spread</em> de ES6, este sería el resultado:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1.push(...arr2);</pre> - -<h3 id="Solo_funciona_para_iterables">Solo funciona para iterables</h3> - -<pre class="brush: js">var obj = {"key1":"value1"}; -function myFunction(x) { - console.log(x); // undefined -} -myFunction(...obj); -var args = [...obj]; -console.log(args, args.length) //[] 0</pre> - -<h2 id="Operador_Rest">Operador Rest</h2> - -<p>El operador <em>Rest</em> es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, <em>Rest</em> es lo contrario de <em>spread</em>. <em>Spread</em> 'expande' un array en sus elementos, y <em>Rest</em> recoge múltiples elementos y los 'condensa' en uno solo.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Commentario</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}<br> - {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}</p> - </td> - <td>{{Spec2('ES6')}}</td> - <td> - <ul> - <li>12.2.4 Array Initializer</li> - <li>12.3.6 Argument Lists</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Operación de spread en arrays literales</td> - <td>{{CompatNo}}<br> - <a href="https://code.google.com/p/v8/issues/detail?id=3018">v8 issue 3018</a></td> - <td>{{ CompatGeckoDesktop("16") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en llamadas a funciones</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("27") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en desestructuración<br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en arrays literales</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("16") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en llamadas a funciones</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("27") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en desestructuración</span><br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Temas_relacionados">Temas relacionados</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parámetros rest</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/strict_equality/index.html b/files/es/web/javascript/referencia/operadores/strict_equality/index.html deleted file mode 100644 index 0d09b1de71..0000000000 --- a/files/es/web/javascript/referencia/operadores/strict_equality/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Igualdad Estricta (===) -slug: Web/JavaScript/Referencia/Operadores/Strict_equality -translation_of: Web/JavaScript/Reference/Operators/Strict_equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de estricta igualdad (<code>===</code>) revisa si dos operandos son iguales y produce un resultado Booleano. A diferencia del operador de igualdad regular (==), el operador de estricta igualdad siempre considera que los operandos de distinto tipo de valor son diferentes y nunca similares.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Los operadores de estricta igualdad (<code>===</code> y <code>!==</code>) usan el <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">Algoritmo Estricto Comparativo de Igualdad </a> para comparar dos operandos:</p> - -<ul> - <li>Si los operandos son de diferente tipo de valor, produce <code>false</code>.</li> - <li> Si ambos operandos son objetos, produce <code>true</code> solo si se refiere al mismo objeto.</li> - <li>Si ambos operandos son de tipo <code>null</code> o ambos operandos son <code>undefined</code>, produce <code>true</code>.</li> - <li>Si cualquier operando es de tipo <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">NaN</span></font>, produce <code>false</code>.</li> - <li>En otros casos, compara los valores de ambos operandos: - <ul> - <li>Los números deben tener el mismo valor numérico, aunque <code>+0</code> y <code>-0</code> son considerados como del mismo valor.</li> - <li>Los strings deben tener los mismos caracteres en el mismo orden.</li> - <li>Los booleanos deben ambos ser <code>true</code> o ambos ser <code>false</code>.</li> - </ul> - </li> -</ul> - -<p>La diferencia más notable entre este operador y el operador de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">igualdad</a> regular (<code>==</code>) es que si los operandos son de distinto tipo de valor, el operador <code>==</code> intenta convertir los valores a un mismo tipo de dato antes de compararlos.</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Comparando_operandos_del_mismo_tipo">Comparando operandos del mismo tipo</h3> - -<pre class="brush: js notranslate">console.log("hello" === "hello"); // true -console.log("hello" === "hola"); // false - -console.log(3 === 3); // true -console.log(3 === 4); // false - -console.log(true === true); // true -console.log(true === false); // false - -console.log(null === null); // true</pre> - -<h3 id="Comparando_operandos_de_distinto_tipo">Comparando operandos de distinto tipo</h3> - -<pre class="brush: js notranslate">console.log("3" === 3); // false - -console.log(true === 1); // false - -console.log(null === undefined); // false</pre> - -<h3 id="Comparando_objetos">Comparando objetos</h3> - -<pre class="brush: js notranslate">const object1 = { - name: "hello" -} - -const object2 = { - name: "hello" -} - -console.log(object1 === object2); // false -console.log(object1 === object1); // true</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2> - - - -<p>{{Compat("javascript.operators.strict_equality")}}</p> - -<h2 id="También_revisa">También revisa</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Equality">Operador de igualdad</a></li> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Inequality">Operador de desigualdad</a></li> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Operador de estricta desigualdad</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/super/index.html b/files/es/web/javascript/referencia/operadores/super/index.html deleted file mode 100644 index ff2ac5ae0e..0000000000 --- a/files/es/web/javascript/referencia/operadores/super/index.html +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Referencia/Operadores/super -tags: - - Clases - - ECMAScript 2015 - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/super ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>La palabra clave <strong>super</strong> es usada para acceder y llamar funciones del padre de un objeto.</p> - -<p>Las expresiones <code>super.prop</code> y <code>super[expr]</code> son válidas en cualquier <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definición de método</a> tanto para <a href="/es/docs/Web/JavaScript/Reference/Classes">clases</a> como para <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">objetos literales</a>.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">// llama al método constructor del objeto padre. -super([arguments]); - -// llama cualquier otro método del objeto padre. -super.functionOnParent([arguments]); -</pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Cuando es usado en un constructor, la palabra clave <code>super</code> aparece sola lo cual invoca el constructor del objeto padre. En este caso debe usarse antes de que la palabra clave <code>this</code> sea usada. La palabra clave <code>super</code> también puede utilizarse para llamar otras funciones del objeto padre.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Usando_super_en_clases">Usando <code>super</code> en clases</h3> - -<p>Este fragmento de código se toma del <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">ejemplo de clases</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demo en vivo</a>). Aquí se llama a <code>super()</code> para evitar la duplicación de las partes del constructor que son comunes entre <code>Rectangle</code> y <code>Square</code>.</p> - -<pre class="brush: js">class Rectangle { - constructor(height, width) { - this.name = 'Rectangle'; - this.height = height; - this.width = width; - } - sayName() { - console.log('Hi, I am a ', this.name + '.'); - } - get area() { - return this.height * this.width; - } - set area(value) { - this.height = this.width = Math.sqrt(value); - } -} - -class Square extends Rectangle { - constructor(length) { - this.height; // ReferenceError, super necesita ser llamado primero! - - // Aquí, llama al constructor de la clase padre con las longitudes - // previstas para el ancho y la altura de Rectangle - super(length, length); - - // Nota: En las clases derivadas, se debe llamar a super() antes de - // poder usar 'this'. Salir de esto provocará un error de referencia. - this.name = 'Square'; - } -}</pre> - -<h3 id="Super-llamando_a_métodos_estáticos">Super-llamando a métodos estáticos</h3> - -<p>También puede llamar a super en métodos estáticos.</p> - -<pre class="brush: js">class Rectangle { - constructor() {} - static logNbSides() { - return 'I have 4 sides'; - } -} - -class Square extends Rectangle { - constructor() {} - static logDescription() { - return super.logNbSides() + ' which are all equal'; - } -} -Square.logDescription(); // 'Tengo 4 lados que son todos iguales' -</pre> - -<h3 id="Eliminar_propiedades_super_generará_un_error">Eliminar propiedades <code>super</code> generará un error</h3> - -<p>No puede usar el <a href="/es/docs/Web/JavaScript/Reference/Operators/delete">operador de eliminación</a> y <code>super.prop</code> o <code>super[expr]</code> para eliminar la propiedad de una clase principal, lanzará {{jsxref("ReferenceError")}}.</p> - -<pre class="brush: js">class Base { - constructor() {} - foo() {} -} -class Derived extends Base { - constructor() {} - delete() { - delete super.foo; // esto es malo - } -} - -new Derived().delete(); // ReferenceError: eliminación no válida que implica 'super'. </pre> - -<h3 id="super.prop_no_puede_sobrescribir_las_propiedades_no_modificables"><code>super.prop</code> no puede sobrescribir las propiedades no modificables</h3> - -<p>Al definir propiedades que no se pueden escribir, p. Ej. {{jsxref("Object.defineProperty")}}, <code>super</code> no puede sobrescribir el valor de la propiedad.</p> - -<pre class="brush: js">class X { - constructor() { - Object.defineProperty(this, 'prop', { - configurable: true, - writable: false, - value: 1 - }); - } - f() { - super.prop = 2; - } -} - -var x = new X(); -x.f(); // TypeError: "prop" es de solo lectura -console.log(x.prop); // 1 -</pre> - -<h3 id="Usando_super.prop_en_objetos_literales">Usando <code>super.prop</code> en objetos literales</h3> - -<p>Super también se puede usar en el <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicializador de objetos / notación literal</a>. En este ejemplo, dos objetos definen un método. En el segundo objeto, <code>super</code> llama al primer método del objeto. Esto funciona con la ayuda de {{jsxref("Object.setPrototypeOf()")}} con el que podemos establecer el prototipo de <code>obj2</code> en <code>obj1</code>, de modo que <code>super</code> pueda encontrar el <code>method1</code> en <code>obj1</code>.</p> - -<pre class="brush: js">var obj1 = { - method1() { - console.log('method 1'); - } -} - -var obj2 = { - method2() { - super.method1(); - } -} - -Object.setPrototypeOf(obj2, obj1); -obj2.method2(); // logs "method 1" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.super")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Reference/Classes">Clases</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/sustracción/index.html b/files/es/web/javascript/referencia/operadores/sustracción/index.html deleted file mode 100644 index 21bfd3a1ac..0000000000 --- a/files/es/web/javascript/referencia/operadores/sustracción/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Sustracción (-) -slug: Web/JavaScript/Referencia/Operadores/Sustracción -tags: - - JavaScript -translation_of: Web/JavaScript/Reference/Operators/Subtraction ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de sustracción (<code>-</code>) sustrae dos operandos, produciendo su diferencia.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> - -<div></div> - - - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> - <var>y</var> -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Sustracción_con_números">Sustracción con números</h3> - -<pre class="brush: js notranslate">5 - 3 // 2 -3 - 5 // -2</pre> - -<h3 id="Sustracción_de_no_numéricos">Sustracción de no numéricos</h3> - -<pre class="brush: js notranslate">'foo' - 3 // NaN</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2> - - - -<p>{{Compat("javascript.operators.subtraction")}}</p> - -<h2 id="También_revisa">También revisa</h2> - -<ul> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> - <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/this/index.html b/files/es/web/javascript/referencia/operadores/this/index.html deleted file mode 100644 index 74ed62bb60..0000000000 --- a/files/es/web/javascript/referencia/operadores/this/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Referencia/Operadores/this -translation_of: Web/JavaScript/Reference/Operators/this ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Introducción">Introducción</h2> - -<p>La palabra clave <strong><code>this</code></strong> de una función se comporta un poco diferente en Javascript en comparación con otros lenguajes. Además tiene algunas diferencias entre el <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="en-US/docs/JavaScript/Strict mode">modo estricto</a> y el modo no estricto.</p> - -<p>En general, el valor de <code>this</code> está determinado por cómo se invoca a la función. No puede ser establecida mediante una asignación en tiempo de ejecución, y puede ser diferente cada vez que la función es invocada. ES5 introdujo el método {{jsxref("Function.bind()", "bind()")}} para <a href="#Funciones_enlazadas" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Special/this#Bound_functions">establecer el valor de la función <code>this</code> independientemente de como es llamada</a>, y ES2015 introdujo las <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a> que no proporcionan su propio "binding" de <code>this</code> (se mantiene el valor de <code>this</code> del contexto léxico que envuelve a la función)</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">this</pre> - -<h3 id="Valor">Valor</h3> - -<p>El objeto contexto de JavaScript en el cual se está ejecutando el código actual.</p> - -<h2 id="Contexto_global">Contexto global</h2> - -<p>En el contexto de ejecución global (fuera de cualquier función), <strong><code>this</code></strong> se refiere al objeto global, ya sea en modo estricto o no.</p> - -<pre class="brush:js">console.log(this.document === document); // true - -// En los navegadores web, el objeto window también es un objeto global: -console.log(this === window); // true - -this.a = 37; -console.log(window.a); // 37 -</pre> - -<div class="blockIndicator note"> -<p><font><font>Nota: Puedes obtener el objeto global usando la propieda global <code>globalThis</code>, no importa el contexto donde se ejecute esta propiedad, siempre hará referencia al objeto global. </font></font></p> -</div> - -<h2 id="Contexto_de_la_función">Contexto de la función</h2> - -<p><span class="hps" style="line-height: 1.5;">Dentro de una</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">función</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">depende de cómo</span><span style="line-height: 1.5;"> la función es l</span><span class="hps" style="line-height: 1.5;">lamada</span><span id="result_box" lang="es" style="line-height: 1.5;">.</span></p> - -<h3 id="Llamada_simple">Llamada simple</h3> - -<pre class="brush:js">function f1(){ - return this; -} - -f1() === window; // objeto global -</pre> - -<div><span class="hps" style="line-height: 1.5;">En</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">este caso</span><span style="line-height: 1.5;">,</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">el valor de <strong>this</strong></span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">no está establecido</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">la llamada</span><span style="line-height: 1.5;">.</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">Dado que el código</span><span style="line-height: 1.5;"> </span><span class="alt-edited hps" style="line-height: 1.5;">no está</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">en modo estricto</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">debe ser siempre</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">un objeto</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por lo que</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por defecto es el</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">objeto global</span><span style="line-height: 1.5;">.</span></div> - -<div></div> - -<div> -<pre class="brush:js" style="font-size: 14px;">function f2(){ - "use strict"; // consultar modo estricto - return this; -} - -f2() === undefined;</pre> -</div> - -<div><span style="line-height: 1.5;">En modo estricto, el valor de <strong>this</strong> se mantiene en lo que está establecida al entrar en el contexto de ejecución. Si no está definido, permanece undefined. También se puede ajustar a cualquier valor, tales como <strong>null</strong> o <strong>42</strong> o "<strong>Yo no soy this</strong>".</span></div> - -<div></div> - -<div class="note"> -<p><strong>Nota:</strong> En el segundo ejemplo, <strong><code>this</code></strong> debería ser {{jsxref("undefined")}}, porque <code>f2</code> fue llamado sin proporcionar ninguna base (ej. <code>window.f2()</code>). Esta característica no fue implementada en algunos navegadores cuando se comenzó a dar soporte al <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="Strict mode">modo estricto</a>. Como resultado, retorna incorrectamente el objeto window.</p> -</div> - -<div><span>Como un método de un objeto</span></div> - -<p>Cuando una función es llamada como un método de un objeto, el <strong><code>this</code></strong> cambia por el metodo del objeto llamado.</p> - -<p>En el siguiente ejemplo, cuando <strong><code>o.f()</code></strong> es invocado, dentro de la función <strong><code>this</code></strong> es ligado al objeto <strong><code>o</code></strong>.</p> - -<pre class="brush:js">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // logs 37 -</pre> - -<p>Note que el comportamiento no es del todo afectado por cómo o dónde la función fue definida. En el ejemplo anterior, nosotros definimos la función en línea como el elemento <code>f</code> durante la definición de <code>o</code>. Sin embargo, podriamos haber definido con la misma facilidad la primera función y luego adjuntarlo a <code>o.f</code>. Hacerlo da como resultado el mismo comportamiento.</p> - -<pre class="brush:js">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // logs 37 -</pre> - -<p>Esto demuestra que sólo importa que la función fue invocada del elemento <code>f</code> de <code>o</code>.</p> - -<p>Asimismo, el enlace <code>this</code> sólo se ve afectado por la referencia del miembro más inmediata. En el siguiente ejemplo, cuando invocamos a la función, lo llamamos como metodo <code>g</code> del objeto <code>o.b</code>. Esta vez durante la ejecución, <code>this </code>dentro de la función se referirá a <code>o.b</code>. <span id="result_box" lang="es"><span class="hps">El hecho de que</span> <span class="hps">el objeto</span> <span class="hps">es en sí mismo</span> <span class="alt-edited hps">un elemento</span> <span class="hps">de </span></span><code>o</code><span id="result_box" lang="es"> <span class="hps">no tiene ninguna</span> <span class="hps">consecuencia</span><span>,</span> <span class="hps">la referencia más</span> <span class="hps">inmediata es</span> <span class="hps">todo lo que importa</span><span>.</span></span></p> - -<pre class="brush:js">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // logs 42 -</pre> - -<h4 id="..._en_la_cadena_de_prototipo">... en la cadena de prototipo</h4> - -<p>El mismo concepto es válido para los métodos definidos en alguna parte de la cadena de prototipo del objeto. Si el método esta sobre una cadena de prototipo del objeto, <code>this</code> se referirá al objeto donde está el método de donde fue llamado. Como si ese método estuviera dentro del objeto. </p> - -<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>En este ejemplo, el objeto asignado a la variable <code>p</code> no tiene su propia propiedad <code>f</code>, esto lo hereda de su prototipo. Pero no importa que la búsqueda de <code>f</code> eventualmente encuentre un elemento con ese nombre en <code>o</code>; la búsqueda comenzó como una referencia a <code>p.f</code>, asi <code>this </code>dentro de la funcion toma el valor del objeto referido como <code>p</code>. Es decir, desde que <code>f</code> es llamado como método de <code>p</code>, su <code>this</code> refiere a <code>p</code>. Esto es una interesante característica de la herencia de prototipo de JavaScript.</p> - -<h4 id="..._o_como_un_getter_o_setter">... o como un getter o setter</h4> - -<p>Nuevamente, el mismo concepto es válido cuando una función es invocada de un getter o un setter. Una función usado como getter o setter tiene su enlace <code>this</code> al objeto desde el cual la propiedad esta siendo establecida u obtenida.</p> - -<pre class="brush:js">function modulus(){ - return Math.sqrt(this.re * this.re + this.im * this.im); -} - -var o = { - re: 1, - im: -1, - get phase(){ - return Math.atan2(this.im, this.re); - } -}; - -Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true}); - -console.log(o.phase, o.modulus); // logs -0.78 1.4142 -</pre> - -<h3 id="Como_un_constructor">Como un constructor</h3> - -<p>Cuando una función es usada como un constructor (con la palabra clave {{jsxref("Operadores/new", "new")}}), su <code>this</code> es enlazado al nuevo objeto en construcción, a menos que la ejecución de los resultados del constructor en el motor JavaScript encuentren una instrucción de retorno donde el valor de retorno sea un objeto.</p> - -<pre class="brush:js">/* - * Los constructores trabajan algo asi: - * - * function MyConstructor(){ - * // El cuerpo del código de la función actual va aquí. Crear las propiedades en |this| como - * // se desee mediante la asignación a los mismos. E.g., - * this.fum = "nom"; - * // etcetera... - * - * // Si la función tiene una sentencia de retorno este retorna un objeto, - * // este objeto será el resultado de la expresión |new|. Por otro lado, el - * // resultado de la expresión es el objeto actualmente enlazado a |this| - * // (i.e., el caso más común suele verse). - * } - */ - -function C(){ - this.a = 37; -} - -var o = new C(); -console.log(o.a); // logs 37 - - -function C2(){ - this.a = 37; - return {a:38}; -} - -o = new C2(); -console.log(o.a); // logs 38 -</pre> - -<p>En el último ejemplo (<code>C2</code>), debido a que un objeto fue devuelto durante la construcción, el nuevo objeto que fue enlazado a <code>this</code> simplemente se descarta.( Esto esencialmente hace de la declaración "<code>this.a = 37;</code>" codigo muerto. No esta exactamente muerto,porque es ejecutado pero se puede eliminar sin efectos externos.)</p> - -<h3 id="call_y_apply"><code>call</code> y <code>apply</code></h3> - -<p>Cuando una función usa la plabra clave <code>this</code> en su cuerpo, su valor puede ser enlazado a un objeto particular durante la ejecución del método {{jsxref("Function.call()", "call()")}} or {{jsxref("Function.apply()", "apply()")}} que todas las funciones hereden de <code>Function.prototype</code>.</p> - -<pre class="brush:js">function add(c, d){ - return this.a + this.b + c + d; -} - -var o = {a:1, b:3}; - -// El primer parámetro es el objeto a usar como 'this', parámetros posteriores se pasan como argumentos -// en la llamada a la función -add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 - -//El primer parámetro es el objeto a usar como 'this''this', la segunda es una matriz cuyos elementos -// se utilizan como argumentos en la llamada a la función -add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 -</pre> - -<h3 id="Funciones_enlazadas">Funciones enlazadas</h3> - -<p>ECMAScript 5 introduce {{jsxref("Function.prototype.bind()")}}. Llamando a <code>f.bind(someObject)</code> crea una nueva función con el mismo cuerpo y alcance de <code>f</code>, pero donde <code>this</code> se produce en la función original, en la nueva función esto esta permanentemente ligado al primer argumento de <code>bind</code>, independientemente de cómo la función está siendo utilizada.</p> - -<pre class="brush:js">function f(){ - return this.a; -} - -var g = f.bind({a:"azerty"}); -console.log(g()); // azerty - -var o = {a:37, f:f, g:g}; -console.log(o.f(), o.g()); // 37, azerty -</pre> - -<h3 id="Como_un_controlador_de_eventos_DOM">Como un controlador de eventos DOM</h3> - -<p>Cuando una función es usada como un controlador de eventos, su <code>this</code> es cambiado desde el elemento del evento disparado (algunos navegadores no siguen esta convención para los listeners agregados dinámicamente con otros métodos <code>addEventListener</code>).</p> - -<pre class="brush:js">// Cuando se llama como un listener, convierte en azul el elemento -// relacionado -function bluify(e){ - console.log(this === e.currentTarget); // Siempre true - console.log(this === e.target); // true cuando currentTarget y target son el mismo objeto - this.style.backgroundColor = '#A5D9F3'; -} - -// Consigue una lista de cada elemento en un documento -var elements = document.getElementsByTagName('*'); - -// Añade bluify como un click listener asi cuando se hace click sobre el elemento, -// este cambia a azul -for(var i=0 ; i<elements.length ; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> diff --git a/files/es/web/javascript/referencia/operadores/typeof/index.html b/files/es/web/javascript/referencia/operadores/typeof/index.html deleted file mode 100644 index 088791f228..0000000000 --- a/files/es/web/javascript/referencia/operadores/typeof/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: typeof -slug: Web/JavaScript/Referencia/Operadores/typeof -tags: - - JavaScript - - Operator - - Unary -translation_of: Web/JavaScript/Reference/Operators/typeof ---- -<div><span class="diff_add">{{jsSidebar("Operators")}}</span></div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El operador <code>typeof</code> se usa en cualquiera de los siguientes modos:</p> - -<ol> - <li><code>typeof <em>operando</em> </code></li> - <li><code>typeof (<em>operando</em>)</code></li> -</ol> - -<p>El operador <code>typeof</code> devuelve una cadena que indica el tipo del operando sin evaluarlo. <code>operando</code> es la cadena, variable, palabra clave u objeto para el que se devolverá su tipo. Los paréntesis son opcionales.</p> - -<p>Suponga que define las siguientes variables:</p> - -<pre class="brush: js">var miFuncion = new Function("5+2") -var forma = "redonda" -var tamano = 1 -var hoy = new Date() -</pre> - -<p>El operador <code>typeof</code> devuelve los siguientes resultados para estas variables</p> - -<pre class="brush: js">typeof miFuncion === 'function' -typeof forma === 'string' -typeof tamano === 'number' -typeof hoy === 'object' -typeof noExiste === 'undefined' -</pre> - -<p>Para las palabras clave <code>true</code> y <code>null</code>, el operador <code>typeof</code> devuelve los siguientes resultados:</p> - -<pre class="brush: js">typeof true === 'boolean' -typeof null === 'object' -</pre> - -<p>Para un número o una cadena, el operador <code>typeof</code> devuelve los siguientes resultados:</p> - -<pre class="brush: js">typeof 62 === 'number' -typeof 'Hola mundo' === 'string' -</pre> - -<p>Para valores de propiedades, el operador <code>typeof</code> devuelve el tipo del valor que contiene la propiedad:</p> - -<pre class="brush: js">typeof document.lastModified === 'string' -typeof window.length === 'number' -typeof Math.LN2 === 'number' -</pre> - -<p>Para métodos y funciones, el operador <code>typeof</code> devuelve los resultados siguientes:</p> - -<pre class="brush: js">typeof blur === 'function' -typeof eval === 'function' -typeof parseInt === 'function' -typeof shape.split === 'function' -</pre> - -<p>Para objetos predefinidos, el operador <code>typeof</code> devuelve los siguientes resultados:</p> - -<pre class="brush: js">typeof Date === 'function' -typeof Function === 'function' -typeof Math === 'object' -typeof Object === 'function' -typeof String === 'function' -</pre> - -<p> </p> diff --git a/files/es/web/javascript/referencia/operadores/void/index.html b/files/es/web/javascript/referencia/operadores/void/index.html deleted file mode 100644 index 0bf8048b21..0000000000 --- a/files/es/web/javascript/referencia/operadores/void/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: void -slug: Web/JavaScript/Referencia/Operadores/void -tags: - - JavaScript - - Operator - - Unary -translation_of: Web/JavaScript/Reference/Operators/void ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El operador <code>void</code> se usa en cualquiera de los siguientes modos:</p> - -<ol> - <li><code>void (<em>expresion</em> )</code></li> - <li><code>void <em>expresion</em> </code></li> -</ol> - -<p>El operador <code>void</code> especifica una expresión que se evalúa sin devolver un valor. <code>expresion</code> es una expresión JavaScript para evaluar. El paréntesis rodeando la expresión es opcional, pero usarlos es una buena práctica al programar.</p> - -<p>Puede usar el operador <code>void</code> para especificar una expresión como un enlace de hipertexto. La expresión se evalúa pero no se carga en lugar del documento actual.</p> - -<p>El siguiente código crea un enlace de hipertexto que no hace nada cuando el usuario hace click en él. Cuando el usuario hace click en el enlace, void(0) se evalúa como 0, pero eso no tiene ningún efecto en JavaScript.</p> - -<pre class="brush: html"><a href="javascript:void(0)">Haga click aquí para no hacer nada</a> -</pre> - -<p>El siguiente código crea un enlace de hipertexto que envía un formulario cuando el usuario hace click en él.</p> - -<pre class="brush: html"><a href="javascript:void(document.forms["miFormulario"].submit())"> -Haga click aquí para enviar</a> -</pre> - -<div class="noinclude"></div> diff --git a/files/es/web/javascript/referencia/operadores/yield/index.html b/files/es/web/javascript/referencia/operadores/yield/index.html deleted file mode 100644 index 7237b6d689..0000000000 --- a/files/es/web/javascript/referencia/operadores/yield/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Referencia/Operadores/yield -tags: - - Característica del lenguaje - - ECMAScript 2015 - - Generadores - - Iterador - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/yield ---- -<div>{{jsSidebar("Operadores")}}</div> - -<p>La palabra clave <code>yield</code> se usa para pausar y reanudar una función generadora ({{jsxref("Statements/function*", "function*")}} o {{jsxref("Statements/Legacy_generator_function", "función generadora heredada")}}).</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html", "taller")}}</div> - -<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox notranslate">[<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</pre> - -<dl> - <dt><code><var>expression</var></code> {{optional_inline}}</dt> - <dd>Define el valor que se devolverá desde la función generadora a través del {{jsxref("Iteration_protocols", "protocolo iterador", "#El_protocolo_iterador")}}. Si se omite, devuelve <code>undefined</code> en su lugar.</dd> - <dt><code><var>rv</var></code> {{optional_inline}}</dt> - <dd> - <p>Recupera el valor opcional pasado al método <code>next()</code> del generador para reanudar su ejecución.</p> - </dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>La palabra clave <code>yield</code> detiene la ejecución de la función del generador y el valor de la expresión que sigue a la palabra clave <code>yield</code> se devuelve al llamador del generador. Se puede considerar como una versión basada en un generador de la palabra clave <code>return</code>.</p> - -<p><code>yield</code> solo se puede llamar directamente desde la función generadora que la contiene. No se puede llamar desde funciones anidadas o retrollamadas.</p> - -<p>La palabra clave <code>yield</code> hace que la llamada al método <code>next()</code> del generador devuelva un objeto <code>IteratorResult</code> con dos propiedades: <code>value</code> y <code>done</code>. La propiedad <code>value</code> es el resultado de evaluar la expresión <code>yield</code>, y <code>done</code> es <code>false</code>, lo cual indica que la función generadora no se ha completado completamente.</p> - -<p>Una vez en pausa en una expresión <code>yield</code>, la ejecución del código del generador permanece en pausa hasta que se llama al método <code>next()</code> del generador. Cada vez que se llama al método <code>next()</code> del generador, el generador reanuda la ejecución y se ejecuta hasta que alcanza uno de los siguientes:</p> - -<ul> - <li>Un <code>yield</code>, el cual hace que el generador vuelva a pausar y devuelva el nuevo valor del generador. La próxima vez que se llame a <code>next()</code>, la ejecución se reanudará con la instrucción inmediatamente después de <code>yield</code>.</li> - <li>{{jsxref("Statements/throw", "throw")}} se usa para lanzar una excepción desde el generador. Esta detiene la ejecución del generador por completo y la ejecución se reanuda en el llamador (como suele ser el caso cuando se lanza una excepción).</li> - <li>Se alcanza el final de la función generadora. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es {{jsxref("undefined")}} y <code>done</code> es <code>true</code>.</li> - <li>Se alcanza una instrucción {{jsxref("Statements/return", "return")}}. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es el valor especificado por la instrucción <code>return</code> y <code>done</code> es <code>true</code>.</li> -</ul> - -<p>Si se pasa un valor opcional al método <code>next()</code> del generador, ese valor se convierte en el valor devuelto por la operación <code>yield</code> actual del generador.</p> - -<p>Entre la ruta del código del generador, sus operadores <code>yield</code> y la capacidad de especificar un nuevo valor inicial pasándolo a {{jsxref("Generator.prototype.next()")}}, los generadores ofrecen enorme poder y control.</p> - -<div class="blockIndicator warning"> -<p>Desafortunadamente, <code>next()</code> es asimétrico, pero eso no se puede evitar: siempre envía un valor al <code>yield</code> actualmente suspendido, pero devuelve el operando del siguiente <code>yield</code>.</p> -</div> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usar_yield">Usar <code>yield</code></h3> - -<p>El siguiente código es la declaración de una función generadora de ejemplo.</p> - -<pre class="brush: js notranslate">function* countAppleSales () { - let saleList = [3, 7, 5] - for (let i = 0; i < saleList.length; i++) { - yield saleList[i] - } -}</pre> - -<p>Una vez que se define una función generadora, se puede usar construyendo un iterador como el siguiente.</p> - -<pre class="brush: js notranslate">let appleStore = countAppleSales() // Generator { } -console.log(appleStore.next()) // { value: 3, done: false } -console.log(appleStore.next()) // { value: 7, done: false } -console.log(appleStore.next()) // { value: 5, done: false } -console.log(appleStore.next()) // { value: undefined, done: true }</pre> - -<p>También puedes enviar un valor con <code>next(value)</code> al generador. '<code>step</code>' se evalúa como un valor de retorno en esta sintaxis [<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</p> - -<pre class="brush: js notranslate">function* counter(value) { - let step; - - while (true) { - step = yield ++value; - - if (step) { - value += step; - } - } -} - -const generatorFunc = counter(0); -console.log(generatorFunc.next().value); // 1 -console.log(generatorFunc.next().value); // 2 -console.log(generatorFunc.next().value); // 3 -console.log(generatorFunc.next(10).value); // 14 -console.log(generatorFunc.next().value); // 15 -console.log(generatorFunc.next(10).value); // 26</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> - -<p>{{Compat("javascript.operators.yield")}}</p> - -<h2 id="Ve_también">Ve también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">El protocolo <code>Iterator</code></a></li> - <li>{{jsxref("Statements/function*", "function*")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("Operators/yield*", "yield*")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/yield_star_/index.html b/files/es/web/javascript/referencia/operadores/yield_star_/index.html deleted file mode 100644 index e2167b8c41..0000000000 --- a/files/es/web/javascript/referencia/operadores/yield_star_/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: yield* -slug: Web/JavaScript/Referencia/Operadores/yield* -tags: - - ECMAScript6 - - JavaScript -translation_of: Web/JavaScript/Reference/Operators/yield* ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><code>La expresión </code><strong><code>yield*</code></strong><strong> </strong>es usada para delegar a otro {{jsxref("Statements/function*", "generator")}} u objeto iterable.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox"> yield* [[expression]];</pre> - -<dl> - <dt><code>expression</code></dt> - <dd>La expresión que retorna un objeto iterable</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>La expresión <code>yield*</code> itera sobre el operador realizando yield de cada valor retornado por este.</p> - -<p>El valor de la expresion <code>yield*</code> es el valor retornado por el iterador en si mismo cuando es finalizado (ej., cuando <code>done</code> es true).</p> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Delegando_a_otro_generator">Delegando a otro generator</h3> - -<p>En el siguiente código, los valores declarados con yield en <code>g1()</code> son devueltos por las llamadas a <code>next() al igual que en</code> <code>g2()</code>.</p> - -<pre class="brush: js">function* g1() { - yield 2; - yield 3; - yield 4; -} - -function* g2() { - yield 1; - yield* g1(); - yield 5; -} - -var iterator = g2(); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: 3, done: false } -console.log(iterator.next()); // { value: 4, done: false } -console.log(iterator.next()); // { value: 5, done: false } -console.log(iterator.next()); // { value: undefined, done: true } -</pre> - -<h3 id="Otros_objetos_iterables">Otros objetos iterables</h3> - -<p>Además de los objetos generator, <code>yield*</code> también se puede usar <code>yield sobre otros tipos de iterables</code>, ej. arrays, strings u objetos arguments.</p> - -<pre class="brush: js">function* g3() { - yield* [1, 2]; - yield* "34"; - yield* Array.from(arguments); -} - -var iterator = g3(5, 6); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: "3", done: false } -console.log(iterator.next()); // { value: "4", done: false } -console.log(iterator.next()); // { value: 5, done: false } -console.log(iterator.next()); // { value: 6, done: false } -console.log(iterator.next()); // { value: undefined, done: true } -</pre> - -<h3 id="El_valor_de_la_expresión_yield*">El valor de la expresión <code>yield*</code></h3> - -<p><code>yield*</code> es una expresión, no una declaración, por lo que se evalua como un valor.</p> - -<pre class="brush: js">function* g4() { - yield* [1, 2, 3]; - return "foo"; -} - -var result; - -function* g5() { - result = yield* g4(); -} - -var iterator = g5(); - -console.log(iterator.next()); // { value: 1, done: false } -console.log(iterator.next()); // { value: 2, done: false } -console.log(iterator.next()); // { value: 3, done: false } -console.log(iterator.next()); // { value: undefined, done: true }, - // g4() returned { value: "foo", done: true } at this point - -console.log(result); // "foo" -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES6', '#', 'Yield')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inical.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("27.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("27.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h2> - -<ul> - <li>Iniciando con Gecko 33 {{geckoRelease(33)}}, el análisis del yield expression ha sido actualizado para cumplir con la última especificación ES6 ({{bug(981599)}}): - <ul> - <li>Ahora está implementada la restricción de salto de línea. No está permitido el salto de línea entre "yield" y "*". Código como el siguiente lanzará una {{jsxref("SyntaxError")}}: - <pre class="brush: js">function* foo() { - yield - *[]; -}</pre> - </li> - </ul> - </li> -</ul> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">Protocolos de iteración</a></li> - <li>{{jsxref("Statements/function*", "function*")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("Operators/yield", "yield")}}</li> -</ul> |