diff options
Diffstat (limited to 'files/es/web/javascript/reference/operators')
34 files changed, 4922 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/operators/addition/index.html b/files/es/web/javascript/reference/operators/addition/index.html new file mode 100644 index 0000000000..58e5d58dae --- /dev/null +++ b/files/es/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,78 @@ +--- +title: Adición (+) +slug: Web/JavaScript/Reference/Operators/Addition +translation_of: Web/JavaScript/Reference/Operators/Addition +original_slug: Web/JavaScript/Referencia/Operadores/Adición +--- +<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/reference/operators/assignment/index.html b/files/es/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..0ec71e252e --- /dev/null +++ b/files/es/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,63 @@ +--- +title: Asignacion (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - JS + - JavaScript + - Operador de Asignacion + - Operadores JavaScript + - Referências +translation_of: Web/JavaScript/Reference/Operators/Assignment +original_slug: Web/JavaScript/Referencia/Operadores/Asignacion +--- +<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/reference/operators/async_function/index.html b/files/es/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..679e82d997 --- /dev/null +++ b/files/es/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,103 @@ +--- +title: Expresión de función asíncrona +slug: Web/JavaScript/Reference/Operators/async_function +tags: + - Expresión Primaria + - JavaScript + - Operador + - función +translation_of: Web/JavaScript/Reference/Operators/async_function +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/await/index.html b/files/es/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..74f94bf214 --- /dev/null +++ b/files/es/web/javascript/reference/operators/await/index.html @@ -0,0 +1,103 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +translation_of: Web/JavaScript/Reference/Operators/await +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/class/index.html b/files/es/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..9800963fd7 --- /dev/null +++ b/files/es/web/javascript/reference/operators/class/index.html @@ -0,0 +1,158 @@ +--- +title: expresión class +slug: Web/JavaScript/Reference/Operators/class +tags: + - Classes + - ECMAScript6 + - Expression + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/comma_operator/index.html b/files/es/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..b1325fbea0 --- /dev/null +++ b/files/es/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,133 @@ +--- +title: Operador Coma +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +original_slug: Web/JavaScript/Referencia/Operadores/operador_coma +--- +<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/reference/operators/conditional_operator/index.html b/files/es/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..8f26d6ce67 --- /dev/null +++ b/files/es/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,172 @@ +--- +title: Operador condicional (ternario) +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/decrement/index.html b/files/es/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..5be9b1f986 --- /dev/null +++ b/files/es/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,84 @@ +--- +title: Decremento(--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - Decremento + - JavaScript + - JavaScript basico + - Operadores +translation_of: Web/JavaScript/Reference/Operators/Decrement +original_slug: Web/JavaScript/Referencia/Operadores/Decremento +--- +<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/reference/operators/delete/index.html b/files/es/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..94ede3308d --- /dev/null +++ b/files/es/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,243 @@ +--- +title: operador delete +slug: Web/JavaScript/Reference/Operators/delete +translation_of: Web/JavaScript/Reference/Operators/delete +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/destructuring_assignment/index.html b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..3f070055b5 --- /dev/null +++ b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,443 @@ +--- +title: La desestructuración +slug: Web/JavaScript/Reference/Operators/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 +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/division/index.html b/files/es/web/javascript/reference/operators/division/index.html new file mode 100644 index 0000000000..08074f727d --- /dev/null +++ b/files/es/web/javascript/reference/operators/division/index.html @@ -0,0 +1,78 @@ +--- +title: Division (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JS + - JavaScript + - Operador de Division + - Operadores + - Referências +translation_of: Web/JavaScript/Reference/Operators/Division +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/equality/index.html b/files/es/web/javascript/reference/operators/equality/index.html new file mode 100644 index 0000000000..d191c15d3b --- /dev/null +++ b/files/es/web/javascript/reference/operators/equality/index.html @@ -0,0 +1,130 @@ +--- +title: Comparación (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JS + - JavaScript + - Operador de comparacion + - Operadores + - Referências +translation_of: Web/JavaScript/Reference/Operators/Equality +original_slug: Web/JavaScript/Referencia/Operadores/Comparacion +--- +<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/reference/operators/function/index.html b/files/es/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..c4f7c4233f --- /dev/null +++ b/files/es/web/javascript/reference/operators/function/index.html @@ -0,0 +1,74 @@ +--- +title: function +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/function +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/function_star_/index.html b/files/es/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..632906f1c8 --- /dev/null +++ b/files/es/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,92 @@ +--- +title: expresión function* +slug: Web/JavaScript/Reference/Operators/function* +tags: + - ECMAScript 2015 + - Expresión Primaria + - Function + - Iterator + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/function* +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/grouping/index.html b/files/es/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..0d41dd7d03 --- /dev/null +++ b/files/es/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,129 @@ +--- +title: Operador de agrupación +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - Expresiones primarias + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Grouping +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/in/index.html b/files/es/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..649f3f9595 --- /dev/null +++ b/files/es/web/javascript/reference/operators/in/index.html @@ -0,0 +1,140 @@ +--- +title: in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/in +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/index.html b/files/es/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..b4ead2ee42 --- /dev/null +++ b/files/es/web/javascript/reference/operators/index.html @@ -0,0 +1,281 @@ +--- +title: Expresiones y operadores +slug: Web/JavaScript/Reference/Operators +tags: + - Descripción + - JavaScript + - Operadores + - Operators + - Referencia +translation_of: Web/JavaScript/Reference/Operators +original_slug: Web/JavaScript/Referencia/Operadores +--- +<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/reference/operators/instanceof/index.html b/files/es/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..4acc592da6 --- /dev/null +++ b/files/es/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,89 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/instanceof +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/new.target/index.html b/files/es/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..d327e63c35 --- /dev/null +++ b/files/es/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,140 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: + - Clases + - ECMAScript6 + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Operators/new.target +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/new/index.html b/files/es/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..6bfeff9461 --- /dev/null +++ b/files/es/web/javascript/reference/operators/new/index.html @@ -0,0 +1,180 @@ +--- +title: Operador new +slug: Web/JavaScript/Reference/Operators/new +tags: + - Expresiones del lado izquierdo + - JavaScript + - Left-hand-side expressions + - Operador + - Operator + - Referencia +translation_of: Web/JavaScript/Reference/Operators/new +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/operator_precedence/index.html b/files/es/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..06a51d7241 --- /dev/null +++ b/files/es/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,298 @@ +--- +title: Precedencia de operadores +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +tags: + - JavaScript + - Operator + - operator details + - operator precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/optional_chaining/index.html b/files/es/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..ff12caff68 --- /dev/null +++ b/files/es/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,188 @@ +--- +title: Encadenamiento opcional +slug: Web/JavaScript/Reference/Operators/Optional_chaining +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +original_slug: Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional +--- +<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/reference/operators/pipeline_operator/index.html b/files/es/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..60b1de0858 --- /dev/null +++ b/files/es/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,79 @@ +--- +title: Operador Pipeline +slug: Web/JavaScript/Reference/Operators/Pipeline_operator +tags: + - Encadenamiento + - Experimental + - JavaScript + - Operador + - Pipeline +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/property_accessors/index.html b/files/es/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..32f20fd150 --- /dev/null +++ b/files/es/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,86 @@ +--- +title: Miembros +slug: Web/JavaScript/Reference/Operators/Property_Accessors +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +original_slug: Web/JavaScript/Referencia/Operadores/Miembros +--- +<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/reference/operators/remainder/index.html b/files/es/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..b8e4540902 --- /dev/null +++ b/files/es/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,83 @@ +--- +title: Resto (%) +slug: Web/JavaScript/Reference/Operators/Remainder +translation_of: Web/JavaScript/Reference/Operators/Remainder +original_slug: Web/JavaScript/Referencia/Operadores/Resto +--- +<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/reference/operators/spread_syntax/index.html b/files/es/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..1738484548 --- /dev/null +++ b/files/es/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,243 @@ +--- +title: Sintáxis Spread +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript6 + - Iteradores + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +original_slug: Web/JavaScript/Referencia/Operadores/Sintaxis_Spread +--- +<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/reference/operators/strict_equality/index.html b/files/es/web/javascript/reference/operators/strict_equality/index.html new file mode 100644 index 0000000000..b9d9522565 --- /dev/null +++ b/files/es/web/javascript/reference/operators/strict_equality/index.html @@ -0,0 +1,102 @@ +--- +title: Igualdad Estricta (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/subtraction/index.html b/files/es/web/javascript/reference/operators/subtraction/index.html new file mode 100644 index 0000000000..06a7852ee6 --- /dev/null +++ b/files/es/web/javascript/reference/operators/subtraction/index.html @@ -0,0 +1,66 @@ +--- +title: Sustracción (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Subtraction +original_slug: Web/JavaScript/Referencia/Operadores/Sustracción +--- +<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/reference/operators/super/index.html b/files/es/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..03e900b564 --- /dev/null +++ b/files/es/web/javascript/reference/operators/super/index.html @@ -0,0 +1,179 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Clases + - ECMAScript 2015 + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/super +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/this/index.html b/files/es/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..da34707919 --- /dev/null +++ b/files/es/web/javascript/reference/operators/this/index.html @@ -0,0 +1,240 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +translation_of: Web/JavaScript/Reference/Operators/this +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/typeof/index.html b/files/es/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..01b9237ba0 --- /dev/null +++ b/files/es/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,77 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/typeof +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/void/index.html b/files/es/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..a9b8c1ac93 --- /dev/null +++ b/files/es/web/javascript/reference/operators/void/index.html @@ -0,0 +1,37 @@ +--- +title: void +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/void +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/yield/index.html b/files/es/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..1783cb6f50 --- /dev/null +++ b/files/es/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,131 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - Característica del lenguaje + - ECMAScript 2015 + - Generadores + - Iterador + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/yield +original_slug: Web/JavaScript/Referencia/Operadores/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/reference/operators/yield_star_/index.html b/files/es/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..7a728175ba --- /dev/null +++ b/files/es/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,200 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/yield* +original_slug: Web/JavaScript/Referencia/Operadores/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> |