diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/javascript/reference | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web/javascript/reference')
410 files changed, 56791 insertions, 131 deletions
diff --git a/files/es/web/javascript/reference/about/index.html b/files/es/web/javascript/reference/about/index.html new file mode 100644 index 0000000000..3382ea7dca --- /dev/null +++ b/files/es/web/javascript/reference/about/index.html @@ -0,0 +1,158 @@ +--- +title: Acerca de +slug: Web/JavaScript/Referencia/Acerca_de +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/About +--- +<div>{{JsSidebar}}</div> + +<h3 id="Nuevas_caracter.C3.ADsticas_en_esta_versi.C3.B3n" name="Nuevas_caracter.C3.ADsticas_en_esta_versi.C3.B3n">Nuevas características en esta versión</h3> + +<p>JavaScript versión 1.5 provee las siguientes nuevas características y extensiones:</p> + +<p><strong>Errores en tiempo de ejecución </strong><br> + Los errores en tiempo de ejecución son ahora reportados como <a href="/es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones" title="es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones">excepciones</a>.</p> + +<p><strong>Extensiones para el formato de números </strong><br> + El formato de números ha sido extendido para incluir los métodos <code>Number.prototype.toExponential</code>, <code>Number.prototype.toFixed</code> y <code>Number.prototype.toPrecision</code>.</p> + +<p><strong>Extensiones de expresiones regulares </strong><br> + Las siguientes extensiones para expresiones regulares han sido añadidas:</p> + +<ul> + <li>Cuantificadores avaros: <code>— +, *, ? y {}</code>:ahora pueden seguirse por un <code>?</code> para forzarlos ha no ser avaros. Para la entrada <strong>?</strong> Véase la página <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li> + <li>Paréntesis sin captura: <code>(?:x)</code>:pueden ser usados en vez de paréntesis con captura <code>(x)</code>. Cuando son utilizados, las sub expresiones de compatibilidad {{ mediawiki.external('match') }} no están disponibles como referencias de respaldo {{ mediawiki.external('back-references') }}. Para la entrada <strong>(?:x)</strong> Véase la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiones regulares</a>.</li> + <li>Aserciones predictivas {{ mediawiki.external('lookahead assertions') }} positivas y negativas son soportadas. Las dos aserguran una comparación dependiente de lo que sigue en la cadena de texto que está siendo cotejada. Ver las entradas para <code>x(?=y) y x(?!y)</code> en la página: <a href="/es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales" title="es/Guía_JavaScript_1.5/Escribir_un_patrón_de_expresión_regular#Uso_de_caracteres_especiales">Escribir un patrón de expresiónes regulares</a>.</li> + <li>La bandera m ha sido añadida para especificar que la expresión regular deberá cotejarse sobre múltiples líneas.</li> +</ul> + +<p><strong>Declaraciones condicionales de funciones </strong><br> + Las funciones ahora pueden ser declaradas al interior de una cláusula if.</p> + +<p><strong>Expresiones funcionales </strong><br> + Las funciones ahora pueden ser declaradas al interior de una expresión.</p> + +<p><strong>Cláusulas Catch múltiples </strong><br> + Las cláusulas Catch múltiples en una sentencia try...catch son soportadas.</p> + +<p><strong>Constantes </strong><br> + Constantes nominadas como sólo de lectura son soportadas. Esta característica está disponible únicamente en la implementación C de JavaScript.</p> + +<p><strong>Obtenedores y Modificadores (Getters and Setters) </strong><br> + Los editores de JavaScript ahora pueden añadir obtenedores {{ mediawiki.external('getters') }} y modificadores {{ mediawiki.external('setters') }} a sus objetos. Esta característica está disponible únicamente en la implementación C de JavaScript.</p> + +<h3 id="Qu.C3.A9_deber.C3.ADa_saberse_ya" name="Qu.C3.A9_deber.C3.ADa_saberse_ya">Qué debería saberse ya</h3> + +<p>Esta referencia asume que usted tiene a su respaldo el siguiente conocimiento básico:</p> + +<ul> + <li>Un entendimiento general de la Internet y de la World Wide Web (WWW).</li> + <li>Un conocimiento práctico del lenguaje de marcas para Hipertexto {{ mediawiki.external('HyperText Markup Language') }} (<a href="/es/HTML" title="es/HTML">HTML</a>).</li> +</ul> + +<p>Es beneficioso alguna experiencia en programación en lenguajes como C o Visual Basic, pero no es requerido.</p> + +<h3 id="Versiones_de_JavaScript" name="Versiones_de_JavaScript">Versiones de JavaScript</h3> + +<p>Cada versión del servidor Netscape Enterprise también soporta una versión diferente de JavaScript. Para ayudarle a escribir sus scripts para que sean compatibles con múltiples versiones de un servidor Enterprise, este manual lista la versión de JavaScript en la cual cada característica fue implementada.</p> + +<p>La siguiente tabla lista las veriones de JavaScript soportadas por las diferentes versiones de Navegadores. Versiones de Navegadores anteriores a la 2.0 no soportan JavaScript.</p> + +<h4 id="JavaScript_y_Versiones_de_Navegadores" name="JavaScript_y_Versiones_de_Navegadores">JavaScript y Versiones de Navegadores</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Versión de JavaScript</td> + <td class="header">Versión del Navegador</td> + </tr> + <tr> + <td>JavaScript 1.0</td> + <td>Navegador 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navegador 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navegador 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navegador 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td>n/a</td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navegador 6.0 + <p>Mozilla 0.6x-0.9x<br> + (navegador de código abierto)</p> + </td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td>Mozilla Firefox 1.5</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td>Mozilla Firefox 2</td> + </tr> + </tbody> +</table> + +<p>Cada versión del servidor Netscape Enterprise también soporta una versión diferente de JavaScript. Para ayudarle a escribir sus scripts para que sean compatibles con múltiples versiones de un servidor Enterprise, este manual usa una abreviación para indicar la versión del servidor en el cual cada característica fue implementada.</p> + +<h4 id="JavaScript_and_Netscape_Enterprise_Server_Versions" name="JavaScript_and_Netscape_Enterprise_Server_Versions">JavaScript and Netscape Enterprise Server Versions</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Abbreviation</td> + <td class="header">Enterprise Server Version</td> + </tr> + <tr> + <td>NES 2.0</td> + <td>Netscape Enterprise Server 2.0</td> + </tr> + <tr> + <td>NES 3.0</td> + <td>Netscape Enterprise Server 3.0</td> + </tr> + </tbody> +</table> + +<h3 id="D.C3.B3nde_encontrar_informaci.C3.B3n_de_JavaScript" name="D.C3.B3nde_encontrar_informaci.C3.B3n_de_JavaScript">Dónde encontrar información de JavaScript</h3> + +<p>La documentación de JavaScript incluye los siguientes libros:</p> + +<ul> + <li><a href="/es/Guía_JavaScript_1.5" title="es/Guía_JavaScript_1.5">Guía de JavaScript 1.5</a> provee la información sobre el lenguaje JavaScript y sus objetos.</li> + <li><a href="/es/Referencia_de_JavaScript_1.5" title="es/Referencia_de_JavaScript_1.5">Referencia de JavaScript 1.5</a> (éste manual) provee material de referencia para el lenguaje JavaScript.</li> +</ul> + +<p>Si usted es principiante con JavaScript, comience por la <a href="/es/Guía_JavaScript_1.5" title="es/Guía_JavaScript_1.5">Guía de JavaScript</a> y una vez que haya obtenido firmes entendimientos de sus fundamentos, debe seguir con la <a href="/es/Referencia_de_JavaScript_1.5" title="es/Referencia_de_JavaScript_1.5">Referencia de JavaScript 1.5</a> para conseguir más detalles individuales acerca de los objetos y las sentencias.</p> + +<h3 id="Convenciones_en_el_documento" name="Convenciones_en_el_documento">Convenciones en el documento</h3> + +<p>Las aplicaciones JavaScript se ejecutan en muchos sistemas operativos; la información en este libro se aplica a todas las versiones. Las rutas {{ mediawiki.external('paths') }} para archivos y directorios están dadas en un formato Windows (con backslashes separando los nombres de directorios). Para las versiones Unix, la ruta de los directorios son las mismas, excepto que deben usarse slashes en vez de backslashes para separar los directorios.</p> + +<p>Esta guía utiliza los localizadores uniformes de recursos {{ mediawiki.external('uniform resource locators') }} (URLs) de la siguiente forma:</p> + +<p><code><span class="nowiki">http://servidor.dominio/path/file.html</span></code></p> + +<p>En estos URLs, "servidor" representa el nombre del servidor en el cual puede ejecutar su aplicación (p.e., busqueda1, www), "dominio" representa un nombre de dominio de Internet (p.e., netscape.com, uiuc.edu), "path" representa la estructura de directorios en el servidor y "file.html" representa un nombre individual de archivo. En general, los items en italica en un URLs se mantienen en su lugar y los items en un tipo normal de fuente monospace son literales. Si su servidor tiene habilitada la capa de sockets seguros {{ mediawiki.external('Secure Sockets Layer') }} (SSL), deberá usar https en lugar de http en el URL.</p> + +<p>Esta guía utiliza las siguientes convenciones de tipo de fuente:</p> + +<ul> + <li>La fuente <code>monospace font</code> es usada para listados de código y código de ejemplo, para las API y elementos del lenguaje (tales como nombres de métodos y nombres de propiedades), nombres de archivos, nombres de rutas, nombres de directorios, etiquetas HTML y cualquier texto que deberá ser digitado en la pantalla. (La fuente Monospace italic es usada para fijar lugares embedidos que deben mantenerse en el código.)</li> + <li>El tipo <em>Italic type</em> es usado para títulos de libros, para enfatizar, para variables y lugares que deben mantenerse y las palabras usadas en sentido literal.</li> + <li>La negrillas <strong>Boldface type</strong> son utilizadas para términos del glosario.</li> +</ul> + +<p> </p> diff --git a/files/es/web/javascript/reference/classes/constructor/index.html b/files/es/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..9ad7ec8de9 --- /dev/null +++ b/files/es/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,102 @@ +--- +title: constructor +slug: Web/JavaScript/Referencia/Classes/constructor +tags: + - Clases + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>El método constructor es un metodo especial para crear e inicializar un objeto creado a partir de una clase.</p> + +<p>El código fuente para este ejemplo interactivo se encuentra almacenado en un repositorio de Github. Si quieres 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 envíanos una solicitud para extraer el código (pull request).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">constructor([argumentos]) { ... }</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Sólo puede haber un método especial con el nombre de "constructor" en una clase. Un error de sintaxis será lanzado, si la clase contiene más de una ocurrencia de un método constructor.</p> + +<p>Un constructor puede utilizar la palabra clave super para llamar al constructor de una clase padre.</p> + +<p>Si no especifica un método constructor, se utiliza un constructor predeterminado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_constructor">Usando el método constructor</h3> + +<p>Este fragmento de código se toma de la <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a>).</p> + +<pre class="brush: js notranslate">class Square extends Polygon { + constructor(length) { + // Aquí, llama al constructor de la clase padre con sus longitudes + // contemplando la anchura y la altura del Polígono + super(length, length); + // Nota: En las clases derivadas, super() se debe llamar primero + // Se puede utilizar "this". Dejando esto causará un error de + //referencia. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Constructores_por_defecto">Constructores por defecto</h3> + +<p>Si no especifica un método constructor, se utiliza un constructor predeterminado. Para las clases base, el constructor por defecto es:</p> + +<pre class="brush: js notranslate">constructor() {} +</pre> + +<p>Para las clases derivadas, el constructor por defecto es:</p> + +<pre class="brush: js notranslate">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<p>La tabla de compatibilidad de esta pagina está generada a partir de data estructurada. Si quieres contribuir a la data, por favor dirígete a <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</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/es/web/javascript/reference/classes/extends/index.html b/files/es/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..6781c3801e --- /dev/null +++ b/files/es/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,167 @@ +--- +title: extends +slug: Web/JavaScript/Referencia/Classes/extends +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>La palabra clave <strong>extends</strong> es usada en la <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaración</a> o <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expresión</a> de clases, para crear una clase hija de otra.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La palabra clave <code>extends</code> se puede usar para crear una subclase a partir de clases personalizadas, así como sus objetos incorporados.</p> + +<p>La propiedad <code>.prototype</code> de la nueva subclase debe ser un {{jsxref("Object")}} o {{jsxref("null")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Como_usar_extends">Como usar <code>extends</code></h3> + +<p>El primer ejemplo crea una clase con el nombre <code>Square</code> a partir de una clase llamada <code>Polygon</code>. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Aquí se invoca el constructor de la clase padre con longitud + // proporcionada por el ancho y alto de Polygon + super(length, length); + // Nota: En las clases extendidas, se debe llamar a super() + // antes de poder usar 'this'. El no hacerlo provocará un reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Como_usar_extends_con_objetos_incorporados">Como usar <code>extends</code> con objetos incorporados</h3> + +<p>Este ejemplo extiende el objeto incorporado {{jsxref("Date")}}. Este ejemplo ha sido extraido del siguiente <a href="https://googlechrome.github.io/samples/classes-es6/index.html">live demo</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(código fuente)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; + return this.getDate() + "-" + months[this.getMonth()] + "-" + this.getFullYear(); + } +}</pre> + +<h3 id="Extendiendo_de_null">Extendiendo de <code>null</code></h3> + +<p>Extender de {{jsxref("null")}} es como hacerlo de una clase normal, excepto que el objeto prototype no hereda de {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</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>Basic support</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</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> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></li> +</ul> diff --git a/files/es/web/javascript/reference/classes/index.html b/files/es/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..0f108dda68 --- /dev/null +++ b/files/es/web/javascript/reference/classes/index.html @@ -0,0 +1,372 @@ +--- +title: Clases +slug: Web/JavaScript/Referencia/Classes +tags: + - Classes + - ECMAScript 2015 + - Herencia + - Intermedio + - JavaScript + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>Las clases de javascript, introducidas en ECMAScript 2015, son una mejora sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las clases <strong>no</strong> introduce un nuevo modelo de herencia orientada a objetos en JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple para crear objetos y lidiar con la herencia.</p> + +<h2 id="Definiendo_clases">Definiendo clases</h2> + +<p>Las clases son "<a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a> especiales", como las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">expresiones de funciones</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declaraciones de funciones</a>, la sintaxis de una clase tiene dos componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">expresiones de clases</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">declaraciones de clases</a>.</p> + +<h3 id="Declaración_de_clases">Declaración de clases</h3> + +<p>Una manera de definir una clase es mediante una <strong>declaración de clase</strong><em>. </em>Para declarar una clase, se utiliza la palabra reservada <code>class</code> y un nombre para la clase "Rectangulo".</p> + +<pre class="brush: js notranslate">class Rectangulo { + constructor(alto, ancho) { + this.alto = alto; + this.ancho = ancho; + } +}</pre> + +<h4 id="Alojamiento">Alojamiento</h4> + +<p>Una importante diferencia entre las <strong>declaraciones de funciones</strong><em> y </em>las <strong>declaraciones de clases</strong> es que las <strong>declaraciones de funciones</strong><em> </em>son alojadas y las <strong>declaraciones de clases</strong><em> </em>no lo son. En primer lugar necesitas declarar tu clase y luego acceder a ella, de otro modo el ejemplo de código siguiente arrojará un {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad notranslate">const p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Expresiones_de_clases">Expresiones de clases</h3> + +<p>Una <strong>expresión de clase</strong> es otra manera de definir una clase. Las expresiones de clase pueden ser nombradas o anónimas. El nombre dado a la <strong>expresión de clase</strong> nombrada es local dentro del cuerpo de la misma.</p> + +<pre class="notranslate">// Anonima +let Rectangulo = class { + constructor(alto, ancho) { + this.alto = alto; + this.ancho = ancho; + } +}; + +console.log(Rectangulo.name); +// output: "Rectangulo" + +// Nombrada +let Rectangulo = class Rectangulo2 { + constructor(alto, ancho) { + this.alto = alto; + this.ancho = ancho; + } +}; +console.log(Rectangulo.name); +// output: "Rectangulo2" +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Las <strong>expresiones</strong> de clase están sujetas a las mismas restricciones de elevación que se describen en la sección {{anch("Class declarations")}}.</p> +</div> + +<h2 id="Cuerpo_de_la_clase_y_definición_de_métodos">Cuerpo de la clase y definición de métodos</h2> + +<p>El contenido<em> </em>de una <strong>clase </strong>es la parte que se encuentra entre las llaves <code>{}</code>. Este es el lugar se definen los <strong>miembros de clase,</strong> como los <strong>métodos </strong>o <strong>constructores.</strong></p> + +<h3 id="Modo_estricto">Modo estricto</h3> + +<p>El cuerpo de las <em>declaraciones de clase</em> y las <em>expresiones de clase</em> son ejecutadas en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">modo estricto.</a> En otras palabras, el código escrito aquí está sujeto a una sintaxis más estricta para aumentar el rendimiento, se arrojarán algunos errores silenciosos y algunas palabras clave están reservadas para versiones futuras de ECMAScript.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>El método <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> es un método especial para crear e inicializar un objeto creado con una <code>clase</code>. Solo puede haber un método especial con el nombre "constructor" en una clase. Si esta contiene mas de una ocurrencia del método <code><strong>constructor, </strong></code>se arrojará un <em>Error </em>{{jsxref("SyntaxError")}}</p> + +<p>Un <strong>constructor</strong> puede usar la <em>palabra reservada</em> <strong><code>super </code></strong>para llamar al <strong>constructor </strong>de una <em>superclase</em></p> + +<h3 id="Métodos_prototipo">Métodos prototipo</h3> + +<p>Vea también <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">métodos definidos</a>.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">class Rectangulo { + constructor (alto, ancho) { + this.alto = alto; + this.ancho = ancho; + } + // Getter + get area() { + return this.calcArea(); + } + // Método + calcArea () { + return this.alto * this.ancho; + } +} + +const cuadrado = new Rectangulo(10, 10); + +console.log(cuadrado.area); // 100</code></pre> + +<div class="syntaxbox"></div> + +<h3 id="Métodos_estáticos">Métodos estáticos</h3> + +<p>La <em>palabra clave</em> <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> define un método estático para una clase. Los métodos estáticos son llamados sin instanciar su clase y <strong>no</strong> pueden ser llamados mediante una instancia de clase. Los métodos estáticos son a menudo usados para crear funciones de utilidad para una aplicación.</p> + +<pre class="brush: js notranslate">class Punto { + constructor ( x , y ){ + this.x = x; + this.y = y; + } + + static distancia ( a , b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.sqrt ( dx * dx + dy * dy ); + } +} + +const p1 = new Punto(5, 5); +const p2 = new Punto(10, 10); + +console.log (Punto.distancia(p1, p2)); // 7.0710678118654755</pre> + +<h3 id="Boxing_con_prototipos_y_métodos_estáticos">"Boxing" con prototipos y métodos estáticos</h3> + +<p>Cuando un método estático o método del prototipo es llamado sin un valor para "this" (o con "this" como booleano, cadena, número, undefined o null), entonces el valor de "this" será <strong>undefined</strong> dentro de la funciona llamada. <em>Autoboxing </em>no ocurrirá. El comportamiento será igual inclusive si se escribe el código en modo no estricto.</p> + +<pre class="notranslate"><code>class Animal { + hablar() { + return this; + } + static comer() { + return this; + } +} + +let obj = new Animal(); +obj.hablar(); // Animal {} +let hablar = obj.hablar; +hablar(); // undefined + +Animal.comer() // class Animal +let comer = Animal.comer; +comer(); // undefined</code></pre> + +<p>Si se escribe el código del cuadro superior usando clases función tradicionales, entonces autoboxing ocurrirara porque tomará valor de "this" sobre la función que es llamada.</p> + +<pre class="notranslate"><code>function Animal() { } + +Animal.prototype.hablar = function(){ + return this; +} + +Animal.comer = function() { + return this; +} + +let obj = new Animal(); +let hablar = obj.hablar; +hablar(); // global object + +let hablar = Animal.hablar; +hablar(); // global object</code></pre> + +<h2 id="Subclases_con_extends">Subclases con <code>extends</code></h2> + +<p>La palabra clave <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> es usada en <em>declaraciones de clase</em> o <em>expresiones de clase</em> para crear una clase hija.</p> + +<pre class="brush: js notranslate"><code>class Animal { + constructor(nombre) { + this.nombre = nombre; + } + + hablar() { + console.log(this.nombre + ' hace un ruido.'); + } +} + +class Perro extends Animal { + hablar() { + console.log(this.nombre + ' ladra.'); + } +}</code></pre> + +<p>También se pueden extender las clases tradicionales basadas en funciones:</p> + +<pre class="brush: js notranslate">function Animal (nombre) { + this.nombre = nombre; +} +Animal.prototype.hablar = function () { + console.log(this.nombre + 'hace un ruido.'); +} + +class Perro extends Animal { + hablar() { + super.hablar(); + console.log(this.nombre + ' ladra.'); + } +} + +var p = new Perro('Mitzie'); +p.hablar();</pre> + +<p>Fijarse que las clases no pueden extender objectos regulares (literales). Si se quiere heredar de un objecto regular, se debe user {{jsxref("Object.setPrototypeOf()")}}::</p> + +<pre class="notranslate"><code>var Animal = { + hablar() { + console.log(this.nombre + 'hace ruido.'); + } +}; + +class Perro { + constructor(nombre) { + this.nombre = nombre; + } + hablar() { + console.log(this.nombre + ' ladra.'); + } +} + +Object.setPrototypeOf(Perro.prototype, Animal); + +var d = new Perro('Mitzie'); +d.hablar();</code></pre> + +<h2 id="Especies">Especies</h2> + +<p>Quizás se quiera devolver objetos {{jsxref("Array")}} derivados de la clase array MyArray. El patron <em>species</em> permite sobreescribir constructores por defecto.</p> + +<p>Por ejemplo, cuando se usan metodos del tipo {{jsxref("Array.map", "map()")}} que devuelven el constructor por defecto, se quiere que esos métodos devuelvan un objeto padre Array, en vez de MyArray. El símbolo {{jsxref("Symbol.species")}} permite hacer:</p> + +<pre class="brush: js notranslate"><code>class MyArray extends Array { + // Sobre escribe species sobre el constructor padre Array + static get [Symbol.species]() { return Array; } +} + +var a = new MyArray(1,2,3); +var mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true</code> +</pre> + +<h2 id="Llamadas_a_súperclases_con_super">Llamadas a súperclases con <code>super</code></h2> + +<p>La palabra clave <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> es usada para llamar funciones del objeto padre.</p> + +<pre class="notranslate"><code>class Gato { + constructor(nombre) { + this.nombre = nombre; + } + + hablar() { + console.log(this.nombre + ' hace ruido.'); + } +} + +class Leon extends Gato { + hablar() { + super.hablar(); + console.log(this.nombre + ' maulla.'); + } +}</code></pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Subclases abstractas or <em>mix-ins</em> son plantillas de clases. Una clase ECMAScript solo puede tener una clase padre, con lo cual la herencia multiple no es posible. La funcionalidad debe ser proporcionada por la clase padre.</p> + +<p>Una función con una clase padre como entrada y una subclase extendiendo la clase padre como salida puede ser usado para implementar mix-ins en EMCAScript:</p> + +<pre class="brush: js notranslate"><code>var calculatorMixin = Base => class extends Base { + calc() { } +}; + +var randomizerMixin = Base => class extends Base { + randomize() { } +};</code></pre> + +<p>Una clase que use este método puede ser escrita tal que así:</p> + +<pre class="brush: js notranslate"><code>class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</code></pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>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(42.0)}}</td> + <td>Available in the Nightly channel only (since February 2015)</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>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>Available in the Nightly channel only (since February 2015)</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/Funciones">Funciones</a></li> + <li>{{jsxref("Statements/class", "class declaration")}}</li> + <li>{{jsxref("Operators/class", "class expression")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/classes/private_class_fields/index.html b/files/es/web/javascript/reference/classes/private_class_fields/index.html new file mode 100644 index 0000000000..5826cc125b --- /dev/null +++ b/files/es/web/javascript/reference/classes/private_class_fields/index.html @@ -0,0 +1,201 @@ +--- +title: Private class fields +slug: Web/JavaScript/Referencia/Classes/Private_class_fields +translation_of: Web/JavaScript/Reference/Classes/Private_class_fields +--- +<div> +<p><font><font>Las propiedades de la clase son públicas de forma predeterminada y se pueden examinar o modificar fuera de la clase. </font><font>Sin embargo, existe </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=es&u=https://github.com/tc39/proposal-class-fields&usg=ALkJrhgmG5nvuZjYd2YQRSuRJHti_gdXeQ" rel="noopener"><font><font>una propuesta experimental</font></font></a><font><font> para permitir la definición de campos de clase privados utilizando un </font></font><code>#</code><font><font>prefijo </font><font>hash </font><font>.</font></font></p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">class ClassWithPrivateField { + #privateField +} + +class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } +} + +class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD +} +</pre> + +<h3 id="Campos_estáticos_privados"><font><font>Campos estáticos privados </font></font></h3> + +<p><font><font>Los campos privados son accesibles en el constructor de clases desde dentro de la propia declaración de clases.</font></font></p> + +<p><font><font>La limitación de las variables estáticas que se llaman solo por métodos estáticos aún se mantiene</font></font></p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } +} + +console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)</pre> + +<p><font><font>Los campos estáticos privados se agregan al constructor de la clase en el momento de la evaluación de la clase.</font></font></p> + +<p><font><font>Existe una restricción de procedencia en los campos estáticos privados. </font><font>Solo la clase que define el campo estático privado puede acceder al campo.</font></font></p> + +<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>.</font></font></p> + +<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } +} + +class SubClass extends BaseClassWithPrivateStaticField { } + +let error = null + +try { + SubClass.basePublicStaticMethod() +} catch(e) { error = e} + +console.assert(error instanceof TypeError) +</pre> + +<h3 id="Campos_de_instancia_privados"><font><font>Campos de instancia privados</font></font></h3> + +<p><font><font>Los campos de instancia privados se declaran con </font></font><strong><font><font># nombres </font></font></strong><font><font> (pronunciados " </font></font><em><font><font>nombres hash</font></font></em><font><font> "), que son identificadores con el prefijo </font></font><code>#</code><font><font>. </font><font>El </font></font><code>#</code><font><font>es una parte del nombre propio. </font><font>También se utiliza para la declaración y el acceso.</font></font></p> + +<p><font><font>La encapsulación es impuesta por el lenguaje. </font><font>Es un error de sintaxis referirse a </font></font><code>#</code><font><font>nombres que están fuera del alcance.</font></font></p> + +<pre class="brush: js notranslate">class ClassWithPrivateField { + #privateField + + constructor() { + this.#privateField = 42 + this.#randomField = 666 // Syntax error + } +} + +const instance = new ClassWithPrivateField() +instance.#privateField === 42 // Syntax error +</pre> + +<h3 id="Métodos_privados"><font><font>Métodos privados</font></font></h3> + +<h4 id="Métodos_estáticos_privados"><font><font>Métodos estáticos privados</font></font></h4> + +<p><font><font>Al igual que su equivalente público, los métodos estáticos privados se invocan en la propia clase, no en instancias de la clase. </font><font>Al igual que los campos estáticos privados, solo se puede acceder a ellos desde dentro de la declaración de clase.</font></font></p> + +<p><font><font>Los métodos estáticos privados pueden ser funciones generadoras, asíncronas y asíncronas.</font></font></p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42 + } + + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } + + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); +console.assert(ClassWithPrivateStaticMethod.publicStaticMethod2() === 42); +</pre> + +<p><font><font>Esto puede conducir a un comportamiento inesperado al usar </font></font><strong><code>this</code></strong><font><font>. </font><font>En el siguiente ejemplo se </font></font><code>this</code><font><font>hace referencia a la </font></font><code>Derived</code><font><font>clase (no a la </font></font><code>Base</code><font><font>clase) cuando intentamos llamar </font></font><code>Derived.publicStaticMethod2()</code><font><font>, y por lo tanto exhibe la misma "restricción de procedencia" que se mencionó anteriormente:</font></font></p> + +<pre class="brush: js notranslate">class Base { + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } +} + +class Derived extends Base {} + +console.log(Derived.publicStaticMethod1()); // 42 +console.log(Derived.publicStaticMethod2()); // TypeError +</pre> + +<h4 id="Métodos_de_instancia_privada"><font><font>Métodos de instancia privada</font></font></h4> + +<p><font><font>Los métodos de instancia privada son métodos disponibles en instancias de clase cuyo acceso está restringido de la misma manera que los campos de instancia privada.</font></font></p> + +<pre class="brush: js notranslate">class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world' + } + + getPrivateMessage() { + return this.#privateMethod() + } +} + +const instance = new ClassWithPrivateMethod() +console.log(instance.getPrivateMessage()) +// expected output: "hello world"</pre> + +<p><font><font>Los métodos de instancia privada pueden ser funciones generadoras, asíncronas o asíncronas. </font><font>Los getters y setters privados también son posibles:</font></font></p> + +<pre class="brush: js notranslate">class ClassWithPrivateAccessor { + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } +} + +new ClassWithPrivateAccessor(); +// expected output: "✨hello world✨" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Public and private instance fields', '#prod-FieldDefinition', 'FieldDefinition')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes.private_class_fields")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Public class fields</a></li> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/es/web/javascript/reference/classes/public_class_fields/index.html b/files/es/web/javascript/reference/classes/public_class_fields/index.html new file mode 100644 index 0000000000..446c63c001 --- /dev/null +++ b/files/es/web/javascript/reference/classes/public_class_fields/index.html @@ -0,0 +1,386 @@ +--- +title: Class fields +slug: Web/JavaScript/Referencia/Classes/Class_fields +tags: + - Clases + - JavaScript +translation_of: Web/JavaScript/Reference/Classes/Public_class_fields +--- +<div>{{JsSidebar("Classes")}}</div> + +<div class="note">Las declaraciones de campos públicos y privados son una <a href="https://github.com/tc39/proposal-class-fields">característica experimental (en estado 3)</a> propuesta por el <a href="https://tc39.github.io/beta/">TC39</a>, el comite de estandares de JavaScript. El soporte y funcionamiento en navegadores es limitado, pero la funcionalidad puede ser usada a través de un paso durante el proceso del build por medio de sistemas como <a href="https://babeljs.io/">Babel</a>. Revise <a href="#Browser_compatibility">compat information</a> mas abajo.</div> + +<p>Los campos públicos y estáticos son propieades editables, enumerables, y configurables. A diferencia de su contraparte privada, estos participan en la herencia de prototipo.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">class ClassWithInstanceField { + instanceField = 'instance field' +} + +class ClassWithStaticField { + static staticField = 'static field' +} + +class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world' + } +} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Campos_públicos_estáticos">Campos públicos estáticos</h3> + +<p>Los campos estáticos públicos son útiles cuando desea que exista un campo solo una vez por clase, no en cada instancia de clase que cree. Esto es útil para cachés, configuración fija o cualquier otro dato que no necesite replicarse en todas las instancias.</p> + +<p>Los campos estáticos públicos se declaran utilizando la palabra clave <code>static</code>. Se agregan al constructor de la clase en el momento de la evaluación de la clase utilizando {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Se accede nuevamente desde el constructor de la clase.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static staticField = 'static field'; +} + +console.log(ClassWithStaticField.staticField); +// expected output: "static field" +</pre> + +<p>Campos sin inicializadores son inicializados como <code>undefined</code>.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static staticField; +} + +console.assert(ClassWithStaticField.hasOwnProperty('staticField')); +console.log(ClassWithStaticField.staticField); +// expected output: "undefined"</pre> + +<p>Los campos estáticos públicos no se reinicializan en las subclases, pero se puede acceder a ellos a través de la cadena de prototipo.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static baseStaticField = 'base field'; +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = 'sub class field'; +} + +console.log(SubClassWithStaticField.subStaticField); +// expected output: "sub class field" + +console.log(SubClassWithStaticField.baseStaticField); +// expected output: "base field"</pre> + +<p>Cuando se inicializasn campos <code>this</code> se refiere al constuctor de clase. Tambien puede ser referenciado por nombre, y se puede usar <code>super</code> para obtener el constructor de la superclase si lo tiene.</p> + +<pre class="brush: js notranslate">class ClassWithStaticField { + static baseStaticField = 'base static field'; + static anotherBaseStaticField = this.baseStaticField; + + static baseStaticMethod() { return 'base static method output'; } +} + +class SubClassWithStaticField extends ClassWithStaticField { + static subStaticField = super.baseStaticMethod(); +} + +console.log(ClassWithStaticField.anotherBaseStaticField); +// expected output: "base static field" + +console.log(SubClassWithStaticField.subStaticField); +// expected output: "base static method output" +</pre> + +<h3 id="Campos_de_instancia_públicos">Campos de instancia públicos</h3> + +<p>Los campos de instancia públicos existen en cada instancia de la clase que se ha creado. Al declarar un campo publico podemos asegurarnos que dicho campo siempre esta presente, y la definicion de la clase esta auto-documentada.</p> + +<p>Los campos de instancia públicos son agregados with <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> ya sea a la hora de ser construido en la clase base (antes que el metodo constructor corra), o justo despues que <code>super()</code> returne en una subclase.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + instanceField = 'instance field'; +} + +const instance = new ClassWithInstanceField(); +console.log(instance.instanceField); +// expected output: "instance field"</pre> + +<p>Campos sin inicializadores son inicilizados en <code>undefined</code>.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + instanceField; +} + +const instance = new ClassWithInstanceField(); +console.assert(instance.hasOwnProperty('instanceField')); +console.log(instance.instanceField); +// expected output: "undefined"</pre> + +<p>Al igual que las propiedades, los nombres de campos pueden ser calculados (computed)</p> + +<pre class="brush: js notranslate">const PREFIX = 'prefix'; + +class ClassWithComputedFieldName { + [`${PREFIX}Field`] = 'prefixed field'; +} + +const instance = new ClassWithComputedFieldName(); +console.log(instance.prefixField); +// expected output: "prefixed field"</pre> + +<p>Cuando se inicializan campos <code>this</code> se refiere a la instancia de clase que esta siendo construida. Al igual que con los metodos publicos de instancia, si usted esta en una subclase puede acceder a al prototypo de la superclase usando <code>super</code>.</p> + +<pre class="brush: js notranslate">class ClassWithInstanceField { + baseInstanceField = 'base field'; + anotherBaseInstanceField = this.baseInstanceField; + baseInstanceMethod() { return 'base method output'; } +} + +class SubClassWithInstanceField extends ClassWithInstanceField { + subInstanceField = super.baseInstanceMethod(); +} + +const base = new ClassWithInstanceField(); +const sub = new SubClassWithInstanceField(); + +console.log(base.anotherBaseInstanceField); +// expected output: "base field" + +console.log(sub.subInstanceField); +// expected output: "base method output"</pre> + +<h3 id="Métodos_públicos">Métodos públicos</h3> + +<h4 id="Métodos_públicos_estáticos">Métodos públicos estáticos</h4> + +<p>La palabra reservada <code><strong>static</strong></code> define un metodo estático para una clase. Los métodos estáticos no son llamads usando una instancia de la clase. En lugar de eso son llamados sobre la clase como tal. Estos metodos estáticos son frecuentemente funciones utilitarias que permiten por ejemplo la creación y clonacion de objetos.</p> + +<pre class="brush: js notranslate">class ClassWithStaticMethod { + static staticMethod() { + return 'static method has been called.'; + } +} + +console.log(ClassWithStaticMethod.staticMethod()); +// expected output: "static method has been called."</pre> + +<p>Los métodos estáticos son agregados al constructor de la clase usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a> duranten el evaluación de la clase. Estos metodos son "escribibles" (writable), no-enumerables y configurables.</p> + +<h4 id="Métodos_públicos_de_instancia">Métodos públicos de instancia</h4> + +<p>Como su nombre lo indica, los métodos publicos de instancia son metodos que estan disponibles para cualquier instancia de una clase.</p> + +<pre class="brush: js notranslate">class ClassWithPublicInstanceMethod { + publicMethod() { + return 'hello world'; + } +} + +const instance = new ClassWithPublicInstanceMethod(); +console.log(instance.publicMethod()); +// expected output: "hello world"</pre> + +<p>Los métodos públicos de instancia son agregeados al prototipo de clase durante la evaluacón de la clase usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a>. Estos metodos son "escribibles" (writable), no-enumerables y configurables.</p> + +<p>Usted puede usar un generador, async y funciones generadoras asincronas</p> + +<pre class="brush: js notranslate">class ClassWithFancyMethods { + *generatorMethod() { } + async asyncMethod() { } + async *asyncGeneratorMethod() { } +}</pre> + +<p>Dentro de un metodo de instancia, <code>this</code> se referie a la instancia como tal. En las subclases, <code>super</code> le permite acceder el prototipo de la superclase, permitiendo así llamar métodos de la superclase.</p> + +<pre class="brush: js notranslate">class BaseClass { + msg = 'hello world'; + basePublicMethod() { + return this.msg; + } +} + +class SubClass extends BaseClass { + subPublicMethod() { + return super.basePublicMethod(); + } +} + +const instance = new SubClass(); +console.log(instance.subPublicMethod()); +// expected output: "hello world" +</pre> + +<p>Existen metodos especiales llamados "Getters" y "Setters" que se vinculan a una propiedad de una clase, y que son ejecutados o llamados cuando esa propiedad es consultada o moditficada. Puede usar las palabras reservaddas <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a> para declarar una instancia pública de "getter" or "setter". [N.T. preferí decir Getter/Setter que decir Consultadores/Mofificadores]</p> + +<pre class="brush: js notranslate">class ClassWithGetSet { + #msg = 'hello world'; + get msg() { + return this.#msg; + } + set msg(x) { + this.#msg = `hello ${x}`; + } +} + +const instance = new ClassWithGetSet(); +console.log(instance.msg); +// expected output: "hello world" + +instance.msg = 'cake'; +console.log(instance.msg); +// expected output: "hello cake" +</pre> + +<h2 id="Campos_privados">Campos privados</h2> + +<h3 id="Campos_privados_estáticos">Campos privados estáticos</h3> + +<p>Private fields are accessible on the class constructor from inside the class declaration itself.</p> + +<p>The limitation of static variables being called by only static methods still holds.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD; + + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42; + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD; + } +} + +assert(ClassWithPrivateStaticField.publicStaticMethod() === 42);</pre> + +<p>Private static fields are added to the class constructor at class evaluation time.</p> + +<p>There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field. This can lead to unexpected behaviour when using <strong><code>this</code></strong></p> + +<pre class="brush: js notranslate">class BaseClassWithPrivateStaticField { + static #PRIVATE_STATIC_FIELD; + + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42; + return this.#PRIVATE_STATIC_FIELD; + } +} + +class SubClass extends BaseClassWithPrivateStaticField { } + +assertThrows(() => SubClass.basePublicStaticMethod(), TypeError); +</pre> + +<h3 id="Campos_privados_de_instancia">Campos privados de instancia</h3> + +<p>Private instance fields are declared with <strong># names </strong>( pronounced "hash names"), which are identifiers prefixed with #. The # is a part of the name itself and is used for declaration and accessing as well.</p> + +<p>The encapsulation is enforced by the language. It is a syntax error to refer to # names not in scope.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateField { + #privateField; + + constructor() { + this.#privateField = 42; + this.#randomField = 666; # Syntax error + } +} + +const instance = new ClassWithPrivateField(); +instance.#privateField === 42; // Syntax error +</pre> + +<h2 id="Métodos_privados">Métodos privados</h2> + +<h3 id="Métodos_privados_estáticos">Métodos privados estáticos</h3> + +<p>Like their public equivalent, private static methods are called on the class, not instances of the class. Like private static fields, they are only accessible from inside the class declaration.</p> + +<p>Private static methods may be generator, async and async generator functions.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateStaticMethod { + static #privateStaticMethod() { + return 42; + } + + static publicStaticMethod() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } +} + +assert(ClassWithPrivateStaticField.publicStaticMethod() === 42); +</pre> + +<h3 id="Métodos_privados_de_instancia">Métodos privados de instancia</h3> + +<p>Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.</p> + +<pre class="brush: js notranslate">class ClassWithPrivateMethod { + #privateMethod() { + return 'hello world'; + } + + getPrivateMessage() { + return #privateMethod(); + } +} + +const instance = new ClassWithPrivateMethod(); +console.log(instance.getPrivateMessage()); +// expected output: "hello world"</pre> + +<p>Private instance methods may be generator, async or async generator functions. Private getters and setters are also possible:</p> + +<pre class="brush: js notranslate">class ClassWithPrivateAccessor { + #message; + + get #decoratedMessage() { + return `✨${this.#message}✨`; + } + set #decoratedMessage(msg) { + this.#message = msg; + } + + constructor() { + this.#decoratedMessage = 'hello world'; + console.log(this.#decoratedMessage); + } +} + +new ClassWithPrivateAccessor(); +// expected output: "✨hello world✨" +</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><a href="https://tc39.es/proposal-class-fields/#prod-FieldDefinition">FieldDefinition production</a></td> + <td>Stage 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<h3 id="Campos_públicos_de_clse">Campos públicos de clse</h3> + + + +<p>{{Compat("javascript.classes.public_class_fields")}}</p> + +<h3 id="Campos_privados_de_clase">Campos privados de clase</h3> + +<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("javascript.classes.private_class_fields")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://rfrn.org/~shu/2018/05/02/the-semantics-of-all-js-class-elements.html">The Semantics of All JS Class Elements</a></li> +</ul> diff --git a/files/es/web/javascript/reference/classes/static/index.html b/files/es/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..92f972f171 --- /dev/null +++ b/files/es/web/javascript/reference/classes/static/index.html @@ -0,0 +1,118 @@ +--- +title: static +slug: Web/JavaScript/Referencia/Classes/static +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>La palabra clave <strong>static</strong> define un método estático para una clase.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">static methodName() { ... }</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Los métodos estáticos son llamados sin instanciar su clase. Son habitualmente utilizados para crear funciones para una aplicación.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo demuestra varias cosas. Una de ellas es cómo un método estático es implementado en una clase, otra es que una clase con un miembro estático puede ser sub-claseada. Finalmente demuestra cómo un método estático puede (y cómo no) ser llamado.</p> + +<pre class="brush: js">class Tripple { + static tripple(n) { + n = n || 1; + return n * 3; + } +} + +class BiggerTripple extends Tripple { + static tripple(n) { + return super.tripple(n) * super.tripple(n); + } +} + +console.log(Tripple.tripple()); +console.log(Tripple.tripple(6)); +console.log(BiggerTripple.tripple(3)); +var tp = new Tripple(); +console.log(tp.tripple()); //Logs 'tp.tripple is not a function'.</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</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>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(42.0)}}</td> + <td>Available in the Nightly channel only (since February 2015)</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>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>Available in the Nightly channel only (since February 2015)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li> +</ul> diff --git a/files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html b/files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html new file mode 100644 index 0000000000..f0f18cfbd7 --- /dev/null +++ b/files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html @@ -0,0 +1,292 @@ +--- +title: Características en desuso y obsoletas +slug: Web/JavaScript/Referencia/Características_Desaprobadas +tags: + - Deprecated + - JavaScript + - Obsolete +translation_of: Web/JavaScript/Reference/Deprecated_and_obsolete_features +--- +<p>{{JsSidebar("More")}}</p> + + +<p>Esta página enumera las características de JavaScript que están en desuso (es decir, todavía están disponibles pero se planea eliminarlas) y obsoletas (es decir, que ya no se pueden usar).</p> + +<h2 id="Características_en_desuso">Características en desuso</h2> + +<p>Estas características desaconsejadas aún se pueden usar, pero se deben usar con precaución porque se espera que se eliminen por completo en el futuro. Deberías trabajar para sustituirlas con las versiones recomendadas en tu código.</p> + +<h3 id="Propiedades_de_RegExp">Propiedades de RegExp</h3> + +<p>las siguientes propiedades están en desuso. Esto no afecta su uso en el {{jsxref("String.replace", "reemplazo de cadenas", "", 1)}}:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propiedad</th> + <th>Descripción</th> + </tr> + <tr> + <td>{{jsxref("RegExp.n", "$1-$9")}}</td> + <td> + <p>Coincidencias de subcadenas entre paréntesis, si las hay.<br> + <strong>Precaución:</strong> El uso de estas propiedades puede generar problemas, ya que las extensiones del navegador pueden modificarlas. ¡Evítalas!</p> + </td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "$_")}}</td> + <td>Consulta <code>entrada</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "$*")}}</td> + <td>Consulta <code>multiline</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "$&")}}</td> + <td>Consulta <code>lastMatch</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "$+")}}</td> + <td>Consulta <code>lastParen</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "$`")}}</td> + <td>Consulta <code>leftContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "$'")}}</td> + <td>Consulta <code>rightContext</code>.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.input", "input")}}</td> + <td>La cadena contra la que se compara una expresión regular.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastMatch", "lastMatch")}}</td> + <td>Los últimos caracteres coincidentes.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastParen", "lastParen")}}</td> + <td>La última coincidencia de subcadena entre paréntesis, si la hubiera.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.leftContext", "leftContext")}}</td> + <td>La subcadena que precede a la coincidencia más reciente.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.rightContext", "rightContext")}}</td> + <td>La subcadena que sigue a la coincidencia más reciente.</td> + </tr> + </tbody> +</table> + +<p>Las siguientes ahora son propiedades de instancias de <code>RegExp</code>, ya no del objeto <code>RegExp</code>:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propiedad</th> + <th>Descripción</th> + </tr> + <tr> + <td>{{jsxref("RegExp.global", "global")}}</td> + <td>Si se debe probar o no la expresión regular con todas las posibles coincidencias en una cadena, o solo con la primera.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.ignoreCase", "ignoreCase")}}</td> + <td>Si se deben o no ignorar las mayúsculas/minúsculas al intentar una coincidencia en una cadena.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.lastIndex", "lastIndex")}}</td> + <td>El índice en el que comenzará la siguiente coincidencia.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.multiline", "multiline")}}</td> + <td>Si buscar o no en cadenas de varias líneas.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.source", "source")}}</td> + <td>El texto del patrón.</td> + </tr> + </tbody> +</table> + +<h3 id="Métodos_RegExp">Métodos RegExp</h3> + +<ul> + <li>El método {{jsxref("RegExp.compile", "compile()")}} está en desuso.</li> + <li>El método <code>valueOf</code> ya no está especializado para <code>RegExp</code>. Usa {{jsxref ("Object.valueOf()")}}.</li> +</ul> + +<h3 id="Propiedades_de_función">Propiedades de función</h3> + +<ul> + <li>Las propiedades {{jsxref("Global_Objects Function/caller", "caller")}} y {{jsxref("Global_Objects/Function/argument", "argument")}} están obsoletas porque filtran la función llamadora. En lugar de la propiedad arguments, debes usar el objeto {{jsxref("Functions/arguments", "arguments")}} dentro de los cierres de funciones.</li> +</ul> + +<h3 id="Generador_heredado">Generador heredado</h3> + +<ul> + <li>La {{jsxref("Statements/Legacy_generator_function", "Declaración de función del generador heredado")}} y {{jsxref("Operators/Legacy_generator_function", "Expresión de función del generador heredado")}} están en desuso. En su lugar usa {{jsxref("Statements/function*", "declaraciones function*")}} y {{jsxref ("Operators/function *", "expresión function*")}}.</li> + <li>{{jsxref("Operators/Array_comprehensions", "JS1.7/JS1.8 Array comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} y {{jsxref("Operators/Generator_comprehensions", "JS1.7/JS1.8 Generator comprehension", "#Differences_to_the_older_JS1.7.2FJS1.8_comprehensions")}} están en desuso.</li> +</ul> + +<h3 id="Iterador">Iterador</h3> + +<ul> + <li>{{jsxref("Global_Objects/StopIteration", "StopIteration")}} está en desuso.</li> + <li>{{jsxref("Global_Objects/Iterator", "Iterator")}} está en desuso.</li> +</ul> + +<h3 id="Métodos_de_objeto">Métodos de objeto</h3> + +<ul> + <li>{{jsxref("Object.watch", "watch")}} y {{jsxref("Object.unwatch", "unwatch")}} están en desuso. En su lugar usa {{jsxref("Proxy")}}.</li> + <li><code>__iterator__</code> está en desuso.</li> + <li>{{jsxref("Object.noSuchMethod", "__noSuchMethod__")}} está en desuso. En su lugar usa {{jsxref("Proxy")}}.</li> +</ul> + +<h3 id="Métodos_de_Date">Métodos de <code>Date</code></h3> + +<ul> + <li>{{jsxref("Global_Objects/Date/getYear", "getYear")}} y {{jsxref("Global_Objects/Date/setYear", "setYear")}} se ven afectados por el problema del año 2000 y se han subsumido por {{jsxref("Global_Objects/Date/getFullYear", "getFullYear")}} y {{jsxref("Global_Objects/Date/setFullYear", "setFullYear")}}.</li> + <li>En nuevo código, debes usar {{jsxref("Global_Objects/Date/toISOString", "toISOString")}} en lugar del método en desuso {{jsxref("Global_Objects/Date/toGMTString", "toGMTString")}}.</li> + <li>{{jsxref("Global_Objects/Date/toLocaleFormat", "toLocaleFormat")}} está en desuso.</li> +</ul> + +<h3 id="Funciones">Funciones</h3> + +<ul> + <li>Las {{jsxref ("Operadores/Expression_closures", "expresiones closure", "", 1)}} están en desuso. En su lugar, utiliza {{jsxref("Operators/function", "funciones")}} o {{jsxref("Functions/Arrow_functions", "funciones de flecha", "", 1)}} normales.</li> +</ul> + +<h3 id="Proxy">Proxy</h3> + +<ul> + <li><a href="/es/docs/Archive/Web/Old_Proxy_API">Proxy.create</a> y <a href="/es/docs/Archive/Web/Old_Proxy_API">Proxy.createFunction</a> están en desuso. En su lugar usa {{jsxref("Proxy")}}.</li> + <li>Las siguientes trampas están obsoletas: + <ul> + <li><code>hasOwn</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=980565">bug 980565</a>, Firefox 33).</li> + <li><code>getEnumerablePropertyKeys</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=783829">bug 783829</a>, Firefox 37)</li> + <li><code>getOwnPropertyNames</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1007334">bug 1007334</a>, Firefox 33)</li> + <li><code>keys</code> (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1007334">bug 1007334</a>, Firefox 33)</li> + </ul> + </li> +</ul> + +<h3 id="Secuencias_de_escape">Secuencias de escape</h3> + +<ul> + <li>Las secuencias de escape octales (\ seguida de uno, dos o tres dígitos octales) están en desuso en los literales de cadenas y expresiones regulares.</li> + <li>Las funciones {{jsxref("Global_Objects/escape", "escape")}} y {{jsxref("Global_Objects/unescape", "unescape")}} están en desuso. Usa {{jsxref("Global_Objects/encodeURI", "encodeURI")}}, {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}, {{jsxref("Global_Objects/decodeURI", "decodeURI")}} o {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} para codificar y decodificar secuencias de escape para caracteres especiales.</li> +</ul> + +<h3 id="Métodos_de_cadena">Métodos de cadena</h3> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/tag/HTML%20wrapper%20methods">Métodos de envoltura HTML</a> tal como {{jsxref("String.prototype.fontsize")}} y {{jsxref("String.prototype.big")}}.</li> + <li>{{jsxref("String.prototype.quote")}} se eliminó desde Firefox 37.</li> + <li>el parámetro no estándar <code>flags</code> en {{jsxref("String.prototype.search")}}, {{jsxref("String.prototype.match")}} y {{jsxref("String.prototype.replace ")}} están en desuso.</li> + <li>{{jsxref("String.prototype.substr")}} probablemente no se eliminará pronto, pero está definido en el <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-string.prototype.substr" rel="noopener">Anexo B</a> del estándar ECMA-262, cuya <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">introducción</a> dice: "... Los programadores no deben usar o asumir la existencia de estas características y comportamientos al escribir un nuevo código ECMAScript. ..."</li> +</ul> + +<h2 id="Características_obsoletas">Características obsoletas</h2> + +<p>Estas características obsoletas se han eliminado por completo de JavaScript y ya no se pueden utilizar a partir de la versión indicada de JavaScript.</p> + +<h3 id="Objeto">Objeto</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propiedad</th> + <th>Descripción</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/count", "__count__")}}</td> + <td>Devuelve el número de propiedades enumerables directamente en un objeto definido por el usuario.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/Parent", "__parent__")}}</td> + <td>Apunta al contexto de un objeto.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Object/eval", "Object.prototype.eval()")}}</td> + <td>Evalúa una cadena de código JavaScript en el contexto del objeto especificado.</td> + </tr> + <tr> + <td>{{jsxref("Object.observe()")}}</td> + <td>Observar de forma asincrónica los cambios en un objeto.</td> + </tr> + <tr> + <td>{{jsxref("Object.unobserve()")}}</td> + <td>Elimina observadores.</td> + </tr> + <tr> + <td>{{jsxref("Object.getNotifier()")}}</td> + <td>Crea un objeto que permite desencadenar sintéticamente un cambio.</td> + </tr> + </tbody> +</table> + +<h3 id="Función">Función</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propiedad</th> + <th>Descripción</th> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Function/arity", "arity")}}</td> + <td>Número de argumentos formales.</td> + </tr> + </tbody> +</table> + +<h3 id="Array">Array</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td>Propiedad</td> + <td>Descripción</td> + </tr> + <tr> + <td>{{jsxref("Array.observe()")}}</td> + <td>Observación asincrónica de cambios en los arreglos.</td> + </tr> + <tr> + <td>{{jsxref("Array.unobserve()")}}</td> + <td>Elimina observadores.</td> + </tr> + </tbody> +</table> + +<h3 id="Número">Número</h3> + +<ul> + <li>{{jsxref("Number.toInteger()")}}</li> +</ul> + +<h3 id="ParallelArray">ParallelArray</h3> + +<ul> + <li>{{jsxref("ParallelArray")}}</li> +</ul> + +<h3 id="Declaraciones">Declaraciones</h3> + +<ul> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} está obsoleta. En su lugar utiliza {{jsxref("Statements/for...of", "for...of")}}.</li> + <li>La desestructuración {{jsxref("Statements/for...in", "for...in")}} está obsoleta. En su lugar utiliza {{jsxref("Statements/for...of", "for...of")}}.</li> + <li>los bloques let y la expresiones let están obsoletas.</li> +</ul> + +<h3 id="E4X">E4X</h3> + +<p>Consulta <a href="/es/docs/Archive/Web/E4X">E4X</a> para obtener más información.</p> + +<h3 id="Variables_nítidas">Variables nítidas</h3> + +<p>Consulta <a href="/es/docs/Archive/Web/Sharp_variables_in_JavaScript">Variables nítidas en JavaScript</a> para obtener más información.</p> diff --git a/files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html b/files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html new file mode 100644 index 0000000000..5ef865f0bb --- /dev/null +++ b/files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html @@ -0,0 +1,72 @@ +--- +title: The legacy Iterator protocol +slug: >- + Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol +translation_of: >- + Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +--- +<div>{{jsSidebar("More")}}</div> + +<div class="warning"><strong>Non-standard.</strong> The legacy iterator protocol is a SpiderMonkey-specific feature, and will be removed at some point. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops and the <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">iterator protocol</a>.</div> + +<h2 id="The_deprecated_Firefox-only_iterator_protocol">The deprecated Firefox-only iterator protocol</h2> + +<p>Firefox, prior to version 26 implemented another iterator protocol that is similar to the standard <a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">ES6 Iterator protocol</a>.</p> + +<p>An object is an legacy iterator when it implements a <code>next()</code> method with the following semantics, and throws {{jsxref("Global_Objects/StopIteration", "StopIteration")}} at the end of iteration.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Property</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>next</code></td> + <td>A zero arguments function that returns an value.</td> + </tr> + </tbody> +</table> + +<h3 id="Difference_between_legacy_and_ES6_iterator_protocols">Difference between legacy and ES6 iterator protocols</h3> + +<ul> + <li>The value was returned directly as a return value of calls to <code>next</code>, instead of the <code>value</code> property of a placeholder object</li> + <li>Iteration termination was expressed by throwing a {{jsxref("Global_Objects/StopIteration", "StopIteration")}} object.</li> +</ul> + +<h3 id="Simple_example_with_the_old_protocol">Simple example with the old protocol</h3> + +<pre class="brush: js">function makeIterator(array){ + var nextIndex = 0; + + return { + next: function(){ + if(nextIndex < array.length){ + return array[nextIndex++]; + else + throw new StopIteration(); + } + } +} + +var it = makeIterator(['yo', 'ya']); + +console.log(it.next()); // 'yo' +console.log(it.next()); // 'ya' +try{ + console.log(it.next()); +} +catch(e){ + if(e instanceof StopIteration){ + // iteration over + } +} +</pre> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iteradores y generadores</a></li> + <li>Más More <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">características obsoletas</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html b/files/es/web/javascript/reference/errors/bad_regexp_flag/index.html index 3bb05d9b89..3bb05d9b89 100644 --- a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html +++ b/files/es/web/javascript/reference/errors/bad_regexp_flag/index.html diff --git a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html b/files/es/web/javascript/reference/errors/illegal_character/index.html index cc9422a21d..cc9422a21d 100644 --- a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html +++ b/files/es/web/javascript/reference/errors/illegal_character/index.html diff --git a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html b/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html index c03cb15dd2..c03cb15dd2 100644 --- a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html +++ b/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html diff --git a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html b/files/es/web/javascript/reference/errors/strict_non_simple_params/index.html index 2ca6ef8de4..2ca6ef8de4 100644 --- a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html +++ b/files/es/web/javascript/reference/errors/strict_non_simple_params/index.html diff --git a/files/es/web/javascript/reference/functions/arguments/callee/index.html b/files/es/web/javascript/reference/functions/arguments/callee/index.html new file mode 100644 index 0000000000..1902131055 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/callee/index.html @@ -0,0 +1,48 @@ +--- +title: callee +slug: Web/JavaScript/Referencia/Funciones/arguments/callee +tags: + - JavaScript + - JavaScript Reference + - Referencia +translation_of: Web/JavaScript/Reference/Functions/arguments/callee +--- +<div> +<div>{{jsSidebar("Functions")}}</div> +</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Especifica la función que se está ejecutando actualmente.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>callee</code> es una propiedad de la variable local <code>arguments</code> disponible dentro de todos los objetos function; <code>callee</code> como una propiedad de {{jsxref("Funciones/arguments", "Function.arguments")}} ya no se utiliza. (<code>Function.arguments</code> en sí mismo está también desaconsejado.)</p> + +<p><code>arguments.callee</code> permite a funciones anónimas referirse a ellas mismas, lo cual es necesario en funciones anónimas recursivas.</p> + +<p>La palabra clave <code>this</code> no se refiere a la función que se ejecuta actualmente. Use la propiedad <code>callee</code> para referirse a la función dentro del cuerpo de la función.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas" name="Ejemplo:_Usando_arguments.callee_en_funciones_an.C3.B3nimas_recursivas">Ejemplo: Usando <code>arguments.callee</code> en funciones anónimas recursivas</h3> + +<p>Una función recursiva debe ser capaz de referirse a sí misma. Típicamente, una función se refiere a sí misma por su nombre. Sin embargo, una función anónima no tiene nombre y por tanto es una variable de referencia para ella, es decir, si la función no está asignada a ninguna variable, la función no puede referirse a sí misma. (Se pueden crear funciones anónimas mediante una expresión {{jsxref("Operadores/function", "function")}} o el constructor {{jsxref("Function")}}.) Aquí es donde entra <code>arguments.callee</code>.</p> + +<p>El siguiente ejemplo define una función, la cuál, en cada turno, define y devuelve una función factorial.</p> + +<pre class="brush: js">function makeFactorialFunc() { + alert('making a factorial function!'); + return function(x) { + if (x <= 1) + return 1; + return x * arguments.callee(x - 1); + }; +} + +var result = makeFactorialFunc()(5); // returns 120 (5 * 4 * 3 * 2 * 1) +</pre> + +<p><span class="comment">this example isn't very practical, but then again, there are few practical cases where arguments.callee is necessary, and most of the those cases involve closures</span></p> + +<p> </p> diff --git a/files/es/web/javascript/reference/functions/arguments/index.html b/files/es/web/javascript/reference/functions/arguments/index.html new file mode 100644 index 0000000000..ab768cff21 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/index.html @@ -0,0 +1,229 @@ +--- +title: El objeto arguments +slug: Web/JavaScript/Referencia/Funciones/arguments +tags: + - Funciones + - JavaScript + - Namespace + - argumentos + - arguments + - espacio de nombres + - multiples +translation_of: Web/JavaScript/Reference/Functions/arguments +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p><strong><code>arguments</code></strong> es un objeto similar a <code>Array</code> accesible dentro de <a href="/es/docs/Web/JavaScript/Guide/Functions">funciones</a> que contiene los valores de los argumentos pasados a esa función.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arguments.html")}}</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="Descripción">Descripción</h2> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si estás escribiendo código compatible con ES6, entonces se deben preferir los {{jsxref("Functions/rest_parameters", "parámetros resto")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: "similar a Array" significa que <code>arguments</code> tiene una propiedad {{jsxref("Functions/arguments/length", "lenght")}} y propiedades indexadas desde cero, pero no tiene métodos integrados de {{jsxref("Array")}} como {{jsxref("Array.forEach", "forEach()")}} o {{jsxref("Array.map", "map()")}}. Ve la <a href="#Descripción">§Descripción</a> para obtener más detalles.</p> +</div> + +<p>El objeto <code>arguments</code> es una variable local disponible en todas las funciones que no son {{jsxref("Functions/Arrow_functions", "funciones flecha")}}. Puedes hacer referencia a los argumentos de una función dentro de esa función utilizando su objeto <code>arguments</code>. Tiene entradas para cada argumento con el que se llamó a la función, con el índice de la primera entrada en <code>0</code>.</p> + +<p>Por ejemplo, si a una función se le pasan 3 argumentos, puedes acceder a ellos de la siguiente manera:</p> + +<pre class="brush: js notranslate">arguments[0] // primer argumento +arguments[1] // segundo argumento +arguments[2] // tercer argumento +</pre> + +<p>También puedes establecer o reasignar cada argumento:</p> + +<pre class="brush: js notranslate">arguments[1] = 'new value'; +</pre> + +<p>El objeto <code>arguments</code> no es un {{jsxref("Array")}}. Es similar, pero carece de todas las propiedades de <code>Array</code> excepto de {{jsxref("Array.length", "length")}}. Por ejemplo, no tiene el método {{jsxref("Array.pop", "pop()")}}.</p> + +<p>Sin embargo, se puede convertir en un <code>Array</code> real:</p> + +<pre class="brush: js notranslate">var args = Array.prototype.slice.call(arguments); +// El uso de un arreglo literal es más corto que el anterior pero asigna un arreglo vacío +var args = [].slice.call(arguments); +</pre> + +<p>Así como puedes hacer con cualquier objeto tipo <code>Array</code>, puedes usar el método {{jsxref("Array.from()")}} de ES2015 o la {{jsxref("Operators/Spread_syntax", "propagación de sintaxis")}} para convertir <code>arguments</code> en un arreglo real:</p> + +<pre class="brush: js notranslate">let args = Array.from(arguments); +// o +let args = [...arguments]; +</pre> + +<p>El objeto <code>arguments</code> es útil para funciones llamadas con más argumentos de los que declara aceptar formalmente. Esta técnica es útil para funciones a las que se les puede pasar un número variable de argumentos, como {{jsxref("Math.min()")}}. Esta función de ejemplo acepta cualquier número de argumentos de cadena y devuelve la más larga:</p> + +<pre class="brush: js notranslate">function longestString() { + var longest = ''; + for (var i=0; i < arguments.length; i++) { + if (arguments[i].length > longest.length) { + longest = arguments[i]; + } + } + return longest; +} +</pre> + +<p>Puedes usar {{jsxref("Functions/arguments/lenght", "arguments.length")}} para contar con cuántos argumentos se llamó a la función. Si, en cambio, deseas contar cuántos parámetros se declara que acepta una función, inspecciona la propiedad {{jsxref("Function.length", "length")}} de esa función.</p> + +<h3 id="Usar_typeof_con_arguments">Usar <code>typeof</code> con <code>arguments</code></h3> + +<p>El operador {{jsxref("Operators/typeof", "typeof")}} devuelve <code>'object'</code> cuando se usa con <code>arguments</code></p> + +<pre class="brush: js notranslate">console.log(typeof arguments); // 'object' </pre> + +<p>El tipo de argumentos individuales se puede determinar indexando <code>arguments</code>:</p> + +<pre class="notranslate">console.log(typeof arguments[0]); // devuelve el tipo del primer argumento</pre> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Functions/arguments/callee", "arguments.callee")}}</dt> + <dd>Referencia a la función en ejecución a la que pertenecen los argumentos. Prohibida en modo estricto.</dd> + <dt>{{jsxref("Functions/arguments/length", "arguments.length")}}</dt> + <dd>El número de argumentos que se pasaron a la función.</dd> + <dt>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}}</dt> + <dd>Devuelve un nuevo objeto {{jsxref("Array/@@iterator", "Array iterator", "", 0)}} que contiene los valores de cada índice en <code>arguments</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Definición_de_una_función_que_concatena_varias_cadenas">Definición de una función que concatena varias cadenas</h3> + +<p>Este ejemplo define una función que concatena varias cadenas. El único argumento formal de la función es una cadena que contiene los caracteres que separan los elementos a concatenar.</p> + +<pre class="brush:js notranslate">function myConcat(separator) { + let args = Array.prototype.slice.call(arguments, 1); + return args.join(separator); +}</pre> + +<p>Puedes pasar tantos argumentos como desees a esta función. Devuelve una lista de cadenas usando cada argumento en la lista:</p> + +<pre class="brush:js notranslate">// returns "red, orange, blue" +myConcat(', ', 'red', 'orange', 'blue'); + +// devuelve "elephant; giraffe; lion; cheetah" +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// devuelve "sage. basil. oregano. pepper. parsley" +myConcat('. ', 'sage', 'basil', 'oregano', 'pepper', 'parsley');</pre> + +<h3 id="Definición_de_una_función_que_crea_listas_HTML">Definición de una función que crea listas HTML</h3> + +<p>Este ejemplo define una función que crea una cadena que contiene HTML para una lista. El único argumento formal para la función es una cadena que es "<code>u</code>" si la lista debe estar {{htmlelement("ul", "desordenada (con viñetas)")}}, u "<code>o</code>" si la lista es {{htmlelement("ol", "ordenada (numerada)")}}. La función se define de la siguiente manera:</p> + +<pre class="brush:js notranslate">function list(type) { + var html = '<' + type + 'l><li>'; + var args = Array.prototype.slice.call(arguments, 1); + html += args.join('</li><li>'); + html += '</li></' + type + 'l>'; // fin de la lista + return html; +}</pre> + +<p>Puedes pasar cualquier número de argumentos a esta función y agregar cada argumento como un elemento de lista a una lista del tipo indicado. Por ejemplo:</p> + +<pre class="brush:js notranslate">let listHTML = list('u', 'One', 'Two', 'Three'); + +/* la listHTML es: +"<ul><li>One</li><li>Two</li><li>Three</li></ul>" +*/</pre> + +<h3 id="Parámetros_rest_predeterminados_y_desestructurados">Parámetros <code>rest</code>, predeterminados y desestructurados</h3> + +<div> +<p>El objeto <code>arguments</code> se puede utilizar junto con parámetros {{jsxref("Functions/rest_parameters", "rest")}}, {{jsxref("Functions/Default_parameters", "predeterminados")}} y {{jsxref("Operators/Destructuring_assignment", "desestructurados")}}.</p> +</div> + +<pre class="brush: js notranslate">function foo(...args) { + return args; +} +foo(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Si bien la presencia de parámetros <code>rest</code>, predeterminados o desestructurados no altera <a href="/es/docs/Web/JavaScript/Reference/Strict_mode#Haciendo_eval_y_arguments_más_simples">el comportamiento del objeto <code>arguments</code> en el código de modo estricto</a>, existen sutiles diferencias para el código no estricto.</p> + +<p>En el código de modo estricto, el objeto <code>arguments</code> se comporta de la misma manera independientemente de que se pasen parámetros <code>rest</code>, predeterminados o desestructurados a una función. Es decir, asignar nuevos valores a las variables en el cuerpo de la función no afectará al objeto <code>arguments</code>. La asignación de nuevas variables al objeto <code>arguments</code> tampoco afectará el valor de las variables.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: No puedes escribir una directiva <code>"use strict";</code> en el cuerpo de una definición de función que acepte parámetros <code>rest</code>, predeterminados o desestructurados. Si lo haces, generará un {{jsxref("Errors/Strict_Non_Simple_Params", "error de sintaxis")}}.</p> +</div> + +<p>Las funciones no estrictas a las que se les pasan solo parámetros simples (es decir, no parámetros <code>rest</code>, predeterminados o desestructurados) sincronizarán el valor de los nuevos valores de las variables en el cuerpo de la función con el objeto <code>arguments</code>, y viceversa:</p> + +<pre class="brush: js notranslate">function func(a) { + arguments[0] = 99; // actualiza arguments[0] además actualiza a + console.log(a); +} +func(10); // 99 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a) { + a = 99; // la actualización también actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 99 +</pre> + +<p>Por el contrario, las funciones no estrictas a las que <strong>se les pasan</strong> parámetros <code>rest</code>, predeterminados o desestructurados <strong>no</strong> sincronizarán los nuevos valores asignados a las variables de los argumentos en el cuerpo de la función con el objeto <code>arguments</code>. En cambio, el objeto <code>arguments</code> en funciones no estrictas con parámetros complejos <strong>siempre</strong> reflejarán los valores pasados a la función cuando se invocó (este es el mismo comportamiento exhibido por todas las funciones en modo estricto, independientemente del tipo de variables que se le pasen):</p> + +<pre class="brush: js notranslate">function func(a = 55) { + arguments[0] = 99; // actualizar arguments[0] tampoco actualiza a + console.log(a); +} +func(10); // 10</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">function func(a = 55) { + a = 99; // actualizar a tampoco actualiza arguments[0] + console.log(arguments[0]); +} +func(10); // 10 +</pre> + +<p>Y también:</p> + +<pre class="brush: js notranslate">// Un parámetro predeterminado sin seguimiento +function func(a = 55) { + console.log(arguments[0]); +} +func(); // undefined</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-arguments-exotic-objects', 'Objectos arguments exóticos')}}</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.functions.arguments")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Function", "Función")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parámetros resto")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/functions/arguments/length/index.html b/files/es/web/javascript/reference/functions/arguments/length/index.html new file mode 100644 index 0000000000..b1d7698194 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arguments/length/index.html @@ -0,0 +1,131 @@ +--- +title: arguments.length +slug: Web/JavaScript/Referencia/Funciones/arguments/length +tags: + - Funciones + - JavaScript + - Propiedades + - argumentos +translation_of: Web/JavaScript/Reference/Functions/arguments/length +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La propiedad <strong><code>arguments.length</code></strong> contiene el número de argumentos pasados a una función.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">arguments.length</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad arguments.length devuelve el número total de argumentos pasados a una función. Esto puede ser más o menos que el número de parametros definidos. (Véase {{jsxref("Function.length")}}).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_arguments.length">Usando <code>arguments.length</code></h3> + +<p>En este ejemplo definimos una función que puede sumar dos o más números.</p> + +<pre class="brush: js">function adder(base /*, n2, ... */) { + base = Number(base); + for (var i = 1; i < arguments.length; i++) { + base += Number(arguments[i]); + } + return base; +} +</pre> + +<div class="note"> +<p>Tenga en cuenta la diferencia entre {{jsxref("Function.length")}} y arguments.length</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Function.length")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/functions/arrow_functions/index.html b/files/es/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..6ea9a35595 --- /dev/null +++ b/files/es/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,530 @@ +--- +title: Funciones Flecha +slug: Web/JavaScript/Referencia/Funciones/Arrow_functions +tags: + - ECMAScript6 + - Intermedio + - JavaScript + - Referencia + - función +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p>Una <strong>expresión de función flecha</strong> es una alternativa compacta a una {{JSxRef("Operadores/function", "expresión de función")}} tradicional, pero es limitada y no se puede utilizar en todas las situaciones.</p> + +<p><strong>Diferencias y limitaciones:</strong></p> + +<ul> + <li>No tiene sus propios enlaces a {{JSxRef("Operadores/this", "this")}} o {{JSxRef("Operadores/super", "super")}} y no se debe usar como {{Glossary("Method", "métodos")}}.</li> + <li>No tiene {{JSxRef("Funciones/arguments", "argumentos")}} o palabras clave {{JSxRef("../Operadores/new.target", "new.target")}}.</li> + <li>No apta para los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}}, que generalmente se basan en establecer un {{Glossary("Scope", "ámbito o alcance")}}</li> + <li>No se puede utilizar como {{Glossary("constructor", "constructor")}}.</li> + <li>No se puede utilizar {{JSxRef("Operadores/yield", "yield")}} dentro de su cuerpo.</li> +</ul> + +<p>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</p> + +<h3 id="Comparación_de_funciones_tradicionales_con_funciones_flecha">Comparación de funciones tradicionales con funciones flecha</h3> + +<p>Observa, paso a paso, la descomposición de una "función tradicional" hasta la "función flecha" más simple:<br> + <strong>Nota</strong>: Cada paso a lo largo del camino es una "función flecha" válida</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a){ + return a + 100; +} + +// Desglose de la función flecha + +// 1. Elimina la palabra "function" y coloca la flecha entre el argumento y el corchete de apertura. +(a) => { + return a + 100; +} + +// 2. Quita los corchetes del cuerpo y la palabra "return" — el return está implícito. +(a) => a + 100; + +// 3. Suprime los paréntesis de los argumentos +a => a + 100;</pre> + +<div class="blockIndicator note"> +<p>Como se muestra arriba, los { corchetes }, ( paréntesis ) y "return" son opcionales, pero pueden ser obligatorios.</p> +</div> + +<p>Por ejemplo, si tienes <strong>varios argumentos</strong> o <strong>ningún argumento</strong>, deberás volver a introducir paréntesis alrededor de los argumentos:</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a, b){ + return a + b + 100; +} + +// Función flecha +(a, b) => a + b + 100; + +// Función tradicional (sin argumentos) +let a = 4; +let b = 2; +function (){ + return a + b + 100; +} + +// Función flecha (sin argumentos) +let a = 4; +let b = 2; +() => a + b + 100;</pre> + +<p>Del mismo modo, si el cuerpo requiere <strong>líneas de procesamiento adicionales</strong>, deberás volver a introducir los corchetes <strong>Más el "return"</strong> (las funciones flecha no adivinan mágicamente qué o cuándo quieres "volver"):</p> + +<pre class="brush: js notranslate">// Función tradicional +function (a, b){ + let chuck = 42; + return a + b + chuck; +} + +// Función flecha +(a, b) => { + let chuck = 42; + return a + b + chuck; +}</pre> + +<div>Y finalmente, en las <strong>funciones con nombre</strong> tratamos las expresiones de flecha como variables</div> + +<div> +<pre class="brush: js notranslate">// Función tradicional +function bob (a){ + return a + 100; +} + +// Función flecha +let bob = a => a + 100;</pre> +</div> + +<div></div> + +<div></div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Sintaxis_básica">Sintaxis básica</h3> + +<p class="syntaxbox notranslate">Un parámetro. Con una expresión simple no se necesita <code>return</code>:</p> + +<pre class="brush: js notranslate">param => expression</pre> + +<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Con una expresión simple no se necesita <code>return</code>:</p> + +<pre class="brush: js notranslate">(param1, paramN) => expression</pre> + +<p class="syntaxbox notranslate">Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p> + +<pre class="brush: js notranslate">param => { + let a = 1; + return a + b; +}</pre> + +<p class="syntaxbox notranslate">Varios parámetros requieren paréntesis. Las declaraciones de varias líneas requieren corchetes y <code>return</code>:</p> + +<pre class="brush: js notranslate">(param1, paramN) => { + let a = 1; + return a + b; +}</pre> + +<h3 id="Sintaxis_avanzada">Sintaxis avanzada</h3> + +<p class="syntaxbox notranslate">Para devolver una expresión de objeto literal, se requieren paréntesis alrededor de la expresión:</p> + +<pre class="brush: js notranslate">params => ({foo: "a"}) // devuelve el objeto {foo: "a"}</pre> + +<p class="syntaxbox notranslate">Los {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} son compatibles:</p> + +<pre class="brush: js notranslate">(a, b, ...r) => expression</pre> + +<p class="syntaxbox notranslate">Se admiten los {{JSxRef("Funciones/Parametros_por_defecto", "parámetros predeterminados")}}:</p> + +<pre class="brush: js notranslate">(a=400, b=20, c) => expression</pre> + +<p class="brush: js">{{JSxRef("Operadores/Destructuring_assignment", "Desestructuración")}} dentro de los parámetros admitidos:</p> + +<pre class="brush: js notranslate">([a, b] = [10, 20]) => a + b; // el resultado es 30 +({ a, b } = { a: 10, b: 20 }) => a + b; // resultado es 30 +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Consulta también <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a>.</p> + +<h3 id="this_y_funciones_flecha">"<code>this</code>" y funciones flecha</h3> + +<p class="brush: js notranslate">Una de las razones por las que se introdujeron las funciones flecha fue para eliminar complejidades del ámbito ({{JSxRef("Operadores/this", "this")}}) y hacer que la ejecución de funciones sea mucho más intuitiva.</p> + +<div class="blockIndicator note"> +<p class="brush: js notranslate">Si <code>this</code> es un misterio para ti, consulta {{JSxRef("Operadores/this", "este documento")}} para obtener más información sobre cómo funciona <code>this</code>. Para resumir, <code>this</code> se refiere a la instancia. Las instancias se crean cuando se invoca la palabra clave <code>new</code>. De lo contrario, <code>this</code> se establecerá —de forma predeterminada— en el {{Glossary("Scope", "ámbito o alcance")}} de window.</p> +</div> + +<p class="brush: js notranslate">En las <strong>funciones tradicionales</strong> de manera predeterminada <code>this</code> está en el ámbito de <code>window</code>:</p> + +<ul> +</ul> + +<pre class="brush: js notranslate">window.age = 10; // <-- ¿me notas? +function Person() { + this.age = 42; // <-- ¿me notas? + setTimeout(function () {// <-- La función tradicional se está ejecutando en el ámbito de window + console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window + }, 100); +} + +var p = new Person(); + +</pre> + +<p>Las <strong>funciones flecha</strong> <strong>no</strong> predeterminan <code>this</code> al {{Glossary("Scope", "ámbito o alcance")}} de <code>window</code>, más bien se ejecutan en el {{Glossary("Scope", "ámbito o alcance")}} en que se crean:</p> + +<pre class="brush: js notranslate">window.age = 10; // <-- ¿me notas? +function Person() { + this.age = 42; // <-- ¿me notas? + setTimeout(() => {// <-- Función flecha ejecutándose en el ámbito de "p" (una instancia de Person) + console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person + }, 100); +} + +var p = new Person(); + +</pre> + +<p>En el ejemplo anterior, la función flecha no tiene su propio <code>this</code>. Se utiliza el valor <code>this</code> del {{Glossary("Scope", "ámbito")}} léxico adjunto; las funciones flecha siguen las reglas normales de búsqueda de variables. Entonces, mientras busca <code>this</code> que no está presente en el {{Glossary("Scope", "ámbito")}} actual, una función flecha termina encontrando el <code>this</code> de su {{Glossary("Scope", "ámbito")}} adjunto.</p> + +<p><strong>Relación con el modo estricto</strong></p> + +<p>Dado que <code>this</code> proviene del contexto léxico circundante, en el {{JSxRef("Modo_estricto", "modo estricto")}} se ignoran las reglas con respecto a <code>this</code>.</p> + +<pre class="brush: js notranslate">var f = () => { + 'use strict'; + return this; +}; + +f() === window; // o el objeto global</pre> + +<p>Todas las demás reglas del {{JSxRef("Modo_estricto", "modo estricto")}} se aplican normalmente.</p> + +<div class="blockIndicator warning"> +<p><strong>Nota</strong>: Comprueba las notas sobre el {{JSxRef("Modo_estricto", "modo estricto")}}.</p> +</div> + +<h3 id="Funciones_flecha_utilizadas_como_métodos">Funciones flecha utilizadas como métodos</h3> + +<p>Como se indicó anteriormente, las expresiones de función flecha son más adecuadas para funciones que no son métodos. Observa qué sucede cuando intentas usarlas como métodos:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { // no crea un nuevo ámbito + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} + +obj.b(); // imprime indefinido, Window {...} (o el objeto global) +obj.c(); // imprime 10, Object {...}</pre> + +<p>Las funciones flecha no tienen su propio <code>this</code>. Otro ejemplo que involucra {{JSxRef("Object.defineProperty()")}}:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // indefinida 'undefined' Window {...} (o el objeto global) + return this.a + 10; // representa el objeto global 'Window', por lo tanto 'this.a' devuelve 'undefined' + } +}); +</pre> + +<h3 id="call_apply_y_bind"><code>call</code>, <code>apply</code> y <code>bind</code></h3> + +<p>Los métodos {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} <strong>NO son adecuados</strong> para las funciones flecha, ya que fueron diseñados para permitir que los métodos se ejecuten dentro de diferentes ámbitos, porque <strong>las funciones flecha establecen "<code>this</code>" según el ámbito dentro del cual se define la función flecha.</strong></p> + +<p>Por ejemplo, {{JSxRef("Objetos_globales/Function/call", "call")}}, {{JSxRef("Objetos_globales/Function/apply", "apply")}} y {{JSxRef("Objetos_globales/Function/bind", "bind")}} funcionan como se esperaba con las funciones tradicionales, porque establecen el ámbito para cada uno de los métodos:</p> + +<pre class="brush: js notranslate">// ---------------------- +// Ejemplo tradicional +// ---------------------- +// Un objeto simplista con su propio "this". +var obj = { + num: 100 +} + +// Establece "num" en window para mostrar cómo NO se usa. +window.num = 2020; // ¡Ay! + +// Una función tradicional simple para operar en "this" +var add = function (a, b, c) { + return this.num + a + b + c; +} + +// call +var result = add.call(obj, 1, 2, 3) // establece el ámbito como "obj" +console.log(result) // resultado 106 + +// apply +const arr = [1, 2, 3] +var result = add.apply(obj, arr) // establece el ámbito como "obj" +console.log(result) // resultado 106 + +// bind +var result = add.bind(obj) // estable el ámbito como "obj" +console.log(result(1, 2, 3)) // resultado 106</pre> + +<p>Con las funciones flecha, dado que la función <code>add</code> esencialmente se crea en el ámbito del <code>window</code> (global), asumirá que <code>this</code> es window.</p> + +<pre class="brush: js notranslate">// ---------------------- +// Ejemplo de flecha +// ---------------------- + +// Un objeto simplista con su propio "this". +var obj = { + num: 100 +} + +// Establecer "num" en window para mostrar cómo se recoge. +window.num = 2020; // ¡Ay! + +// Función flecha +var add = (a, b, c) => this.num + a + b + c; + +// call +console.log(add.call(obj, 1, 2, 3)) // resultado 2026 + +// apply +const arr = [1, 2, 3] +console.log(add.apply(obj, arr)) // resultado 2026 + +// bind +const bound = add.bind(obj) +console.log(bound(1, 2, 3)) // resultado 2026 +</pre> + +<p>Quizás el mayor beneficio de usar las funciones flecha es con los métodos a nivel del DOM (<code>setTimeout</code>, <code>setInterval</code>, <code>addEventListener</code>) que generalmente requieren algún tipo de cierre, llamada, aplicación o vinculación para garantizar que la función se ejecute en el ámbito adecuado.</p> + +<p><strong>Ejemplo tradicional:</strong></p> + +<pre class="brush: js notranslate">var obj = { + count : 10, + doSomethingLater : function (){ + setTimeout(function(){ // la función se ejecuta en el ámbito de window + this.count++; + console.log(this.count); + }, 300); + } +} + +obj.doSomethingLater(); // la consola imprime "NaN", porque la propiedad "count" no está en el ámbito de window.</pre> + +<p><strong>Ejemplo de flecha:</strong></p> + +<pre class="brush: js notranslate">var obj = { + count : 10, + doSomethingLater : function(){ // por supuesto, las funciones flecha no son adecuadas para métodos + setTimeout( () => { // dado que la función flecha se creó dentro del "obj", asume el "this" del objeto + this.count++; + console.log(this.count); + }, 300); + } +} + +obj.doSomethingLater();</pre> + +<h3 id="Sin_enlace_de_arguments">Sin enlace de <code>arguments</code></h3> + +<p>Las funciones flecha no tienen su propio objeto {{JSxRef("Funciones/arguments", "arguments")}}. Por tanto, en este ejemplo, <code>arguments</code> simplemente es una referencia a los argumentos del ámbito adjunto:</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // Los argumentos implícitos de foo son vinculantes. arguments[0] es n + return f(); +} + +foo(3); // 6</pre> + +<p>En la mayoría de los casos, usar {{JSxRef("Funciones/parametros_rest", "parámetros rest")}} es una buena alternativa a usar un objeto <code>arguments</code>.</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Uso_del_operador_new">Uso del operador <code>new</code></h3> + +<p>Las funciones flecha no se pueden usar como constructores y arrojarán un error cuando se usen con <code>new</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo no es un constructor</pre> + +<h3 id="Uso_de_la_propiedad_prototype">Uso de la propiedad <code>prototype</code></h3> + +<p>Las funciones flecha no tienen una propiedad <code>prototype</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Uso_de_la_palabra_clave_yield">Uso de la palabra clave <code>yield</code></h3> + +<p>La palabra clave {{JSxRef("Operadores/yield", "yield")}} no se puede utilizar en el cuerpo de una función flecha (excepto cuando está permitido dentro de las funciones anidadas dentro de ella). Como consecuencia, las funciones flecha no se pueden utilizar como generadores.</p> + +<h3 id="Cuerpo_de_función">Cuerpo de función</h3> + +<p>Las funciones flecha pueden tener un "cuerpo conciso" o el "cuerpo de bloque" habitual.</p> + +<p>En un cuerpo conciso, solo se especifica una expresión, que se convierte en el valor de retorno implícito. En el cuerpo de un bloque, debes utilizar una instrucción <code>return</code> explícita.</p> + +<pre class="brush: js notranslate">var func = x => x * x; +// sintaxis de cuerpo conciso, "return" implícito + +var func = (x, y) => { return x + y; }; +// con cuerpo de bloque, se necesita un "return" explícito +</pre> + +<h3 id="Devolver_objetos_literales">Devolver objetos literales</h3> + +<p>Ten en cuenta que devolver objetos literales utilizando la sintaxis de cuerpo conciso <code>params => {object: literal}</code> no funcionará como se esperaba.</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// ¡Llamar a func() devuelve undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: la declaración function requiere un nombre</pre> + +<p>Esto se debe a que el código entre llaves ({}) se procesa como una secuencia de declaraciones (es decir, <code>foo</code> se trata como una etiqueta, no como una clave en un objeto literal).</p> + +<p>Debes envolver el objeto literal entre paréntesis:</p> + +<pre class="brush: js notranslate">var func = () => ({ foo: 1 });</pre> + +<h3 id="Saltos_de_línea">Saltos de línea</h3> + +<p>Una función flecha no puede contener un salto de línea entre sus parámetros y su flecha.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) + => 1; +// SyntaxError: expresión esperada, obtuve '=>'</pre> + +<p>Sin embargo, esto se puede modificar colocando el salto de línea después de la flecha o usando paréntesis/llaves como se ve a continuación para garantizar que el código se mantenga bonito y esponjoso. También puedes poner saltos de línea entre argumentos.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) => + 1; + +var func = (a, b, c) => ( + 1 +); + +var func = (a, b, c) => { + return 1 +}; + +var func = ( + a, + b, + c +) => 1; + +// no se lanza SyntaxError</pre> + +<h3 id="Orden_de_procesamiento">Orden de procesamiento</h3> + +<p>Aunque la flecha en una función flecha no es un operador, las funciones flecha tienen reglas de procesamiento especiales que interactúan de manera diferente con {{JSxRef("Operadores/Operator_Precedence", "prioridad de operadores")}} en comparación con las funciones regulares.</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: argumentos de función flecha no válidos + +callback = callback || (() => {}); // bien +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_básico">Uso básico</h3> + +<pre class="brush: js notranslate">// Una función flecha vacía devuelve undefinided +let empty = () => {}; + +(() => 'foobar')(); +// Devuelve "foobar" +// (esta es una expresión de función invocada inmediatamente) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Fácil filtrado de arreglos, mapeo, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// Cadenas de promesas más concisas +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Funciones flecha sin parámetros que son visualmente más fáciles de procesar +setTimeout( () => { + console.log('sucederá antes'); + setTimeout( () => { + // código más profundo + console.log ('Sucederá más tarde'); + }, 1); +}, 1); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Definición de función flecha')}}</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.functions.arrow_functions")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 en profundidad: funciones flecha" en hacks.mozilla.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/default_parameters/index.html b/files/es/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..e319a3606b --- /dev/null +++ b/files/es/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,234 @@ +--- +title: Parámetros predeterminados +slug: Web/JavaScript/Referencia/Funciones/Parametros_por_defecto +tags: + - Característica del lenguaje + - ECMAScript 2015 + - Funciones + - JavaScript +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions", "Funciones")}}</div> + +<p><span class="seoSummary"><strong>Parámetros predeterminados de función</strong> permiten que los parámetros con nombre se inicien con valores predeterminados si no se pasa ningún valor o <code>undefined</code>.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">function [<var>name</var>]([<var>param1</var>[ = <var>defaultValue1</var> ][, ..., <var>paramN</var>[ = <var>defaultValueN</var> ]]]) { + <var>statements</var> +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>En JavaScript, los parámetros de función están predeterminados en {{jsxref("undefined")}}. Sin embargo, a menudo es útil establecer un valor predeterminado diferente. Aquí es donde los parámetros predeterminados pueden ayudar.</p> + +<p>En el pasado, la estrategia general para establecer valores predeterminados era probar los valores de los parámetros en el cuerpo de la función y asignar un valor si eran <code>undefined</code>.</p> + +<p>En el siguiente ejemplo, si no se proporciona ningún valor para <code><var>b</var></code> cuando se llama a <code>multiply</code>, el valor de <code><var>b</var></code> sería <code>undefined</code> al evaluar <code><var>a</var> * <var>b</var></code> y <code>multiply</code> devolvería <code>NaN</code>.</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // NaN ! +</pre> + +<p>Para protegerte contra esto, usarías algo como la segunda línea, donde <code><var>b</var></code> se establece en <code>1</code> si llamas a <code>multiply</code> con un solo argumento:</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1 + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +</pre> + +<p>Con los parámetros predeterminados en ES2015, las comprobaciones en el cuerpo de la función ya no son necesarias. Ahora, puedes asignar <code>1</code> como valor predeterminado para <code><var>b</var></code> en el encabezado de la función:</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a * b +} + +multiply(5, 2) // 10 +multiply(5) // 5 +multiply(5, undefined) // 5 +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Pasar_undefined_vs._otros_valores_falsos">Pasar <code>undefined</code> vs. otros valores falsos</h3> + +<p>En la segunda llamada de este ejemplo, incluso si el primer argumento se establece explícitamente en <code>undefined</code> (aunque no <code>null</code> u otros valores {{Glossary("falsy", "falsos", "", 1)}} , el valor del argumento <code><var>num</var></code> sigue siendo el predeterminado.</p> + +<pre class="brush: js notranslate">function test(num = 1) { + console.log(typeof num) +} + +test() // 'number' (num se establece en 1) +test(undefined) // 'number' (num se establece en 1 también) + +// prueba con otros valores falsos: +test('') // 'string' (num se establece en '') +test(null) // 'object' (num se establece en null) +</pre> + +<h3 id="Evaluado_en_el_momento_de_la_llamada">Evaluado en el momento de la llamada</h3> + +<p>El argumento predeterminado se evalúa en el <em>momento de la llamada</em>. Entonces, a diferencia de (por ejemplo) Python, se crea un nuevo objeto cada vez que se llama a la función.</p> + +<pre class="brush: js notranslate">function append(value, array = []) { + array.push(value) + return array +} + +append(1) // [1] +append(2) // [2], no [1, 2] +</pre> + +<p>Esto incluso se aplica a funciones y variables:</p> + +<pre class="brush: js notranslate">function callSomething(thing = something()) { + return thing +} + +let numberOfTimesCalled = 0 +function something() { + numberOfTimesCalled += 1 + return numberOfTimesCalled +} + +callSomething() // 1 +callSomething() // 2 +</pre> + +<h3 id="Los_parámetros_anteriores_están_disponibles_para_los_parámetros_predeterminados_posteriores">Los parámetros anteriores están disponibles para los parámetros predeterminados posteriores</h3> + +<p>Los parámetros definidos anteriormente (a la izquierda) están disponibles para los parámetros predeterminados posteriores:</p> + +<pre class="brush: js notranslate">function greet(name, greeting, message = greeting + ' ' + name) { + return [name, greeting, message] +} + +greet('David', 'Hi') // ["David", "Hi", "Hi David"] +greet('David', 'Hi', 'Happy Birthday!') // ["David", "Hi", "Happy Birthday!"] +</pre> + +<p>Esta funcionalidad se puede aproximar de esta manera, lo que demuestra cuántos casos extremos se manejan:</p> + +<pre class="brush: js notranslate">function go() { + return ':P' +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g] +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Efectos_de_el_ámbito">Efectos de el ámbito</h3> + +<p>Si se definen parámetros predeterminados para uno o más parámetros, se crea un <a href="https://tc39.es/ecma262/#sec-functiondeclarationinstantiation">segundo ámbito</a> (registro de entorno), específicamente para los identificadores dentro de la lista de parámetros. Este ámbito es padre del ámbito creado para el cuerpo de la función.</p> + +<p>Esto significa que no se puede hacer referencia a las funciones y variables declaradas en el cuerpo de la función desde los iniciadores de parámetros de valor predeterminado; intentar hacerlo arroja un {{jsxref("ReferenceError")}} en tiempo de ejecución.</p> + +<p>También significa que las variables declaradas dentro del cuerpo de la función usando <code>var</code> enmascararán los parámetros del mismo nombre, en lugar de que el comportamiento habitual de las declaraciones <code>var</code> duplicadas no tenga ningún efecto.</p> + +<p>La siguiente función arrojará un <code>ReferenceError</code> cuando se invoca, porque el valor del parámetro predeterminado no tiene acceso al ámbito secundario del cuerpo de la función:</p> + +<pre class="brush: js example-bad notranslate">function f(a = go()) { // Lanza un `ReferenceError` cuando se invoca a `f`. + function go() { return ':P' } +} +</pre> + +<p>...y esta función imprimirá <code>undefined</code> porque la variable <code>var a</code> se eleva solo a la parte superior del ámbito creado para el cuerpo de la función (y no hasta el ámbito principal creado para la lista de parámetros):</p> + +<pre class="brush: js example-bad notranslate">function f(a, b = () => console.log(a)) { + var a = 1 + b() // Imprime `undefined`, porque los valores de los parámetros predeterminados existen en su propio ámbito +} +</pre> + +<h3 id="Parámetros_sin_valores_predeterminados_después_de_los_parámetros_predeterminados">Parámetros sin valores predeterminados después de los parámetros predeterminados</h3> + +<p>Los parámetros aún se establecen de izquierda a derecha, sobrescribiendo los parámetros predeterminados incluso si hay parámetros posteriores sin valores predeterminados.</p> + +<pre class="brush: js notranslate">function f(x = 1, y) { + return [x, y] +} + +f() // [1, undefined] +f(2) // [2, undefined] +</pre> + +<h3 id="Parámetro_desestructurado_con_asignación_de_valor_predeterminado">Parámetro desestructurado con asignación de valor predeterminado</h3> + +<p>Puedes usar la asignación de valor predeterminado con la notación {{jsxref("Operators/Destructuring_assignment", "la desestructuración", "", 1)}}:</p> + +<pre class="brush: js notranslate">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z +} + +f() // 6</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-function-definitions', 'Definición de Funciones')}}</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.functions.default_parameters")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Propuesta original en ecmascript.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/get/index.html b/files/es/web/javascript/reference/functions/get/index.html new file mode 100644 index 0000000000..7125ab0caa --- /dev/null +++ b/files/es/web/javascript/reference/functions/get/index.html @@ -0,0 +1,134 @@ +--- +title: get +slug: Web/JavaScript/Referencia/Funciones/get +tags: + - ECMAScript5 + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Functions/get +--- +<div>{{jsSidebar("Funciones")}}</div> + +<p>Enlaza la propiedad de un objeto con una función que será llamada cuando la propiedad es buscada.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p><code>{get <em>prop</em>() { . . . } }</code></p> + +<h2 id="Parámetros">Parámetros</h2> + +<dl> + <dt><code>prop</code></dt> + <dd>el nombre de la propiedad a unir con la función dada</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>A veces es deseable permitir acceso a una propiedad que retorna un valor dinámicamente calculado, o si desea mostrar el estado de alguna variable interna sin requerir el uso de llamadas a métodos explícitos. En JavaScript, esto se puede lograr con el uso de un getter (captador). No es posible tener simultáneamente un getter ligado a una propiedad y que dicha propiedad tenga actualmente un valor, aunque es posible usar un getter junto con un setter para crear un tipo de pseudo-propiedad.</p> + +<p>Tenga en cuenta lo siguiente al trabajar con la sintaxis <code>get</code>:</p> + +<ul> + <li>Puede tener un identificador que sea un número o una cadena.</li> + <li>Debe tener exactamente cero parametros (ver <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/">Cambio ES5 incompatible: las funciones getter y setter literal deben tener ahora exactamente cero o un argumento </a>para mas información);</li> + <li>No debe haber múltiples getters para una misma propiedad (<code>{ get x() { }, get x() { } }</code> y <code>{ x: ..., get x() { } }</code> están prohibidos).</li> +</ul> + +<p>El getter puede ser removido usando el operador {{jsxref("Operadores/delete", "delete")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Example:_Defining_a_getter_with_the_get_operator" name="Example:_Defining_a_getter_with_the_get_operator">Definir un getter con el operador <code>get</code></h3> + +<p>Esto creará una pseudo-propiedad <code>latest</code> (ver ejemplo) del objecto <code>o</code> que podría retornar la más reciente entrada dentro de <code>o.log</code>:</p> + +<pre class="brush: js">var o = { + get latest () { + if (this.log.length > 0) { + return this.log[this.log.length - 1]; + } + else { + return null; + } + }, + log: [] +} +</pre> + +<p>Note que intentar asignar un valor a <code>latest</code> no lo cambiará.</p> + +<h3 id="Example:_Deleting_a_getter_using_the_delete_operator" name="Example:_Deleting_a_getter_using_the_delete_operator">Borrar un getter usando el operador <code>delete</code></h3> + +<pre class="brush: js">delete o.latest; +</pre> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>Basado en la página de <a class="external" href="http://robertnyman.com/javascript/javascript-getters-setters.html#regular-getters-and-setters">página de Robert Nyman</a></p> + +<p>Sin soporte (notablemente en IE6-8) significa que el script lanzará un error de sintaxis.</p> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>1</td> + <td>9</td> + <td>9.5</td> + <td>3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Consulta también</h2> + +<ul> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/es/JavaScript/Guide/Working_with_Objects#Defining_Getters_and_Setters" title="en/JavaScript/Guide/Working with Objects#Defining Getters and Setters">Defining Getters and Setters</a> in JavaScript Guide</li> +</ul> + +<div class="noinclude"> +<p> </p> +</div> + +<p> </p> diff --git a/files/es/web/javascript/reference/functions/index.html b/files/es/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..ac1bea24ea --- /dev/null +++ b/files/es/web/javascript/reference/functions/index.html @@ -0,0 +1,661 @@ +--- +title: Funciones +slug: Web/JavaScript/Referencia/Funciones +tags: + - Funciones + - Guia(2) + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>En términos generales, una función es un "subprograma" que puede ser <em>llamado</em> por código externo (o interno en caso de recursión) a la función. Al igual que el programa en sí mismo, una función se compone de una secuencia de declaraciones, que conforman el llamado <em>cuerpo de la función</em>. Se pueden pasar valores a una función, y la función puede <em>devolver</em> un valor.</p> + +<p>En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos {{jsxref("Function")}}.</p> + +<h2 id="General" name="General">General</h2> + +<p>Toda función en JavaScript es un objeto Function. Ver {{jsxref("Function")}} para obtener información sobre las propiedades y métodos de los objetos <code>Function</code>.</p> + +<p>Las funciones no son lo mismo que los procedimientos. Una función siempre devuelve un valor, pero un procedimiento, puede o no puede devolver un valor.</p> + +<p>Para devolver un valor especifico distinto del predeterminado, una función debe tener una sentencia {{jsxref("Sentencias/return", "return")}}, que especifique el valor a devolver. Una función sin una instrucción return devolverá el valor predeterminado. En el caso de un {{jsxref("Object.prototype.constructor", "constructor")}} llamado con la palabra clave {{jsxref("new")}}, el valor predeterminado es el valor de su parametro. Para el resto de funciones, el valor predeterminado es undefined.</p> + +<p>Los parámetros en la llamada a una función son los argumentos de la función. Los argumentos se pasan a las funciones <em>por valor</em>. Si la función cambia el valor de un argumento, este cambio no se refleja globalmente ni en la llamada de la función. Sin embargo, las referencias a objetos también son valores, y son especiales: si la función cambia las propiedades del objeto referenciado, ese cambio es visible fuera de la función, tal y como se muestra en el siguiente ejemplo:</p> + +<pre><code class="language-js"><span class="comment token">/* Declarando la función 'myFunc' */</span> + <span class="keyword token">function</span> <span class="function token">myFunc<span class="punctuation token">(elobjeto</span></span><span class="punctuation token">)</span> + <span class="punctuation token">{</span> + elobjeto<span class="punctuation token">.marca</span><span class="operator token">=</span> <span class="string token">"Toyota"</span><span class="brush: js">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">/* + * Declarando la variable 'mycar'; + * Se crea e inicializa el nuevo objeto; + * para hacer referencia a él mediante 'mycar' + */</span> + <span class="keyword token">var</span> mycar <span class="operator token">=</span> <span class="punctuation token">{</span> + marca<span class="punctuation token">:</span> <span class="string token">"Honda"</span><span class="punctuation token">,</span> + modelo<span class="punctuation token">:</span> <span class="string token">"Accord"</span><span class="punctuation token">,</span> + año<span class="punctuation token">:</span> <span class="number token">1998</span> + <span class="punctuation token">}</span><span class="punctuation token">;</span> + + <span class="comment token">/* Mostrando 'Honda' */</span> + window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* Paso por referencia del objeto 'mycar' a la función 'myFunc'*/</span> + <span class="function token">myFunc<span class="punctuation token">(</span></span>mycar<span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="comment token">/* + * Muestra 'Toyota' como valor de la propiedad 'marca' + * del objeto, que ha sido cambiado por la función. + */</span> + window<span class="punctuation token">.</span><span class="function token">alert<span class="punctuation token">(</span></span>mycar<span class="punctuation token">.marca</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>La palabra clave <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this"><code>this</code></a> no hace referencia a la función que está ejecutandose actualmente, por lo que debes referirte a los objetos Function por nombre, incluso dentro del cuerpo de la función. Como alternativa, puedes utilizar la propiedad <a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a> (que no se recomienda).</p> + +<h2 id="Defining_functions" name="Defining_functions">Definiendo funciones</h2> + +<p>Hay varias formas de definir funciones:</p> + +<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Declaración de una función (La instrucción <code>function</code>)</h3> + +<p>Hay una sintaxis especial para declarar funciones (ver la instrucción {{jsxref("Sentencias/function","function")}} para más detalles):</p> + +<pre class="eval">function nombre([<em>param</em>[,<em>param</em>[, ...<em>param</em>]]]) { + instrucciones +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento que se pasará a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instruciones que forman el cuerpo de la función.</dd> +</dl> + +<h3 id="The_function_declaration_.28function_statement.29" name="The_function_declaration_.28function_statement.29">Expresión de una función (El operador <code>function</code>)</h3> + +<p>Una expresión function es similar y tiene la misma sintaxis que una declaración de función (ver operador {{jsxref("Operadores/function", "function")}} para más detalles):</p> + +<pre class="eval">function [nombre]([<em>param</em>[, <em>param</em>[, ...<em>param</em>]]]) { + instrucciones +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función, se puede omitir, en ese caso la función se conoce como función anónima.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de los argumentos que se pasarán a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instrucciones que forman el cuerpo de la función.</dd> +</dl> + +<h3 id="La_expresión_de_función_flecha_>">La expresión de función flecha (=>)</h3> + +<div class="note"> +<p><strong>Nota:</strong> Las expresiones de función Flecha son una tecnología experimental, parte de la proposición Harmony (EcmaScript 6) y no son ampliamente implementadas por los navegadores.</p> +</div> + +<p>Una expresión de función flecha tiene una sintaxis más corta y su léxico se une a este valor (ver {{jsxref("Funciones/Arrow_functions", "arrow functions", "", 1)}} para más detalles):</p> + +<pre class="language-html">([param] [, param]) => { instrucciones } + +param => expresión +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento. Si no hay argumentos se tiene que indicar con <code>()</code>. Para un único argumento no son necesarios los parentesis. (como <code>foo => 1</code>)</dd> + <dt><code>instrucciones o expresión</code></dt> + <dd>Multiples instrucciones deben ser encerradas entre llaves. Una única expresión no necesita llaves. La expresión es, así mismo, el valor de retorno implícito de esa función.</dd> +</dl> + +<h3 id="The_Function_constructor" name="The_Function_constructor">El constructor <code>Function</code></h3> + +<p>Como todos los demás objetos, los objetos {{jsxref("Function")}} se pueden crear mediante el operador new:</p> + +<pre class="language-html">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Ningún o varios argumentos son pasados para ser utilizados por la función como nombres de argumentos formales. Cada uno debe ser una cadena que se ajuste a las reglas de identificadores válidos en JavaScript, o a una lista de este tipo de cadenas separadas por comas; por ejemplo "x", "theValue", o "a,b".</dd> +</dl> + +<dl> + <dt><code>Cuerpo de la función</code></dt> + <dd>Una cadena conteniendo las instrucciones JavaScript que comprenden la definición de la función.</dd> +</dl> + +<p>Llamar al contructor Function como una función, sin el operador new, tiene el mismo efecto que llamarlo como un constructor.</p> + +<div class="note"><strong>Nota:</strong> Utilizar el constructor Function no se recomienda, ya que necesita el cuerpo de la función como una cadena, lo cual puede ocasionar que no se optimize correctamente por el motor JS, y puede también causar otros problemas.</div> + +<h2 id="The_arguments_object" name="The_arguments_object">El objeto <code>arguments</code></h2> + +<p>Puedes referirte a los argumentos de una función dentro de la misma, utilizando el objeto arguments. Ver {{jsxref("Functiones/argument", "Function")}}.</p> + +<h2 id="Scope_and_the_function_stack" name="Scope_and_the_function_stack">Ámbito de ejecución y pila de funciones</h2> + +<p><span class="comment">some section about scope and functions calling other functions</span></p> + +<h3 id="Repaso" name="Repaso">Repaso</h3> + +<p>Una función puede referirse y llamarse a sí misma. Hay tres maneras en la que una función puede referirse a sí misma.</p> + +<ol> + <li>El nombre de la función</li> + <li>{{jsxref("arguments.callee")}}</li> + <li>una función dentro del ambito de ejecución que refiere a la función</li> +</ol> + +<p>Por ejemplo, considere la siguiente definición de función:</p> + +<pre class="brush: js">var foo = function bar() { + // el cuerpo va aqui +}; +</pre> + +<p>Dentro del cuerpo de la función, todo lo siguientes son lo mismo:</p> + +<ol> + <li><code>bar()</code></li> + <li><code>arguments.callee()</code></li> + <li><code>foo()</code></li> +</ol> + +<p>Una función que se llama a sí misma es llamada una <em>función recursiva. </em>En algunas ocaciones, la recursión es análoga a un bucle. Ambos ejecutan el mismo código múltiples veces, y ambas requieren una condición (para evitar un bucle infinito, o en su lugar, recursión infinita en este caso). Por ejemplo, el siguiente bucle:</p> + +<pre class="brush: js">var x = 0; +while (x < 10) { // "x < 10" es la condición + // haz algo + x++; +} +</pre> + +<p>puede ser convertida en una función recursiva y una llamada a esa función:</p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" es la condición de salida (equivalente a "!(x < 10)") + return; + // haz algo + loop(x + 1); // la llamada recursiva +} +loop(0); +</pre> + +<p>Sin embargo, algunos algoritmos no pueden ser bucles iterativos simples. Por ejemplo, obtener todos los nodos de una estructura de arbol (e.g. el <a href="https://developer.mozilla.org/en-US/docs/DOM">DOM</a>) es realizado de manera más fácil usando recursión:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">recorrerArbol <span class="punctuation token">(</span></span>nodo<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>nodo <span class="operator token">==</span> <span class="keyword token">null</span><span class="punctuation token">)</span><span class="comment token"> // +</span> <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="comment token"> // haz algo con el nodo +</span> <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> nodo<span class="punctuation token">.</span>nodosHijos<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> +<span class="function token"><span class="punctuation token"> recorrerArbol(</span></span>nodo<span class="punctuation token">.nodosHijos</span><span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code> +</pre> + +<p>En comparación con el bucle de la función <code>loop</code>, cada llamada recursiva hace muchas llamadas recursivas aquí.</p> + +<p>Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero a menudo la lógica es mucho más compleja y hacerlo requiere el uso de una pila. De hecho, la recursión utiliza una pila: la pila de funciones.</p> + +<p>El comportamiento similar a la pila se puede ver en el ejemplo siguiente:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">foo<span class="punctuation token">(</span></span>i<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>i <span class="operator token"><</span> <span class="number token">0</span><span class="punctuation token">)</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'inicio:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="function token">foo<span class="punctuation token">(</span></span>i <span class="operator token">-</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span><span class="function token">writeln<span class="punctuation token">(</span></span><span class="string token">'fin:'</span> <span class="operator token">+</span> i<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="function token">foo<span class="punctuation token">(</span></span><span class="number token">3</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>que produce:</p> + +<pre class="language-html">inicio:3 +inicio:2 +inicio:1 +inicio:0 +fin:0 +fin:1 +fin:2 +fin:3 +</pre> + +<h2 id="Nested_functions_and_closures" name="Nested_functions_and_closures">Funciones anidadas y cierres</h2> + +<p>Puede anidar una función dentro de una función. La función anidada (inner) es privada a la función que la contiene (outer). También con la forma: aclosure.</p> + +<dl> + <dd>Un cierre es una expresión (normalmente una función) que puede tener variables libres junto con un entorno que enlaza esas variables (que "cierra" la expresión).<br> + Dado que una función anidada es un cierre, esto significa que una función anidada puede "heredar" los argumentos y las variables de su función contenedora. En otras palabras, la función interna contiene el ámbito de la función externa. <a class="external" href="http://jibbering.com/faq/faq_notes/closures.html"> </a></dd> +</dl> + +<p>Desde que la función anidada es un cierre (closure), esto significa que una función anidada puede "heredar" los argumentos y variables de su función contenedora. En otras palabras, la función interna contiene un scope (alcance) de la función externa.</p> + +<p><span class="external">Para resumir: </span></p> + +<ul> + <li><span class="external">La función interna se puede acceder sólo a partir de sentencias en la función externa. </span></li> +</ul> + +<ul> + <li><span class="external">La función interna forma un cierre: la función interna puede utilizar los argumentos y las variables de la función externa, mientras que la función externa no puede utilizar los argumentos y las variables de la función interna. </span></li> +</ul> + +<p><span class="external">El ejemplo siguiente muestra funciones anidadas: </span></p> + +<pre class="eval"><span class="brush: js">function addCuadrado(a,b) { + function cuadrado(x) { + return x * x; + } + return cuadrado(a) + cuadrado(b); +} +a = addCuadrado(2,3); // retorna 13 +b = addCuadrado(3,4); // retorna 25 +c = addCuadrado(4,5); // retorna 41 +</span></pre> + +<p><span class="external">Dado que la función interna forma un cierre, puede llamar a la función externa y especificar argumentos para la función externa e interna</span></p> + +<pre class="eval"><span class="brush: js">function fuerade(x) { + function dentro(y) { + return x + y; + } + return dentro; +} +resultado = fuerade(3)(5); // retorna 8 +</span></pre> + +<h3 id="Efficiency_considerations" name="Efficiency_considerations"><span class="external">Consideraciones sobre la eficiencia</span></h3> + +<p><span class="external">Observe cómo se conserva <code>x</code> cuando se devuelve <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">dentro</span></font>. Un cierre conserva los argumentos y las variables en todos los ámbitos que contiene. Puesto que cada llamada proporciona argumentos potencialmente diferentes, debe crearse un cierre para cada llamada a la función externa. En otras palabras, cada llamada a <code>fuerade</code> crea un cierre. Por esta razón, los cierres pueden usar una gran cantidad de memoria. La memoria se puede liberar sólo cuando el <code>dentro</code> devuelto ya no es accesible. En este caso, el cierre del <code>dentro</code> se almacena en <code>resultado</code>. Como el <code>resultado</code> está en el ámbito global, el cierre permanecerá hasta que se descargue el script (en un navegador, esto sucedería cuando la página que contiene el script esté cerrada).</span></p> + +<p><span class="external">Debido a esta ineficiencia, evite cierres siempre que sea posible, es decir, evite las funciones de anidamiento siempre que sea posible. Por ejemplo, considere el siguiente ejemplo:</span></p> + +<pre class="eval"><span class="brush: js">function assignOnclick(elemento) { + element.onclick = function() { + this.style.backgroundColor = 'blue'; + }; +} +</span></pre> + +<p><span class="external">Esto se puede volver a escribir para evitar el cierre. Sin embargo, la función interna anónima necesitaría ser nombrada y ya no sería privada para <code>assignOnclick</code>: </span></p> + +<pre class="eval"><span class="brush: json">function assignOnclick(elemento) { + elemento.onclick = elemento_onclick; +} + +function elemento_onclick() { + this.style.backgroundColor = 'blue'; +} +</span></pre> + +<h4 id="Multiply-nested_functions" name="Multiply-nested_functions">Multiples funciones anidadas</h4> + +<p><span class="external">Las funciones pueden ser anidadas contigua de la otra, es decir, una función (A) que contiene una función (B) que contiene una función (C), etc. Ambas funciones B y C forman cierres aquí, por lo que B puede acceder a A y C pueden acceder a B. Además, como C puede acceder a B, que puede acceder a A, C también puede acceder a A. Por lo tanto, los cierres pueden contener múltiples ámbitos; contienen recursivamente el alcance de las funciones que lo contienen. Esto es llamado encadenamiento de objetos(<em>scope chaining</em>). (Por qué se llama "<em>chaining</em>"("encadenamiento") se explicará más adelante.)</span></p> + +<p><span class="external">Considere el siguiente ejemplo:</span></p> + +<pre class="eval"><span class="brush: js">function A(x) { + function B(y) { + function C(z) { + alert(x + y + z); + } + C(3); + } + B(2); +} +A(1); // alerts 6 (1 + 2 + 3) +</span></pre> + +<p><span class="external">En este ejemplo, <code>C</code> accede a las <code>B</code> que hayan en <code>y</code> y <code>A</code> en <code>x</code>. Esto se puede hacer porque: </span></p> + +<ol> + <li><span class="external"><code>B</code> forma un cierre que incluye a <code>A</code>, es decir, <code>B</code> puede acceder a los argumentos y variables de <code>A</code>. </span></li> + <li><span class="external"><code>C</code> forma un cierre que incluye a <code>B</code>. </span></li> + <li><span class="external">Como el cierre de <code>B</code> incluye a <code>A</code>, el cierre de <code>C</code> incluye a <code>A</code>, <code>C</code> puede acceder a los argumentos y variables de la Banda <code>A</code>. En otras palabras, codifica los ámbitos de <code>B</code> y A en ese orden. </span></li> +</ol> + +<p><span class="external">Lo contrario, sin embargo, no es cierto. <code>A</code> no puede acceder a <code>C</code>, porque <code>A</code> no puede acceder a ningún argumento o variable de <code>B</code>, que <code>C</code> es una variable de. Así, <code>C</code> permanece privado de sólo <code>B</code>. </span></p> + +<h3 id="Conflictos_de_nombre" name="Conflictos_de_nombre"><span class="external">Conflictos de nombre </span></h3> + +<p><span class="external">Cuando dos argumentos o variables en los ámbitos de un cierre tienen el mismo nombre, existe un conflicto de nombres("<em>name conflict</em>"). Más alcances internos tienen prioridad, por lo que el alcance más interno tiene la más alta precedencia, mientras que el alcance más externo toma el más bajo. Esta es la cadena de alcance. El primero en la cadena es el alcance más interno, y el último es el alcance más exterior. Considera lo siguiente:</span></p> + +<pre class="eval"><span class="brush: js">function fuerade() { + var x = 10; + function dentro(x) { + return x; + } + return dentro; +} +resultado = fuerade()(20); // retorna 20 en lugar de 10</span> +</pre> + +<p><span class="external">El conflicto de nombres ocurre en la sentencia <code>return x</code> y está entre el parámetro <code>x</code> del <code>dentro</code>y la variable <code>x</code> del <code>fuerade</code>. La cadena de alcance aquí es {<code>dentro</code>, <code>fuerade</code>, global object}. Por lo tanto, la <code>x</code> de <code>inside</code>tiene precedentes sobre la <code>x</code> de <code>fuerade</code>, y 20 (<code>dentro</code>de <code>x</code>) se devuelve en lugar de 10 (<code>fuerade</code> de <code>x</code>).</span></p> + +<h2 id="constructor_versus_declaration_versus_expression" name="constructor_versus_declaration_versus_expression"><span class="external">Constructor vs declaración vs expresión</span></h2> + +<p><span class="external">Las diferencias entre la <code>Function</code> constructora, la de declaración y la de expresión. </span></p> + +<p><span class="external">Compare lo siguiente: </span></p> + +<ol> + <li><span class="external">Una función definida con el constructor <code>Function</code> asignado a la variable <code>multiply</code> </span> + + <pre><span class="brush: js">var multiply = new Function("x", "y", "return x * y;"); +</span></pre> + </li> + <li><span class="external">Una declaración de una función denominada <code>multiply</code> </span> + <pre><span class="brush: js">function multiply(x, y) { + return x * y; +} +</span></pre> + </li> + <li><span class="external">Una expresión de función anónima asignada a la variable <code>multiply</code> </span> + <pre><span class="brush: js">var multiply = function(x, y) { + return x * y; +} +</span></pre> + </li> + <li><span class="external">Una declaración de una función denominada <code>func_name</code> asignada a la variable <code>multiply</code> </span> + <pre><span class="brush: js">var multiply = function func_name(x, y) { + return x * y; +} +</span></pre> + </li> +</ol> + +<p><span class="external">Todos hacen aproximadamente la misma cosa, con algunas diferencias sutiles:</span></p> + +<ul> + <li><span class="external">Existe una distinción entre el nombre de la función y la variable a la que se asigna la función:</span><span class="external"> </span> + + <ul> + <li><span class="external">El nombre de la función no se puede cambiar, mientras que la variable a la que se asigna la función puede ser reasignada.</span></li> + <li><span class="external">El nombre de la función sólo se puede utilizar en el cuerpo de la función. Intentar utilizarlo fuera del cuerpo de la función da como resultado un error (o <code>undefined</code> si el nombre de la función se declaró previamente mediante una instrucción <code>var</code>). Por ejemplo: </span> + <pre><span class="brush: js">var y = function x() {}; +alert(x); // arroja un error +</span></pre> + + <p><span class="external">El nombre de la función también aparece cuando la función se serializa vía el método de la </span><code>Function</code> 'toString'.</p> + + <p>Por otro lado, la variable a la que se asigna la función está limitada sólo por su ámbito, que está garantizado para incluir el ámbito en el que se declara la función.</p> + </li> + <li>Como muestra el ejemplo 4, el nombre de la función puede ser diferente de la variable a la que se asigna la función. No tienen relación entre sí.</li> + </ul> + </li> + <li>Una declaración de función también crea una variable con el mismo nombre que el nombre de la función. Por lo tanto, a diferencia de las definidas por las expresiones de función, las funciones definidas por las declaraciones de función se puede acceder por su nombre en el ámbito que se definieron en: + <pre class="brush: js">function x() {} +alert(x); // salida x serializado en un string +</pre> + + <p>El siguiente ejemplo muestra cómo los nombres de las funciones no están relacionados con las variables a las que están asignadas las funciones. Si una "variable de función" se asigna a otro valor, seguirá teniendo el mismo nombre de función:</p> + + <pre class="brush: js">function foo() {} +alert(foo); // el string alterado contiene el nombre + // de la función "foo" +var bar = foo; +alert(bar); // el string todavía contiene el nombre + // de la función "foo" +</pre> + </li> + <li>Una función definida por un<code>Function</code> no tiene un nombre de función. Sin embargo, en el <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a> en el motor de JavaScript, la forma serializada de la función muestra como si tuviera el nombre "anónimo"("anonymous"). Por ejemplo, <code>alert(new Function())</code> salida: + <pre class="brush: js">function anonymous() { +} +</pre> + + <p>Dado que la función en realidad no tiene un nombre, <code>anonymous</code> no es una variable que se puede acceder dentro de la función. Por ejemplo, lo siguiente resultaría en un error:</p> + + <pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + </li> + <li>A diferencia de las funciones definidas por expresiones de función o constructores <code>Function</code> se puede utilizar una función definida por una declaración de función antes de la propia declaración de la función. Por ejemplo: + <pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + </li> + <li>Una función definida por una expresión de función hereda el ámbito actual. Es decir, la función forma un cierre. Por otro lado, una función definida por un constructor de <code>Function</code> no hereda ningún ámbito que no sea el ámbito global (que todas las funciones heredan).</li> + <li>Las funciones definidas por expresiones de función y declaraciones de función son analizadas una sola vez, mientras que las definidas por el constructor de <code>Function</code> no lo son. Es decir, la cadena de cuerpo de función pasada al constructor de <code>Function</code> debe ser analizada cada vez que se evalúa. Aunque una expresión de función crea un cierre cada vez, el cuerpo de la función no es reparsed, por lo que las expresiones de función son aún más rápido que "<code>new Function(...)</code>". Por lo tanto, el constructor de la <code>Function</code> debe evitarse siempre que sea posible.</li> +</ul> + +<p>Una declaración de función es muy fácilmente (ya menudo involuntariamente) convertida en una expresión de función. Una declaración de función deja de ser una cuando:</p> + +<ul> + <li>Se convierte en parte de una expresión</li> + <li>Ya no es un "elemento fuente" de una función o el propio script. Un "elemento de origen" es una sentencia no anidada en el script o un cuerpo de función: + <pre class="brush: js">var x = 0; // elemento fuente +if (x == 0) { // elemento fuente + x = 10; // no es un elemento fuente + function boo() {} // no es un elemento fuente +} +function foo() { // elemento fuente + var y = 20; // elemento fuente + function bar() {} // elemento fuente + while (y == 10) { // elemento fuente + function blah() {} // no es un elemento fuente + y++; // no es un elemento fuente + } +} +</pre> + </li> +</ul> + +<p>Ejemplos:</p> + +<ul> + <li> + <pre class="brush: js">// function declaración +function foo() {} + +// expresión de una función +(function bar() {}) + +// expresión de una función +x = function hello() {} +</pre> + </li> + <li> + <pre class="brush: js">if (x) { + // expresión de la función + function world() {} +} +</pre> + </li> + <li> + <pre class="brush: js">// instrucción de la función +function a() { + // instrucción de la función + function b() {} + if (0) { + // expresión de la función + function c() {} + } +} +</pre> + </li> +</ul> + +<h3 id="Conditionally_defining_a_function" name="Conditionally_defining_a_function">Definición condicional de una función</h3> + +<p>Las funciones se pueden definir de forma condicional utilizando expresiones de función o el constructor <code>Function</code>.</p> + +<p>En la siguiente secuencia de comandos, la función <code>zero</code> nunca se define y no se puede invocar, porque '<code>if (0)</code>' se evalúa como false:</p> + +<pre class="brush: js">if (0) + function zero() { + document.writeln("Esto es zero."); + } +</pre> + +<p>Si se cambia el script para que la condición se convierta en '<code>if (1)</code>', se define la función <code>zero</code>.</p> + +<div class="note"> +<p>Nota: Aunque esto parece una declaración de función, ésta es en realidad una expresión de función ya que está anidada dentro de otra instrucción. Ver <a href="#constructor_versus_declaration_versus_expression">las diferencias entre las funciones de declaración y de expresión</a>.</p> +</div> + +<div class="note"> +<p>Nota: Algunos motores JavaScript, sin incluir <a href="/es/docs/Mozilla/Projetos/SpiderMonkey">SpiderMonkey</a>, tratan incorrectamente cualquier expresión de función con un nombre como una declaración de función. Esto llevaría a que se definiera <code>zero</code> incluso con el siempre-falso("<em>always-false</em>") condicional. Una manera más segura de definir funciones condicionalmente es definir la función anónimamente y asignarla a una variable:</p> +</div> + +<pre class="brush: js">if (0) + var zero = function() { + document.writeln("Esto es zero."); + } +</pre> + +<h2 id="Functions_as_event_handlers" name="Functions_as_event_handlers">Funciones como manejadores de eventos</h2> + +<p>En JavaScript, los controladores de eventos <a href="es/DOM">DOM</a> son funciones (en oposición a los objetos que contienen un método <code>handleEvent</code> en otros enlaces de idioma DOM). Las funciones se pasan un objeto de <a href="es/DOM/event">evento</a> como el primer y único parámetro. Como cualquier otro parámetro, si el objeto de evento no necesita ser utilizado, puede omitirse en la lista de parámetros formales.</p> + +<p>Los posibles objetivos de eventos en un documento <a href="es/HTML">HTML</a> incluyen: <code>window</code> (<code>Window</code> objects("objeto de ventana"), including frames("marcos")), <code>document</code> (<code>HTMLDocument</code> objects("objetos HTMLDocument")), y elementos (<code>Element</code> objects("objetos Elemento")). En el <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">HTML DOM</a>, los destinos de evento tienen propiedades de controlador de eventos. Estas propiedades son nombres de eventos en minúsculas con prefijo "on", e.g. <code>onfocus</code>. Los eventos <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Level 2 Events</a> proporcionan una forma alternativa y más sólida de agregar oyentes de eventos.</p> + +<div class="note"> +<p>Nota: Los eventos son parte del DOM, no de JavaScript. (JavaScript simplemente proporciona un enlace al DOM.)</p> +</div> + +<p>El ejemplo siguiente asigna una función a un manejador de eventos de "foco"("focus") de ventana.</p> + +<pre>window.onfocus = function() { + document.body.style.backgroundColor = 'white'; +} +</pre> + +<p>Si se asigna una función a una variable, puede asignar la variable a un controlador de eventos. El siguiente código asigna una función a la variable <code>setBGColor</code>.</p> + +<pre>var setBGColor = new Function("document.body.style.backgroundColor = 'white';"); +</pre> + +<p>Puede utilizar esta variable para asignar una función a un controlador de eventos de varias maneras. Aquí hay dos formas:</p> + +<ol> + <li>Escritura con propiedades de evento DOM HTML<br> + + <pre>document.form1.colorButton.onclick = setBGColor; +</pre> + </li> + <li>Atributo de evento HTML<br> + + <pre><input name="colorBoton" type="button" + value="Cambia color de fondo" + onclick="setBGColor();"/> +</pre> + + <p>Un manejador de eventos establecido de esta manera es en realidad una función, denominada después del atributo, envuelta alrededor del código especificado. Esta es la razón por la que los paréntesis en "<code>setBGColor()</code>" son necesarios aquí (en lugar de sólo "<code>setBGColor</code>").</p> + </li> +</ol> + +<p>Es equivalente a:</p> + +<pre>document.form1.colorButton.onclick = function onclick(event) { + setBGColor(); +} +</pre> + +<p>Observe cómo se pasa el objeto de evento a esta función anónima como <code>event</code> de parámetro. Esto permite que el código especificado utilice el objeto Evento("Event object)":</p> + +<pre><input ... + onclick="alert(event.target.tagName);"/> +</pre> + +<p>Al igual que cualquier otra propiedad que se refiere a una función, el controlador de eventos puede actuar como un método, y <code>this</code> se refiere al elemento que contiene el controlador de eventos. En el ejemplo siguiente, se llama a la función referida por <code>onfocus</code> con <code>this</code> igual a <code>window</code>.</p> + +<pre class="eval">window.onfocus(); +</pre> + +<p>Un error común de principiante de JavaScript es el añadir paréntesis y / o parámetros al final de la variable, es decir, llamar al manejador de eventos cuando lo asigna. La adición de estos paréntesis asignará el <em>valor devuelto al llamar al manejador de eventos</em>, que a menudo es <code>undefined</code> (si la función no devuelve nada), en lugar del controlador de eventos en sí:</p> + +<pre class="eval">document.form1.button1.onclick = setBGColor(); +</pre> + +<p>Para pasar parámetros a un manejador de eventos, el manejador debe ser envuelto en otra función de la siguiente manera:</p> + +<pre class="eval">document.form1.button1.onclick = function() { + setBGColor('Algun valor'); +}; +</pre> + +<h3 id="Backward_compatibility" name="Backward_compatibility">Compatibilidad con versiones anteriores</h3> + +<h4 id="JavaScript_1.1_and_earlier" name="JavaScript_1.1_and_earlier">JavaScript 1.1 y anteriores</h4> + +<p>No puede anidar una sentencia de función en otra instrucción o en sí misma.</p> + +<h3 id="Local_variables_within_functions" name="Local_variables_within_functions">Variables locales dentro de las funciones</h3> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a>: Objeto similar a una matriz que contiene los argumentos pasados a la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/callee">arguments.callee</a>: Especifica la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/caller">arguments.caller</a>: Especifica la función que invocó la función en ejecución.</p> + +<p><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments/length">arguments.length</a>: Especifica el número de argumentos pasados a la función.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<h4 id="1.29_Returning_a_formatted_number" name="1.29_Returning_a_formatted_number">1) Devolver un número con formato</h4> + +<p>La siguiente función devuelve una cadena que contiene la representación formateada de un número rellenado con ceros a la izquierda.</p> + +<pre class="eval">// Esta función devuelve una cadena rellenada con ceros a la izquierda + +function padZeros(num, totalLen) { + var numStr = num.toString(); // Inicializa un valor de retorno como cadena + var numZeros = totalLen - numStr.length; // Calcula el no. de ceros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>Las siguientes sentencias llaman a la función padZeros.</p> + +<pre class="eval">var resultado; +resultado = padZeros(42,4); // retorna "0042" +resultado = padZeros(42,2); // retorna "42" +resultado = padZeros(5,4); // retorna "0005" +</pre> + +<h4 id="2.29_Determining_whether_a_function_exists" name="2.29_Determining_whether_a_function_exists">2) Determinar si existe una función</h4> + +<p>Puede determinar si existe una función utilizando el operador <code>typeof</code>. En el ejemplo siguiente, se realiza una prueba para determinar si el objeto <code>window</code> tiene una propiedad llamada <code>noFunc</code> que es una función. Si es así, se utiliza; de lo contrario, se tomarán otras medidas.</p> + +<pre> if ('function' == typeof window.noFunc) { + // utiliza noFunc() + } else { + // hacer algo mas + } +</pre> + +<div class="note"> +<p>Nota: Tenga en cuenta que en la prueba <code>if</code>, e utiliza una referencia a <code>noFunc</code> aquí no hay paréntesis "()" después del nombre de la función para que la función real no se llame.</p> +</div> + +<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3> + +<p><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Function">Function</a>, <a href="es/Referencia_de_JavaScript_1.5/Sentencias/function">sentencia function</a>, <a href="es/Referencia_de_JavaScript_1.5/Operadores/Operadores_globales/function">operador function</a></p> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Functions", "ru": "ru/\u042f\u0434\u0440\u043e_JavaScript_1.5_\u0421\u043f\u0440\u043e\u0432\u0447\u043d\u0438\u043a/Functions", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Fonctions", "ja": "ja/Core_JavaScript_1.5_Reference/Functions" } ) }}</p> diff --git a/files/es/web/javascript/reference/functions/method_definitions/index.html b/files/es/web/javascript/reference/functions/method_definitions/index.html new file mode 100644 index 0000000000..2aa23ca9b3 --- /dev/null +++ b/files/es/web/javascript/reference/functions/method_definitions/index.html @@ -0,0 +1,226 @@ +--- +title: Method definitions +slug: Web/JavaScript/Referencia/Funciones/Method_definitions +translation_of: Web/JavaScript/Reference/Functions/Method_definitions +--- +<div>{{JsSidebar("Functions")}}</div> + +<div>A partir de ECMAScript 2015 (ES6), se introdujo una sintaxis abreviada para la definición de métodos en inicializadores de objetos. Es una forma abreviada para la asignación de una función al nombre del método.</div> + +<div> </div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var obj = { + <var>property</var>( <var>parameters…</var> ) {}, + *<var>generator</var>( <var>parameters…</var> ) {}, +// also with computed keys: + [property]( <var>parameters…</var> ) {}, + *[generator]( <var>parameters…</var> ) {}, +// compare ES5 getter/setter syntax: + get <var>property</var>() {}, + set <var>property</var>(<var>value</var>) {} +}; +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sintaxis abreviada es similar a la introducida en ECMAScript 5 con <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> y <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> + +<p>Dado el siguiente código:</p> + +<pre class="brush: js">var obj = { + foo: function() {}, + bar: function() {} +};</pre> + +<p>Ahora se puede abreviar esto mismo como:</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<div class="note"> +<p><strong>Nota :</strong> La sintaxis abreviada usa funciones con nombre en lugar de funciones anónimas (como en …<code>foo: function() {}</code>…). Las funciones con nombre pueden ser llamadas desde el cuerpo de la función (esto es imposible con funciones anónimas, ya que no existe un identificador al que referirse). Para más detalles, ver {{jsxref("Operators/function","function","#Examples")}}.</p> +</div> + +<h3 id="Abreviatura_de_métodos_generadores">Abreviatura de métodos generadores</h3> + +<p>Los <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">métodos generadores</a> también pueden definirse usando la sintaxis abreviada. Note que el asterisco (*) en la sintaxis abreviada debe estar antes del nombre de propiedad del generador. Esto es, <code>* g(){}</code> funcionará, pero <code>g *(){}</code> no.</p> + +<pre class="brush: js;highlight[12]">// Usando una propiedad con nombre (pre-ES6) +var obj2 = { + g: function*() { + var index = 0; + while(true) + yield index++; + } +}; + +// El mismo objeto, usando la sintaxis abreviada +var obj2 = { + * g() { + var index = 0; + while(true) + yield index++; + } +}; + +var it = obj2.g(); +console.log(it.next().value); // 0 +console.log(it.next().value); // 1</pre> + +<h3 id="Las_definiciones_de_métodos_no_son_constructores_(instanciables_con_new)">Las definiciones de métodos no son constructores (instanciables con new)</h3> + +<p>Las las definiciones de métodos no son constructores y generarán un {{jsxref("TypeError")}} si intenta instanciarlos.</p> + +<pre class="brush: js example-bad">var obj = { + method() {}, +}; +new obj.method; // TypeError: obj.method no es un constructor + +var obj = { + * g() {} +}; +new obj.g; // TypeError: obj.g no es un constructor (cambiado en ES2016) +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Caso_de_prueba_simple">Caso de prueba simple</h3> + +<pre class="brush: js;highlight[3]">var obj = { + a : "foo", + b(){ return this.a; } +}; +console.log(obj.b()); // "foo" +</pre> + +<h3 id="Nombres_de_propiedad_computados">Nombres de propiedad computados</h3> + +<p>La sintaxis abreviada también soporta nombres de propiedades computados.</p> + +<pre class="brush: js;highlight[4]">var bar = { + foo0 : function (){return 0;}, + foo1(){return 1;}, + ["foo" + 2](){return 2;}, +}; + +console.log(bar.foo0()); // 0 +console.log(bar.foo1()); // 1 +console.log(bar.foo2()); // 2</pre> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Cambiado el que los métodos generadores no deban tener una trampa [[Construct]] y deban fallar cuando se usen con <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Definición de métodos abreviada</td> + <td>{{CompatChrome("39")}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("26")}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Métodos generadors no son constructores (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("43")}}</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>Prestación</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>Definición de métodos abreviada</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Métodos generadores no son constructores (ES2016)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("43")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_para_SpiderMonkey">Notas específicas para SpiderMonkey</h2> + +<ul> + <li>Anteriormente a SpiderMonkey 38 {{geckoRelease(38)}}, "<code>get</code>" y "<code>set</code>" eran nombres no válidos para métodos generadores. Esto ha sido corregido en {{bug(1073809)}}.</li> + <li>Anteriormente a SpiderMonkey 41 {{geckoRelease(41)}}, las llaves no eran requeridas en las definiciones de métodos. Estas son requeridas de ahora en adelante conforme a la especificación ES6 y su omisión arrojará un {{jsxref("SyntaxError")}} en esta versión y posteriores ({{bug(1150855)}}). + <pre class="brush: js example-bad">var o = {x() 12}; // SyntaxError</pre> + </li> + <li>La restricción de que sólo los métodos generadores sean constructores fue implementada en SpiderMonkey 41 {{geckoRelease(41)}}. Ver también {{bug(1059908)}} y {{bug(1166950)}}.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexica grammatical</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/rest_parameters/index.html b/files/es/web/javascript/reference/functions/rest_parameters/index.html new file mode 100644 index 0000000000..2e26e2c6e0 --- /dev/null +++ b/files/es/web/javascript/reference/functions/rest_parameters/index.html @@ -0,0 +1,266 @@ +--- +title: Parámetros Rest +slug: Web/JavaScript/Referencia/Funciones/parametros_rest +tags: + - Funciones + - JavaScript + - Parametros Rest +translation_of: Web/JavaScript/Reference/Functions/rest_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>La sintaxis de los <strong>parámetros rest </strong>nos permiten representar un número indefinido de argumentos como un array.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</p> + +<p>La fuente interactiva de este ejemplo es almacenado en un repositorio de GitHub. Si a ti te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona este repositorio <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull-request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js notranslate">function(a, b, ...theArgs) { + // ... +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p class="brush: js">El último parámetro de una función se puede prefijar con <code>...</code>, lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar".</p> + +<p class="brush: js">Sólo el último parámetro puede ser un "parámetro rest".</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a); + console.log("b", b); + console.log("manyMoreArgs", manyMoreArgs); +} + +myFun("one", "two", "three", "four", "five", "six"); + +// Console Output: +// a, one +// b, two +// manyMoreArgs, [three, four, five, six] +</pre> + +<h3 id="Diferencia_entre_los_parámetros_rest_y_el_objeto_arguments">Diferencia entre los parámetros rest y el objeto <code>arguments</code></h3> + +<p>Hay tres principales diferencias entre los parámetros rest y el objeto <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a>:</p> + +<ul> + <li>los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto <code>arguments</code> contiene todos los argumentos que se le han pasado a la función;</li> + <li>el objeto <code>arguments</code> no es un array real, mientras que los parámetros rest son instancias de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> , lo que significa que lo los métodos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> pueden aplicarse directamente;</li> + <li>el objeto <code>arguments</code> tiene una funcionalidad adicional específica para sí mismo (como la propiedad <code>callee</code>).</li> +</ul> + +<h3 id="De_argumentos_a_array">De argumentos a array</h3> + +<p>Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.</p> + +<pre class="brush: js notranslate">// Antes de los parámetros rest, "arguments" se podía convertir en un array usando: + +function f(a, b) { + + let normalArray = Array.prototype.slice.call(arguments) + // -- o -- + let normalArray = [].slice.call(arguments) + // -- o -- + let normalArray = Array.from(arguments) + + let first = normalArray.shift() // OK, nos da el primer argumento + let first = arguments.shift() // ERROR (arguments no es un array) +} + +// Ahora, puedes acceder fácilmente a un array usando un parametro rest. + +function f(...args) { + let normalArray = args + let first = normalArray.shift() // OK, gives the first argument +}</pre> + +<h3 id="Desestructuración_de_los_parametros_rest">Desestructuración de los parametros rest</h3> + +<p>Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a>.</p> + +<pre class="notranslate"><code>function f(...[a, b, c]) { + return a + b + c; +} + +f(1) // NaN (b y c son indefinidos) +f(1, 2, 3) // 6 +f(1, 2, 3, 4) // 6 (el cuarto parámetro no está desestructurado)</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_parámetros_rest">Usando parámetros rest</h3> + +<p>En este ejemplo, el primer argumento es mapeado con 'a' y el segundo con 'b', entonces, esos argumentos nombrados, son usados normalmente</p> + +<p>De todas formas, el tercer argumento, <code>manyMoreArgs</code>, será un array que contendrá tantos argumentos como el usuario incluya (3er, 4to, 5to ...).</p> + +<pre class="brush: js notranslate">function myFun(a, b, ...manyMoreArgs) { + console.log("a", a) + console.log("b", b) + console.log("manyMoreArgs", manyMoreArgs) +} + +myFun("one", "two", "three", "four", "five", "six") + +// a, one +// b, two +// manyMoreArgs, [three, four, five, six]</pre> + +<p>Debajo... incluso si hay solo un valor, el ultimo argumento seguirá siendo colocado dentro de un array.</p> + +<pre class="brush: js notranslate">// usando la misma definición de función del ejemplo anterior +myFun("one", "two", "three") + +// a, one +// b, two +// manyMoreArgs, [three]</pre> + +<p>Debajo, el tercer argumento no esta provisto, pero <code>manyMoreArgs</code> continúa siendo un array (aunque uno vacío).</p> + +<pre class="brush: js notranslate">//usando la misma definición de función del ejemplo anterior + +myFun("one", "two") + +// a, one +// b, two +// manyMoreArgs, []</pre> + +<h3 id="Argument_length">Argument length</h3> + +<p>Puesto que <code>theArgs</code> es un array, su tamaño (un conteo de sus elementos) es dado por la propiedad <code>length</code> :</p> + +<pre class="brush: js notranslate">function fun1(...theArgs) { + console.log(theArgs.length); +} + +fun1(); // 0 +fun1(5); // 1 +fun1(5, 6, 7); // 3 +</pre> + +<h3 id="Ordinary_parameter_and_rest_parameters">Ordinary parameter and rest parameters</h3> + +<p>En el siguiente ejemplo, se usa un parámetro rest para agrupar dentro de un array a todos los argumentos despues del primero. Luego cada uno es multiplicado por el primero y el arreglo es retornado:</p> + +<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) { + return theArgs.map(function (element) { + return multiplier * element; + }); +} + +let arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6] +</pre> + +<p>El siguiente ejemplo muestra que se puede usar los métodos de <code>Array</code> en los parámetros rest , pero no en el objeto <code>arguments</code>:</p> + +<pre class="brush: js notranslate">function sortRestArgs(...theArgs) { + var sortedArgs = theArgs.sort(); + return sortedArgs; +} + +console.log(sortRestArgs(5,3,7,1)); // muestra 1,3,5,7 + +function sortArguments() { + var sortedArgs = arguments.sort(); + return sortedArgs; // esto nunca va a ocurrir +} + +// lanza un TypeError: arguments.sort is not a function +console.log(sortArguments(5,3,7,1)); +</pre> + +<p>Para poder usar los métodos de <code>Array</code> en el objeto <code>arguments</code>, se debe convertir a un <code>Array</code> primero.</p> + +<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-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>definción inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>{{CompatNo}}</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 for Android</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + <td>{{CompatGeckoMobile("15.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(47)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments object</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Arreglos">Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="Functions and function scope">Functions</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">Original proposal at ecmascript.org</a></li> + <li><a class="external" href="http://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/">JavaScript arguments object and beyond</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li> +</ul> diff --git a/files/es/web/javascript/reference/functions/set/index.html b/files/es/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..ef555e6759 --- /dev/null +++ b/files/es/web/javascript/reference/functions/set/index.html @@ -0,0 +1,217 @@ +--- +title: setter +slug: Web/JavaScript/Referencia/Funciones/set +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Funciones")}}</div> + +<p>La sintaxis <strong><code>set</code></strong> asocia la propiedad de un objeto a una función que será llamada cuando haya un intento de asignar valor a esa propiedad.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><em><code>prop</code></em></dt> + <dd>El nombre de la propiedad a asociar con la función dada.</dd> +</dl> + +<dl> + <dt><em><code>val</code></em></dt> + <dd>Un alias para la variable que contiene el valor a asignar a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">propiedad</span></font>.</dd> + <dt><em><code>expression</code></em></dt> + <dd>A partir de ECMAScript 2015, se puede también usar expresiones para nombres de propiedades computados para asociar a la función dada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>En JavaScript, un setter puede ser usado para ejecutar una función donde sea que una propiedad se intente cambiar. Los setters son regularmente usados en conjunto con getters para crear un tipo de pseudo-propiedad. No es posible tener simultáneamente un setter en una propiedad que ya tiene un valor.</p> + +<p>Tenga en cuenta lo siguiente al trabajar con setters:</p> + +<div> +<ul> + <li>Puede tener un identificador ya sea number o string;</li> + <li>Debe tener exactamente un parámentro (ver <a class="external" href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow">Incompatible <abbr title="ECMAScript 5th edition">ES5</abbr> change: literal getter and setter functions must now have exactly zero or one arguments</a> para más información);</li> + <li>No debe aparecer en un objeto de notación literal con otro <code>set</code> o con otra entrada de datos con la misma propiedad.<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> y <code>{ x: ..., set x(v) { } }</code> están prohibidos )</li> +</ul> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Definiendo_un_setter_en_el_inicializador_de_nuevos_objetos">Definiendo un setter en el inicializador de nuevos objetos</h3> + +<p>En el siguiente ejemplo definimos una pseudo-propiedad <code>actual</code> al objeto <code>lenguaje</code>. Cuando se le asigne un valor a <code>actual</code>, actualiza <code>log</code> con ese valor:</p> + +<pre class="brush: js notranslate">var lenguaje = { + set actual(mensaje) { + this.log.push(mensaje); + }, + log: [] +} +lenguaje.actual='ES'; +console.log(lenguaje.log); // ['ES'] + +lenguaje.actual='FR'; +console.log(lenguaje.log); // ['ES', 'FR'] +</pre> + + + +<p>Note que <code>actual</code> no está definido y cualquier intento de accederlo devolverá <code>undefined</code>.</p> + +<h3 id="Eliminando_un_setter_con_el_operador_delete">Eliminando un setter con el operador <code>delete</code> </h3> + +<p>Si desea eliminar el setter, puede simplemente aplicar <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete" title="en-US/docs/JavaScript/Reference/Operators/Special/delete"><code>delete</code></a> en él:</p> + +<pre class="brush: js notranslate">delete lenguaje.actual; +</pre> + +<h3 id="Definiendo_un_setter_en_un_objecto_existente_usando_defineProperty">Definiendo un setter en un objecto existente usando <code>defineProperty</code></h3> + +<p>Para añadir un setter a un objeto <em>existente</em>,<em> </em>use {{jsxref("Object.defineProperty()")}}</p> + +<pre class="brush: js notranslate">consr o = {a: 0}; + +Object.defineProperty(o, 'b', { + set: function (x) { this.a = x / 2; } +}); + +o.b = 10; // Ejecuta el setter, el cual asigna 10 / 2 (5) a la propiedad 'a' +console.log(o.a) // 5</pre> + +<h3 id="Usando_un_nombre_de_propiedad_computado">Usando un nombre de propiedad computado</h3> + +<div class="note"> +<p><strong>Nota:</strong> Propiedades computadas son 'experimental technology'<em>,</em> parte de la propuesta para ECMAScript 6, y no está soportado en todos los navegadores. Dará error de sintaxis en entornos no soportados.</p> +</div> + +<pre class="brush: js notranslate">const expr = 'foo'; + +var obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); // "bar" +obj.foo = "baz"; // ejecuta el setter +console.log(obj.baz); // "baz" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-method-definitions', 'Method definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Se añaden las propiedades computadas.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</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>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(1)}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>9.5</td> + <td>3</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</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>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>{{ CompatGeckoMobile("1.8.1") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_para_SpiderMonkey-specific">Notas específicas para SpiderMonkey-specific</h2> + +<ul> + <li>Comenzando con<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1"> JavaScript 1.8.1</a>, los setters ya no son llamados cuando se definen las propiedades en los inicializadores de objetos y arrays.</li> + <li>De SpiderMonkey 38 en adelante, un setter con un {{jsxref("Functions/rest_parameters", "rest parameter", "", 1)}} es un {{jsxref("SyntaxError")}} conforme a la especificación ES6.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.defineGetter", "__defineGetter__")}}</li> + <li>{{jsxref("Object.defineSetter", "__defineSetter__")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Definiendo Getters y Setters</a> en la Guía JavaScript</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/aggregateerror/index.html b/files/es/web/javascript/reference/global_objects/aggregateerror/index.html new file mode 100644 index 0000000000..524d0f9f5a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/aggregateerror/index.html @@ -0,0 +1,87 @@ +--- +title: AggregateError +slug: Web/JavaScript/Referencia/Objetos_globales/AggregateError +tags: + - AggregateError + - Clase + - Experimental + - Interfaz + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/AggregateError +--- +<div>{{JSRef}}</div> + +<p>El objeto <code><strong>AggregateError</strong></code> representa un error cuando se deben agrupar varios errores en un solo error. Se lanza cuando una operación necesita informar de varios errores, por ejemplo, {{JSxRef("Promise.any()")}}, cuando todas las promesas que se le pasan son rechazadas.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{JSxRef("Global_Objects/AggregateError/AggregateError", "AggregateError()")}}</dt> + <dd>Crea un nuevo objeto <code>AggregateError</code>.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{JSxRef("Error.prototype.message", "AggregateError.prototype.message")}}</dt> + <dd>Mensaje de error, el valor predeterminado es <code>""</code> (la cadena vacía).</dd> + <dt>{{JSxRef("Error.prototype.name", "AggregateError.prototype.name")}}</dt> + <dd>Nombre del error, el valor predeterminado es <code>AggregateError</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Capturar_un_error_agregado">Capturar un error agregado</h3> + +<pre class="brush: js; notranslate">Promise.any([ + Promise.reject(new Error("algún error")), +]).catch(e => { + console.log(e instanceof AggregateError); // true + console.log(e.message); // "Todas las promesas rechazadas" + console.log(e.name); // "AggregateError" + console.log(e.errors); // [ Error: "algún error" ] +}); +</pre> + +<h3 id="Crear_un_AggregateError">Crear un <code>AggregateError</code></h3> + +<pre class="brush: js; notranslate">try { + throw new AggregateError([ + new Error("algún error"), + ], 'Hola'); +} catch (e) { + console.log(e instanceof AggregateError); // true + console.log(e.message); // "Hola" + console.log(e.name); // "AggregateError" + console.log(e.errors); // [ Error: "algún error" ] +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Promise.any', '#sec-aggregate-error-objects', 'AggregateError')}}</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.builtins.AggregateError")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Error")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/@@iterator/index.html b/files/es/web/javascript/reference/global_objects/array/@@iterator/index.html new file mode 100644 index 0000000000..65ac581204 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/@@iterator/index.html @@ -0,0 +1,89 @@ +--- +title: 'Array.prototype[@@iterator]()' +slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@iterator +--- +<div>{{JSRef}}</div> + +<p>El valor inicial de la propiedad <code><strong>@@iterator</strong></code> es el mismo objeto de función que el valor inicial de la propiedad {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>arr</var>[Symbol.iterator]()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El valor inicial dado por el <strong>iterador</strong> {{jsxref("Array.prototype.values()", "values()")}}. Por defecto, usar <code>arr[Symbol.iterator]</code> devolverá la función {{jsxref("Array.prototype.values()", "values()")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Iteración_usando_el_bucle_for...of">Iteración usando el bucle <code>for...of</code> </h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +// nuestro navegador debe ser compatible con el bucle for..of +// y variables let-scoped en bucles for +for (let letter of eArr) { + console.log(letter); +} +</pre> + +<h3 id="Iteración_alternativa">Iteración alternativa</h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var eArr = arr[Symbol.iterator](); +console.log(eArr.next().value); // w +console.log(eArr.next().value); // y +console.log(eArr.next().value); // k +console.log(eArr.next().value); // o +console.log(eArr.next().value); // p +</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-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial..</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@iterator")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/@@species/index.html b/files/es/web/javascript/reference/global_objects/array/@@species/index.html new file mode 100644 index 0000000000..2f15ad345a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/@@species/index.html @@ -0,0 +1,76 @@ +--- +title: 'get Array[@@species]' +slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@species +tags: + - Array + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@species +--- +<div>{{JSRef}}</div> + +<p>La propiedad de acceso <code><strong>Array[@@species]</strong></code> devuelve el constructor de <code>Array</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Array[Symbol.species] +</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El constructor {{jsxref("Array")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad de acceso <code>species</code> devuelve el constructor predeterminado para objetos <code>Array</code>. Los constructores de subclase pueden anularlo para cambiar la asignación del constructor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>La propiedad <code>species</code> devuelve la función de constructor predeterminada, que es el constructor <code>Array</code> para objetos <code>Array</code>:</p> + +<pre class="brush: js">Array[Symbol.species]; // function Array()</pre> + +<p>In a derived collection object (e.g. your custom array <code>MyArray</code>), the <code>MyArray</code> species is the <code>MyArray</code> constructor. However, you might want to overwrite this, in order to return parent <code>Array</code> objects in your derived class methods:</p> + +<pre class="brush: js">class MyArray extends Array { + // Overwrite MyArray species to the parent Array constructor + static get [Symbol.species]() { return Array; } +}</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-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@species")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html b/files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html new file mode 100644 index 0000000000..43dc771ae7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html @@ -0,0 +1,78 @@ +--- +title: 'Array.prototype[@@unscopables]' +slug: Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables +tags: + - Array + - JavaScript + - Matriz + - Propiedad + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/@@unscopables +--- +<div>{{JSRef}}</div> + +<p>La propiedad de símbolo <code><strong>@@unscopable</strong></code> contiene nombres de propiedad que no se incluyeron en el estándar ECMAScript antes de la versión ES2015. Estas propiedades se excluyen de los enlaces de declaración <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>[Symbol.unscopables]</pre> + +<h2 id="Descripción">Descripción</h2> + +<p> </p> + +<p>Las propiedades de matriz predeterminadas que se excluyen de los enlaces <code>with</code> son: copyWithin, entries, fill, find, findIndex, includes, keys, y values.</p> + +<p>Consulte {{jsxref("Symbol.unscopables")}} para saber cómo configurar <code>unscopables</code> para sus propios objetos.</p> + +<p>{{js_property_attributes(0,0,1)}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente código funciona bien en ES5 y más abajo. Sin embargo, en ECMAScript 2015 y posterior, se introdujo el método {{jsxref("Array.prototype.keys()")}}. Eso significa que dentro de los entornos <code>with</code>, las "keys" ahora serían el método y no la variable. Aquí es donde entra en juego la propiedad de símbolo <code>@@unscopables</code> <code>Array.prototype[@@unscopables]</code> incorporada y evita que algunos de los métodos Array tengan un alcance en la instrucción <code>with</code>.</p> + +<pre class="brush: js">var keys = []; + +with (Array.prototype) { + keys.push('something'); +} + +Object.keys(Array.prototype[Symbol.unscopables]); +// ["copyWithin", "entries", "fill", "find", "findIndex", +// "includes", "keys", "values"]</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-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.@@unscopables")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Symbol.unscopables")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/concat/index.html b/files/es/web/javascript/reference/global_objects/array/concat/index.html new file mode 100644 index 0000000000..dc7dfc999d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/concat/index.html @@ -0,0 +1,140 @@ +--- +title: Array.prototype.concat() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/concat +tags: + - Array + - JavaScript + - Métodos + - Prototipo + - Referencia + - array.concat + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/concat +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>concat()</strong></code> se usa para unir dos o más arrays. Este método no cambia los arrays existentes, sino que devuelve un nuevo array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-concat.html","shorter")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var <var>nuevo_array</var> = <var>viejo_array</var>.concat(<var>valor1</var>[, <var>valor2</var>[, ...[, <var>valorN</var>]]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor<em>N</em></code> {{optional_inline}}</dt> + <dd>Arrays y/o valores a concatenar en el nuevo array. Ver la descripción posterior para más detalles.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<dl> + <dd>Una nueva instancia de {{jsxref("Array")}}.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>concat</code> crea un nuevo array que consta de los elementos del objeto que lo llama, seguido, en orden de ingreso, por los elementos de cada parámetro (en caso de que el parámetro sea un array), o el parámetro mismo (en caso de que no sea un array). No se aplica de forma recursiva a parámetros con arreglos anidados.</p> + +<p>El método <code>concat</code> no altera <code>this</code> el array original, ni ninguno de los que fueron ingresados como parámetros, sino que devuelve una copia superficial que contiene copias de los mismos elementos de los arrays originales combinados. Los elementos de los arrays originales son copiados en el nuevo array de la siguiente manera:</p> + +<ul> + <li>Referencias a Objetos (no el objeto real): <code>concat</code> copia las referencias de objetos en el nuevo array. Ambos, el array original y el nuevo refieren al mismo objeto. Es decir, si un objeto referenciado es modificado, los cambios serán visibles tanto en el array nuevo como en el antiguo.</li> + <li>Tipo de de datos como cadenas, números y boleanos (no objetos {{jsxref("Global_Objects/String", "String")}}, {{jsxref("Global_Objects/Number", "Number")}} o {{jsxref("Global_Objects/Boolean", "Boolean")}} objects): <code>concat</code> copia los valores de los strings y numeros en el nuevo array.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Al concatenar arrays o valores no se modificarán los originales. Además, las operaciones en el nuevo array (excepto las operaciones en elementos que son referencias a objetos) no tendrán efecto en el array original, y viceversa.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Concatenando_dos_arrays">Concatenando dos arrays</h3> + +<p>En el siguiente código se concatenan dos arrays:</p> + +<pre class="brush: js">const letters = ['a', 'b', 'c']; +const numbers = [1, 2, 3]; + +letters.concat(numbers); +// result in ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Concatenando_tres_arrays">Concatenando tres arrays</h3> + +<p>En el siguiente código se concatenan tres arrays:</p> + +<pre class="brush: js">const num1 = [1, 2, 3]; +const num2 = [4, 5, 6]; +const num3 = [7, 8, 9]; + +const numbers = num1.concat(num2, num3); + +console.log(numbers); +// results in [1, 2, 3, 4, 5, 6, 7, 8, 9] +</pre> + +<h3 id="Concatenando_valores_a_un_array">Concatenando valores a un array</h3> + +<p>En el siguiente código se concatenan tres valores a un array:</p> + +<pre class="brush: js">var alpha = ['a', 'b', 'c']; + +var alphaNumeric = alpha.concat(1, [2, 3]); + +console.log(alphaNumeric); +// Da como resultado: ['a', 'b', 'c', 1, 2, 3] +</pre> + +<h3 id="Concatenando_arrays_anidados">Concatenando arrays anidados</h3> + +<p>En el siguiente código concatena arrays anidados y demuestra retención de referencias:</p> + +<pre class="brush: js">var num1 = [[1]]; +var num2 = [2, [3]]; + +var nums = num1.concat(num2); + +console.log(nums); +// Da como resultado: [[1], 2, [3]] + +// modifica el primer elemento de num1 +num1[0].push(4); + +console.log(nums); +// Da como resultado: [[1, 4], 2, [3]]</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-array.prototype.concat', 'Array.prototype.concat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.concat")}}</p> +</div> + +<div id="compat-mobile"></div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.push", "push")}} / {{jsxref("Array.pop", "pop")}} — añadir/eliminar elementos desde el fin del array</li> + <li>{{jsxref("Array.unshift", "unshift")}} / {{jsxref("Array.shift", "shift")}} — añadir/eliminar elementos desde el comienzo del array</li> + <li>{{jsxref("Array.splice", "splice")}} — añadir/eliminar elementos desde una posición específica del array</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("Symbol.isConcatSpreadable")}} – controla el flattening (aplanamiento).</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/copywithin/index.html b/files/es/web/javascript/reference/global_objects/array/copywithin/index.html new file mode 100644 index 0000000000..e28b99c382 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/copywithin/index.html @@ -0,0 +1,165 @@ +--- +title: Array.prototype.copyWithin() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Prototipo + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/copyWithin +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>copyWithin()</strong></code> transfiere una copia plana de una sección a otra dentro del mismo array ( o contexto similar ), sin modificar su propiedad length y lo devuelve.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-copywithin.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr.copyWithin(target) +arr.copyWithin(target, start) +arr.copyWithin(target, start, end)</var></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Índice basado en cero que establece en dónde dentro de la secuencia original se insertará la secuencia copiada. Si es negativo, <code>target</code> se contará desde el final. -1 es el último elemento, -2 el penúltimo, etc.</dd> + <dd>Si <code>target</code> es igual o mayor que <code>arr.length</code>, no se copiará nada. Si <code>target</code> es posicionado después de <code>start</code>, la secuencia copiada se recortará para que encaje con <code>arr.length</code>.</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Índice basado en cero a partir del cual comenzar la copia de elementos. Si es negativo, start comenzará a contarse desde el final.</dd> + <dd>Si <code>start</code> es omitido, <code>copyWithin</code> copiará desde el principio (por defecto es 0).</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Índice basado en cero hasta el cual se copiarán los elementos. <code>copyWithin</code> copiará hasta pero sin incluir el end. Si es negativo, <code>end</code> será contado desde el final.</dd> + <dd>Si <code>end</code> es omitido, <code>copyWithin</code> copiará hasta el final ( por defecto es <code>arr.length </code>).</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El array modificado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>copyWithin</code> es similar a la función <code>memmove</code> de C y C++ , siendo altamente eficiente para desplazar los datos en un {{jsxref("Array")}} o {{jsxref("TypedArray")}}. La secuencia de datos es leída y escrita en una sola operación; la escritura será correcta incluso en el caso de que la zona de lectura y el destino de escritura se solapen.</p> + +<p>La función <code>copyWithin</code> es intencionadamente <em>genérica</em>, permitiendo que se aplique en contextos en los cuales <code>this</code> no sea necesariamente un objeto {{jsxref("Array")}}.</p> + +<p>El método <code>copyWithin</code> es un método mutador. No altera la propiedad <code>length</code> de <code>this</code>, pero cambiará su contenido y creará nuevas propiedades si es necesario.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>En los siguientes ejemplos céntrate en los siguientes aspectos:</p> + +<ul> + <li>El tamaño del contexto en el que se aplica no cambia. En los ejemplos el array parte con cinco elementos y siempre mantiene cinco elementos.</li> + <li><code>start</code> y <code>end</code> trabajan juntos para decidir qué se copiará. Siempre tienen valor por defecto aunque omitas <code>end</code>, o <code>start</code> y <code>end</code>.</li> + <li><code>target</code> trabaja solo y debe especificarse. Indica el lugar para en el que la copia comenzará a sobreescribir datos existentes. Debe estar dentro de los límites en el contexto que se aplique.</li> + <li>escribir <code>arr.copyWithin( n ) </code>es lo mismo que <code>arr.copyWithin( n, 0, arr.length)</code></li> +</ul> + +<pre class="brush: js">[1, 2, 3, 4, 5].copyWithin(-2); +// [1, 2, 3, 1, 2] + +[1, 2, 3, 4, 5].copyWithin(0, 3); +// [4, 5, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(0, 3, 4); +// [4, 2, 3, 4, 5] + +[1, 2, 3, 4, 5].copyWithin(-2, -3, -1); +// [1, 2, 3, 3, 4] +</pre> + +<p>A continuación se aplica en el contexto de un objeto <strong>array-like</strong>:</p> + +<ul> + <li>El objeto contextual tiene alguna propiedad con clave numérica, y una propiedad length. Esto es suficiente para considerarse array-like.</li> + <li>observa que <strong>no</strong> se modifica la propiedad length, a pesar de que se ha introducido una nueva propiedad con clave 0. A esto ser refiere cuando se dice que <code>copyWithin</code> es un método <strong>mutador</strong>. ¿Por qué se creó esta nueva propiedad? porque mediante el argumento target se especificó que la copia debía comenzar a partir de un índice que ¡¡no existía!!</li> +</ul> + +<pre class="brush: js">[].copyWithin.call({length: 5, 3: 1}, 0, 3); +// {0: 1, 3: 1, length: 5} + +</pre> + +<p>Lo que sigue ahora son las subclases tipadas de Array en ES6:</p> + +<pre class="brush: js">// Arrays tipados en ES6. Son subclases de Array +var i32a = new Int32Array([1, 2, 3, 4, 5]); + +i32a.copyWithin(0, 2); +// Int32Array [3, 4, 5, 4, 5] + +// En plataformas que todavía no siguen la norma ES6: +[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4); +// Int32Array [4, 2, 3, 4, 5]</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.copyWithin) { + Array.prototype.copyWithin = + // Array: Number[, Number[, Number]] + function copyWithin(target, start, stop) { + var positiveT = target >= 0, + positiveS = (start = start | 0) >= 0, + length = this.length, + zero = 0, + r = function() {return ((+new Date) * Math.random()).toString(36)}, + delimiter = "\b" + r() + "-" + r() + "-" + r() + "\b", + hold; + + stop = stop || this.length; + hold = this.slice.apply(this, + positiveT? + [start, stop]: + positiveS? + [start, -target]: + [start]) + .join(delimiter); + + return this.splice.apply(this, + positiveT? + [target, stop - start, hold]: + positiveS? + [target, stop, hold]: + [target, start, hold]), + this.join(delimiter).split(delimiter).slice(zero, length); + } +}</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-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.copyWithin', 'Array.prototype.copyWithin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.copyWithin")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/entries/index.html b/files/es/web/javascript/reference/global_objects/array/entries/index.html new file mode 100644 index 0000000000..89fef6475f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/entries/index.html @@ -0,0 +1,86 @@ +--- +title: Array.prototype.entries() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/entries +tags: + - Array + - ECMAScript 2015 + - Iterador + - Iterator + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/entries +--- +<div>{{JSRef}}</div> + +<div>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <strong><code>Array Iterator</code></strong> que contiene los pares clave/valor para cada índice de la matriz.</div> + +<div> </div> + +<div> +<p>{{EmbedInteractiveExample("pages/js/array-entries.html")}}</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.entries()</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un nuevo objeto iterador {{jsxref("Array")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_un_bucle_for…of">Usando un bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for...of">for…of</a> </h3> + +<pre class="brush: js">var a = ['a', 'b', 'c']; +var iterator = a.entries(); + +for (let e of iterator) { + console.log(e); +} +// [0, 'a'] +// [1, 'b'] +// [2, 'c']</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.entries', 'Array.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.entries")}}</p> +</div> + +<div id="compat-mobile"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li> + <li><a href="/es/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/every/index.html b/files/es/web/javascript/reference/global_objects/array/every/index.html new file mode 100644 index 0000000000..540ebbdfa9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/every/index.html @@ -0,0 +1,195 @@ +--- +title: Array.prototype.every() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/every +tags: + - Arreglo + - ECMAScript 5 + - JavaScript + - Prototipo + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/every +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">Determina si todos los elementos en el array satisfacen una condición.</span></p> + +<div class="note"> +<p><strong>Precaución</strong>: ¡Llamar este método en un array vacío devuelve <code>true</code> para cualquier condición!</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-every.html")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo se encuentra en GitHub. Si desea contribuir con el proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un<em>pull</em><em> request</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.every(<var>callback</var>(<var>element</var>[, <var>index</var>[, <var>array</var>]])[, <var>thisArg</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Una función para probar cada elemento; recibe tres argumentos: + <dl> + <dt><code>currentValue</code> (required)</dt> + <dd>El elemento actual del arreglo que está siendo procesado.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>El índice del elemento actual del arreglo que está siendo procesado.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd>El arreglo sobre el cual fue llamado <code>every</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Valor por usar como <code>this</code> cuando se ejecute <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p><code>true</code> si la función de devolución de llamada devuelve un valor de {{Glossary("truthy")}} para cada elemento de matriz; de lo contrario, <code>false</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>every</code> ejecuta la función <code>callback</code> dada una vez por cada elemento presente en el arreglo hasta encontrar uno que haga retornar un valor falso a <code>callback</code> (un valor que resulte falso cuando se convierta a booleano). Si no se encuentra tal elemento, el método <code>every</code> de inmediato retorna <code>false</code>. O si <code>callback</code> retorna verdadero para todos los elementos, <code>every</code> retornará <code>true</code>. <code>callback</code> es llamada sólo para índices del arreglo que tengan valores asignados; no se llama para índices que hayan sido eliminados o a los que no se les haya asignado un valor.</p> + +<p><code>callback</code> es llamada con tres argumetos: el valor del elemento, el índice del elemento y el objeto Array que está siendo recorrido.</p> + +<p>Si se proporciona un parámetro <code>thisArg</code> a <code>every</code>, será pasado a la función <code>callback</code> cuando sea llamada, usándolo como valor <code>this</code>. En otro caso, se pasará el valor <code>undefined</code> para que sea usado como valor <code>this</code>. El valor <code>this</code> observable por parte de <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Reference/Operators/this">las normas usuales para determinar el <code>this</code> visto por una función</a>.</p> + +<p><code>every</code> no modifica el arreglo sobre el cual es llamado.</p> + +<p>El intervalo de elementos procesados por <code>every</code> se establece antes de la primera llamada a <code>callback</code>. Los elementos que se agreguen al arreglo después de que la función <code>every</code> comience no serán vistos por la función <code>callback</code>. Si se modifican elementos existentes en el arreglo, su valor cuando sea pasado a <code>callback</code> será el valor que tengan cuando sean visitados; los elementos que se eliminen no serán visitados.</p> + +<p><code>every</code> opera como el cuantificador "para todo" en matemáticas. En particular con el arreglo vacío retorna true. (es una <a href="http://en.wikipedia.org/wiki/Vacuous_truth#Vacuous_truths_in_mathematics">verdad vacua</a> que todos los elementos del <a href="http://en.wikipedia.org/wiki/Empty_set#Common_problems">conjunto vacío</a> satisfacen una condición dada.)</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Probando_el_tamaño_de_todos_los_elementos_de_un_arreglo">Probando el tamaño de todos los elementos de un arreglo</h3> + +<p>El siguiente ejemplo prueba si todos los elementos de un arreglo son mayores que 10.</p> + +<pre class="brush: js">function esSuficientementeGrande(elemento, indice, arrreglo) { + return elemento >= 10; +} +[12, 5, 8, 130, 44].every(esSuficientementeGrande); // false +[12, 54, 18, 130, 44].every(esSuficientementeGrande); // true +</pre> + +<h3 id="Usar_funciones_flecha">Usar funciones flecha</h3> + +<p>Las <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones flecha</a> proveen una sintaxis más corta para la misma prueba.</p> + +<pre class="brush: js">[12, 5, 8, 130, 44].every(elem => elem >= 10); // false +[12, 54, 18, 130, 44].every(elem => elem >= 10); // true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>every</code> fue añadida a la norma ECMA-262 en la 5ta edición; por lo que podría no estar presente en otras implementaciones de la norma. Puede sobrellevarlo insertando el siguiente código al comienzo de su programa, permitiendo el uso de <code>every</code> en implementación que no lo soporten de manera nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, suponiendo que <code>Object</code> y <code>TypeError</code> tienen sus valores originales y que <code>callbackfn.call</code> evalua al valor original de {{jsxref("Function.prototype.call")}}</p> + +<pre class="brush: js">if (!Array.prototype.every) { + Array.prototype.every = function(callbackfn, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError('this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the this + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal method + // of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callbackfn) is false, throw a TypeError exception. + if (typeof callbackfn !== 'function') { + throw new TypeError(); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let k be 0. + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + var kValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method + // of O with argument Pk. + kValue = O[k]; + + // ii. Let testResult be the result of calling the Call internal method + // of callbackfn with T as the this value and argument list + // containing kValue, k, and O. + var testResult = callbackfn.call(T, kValue, k, O); + + // iii. If ToBoolean(testResult) is false, return false. + if (!testResult) { + return false; + } + } + k++; + } + return 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('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.every")}}</p> +</div> + +<div id="compat-mobile"></div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("TypedArray.prototype.every()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/fill/index.html b/files/es/web/javascript/reference/global_objects/array/fill/index.html new file mode 100644 index 0000000000..7113df34bd --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/fill/index.html @@ -0,0 +1,145 @@ +--- +title: Array.prototype.fill() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/fill +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Prototipo + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/fill +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>fill()</strong></code> cambia todos los elementos en un arreglo por un valor estático, desde el índice start (por defecto 0) hasta el índice end (por defecto <code>array.length</code>). Devuelve el arreglo modificado.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-fill.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.fill(<var>value</var>[, <var>start<var> = 0[, <var>end</var> = this.length]])</var></var></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>value</code></dt> + <dd>Valor con el que se va a rellenar el arreglo. (Nótese que todos los elementos en el arreglo tendrán este mismo valor).</dd> + <dt><code>start</code> {{optional_inline}}</dt> + <dd>Índice inicial, por defecto 0.</dd> + <dt><code>end</code> {{optional_inline}}</dt> + <dd>Índice final, por defecto <code>this.length</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El arreglo modificado, rellenado con <code>valor</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<ul> + <li>Si <code>start</code> es negativo, se interpreta como <code>array.length + start</code>.</li> + <li>Si <code>end</code> es negativo, se interpreta como <code>array.length + end</code>.</li> + <li><code>fill</code> es genérico de forma intencional: no requiere que su valor <code>this</code> sea un objeto <code>Array</code>.</li> + <li><code>fill</code> es un método mutador: modifica el arreglo sobre el que se invoca; no devuelve una copia de éste.</li> + <li>Si el primer parámetro es un objeto, copia su referencia y rellena el arreglo con referencias a dicho objeto.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">[1, 2, 3].fill(4); // [4, 4, 4] +[1, 2, 3].fill(4, 1); // [1, 4, 4] +[1, 2, 3].fill(4, 1, 2); // [1, 4, 3] +[1, 2, 3].fill(4, 1, 1); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 3); // [1, 2, 3] +[1, 2, 3].fill(4, -3, -2); // [4, 2, 3] +[1, 2, 3].fill(4, NaN, NaN); // [1, 2, 3] +[1, 2, 3].fill(4, 3, 5); // [1, 2, 3] +Array(3).fill(4); // [4, 4, 4] +[].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3} + +// Objects by reference. +var arr = Array(3).fill({}) // [{}, {}, {}]; +arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.fill) { + Object.defineProperty(Array.prototype, 'fill', { + value: function(value) { + + // Pasos 1-2. + if (this == null) { + throw new TypeError('esto es nulo o no definido'); + } + + var O = Object(this); + + // Pasos 3-5. + var len = O.length >>> 0; + + // Pasos 6-7. + var start = arguments[1]; + var relativeStart = start >> 0; + + // Paso 8. + var k = relativeStart < 0 ? + Math.max(len + relativeStart, 0) : + Math.min(relativeStart, len); + + // Pasos 9-10. + var end = arguments[2]; + var relativeEnd = end === undefined ? + len : end >> 0; + + // Paso 11. + var final = relativeEnd < 0 ? + Math.max(len + relativeEnd, 0) : + Math.min(relativeEnd, len); + + // Paso 12. + while (k < final) { + O[k] = value; + k++; + } + + // Paso 13. + return O; + } + }); +}</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-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.fill")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("TypedArray.prototype.fill()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/filter/index.html b/files/es/web/javascript/reference/global_objects/array/filter/index.html new file mode 100644 index 0000000000..98e6843c4f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/filter/index.html @@ -0,0 +1,231 @@ +--- +title: Array.prototype.filter() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/filter +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototipo + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/filter +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>filter()</strong></code> crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-filter.html")}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="notranslate"><var>var newArray = arr</var>.filter(<var>callback(currentValue[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que <strong>comprueba cada elemento </strong>del array para ver si cumple la condición (también llamada predicado). Retorna <code>true</code> si el elemento la cumple o en caso contrario retornará <code>false</code>. Acepta tres parámetros:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>El elemento actual del array que está siendo procesado.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>El índice del elemento actual del array que está siendo procesado.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>El array sobre el que se ha llamado <code>filter</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Opcional. Valor a utilizar como <code>this</code> cuando se ejecuta <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un nuevo array con los elementos que cumplen la condición. Si ningún elemento cumple la condición, se devolverá un array vacío.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>filter()</code> llama a la función <code>callback</code> sobre cada elemento del array, y construye un nuevo array con todos los valores para los cuales <code>callback</code> devuelve un valor verdadero. <code>callback</code> es invocada sólo para índices del array que tengan un valor asignado. No se invoca sobre índices que hayan sido borrados o a los que no se les haya asignado algún valor. Los elementos del array que no cumplan la condición <code>callback</code> simplemente los salta, y no son incluidos en el nuevo array.</p> + +<p><code>callback</code> se invoca con tres argumentos:</p> + +<ol> + <li>El valor de cada elemento</li> + <li>El índice del elemento</li> + <li>El objeto Array que se está recorriendo</li> +</ol> + +<p>Si se proporciona un parámetro <code>thisArg</code> a <code>filter()</code>, este será pasado a <code>callback</code> cuando sea invocado, para usarlo como valor <code>this</code>. De lo contrario, se pasará el valor <code>undefined</code> como valor <code>this</code>. El valor <code>this</code> dentro del <code>callback</code> se determina conforme a las <a href="/es/docs/Web/JavaScript/Reference/Operators/this">las normas habituales para determinar el <em>this </em>visto por una función.</a></p> + +<p><code>filter()</code> no hace mutar el array sobre el cual es llamado.</p> + +<p>El rango de elementos procesados por <code>filter()</code> se establece antes de la primera invocación de <code>callback</code>. Los elementos que se añadan al array después de que comience la llamada a <code>filter()</code> no serán visitados por <code>callback</code>. Si se modifica o elimina un elemento existente del array, cuando pase su valor a <code>callback</code> será el que tenga cuando <code>filter()</code> lo recorra; los elementos que son eliminados no son recorridos.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Filtering_out_all_small_values" name="Example:_Filtering_out_all_small_values">Filtrando todos los valores pequeños</h3> + +<p>El siguiente ejemplo usa <code>filter()</code> para crear un array filtrado que excluye todos los elementos con valores inferiores a 10.</p> + +<pre class="brush: js notranslate">function esSuficientementeGrande(elemento) { + return elemento >= 10; +} +var filtrados = [12, 5, 8, 130, 44].filter(esSuficientementeGrande); +// filtrados es [12, 130, 44] +</pre> + +<h3 id="Filtrando_entradas_inválidas_desde_un_JSON">Filtrando entradas inválidas desde un JSON</h3> + +<p>El siguiente ejemplo emplea <code>filter()</code> para crear un json filtrado con todos lo elementos que tengan id numérico distinto de cero.</p> + +<pre class="brush: js notranslate">var arr = [ + { id: 15 }, + { id: -1 }, + { id: 0 }, + { id: 3 }, + { id: 12.2 }, + { }, + { id: null }, + { id: NaN }, + { id: 'undefined' } +]; + +var entradasInvalidas = 0; +// Si el elemento tiene un atributo id, y su valor correspondiente es un numero +// Y no es el valor NaN, entonces es una entrada válida +function filtrarPorID(obj) { + if ('id' in obj && typeof(obj.id) === 'number' && !isNaN(obj.id)) { + return true; + } else { + entradasInvalidas++; + return false; + } +} + +var arrPorID = arr.filter(filtrarPorID); + +console.log('Array Filtrado\n', arrPorID); +// [{ id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }] + +console.log('Número de Entradas Invalidas = ', entradasInvalidas); +// 4</pre> + +<h3 id="Búsqueda_en_el_arreglo">Búsqueda en el arreglo</h3> + +<p>El siguiente ejemplo emplea filter() para filtrar el contendio de un arreglo en función de un criterio de búsqueda.</p> + +<pre class="brush: js notranslate">var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Filtra la matríz en función de un criterio de búsqueda (query) + */ +function filterItems(query) { + return fruits.filter(function(el) { + return el.toLowerCase().indexOf(query.toLowerCase()) > -1; + }) +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h3 id="Implementación_en_ES2015">Implementación en ES2015</h3> + +<pre class="brush: js notranslate">const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; + +/** + * Filtra la matríz en función de un criterio de búsqueda (query) + */ +const filterItems = query => { + return fruits.filter((el) => + el.toLowerCase().indexOf(query.toLowerCase()) > -1 + ); +} + +console.log(filterItems('ap')); // ['apple', 'grapes'] +console.log(filterItems('an')); // ['banana', 'mango', 'orange']</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>filter()</code> se añadió a la norma ECMA-262 en la 5ta edición; como tal puede no estar presente en todas las implementaciones de la norma. Puedes sobrellevarlo insertando el siguiente código al comienzo de su programa, para permitir el uso de <code>filter()</code> en implementaciones de ECMA-262 que no lo soporten de forma nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ta edición, supone que <code>fn.call</code> evalua al valor original de {{jsxref("Function.prototype.call")}}, y que {{jsxref("Array.prototype.push")}} tiene su valor original.</p> + +<pre class="notranslate">if (!Array.prototype.filter){ + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + t = this, c = 0, i = -1; + + var kValue; + if (thisArg === undefined){ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + kValue = t[i]; // in case t is changed in callback + if (func(t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + else{ + while (++i !== len){ + // checks to see if the key was set + if (i in this){ + kValue = t[i]; + if (func.call(thisArg, t[i], i, t)){ + res[c++] = kValue; + } + } + } + } + + res.length = c; // shrink down array to proper size + return res; + }; +}</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('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición Inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.filter")}}</p> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/find/index.html b/files/es/web/javascript/reference/global_objects/array/find/index.html new file mode 100644 index 0000000000..7de7850cca --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/find/index.html @@ -0,0 +1,233 @@ +--- +title: Array.prototype.find() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/find +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Prototipo + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/find +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>find()</strong></code> devuelve el <strong>valor</strong> del <strong>primer elemento</strong> del array que cumple la función de prueba proporcionada.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-find.html","shorter")}}</div> + + + +<ul> + <li>Si necesitas el <strong>índice</strong> del elemento encontrado en el array, utiliza {{jsxref("Array.findIndex", "findIndex()")}}.</li> + <li>Si necesitas encontrar el <strong>índice de un elemento</strong>, {{jsxref("Array.prototype.indexOf()")}}. (Es similar a {{jsxref("Array.findIndex", "findIndex()")}}, pero comprueba la igualdad de cada elemento con el valor en lugar de usar una función de prueba.)</li> + <li>Si necesitas encontrar si un valor <strong>existe</strong> en un array, utiliza {{jsxref("Array.prototype.includes()")}}.</li> + <li>Si necesitas encontrar si algún elemento cumple la función de prueba proporcionada, usa {{jsxref("Array.prototype.some()")}}.</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.find(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que se ejecuta sobre cada valor en el array, tomando tres argumentos: + <dl> + <dt><code>element</code></dt> + <dd>El elemento actual que se está procesando en el array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>El índice (posición) del elemento actual que se está procesando en el array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>El array desde el que se llama al método <code>find</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Objeto a usar como <code><a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">this</a></code> cuando se ejecuta <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El <strong>valor</strong> del <strong>primer elemento</strong> del array que cumple la función de prueba proporcionada; de lo contrario, devuelve {{jsxref("undefined")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>find</code> ejecuta la función <code>callback</code> una vez por cada índice del array hasta que encuentre uno en el que el <code>callback</code> devuelva un valor <a href="/es/docs/Glossary/Truthy">verdadero</a>. Si es así, <code>find</code> devuelve inmediatamente el valor del elemento. En caso contrario, <code>find</code> devuelve {{jsxref("undefined")}}.</p> + +<p><code>callback</code> se invoca con tres argumentos: el valor del elemento, el índice del elemento y el objeto <code>Array</code> que está siendo recorrido.</p> + +<p>Si un parámetro <code>thisArg</code> es proporcionado al método <code>find</code>, este será utilizado como <code>this</code> para cada invocación del callback. Si no se proporciona el parámetro, entonces se utiliza {{jsxref("undefined")}}.</p> + +<p>El método <code>find</code> no transforma el array desde el cual es llamado, pero la función proporcionada en <code>callback</code> sí. En ese caso, los elementos procesados por <code>find</code> son establecidos <em>antes</em> de la primera invocación de <code>callback</code>. Por lo tanto:</p> + +<ul> + <li><code>callback</code> no visitará ningún elemento añadido al array después de que comience la llamada a <code>find</code>.</li> + <li>Si un elemento existente no visitado del array es modificado por <code>callback</code>, su valor que se pasa al <code>callback</code> que lo visita será el valor en el momento en que <code>find</code> visita ese índice del elemento.</li> + <li>Los elementos que sean {{jsxref("delete", "deleted")}} (eliminados) aún se visitan.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Encontrar_un_objeto_en_un_array_por_una_de_sus_propiedades">Encontrar un objeto en un array por una de sus propiedades</h3> + +<pre class="brush: js">const inventario = [ + {nombre: 'manzanas', cantidad: 2}, + {nombre: 'bananas', cantidad: 0}, + {nombre: 'cerezas', cantidad: 5} +]; + +function esCereza(fruta) { + return fruta.nombre === 'cerezas'; +} + +console.log(inventario.find(esCereza)); +// { nombre: 'cerezas', cantidad: 5 }</pre> + +<h4 id="Utilizando_funciones_flecha_y_destructuring">Utilizando funciones flecha y destructuring</h4> + +<pre class="brush: js">const inventario = [ + {nombre: 'manzanas', cantidad: 2}, + {nombre: 'bananas', cantidad: 0}, + {nombre: 'cerezas', cantidad: 5} +]; + +const resultado = inventario.find( fruta => fruta.nombre === 'cerezas' ); + +console.log(resultado); // { nombre: 'cerezas', cantidad: 5 }</pre> + +<h3 id="Encontrar_un_número_primo_en_un_array">Encontrar un número primo en un array</h3> + +<p>El siguiente ejemplo encuentra un elemento en un array que sea un número primo (o devuelve {{jsxref("undefined")}} si no hay un número primo).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + let start = 2; + while (start <= Math.sqrt(element)) { + if (element % start++ < 1) { + return false; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].find(isPrime)); // undefined, no encontrado +console.log([4, 5, 8, 12].find(isPrime)); // 5 +</pre> + +<p>Los siguientes ejemplos muestran cómo elementos no existentes o eliminados son visitados y el valor pasado a <code>callback</code> es su valor cuando son visitados.</p> + +<pre class="brush: js">// Declarar un array sin elementos en los índices 2, 3 y 4 +const array = [0,1,,,,5,6]; + +// Muestra todos los índices, no sólo aquellos que tienen valores asignados +array.find(function(value, index) { + console.log('Visited index ' + index + ' with value ' + value); +}); + +// Mostrar todos los índices, incluyendo los eliminados +array.find(function(value, index) { + + // Eliminar el elemento 5 en la primera iteración + if (index == 0) { + console.log('Deleting array[5] with value ' + array[5]); + delete array[5]; + } + // El elemento 5 se visita aun habiendo sido eliminado + console.log('Visited index ' + index + ' with value ' + value); +}); +// expected output: +// Deleting array[5] with value 5 +// Visited index 0 with value 0 +// Visited index 1 with value 1 +// Visited index 2 with value undefined +// Visited index 3 with value undefined +// Visited index 4 with value undefined +// Visited index 5 with value undefined +// Visited index 6 with value 6 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método ha sido añadido a la espeficicación ECMAScript 2015 y puede no estar disponible en todas las implementaciones de JavaScript aún. Sin embargo, puedes utilizar el siguiente polyfill de <code>Array.prototype.find</code>:</p> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find +if (!Array.prototype.find) { + Object.defineProperty(Array.prototype, 'find', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return kValue. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return kValue; + } + // e. Increase k by 1. + k++; + } + + // 7. Return undefined. + return undefined; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Si necesitas dar soporte a motores de JavaScript realmente obsoletos que no soportan <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no utilizar el polyfill para los métodos <code>Array.prototype</code>, ya que no podrás hacerlos no enumerables.</p> + +<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-array.prototype.find', 'Array.prototype.find')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.find")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.findIndex()")}} – encuentra y devuelve un índice</li> + <li>{{jsxref("Array.prototype.includes()")}} – comprueba que un valor existe en el array</li> + <li>{{jsxref("Array.prototype.filter()")}} – elimina todos los elementos que no coincidan</li> + <li>{{jsxref("Array.prototype.every()")}} – comprueba todos los elementos</li> + <li>{{jsxref("Array.prototype.some()")}} – comprueba hasta que un elemento coincide</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/findindex/index.html b/files/es/web/javascript/reference/global_objects/array/findindex/index.html new file mode 100644 index 0000000000..c249a3b2df --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/findindex/index.html @@ -0,0 +1,187 @@ +--- +title: Array.prototype.findIndex() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/findIndex +tags: + - Array + - ECMAScript 2015 + - JavaScript + - Protitipo + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/findIndex +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>findIndex()</strong></code> devuelve el <strong>índice</strong> del <strong>primer elemento</strong> de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-findindex.html","shorter")}}</div> + +<p>Vea también el método {{jsxref("Array.find", "find()")}}, que devuelve el <strong>valor </strong>de un elemento encontrado en el array en lugar de su índice.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.findIndex(<var>callback</var>( <var>element</var>[, <var>index</var>[, <var>array</var>]] )[, <var>thisArg</var>]) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>callback</var></code></dt> + <dd> + <p>Función a ejecutar en cada uno de los valores del array hasta que devuelve <code>true</code>, indicando que el elemento que la cumple fue encontrado.</p> + + <p>Recibe tres argumentos:</p> + + <dl> + <dt><code><var>element</var></code></dt> + <dd>El elemento actual siendo procesado en el array.</dd> + <dt><code><var>index</var></code> {{optional_inline}}</dt> + <dd>El índice del elemento actual que está siendo procesado en el array.</dd> + <dt><code><var>array</var></code> {{optional_inline}}</dt> + <dd>El array <code>findIndex()</code> de donde fue llamado.</dd> + </dl> + </dd> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd>Objeto opcional para usar como <code>this</code> cuando se ejecuta el <code><var>callback</var></code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un índice en el array si un elemento pasa la prueba; en caso contrario, <code>-1</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>findIndex()</code> ejecuta la función de <em><code>callback</code></em> una vez por cada índice del array hasta que encuentre uno donde <em><code>callback</code></em> devuelva un valor verdadero (eso es, un valor que <a href="/en-US/docs/Glossary/Type_Conversion">fuerza</a> un <code>true</code>).</p> + +<p>Si dicho elemento es encontrado, <code>findIndex()</code> inmediatamente devuelve el índice del elemento. Si la función <em><code>callback</code></em> nunca devuelve un valor verdadero (o el tamaño del array es 0), <code>findIndex</code> devuelve <code>-1</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Alerta de Edge Case:</strong> A diferencia de otros métodos de arrays como {{jsxref("Array.some()")}}, <code><var>callback</var></code> se ejecuta incluso en índices sin valores asignados.</p> +</div> + +<p><em><code>callback</code></em> se invoca con tres argumentos:</p> + +<ol> + <li>El valor del elemento</li> + <li>El índice del elemento</li> + <li>El Array que será recorrido.</li> +</ol> + +<p>Si el parámetro <code>thisArg</code> es provisto a findIndex, entonces será usado como el this para cada invocación del <code>callback</code>. Si no es provisto, entonces {{jsxref("undefined")}} será utilizado. </p> + +<p>El rango de elementos procesados por <code>findIndex()</code> se establece antes de la primera invocación de la función <em><code>callback</code></em>. Los elementos añadidos al array después de que la llamada a <code>findIndex()</code> comience no serán visitados por el <code>callback</code>. Si un elemento existente que no ha sido visitado en el array es modificado por el <em><code>callback</code></em>, el valor pasado al <em><code>callback</code></em> que lo visite será el valor en el momento en que <code>findIndex()</code> visite el índice del elemento.</p> + +<p>Los elementos <a href="/es/docs/Web/JavaScript/Referencia/Operadores/delete">eliminados</a> aún son visitados.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Encontrar_el_índice_de_un_número_primo_en_un_array">Encontrar el índice de un número primo en un array</h3> + +<p>El siguiente ejemplo encuentra el índice de un elemento en el array que sea número primo (o devuelve <code>-1</code> si no hay ningún número primo).</p> + +<pre class="brush: js">function isPrime(element, index, array) { + var start = 2; + while (start <= Math.sqrt(element)) { + if (element % start < 1) { + return false; + } else { + start++; + } + } + return element > 1; +} + +console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, no encontrado +console.log([4, 6, 7, 12].findIndex(isPrime)); // 2 +</pre> + +<h3 id="Encontrar_un_índice_utilizando_funciones_flecha">Encontrar un índice utilizando funciones flecha</h3> + +<p>El siguiente ejemplo encuentra el índice de una fruta utilizando funciones flecha.</p> + +<pre class="brush: js">const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"]; + +const index = fruits.findIndex(fruit => fruit === "blueberries"); + +console.log(index); // 3 +console.log(fruits[index]); // blueberries +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex +if (!Array.prototype.findIndex) { + Object.defineProperty(Array.prototype, 'findIndex', { + value: function(predicate) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Let len be ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. If IsCallable(predicate) is false, throw a TypeError exception. + if (typeof predicate !== 'function') { + throw new TypeError('predicate must be a function'); + } + + // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. + var thisArg = arguments[1]; + + // 5. Let k be 0. + var k = 0; + + // 6. Repeat, while k < len + while (k < len) { + // a. Let Pk be ! ToString(k). + // b. Let kValue be ? Get(O, Pk). + // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). + // d. If testResult is true, return k. + var kValue = o[k]; + if (predicate.call(thisArg, kValue, k, o)) { + return k; + } + // e. Increase k by 1. + k++; + } + + // 7. Return -1. + return -1; + }, + configurable: true, + writable: true + }); +} +</pre> + +<p>Si necesita soporte para motores de JavaScript obsoletos que no soportan <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty">Object.defineProperty</a></code> es mejor no emplear polyfills para métodos <code>Array.prototype</code>, ya que no puede hacerlos no-enumerables.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.findIndex")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/flat/index.html b/files/es/web/javascript/reference/global_objects/array/flat/index.html new file mode 100644 index 0000000000..67d1b3a4c7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/flat/index.html @@ -0,0 +1,174 @@ +--- +title: Array.prototype.flat() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/flat +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flat +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>El método <code><strong>flat()</strong></code> crea una nueva matriz con todos los elementos de sub-array concatenados recursivamente hasta la profundidad especificada.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flat.html")}}</p> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>var newArray = arr</var>.flat(<var>[depth]</var>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>depth</code> {{optional_inline}}</dt> + <dd>El nivel de profundidad que especifica qué tan profunda debe aplanarse una estructura de matriz anidada. El valor predeterminado es 1.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una nueva matriz con los elementos de la sub-matriz concatenados en ella.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Aplanar_matrices_anidadas">Aplanar matrices anidadas</h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); +// [1, 2, 3, 4] + +var arr2 = [1, 2, [3, 4, [5, 6]]]; +arr2.flat(); +// [1, 2, 3, 4, [5, 6]] + +var arr3 = [1, 2, [3, 4, [5, 6]]]; +arr3.flat(2); +// [1, 2, 3, 4, 5, 6] +</pre> + +<h3 id="Aplanamiento_y_huecos_de_matriz">Aplanamiento y huecos de matriz</h3> + +<p>El método de aplanar elimina las ranuras vacías en las matrices:</p> + +<pre class="brush: js">var arr4 = [1, 2, , 4, 5]; +arr4.flat(); +// [1, 2, 4, 5] +</pre> + +<h2 id="Alternativa">Alternativa</h2> + +<h3 id="reduce_y_concat"><code>reduce</code> y <code>concat</code></h3> + +<pre class="brush: js">var arr1 = [1, 2, [3, 4]]; +arr1.flat(); + +//aplanar una matriz de nivel único +arr1.reduce((acc, val) => acc.concat(val), []);// [1, 2, 3, 4] + +//o +const flatSingle = arr => [].concat(...arr); +</pre> + +<p> </p> + +<pre class="brush: js">//para permitir el aplanamiento a nivel profundo use recursión con reduce y concat +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; + +function flattenDeep(arr1) { + return arr1.reduce((acc, val) => Array.isArray(val) ? acc.concat(flattenDeep(val)) : acc.concat(val), []); +} +flattenDeep(arr1); // [1, 2, 3, 1, 2, 3, 4, 2, 3, 4] +</pre> + +<p> </p> + +<pre class="brush: js">//aplanamiento profundo no recursivo usando un stack +var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]]; +function flatten(input) { + const stack = [...input]; + const res = []; + while (stack.length) { + // elimina ultimo valor del stack + const next = stack.pop(); + if (Array.isArray(next)) { + // agrega de nuevo los items al array, sin modificar la entrada original + stack.push(...next); + } else { + res.push(next); + } + } + //invierte para restaurar el orden de entrada + return res.reverse(); +} +flatten(arr1);// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]</pre> + +<p> </p> + +<pre class="brush: js">//Aplanamiento profundo recursivo +function flatten(array) { + var flattend = []; + !(function flat(array) { + array.forEach(function(el) { + if (Array.isArray(el)) flat(el); + else flattend.push(el); + }); + })(array); + return flattend; +}</pre> + +<p> </p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.flat) { + Array.prototype.flat = function(depth) { + var flattend = []; + (function flat(array, depth) { + for (let el of array) { + if (Array.isArray(el) && depth > 0) { + flat(el, depth - 1); + } else { + flattend.push(el); + } + } + })(this, Math.floor(depth) || 1); + return flattend; + }; +}</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><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flat"><code>Array.prototype.flat</code> proposal</a></td> + <td>Finalizado (4)</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flat")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatMap()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/flatmap/index.html b/files/es/web/javascript/reference/global_objects/array/flatmap/index.html new file mode 100644 index 0000000000..0a93f97675 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/flatmap/index.html @@ -0,0 +1,128 @@ +--- +title: Array.prototype.flatMap() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/flatMap +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/flatMap +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>El método <code><strong>flatMap()</strong></code> primero mapea cada elemento usando una función de mapeo, luego aplana el resultado en una nueva matriz. Es idéntico a un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> seguido de un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten">flatten </a>de profundidad 1, pero <code>flatMap</code> es a menudo útil y la fusión de ambos en un método es ligeramente más eficiente.</p> + +<p class="hidden">\{{EmbedInteractiveExample("pages/js/array-flatmap.html")}}</p> + +<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo, se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone </span></span><a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a><span class="tlid-translation translation" lang="es"><span title=""> y envíenos una solicitud de extracción.</span></span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>var new_array = arr</var>.flatMap(function <var>callback(currentValue[, index[, array]]) { + // return element for new_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que produce un elemento de la nueva matriz, tomando tres argumentos: + <dl> + <dt></dt> + <dt><code>currentValue</code></dt> + <dd>El elemento actual que se procesa en la matriz.</dd> + <dt><code>index</code>{{optional_inline}}</dt> + <dd>El índice del elemento actual que se procesa en la matriz.</dd> + <dt><code>array</code>{{optional_inline}}</dt> + <dd>La matriz <code>map</code> fue llamada.</dd> + </dl> + </dd> + <dt><code>thisArg</code>{{optional_inline}}</dt> + <dd>Valor para usar como <code>this</code> al ejecutar <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una nueva matriz con cada elemento es el resultado de la función de devolución de llamada y se aplana a una profundidad de 1.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Ver {{jsxref("Array.prototype.map()")}} para una descripción detallada de la función de devolución de llamada. El método <code>flatMap</code> es idéntico a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a></code> seguido de una llamada a <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten">flatten</a></code> de profundidad 1.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="map_y_flatMap"><code>map</code> y <code>flatMap</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; + +arr1.map(</span></span></span></span></span>x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// [[2], [4], [6], [8]] + +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>); +// [2, 4, 6, 8]</span></span></span></span></span> + +// solo un nivel es aplanado +arr1.flatMap(x => [[x * 2]]); +// [[2], [4], [6], [8]] +</pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Alternativa">Alternativa</h2> + +<h3 id="reduce_y_concat"><code>reduce</code> y <code>concat</code></h3> + +<pre class="brush: js">var arr1 = <span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>[</span></span><span class="constant decimal js numeric"><span>1</span></span><span class="comma delimiter js meta object"><span>,</span></span><span> </span><span class="brace js meta square"><span>2, 3, 4]; +</span></span></span></span></span> +arr1.flatMap(x => [x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>);</span></span></span></span></span> +// es equivalente a +arr1.reduce((acc, x) => acc.concat([x * 2]<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>), []);</span></span></span></span></span> +<span class="js source"><span class="function-call js meta"><span class="js meta"><span class="brace js meta square"><span>// [2, 4, 6, 8]</span></span></span></span></span> +</pre> + +<div class="line"><span class="js source"><span class="comment double-slash js line"><span class="comment definition js punctuation"><span>//</span></span><span>=> [1, 2, 3, 4, 5, 6, 7, 8, 9]</span></span></span></div> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este polyfill necesita <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat" title="Array.prototype.flat()">Array.prototype.flat polyfill</a></p> + +<pre class="brush: js">if (!Array.prototype.flatMap) { + Array.prototype.flatMap = function() { + return Array.prototype.map.apply(this, arguments).flat(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><a href="https://tc39.github.io/proposal-flatMap/#sec-Array.prototype.flatMap"><code>Array.prototype.flatMap</code> </a></td> + <td>Finalizado (4)</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.flatMap")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.flatten()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.reduce()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/foreach/index.html b/files/es/web/javascript/reference/global_objects/array/foreach/index.html new file mode 100644 index 0000000000..bc6b693176 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/foreach/index.html @@ -0,0 +1,257 @@ +--- +title: Array.prototype.forEach() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/forEach +tags: + - Array + - ECMAScript5 + - JavaScript + - JavaScript 1.6 + - Method + - Prototype + - Referencia + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/forEach +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>forEach()</strong></code> ejecuta la función indicada una vez por cada elemento del array.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-foreach.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>arr</var>.forEach(function <var>callback(currentValue, index, array) { + // tu iterador +}</var>[, <var>thisArg</var>]);</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función a ejecutar por cada elemento, que recibe tres argumentos:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>El elemento actual siendo procesado en el array.</dd> + <dt><code>index</code> {{optional_inline}}</dt> + <dd>El índice del elemento actual siendo procesado en el array.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>El vector en el que <code>forEach()</code> esta siendo aplicado.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{optional_inline}}</dt> + <dd>Valor que se usará como <code>this</code> cuando se ejecute el <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>forEach()</code> ejecuta la función <code>callback</code> una vez por cada elemento presente en el array en orden ascendente. No es invocada para índices que han sido eliminados o que no hayan sido inicializados (Ej. sobre arrays <code>sparse</code>)</p> + +<p><code>callback</code> es invocada con tres argumentos:</p> + +<ol> + <li>el valor del elemento</li> + <li>el índice del elemento</li> + <li>el array que está siendo recorrido</li> +</ol> + +<p>Si un parámetro <code>thisArg</code> es proporcionado a <code>forEach</code>, será usado como el valor <code>this</code> para cada invocación de <code>callback</code> como si se llamara a <code>callback.call(thisArg, element, index, array)</code>. Si <code>thisArg</code> es <code>undefined</code> o <code>null</code>, el valor <code>this</code> dentro de la función depende si la función está o no en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto" title="JavaScript/Strict_mode">modo estricto</a> (valor pasado si está en modo estricto, objeto global si está en modo no-estricto).</p> + +<p>El rango de elementos procesados por <code>forEach()</code> se establece antes de la primera invocación del <code>callback</code>. Los elementos que sean añadidos al vector después de que inicie la llamada a <code>forEach</code> no serán visitados por <code>callback</code>. Si los valores de los elementos existentes en el vector son modificados, el valor pasado al <code>callback</code> será el valor al momento de que forEach los visite; no se evaluarán los elementos borrados antes de ser visitados por <code>forEach</code>.</p> + +<p><code>forEach()</code> ejecuta la función <code>callback</code> una vez por cada elemento del array; a diferencia de {{jsxref("Array.prototype.map()", "map()")}} o {{jsxref("Array.prototype.reduce()", "reduce()")}} este siempre devuelve el valor {{jsxref("undefined")}} y no es encadenable. El típico uso es ejecutar los efectos secundarios al final de la cadena.</p> + +<p><code>foreach()</code> no muta/modifica el array desde el que es llamado (aunque <code>callback</code>, si se invoca, podría hacerlo).</p> + +<div class="note"><strong>Nota :</strong> No hay forma de detener o cortar un bucle <code>forEach</code> que no sea lanzar una excepción. Si necesita dicho comportamiento, el método <code>.forEach()</code> es la herramienta equivocada, use una simple iteración en su lugar. Si está probando los elementos del array para un predicado y necesita devolver un valor boleano, puede usar {{jsxref("Array.prototype.every()", "every()")}} o {{jsxref("Array.prototype.some()", "some()")}} en su lugar.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Imprimiendo_el_contenido_de_un_array">Imprimiendo el contenido de un <code>array</code></h3> + +<p>El siguiente código imprime una línea por cada elemento en un array:</p> + +<pre class="brush:js notranslate">function logArrayElements(element, index, array) { + console.log("a[" + index + "] = " + element); +} +// Nótese que se evita el 2° índice ya que no hay ningún elemento en esa posición del array +[2, 5, , 9].forEach(logArrayElements); +// salida: +// a[0] = 2 +// a[1] = 5 +// a[2] = 9 +</pre> + +<h3 id="Usando_thisArg">Usando <code>thisArg</code></h3> + +<p>El siguiente ejemplo actualiza las propiedades del objeto por cada entrada en el array:</p> + +<pre class="brush:js notranslate">function Counter() { + this.sum = 0; + this.count = 0; +} +Counter.prototype.add = function(array) { + array.forEach(function(entry) { + this.sum += entry; + ++this.count; + }, this); + // ^---- Note +}; + +var obj = new Counter(); +obj.add([2, 5, 9]); +obj.count +// 3 +obj.sum +// 16</pre> + +<p>Nota: Dado que el parámetro <code>thisArg</code> (this) se referencia en el <code>forEach()</code>, será pasado al <code>callback</code> cuando se invoque, para utilizarse como su valor <code>this</code>.</p> + +<h3 id="Ejemplo_Función_que_copia_objetos">Ejemplo: Función que copia objetos</h3> + +<p>El siguiente código crea una copia de un objeto dado. Hay diferentes formas de crear una copia de un objeto, ésta es sólo una de ellas y sirve para explicar cómo funciona <code>Array.prototype.forEach </code>utilizando funciones <code>Object.*</code> de ECMAScript 5.</p> + +<pre class="brush: js notranslate">function copy(o){ + var copy = Object.create( Object.getPrototypeOf(o) ); + var propNames = Object.getOwnPropertyNames(o); + + propNames.forEach(function(name){ + var desc = Object.getOwnPropertyDescriptor(o, name); + Object.defineProperty(copy, name, desc); + }); + + return copy; +} + +var o1 = {a:1, b:2}; +var o2 = copy(o1); // o2 ahora se parece a o1 +</pre> + +<h3 id="Si_el_array_se_modifica_durante_la_iteración_otros_elementos_pueden_ser_omitidos.">Si el array se modifica durante la iteración, otros elementos pueden ser omitidos.</h3> + +<p>El siguiente ejemplo muestra por consola "uno", "dos", "cuatro". Cuando se alcanza el registro que contiene el valor "dos", el primer registro del array se desplaza, lo que hace que los registros restantes se muevan una posición. Debido a que el elemento "cuatro" está ahora en una posición anterior en el array, "tres" se omitirá. <code>forEach()</code> no hace una copia del array antes de iterar.</p> + +<pre class="brush:js notranslate">var words = ['uno', 'dos', 'tres', 'cuatro']; +words.forEach(function(word) { + console.log(word); + if (word === 'dos') { + words.shift(); + } +}); +// uno +// dos +// cuatro +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>forEach</code> se agregó de manera reciente al estándar ECMA-262; así que puede no estar presente en otras implementaciones del estándar. Se puede asegurar el uso del <span style="font-family: consolas,monaco,andale mono,monospace;">forEach</span> con tan solo agregar el siguiente código al inicio de los scripts, permitiendo así el uso de <span style="font-family: consolas,monaco,andale mono,monospace;">forEach</span> en implementaciones que no lo soportan de manera nativa. El algoritmo es el mismo que se especifica en la quinta versión de ECMA-262, asumiendo que {{jsxref("Object")}} y {{jsxref("TypeError")}} tienen sus valores originales y que <span style="font-family: consolas,monaco,andale mono,monospace;">callback.call </span>evalúa el valor original de {{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.18 +// Reference: http://es5.github.com/#x15.4.4.18 +if (!Array.prototype.forEach) { + + Array.prototype.forEach = function forEach(callback, thisArg) { + 'use strict'; + var T, k; + + if (this == null) { + throw new TypeError("this is null or not defined"); + } + + var kValue, + // 1. Let O be the result of calling ToObject passing the |this| value as the argument. + O = Object(this), + + // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + len = O.length >>> 0; // Hack to convert O.length to a UInt32 + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if ({}.toString.call(callback) !== "[object Function]") { + throw new TypeError(callback + " is not a function"); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length >= 2) { + T = thisArg; + } + + // 6. Let k be 0 + k = 0; + + // 7. Repeat, while k < len + while (k < len) { + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal method of O with argument Pk. + kValue = O[k]; + + // ii. Call the Call internal method of callback with T as the this value and + // argument list containing kValue, k, and O. + callback.call(T, kValue, k, O); + } + // d. Increase k by 1. + k++; + } + // 8. return undefined + }; +} + +</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('ES5.1', '#sec-15.4.4.18', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.foreach', 'Array.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.forEach")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/from/index.html b/files/es/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..a11d0ebd53 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,242 @@ +--- +title: Array.from() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/from +tags: + - ECMAScript 2015 + - JavaScript + - Referencia + - Vector + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Array.from()</strong></code> crea una nueva instancia de <code>Array</code> a partir de un objeto iterable.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-from.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Array.from(arrayLike[, mapFn[, thisArg]]) +</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>Objeto iterable para convertirlo en un array.</dd> + <dt><code>mapFn</code>{{Optional_inline}}</dt> + <dd>Función de mapa para llamar a cada elemento de la matriz.</dd> + <dt><code>thisArg</code>{{Optional_inline}}</dt> + <dd>Valor para usar como <code>this</code> al ejecutar <code>mapFn</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una nueva instancia de {{jsxref("Array")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Array.from()</code> permite crear <code>Arrays</code> de:</p> + +<ul> + <li>Objetos array-like (objetos con propiedad <code>length</code> o elementos indexados).</li> + <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">Objetos iterables</a> (objetos de los cuales se pueden obtener sus elementos como {{jsxref("Map")}} y {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> tiene un parámetro opcional <code>mapFn</code>, que te permite ejecutar una función {{jsxref("Array.prototype.map", "map")}} a cada elemento del array (o a la subclase del objeto) que se ha creado. Para aclararlo, <code>Array.from(obj, mapFn, thisArg)</code> es igual que <code>Array.from(obj).map(mapFn, thisArg)</code>, excepto en que éste no crea un array intermedio. Esto es importante para ciertas subclases de array, <a href="/es/docs/Web/JavaScript/Vectores_tipados">vectores tipados</a>, ya que el vector intermedio necesitaría tener valores truncados para trabajar con el tipo adecuado.</p> + +<p>La propiedad <code>length</code> del método <code>from()</code> es 1.</p> + +<p>En ES2015, la sintaxis de clase permite la subclasificación de clases integradas y definidas por el usuario; como resultado, los métodos estáticos como <code>Array.from</code> son "heredados" por subclases de <code>Array</code> y crean nuevas instancias de la subclase, no <code>Array</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Array_desde_un_String">Array desde un <code>String</code></h3> + +<pre class="brush: js">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Array_desde_un_Set">Array desde un <code>Set</code></h3> + +<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Array_desde_un_Map">Array desde un <code>Map</code></h3> + +<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(map); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Array_desde_un_objeto_Array-like_(argumentos)">Array desde un objeto Array-like (argumentos)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Usando_una_función_de_flecha_y_Array.from">Usando una función de flecha y <code>Array.from</code></h3> + +<pre class="brush: js">// Usando una función de flecha como función +// para manipular los elementos +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generar secuencia de números +// Puesto que el array se inicializa con `undefined` en cada posición, +// el valor de `v` a continuación será `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Generador_de_secuencia_(rango)">Generador de secuencia (rango)</h3> + +<pre class="brush: js">// Función generadora de secuencia (comúnmente llamado "rango", ej. Clojure, PHP, etc.) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Genera un rango de números entre 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Genera un rango de números entre 1..10 con saltos de 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Generar el abecedario utilizando Array.from haciendo uso de que se ordena como secuencia +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> fue añadido en el estándar ECMA-262 en la 6ta edición (ES2015); así que no puede estar presente en otras implementaciones del estándar. Puedes usarlo insertando este código al comienzo de sus scripts, permitiendo el uso de <code>Array.from</code> en implementaciones que no lo soportan. Este algoritmo es el mismo especificado en ECMA-262, 6ta edición, suponiendo que <code>Object</code> y <code>TypeError</code> tengan sus valores originales y <code>callback.call</code> evalúa el valor original de {{jsxref("Function.prototype.call")}}. Adicionalmente, ya que verdaderos iterables pueden no ser polyficados, esta implementación no soporta iterables genéricos como definidos en la 6ta edición de ECMA-262.</p> + +<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 6, 22.1.2.1 +// Referencia: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // La propiedad length del método from es 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Deje a C ser el este valor. + var C = this; + + // 2. Deje que los elementos sean ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. Retornar IfAbrupt(items). + if (arrayLike == null) { + throw new TypeError("Array.from requiere un objeto array-like - not null or undefined"); + } + + // 4. Si mapfn no está definida, entonces deja que sea false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. si no + // 5. a If IsCallable(mapfn) es false, lanza una excepción TypeError. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: si hay mapFn, el segundo argumento debe ser una función'); + } + + // 5. b. Si thisArg se suministró, deje que T sea thisArg; si no, deje que T esté indefinido. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</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-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.from")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/includes/index.html b/files/es/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..3831c7d73d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,181 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/includes +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>includes()</strong></code> determina si una matriz incluye un determinado elemento, devuelve <code>true</code> o <code>false</code> según corresponda.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-includes.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre><var>arr</var>.includes(<var>searchElement[</var>, <var>fromIndex]</var>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valueToFind</code></dt> + <dd> + <p>El valor a buscar.</p> + + <div class="blockIndicator note"> + <p><strong>Nota: </strong>Al comparar cadenas de texto y caracteres, <code>includes()</code> <strong>distingue mayúsculas y minúsculas</strong>.</p> + </div> + </dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Posición en la matriz en la cuál se debe comenzar a buscar <code>valueToFind</code>; el primer caracter a buscar se encuentra en <code>fromIndex</code>. Un valor negativo inicia la búsqueda desde array.length + fromIndex en adelante. El valor por defecto es 0.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un {{jsxref ("Boolean")}} que es <code>true</code> si el valor <code>valueToFind</code> se encuentra dentro de la matriz (o la parte de la matriz indicada por el índice <code>fromIndex</code>, si se especifica). Todos los valores de cero se consideran iguales independientemente del signo (es decir, -0 se considera igual a 0 y +0), pero <code>false</code> no se considera igual a 0.</p> + +<div class="note"> +<p><strong>Note:</strong> Técnicamente hablando, <code>include()</code> usa el algoritmo <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#Same-value-zero_equality">sameValueZero</a></code> para determinar si se encuentra el elemento dado</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h3 id="fromIndex_es_mayor_o_igual_que_la_longitud_de_la_matriz"><code>fromIndex</code> es mayor o igual que la longitud de la matriz</h3> + +<p>Si <code>fromIndex</code> es mayor o igual que la longitud de la matriz, se devuelve <code>false</code>. No se buscará en la matriz.</p> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +arr.includes('c', 3); // false +arr.includes('c', 100); // false</pre> + +<h3 id="El_índice_calculado_es_menor_que_0">El índice calculado es menor que 0</h3> + +<p>Si <code>fromIndex</code> es negativo, el índice calculado se calcula para usarse como una posición en la matriz en la cual comenzar a buscar <code>searchElement</code>. Si el índice calculado es menor que 0, se buscará la matriz completa.</p> + +<pre class="brush: js">// la longitud de la matriz es 3 +// fromIndex es -100 +// el índice calculado es 3 + (-100) = -97 + +var arr = ['a', 'b', 'c']; + +arr.includes('a', -100); // true +arr.includes('b', -100); // true +arr.includes('c', -100); // true</pre> + +<h3 id="includes()_utilizado_como_método_genérico"><code>includes()</code> utilizado como método genérico</h3> + +<p>El método <code>includes()</code> es intencionalmente genérico. No requiere que este valor sea un objeto Array, por lo que se puede aplicar a otros tipos de objetos (por ejemplo, objetos tipo array). El siguiente ejemplo ilustra el método <code>includes()</code> llamado en el objeto de argumentos de la función.</p> + +<pre class="brush: js">(function() { + console.log([].includes.call(arguments, 'a')); // true + console.log([].includes.call(arguments, 'd')); // false +})('a','b','c');</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.includes +if (!Array.prototype.includes) { + Object.defineProperty(Array.prototype, 'includes', { + value: function(searchElement, fromIndex) { + + if (this == null) { + throw new TypeError('"this" es null o no está definido'); + } + + // 1. Dejar que O sea ? ToObject(this value). + var o = Object(this); + + // 2. Dejar que len sea ? ToLength(? Get(O, "length")). + var len = o.length >>> 0; + + // 3. Si len es 0, devuelve false. + if (len === 0) { + return false; + } + + // 4. Dejar que n sea ? ToInteger(fromIndex). + // (Si fromIndex no está definido, este paso produce el valor 0.) + var n = fromIndex | 0; + + // 5. Si n ≥ 0, entonces + // a. Dejar que k sea n. + // 6. Else n < 0, + // a. Dejar que k sea len + n. + // b. Si k < 0, Dejar que k sea 0. + var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + function sameValueZero(x, y) { + return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); + } + + // 7. Repite, mientras k < len + while (k < len) { + // a. Dejar que elementK sea el resultado de ? Get(O, ! ToString(k)). + // b. Si SameValueZero(searchElement, elementK) es true, devuelve true. + if (sameValueZero(o[k], searchElement)) { + return true; + } + // c. Incrementa k por 1. + k++; + } + + // 8. Devuelve false + return false; + } + }); +}</pre> + +<p>Si necesita admitir motores de JavaScript realmente obsoletos que no son compatibles con <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no rellenar los métodos <code>Array.prototype</code>, ya que no puede hacerlos no enumerables.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.includes")}}</p> +</div> + +<div id="compat-mobile"></div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("Array.prototype.findIndex()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/index.html b/files/es/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..45531c7a3e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,449 @@ +--- +title: Array +slug: Web/JavaScript/Referencia/Objetos_globales/Array +tags: + - Array + - JavaScript + - Matriz unidimensional + - Referencia + - Vector +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<p>{{JSRef}}<br> + El objeto <strong><code>Array</code> </strong>de JavaScript es un objeto global que es usado en la construcción de <em>arrays</em>, que son objetos tipo lista de alto nivel.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Los <em>arrays</em> son objetos similares a una lista cuyo prototipo proporciona métodos para efectuar operaciones de recorrido y de mutación. Tanto la longitud como el tipo de los elementos de un <em>array</em> son variables. Dado que la longitud de un <em>array </em>puede cambiar en cualquier momento, y los datos se pueden almacenar en ubicaciones no contiguas, no hay garantía de que los <em>arrays </em>de JavaScript sean densos; esto depende de cómo el programador elija usarlos. En general estas características son cómodas, pero si, en su caso particular, no resultan deseables, puede considerar el uso de <em>arrays</em> con tipo.</p> + +<h3 id="Operaciones_habituales">Operaciones habituales</h3> + +<p><strong>Crear un Array</strong></p> + +<pre class="brush: js notranslate">let frutas = ["Manzana", "Banana"] + +console.log(frutas.length) +// 2 +</pre> + +<p><strong>Acceder a un elemento de Array mediante su índice</strong></p> + +<pre class="brush: js notranslate">let primero = frutas[0] +// Manzana + +let ultimo = frutas[frutas.length - 1] +// Banana</pre> + +<p><strong>Recorrer un Array</strong></p> + +<pre class="brush: js notranslate">frutas.forEach(function(elemento, indice, array) { + console.log(elemento, indice); +}) +// Manzana 0 +// Banana 1</pre> + +<p><strong>Añadir un elemento al final de un Array</strong></p> + +<pre class="brush: js notranslate">let nuevaLongitud = frutas<strong>.push</strong>('Naranja') // Añade "Naranja" al final +// ["Manzana", "Banana", "Naranja"]</pre> + +<p><strong>Eliminar el último elemento de un Array</strong></p> + +<pre class="brush: js notranslate">let ultimo = frutas<strong>.pop</strong>() // Elimina "Naranja" del final +// ["Manzana", "Banana"]</pre> + +<p><strong>Añadir un elemento al principio de un Array</strong></p> + +<pre class="brush: js notranslate">let nuevaLongitud = frutas<strong>.unshift</strong>('Fresa') // Añade "Fresa" al inicio +// ["Fresa" ,"Manzana", "Banana"] +</pre> + +<p><strong>Eliminar el primer elemento de un Array</strong></p> + +<pre class="brush: js notranslate">let primero = frutas<strong>.shift</strong>() // Elimina "Fresa" del inicio +// ["Manzana", "Banana"] +</pre> + +<p><strong>Encontrar el índice de un elemento del Array</strong></p> + +<pre class="brush: js notranslate">frutas.push('Fresa') +// ["Manzana", "Banana", "Fresa"] + +let pos = frutas<strong>.indexOf</strong>('Banana') // (pos) es la posición para abreviar +// 1</pre> + +<p><strong>Eliminar un único elemento mediante su posición</strong></p> + +<dl> + <dt> Ejemplo:</dt> + <dd>Eliminamos "Banana" del <em>array </em>pasándole dos parámetros: la posición del primer elemento que se elimina y el número de elementos que queremos eliminar. De esta forma, <code><strong>.splice</strong>(pos, 1)</code> empieza en la posición que nos indica el valor de la variable <code>pos</code> y elimina 1 elemento. En este caso, como <code>pos</code> vale 1, elimina un elemento comenzando en la posición 1 del <em>array,</em> es decir "Banana".</dd> +</dl> + +<pre class="brush: js notranslate">let elementoEliminado = frutas<strong>.splice</strong>(pos, 1) +// ["Manzana", "Fresa"]</pre> + +<p><strong>Eliminar varios elementos a partir de una posición</strong></p> + +<dl> + <dt> Nota:</dt> + <dd>Con <code><strong>.splice</strong>()</code> no solo se puede eliminar elementos del array, si no que también podemos extraerlos guardándolo en un nuevo array. ¡Ojo! que al hacer esto estaríamos modificando el array de origen.</dd> +</dl> + +<pre class="brush: js notranslate">let vegetales = ['Repollo', 'Nabo', 'Rábano', 'Zanahoria'] +console.log(vegetales) +// ["Repollo", "Nabo", "Rábano", "Zanahoria"] + +let pos = 1, numElementos = 2 + +let elementosEliminados = vegetales<strong>.splice</strong>(pos, numElementos) +// ["Nabo", "Rábano"] ==> Lo que se ha guardado en "elementosEliminados" + +console.log(vegetales) +// ["Repollo", "Zanahoria"] ==> Lo que actualmente tiene "vegetales" </pre> + +<p><strong>Copiar un Array</strong></p> + +<pre class="brush: js notranslate">let copiaArray = vegetales<strong>.slice</strong>(); +// ["Repollo", "Zanahoria"]; ==> Copiado en "copiaArray"</pre> + +<h3 id="Acceso_a_elementos_de_un_array">Acceso a elementos de un <em>array</em></h3> + +<p>Los índices de los <em>arrays</em> de JavaScript comienzan en cero, es decir, el índice del primer elemento de un <em>array</em> es <code>0</code>, y el del último elemento es igual al valor de la propiedad <code>length</code> del <em>array </em>restándole 1.</p> + +<p>Si se utiliza un número de índice no válido, se obtendrá <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let arr = ['este es el primer elemento', 'este es el segundo elemento', 'este es el último elemento'] +console.log(arr[0]) // escribe en consola 'este es el primer elemento' +console.log(arr[1]) // escribe en consola 'este es el segundo elemento' +console.log(arr[arr.length - 1]) // escribe en consola 'este es el último elemento' +</pre> + +<p>Los elementos de un <em>array</em> pueden considerarse propiedades del objeto tanto como <code>toString</code> (sin embargo, para ser precisos, <code>toString()</code> es un método). Sin embargo, se obtendrá un error de sintaxis si se intenta acceder a un elemento de un <em>array</em> de la forma siguiente, ya que el nombre de la propiedad no sería válido:</p> + +<pre class="brush: js notranslate">console.log(arr.0) // error de sintaxis</pre> + +<p>No hay nada especial ni en los <em>arrays</em> de JavaScript ni en sus propiedades que ocasione esto. En JavaScript, las propiedades cuyo nombre comienza con un dígito no pueden referenciarse con la notación punto y debe accederse a ellas mediante la notación corchete.</p> + +<p>Por ejemplo, dado un objeto con una propiedad de nombre <code>'3d'</code>, sólo podría accederse a dicha propiedad con la notación corchete.</p> + +<pre class="brush: js notranslate">let decadas = [1950, 1960, 1970, 1980, 1990, 2000, 2010] +console.log(decadas.0) // error de sintaxis +console.log(decadas[0]) // funciona correctamente +</pre> + +<pre class="brush: js notranslate">renderizador.3d.usarTextura(modelo, 'personaje.png') +renderizador['3d'].usarTextura(modelo, 'personaje.png')</pre> + +<p>Obsérvese que, en el último ejemplo, ha sido necesario poner <code>'3d'</code> entre comillas. Es posible usar también comillas con los índices del los <em>arrays</em> de JavaScript (p. ej., <code>decadas['2']</code> en vez de <code>decadas[2]</code>), aunque no es necesario.</p> + +<p>El motor de JavaScript transforma en un string el 2 de <code>decadas[2]</code> a través de una conversión implícita mediante <code>toString</code>. Por tanto, <code>'2'</code> y <code>'02'</code> harían referencia a dos posiciones diferentes en el objeto <code>decadas</code>, y el siguiente ejemplo podría dar <code>true</code> como resultado:</p> + +<pre class="brush: js notranslate">console.log(decadas['2'] != decadas['02'])</pre> + +<h3 id="Relación_entre_length_y_las_propiedades_numéricas">Relación entre <code>length</code> y las propiedades numéricas</h3> + +<p>La propiedad <code>length</code> de un <em>array</em> de JavaScript está conectada con algunas otras de sus propiedades numéricas.</p> + +<p>Varios de los métodos propios de un <em>array</em> (p. ej., <code>join()</code>, <code>slice()</code>, <code>indexOf()</code>, etc.) tienen en cuenta el valor de la propiedad <code>length</code> de un array cuando se les llama.</p> + +<p>Otros métodos (p. ej., <code>push()</code>, <code>splice()</code>, etc.) modifican la propiedad <code>length</code> de un array.</p> + +<pre class="brush: js notranslate">const frutas = [] +frutas.push('banana', 'manzana', 'pera') + +console.log(frutas.length) // 3 +</pre> + +<p>Cuando se le da a una propiedad de un <em>array</em> JavaScript un valor que corresponda a un índice válido para el <em>array</em> pero que se encuentre fuera de sus límites, el motor actualizará el valor de la propiedad <code>length</code> como corresponda:</p> + +<pre class="brush: js notranslate">frutas[5] = 'fresa' +console.log(frutas[5]) // 'fresa' +console.log(Object.keys(frutas)) // ['0', '1', '2', '5'] +console.log(frutas.length) // 6 +</pre> + +<p>Si se aumenta el valor de <code>length</code>:</p> + +<pre class="brush: js notranslate">frutas.length = 10 +console.log(frutas) // ['banana', 'manzana', 'pera', <2 empty items>, 'fresa', <4 empty items>] +console.log(Object.keys(frutas)) // ['0', '1', '2', '5'] +console.log(frutas.length) // 10 +console.log(frutas[8]) // undefined +</pre> + +<p>Si se disminuye el valor de la propiedad <code>length</code> pueden eliminarse elementos:</p> + +<pre class="brush: js notranslate">frutas.length = 2 +console.log(Object.keys(frutas)) // ['0', '1'] +console.log(frutas.length) // 2 +</pre> + +<p>Hay más información sobre este tema en la página sobre <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/length">Array.length</a></code>.</p> + +<h3 id="Creación_de_un_array_a_partir_de_una_expresión_regular">Creación de un <em>array</em> a partir de una expresión regular</h3> + +<p>El resultado de una búsqueda con una <code>RegExp</code> en un string puede crear un <em>array</em> de JavaScript. Este array tendrá propiedades y elementos que proporcionan información sobre la correspondencia encontrada. Para obtener un <em>array</em> de esta forma puede utilizarse <code>RegExp.exec()</code>, <code>String.match()</code> o <code>String.replace()</code>.</p> + +<p>El siguiente ejemplo, y la tabla que le sigue, pueden ayudar a comprender mejor las propiedades y elementos a los que nos referimos:</p> + +<pre class="brush: js notranslate">// Buscar una d seguida de una o más b y, al final, de otra d +// Recordar las b y la d final +// No distinguir mayúsculas y minúsculas + +const miRe = /d(b+)(d)/i +const miArray = miRe.exec('cdbBdbsbz')</pre> + +<p>Las propiedades y elementos que se obtienen de esta búsqueda son los siguientes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedad/Elemento</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>input</code><br> + {{ReadOnlyInline}}</td> + <td>El string original sobre el que se ha realizado la búsqueda con la expresión regular</td> + <td><code>"cdbBdbsbz"</code></td> + </tr> + <tr> + <td><code>index</code><br> + {{ReadOnlyInline}}</td> + <td>El índice de la correspondencia en el string, siendo cero el de la primera posición.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>[0]</code><br> + {{ReadOnlyInline}}</td> + <td>Los últimos caracteres que cumplen la correspondencia</td> + <td><code>"dbBd"</code></td> + </tr> + <tr> + <td><code>[1], ...[n]</code><br> + {{ReadOnlyInline}}</td> + <td>Elementos que indican las correspondencias de substrings entre paréntesis (si se han incluido) de la expresión regular. No hay límite al número de substrings entre paréntesis que se puedan utilizar.</td> + <td><code>[1]: "bB"<br> + [2]: "d"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt><strong><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array">Array()</a></code></strong></dt> + <dd>Crea un nuevo objeto <code>Array</code>.</dd> +</dl> + +<h2 id="Propiedades_estáticas">Propiedades estáticas</h2> + +<dl> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@species">get Array[@@species]</a></code></dt> + <dd>La función del constructor se utiliza para crear objetos derivados.</dd> +</dl> + +<h2 id="Métodos_estáticos">Métodos estáticos</h2> + +<dl> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/from">Array.from()</a></code></dt> + <dd>Crea una nueva instancia de <code>Array</code> a partir de <code><em>similarAUnArray</em></code>, un objeto iterable o parecido a un <em>array.</em></dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/isArray">Array.isArray()</a></code></dt> + <dd>Devuelve <code>true</code> si <code><em>valor</em></code> es un <em>array</em>, y <code>false</code> en caso contrario.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/of">Array.of()</a></code></dt> + <dd>Crea una nueva instancia de <code>Array</code> con un número variable de parámetros, independientemente del número y del tipo de dichos parámetros.</dd> +</dl> + +<h2 id="Propiedades_de_instancia">Propiedades de instancia</h2> + +<dl> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/length">Array.prototype.length</a></code></dt> + <dd>Indica el número de elementos de un <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables">Array.prototype[@@unscopables]</a></code></dt> + <dd>Símbolo que contiene todos los nombres de las propiedades que se excluyen de un ámbito de enlace <code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/with">with</a></code>.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/concat">Array.prototype.concat()</a></code></dt> + <dd>Devuelve un nuevo <em>array</em> que es la concatenación de aquél sobre el que se invoca, seguido de otros <em>array(s)</em> o valor(es).</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin">Array.prototype.copyWithin()</a></code></dt> + <dd>Copia una secuencia de elementos de un <em>array</em> dentro del propio <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/entries">Array.prototype.entries()</a></code></dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice del <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/every">Array.prototype.every()</a></code></dt> + <dd>Devuelve <code>true</code> si todos los elementos del <em>array</em> cumplen el predicado que recibe como parámetro.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/fill">Array.prototype.fill()</a></code></dt> + <dd>Asigna un <em><code>valor</code></em> estático a todos los elementos del <em>array</em> entre las posiciones <code><em>inicio</em></code> y <code><em>fin</em></code>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter">Array.prototype.filter()</a></code></dt> + <dd>Devuelve un nuevo <em>array</em> que contiene todos los elementos de aquél para el cual se llama que cumplan el predicado que se le pasa como parámetro.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/find">Array.prototype.find()</a></code></dt> + <dd>Devuelve el primer <em><code>elemento</code></em> del <em>array </em>que cumpla el predicado que se pasa como parámetro, o <code>undefined</code> si ninguno lo cumple.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/findIndex">Array.prototype.findIndex()</a></code></dt> + <dd>Devuelve el índice del primer elemento del <em>array</em> que cumpla el predicado que se pasa como parámetro, o <code>-1</code> si nunguno lo cumple.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach">Array.prototype.forEach()</a></code></dt> + <dd>Llama a la función pasada como parámetro para todos los elementos del <em>array.</em></dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes">Array.prototype.includes()</a></code></dt> + <dd>Determina si el <em>array</em> contiene el <code><em>valorBuscado</em></code> y devuelve <code>true</code> o <code>false</code> según sea el caso.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf">Array.prototype.indexOf()</a></code></dt> + <dd>Devuelve el índice del primer elemento del <em>array</em> que sea igual a <code><em>elementoBuscado</em></code>, o <code>-1</code> si no existe.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join">Array.prototype.join()</a></code></dt> + <dd>Concatena en un string todos los elementos de un <em>array.</em></dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/keys">Array.prototype.keys()</a></code></dt> + <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves de cada índice del <em>array.</em></dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf">Array.prototype.lastIndexOf()</a></code></dt> + <dd>Devuelve el índice del último elemento del <em>array</em> que sea igual a <code><em>elementoBuscado</em></code>, o <code>-1</code> si no existe.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map">Array.prototype.map()</a></code></dt> + <dd>Devuelve un nuevo <em>array</em> que contiene el resultado de llamar a la función pasada como parámetro a todos los elementos del <em>array</em> sobre el que se invoca.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/pop">Array.prototype.pop()</a></code></dt> + <dd>Elimina el último elemento de un <em>array</em>, y devuelve dicho elemento.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push">Array.prototype.push()</a></code></dt> + <dd>Añade uno o más elementos al final de un <em>array</em> y devuelve el nuevo valor de su propiedad <code>length</code>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce">Array.prototype.reduce()</a></code></dt> + <dd>Aplica la función pasada como parámetro a un <code><em>acumulador</em></code> y a cada valor del <em>array</em>, que se recorre de izquierda a derecha, para reducirlo a un único valor.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight">Array.prototype.reduceRight()</a></code></dt> + <dd>Aplica la función pasada como parámetro a un <em><code>acumulador</code></em> y a cada valor del <em>array</em>, que se recorre de derecha a izquierda, para reducirlo a un único valor.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reverse">Array.prototype.reverse()</a></code></dt> + <dd>Invierte el orden de los elementos de un <em>array</em> (el primero pasa a ser el último y el último a ser el primero) en el propio <em>array.</em> Este método modifica el array.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/shift">Array.prototype.shift()</a></code></dt> + <dd>Elimina el primer elemento de un <em>array</em>, y devuelve dicho elemento.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/slice">Array.prototype.slice()</a></code></dt> + <dd>Extrae una porción del <em>array</em> sobre el que se llama y devuelve un nuevo <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/some">Array.prototype.some()</a></code></dt> + <dd>Devuelve <code>true</code> si al menos un elemento del <em>array</em> cumple con el predicado que se pasa como parámetro.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort">Array.prototype.sort()</a></code></dt> + <dd>Ordena los elementos de un <em>array</em>, modificando éste, y devuelve el array ordenado.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/splice">Array.prototype.splice()</a></code></dt> + <dd>Añade, borra o modifica elementos de un <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString">Array.prototype.toLocaleString()</a></code></dt> + <dd>Devuelve un string adaptado a la configuración regional que representa el <em>array</em> y sus elementos. Redefine el método <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString">Object.prototype.toLocaleString()</a></code>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/toString">Array.prototype.toString()</a></code></dt> + <dd>Devuelve un string que representa el <em>array</em> y sus elementos. Redefine el método <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString">Object.prototype.toString()</a></code>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/unshift">Array.prototype.unshift()</a></code></dt> + <dd>Añada uno o más elementos al inicio de un <em>array</em> y devuelve el nuevo valor de <code>length</code> para el <em>array</em> resultante.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/values">Array.prototype.values()</a></code></dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice del <em>array</em>.</dd> + <dt><code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator">Array.prototype[@@iterator]()</a></code></dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice del <em>array</em>.</dd> +</dl> + +<p>Ejemplos</p> + +<h3 id="Creando_un_Arreglo" name="Creando_un_Arreglo">Creación de una matriz unidimensional</h3> + +<p>El siguiente ejemplo crea un <em>array </em><code>mensajes</code> con una longitud de 0, y luego asigna valores a <code>mensajes[0]</code> y a <code>mensajes[99]</code>, con lo que la longitud del <em>array</em> pasa a ser 100.</p> + +<pre class="brush: js notranslate">let mensajes = []; +mensajes[0] = "Hola"; +mensajes[99] = "mundo"; + +if (mensajes.length === 100) { + console.log("La longitud es de 100."); +} +</pre> + +<h3 id="Creaci.C3.B3n_de_un_arreglo_de_dos_dimensiones" name="Creaci.C3.B3n_de_un_arreglo_de_dos_dimensiones">Creación de una matriz de dos dimensiones</h3> + +<p>El siguiente ejemplo crea una matriz bidimensional que representa un tablero de ajedrez. El primer movimiento se realiza copiando la <code>'p'</code> de <code>tablero[6][4]</code> en <code>tablero[4][4]</code>. La posición <code>[6][4]</code> se limpia.</p> + +<pre class="notranslate">let tablero = [ + ['T','C','A','D','R','A','C','T'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['t','c','a','d','r','a','c','t'] ] + +console.log(tablero.join('\n') + '\n\n') + +// Adelantar dos posiciones el peón de rey +tablero[4][4] = tablero[6][4] +tablero[6][4] = ' ' +console.log(tablero.join('\n'))</pre> + +<p>Este es el resultado:</p> + +<pre class="eval notranslate">T,C,A,D,R,A,C,T +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +t,c,a,d,r,a,c,t + +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +t,c,a,d,r,a,c,t +</pre> + +<h3 id="Uso_de_un_array_para_tabular_un_conjunto_de_valores">Uso de un <em>array</em> para tabular un conjunto de valores</h3> + +<pre class="notranslate">valores = [] +for (let x = 0; x < 10; x++){ + valores.push([ + 2 ** x, + 2 * x ** 2 + ]) +} +console.table(valores)</pre> + +<p>da como resultado:</p> + +<pre class="notranslate">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(La primera columna es el índice).</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Publicación inicial</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>ECMAScript 1</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 te gustaría contribuir a los datos, por favor visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de extracción(pull request).</div> + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>En la Guía de JavaScript: + <ul> + <li><a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">"Propiedades indexadas de un objeto"</a></li> + <li><a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">"Colecciones con índice: objeto Array"</a></li> + </ul> + </li> + <li><a href="/es/docs/JavaScript_typed_arrays">Arrays tipados</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/indexof/index.html b/files/es/web/javascript/reference/global_objects/array/indexof/index.html new file mode 100644 index 0000000000..7aad7773b1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/indexof/index.html @@ -0,0 +1,248 @@ +--- +title: Array.prototype.indexOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/indexOf +tags: + - Array + - JavaScript + - Method + - Prototype + - Referencia + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/indexOf +--- +<div>{{JSRef}}</div> + +<p>El método <strong>indexOf()</strong> retorna el primer índice en el que se puede encontrar un elemento dado en el array, ó retorna -1 si el elemento no esta presente.</p> + +<div class="note"> +<p><strong>Nota:</strong> Para el método String, ver {{jsxref("String.prototype.indexOf()")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>array</em>.indexOf(<em>searchElement</em>[, <em>fromIndex</em>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Elemento a encontrar en el array.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>Indica el índice por el que se comienza la búsqueda. Por defecto es 0, por lo que se busca en todo el array. Si el índice es mayor o igual a la longitud del array, devuelve -1, ya que no se buscaría en el array. Si el valor es negativo, se toma restando posiciones desde el final del array. Hay que tener en cuenta que aunque el índice sea negativo, la búsqueda seguirá realizándose en un orden incremental. Si el índice calculado es menor de 0, la búsqueda se realizará por todo el array.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El primer índice del elemento en la matriz; -1 si no se encuentra.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>indexOf()</code> compara <code>searchElement</code> con los elementos del array usando <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators#Using_the_Equality_Operators" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdad estricta</a> (el mismo método que cuando se usa ===, o el operador igualdad-triple).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_indexOf()">Usando <code>indexOf()</code></h3> + +<p>El siguiente ejemplo usa <code>indexof()</code> para localizar valores en un array </p> + +<pre class="brush: js">var array = [2, 9, 9]; +array.indexOf(2); // 0 +array.indexOf(7); // -1 +array.indexOf(9, 2); // 2 +array.indexOf(2, -1); // -1 +array.indexOf(2, -3); // 0</pre> + +<h3 id="Encontrar_todas_las_apariciones_de_un_elemento">Encontrar todas las apariciones de un elemento</h3> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.indexOf(element); +while (idx != -1) { + indices.push(idx); + idx = array.indexOf(element, idx + 1); +} +console.log(indices); +// [0, 2, 4]</pre> + +<h3 id="Encontrar_si_un_elemento_existe_en_la_matriz_o_no_y_actualizar_la_matriz">Encontrar si un elemento existe en la matriz o no y actualizar la matriz</h3> + +<pre class="brush: js">function updateVegetablesCollection (veggies, veggie) { + if (veggies.indexOf(veggie) === -1) { + veggies.push(veggie); + console.log('La nueva colección de vegetales es: ' + veggies); + } else if (veggies.indexOf(veggie) > -1) { + console.log(veggie + ' ya existe en la colección de verduras.'); + } +} + +var veggies = ['patata', 'tomate', 'chiles', 'pimientoverde']; + +updateVegetablesCollection(veggies, 'espinaca'); +// La nueva colección de verduras es : patata, tomate, chiles, pimientoverde, espinaca +updateVegetablesCollection(veggies, 'espinaca'); +// La espinaca ya existe en la colección de verduras.</pre> + +<p> </p> + +<h2 id="Compatibility" name="Compatibility">Polyfill</h2> + +<p><code>indexOf()</code> se agregó al estándar ECMA-262 en la 5<sup>a</sup> edición; por tanto no está implementado en todos los navegadores. Puedes hacerlo funcionar insertando el siguiente código al comienzo de tus scripts, permitiendo usar <code>indexOf()</code> en implementaciones que no lo soporten de forma nativa. Este algoritmo es exáctamente el especificado en ECMA-262, 5ª edición, suponiendo que {{jsxref("Global_Objects/TypeError", "TypeError")}} y {{jsxref("Math.abs()")}} tienen sus valores originales.</p> + + +<pre class="brush: js">if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function indexOf(member, startFrom) { + /* + En el modo no estricto, si la variable `this` es null o indefinida, entonces se establece + en el objeto ventana. De lo contrario, `this` se convierte automáticamente en un objeto. + En modo estricto, si la variable `this` es nula o indefinida, se lanza `TypeError`. + */ + if (this == null) { + throw new TypeError("Array.prototype.indexOf() - no se puede convertir `" + this + "` en objeto"); + } + + var + index = isFinite(startFrom) ? Math.floor(startFrom) : 0, + that = this instanceof Object ? this : new Object(this), + length = isFinite(that.length) ? Math.floor(that.length) : 0; + + if (index >= length) { + return -1; + } + + if (index < 0) { + index = Math.max(length + index, 0); + } + + if (member === undefined) { + /* + Dado que `member` no está definido, las claves que no existan tendrán el valor de `same` + como `member` y, por lo tanto, es necesario verificarlas. + */ + do { + if (index in that && that[index] === undefined) { + return index; + } + } while (++index < length); + } else { + do { + if (that[index] === member) { + return index; + } + } while (++index < length); + } + + return -1; + }; +}</pre> + +<p>Sin embargo, si está más interesado en todos los pequeños trozos técnicos definidos por el estándar ECMA, y está menos preocupado por el rendimiento o la concisión, entonces usted puede encontrar esta polyfill más descriptivo que sea más útil.</p> + +<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.14 +// Referencia: http://es5.github.io/#x15.4.4.14 +if (!Array.prototype.indexOf) { + Array.prototype.indexOf = function(searchElement, fromIndex) { + + var k; + + // 1. Dejar que `o` sea el resultado de llamar a ToObject + // pasando este valor como argumento. + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var o = Object(this); + + // 2. Dejar que `lenValue` sea el resultado de llamar al método interno + // de `o` con el argumento "length". + // 3. Dejar que len sea ToUint32(lenValue). + var len = o.length >>> 0; + + // 4. Si `len` es 0, devolver -1. + if (len === 0) { + return -1; + } + + // 5. Si se pasó el argumento `fromIndex`, deje que `n` sea + // ToInteger(fromIndex); si no, que `n` sea 0. + var n = fromIndex | 0; + + // 6. Si n >= len, devolver -1. + if (n >= len) { + return -1; + } + + // 7. Si n >= 0, entonces deja que `k` sea `n`. + // 8. Si no, n<0, deja que `k` sea `len - abs(n)`. + // Si `k` es menor que 0, entonces deja que `k` sea 0. + k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); + + // 9. Repite, mientras k < len + while (k < len) { + // a. Dejar que `Pk` sea ToString(k). + // Esto está implícito para los operandos LHS del operador in + // b. Dejar que kPresent sea el resultado de llamar al método + // interno `HasProperty` de `o` con el argumento `Pk`. + // Este paso se puede combinar con `c` + // c. Si kPresent es verdadero, entonces + // i. Dejar que `elementK` sea el resultado de llamar al método + // interno de `o` con el argumento ToString(k). + // ii. Deje que `same` sea el resultado de aplicar el + // Algoritmo de comparación de igualdad estricta a + // searchElement y elementK. + // iii. Si `same` es true, devuelve `k`. + if (k in o && o[k] === searchElement) { + return k; + } + k++; + } + return -1; + }; +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.Array.indexOf")}}</p> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<ul> + <li>Comenzando con Firefox 47 {{geckoRelease(47)}}, este método ya no devolverá <code>-0</code>. Por ejemplo, <code>[0] .indexOf (0, -0)</code> siempre devolverá <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<div id="compat-mobile"> </div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/isarray/index.html b/files/es/web/javascript/reference/global_objects/array/isarray/index.html new file mode 100644 index 0000000000..b2a115a814 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/isarray/index.html @@ -0,0 +1,128 @@ +--- +title: Array.isArray() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/isArray +tags: + - Array + - ECMAScript5 + - JavaScript + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/isArray +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Array.isArray()</strong></code> determina si el valor pasado es un {{jsxref("Array")}}.</p> + +<pre class="brush: js">Array.isArray([1, 2, 3]); // true +Array.isArray({foo: 123}); // false +Array.isArray('foobar'); // false +Array.isArray(undefined); // false +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Array.isArray(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto a evaluar.</dd> +</dl> + +<h3 id="Description" name="Description">Valor de retorno</h3> + +<p><code>true</code> si el objeto es un {{jsxref("Array")}}; en caso contrario, <code>false</code>.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Si el objeto es un {{jsxref("Array")}}, devuelve <code>true</code>; <code>false</code>, en cualquier otro caso.</p> + +<p>Vea el artículo <a href="http://web.mit.edu/jwalden/www/isArray.html">“Determining with absolute accuracy whether or not a JavaScript object is an array”</a> para más detalles.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: js">// las siguientes llamadas devuelven true +Array.isArray([]); +Array.isArray([1]); +Array.isArray(new Array()); +Array.isArray(new Array('a', 'b', 'c', 'd')); +Array.isArray(new Array(3)); +// Hecho poco conocido: Array.prototype es también un array: +Array.isArray(Array.prototype); + +// todas las siguientes llamadas devuelven false +Array.isArray(); +Array.isArray({}); +Array.isArray(null); +Array.isArray(undefined); +Array.isArray(17); +Array.isArray('Array'); +Array.isArray(true); +Array.isArray(false); +Array.isArray({ __proto__: Array.prototype }); +</pre> + +<h3 id="instanceof_vs_isArray"><code>instanceof</code> vs <code>isArray</code></h3> + +<p>Al comprobar una instancia <code>Array</code>, <code>Array.isArray</code> es más recomendado que <code>instanceof</code> porque funciona a través de <code>iframes</code>.</p> + +<pre class="brush: js">var iframe = document.createElement('iframe'); +document.body.appendChild(iframe); +xArray = window.frames[window.frames.length - 1].Array; +var arr = new xArray(1,2,3); // [1,2,3] + +// Comprobando correctamente un Array +Array.isArray(arr); // true +// Considerado peligroso, porque no funciona a través de iframes +arr instanceof Array; // false +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Ejecutar el siguiente código antes de cualquier otro código creará un <code>Array.isArray()</code> si no está disponible de forma nativa.</p> + +<pre class="brush: js">if (!Array.isArray) { + Array.isArray = function(arg) { + return Object.prototype.toString.call(arg) === '[object Array]'; + }; +} +</pre> + +<h2 id="Especificaciones" name="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('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.isArray")}}</div> + +<h2 id="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/join/index.html b/files/es/web/javascript/reference/global_objects/array/join/index.html new file mode 100644 index 0000000000..ea9ba3e544 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/join/index.html @@ -0,0 +1,110 @@ +--- +title: Array.prototype.join() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/join +tags: + - Array + - JavaScript + - Matriz + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/join +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>join()</code></strong> une todos los elementos de una matriz (o un <a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">objeto similar a una matriz</a>) en una cadena y devuelve esta cadena.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-join.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr.join([separator])</var></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>separador</code> {{optional_inline}}</dt> + <dd>Es una <code>cadena</code> usada para separar cada uno de los elementos del arreglo. El separador es convertido a una <code>cadena</code> si es necesario. Si este se omite, los elementos del arreglo son separados con una coma (","). Si el <code>separador</code> es una <code>cadena</code> vacía todos los elementos son unidos sin ningún carácter entre ellos.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena con todos los elementos de la matriz unidos. Si <code><em>arr</em>.length</code> es <code>0</code>, se devuelve la cadena vacía.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Las conversiones de cadena de todos los elementos de la matriz se unen en una cadena.</p> + +<div class="warning"> +<p>Si un elemento <code>no está definido</code> o es <code>nulo</code>, se convierte en la cadena vacía.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uniendo_un_arreglo_cuatro_veces_en_diferentes_formas">Uniendo un arreglo cuatro veces en diferentes formas</h3> + +<p>El siguiente ejemplo crea un arreglo <code>a</code> con tres elementos para luego unir el arreglo cuatro veces: usando el separador predeterminado, luego una coma y un espacio, luego un signo de suma, y finalmente una cadena vacío.</p> + +<pre class="brush: js">var a = ['Viento', 'Lluvia', 'Fuego']; +var miVar1 = a.join(); // asigna 'Viento,Lluvia,Fuego' a miVar1 +var miVar2 = a.join(', '); // asigna 'Viento, Lluvia, Fuego' a miVar2 +var miVar3 = a.join(' + '); // asigna 'Viento + Lluvia + Fuego' a miVar3 +var miVar4 = a.join(''); // asigna 'VientoLluviaFuego' a miVar4 +</pre> + +<h3 id="Unirse_a_un_objeto_tipo_matriz">Unirse a un objeto tipo matriz</h3> + +<p>El siguiente ejemplo une un objeto parecido a una matriz (<code><a href="/es/docs/Web/JavaScript/Reference/Functions/arguments">argumentos</a></code>), llamando a {{jsxref("Function.prototype.call")}} en <code>Array.prototype.join</code>.</p> + +<pre class="brush: js">function f(a, b, c) { + var s = Array.prototype.join.call(arguments); + console.log(s); // '1,a,true' +} +f(1, 'a', true); +//resultado esperado: "1,a,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>ECMAScript 1st Edition</td> + <td>Estándar</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.join")}}</div> + +<div id="compat-desktop"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("TypedArray.prototype.join()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/keys/index.html b/files/es/web/javascript/reference/global_objects/array/keys/index.html new file mode 100644 index 0000000000..ff7cb593f5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/keys/index.html @@ -0,0 +1,84 @@ +--- +title: Array.prototype.keys() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/keys +tags: + - Array + - ECMAScript 2015 + - Iterator + - JavaScript + - Matriz + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/keys +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>keys()</strong></code> devuelve un nuevo objeto <code><strong>Array Iterator</strong></code> que contiene las claves de índice con las que acceder a cada elemento en el array.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-keys.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.keys()</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un nuevo objeto iterador {{jsxref("Array")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_básico">Uso básico</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; +var iterator = arr.keys(); + +console.log(iterator.next()); // { value: 0, done: false } +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="El_iterador_no_ignora_los_huecos">El iterador no ignora los huecos</h3> + +<pre class="brush: js">var arr = ['a', , 'c']; +var sparseKeys = Object.keys(arr); +var denseKeys = [...arr.keys()]; +console.log(sparseKeys); // ['0', '2'] +console.log(denseKeys); // [0, 1, 2] +</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-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.keys")}}</div> + +<div id="compat-mobile"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/lastindexof/index.html b/files/es/web/javascript/reference/global_objects/array/lastindexof/index.html new file mode 100644 index 0000000000..19667a54af --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/lastindexof/index.html @@ -0,0 +1,164 @@ +--- +title: Array.prototype.lastIndexOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf +tags: + - Array + - Arreglo + - ECMAScript 5 + - JavaScript + - Matriz + - Prototipo + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>lastIndexOf()</strong></code> devuelve el último índice en el que un cierto elemento puede encontrarse en el arreglo, ó <code>-1</code> si el elemento no se encontrara. El arreglo es recorrido en sentido contrario, empezando por el índice <code>fromIndex</code>.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-lastindexof.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr.lastIndexOf(searchElement) arr.lastIndexOf(searchElement, fromIndex)</var></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>searchElement</code></dt> + <dd>Elemento a encontrar en el arreglo.</dd> + <dt><code>fromIndex</code> {{optional_inline}}</dt> + <dd>El índice en el que empieza la búsqueda en sentido contrario. Por defecto la longitud del arreglo menos uno (<code>arr.length - 1</code>), es decir, todo el arreglo será recorrido. Si el índice es mayor o igual que la longitud del arreglo, todo el arreglo será recorrido. Si es un valor negatigo, se usará como inicio del desplazamiento el final del arreglo. Darse cuenta que aún cuando el índice es negativo, el arreglo todavía será recorrido desde atrás hacia delante. Si el índice calculado es menor de <code>0</code>, se devolverá <code>-1</code>, es decir, el arreglo no será recorrido.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El último índice del elemento en el arreglo; <code>-1</code> si no se encuentra.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>lastIndexOf</code> compara <code>searchElement</code> con los elementos del arreglo usando <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">igualdad estricta</a> (el mismo método es usado para la ===, operador triple igualdad).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_lastIndexOf">Usando <code>lastIndexOf</code></h3> + +<p>El siguiente ejemplo usa <code>lastIndexOf</code> para encontrar valores en un arreglo.</p> + +<pre class="brush: js">var array = [2, 5, 9, 2]; +array.lastIndexOf(2); // 3 +array.lastIndexOf(7); // -1 +array.lastIndexOf(2, 3); // 3 +array.lastIndexOf(2, 2); // 0 +array.lastIndexOf(2, -2); // 0 +array.lastIndexOf(2, -1); // 3 +</pre> + +<h3 id="Encontrar_todas_las_apariciones_de_un_elemento">Encontrar todas las apariciones de un elemento</h3> + +<p>El siguiente ejemplo uses <code>lastIndexOf</code> encuentra todos los índices de un elemento en un arreglo dado, usando {{jsxref("Array.prototype.push", "push")}} añadiéndolos a otro arreglo como elementos encontrados.</p> + +<pre class="brush: js">var indices = []; +var array = ['a', 'b', 'a', 'c', 'a', 'd']; +var element = 'a'; +var idx = array.lastIndexOf(element); +while (idx != -1) { + indices.push(idx); + idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1); +} + +console.log(indices); +// [4, 2, 0] +</pre> + +<p>Darse cuenta que en este caso tenemos que tratar <code>idx == 0</code> de forma separada por que el elemento siempre será encontrado independiemente del valor del parámetro <code>fromIndex</code> si este es el primer elemento del arreglo. Diferente de como se trata en el método {{jsxref("Array.prototype.indexOf", "indexOf")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>lastIndexOf</code> fue añadido al estándar ECMA-262 en la 5ª edición; por tanto puede que no este presente en otras implementaciones del estándar. Puedes solucionarlo escribiendo el siguiente código al principio de tus scripts, pudiendo usar <code>lastIndexOf</code> en implementaciones que no tiene soporte de forma nativa. Este algoritmo es exactamente el especificado en ECMA-262, 5ª edición, suponiendo que {{jsxref("Object")}}, {{jsxref("TypeError")}}, {{jsxref("Number")}}, {{jsxref("Math.floor")}}, {{jsxref("Math.abs")}}, y {{jsxref("Math.min")}} tienen sus valores originales.</p> + +<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.15 +// Referencia: http://es5.github.io/#x15.4.4.15 +if (!Array.prototype.lastIndexOf) { + Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) { + 'use strict'; + + if (this === void 0 || this === null) { + throw new TypeError(); + } + + var n, k, + t = Object(this), + len = t.length >>> 0; + if (len === 0) { + return -1; + } + + n = len - 1; + if (arguments.length > 1) { + n = Number(arguments[1]); + if (n != n) { + n = 0; + } + else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) { + n = (n > 0 || -1) * Math.floor(Math.abs(n)); + } + } + + for (k = n >= 0 ? Math.min(n, len - 1) : len - Math.abs(n); k >= 0; k--) { + if (k in t && t[k] === searchElement) { + return k; + } + } + return -1; + }; +} +</pre> + +<p>De nuevo, darse cuenta que esta implementación tiene como objeto la completa compatibilidad con <code>lastIndexOf</code> en Firefox y el motor SpiderMonkey JavaScript, en particular en varios casos que son posiblemente extremos. Si pretendes usar esta funcionalidad en aplicaciones reales, es posible que puedes calcular <code>from</code> con código menos complejo si ignoras estos casos.</p> + +<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('ES5.1', '#sec-15.4.4.15', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.lastindexof', 'Array.prototype.lastIndexOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.lastIndexOf")}}</div> + +<div id="compat-mobile"></div> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<ul> + <li>Desde Firefox 47 {{geckoRelease(47)}}, el método ya no devolverá <code>-0</code>. Por ejemplo, <code>[0].lastIndexOf(0, -0)</code> siempre devolverá <code>+0</code> ({{bug(1242043)}}).</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/length/index.html b/files/es/web/javascript/reference/global_objects/array/length/index.html new file mode 100644 index 0000000000..cbbb1a46db --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/length/index.html @@ -0,0 +1,143 @@ +--- +title: Array.prototype.length +slug: Web/JavaScript/Referencia/Objetos_globales/Array/length +tags: + - Array + - JavaScript + - Propiedad + - Referencia + - Vector +translation_of: Web/JavaScript/Reference/Global_Objects/Array/length +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>length</strong></code> de un objeto que es una instancia de tipo Array establece o devuelve la cantidad de elementos en esa matriz. El valor es un entero sin signo de 32 bits que siempre es numéricamente mayor que el índice más alto en la matriz.</p> + +<div> +<p>{{EmbedInteractiveExample("pages/js/array-length.html")}}</p> +</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El valor de la propiedad <code>length</code> es un número entero con un signo positivo y un valor menor que 2 a la 32<sup>a</sup> potencia (2<sup>32</sup>).</p> + +<pre class="brush: js">var namelistA = new Array(4294967296); //2 a la 32a potencia = 4294967296 +var namelistC = new Array(-100) //signo negativo + +console.log(namelistA.length); //RangeError: longitud de la matriz inválida +console.log(namelistC.length); //RangeError: longitud de la matriz inválida + + + +var namelistB = []; +namelistB.length = Math.pow(2,32)-1; //establecer una longitud de la matriz menor que 2 a la 32ª potencia +console.log(namelistB.length); + +//4294967295</pre> + +<p>Puedes establecer la propiedad <code>length</code> para truncar una matriz unidimensional en cualquier momento. Cuando extiende una matriz cambiando su propiedad <code>length</code>, el número de elementos reales aumenta; por ejemplo, si se establece <code>length</code> en 3 cuando actualmente es 2, la matriz ahora contiene 3 elementos, lo que hace que el tercer elemento sea <code>undefined</code>.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +printEntries(arr); + +arr.length = 5; // establecer la longitud de la matriz en 5 mientras que actualmente es 3. +printEntries(arr); + +function printEntries(arr) { + var length = arr.length; + for (var i = 0; i < length; i++) { + console.log(arr[i]); + } + console.log('=== printed ==='); +} + +// 1 +// 2 +// 3 +// === impreso === +// 1 +// 2 +// 3 +// undefined +// undefined +// === impreso ===</pre> + +<p>Pero, la propiedad <code>length</code> no necesariamente indica el número de valores definidos en la matriz. Ver también <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array#Relationship_between_length_and_numerical_properties" title="Relationship between length and numerical properties">Relación entre <code>length</code> y las propiedades numéricas</a>.</p> + +<p>{{js_property_attributes(1, 0, 0)}}</p> + +<ul> + <li><code>Sobrescribir</code>: si este atributo se establece en <code>false</code>, el valor de la propiedad no se puede cambiar.</li> + <li><code>Configurable</code>: si este atributo se establece en <code>false</code>, cualquier intento de eliminar la propiedad o cambiar sus atributos (<code>Sobrescribir</code>, <code>Configurable </code>o <code>Numerable</code>) fallará.</li> + <li><code>Numerable</code>: si este atributo se establece en <code>true</code>, la propiedad se repetirá durante los bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for">for</a> o <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in">for..in</a>.</li> +</ul> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Iterating_over_an_array" name="Example:_Iterating_over_an_array">Iterando sobre una matriz</h3> + +<p>En el siguiente ejemplo, la matriz <code>numbers</code> se itera a través de la propiedad <code>length</code>. El valor en cada elemento se duplica.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; +var length = numbers.length; +for (var i = 0; i < length; i++) { + numbers[i] *= 2; +} +// numbers ahora es [2, 4, 6, 8, 10]</pre> + +<h3 id="Example:_Shortening_an_array" name="Example:_Shortening_an_array">Acortando una matriz</h3> + +<p>El siguiente ejemplo acorta los <code>numbers</code> de la matriz a una longitud de <code>3</code> si la longitud actual es mayor que <code>3</code>.</p> + +<pre class="brush: js">var numbers = [1, 2, 3, 4, 5]; + +if (numbers.length > 3) { + numbers.length = 3; +} + +console.log(numbers); // [1, 2, 3] +console.log(numbers.length); // 3</pre> + +<h2 id="Specifications" name="Specifications">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 1ra Edición.</td> + <td>Estándar</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.5.2', 'Array.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-array-instances-length', 'Array.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.length")}}</div> + +<div id="compat-mobile"> </div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/map/index.html b/files/es/web/javascript/reference/global_objects/array/map/index.html new file mode 100644 index 0000000000..8b958a4945 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/map/index.html @@ -0,0 +1,360 @@ +--- +title: Array.prototype.map() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/map +tags: + - Array + - Arreglo + - Callback + - ECMAScript5 + - Polifill + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/map +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>map()</strong></code> crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.</p> + +<pre class="brush: js">var numbers = [1, 5, 10, 15]; +var doubles = numbers.map(function(x) { + return x * 2; +}); +// doubles is now [2, 10, 20, 30] +// numbers is still [1, 5, 10, 15] + +var numbers = [1, 4, 9]; +var roots = numbers.map(function(num) { + return Math.sqrt(num); +}); +// roots is now [1, 2, 3] +// numbers is still [1, 4, 9] +</pre> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>var nuevo_array = arr</var>.map(function <var>callback(currentValue, index, array) { + // Elemento devuelto de nuevo_array +}</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que producirá un elemento del nuevo array, recibe tres argumentos:</dd> + <dd> + <dl> + <dt><code>currentValue</code></dt> + <dd>El elemento actual del array que se está procesando.</dd> + <dt><code>index</code></dt> + <dd>El índice del elemento actual dentro del array.</dd> + <dt><code>array</code></dt> + <dd>El array sobre el que se llama <code>map.</code></dd> + </dl> + </dd> + <dt><code>thisArg</code></dt> + <dd>Opcional. Valor a usar como <code>this </code>al ejecutar <code>callback</code>.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>map</code> llama a la función <code>callback</code> provista <strong>una vez por elemento</strong> de un array, en orden, y construye un nuevo array con los resultados. <code>callback</code> se invoca sólo para los índices del array que tienen valores asignados; no se invoca en los índices que han sido borrados o a los que no se ha asignado valor.</p> + +<p><code>callback</code> es llamada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array que se está recorriendo.</p> + +<p>Si se indica un parámetro <code>thisArg</code> a un <code>map</code>, se usará como valor de <code>this</code> en la función <code>callback</code>. En otro caso, se pasará {{jsxref("Global_Objects/undefined", "undefined")}} como su valor <code>this</code>. El valor de <code>this</code> observable por el <code>callback</code> se determina de acuerdo a las <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">reglas habituales para determinar el valor this visto por una función.</a></p> + +<p><code>map</code> no modifica el array original en el que es llamado (aunque <code>callback</code>, si es llamada, puede modificarlo).</p> + +<p>El rango de elementos procesado por <code>map</code> es establecido antes de la primera invocación del <code>callback</code>. Los elementos que sean agregados al array después de que la llamada a <code>map </code>comience no serán visitados por el <code>callback</code>. Si los elementos existentes del array son modificados o eliminados, su valor pasado al <code>callback</code> será el valor en el momento que el <code>map</code> lo visita; los elementos que son eliminados no son visitados.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Procesar un array de números aplicándoles la raíz cuadrada</h3> + +<p>El siguiente código itera sobre un array de números, aplicándoles la raíz cuadrada a cada uno de sus elementos, produciendo un nuevo array a partir del inicial.</p> + +<pre class="brush: js">var numeros= [1, 4, 9]; +var raices = numeros.map(Math.sqrt); +// raices tiene [1, 2, 3] +// numeros aún mantiene [1, 4, 9] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Usando map para dar un nuevo formato a los objetos de un array</h3> + +<p>El siguiente código toma un array de objetos y crea un nuevo array que contiene los nuevos objetos formateados.</p> + +<pre class="brush: js">var kvArray = [{clave:1, valor:10}, + {clave:2, valor:20}, + {clave:3, valor: 30}]; + +var reformattedArray = kvArray.map(function(obj){ + var rObj = {}; + rObj[obj.clave] = obj.valor; + return rObj; +}); + +// reformattedArray es ahora [{1:10}, {2:20}, {3:30}], + +// kvArray sigue siendo: +// [{clave:1, valor:10}, +// {clave:2, valor:20}, +// {clave:3, valor: 30}] +</pre> + +<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Mapear un array de números usando una función con un argumento</h3> + +<p>El siguiente código muestra cómo trabaja <code>map </code>cuando se utiliza una función que requiere de un argumento. El argumento será asignado automáticamente a cada elemento del arreglo conforme <code>map </code>itera el arreglo original.</p> + +<pre class="brush: js">var numeros = [1, 4, 9]; +var dobles = numeros.map(function(num) { + return num * 2; +}); + +// dobles es ahora [2, 8, 18] +// numeros sigue siendo [1, 4, 9] +</pre> + +<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Usando <code>map</code> de forma genérica</h3> + +<p>Este ejemplo muestra como usar <code>map </code>en {{jsxref("Global_Objects/String", "String")}} para obtener un arreglo de bytes en codifcación ASCII representando el valor de los caracteres:</p> + +<pre class="brush: js">var map = Array.prototype.map; +var valores = map.call('Hello World', function(char) { return char.charCodeAt(0); }); +// valores ahora tiene [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100] +</pre> + +<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Usando <code>map</code> genérico con <code>querySelectorAll</code></h3> + +<p>Este ejemplo muestra como iterar sobre una colección de objetos obtenidos por <code>querySelectorAll</code>. En este caso obtenemos todas las opciones seleccionadas en pantalla y se imprimen en la consola:</p> + +<pre class="brush: js">var elems = document.querySelectorAll('select option:checked'); +var values = [].map.call(elems, function(obj) { + return obj.value; +}); +</pre> + +<h3 id="Usando_map_para_invertir_una_cadena">Usando <code>map</code> para invertir una cadena</h3> + +<pre class="brush: js">var str = '12345'; +[].map.call(str, function(x) { + return x; +}).reverse().join(''); + +// Salida: '54321' +// Bonus: usa'===' para probar si la cadena original era un palindromo +</pre> + +<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Caso de uso engañoso</h3> + +<p><a href="http://www.wirfs-brock.com/allen/posts/166">(inspirado por este artículo)</a></p> + +<p>Es común utilizar el callback con un argumento (el elemento siendo pasado). Ciertas funciones son también usadas comunmente con un argumento, aún cuando toman argumentos adicionales opcionales. Estos hábitos pueden llevar a comportamientos confusos.</p> + +<pre class="brush: js">// Considera: +['1', '2', '3'].map(parseInt); +// Mientras uno esperaría [1, 2, 3] +// en realidad se obtiene [1, NaN, NaN] + +// parseInt se usa comúnmente con un argumento, pero toma dos. +// El primero es una expresión y el segundo el radix. +// a la función callback, Array.prototype.map pasa 3 argumentos: +// el elemento, el índice y el array. +// El tercer argumento es ignorado por parseInt, pero no el segundo, +// de ahí la posible confusión. Véase el artículo del blog para más detalles + +function returnInt(element) { + return parseInt(element, 10); +} + +['1', '2', '3'].map(returnInt); // [1, 2, 3] +// El resultado es un arreglo de números (como se esperaba) + +// Un modo más simple de lograr lo de arriba, mientras de evita el "gotcha": +['1', '2', '3'].map(Number); // [1, 2, 3] +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>map</code> fue agregado al estandar ECMA-262 en la 5th edición; por lo tanto podría no estar presente en todas la implementaciones del estándar. Puedes sobrepasar esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>map</code> en implementaciones que no lo soportan de forma nativa. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5th edición, asumiendo {{jsxref("Global_Objects/Object", "Object")}}, {{jsxref("Global_Objects/TypeError", "TypeError")}}, y {{jsxref("Global_Objects/Array", "Array")}} tienen sus valores originales y que el <code>callback.call</code> evalua el valor original de <code>{{jsxref("Function.prototype.call")}}</code>.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 5, 15.4.4.19 +// Reference: http://es5.github.io/#x15.4.4.19 +if (!Array.prototype.map) { + + Array.prototype.map = function(callback, thisArg) { + + var T, A, k; + + if (this == null) { + throw new TypeError(' this is null or not defined'); + } + + // 1. Let O be the result of calling ToObject passing the |this| + // value as the argument. + var O = Object(this); + + // 2. Let lenValue be the result of calling the Get internal + // method of O with the argument "length". + // 3. Let len be ToUint32(lenValue). + var len = O.length >>> 0; + + // 4. If IsCallable(callback) is false, throw a TypeError exception. + // See: http://es5.github.com/#x9.11 + if (typeof callback !== 'function') { + throw new TypeError(callback + ' is not a function'); + } + + // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 1) { + T = thisArg; + } + + // 6. Let A be a new array created as if by the expression new Array(len) + // where Array is the standard built-in constructor with that name and + // len is the value of len. + A = new Array(len); + + // 7. Let k be 0 + k = 0; + + // 8. Repeat, while k < len + while (k < len) { + + var kValue, mappedValue; + + // a. Let Pk be ToString(k). + // This is implicit for LHS operands of the in operator + // b. Let kPresent be the result of calling the HasProperty internal + // method of O with argument Pk. + // This step can be combined with c + // c. If kPresent is true, then + if (k in O) { + + // i. Let kValue be the result of calling the Get internal + // method of O with argument Pk. + kValue = O[k]; + + // ii. Let mappedValue be the result of calling the Call internal + // method of callback with T as the this value and argument + // list containing kValue, k, and O. + mappedValue = callback.call(T, kValue, k, O); + + // iii. Call the DefineOwnProperty internal method of A with arguments + // Pk, Property Descriptor + // { Value: mappedValue, + // Writable: true, + // Enumerable: true, + // Configurable: true }, + // and false. + + // In browsers that support Object.defineProperty, use the following: + // Object.defineProperty(A, k, { + // value: mappedValue, + // writable: true, + // enumerable: true, + // configurable: true + // }); + + // For best browser support, use the following: + A[k] = mappedValue; + } + // d. Increase k by 1. + k++; + } + + // 9. return A + return A; + }; +} +</pre> + +<h2 id="Specifications" name="Specifications">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('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</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>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Edge</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>{{CompatGeckoMobile("1.8")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map")}} object</li> + <li>{{jsxref("Array.from()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/of/index.html b/files/es/web/javascript/reference/global_objects/array/of/index.html new file mode 100644 index 0000000000..f57c7e2bc1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/of/index.html @@ -0,0 +1,97 @@ +--- +title: Array.of() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/of +tags: + - Array + - ECMAScript 2015 + - JavaScript + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Array/of +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Array.of()</strong></code> crea una nueva instancia <code>Array</code> con un número variable de elementos pasados como argumento, independientemente del número o del tipo.</p> + +<p>La diferencia entre <code><strong>Array.of()</strong></code> y el constructor <code><strong>Array</strong></code> reside en como maneja los parámetros de tipo entero: <code><strong>Array.of(7)</strong></code> crea un array con un solo elemento, <code>7</code>, mientras que <code><strong>Array(7)</strong></code> crea un array vacío con una propiedad <code>length</code> de 7 (<strong>Nota:</strong> esto implica un array de 7 ranuras vacías, no ranuras con valores <code>undefined</code>).</p> + +<pre class="brush: js">Array.of(7); // [7] +Array.of(1, 2, 3); // [1, 2, 3] + +Array(7); // [ , , , , , , ] +Array(1, 2, 3); // [1, 2, 3]</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Array.of(<var>elemento0</var>[, <var>elemento1</var>[, ...[, <var>elementoN</var>]]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>elemento<em>N</em></code></dt> + <dd>Valores con los que se creará el Array en su respectivo indice.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + </dt> + <dd>Una nueva instancia de {{jsxref("Array")}}.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta función es parte del estándar ECMAScript 2015. Para obtener más información, consulte <a href="https://gist.github.com/rwaldron/1074126"><code>Array.of</code> y <code>Array.from</code> proposal</a> y <a href="https://gist.github.com/rwaldron/3186576"><code>Array.of</code> polyfill</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">Array.of(1); // [1] +Array.of(1, 2, 3); // [1, 2, 3] +Array.of(undefined); // [undefined] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Escribiendo el siguiente código antes que cualquier otro, podemos emular la funcionalidad de <code>Array.of()</code> si es que ésta no está disponible de forma nativa.</p> + +<pre class="brush: js">if (!Array.of) { + Array.of = function() { + return Array.prototype.slice.call(arguments); + }; +} +</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-array.of', 'Array.of')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.of', 'Array.of')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.of")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.from()")}}</li> + <li>{{jsxref("TypedArray.of()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/pop/index.html b/files/es/web/javascript/reference/global_objects/array/pop/index.html new file mode 100644 index 0000000000..acc6d06885 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/pop/index.html @@ -0,0 +1,94 @@ +--- +title: Array.prototype.pop() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/pop +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/pop +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>pop()</strong></code> elimina el <strong>último</strong> elemento de un array y lo devuelve. Este método cambia la longitud del array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-pop.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.pop()</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El elemento que ha sido eliminado del array; {{jsxref("undefined")}} si el array está vacío.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>pop</code> elimina el último elemento de un array y devuelve su valor al método que lo llamó.</p> + +<p><code>pop</code> es intencionadamente genérico; este método puede ser {{jsxref("Function.call", "called", "", 1)}} o {{jsxref("Function.apply", "applied", "", 1)}} en objectos similares a un array. En objetos que no contengan una propiedad <code>length</code>, que refleje su forma en una serie de propiedades numéricas consecutivas en base cero, puede no comportarse de manera significativa.</p> + +<p>Si se llama a <code>pop()</code> en un array vacío, devuelve {{jsxref("undefined")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Eliminando_el_último_elemento_de_un_array">Eliminando el último elemento de un array</h3> + +<p>El siguiente código crea el array <code>myFish</code>, que contiene cuatro elementos, a continuación, elimina su último elemento.</p> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; + +var popped = myFish.pop(); + +console.log(myFish); // ['angel', 'clown', 'mandarin' ] + +console.log(popped); // 'sturgeon'</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('ES3')}}</td> + <td>Estándar</td> + <td>Definición inicial. Implementada en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.pop")}}</p> +</div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/push/index.html b/files/es/web/javascript/reference/global_objects/array/push/index.html new file mode 100644 index 0000000000..fc00ce7e7a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/push/index.html @@ -0,0 +1,140 @@ +--- +title: Array.prototype.push() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/push +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/push +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>push()</strong></code> añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-push.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.push(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>Los elementos a añadir al final del array.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>La nueva propiedad {{jsxref("Array.length", "length")}} del objeto sobre el cual se efectuó la llamada.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El método <code>push</code> es muy práctico para añadir valores a un array.</p> + +<p><code>push</code> es genérico intencionadamente. Este método puede ser {{jsxref("Function.call", "call()")}} o {{jsxref("Function.apply", "apply()")}} a objetos que representen arrays. El método <code>push</code> depende de la propiedad <code>length</code> para decidir donde empezar a insertar los valores dados. Si el valor de la propiedad <code>length</code> no puede ser convertido en numérico, el índice 0 es usado. Esto permite la posibilidad de que la propiedad <code>length</code> sea inexistente, y en este caso <code>length</code> será creado.</p> + +<p>Los únicos objetos nativos que se asemejen al array son {{jsxref("Global_Objects/String", "strings", "", 1)}} objetos, aunque estos no se puedan usar en la aplicación de este método ya que son inmutables.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Ejemplo: Añadiendo elementos a un array" name="Ejemplo: Añadiendo elementos a un array">Ejemplo: Añadiendo elementos a un array</h3> + +<p>El siguiente código crea el array <code>sports</code> que contiene dos elementos, luego añade 2 elementos más. Tras ejecutar el código, <code>sports</code> contiene 4 elementos: "soccer", "baseball", "football" and "swimming".</p> + +<pre class="brush: js">var sports = ['soccer', 'baseball']; +var total = sports.push('football', 'swimming'); + +console.log(sports); // ['soccer', 'baseball', 'football', 'swimming'] +console.log(total); // 4 +</pre> + +<h3 id="Uniendo_dos_arrays">Uniendo dos arrays</h3> + +<p>This example uses {{jsxref("Function.apply", "apply()")}} to push all elements from a second array.</p> + +<p>Do <em>not</em> use this method if the second array (<code>moreVegs</code> in the example) is very large, because the maximum number of parameters that one function can take is limited in practice. See {{jsxref("Function.apply", "apply()")}} for more details.</p> + +<pre class="brush: js">var vegetables = ['parsnip', 'potato']; +var moreVegs = ['celery', 'beetroot']; + +// Merge the second array into the first one +// Equivalent to vegetables.push('celery', 'beetroot'); +Array.prototype.push.apply(vegetables, moreVegs); + +console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot'] +</pre> + +<h3 id="Using_an_object_in_an_array-like_fashion">Using an object in an array-like fashion</h3> + +<p>Como se menciona anteriormente, <code>push</code> es intencionadamente genérico, y podemos usar eso a nuestro favor. <code>Array.prototype.push</code> puede funcionar bien con un objeto, como muestra este ejemplo. Ten en cuenta que no se crea un array para almacenar una colección de objetos. En su lugar, almacenamos la colección en el propio objeto y se utiliza el método <code>call</code> sobre <code>Array.prototype.push</code> para hacer creer al método que estamos tratando a un array, y simplemente funciona, gracias a la forma en que JavaScript nos permite establecer el contexto de la ejecución.</p> + +<pre class="brush: js">var obj = { + length: 0, + + addElem: function addElem(elem) { + // obj.length is automatically incremented + // every time an element is added. + [].push.call(this, elem); + } +}; + +// Let's add some empty objects just to illustrate. +obj.addElem({}); +obj.addElem({}); +console.log(obj.length); +// → 2 +</pre> + +<p>Tenga en cuenta que aunque <code>obj</code> no es un array, el método <code>push</code> ha incrementado satisfactoriamente la propiedad <code>length</code> de <code>obj</code> tal y como si se tratara de un array.</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.7', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.push', 'Array.prototype.push')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.push")}}</p> +</div> + +<h2 id="Ver también" name="Ver también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/reduce/index.html b/files/es/web/javascript/reference/global_objects/array/reduce/index.html new file mode 100644 index 0000000000..68d7a9cb2f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/reduce/index.html @@ -0,0 +1,215 @@ +--- +title: Array.prototype.reduce() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/reduce +tags: + - Array + - ECMAScript 5 + - JavaScript + - Prototype + - Reduce + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/Reduce +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>reduce()</strong></code> ejecuta una función <strong>reductora</strong> sobre cada elemento de un array, devolviendo como resultado un único valor.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-reduce.html")}}</div> + +<p>La función <strong>reductora</strong> recibe cuatro argumentos:</p> + +<ol> + <li>Acumulador (<code><em>acc</em></code>)</li> + <li>Valor Actual (<code><em>cur</em></code>)</li> + <li>Índice Actual (<em><code>idx</code></em>)</li> + <li>Array (<em><code>src</code></em>)</li> +</ol> + +<p>El valor devuelto de la función <strong>reductora</strong> se asigna al acumulador, cuyo valor se recuerda en cada iteración de la matriz y, en última instancia, se convierte en el valor final, único y resultante.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr.reduce(callback(acumulador, valorActual[, índice[, array]])[, valorInicial])</var></pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función a ejecutar sobre cada elemento del array (excepto para el primero, si no se proporciona <code>valorInicial</code>), que recibe cuatro parámetros: + <dl> + <dt><code>acumulador</code></dt> + <dd>El acumulador acumula el valor devuelto por la función callback. Es el valor acumulado devuelto en la última invocación de callback, o el <code>valorInicial</code>, si se proveyó. (Ver a continuación).</dd> + <dt><code>valorActual</code></dt> + <dd>El elemento actual que está siendo procesado en el array.</dd> + <dt><code>índice</code> {{optional_inline}}</dt> + <dd>El índice del elemento actual que está siendo procesado en el array. Empieza desde el índice 0 si se provee <code>valorInicial</code>. En caso contrario, comienza desde el índice 1.</dd> + <dt><code>array</code> {{optional_inline}}</dt> + <dd>El array sobre el cual se llamó el método <code>reduce()</code>.</dd> + </dl> + </dd> + <dt><code>valorInicial</code> {{optional_inline}}</dt> + <dd>Un valor a usar como primer argumento en la primera llamada de la función <em><code>callback</code></em>. Si no se proporciona el <em><code>valorInicial</code></em>, el primer elemento del array será utilizado y saltado. Llamando a <code>reduce()</code> sobre un array vacío sin un <em><code>valorInicial</code></em> lanzará un {{jsxref("TypeError")}}.</dd> +</dl> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>El método <code>reduce()</code> ejecuta <code>callback</code> una vez por cada elemento presente en el array, excluyendo los huecos del mismo, recibe cuatro argumentos:</p> + +<ul> + <li><code>valorAnterior</code></li> + <li><code>valorActual</code></li> + <li><code>indiceActual</code></li> + <li><code>array</code></li> +</ul> + +<p>La primera vez que se llama la función, <code>valorAnterior</code> y <code>valorActual</code> pueden tener uno de dos valores. Si se proveyó un <code>valorInicial</code> al llamar a <code>reduce</code>, entonces <code>valorAnterior</code> será igual al <code>valorInicial</code> y <code>valorActual</code> será igual al primer elemento del array. Si no se proveyó un <code>valorInicial</code>, entonces <code>valorAnterior</code> será igual al primer valor en el <code>array</code> y <code>valorActual</code> será el segundo.</p> + +<p>Si el <code>array</code> está vacío y no se proveyó un <code>valorInicial</code> lanzará un {{jsxref("Global_Objects/TypeError", "TypeError")}}. Si el <code>array</code> tiene un sólo elemento (sin importar la posición) y no se proveyó un <code>valorInicial</code>, o si se proveyó un <code>valorInicial</code> pero el arreglo está vacío, se retornará ese único valor sin llamar a la <code>función</code>.</p> + +<p>Suponga que ocurre el siguiente uso de <code>reduce</code>:</p> + +<pre class="brush: js">[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){ + return valorAnterior + valorActual; +}); + +// Primera llamada +valorAnterior = 0, valorActual = 1, indice = 1 + +// Segunda llamada +valorAnterior = 1, valorActual = 2, indice = 2 + +// Tercera llamada +valorAnterior = 3, valorActual = 3, indice = 3 + +// Cuarta llamada +valorAnterior = 6, valorActual = 4, indice = 4 + +// el <code>array</code> sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4] + +// Valor Devuelto: 10 +</pre> + +<p>Y si proporcionas un <code>valorInicial</code>, el resultado sería como este:</p> + +<pre class="brush: js">[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){ + return valorAnterior + valorActual; +}, 10); + +// Primera llamada +valorAnterior = 10, valorActual = 0, indice = 0 + +// Segunda llamada +valorAnterior = 10, valorActual = 1, indice = 1 + +// Tercera llamada +valorAnterior = 11, valorActual = 2, indice = 2 + +// Cuarta llamada +valorAnterior = 13, valorActual = 3, indice = 3 + +// Quinta llamada +valorAnterior = 16, valorActual = 4, indice = 4 + +// el <code>array</code> sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4] + +// Valor Devuelto: 20 +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<div class="note"> +<p><strong>Polyfill</strong> se refiere a unas líneas de código o un plugin que permite "tener" (en realidad se simulan de alguna otra manera) las nuevas funcionalidades de HTML5 en aquellos navegadores que nativamente no lo soportan. Consigue que, en adelante, el código sea transparente para el programador, como si el navegador soportase la funcionalidad nativamente.</p> +</div> + +<p><code>reduce</code> es una extensión de JavaScript al estándar ECMA-262; como tal puede que no esté presente en otras implementaciones del estándar. Puedes trabajar con ésto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>reduce</code> en implementaciones de ECMA-262 que no lo implementan de modo nativo. Este algoritmo es exactamente el mismo usando en Firefox y SpiderMonkey.</p> + +<pre class="brush: js">if (!Array.prototype.reduce) +{ + Array.prototype.reduce = function(fun /*, inicial*/) + { + var longitud = this.length; + if (typeof fun != "function") + throw new TypeError(); + + // no se devuelve ningún valor si no hay valor inicial y el array está vacío + if (longitud == 0 && arguments.length == 1) + throw new TypeError(); + + var indice = 0; + if (arguments.length >= 2) + { + var rv = arguments[1]; + } + else + { + do + { + if (indice in this) + { + rv = this[indice++]; + break; + } + + // si el array no contiene valores, no existe valor inicial a devolver + if (++indice >= longitud) + throw new TypeError(); + } + while (true); + } + + for (; indice < longitud; indice++) + { + if (indice in this) + rv = fun.call(null, rv, this[indice], indice, this); + } + + return rv; + }; +} +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Resumir_todos_los_valores_de_un_array" name="Ejemplo:_Resumir_todos_los_valores_de_un_array">Ejemplo: Sumar todos los valores de un <code>array</code></h3> + +<pre class="brush: js">var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; }); +// total == 6 +</pre> + +<h3 id="Ejemplo_Integrar_un_array_a_partir_de_varios_arrays" name="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays">Ejemplo: Integrar un <code>array</code> a partir de varios <code>arrays</code></h3> + +<pre class="brush: js">var integrado = [[0,1], [2,3], [4,5]].reduce(function(a,b) { + return a.concat(b); +}); +// integrado es [0, 1, 2, 3, 4, 5] +</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-array.prototype.reduce', 'Array.prototype.reduce()')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.reduce")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduceRight()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/reduceright/index.html b/files/es/web/javascript/reference/global_objects/array/reduceright/index.html new file mode 100644 index 0000000000..cff59fddf4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/reduceright/index.html @@ -0,0 +1,166 @@ +--- +title: Array.prototype.reduceRight() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight +tags: + - Array + - ECMAScript5 + - JavaScript + - JavaScript 1.8 + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight +--- +<div>{{JSRef("Objetos_globales", "Array")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Aplica una función simultáneamente contra un acumulador y cada elemento de un array (de derecha a izquierda) para reducirlo a un único valor.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval"><i>array</i>.reduceRight( +<i>funcion</i>[, +<i>valorInicial</i>]) +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función a ejecutar para cada valor del array.</dd> + <dt><code>initialValue</code></dt> + <dd>Objeto a usar como primer argumento en la primera llamada de la <code>funcion</code>.</dd> +</dl> + +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> + +<p><code>reduceRight</code> ejecuta la <code>funcion</code> una vez para cada elemento presente en el array, excluyendo los huecos del mismo, recibiendo cuatro argumentos: el valor inicial (o valor de la llamada previa de <code>funcion</code>), el valor del elemento actual, el índice actual y el array sobre el que ocurre la iteración.</p> + +<p>La llamada a la <code>funcion</code> de reduceRight sería similar a esto:</p> + +<pre class="brush: js">.reduceRight(function(valorPrevio, valorActual, indice, array){ + // ... +}) +</pre> + +<p>La primera vez que se llama a la función, el <code>valorPrevio</code> y el <code>valorActual</code> puede ser uno de los dos valores. Si se incluye un <code>valorInicial</code> en la llamada a <code>reduceRight</code>, entonces el <code>valorPrevio</code> será igual al <code>valorInicial</code> y el <code>valorActual</code> será igual al último valor del array. Si no se incluye ningún <code>valorInicial</code>, entonces el <code>valorPrevio</code> será igual al último valor del array y el <code>valorActual</code> será igual al penúltimo valor.</p> + +<p>Algún ejemplo de la ejecución de la función paso a paso sería similar a esto:</p> + +<pre class="brush: js">[0,1,2,3,4].reduceRight(function(valorPrevio, valorActual, indice, array){ + return valorPrevio + valorActual; +}); + +// First call +valorPrevio = 4, valorActual = 3, indice = 3 + +// Second call +valorPrevio = 7, valorActual = 2, indice = 2 + +// Third call +valorPrevio = 9, valorActual = 1, indice = 1 + +// Fourth call +valorPrevio = 10, valorActual = 0, indice = 0 + +// el array sobre el que se llama a reduceRight siempre es el objeto [0,1,2,3,4] + +// Valor Devuelto: 10 +</pre> + +<p>Y si proporcionas un <code>valorInicial</code>, el resultado sería como este:</p> + +<pre class="brush: js">[0,1,2,3,4].reduceRight(function(valorPrevio, valorActual, indice, array){ + return valorPrevio + currentValue; +}, 10); + +// Primera llamada +valorPrevio = 10, valorActual = 4, indice = 4 + +// Segunda llamada +valorPrevio = 14, valorActual = 3, indice = 3 + +// Tercera llamada +valorPrevio = 17, valorActual = 2, indice = 2 + +// Cuarta llamada +valorPrevio = 19, valorActual = 1, indice = 1 + +// Quinta llamada +valorPrevio = 20, valorActual = 0, indice = 0 + +// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4] + +// Valor Devuelto: 20 +</pre> + +<h2 id="Compatibilidad" name="Compatibilidad">Compatibilidad</h2> + +<p><code>reduceRight</code> es una extensión de JavaScript al estándar ECMA-262; como tal puede que no esté presente en otras implementaciones del estándar. Puedes trabajar con ésto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>reduceRight</code> en implementaciones de ECMA-262 que no lo implementan de modo nativo. Este algoritmo es exactamente el mismo usando en Firefox y SpiderMonkey.</p> + +<pre class="brush: js">if (!Array.prototype.reduceRight) +{ + Array.prototype.reduceRight = function(fun /*, inicial*/) + { + var longitud = this.length; + if (typeof fun != "function") + throw new TypeError(); + + // no se devuelve ningún valor si no hay valor inicial y el array está vacío + if (longitud == 0 && arguments.length == 1) + throw new TypeError(); + + var indice = longitud - 1; + if (arguments.length >= 2) + { + var rv = arguments[1]; + } + else + { + do + { + if (indice in this) + { + rv = this[indice--]; + break; + } + + // si el array no contiene valores, no existe valor incial a devolver + if (--indice < 0) + throw new TypeError(); + } + while (true); + } + + for (; indice >= 0; indice--) + { + if (indice in this) + rv = fun.call(null, rv, this[indice], indice, this); + } + + return rv; + }; +} +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplos:_Resumir_todos_los_valores_de_un_array" name="Ejemplos:_Resumir_todos_los_valores_de_un_array">Ejemplos: Resumir todos los valores de un array</h3> + +<pre class="brush: js">var total = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; }); +// total == 6 +</pre> + +<h3 id="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays" name="Ejemplo:_Integrar_un_array_a_partir_de_varios_arrays">Ejemplo: Integrar un array a partir de varios arrays</h3> + +<pre class="brush: js">var integrado = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { + return a.concat(b); +}, []); +// integrado es [4, 5, 2, 3, 0, 1] +</pre> + +<h2 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h2> + +<ul> + <li>{{jsxref("Array.prototype.reduce()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/reverse/index.html b/files/es/web/javascript/reference/global_objects/array/reverse/index.html new file mode 100644 index 0000000000..7399f8dcda --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/reverse/index.html @@ -0,0 +1,88 @@ +--- +title: Array.prototype.reverse() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/reverse +tags: + - Array + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/reverse +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>reverse()</strong></code> invierte el orden de los elementos de un array <em><a href="https://en.wikipedia.org/wiki/In-place_algorithm">in place</a></em>. El primer elemento pasa a ser el último y el último pasa a ser el primero.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-reverse.html")}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>a</var>.reverse()</pre> + +<h3 id="Valor devuelto" name="Valor devuelto">Valor devuelto</h3> + +<p>El array invertido.</p> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>El método <code>reverse</code> cruza los elementos del objeto matriz invocados en su lugar, mutando la matriz, y retornando una referencia a la misma.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:Colocar al revés los elementos de un array" name="Ejemplo:Colocar al revés los elementos de un array">Colocar al revés los elementos de un array</h3> + +<p>El siguiente ejemplo crea un array <code>a</code> que contiene tres elementos y luego lo invierte.<br> + La llamada a <code>reverse()</code> devuelve una referencia al array <code>a</code> invertido.</p> + +<pre class="brush: js">const a = [1, 2, 3]; + +console.log(a); // [1, 2, 3] + +a.reverse(); + +console.log(a); // [3, 2, 1] + +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad en navegadores" name="Compatibilidad en navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("javascript.builtins.Array.reverse")}}</p> + +<h2 id="Ver también" name="Ver también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("TypedArray.prototype.reverse()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/shift/index.html b/files/es/web/javascript/reference/global_objects/array/shift/index.html new file mode 100644 index 0000000000..7391f6c325 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/shift/index.html @@ -0,0 +1,124 @@ +--- +title: Array.prototype.shift() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/shift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>shift()</strong></code> elimina el <strong>primer</strong> elemento del array y lo retorna. Este método modifica la longitud del array.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.shift()</code></pre> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>shift</code> elimina el elemento en el índice cero y desplaza los valores consecutivos hacia abajo, devolviendo el valor eliminado. Si la propiedad {{jsxref("Array.length", "length")}} es 0, devuelve {{jsxref("undefined")}}.</p> + +<p><code>shift</code> es genérico; este método puede utilizarse con {{jsxref("Function.call", "call", "", 1)}} o {{jsxref("Function.apply", "apply", "", 1)}} a objetos simliares a arrays. Los objetos que no tengan una propiedad <code>length</code> que refleje el último elemento de una serie consecutiva de propiedades numéricas con índice base cero pueden no comportarse de manera significativa.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Eliminando_un_elemento_de_un_array">Eliminando un elemento de un array</h3> + +<p>El siguiente código muestra el contenido del array <code>miPescado</code> antes y después de eliminar el primer elemento. También muestra el elemento eliminado:</p> + +<pre class="brush: js notranslate">var miPescado = ['ángel', 'payaso', 'mandarín', 'cirujano']; + +console.log('miPescado antes: ' + miPescado); +// "miPescado antes: ángel,payaso,mandarín,cirujano" + +var eliminado = miPescado.shift(); + +console.log('miPescado después: ' + miPescado); +// "miPescado after: payaso,mandarín,cirujano" + +console.log('Elemento eliminado: ' + eliminado); +// "Elemento eliminado: ángel"</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en Javascript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_compatibles">Navegadores compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<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("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.unshift()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/slice/index.html b/files/es/web/javascript/reference/global_objects/array/slice/index.html new file mode 100644 index 0000000000..e3ddd7e8a5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/slice/index.html @@ -0,0 +1,287 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/slice +tags: + - Arreglo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p><code><font face="Open Sans, Arial, sans-serif">El método </font><strong>slice()</strong></code> devuelve una copia de una parte del array dentro de un nuevo array empezando por <em>inicio </em>hasta <em>fin</em> (<em>fin </em>no incluido). El array original no se modificará.</p> + +<p>El código fuente de esta demostración interactiva está alojado en un repositorio Github. Si desea contribuir con ella, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un <em>"pull request"</em>.</p> + +<h2 id="Sintaxis">Sintaxis </h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>inicio </var>[, <var>fin</var>]])</code></pre> + +<h2 id="Parámetros">Parámetros</h2> + +<dl> + <dt><code>inicio</code></dt> + <dd>Índice donde empieza la extracción. El primer elemento corresponde con el índice 0.</dd> + <dd>Si el índice especificado es negativo, indica un desplazamiento desde el final del array.<code> slice(-2)</code>extrae los dos últimos elementos del array</dd> + <dd>Si <code>inicio</code> es omitido el valor por defecto es <code>0</code>.</dd> + <dd>Si <code>inicio</code> es mayor a la longitud del array, se devuelve un array vacío.</dd> + <dt><code>fin</code></dt> + <dd>Índice que marca el final de la extracción. <code>slice</code> extrae hasta, pero sin incluir el final.</dd> + <dd><code>slice(1,4)</code> extrae desde el segundo elemento hasta el cuarto (los elementos con índices 1, 2, y 3).</dd> + <dd>Con un índice negativo, <code>fin</code> indica un desplazamiento desde el final de la secuencia. <code>slice(2,-1)</code> extrae desde el tercer hasta el penúltimo elemento en la secuencia.</dd> + <dd>Si <code>fin</code> es omitido, slice extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd> + <dd>Si <code>fin</code> es mayor a la longitud del array, <code>slice</code> extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h3 id="Valor_de_retorno"><code>Valor de retorno</code></h3> + +<p>Un nuevo array con los valores extraídos.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>slice</code> <strong>no modifica</strong> el array original. Devuelve una copia plana (<em>shallow copy</em>) de los elementos especificados del array original. Los elementos del array original son copiados en el array devuelto de la siguiente manera:</p> + +<ul> + <li>Para referencias de objeto ( <strong>no</strong> el objeto en sí ), <code>slice copia la referencia dentro del nuevo array</code>. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.</li> + <li>Para strings, numbers y boolean (<strong>no</strong> objetos {{jsxref("Global_Objects/String", "String")}} y {{jsxref("Global_Objects/Number", "Number")}}), <code>slice</code> copia los valores en el nuevo array. Los cambios a los string, numbers y boolean en un array no afectan a los del otro array.</li> +</ul> + +<p>Si un nuevo elemento es agregado a cualquiera de los arrays, el otro array no es afectado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Devolver_una_porción_de_un_array_existente">Ejemplo: Devolver una porción de un array existente</h3> + +<pre class="brush: js">var nombres = ['Rita', 'Pedro', 'Miguel', 'Ana', 'Vanesa']; +var masculinos = nombres.slice(1, 3); + +// masculinos contiene ['Pedro','Miguel'] +</pre> + +<h3 id="Ejemplo_Utilizando_slice">Ejemplo: Utilizando slice</h3> + +<p><span style="font-size: 14px; line-height: 1.5;">Presta especial atención a:</span></p> + +<ul> + <li>Valores de tipos básicos, como string o number, son copiados al nuevo array. Cambiar estos valores en la copia no afecta al array original.</li> + <li>Las referencias también se copian. Mismas referencias acceden al mismo objeto destino. Cambios en el objeto destino son compartidos por todos sus accesos.</li> +</ul> + +<p>En el siguiente ejemplo, <code>slice</code> crea un nuevo array, <code>nuevoCoche</code>, de <code>myCoche</code>. Los dos incluyen una referncia al objecto <code>miHonda</code> se cambia a púrpura, ambas matrices reflejan el cambio.</p> + +<pre class="brush: js"><code>var miHonda = { color: 'red', ruedas: 4, motor: { cilindros: 4, cantidad: 2.2 } }; +var miCoche = [miHonda, 2, 'Buen estado', 'comprado 1997']; +var nuevoCoche = miCoche.slice(0, 2);</code> + +// Muestra los valores de myCar, newCar y el color de myHonda.<code> +console.log('miCoche = ' + JSON.stringify(miCoche)); +console.log('nuevoCoche = ' + JSON.stringify(nuevoCoche)); +console.log('miCoche[0].color = ' + miCoche[0].color); +console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</code> + +// Cambia el color de miHonda. +miHonda.color = 'azul'; +console.log('El nuevo color de mi Honda es ' + miHonda.color); + +// Muestra el color de myHonda referenciado desde ambos arrays. <code> +console.log('miCoche[0].color = ' + miCoche[0].color);</code> + +console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</pre> + +<p>Este script escribe:</p> + +<pre class="brush: js"><code>miCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2, + 'buen estado', 'comprado 1997'] +nuevoCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2] +miCoche[0].color = rojo +nuevoCoche[0].color = rojo +El nuevo color de miHonda es azul +miCoche[0].color = azul +nuevoCoche[0].color = azul</code></pre> + +<h2 id="Objetos_array-like">Objetos array-like</h2> + +<div class="note"> +<p>Se dice que un objeto es <strong>array-like</strong> ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son <strong>números</strong> y en particular tiene una propiedad llamada <strong>length</strong>. Este hecho hace suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo. </p> +</div> + +<p>El método <code>slice</code> puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el método al objeto. El {{jsxref("Functions_and_function_scope/arguments", "arguments")}} dentro de una función es un ejemplo de un objeto parecido a arrays.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>El enlazado puede realizarse con la función <code>.call</code> de {{jsxref("Function.prototype")}} y puede ser abreviado también usando <code>[].slice.call(arguments)</code> en lugar de <code>Array.prototype.slice.call</code>. En cualquier caso, puede ser simplificado usando {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments, 0); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Coordinación_del_comportamiento_entre_navegadores">Coordinación del comportamiento entre navegadores</h2> + +<p> </p> + +<p>La especificación permite a los objetos del host ( entre ellos los objetos del DOM ) ser dependientes de la implementación. Esta <strong>NO</strong> obligatoriedad, origina diferencias en el comportamiento entre aquellos comprometidos con los estándares, como Mozilla, y los que no. En lo que concierne a <code>Array.prototype.slice</code> , por lo tanto, existen importantes incompatibilidades en IE < 9 . Versiones de IE a partir de la 9 permiten un comportamiento compatible más fiable. Se puede recurrir al “<em>shimming</em>” para alcanzar la compatibilidad en otros casos. Mientras otros navegadores modernos continúan mejorando para soportar esta habilidad, en la forma en que actualmente lo hacen Mozilla, Chrome, Safari, Opera e IE, los desarrolladores de código preocupados por el soporte DOM que confíen en este <em>shim</em> no deben dejarse engañar por la semántica, deben confiar de forma segura en ella para proporcionar el comportamiento estándar que aparentemente ahora es la norma.</p> + +<p>El <em>shim</em> también soluciona que IE pueda tratar con el caso de que el segundo argumento de <code>slice()</code> pueda ser un valor {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}} explícito. Esto era un problema en versiones anteriores de IE, pero todos los navegadores modernos, incluído IE >= 9, lo hacen actualmente.</p> + +<pre class="brush: js">/** + * <em>Shim</em> para "solucionar" la falta de soporte de IE (IE < 9) para aplicar slice + * sobre objetos del host, tal como NamedNodeMap, NodeList, y HTMLCollection + * (técnicamente, al ser los objetos del host dependientes de la implementación, + * al menos anteriormente a ES2015, IE no tenía la necesidad de trabajar de este modo). + * También funciona sobre strings, solucionando que IE < 9 admita un undefined explícito + * como segundo argumento (igual que en Firefox), y previniendo errores cuando se llama + * sobre otros objetos del DOM. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Fallará al usarse con elementos DOM en IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // Funcionará con arrays genuinos, objetos array-like, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // A IE < 9 no le gustan los undefined como argumento end. + end = (typeof end !== 'undefined') ? end : this.length; + + // Con objetos Array nativos, podemos usar la función slice + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // Con objetos array-like debemos manejarlo por nuestra cuenta. + var i, cloned = [], + size, len = this.length; + + // Maneja valores negativos para el argumento "inicio" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Maneja valores negativos para el argumento "fin" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Tamaño esperado para el slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</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">Observaciones</th> + </tr> + <tr> + <td>ECMAScript 3ª edición</td> + <td>Estandar</td> + <td>Definición inicial Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>La tabla de compatibilidad en esta página esta generada desde datos estructurados. Si desea contribuir con los datos, por favor <em>"checkout" </em><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a> y envíenos un <em>"pull request"</em>.</p> + +<div>{{CompatibilityTable}}</div> + +<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>Soporte básico</td> + <td>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome para 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="Ver_también">Ver también </h2> + +<ul> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/some/index.html b/files/es/web/javascript/reference/global_objects/array/some/index.html new file mode 100644 index 0000000000..d04b57b025 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/some/index.html @@ -0,0 +1,204 @@ +--- +title: Array.prototype.some() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/some +tags: + - Array + - ECMAScript5 + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/some +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>some()</strong></code> comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.</p> + +<div class="note"> +<p><strong>Nota</strong>: Este método devuelve <code>false</code> para cualquier condición puesta en un array vacío.</p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/array-some.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.some(<var>callback(element[, index[, array]])</var>[, <var>thisArg</var>])</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función que verifica cada elemento, toma tres argumentos: + <dl> + <dt><code>element</code></dt> + <dd>El elemento actual siendo procesado en el array.</dd> + <dt><code>index</code> {{Optional_inline}}</dt> + <dd>El índice del elemento del array que se está procesando.</dd> + <dt><code>array</code> {{Optional_inline}}</dt> + <dd>El array sobre el que ha sido llamada la función <code>some()</code>.</dd> + </dl> + </dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Valor a usar como <code>this</code> cuando se ejecute <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><code><strong>true</strong></code> si la función <code>callback</code> devuelve un valor {{Glossary("truthy")}} para cualquier elemento del array; en caso contrario, <code><strong>false</strong></code>.</p> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p><code>some()</code> ejecuta la función <code>callback</code> una vez por cada elemento presente en el array hasta que encuentre uno donde <code>callback</code> retorna un valor verdadero (true). Si se encuentra dicho elemento, <code>some()</code> retorna <code>true</code> inmediatamente. Si no, <code>some()</code> retorna <code>false</code>. <code>callback</code> es invocada sólo para los índices del array que tienen valores asignados; no es invocada para índices que han sido borrados o a los que nunca se les han asignado valores.</p> + +<p><code>callback</code> es invocada con tres argumentos: el valor del elemento, el índice del elemento, y el objeto array sobre el que se itera.</p> + +<p>Si se indica un parámetro <code>thisArg</code> a <code>some()</code>, se pasará a <code>callback</code> cuando es invocada, para usar como valor <code>this</code>. Si no, el valor {{jsxref("undefined")}} será pasado para usar como valor <code>this</code>. El valor <code>this</code> value observable por <code>callback</code> se determina de acuerdo a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">las reglas habituales para determinar el <code>this</code> visible por una función</a>.</p> + +<p><code>some()</code> no modifica el array con el cual fue llamada.</p> + +<p>El rango de elementos procesados por <code>some()</code> es configurado antes de la primera invocación de <code>callback</code>. Los elementos anexados al array luego de que comience la llamada a <code>some()</code> no serán visitados por <code>callback</code>. Si un elemento existente y no visitado del array es alterado por <code>callback</code>, su valor pasado al <code>callback</code> será el valor al momento que <code>some()</code> visita el índice del elemento; los elementos borrados no son visitados.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Testing_size_of_all_array_elements" name="Example:_Testing_size_of_all_array_elements">Verificando el valor de los elementos de un array</h3> + +<p>El siguiente ejemplo verifica si algún elemento del array es mayor a 10.</p> + +<pre class="brush: js">function isBiggerThan10(element, index, array) { + return element > 10; +} +[2, 5, 8, 1, 4].some(isBiggerThan10); // false +[12, 5, 8, 1, 4].some(isBiggerThan10); // true +</pre> + +<h3 id="Example:_Testing_array_elements_using_arrow_functions" name="Example:_Testing_array_elements_using_arrow_functions">Verificando los elementos de un array usando funciones flecha</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Las funciones flecha (Arrow functions)</a> brindan una sintáxis más corta para el mismo test.</p> + +<pre class="brush: js">[2, 5, 8, 1, 4].some(elem => elem > 10); // false +[12, 5, 8, 1, 4].some(elem => elem > 10); // true +</pre> + +<h3 id="Comprobando_si_un_elemento_existe_en_un_array">Comprobando si un elemento existe en un array</h3> + +<p>Para imitar la función del método <code>includes()</code>, esta función personalizada devuelve <code>true</code> si el elemento existe en el array:</p> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(function(arrVal) { + return val === arrVal; + }); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Comprobando_si_un_elemento_existe_en_un_array_con_funciones_flecha">Comprobando si un elemento existe en un array con funciones flecha</h3> + +<pre class="brush: js">var fruits = ['apple', 'banana', 'mango', 'guava']; + +function checkAvailability(arr, val) { + return arr.some(arrVal => val === arrVal); +} + +checkAvailability(fruits, 'kela'); // false +checkAvailability(fruits, 'banana'); // true</pre> + +<h3 id="Convirtiendo_cualquier_valor_a_Boolean">Convirtiendo cualquier valor a Boolean</h3> + +<pre class="brush: js">var TRUTHY_VALUES = [true, 'true', 1]; + +function getBoolean(value) { + 'use strict'; + + if (typeof value === 'string') { + value = value.toLowerCase().trim(); + } + + return TRUTHY_VALUES.some(function(t) { + return t === value; + }); +} + +getBoolean(false); // false +getBoolean('false'); // false +getBoolean(1); // true +getBoolean('true'); // true</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p><code>some()</code> fue agregado al estándar ECMA-262 en la 5ta edición; por ello, puede no estar presente en todas las implementaciones del estándar. Puedes trabajar sobre esto insertando el siguiente código al comienzo de tus scripts, permitiendo el uso de <code>some()</code> en implementaciones que no tienen soporte nativo. Este algoritmo es exactamente el mismo especificado en ECMA-262, 5ta edición, asumiendo que {{jsxref("Global_Objects/Object", "Object")}} y {{jsxref("Global_Objects/TypeError", "TypeError")}} tienen sus valores originales y que <code>fun.call</code> evalúa el valor original de{{jsxref("Function.prototype.call()")}}.</p> + +<pre class="brush: js">// Pasos de producción de ECMA-262, Edición 5, 15.4.4.17 +// Referencia: http://es5.github.io/#x15.4.4.17 +if (!Array.prototype.some) { + Array.prototype.some = function(fun/*, thisArg*/) { + 'use strict'; + + if (this == null) { + throw new TypeError('Array.prototype.some called on null or undefined'); + } + + if (typeof fun !== 'function') { + throw new TypeError(); + } + + var t = Object(this); + var len = t.length >>> 0; + + var thisArg = arguments.length >= 2 ? arguments[1] : void 0; + for (var i = 0; i < len; i++) { + if (i in t && fun.call(thisArg, t[i], i, t)) { + return true; + } + } + + return false; + }; +} +</pre> + +<h2 id="Especificaciones" name="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('ES5.1', '#sec-15.4.4.17', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.some', 'Array.prototype.some')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores" name="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.some")}}</p> +</div> + +<h2 id="Ver_también" name="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.find()")}}</li> + <li>{{jsxref("TypedArray.prototype.some()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/sort/index.html b/files/es/web/javascript/reference/global_objects/array/sort/index.html new file mode 100644 index 0000000000..ac28826327 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/sort/index.html @@ -0,0 +1,301 @@ +--- +title: Array.prototype.sort() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/sort +tags: + - Array + - JavaScript + - Método(2) + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/sort +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>sort()</strong></code> ordena los elementos de un arreglo (array) <em>localmente</em> y devuelve el arreglo ordenado. La ordenación no es necesariamente <a href="https://en.wikipedia.org/wiki/Sorting_algorithm#Stability">estable</a>. El modo de ordenación por defecto responde a la posición del valor del string de acuerdo a su valor <a href="https://es.wikipedia.org/wiki/Unicode">Unicode</a>.</p> + +<p id="tw-target-text">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción (pull request).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>arr</var>.sort([<var>compareFunction</var>])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>compareFunction</code></dt> + <dd>Opcional. Especifica una función que define el modo de ordenamiento. Si se omite, el array es ordenado atendiendo a la posición del valor <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">Unicode</a> de cada caracter, según la conversión a string de cada elemento.</dd> + <dt><code>firstEl</code></dt> + <dd>El primer elemento a comparar.</dd> + <dt><code>secondEl</code></dt> + <dd>El segundo elemento a comparar.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El array ordenado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si no se provee <code>compareFunction</code>, los elementos son ordenados convirtiéndolos a strings y comparando la posición del valor Unicode de dichos strings. Por ejemplo, "Cherry" viene antes que "banana" (porque las mayúsculas van antes que las minúsculas en la codificación Unicode) . En un ordenamiento numérico, 9 está antes que 80, pero dado que los números son convertidos a strings y ordenados según el valor Unicode, el resultado será "80" antes que "9".</p> + +<pre class="brush: js notranslate">var frutas = ['guindas', 'manzanas', 'bananas']; +frutas.sort(); // ['bananas', 'guindas', 'manzanas'] + +var puntos = [1, 10, 2, 21]; +puntos.sort(); // [1, 10, 2, 21] +// Tenga en cuenta que 10 viene antes que 2 +// porque '10' viene antes que '2' según la posición del valor Unicode. + +var cosas = ['word', 'Word', '1 Word', '2 Words']; +cosas.sort(); // ['1 Word', '2 Words', 'Word', 'word'] +// En Unicode, los números vienen antes que las letras mayúsculas +// y estas vienen antes que las letras minúsculas. +</pre> + +<p>Si se provee <code>compareFunction</code>, los elementos del array son ordenados de acuerdo al valor que retorna dicha función de comparación. Siendo <code>a</code> y <code>b</code> dos elementos comparados, entonces:</p> + +<ul> + <li>Si <code>compareFunction(a, b)</code> es menor que 0, se sitúa <code>a</code> en un indice menor que <code>b</code>. Es decir, <code>a</code> viene primero.</li> + <li>Si <code>compareFunction(a, b)</code> retorna 0, se deja <code>a</code> y <code>b</code> sin cambios entre ellos, pero ordenados con respecto a todos los elementos diferentes. Nota: el estandar ECMAscript no garantiza este comportamiento, por esto no todos los navegadores (p.ej. Mozilla en versiones que datan hasta el 2003) respetan esto.</li> + <li>Si <code>compareFunction(a, b)</code> es mayor que 0, se sitúa <code>b</code> en un indice menor que <code>a</code>.</li> + <li><code>compareFunction(a, b)</code> siempre debe retornar el mismo valor dado un par especifico de elementos a y b como sus argumentos. Si se retornan resultados inconsistentes entonces el orden de ordenamiento es indefinido.</li> +</ul> + +<p>Entonces, la función de comparación tiene la siguiente forma:</p> + +<pre class="brush: js notranslate">function compare(a, b) { + if (a es menor que b según criterio de ordenamiento) { + return -1; + } + if (a es mayor que b según criterio de ordenamiento) { + return 1; + } + // a debe ser igual b + return 0; +} +</pre> + +<p>Para comparar números en lugar de strings, la función de comparación puede simplemente restar <code>b</code> de <code>a</code>. La siguiente función ordena el array de modo ascendente:</p> + +<pre class="brush: js notranslate">function compareNumbers(a, b) { + return a - b; +} +</pre> + +<p>El metodo <code>sort</code> puede ser usado convenientemente con {{jsxref("Operators/function", "function expressions", "", 1)}} (y <a href="/en-US/docs/Web/JavaScript/Guide/Closures">closures</a>):</p> + +<pre class="brush: js notranslate">var numbers = [4, 2, 5, 1, 3]; +numbers.sort(function(a, b) { + return a - b; +}); +console.log(numbers); + +</pre> + +<pre class="notranslate"><code>// [1, 2, 3, 4, 5]</code></pre> + +<p>Los objectos pueden ser ordenados por el valor de una de sus propiedades.</p> + +<pre class="brush: js notranslate">var items = [ + { name: 'Edward', value: 21 }, + { name: 'Sharpe', value: 37 }, + { name: 'And', value: 45 }, + { name: 'The', value: -12 }, + { name: 'Magnetic', value: 13 }, + { name: 'Zeros', value: 37 } +]; +items.sort(function (a, b) { + if (a.name > b.name) { + return 1; + } + if (a.name < b.name) { + return -1; + } + // a must be equal to b + return 0; +}); +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array">Ordenando un array</h3> + +<p>Un array de elementos string, sin especificar una función de comparación:</p> + +<pre class="brush: js notranslate">var arr = [ 'a', 'b', 'Z', 'Aa', 'AA' ]; +arr.sort(); //[ 'AA', 'Aa', 'Z', 'a', 'b' ] +</pre> + +<p>Un array de elementos numéricos, sin función de comparación:</p> + +<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ]; +arr.sort(); //[ 1, 200, 40, 5 ] +</pre> + +<p>Un array de elementos numéricos, usando una función de comparación:</p> + +<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ]; +function comparar ( a, b ){ return a - b; } +arr.sort( comparar ); // [ 1, 5, 40, 200 ]</pre> + +<p>Lo mismo pero usando una función anónima normal:</p> + +<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ]; +arr.sort(function(a,b){return a - b;}); // [ 1, 5, 40, 200 ]</pre> + +<p>Lo mismo escrito más compacto mediante una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">función flecha</a>:</p> + +<pre class="brush: js notranslate">var arr = [ 40, 1, 5, 200 ]; +arr.sort((a,b)=>a-b); // [ 1, 5, 40, 200 ]</pre> + +<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array"></h3> + +<h3 id="Creating.2C_displaying.2C_and_sorting_an_array" name="Creating.2C_displaying.2C_and_sorting_an_array">Creando, mostrando, y ordenando un array</h3> + +<p>El siguiente ejemplo abunda en la idea de ordenar con y sin función de comparación. Además, ilustra una manera de mostrar un array una vez creado. El método <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join">join</a> es usado para convertir el array en una cadena de texto que imprimir. Al no pasarle un argumento que indique el separador, usará la coma por defecto para separar los elementos del array dentro de la cadena.</p> + +<pre class="brush: js notranslate">var arr = ['80', '9', '700', 40, 1, 5, 200]; +function comparar(a, b) { + return a - b; +} +console.log('original:', arr.join()); +console.log('ordenado sin función:', arr.sort()); +console.log('ordenado con función:', arr.sort(comparar)); +</pre> + +<p>El ejemplo produce el siguiente resultado. Como muestra la salida, cuando una función de comparación es usada, los números se ordenan correctamente, sean estos valores numéricos o strings numéricos.</p> + +<pre class="notranslate">original: 80,9,700,40,1,5,200 +ordenado sin función: 1,200,40,5,700,80,9 +ordenado con función: 1,5,9,40,80,200,700 +</pre> + +<h3 id="Ordenando_caracteres_no_ASCII">Ordenando caracteres no ASCII</h3> + +<p>Para ordenar strings con characters no ASCII, i.e. strings con caracteres con acento (e, é, è, a, ä, etc.), strings de lenguajes diferentes al inglés: use {{jsxref("String.localeCompare")}}. Esta función puede comparar esos caracteres para que aparezcan en el orden correcto.</p> + +<pre class="brush: js notranslate">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort(function (a, b) { + return a.localeCompare(b); +}); + +// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Ordenando_con_map">Ordenando con map</h3> + +<p>La <code>compareFunction</code> puede ser invocada múltiples veces por elemento dentro del array. Dependiendo de la naturaleza de <code>compareFunction</code>, este puede resultar en una alta penalización de rendimiento. Cuanto más trabajo hace una <code>compareFunction</code> y más elementos hay para ordenar, resulta más recomendable usar una función <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a> para ordenar. La idea es recorrer el array una sola vez para extraer los valores usados para ordenar en un array temporal, ordenar el array temporal y luego recorrer el array para lograr el orden correcto.</p> + +<pre class="brush: js notranslate">// el array a ordenar +var list = ['Delta', 'alpha', 'CHARLIE', 'bravo']; + +// array temporal contiene objetos con posición y valor de ordenamiento +var mapped = list.map(function(el, i) { + return { index: i, value: el.toLowerCase() }; +}) + +// ordenando el array mapeado que contiene los valores reducidos +mapped.sort(function(a, b) { + if (a.value > b.value) { + return 1; + } + if (a.value < b.value) { + return -1; + } + return 0; +}); + +// contenedor para el orden resultante +var result = mapped.map(function(el){ + return list[el.index]; +}); +</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óñ inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.11', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.sort', 'Array.prototype.sort')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</td> + <td>{{CompatIE("5.5")}}</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="Compatibilidad_en_navegadores_2">Compatibilidad en navegadores</h2> + +<p>La tabla de compatibilidad en esta página es generada por una data estructurada. Si deseas contribuir a la data, por favor entra a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/splice/index.html b/files/es/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..5d7992a2c4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,148 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/splice +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>splice()</strong></code> cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>array</var>.splice(<var>start[</var>, <var>deleteCount[</var>, <var>item1[</var>, <var>item2[</var>, <em>...]]]]</em>) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Índice donde se comenzará a cambiar el array (con 0 como origen). Si es mayor que la longitud del array, el punto inicial será la longitud del array. Si es negativo, empezará esa cantidad de elementos contando desde el final.</dd> + <dt><code>deleteCount</code> {{optional_inline}}</dt> + <dd>Un entero indicando el número de elementos a eliminar del array antiguo.</dd> + <dd>Si <code>deleteCount</code> se omite, o si su valor es mayor que <code>arr.length - start</code> (esto significa, si es mayor que el número de elementos restantes del array, comenzando desde <code>start</code>), entonces todos los elementos desde <code>start</code> hasta el final del array serán eliminados.</dd> + <dd>Si <code>deleteCount</code> es igual a 0 o negativo, no se eliminará ningún elemento. En este caso, se debe especificar al menos un nuevo elemento (ver más abajo).</dd> + <dt><code>item1, item2, <em>...</em></code> {{optional_inline}}</dt> + <dd>Los elementos que se agregarán al array, empezando en el índice <code>start</code>. Si no se especifica ningún elemento, <code>splice()</code> solamente eliminará elementos del array.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un array que contiene los elementos eliminados. Si sólo se ha eliminado un elemento, devuelve un array con un solo elemento. Si no se ha eliminado ningún elemento, devuelve un array vacío.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si especifica un número diferente de elementos a agregar que los que se eliminarán, el array tendrá un tamaño diferente al original una vez finalizada la llamada.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Eliminar_0_elementos_desde_el_índice_2_e_insertar_drum">Eliminar 0 elementos desde el índice 2 e insertar "drum"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2, 0, 'drum'); + +// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"] +// removed is [], no elements removed +</pre> + +<h3 id="Eliminar_1_elemento_desde_el_índice_3">Eliminar 1 elemento desde el índice 3</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']; +var removed = myFish.splice(3, 1); + +// removed is ["mandarin"] +// myFish is ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Eliminar_1_elemento_desde_el_índice_2_e_insertar_trumpet">Eliminar 1 elemento desde el índice 2 e insertar "trumpet"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'drum', 'sturgeon']; +var removed = myFish.splice(2, 1, 'trumpet'); + +// myFish is ["angel", "clown", "trumpet", "sturgeon"] +// removed is ["drum"]</pre> + +<h3 id="Eliminar_2_elementos_desde_el_índice_0_e_insertar_parrot_anemone_y_blue">Eliminar 2 elementos desde el índice 0 e insertar "parrot", "anemone" y "blue"</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; +var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue'); + +// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed is ["angel", "clown"]</pre> + +<h3 id="Eliminar_2_elementos_desde_el_índice_2">Eliminar 2 elementos desde el índice 2</h3> + +<pre class="brush: js">var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; +var removed = myFish.splice(myFish.length - 3, 2); + +// myFish is ["parrot", "anemone", "sturgeon"] +// removed is ["blue", "trumpet"]</pre> + +<h3 id="Eliminar_1_elemento_desde_el_índice_-2">Eliminar 1 elemento desde el índice -2</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(-2, 1); + +// myFish is ["angel", "clown", "sturgeon"] +// removed is ["mandarin"]</pre> + +<h3 id="Eliminar_todos_los_elementos_tras_el_índice_2_(incl.)">Eliminar todos los elementos tras el índice 2 (incl.)</h3> + +<pre class="brush: js">var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; +var removed = myFish.splice(2); + +// myFish is ["angel", "clown"] +// removed is ["mandarin", "sturgeon"]</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.12', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}} — añade/elimina elementos desde el final de un array</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}} — añade/elimina elementos desde el principio de un array</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}} — devuelve un nuevo array compuesto por este array unido a otro/s array/s y/o valor/es</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html new file mode 100644 index 0000000000..0fc418ab47 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html @@ -0,0 +1,177 @@ +--- +title: Array.prototype.toLocaleString() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toLocaleString()</strong></code> devuelve una cadena de texto representando los elementos del array. Los elementos son convertidos a texto usando su método <code>toLocaleString</code> y dichos Strings son separados por un caracter específico para la localidad (como una coma para la separación de decimales “,”).</p> + +<div>{{EmbedInteractiveExample("pages/js/array-tolocalestring.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.toLocaleString([<var>locales[</var>, <var>options]]</var>); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>locales</code> {{optional_inline}}</dt> + <dd>Una cadena de texto con una etiqueta de idioma BCP 47, o un array de dichos strings. Para la forma general e interpretación the los argumentos <code>locales</code>, ver la página {{jsxref("Intl")}}.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Un objeto con las configuraciones, para números ver {{jsxref("Number.prototype.toLocaleString()")}}, y para fechas ver {{jsxref("Date.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena de texto representando los elementos del array.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_locales_y_options">Usando <code>locales</code> y <code>options</code></h3> + +<p>Los elementos del array son convertidos a strings usando sus métodos <code>toLocaleString</code>.</p> + +<ul> + <li><code>Object</code>: {{jsxref("Object.prototype.toLocaleString()")}}</li> + <li><code>Number</code>: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li><code>Date</code>: {{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> + +<p>Siempre mostrar la moneda para los strings y números en el array <code>precios</code>:</p> + +<pre class="brush: js">var precios = ['$7', 500, 8123, 12]; +precios.toLocaleString('es-AR', { style: 'currency', currency: 'ARS' }); + +// "$7, $500, $8.123, $12" +</pre> + +<p>Para más ejemplos, ver también {{jsxref("Intl")}}, {{jsxref("NumberFormat")}}, y {{jsxref("DateTimeFormat")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">// https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring +if (!Array.prototype.toLocaleString) { + Object.defineProperty(Array.prototype, 'toLocaleString', { + value: function(locales, options) { + // 1. Let O be ? ToObject(this value). + if (this == null) { + throw new TypeError('"this" is null or not defined'); + } + + var a = Object(this); + + // 2. Let len be ? ToLength(? Get(A, "length")). + var len = a.length >>> 0; + + // 3. Let separator be the String value for the + // list-separator String appropriate for the + // host environment's current locale (this is + // derived in an implementation-defined way). + // NOTE: In this case, we will use a comma + var separator = ','; + + // 4. If len is zero, return the empty String. + if (len === 0) { + return ''; + } + + // 5. Let firstElement be ? Get(A, "0"). + var firstElement = a[0]; + // 6. If firstElement is undefined or null, then + // a.Let R be the empty String. + // 7. Else, + // a. Let R be ? + // ToString(? + // Invoke( + // firstElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + var r = firstElement == null ? + '' : firstElement.toLocaleString(locales, options); + + // 8. Let k be 1. + var k = 1; + + // 9. Repeat, while k < len + while (k < len) { + // a. Let S be a String value produced by + // concatenating R and separator. + var s = r + separator; + + // b. Let nextElement be ? Get(A, ToString(k)). + var nextElement = a[k]; + + // c. If nextElement is undefined or null, then + // i. Let R be the empty String. + // d. Else, + // i. Let R be ? + // ToString(? + // Invoke( + // nextElement, + // "toLocaleString", + // « locales, options » + // ) + // ) + r = nextElement == null ? + '' : nextElement.toLocaleString(locales, options); + + // e. Let R be a String value produced by + // concatenating S and R. + r = s + r; + + // f. Increase k by 1. + k++; + } + + // 10. Return R. + return r; + } + }); +} +</pre> + +<p>Si necesitas soportar motores de JavaScript obsoletos que no compatibilizan con <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty">Object.defineProperty</a></code>, es mejor no utilizar los métodos <code>Array.prototype</code>, ya que no se pueden hacer no-enumerables.</p> + +<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-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>La definicion original fue en ECMAScript 3.</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-array.prototype.tolocalestring', 'Array.prototype.toLocaleString')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Esta definición reemplaza la proporcionada en ECMA-262.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.toLocaleString")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.toString()")}}</li> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Object.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/tosource/index.html b/files/es/web/javascript/reference/global_objects/array/tosource/index.html new file mode 100644 index 0000000000..ffd8df0b3b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/tosource/index.html @@ -0,0 +1,112 @@ +--- +title: Array.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <code><strong>toSource()</strong></code> devuelve un string representando el código fuente de un arreglo.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.toSource()</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un string representando el código fuente del arreglo.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toSource</code>r retorna los siguientes valores:</p> + +<ul> + <li>Para el objeto global {{jsxref("Array")}}, <code>toSource</code> devuelve el siguiente string indicando que el código fuente no está disponible: + + <pre class="brush: js">function Array() { + [native code] +} +</pre> + </li> + <li>Para instancias de {{jsxref("Array")}}, <code>toSource</code> devuelve un string representando el código fuente.</li> +</ul> + +<p>Este método suele ser llamado internamente por JavaScript y no explícitamente en código. Puede usar <code>toSource</code> mientras depura para examinar el contenido de un arreglo.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Examinar_el_código_fuente_de_un_arreglo">Examinar el código fuente de un arreglo</h3> + +<p>Para examinar el código fuente de un arreglo:</p> + +<pre class="brush: js">var alpha = new Array('a', 'b', 'c'); + +alpha.toSource(); +//devuelve ['a', 'b', 'c'] +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No hace parte de ningún estándar. Implementado en JavaScript 1.3.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básicot</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Array.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/tostring/index.html b/files/es/web/javascript/reference/global_objects/array/tostring/index.html new file mode 100644 index 0000000000..402f011e0f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/tostring/index.html @@ -0,0 +1,78 @@ +--- +title: Array.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/toString +tags: + - Array + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/toString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toString()</strong></code> devuelve una cadena de caracteres representando el array especificado y sus elementos.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-tostring.html")}}</p> + +<h2 id="Sintaxis">Sintaxis </h2> + +<pre class="syntaxbox"><code><var>arr</var>.toString()</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena de caracteres representando los elementos del array.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El objeto {{jsxref("Array")}} sustituye al método <code>toString</code> de {{jsxref("Object")}}. Para los objetos <code>Array</code>, el método <code>toString</code> une el array y devuelve una cadena de caracteres que contiene cada elemento del array separado por comas.</p> + +<p>JavaScript llama al método <code>toString</code> automáticamente cuando un array va a ser representado como un valor de texto o cuando se referencia a un array en una concatenación de caracteres.</p> + +<h3 id="Semántica_de_ECMAScript_5">Semántica de ECMAScript 5 </h3> + +<p>Desde JavaScript 1.8.5 (Firefox 4), y consistente con la 5ª edición de semántica de ECMAScript, el método <code>toString()</code> es genérico y puede ser usado con cualquier objeto. {{jsxref("Object.prototype.toString()")}} será llamado y devolverá el valor resultante.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Array.toString")}}</p> +</div>> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/unshift/index.html b/files/es/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..4641a05d98 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,100 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/unshift +tags: + - Array + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>unshift()</strong></code> agrega uno o más elementos al inicio del array, y devuelve la nueva longitud del array.</p> + +<p>{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.unshift(<var>elemento1</var>[, ...[, <var>elementoN</var>]])</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>elemento<em>N</em></code></dt> + <dd>Elementos a agregar al inicio del array.</dd> +</dl> + +<h3 id="Returns" name="Returns">Devuelve</h3> + +<p>La nueva propiedad {{jsxref("Array.length", "length")}} del objeto sobre el cual el método fue llamado.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El método <code>unshift</code> inserta los valores proporcionados al inicio de un objeto del tipo array.</p> + +<p><code>unshift</code> es intencionalmente genérico; este método puede ser {{jsxref("Function.call", "called", "", 1)}} o {{jsxref("Function.apply", "applied", "", 1)}} a objetos similares a arrays. Objetos que no contengan una propiedad <code>length</code> reflejando una serie de propiedades numéricas consecutivas, comenzada a partir del cero, pueden no comportarse de una manera comprensible.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // resultado de la llamada es 3, la nueva longitud del array +// arr es [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr es [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr es [[-3], -2, -1, 0, 1, 2] +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/array/values/index.html b/files/es/web/javascript/reference/global_objects/array/values/index.html new file mode 100644 index 0000000000..dbc76e8634 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/array/values/index.html @@ -0,0 +1,82 @@ +--- +title: Array.prototype.values() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/values +tags: + - Array + - ECMAScript 2015 + - Iterador + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Array/values +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>values()</code></strong> devuelve un nuevo objeto <strong><code>Array Iterator</code></strong> que contiene los valores para cada índice del array.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">'w'</span><span class="punctuation token">,</span> <span class="string token">'y'</span><span class="punctuation token">,</span> <span class="string token">'k'</span><span class="punctuation token">,</span> <span class="string token">'o'</span><span class="punctuation token">,</span> <span class="string token">'p'</span><span class="punctuation token">]</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> iterator <span class="operator token">=</span> a<span class="punctuation token">.</span><span class="function token">values</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// w </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// y </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// k </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// o </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>iterator<span class="punctuation token">.</span><span class="function token">next</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// p</span></code> +</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>.values() +</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un nuevo objeto {{jsxref("Array")}} iterator.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Iteración_usando_un_bucle_for...of">Iteración usando un bucle <code>for...of</code></h3> + +<pre class="brush: js">var arr = ['w', 'y', 'k', 'o', 'p']; +var iterador = arr.values(); + +for (let letra of iterador) { + console.log(letra); +} +</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-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.values")}}</div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.keys()")}}</li> + <li>{{jsxref("Array.prototype.entries()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Array.prototype.every()")}}</li> + <li>{{jsxref("Array.prototype.some()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html new file mode 100644 index 0000000000..ab87242260 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html @@ -0,0 +1,72 @@ +--- +title: 'get ArrayBuffer[@@species]' +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species +tags: + - ArrayBuffer + - JavaScript + - Propiedad + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species +--- +<div>{{JSRef}}</div> + +<p>La propiedad de acceso <code><strong>ArrayBuffer[@@species]</strong></code> devuelve el constructor <code>ArrayBuffer</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">ArrayBuffer[Symbol.species] +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad de acceso <code>species</code> devuelve el constructor predeterminado para los objetos <code>ArrayBuffer</code>. Los constructores de subclase pueden anularlo para cambiar la asignación del constructor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>La propiedad <code>species</code> devuelve la función constructora predeterminada, que es el constructor <code>ArrayBuffer</code> para los objetos <code>ArrayBuffer</code>:</p> + +<pre class="brush: js">ArrayBuffer[Symbol.species]; // función ArrayBuffer()</pre> + +<p>En un objeto de colección derivado (por ejemplo, su búfer de array personalizado <code>MyArrayBuffer</code>), <code>MyArrayBuffer</code> species es el constructor <code>MyArrayBuffer</code>. Sin embargo, es posible que desee sobrescribir esto para devolver objetos <code>ArrayBuffer</code> principales en sus métodos de clase derivados:</p> + +<pre class="brush: js">class MyArrayBuffer extends ArrayBuffer { + // Overwrite MyArrayBuffer species to the parent ArrayBuffer constructor + static get [Symbol.species]() { return ArrayBuffer; } +}</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-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.ArrayBuffer.@@species")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("Symbol.species")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html new file mode 100644 index 0000000000..e553024b1e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html @@ -0,0 +1,70 @@ +--- +title: ArrayBuffer.prototype.byteLength +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength +tags: + - ArrayBuffer + - JavaScript + - Propiedad + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength +--- +<div>{{JSRef}}</div> + +<p>La propiedad de acceso <code><strong>byteLength</strong></code> representa la longitud de {{jsxref("ArrayBuffer")}} en bytes.</p> + +<div>{{EmbedInteractiveExample("pages/js/arraybuffer-bytelength.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>arr</var>aybuffer.byteLength</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad <code>byteLength</code> es una propiedad de acceso cuya función de acceso de conjunto es <code>undefined</code>, lo que significa que solo puede leer esta propiedad. El valor se establece cuando la matriz se construye y no se puede cambiar. Esta propiedad devuelve <code>0</code> si este <code>ArrayBuffer</code> ha sido separado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); +buffer.byteLength; // 8 +</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('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Reemplazado por ECMAScript 2015.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial en un estándar ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.ArrayBuffer.byteLength")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/arraybuffer/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..4a83b5a24d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,139 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer +tags: + - ArrayBuffer + - Constructor + - JavaScript + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>ArrayBuffer</code></strong> se usa para representar un buffer genérico, de datos binarios crudos (raw) con una longitud específica. No se puede manipular directamente el contenido de un <code>ArrayBuffer</code>; sin embargo, puedes crear uno de los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">arrays tipados</a> o un objeto {{jsxref("DataView")}} que representa el buffer en un formato especifico, y usarlo para leer y escribir el contenido del buffer.</p> + +<p>{{EmbedInteractiveExample("pages/js/arraybuffer-constructor.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">new ArrayBuffer(length) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>length</code></dt> + <dd>El tamaño en bytes, del array buffer que quieres crear.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un nuevo objeto <code>ArrayBuffer</code> de tamaño específico. Su contenido se inicializa a cero.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<p>Se lanza un {{jsxref("RangeError")}} si la longitud (<code>length</code>) es mayor que {{jsxref("Number.MAX_SAFE_INTEGER")}} (> = 2 ** 53) o negativa.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El constructor de <code>ArrayBuffer</code> crea un nuevo <code>ArrayBuffer</code> del tamaño especificado en bytes.</p> + +<h3 id="Obtener_un_array_buffer_sobre_datos_existentes">Obtener un array buffer sobre datos existentes</h3> + +<ul> + <li><a href="/es/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">Desde un string Base64</a></li> + <li><a href="/es/docs/Web/API/FileReader#readAsArrayBuffer()">Desde un fichero local</a></li> +</ul> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>ArrayBuffer.length</code></dt> + <dd>El tamaño de constructor de <code>ArrayBuffer</code> cuyo valor es 1.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>La función de constructor que se usa para crear objetos derivados.</dd> + <dt>{{jsxref("ArrayBuffer.prototype")}}</dt> + <dd>Permite añadir propiedades a todos los objetos <code>ArrayBuffer</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Devuelve <code>true</code> si <code>arg</code> es una de las vistas de ArrayBuffer, como pueden ser los <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">arrays tipados</a> o un {{jsxref("DataView")}}. Sino devuelve <code>false</code>.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}} {{experimental_inline}}</dt> + <dd> + <div class="line" id="file-arraybuffer-transfer-LC6">Devuelve un nuevo <code>ArrayBuffer</code> cuyo contenido se toma de los datos de <code>oldBuffer</code> y luego es truncado o extendido por cero por <code>newByteLength</code>.</div> + </dd> +</dl> + +<h2 id="Instancias">Instancias</h2> + +<p>Todas las instancias de <code>ArrayBuffer</code> heredan de {{jsxref("ArrayBuffer.prototype")}}.</p> + +<h3 id="Propiedades_2">Propiedades</h3> + +<p>{{page('es/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Propiedades')}}</p> + +<h3 id="Métodos_2">Métodos</h3> + +<p>{{page('es/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype','Métodos')}}</p> + +<dl> + <dt>{{jsxref("ArrayBuffer.slice()")}} {{non-standard_inline}}</dt> + <dd>Tiene la misma funcionalidad que {{jsxref("ArrayBuffer.prototype.slice()")}}.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>En este ejemplo creamos un buffer de 8-bytes con una vista del tipo {{jsxref("Global_Objects/Int32Array", "Int32Array")}} referenciando dicho buffer:</p> + +<pre class="brush: js">var buffer = new ArrayBuffer(8); +var view = new Int32Array(buffer);</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('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Sustituida por ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial en un estándar ECMA. Especifica que new es obligatorio.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-constructor', 'ArrayBuffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<p>Desde el ECMAScript 2015, los constructores de <code>ArrayBuffer</code> requieren ser instanciados usando el operador {{jsxref("Operators/new", "new")}}. Ejecutar el constructor de un <code>ArrayBuffer</code> como una funciónsin el <code>new</code>, lanzará un {{jsxref("TypeError")}} de ahora en adelante.</p> + +<pre class="brush: js example-bad">var dv = ArrayBuffer(10); +// TypeError: llamar al constructor ArrayBuffer sin new está prohibido</pre> + +<pre class="brush: js example-good">var dv = new ArrayBuffer(10);</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/asyncfunction/index.html b/files/es/web/javascript/reference/global_objects/asyncfunction/index.html new file mode 100644 index 0000000000..bdb37b012c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/asyncfunction/index.html @@ -0,0 +1,122 @@ +--- +title: Funciones asíncronas +slug: Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction +--- +<div>{{JSRef}}</div> + +<div>El constructor de las funciones asíncronas crea un nuevo objecto {{jsxref("Statements/async_function", "async function")}}. En JavaScript cada función asíncrona es un objeto AsyncFunction.</div> + +<div></div> + +<div>Nota: AsyncFunction no es un objeto global. Este puede ser obtenido como resultado del siguiente código.</div> + +<div></div> + +<pre class="brush: js notranslate">Object.getPrototypeOf(async function(){}).constructor +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate">new AsyncFunction([<var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]],] <var>functionBody</var>)</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Nombres a ser usados por la función como los nombres de los argumentos. Cada uno debe ser una cadena que corresponda a un identificador válido en JavaScript o una lista de cadenas separadas por coma, ejemplo: "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> + <dt><code>functionBody</code></dt> + <dd>Una cadena que contiene las declaraciones de JavaScript que comprenden la definición de la función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>{{jsxref("Statements/async_function", "async function")}} los objetos creados con el constructor <code>AsyncFunction</code> son analizados gramaticalmente en el momento que la función es creada. Esto es menos eficiente que declarar una función asincrona con un {{jsxref("Statements/async_function", "async function expression")}} y llamarla con eso en tu código , ya que las funciones están analizadas gramaticalmento junto al resto del código.</p> + +<p>Todos los argumentos que son pasados por la función son tratados por los nombres de los identificadores con los que fueron creados, en el orden en que son pasados por la función.</p> + +<div class="note"> +<p><strong>Note:</strong> {{jsxref("Statements/async_function", "async functions")}} created with the <code>AsyncFunction</code> constructor do not create closures to their creation contexts; they are always created in the global scope. When running them, they will only be able to access their own local variables and global ones, not the ones from the scope in which the <code>AsyncFunction</code> constructor was called. This is different from using {{jsxref("Global_Objects/eval", "eval")}} with code for an async function expression.</p> +</div> + +<p>Invoking the <code>AsyncFunction</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code><strong>AsyncFunction.length</strong></code></dt> + <dd>The <code>AsyncFunction</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("AsyncFunction.prototype")}}</dt> + <dd>Allows the addition of properties to all async function objects.</dd> +</dl> + +<h2 id="El_objeto_prototipo_AsyncFunction">El objeto prototipo <code> AsyncFunction</code> </h2> + +<h3 id="Propiedades_2">Propiedades</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype', 'Properties')}}</div> + +<h2 id="AsyncFunction_y_sus_instancias"><code>AsyncFunction</code> y sus instancias</h2> + +<p>Una instancia de <code>AsyncFunction</code> hereda métodos y propiedades de {{jsxref("AsyncFunction.prototype")}}. Como son todos los constructores, puedes cambiar el constructor del objeto prototipo para aplicar cambios a todas las instancias de <code>AsyncFunction</code> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Creating_an_async_function_from_an_AsyncFunction_constructor">Creating an async function from an <code>AsyncFunction</code> constructor</h3> + +<pre class="brush: js notranslate">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor + +var a = new AsyncFunction('a', + 'b', + 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);'); + +a(10, 20).then(v => { + console.log(v); // prints 30 after 4 seconds +}); +</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-objects', 'AsyncFunction object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> + + +<p>{{Compat("javascript.builtins.AsyncFunction")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("Global_Objects/Function", "Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/boolean/boolean/index.html b/files/es/web/javascript/reference/global_objects/boolean/boolean/index.html new file mode 100644 index 0000000000..924ab7ccef --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/boolean/boolean/index.html @@ -0,0 +1,75 @@ +--- +title: Boolean() constructor +slug: Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean +tags: + - Booleano + - Constructor + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/Boolean +--- +<div>{{JSRef}}</div> + +<p>El constructor <strong><code>Boolean()</code></strong> se usa para crear objetos {{jsxref("Boolean")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html", "shorter")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new Boolean([<var>value</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>value</code> {{optional_inline}}</dt> + <dd>El valor inicial del objeto <code>Boolean</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_false">Creación de objetos <code>Boolean</code> con un valor inicial de <code>false</code></h3> + +<pre class="brush: js notranslate">var bNoParam = new Boolean(); +var bZero = new Boolean(0); +var bNull = new Boolean(null); +var bEmptyString = new Boolean(''); +var bfalse = new Boolean(false); +</pre> + +<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_true">Creación de objetos <code>Boolean</code> con un valor inicial de <code>true</code></h3> + +<pre class="brush: js notranslate">var btrue = new Boolean(true); +var btrueString = new Boolean('true'); +var bfalseString = new Boolean('false'); +var bSuLin = new Boolean('Su Lin'); +var bArrayProto = new Boolean([]); +var bObjProto = new Boolean({});</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean-constructor', 'Boolean constructor')}}</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.builtins.Boolean.Boolean")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/es/docs/Glossary/Boolean">Boolean</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/boolean/index.html b/files/es/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..17a0f7d9e9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,126 @@ +--- +title: Booleano +slug: Web/JavaScript/Referencia/Objetos_globales/Boolean +tags: + - Boolean + - Clase + - Class + - Constructor + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>Boolean</code></strong> es un objeto contenedor para un valor booleano.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor pasado como primer parámetro se convierte en un valor booleano, si es necesario. Si el valor se omite o es <code>0</code>, <code>-0</code>, {{jsxref("null")}}, <code>false</code>, {{jsxref("NaN")}}, {{jsxref("undefined")}}, o la cadena vacía (<code>""</code>), el objeto tiene un valor inicial de <code>false</code>. Todos los demás valores, incluido cualquier objeto, un arreglo vacío (<code>[]</code>) o la cadena "<code>false</code>", crean un objeto con un valor inicial de <code>true</code>.</p> + +<p>No confundas los valores del <code>Boolean</code> {{Glossary("Primitive", "primitivo")}}, <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto <code>Boolean</code>.</p> + +<p><strong>Cualquier</strong> objeto cuyo valor no sea {{jsxref("undefined")}} o {{jsxref("null")}}, incluido un objeto <code>Boolean</code> cuyo valor es <code>false</code>, se evalúa como <code>true</code> cuando se pasa a una declaración condicional. Por ejemplo, la condición en la siguiente declaración {{jsxref("Statements/if...else", "if")}} se evalúa como <code>true</code>:</p> + +<pre class="brush: js notranslate">var x = new Boolean(false); +if (x) { + // este código se ejecuta +} +</pre> + +<p>Este comportamiento no se aplica a los <code>Boolean</code> primitivos. Por ejemplo, la condición en la siguiente instrucción {{jsxref("Statements/if...else", "if")}} se evalúa como <code>false</code>:</p> + +<pre class="brush: js notranslate">var x = false; +if (x) { + // este código no se ejecuta +} +</pre> + +<p>No utilices un objeto <code>Boolean</code> para convertir un valor no booleano en un valor booleano. Para realizar esta tarea, en su lugar, usa <code>Boolean</code> como función, o un <a href="/es/docs/Web/JavaScript/Reference/Operators/Logical_NOT">operador <code>NOT</code> doble</a>:</p> + +<pre class="brush: js notranslate">var x = Boolean(expression); // usa esta... +var x = !!(expression); // ... o esta +var x = new Boolean(expression); // ¡no uses esta! +</pre> + +<p>Si especificas cualquier objeto, incluido un objeto <code>Boolean</code> cuyo valor es <code>false</code>, como valor inicial de un objeto <code>Boolean</code>, el nuevo objeto <code>Boolean</code> tiene un valor de <code>true</code>.</p> + +<pre class="brush: js notranslate">var myFalse = new Boolean(false); // valor inicial de false +var g = Boolean(myFalse); // valor inicial de true +var myString = new String('Hola'); // objeto string +var s = Boolean(myString); // valor inicial de true +</pre> + +<p>No utilices un objeto <code>Boolean</code> en lugar de un <code>Boolean</code> primitivo.</p> + +<div class="note"> +<p><strong>Nota</strong> Cuando la propiedad no estándar <a href="/es/docs/Web/API/Document#Properties"><code>document.all</code></a> se usa como argumento para este constructor, el resultado es un objeto <code>Boolean</code> con el valor <code>false</code>. Esta propiedad es heredada y no estándar y no se debe usar.</p> +</div> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("Global_Objects/Boolean/Boolean", "Boolean()")}}</dt> + <dd>Crea un nuevo objeto <code>Boolean</code>.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Devuelve una cadena de <code>true</code> o <code>false</code> dependiendo del valor del objeto. Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>Devuelve el valor primitivo del objeto {{jsxref("Boolean")}}. Redefine el método {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_false">Creación de objetos <code>Boolean</code> con un valor inicial de <code>false</code></h3> + +<pre class="brush: js notranslate">var bNoParam = new Boolean(); +var bZero = new Boolean(0); +var bNull = new Boolean(null); +var bEmptyString = new Boolean(''); +var bfalse = new Boolean(false); +</pre> + +<h3 id="Creación_de_objetos_Boolean_con_un_valor_inicial_de_true">Creación de objetos <code>Boolean</code> con un valor inicial de <code>true</code></h3> + +<pre class="brush: js notranslate">var btrue = new Boolean(true); +var btrueString = new Boolean('true'); +var bfalseString = new Boolean('false'); +var bSuLin = new Boolean('Su Lin'); +var bArrayProto = new Boolean([]); +var bObjProto = new Boolean({}); +</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-boolean-objects', 'Boolean')}}</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.builtins.Boolean")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/es/docs/Glossary/Boolean">Boolean</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures#Boolean_type">Boolean primitivo</a></li> + <li><a href="https://es.wikipedia.org/wiki/Tipo_de_dato_lógico">Tipo de dato <code>Boolean</code> (Wikipedia)</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/boolean/tosource/index.html b/files/es/web/javascript/reference/global_objects/boolean/tosource/index.html new file mode 100644 index 0000000000..e42f79f26b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/boolean/tosource/index.html @@ -0,0 +1,36 @@ +--- +title: Boolean.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource +tags: + - Boolean + - JavaScript + - Method + - Non-standard + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean/toSource +--- +<div> + {{JSRef("Objetos_globales", "Boolean")}} {{ Non-standard_header() }}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Devuelve una cadena que representa el código fuente del objeto.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<p><code>toSource() </code></p> +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> +<p>Ninguno.</p> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El método <code>toSource</code> devuelve los siguientes valores:</p> +<ul> + <li>Para objetos built-in <code>Boolean</code>, <code>toSource</code> devuelve la siguiente cadena indicando que el código fuente no está disponible:</li> +</ul> +<pre class="brush: js">function Boolean() { + [código nativo] +} +</pre> +<ul> + <li>Para instancias de <code>Boolean</code>, <code>toSource</code> devuelve una cadena representando el código fuente.</li> +</ul> +<p>Este método se utiliza habitualmente en llamadas internas por JavaScript y no en código explícito.</p> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline()}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getdate/index.html b/files/es/web/javascript/reference/global_objects/date/getdate/index.html new file mode 100644 index 0000000000..451f889003 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getdate/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getDate() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getDate +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDate +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getDate()</code></strong> devuelve el día del mes para la fecha especificada de acuerdo con la hora local.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDate()</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El valor devuelto por <code>getDate() es u</code>n número entero, entre 1 y 31, que representa el día del mes para la fecha dada según la hora local.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_getDate()">Uso de <code>getDate()</code></h3> + +<p>La segunda instrucción asigna el valor 25 a la variable <code>day</code>, en función del valor del objeto {{jsxref("Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var day = Xmas95.getDate(); + +console.log(day); // 25 +</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-date.prototype.getdate', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implantado en JavaScript 1.1.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getday/index.html b/files/es/web/javascript/reference/global_objects/date/getday/index.html new file mode 100644 index 0000000000..f384f21b71 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getday/index.html @@ -0,0 +1,124 @@ +--- +title: Date.prototype.getDay() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getDay +tags: + - Date + - JavaScript + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getDay +--- +<div>{{JSRef}}</div> + +<p><code>El método </code><strong><code>getDay()</code></strong> devuelve el día de la semana de la fecha especificada en función de la fecha local; siendo 0 (Domingo) el primer día.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getDay()</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El valor devuelto por <code>getDay()</code> es un entero correspondiente al día de la semana; siendo 0 (Domingo) el primer día, 1 (Lunes) el segundo, etcétera. </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usos_de_getDay()"><code>Usos de getDay()</code></h3> + +<p>La segunda sentencia asigna el valor 1 a <code>weekday, </code>basado en el valor del objeto Xmas95 {{jsxref("Date")}}. December 25, 1995, que corresponde a Lunes.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var weekday = Xmas95.getDay(); + +console.log(weekday); // 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('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JS 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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áisco</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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDay()")}}</li> + <li>{{jsxref("Date.prototype.setDate()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/getfullyear/index.html new file mode 100644 index 0000000000..0d047fbbc3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getfullyear/index.html @@ -0,0 +1,67 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear +tags: + - Fecha + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getFullYear +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getFullYear()</code></strong> devuelve el año de la fecha indicada acorde a la hora local.</p> + +<p>Usa este método en lugar del método {{jsxref("Date.prototype.getYear()", "getYear()")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getfullyear.html","shorter")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>dateObj</var>.getFullYear()</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un número correspondiente al año de la fecha indicada, según la hora local.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor devuelto por <code>getFullYear()</code> es un número absoluto. Para fechas entre los años 1000 y 9999, <code>getFullYear()</code> devuelve un número de cuatro cifras, por ejemplo, 1995. Utiliza esta función para obtener un año que cumpla con los años posteriores al 2000.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_getFullYear">Utilizando getFullYear()</h3> + +<p>El siguiente ejemplo asigna el valor de cuatro dígitos del año actual a la variable <code>year</code>.</p> + +<pre class="brush: js notranslate">var today = new Date(); +var year = today.getFullYear(); +</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-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.Date.getFullYear")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getYear()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/gethours/index.html b/files/es/web/javascript/reference/global_objects/date/gethours/index.html new file mode 100644 index 0000000000..b669c976c7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/gethours/index.html @@ -0,0 +1,119 @@ +--- +title: Date.prototype.getHours() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getHours +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getHours()</code></strong> retorna la hora de la fecha especificada, de acuerdo a la hora local.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getHours()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un número entero, entre 0 y 23, representando la hora de la fecha dada de acuerdo a la hora local.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_getHours()">Usando <code>getHours()</code></h3> + +<p>La segunda sentencia abajo asigna el valor 23 a la variable hours, basado en el valor del objeto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var hours = Xmas95.getHours(); + +console.log(hours); // 23 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicion inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_tambien">Ver tambien</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setHours()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html b/files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html new file mode 100644 index 0000000000..cf673a530a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.getMilliseconds() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds +tags: + - Fecha + - Milisegundos + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getMilliseconds()</code></strong> devuelve la cantidad de milisegundos en el objeto fecha especificado de acuerdo a la hora local.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMilliseconds()</code></pre> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>Un número, entre 0 y 999, que representa la cantidad de milisegundos en la fecha dada, de acuerdo a la hora local.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_getMilliseconds()">Usando <code>getMilliseconds()</code></h3> + +<p>El siguiente ejemplo asigna la cantidad de milisegundos de la hora actual a la variable <code>milisegundos</code>:</p> + +<pre class="brush: js">var ahora = new Date(); +var milisegundos = ahora.getMilliseconds(); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<h2 id="CompatibilityTable">{{CompatibilityTable}}</h2> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getminutes/index.html b/files/es/web/javascript/reference/global_objects/date/getminutes/index.html new file mode 100644 index 0000000000..9b144239b9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getminutes/index.html @@ -0,0 +1,118 @@ +--- +title: Date.prototype.getMinutes() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMinutes +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getMinutes()</code></strong> devuelve los minutos de la fecha especificada en función de la hora local. </p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMinutes()</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Devuelve">Devuelve</h3> + +<p>El valor devuelto por <code>getMinutes()</code> es un número entero entre 0 y 59.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_getMinutes()"><code>Uso de getMinutes()</code></h3> + +<p>La segunda declaración del código mostrado a continuación le asigna el valor 15 a la variable <code>minutos</code>, basado en el valor del {{jsxref("Global_Objects/Date", "Date")}} <code>objeto Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var minutos = Xmas95.getMinutes(); + +console.log(minutos); // 15 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setMinutes()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getmonth/index.html b/files/es/web/javascript/reference/global_objects/date/getmonth/index.html new file mode 100644 index 0000000000..08a7e1d143 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getmonth/index.html @@ -0,0 +1,125 @@ +--- +title: Date.prototype.getMonth() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getMonth +tags: + - Date + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getMonth +--- +<div>{{JSRef}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El método getMonth() devuelve el mes del objeto Date según la hora local, donde el número cero indica el primer mes del año.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getMonth()</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Resultado">Resultado</h3> + +<p>El valor devuelto por getMonth() es un entero entre 0 y 11, donde 0 corresponde a Enero, 1 a Febrero y así sucesivamente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_getMonth()">Usando <code>getMonth()</code></h3> + +<p>En el siguiente ejemplo, la segunda línea asigna el valor 11 a la variable mes, basado en el valor del objeto {{jsxref("Date")}} N<code>avidad</code>.</p> + +<pre class="brush: js">var Navidad = new Date('December 25, 2014 23:15:30'); +var mes = Navidad.getMonth(); + +console.log(mes); // 11 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Primera definición. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para 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="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setMonth()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getseconds/index.html b/files/es/web/javascript/reference/global_objects/date/getseconds/index.html new file mode 100644 index 0000000000..875fe3f48b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getseconds/index.html @@ -0,0 +1,83 @@ +--- +title: Date.prototype.getSeconds() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds +tags: + - Fecha + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getSeconds +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getSeconds()</code></strong> devuelve los segundos en la fecha especificada de acuerdo a la hora local.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-getseconds.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getSeconds()</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un número entero, entro 0 y 59, representando los segundos en la fecha dada de acuerdo a la hora local.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_getSeconds()">Utilizando <code>getSeconds()</code></h3> + +<p>La segunda sentencia asigna el valor 30 a la variable <code>seconds</code>, en base al valor del objeto {{jsxref("Global_Objects/Date", "Date")}} <code>Xmas95</code>.</p> + +<pre class="brush: js">var Xmas95 = new Date('December 25, 1995 23:15:30'); +var seconds = Xmas95.getSeconds(); + +console.log(seconds); // 30 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.getSeconds")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setSeconds()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/gettime/index.html b/files/es/web/javascript/reference/global_objects/date/gettime/index.html new file mode 100644 index 0000000000..f08882be5e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/gettime/index.html @@ -0,0 +1,140 @@ +--- +title: Date.prototype.getTime() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getTime +tags: + - Date + - Metodo getTime() + - Referencia + - getTime +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getTime +--- +<div>{{JSRef("Global_Objects", "Date")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <strong><code>getTime()</code></strong> devuelve el valor numérico correspondiente a la hora para la fecha especificada según la hora universal.</p> + + + +<p>Puede utilizar este método para ayudar a asignar una fecha y hora a otro objeto {{jsxref("Global_Objects/Date", "Date")}}. Este método es funcionalmente equivalente al metodo {{jsxref("Date.valueof", "valueOf()")}}.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.getTime()</code> +</pre> + +<h3 id="Returns" name="Returns">Valor devuelto</h3> + +<p>El valor devuelto por el método <code>getTime()</code> es un número de milisegundos desde el 1 de enero de 1970 00:00:00 UTC.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Ejemplo_Uso_de_getTime_para_copiar_fechas.">Ejemplo: Uso de <code>getTime()</code> para copiar fechas.</h3> + +<p>Construir un objeto de fecha con el mismo valor de tiempo.</p> + +<pre class="brush: js notranslate">var birthday = new Date(1994, 12, 10); +var copy = new Date(); +copy.setTime(birthday.getTime()); +</pre> + +<h3 id="Ejemplo_Medir_el_tiempo_de_ejecución">Ejemplo: Medir el tiempo de ejecución</h3> + +<p>Restando dos llamadas <code>getTime() </code>subsiguientes en objetos {{jsxref("Global_Objects/Date", "Date")}} recién generados, dé el intervalo de tiempo entre estas dos llamadas. Esto se puede utilizar para calcular el tiempo de ejecución de algunas operaciones.</p> + +<pre class="brush: js notranslate">var end, start; + +start = new Date(); +for (var i = 0; i < 1000; i++) { + Math.sqrt(i); +} +end = new Date(); + +console.log('Operation took ' + (end.getTime() - start.getTime()) + ' msec'); +</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>Standard</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.setTime()")}}</li> + <li>{{jsxref("Date.prototype.valueOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html new file mode 100644 index 0000000000..f2133bfc02 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html @@ -0,0 +1,121 @@ +--- +title: Date.prototype.getUTCFullYear() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getUTCFullYear()</code></strong> devuelve el año en la fecha especificada en tiempo universal.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>objectoFecha</var>.getUTCFullYear()</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un número que representa el año en la fecha representada por el <code><var>objectoFecha</var></code> en tiempo universal.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor devuelto por <code>getUTCFullYear()</code> es un número que no está afectado por el efecto año 2000, por ejemplo, 1995.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Empleo_de_getUTCFullYear()">Empleo de <code>getUTCFullYear()</code></h3> + +<p>El siguiente ejemplo asigna el valor de cuatro digitos del año actual a la variable <code>year</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getUTCFullYear(); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/getutchours/index.html b/files/es/web/javascript/reference/global_objects/date/getutchours/index.html new file mode 100644 index 0000000000..1e7a7a1ce2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/getutchours/index.html @@ -0,0 +1,117 @@ +--- +title: Date.prototype.getUTCHours() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours +translation_of: Web/JavaScript/Reference/Global_Objects/Date/getUTCHours +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>getUTCHours()</code></strong> retorna las horas especificadas en la fecha deacuerdo al horario universal.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getUTCHours()</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>An integer number, between 0 and 23, representing the hours in the given date according to universal time.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_getUTCHours()">Using <code>getUTCHours()</code></h3> + +<p>The following example assigns the hours portion of the current time to the variable <code>hours</code>.</p> + +<pre class="brush: js">var today = new Date(); +var hours = today.getUTCHours(); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Date.prototype.getHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/index.html b/files/es/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..20e05539e5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,132 @@ +--- +title: Date +slug: Web/JavaScript/Referencia/Objetos_globales/Date +tags: + - Date + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div>{{JSRef("Objetos_globales", "Date")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Permite trabajar con fechas y horas.</p> + +<h2 id="Se_Crea_Con" name="Se_Crea_Con">El constructor</h2> + +<p>El constructor <code>Date</code>:</p> + +<pre class="brush: js">new Date() +new Date(<em>milisegundos</em>) +new Date(<em>cadenaFecha</em>) +new Date(<em>año_num</em>,<em>mes_num</em>,<em>dia_num</em> + [,<em>hor_num</em>,<em>min_num</em>,<em>seg_num</em>,<em>mils_num</em>]) +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>milisegundos</code></dt> + <dd>Valor entero que representa el número de milisegundos desde las 00:00:00 UTC del 1 de enero de 1970.</dd> +</dl> + +<dl> + <dt><code>cadenaFecha</code></dt> + <dd>Valor de tipo cadena que representa una fecha. La cadena debería estar en un formato reconocido por el método {{jsxref("Date.parse()")}}.</dd> +</dl> + +<dl> + <dt><code>año_num, mes_num, dia_num</code></dt> + <dd>Valores enteros con las representaciones de las partes de una fecha. Como valor entero, el mes se representa de 0 a 11, con 0=enero and 11=diciembre.</dd> +</dl> + +<dl> + <dt><code>hor_num, min_num, seg_num, mils_num</code></dt> + <dd>Valores enteros que representan las partes de una hora completa.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Si no proporciona argumentos, el constructor crea un objeto <code>Date</code> con la hora y fecha de hoy según la hora local.</p> + +<p><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">Si proporciona algun</span><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">os argumentos, debe proporcionar al menos 2 argumentos.</span> Los argumentos vacíos se establecen a 0 (ó 1 si falta el día). </p> + +<p>La fecha se mide en milisegundos desde la media noche exacta del 01 de enero de 1970 en formato UTC. Un día contiene 86.400.000 milisegundos. El rango del objeto Date va desde -100,000,000 días hasta 100,000,000 días respecto del 01 de enero de 1970 UTC.</p> + +<p>El objeto <code>Date</code> proporciona un comportamiento uniforme entre plataformas.</p> + +<p>El objeto <code>Date</code> soporta métodos UTC (universales), además de métodos horarios locales. UTC, también conocido como Greenwich Mean Time (GMT), se refiere a la hora según el Estádar Horario Mundial (World Time Standard). La hora local es la hora establecida por el ordenador donde se ejecuta JavaScript.</p> + +<p>Por compatibilidad con los cálculos del nuevo milenio (en otras palabras, para tener en cuenta el efecto 2000), debería especificar siempre el año completo; por ejemplo, utilice 1998, y no 98. Para ayudarle a especificar el año completo, JavaScript incluye los métodos {{jsxref("Date.prototype.getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()")}}, y {{jsxref("Date.prototype.setUTCFullYear()")}}.</p> + +<p>El siguiente ejemplo devuelve el tiempo transcurrido entre <code>horaA</code> y <code>horaB</code> en milisegundos.</p> + +<pre class="eval">horaA = new Date(); +// Sentencias que realizan alguna acción. +horaB = new Date(); +diferenciaHoras = horaB - horaA; +</pre> + +<h2 id="Propiedades" name="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Date.prototype")}}</dt> + <dd>Permite añadir propiedades a un objeto <code>Date</code>.</dd> +</dl> + +<p>{{ jsOverrides("Function", "properties", "prototype") }}</p> + +<h2 id="M.C3.A9todos_Est.C3.A1ticos" name="M.C3.A9todos_Est.C3.A1ticos">Métodos</h2> + +<dl> + <dt>{{jsxref("Date.now()")}}</dt> + <dd>Devuelve el valor numérico correspondiente a la hora actual.</dd> +</dl> + +<dl> + <dt>{{jsxref("Date.parse()")}}</dt> + <dd>Transforma una cadena que representa una fecha, y devuelve el número de milisegundos desde el 1 de enero de 1970, hora local 00:00:00.</dd> +</dl> + +<dl> + <dt>{{jsxref("Date.UTC()")}}</dt> + <dd>Acepta los mismos parámetros que la forma más larga del constructor, y devuelve el número de milisegundos en un objeto <code>Date</code> desde el 1 de enero de 1970, hora universal 00:00:00.</dd> +</dl> + +<h2 id="M.C3.A9todos" name="M.C3.A9todos">Instancias de <code>Date</code></h2> + +<h3 id="Métodos">Métodos</h3> + +<p>{{ page("/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/prototype", "M.C3.A9todos") }}</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Diversas_maneras_de_asignar_fechas" name="Ejemplo:_Diversas_maneras_de_asignar_fechas">Ejemplo: Diversas maneras de asignar fechas</h3> + +<p>Los ejemplos siguientes muestran diversos modos de asignar fechas:</p> + +<pre class="brush: js">hoy = new Date(); +cumpleanos = new Date("December 17, 1995 03:24:00"); +cumpleanos = new Date(1995,11,17); +cumpleanos = new Date(1995,11,17,3,24,0); +</pre> + +<h3 id="Ejemplo:_Calcular_el_tiempo_transcurrido" name="Ejemplo:_Calcular_el_tiempo_transcurrido">Ejemplo: Calcular el tiempo transcurrido</h3> + +<p>Los siguientes ejemplos muestran como determinar el tiempo transcurrido entre dos fechas:</p> + +<pre class="brush: js">// usando métodos estáticos +var inicio = Date.now(); +// el evento cuyo tiempo ha transcurrido aquí: +hacerAlgoPorAlgunTiempo(); +var fin = Date.now(); +var transcurso = fin - inicio; // tiempo en milisegundos +</pre> + +<pre class="brush: js">// si tiene objetos Date +var inicio = new Date(); +// el evento cuyo tiempo ha transcurrido aquí: +hacerAlgoPorAlgunTiempo(); +var fin = new Date(); +var transcurso = fin.getTime() - inicio.getTime(); // tiempo en milisegundos +</pre> diff --git a/files/es/web/javascript/reference/global_objects/date/now/index.html b/files/es/web/javascript/reference/global_objects/date/now/index.html new file mode 100644 index 0000000000..6c611710bb --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/now/index.html @@ -0,0 +1,30 @@ +--- +title: Date.now() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/now +tags: + - Date + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/now +--- +<div> + {{JSRef("Objetos_globales", "Date")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Devuelve el número de milisegundos transcurridos desde las 00:00:00 UTC del 1 de enero de 1970.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">var <em>fechaEnMiliseg</em> = Date.now(); +</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El método <code>now</code> devuelve los milisegundos transcurridos desde las 00:00:00 UTC del 1 de enero de 1970 justo hasta ahora como un {{jsxref("Number")}}.</p> +<p>Cuando se usa <code>now</code> para crear registros temporales or identificadores únicos, tenga en cuenta que la precisión de Windows puede ser de 15 milisegundos (vea {{Bug(363258)}}), lo que puede provocar valores iguales si <code>now</code> se llama múltiples veces en un breve intervalo de tiempo.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_now" name="Ejemplo:_Usando_now">Ejemplo: Usando <code>now</code></h3> +<p>El siguiente ejemplo usa <code>now</code> para crear un registro temporal.</p> +<pre class="brush:js">var registro = Date.now(); +</pre> +<h2 id="Vea_También">Vea También</h2> +<ul> + <li>{{domxref("window.performance.now")}}</li> + <li>{{domxref("console.time")}} / {{domxref("console.timeEnd")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/parse/index.html b/files/es/web/javascript/reference/global_objects/date/parse/index.html new file mode 100644 index 0000000000..15536775d7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/parse/index.html @@ -0,0 +1,35 @@ +--- +title: Date.parse() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/parse +tags: + - Date + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Date/parse +--- +<div> + {{JSRef("Objetos_globales", "Date")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Transforma una cadena con la representación de una fecha y hora, y devuelve el número de milisegundos desde las 00:00:00 del 1 de enero de 1970, hora local.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">Date.parse(cadenaFecha)</pre> +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> +<dl> + <dt> + <code>cadenaFecha</code></dt> + <dd> + Una cadena con la representación de una fecha y hora.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El método <code>parse</code> toma una cadena con una fecha en inglés (como por ejemplo "<code>Dec 25, 1995</code>") y devuelve el número de milisegundos desde las 00:00:00 del 1 de enero de 1970 (hora local). Esta función es útil para establecer valores de fecha basados en cadenas con fechas, por ejemplo junto con el método {{jsxref("Date.prototype.setTime()")}} y el objeto {{jsxref("Date")}}.</p> +<p>Dada una cadena con una hora, <code>parse</code> devuelve el valor de la hora. Acepta la sintaxis del estándar IETF (en inglés): "<code>Mon, 25 Dec 1995 13:30:00 GMT</code>". Comprende las abreviaciones de la zona horaria continental de Estados Unidos, pero para su uso general, use la diferencia de zona horaria, como por ejemplo, "<code>Mon, 25 Dec 1995 13:30:00 GMT+0430</code>" (4 horas, 30 minutos al oeste del meridiano de Greenwich). Si no se especifica una zona horaria, se asumirá la zona de la hora local. GMT y UTC se consideran equivalentes.</p> +<p>Debido a que <code>parse</code> es un método estático de <code>Date</code>, úselo siempre como <code>Date.parse()</code>, en vez de como un método del objeto <code>Date</code> que usted cree.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_parse" name="Ejemplo:_Usando_parse">Ejemplo: Usando <code>parse</code></h3> +<p>Si <code>IPOfecha</code> es un objeto existente <code>Date</code>, entonces usted puede asignarlo a 9 de agosto de 1995 de la manera siguiente:</p> +<pre class="brush: js">IPOfecha.setTime(Date.parse("Aug 9, 1995")) ; +</pre> +<h2 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h2> +<ul> + <li>{{jsxref("Date.UTC()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/setfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/setfullyear/index.html new file mode 100644 index 0000000000..e272f78fc3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/setfullyear/index.html @@ -0,0 +1,133 @@ +--- +title: Date.prototype.setFullYear() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setFullYear +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>setFullYear()</code></strong> fija el año completo para una fecha específica de acuerdo a la zona horaria local. Devuelve un nuevo valor de tipo timestamp.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setFullYear(<var>valorAño</var>[, <var>valorMes</var>[, <var>valorDia</var>]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valorAño</code></dt> + <dd>Valor de tipo entero que contiene el valor numérico del año, por ejemplo, 1995.</dd> + <dt><code>valorMes</code></dt> + <dd>Opcional. Valor entero entre 0 y 11 que representa el mes de Enero a Diciembre.</dd> + <dt><code>valorDia</code></dt> + <dd>Opcional. Valor entero entre 1 y 31 que representa el día del mes. Si se especifica este parámetro debe incluirse también el parámetro <code>valorMes</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El número de milisegundos entre 1 Enero 1970 00:00:00 UTC y a la fecha actualizada con el valor del año.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si en la invocación al método no se especifican los parámetros <code>valorMes</code> y <code>valorDia, se emplean en su lugar los valores devueltos por </code> {{jsxref("Date.prototype.getMonth()", "getMonth()")}} y {{jsxref("Date.prototype.getDate()", "getDate()")}}.</p> + +<p>Si se especifica un parámetro con un valor fuera del rango esperado, <code>setFullYear()</code> intenta actualizar el resto de parámetros y la informacion de fecha en el objeto {{jsxref("Date")}} de manera consistente. Por ejemplo, si se especifica el valor 15 para el parametro <code>valorMes</code>, el parámetro año se incrementa en 1 (<code>valorAño+ 1</code>), y se emplea 3 como valor para el parámetro mes.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_setFullYear()">Uso de <code>setFullYear()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setFullYear(1997); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setYear()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/setmonth/index.html b/files/es/web/javascript/reference/global_objects/date/setmonth/index.html new file mode 100644 index 0000000000..04aa9ec82a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/setmonth/index.html @@ -0,0 +1,78 @@ +--- +title: Date.prototype.setMonth() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/setMonth +translation_of: Web/JavaScript/Reference/Global_Objects/Date/setMonth +--- +<div>{{JSRef}}</div> + +<div>El método <strong><code>setMonth()</code></strong> establece el mes para una fecha específica de acuerdo con el año establecido actualmente.</div> + +<div>{{EmbedInteractiveExample("pages/js/date-setmonth.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>[,<em>dayValue</em>])</code></pre> + +<h3 id="Versiones_anteriores_a_JavaScript_1.3">Versiones anteriores a JavaScript 1.3</h3> + +<pre class="syntaxbox"><code><var>dateObj</var>.setMonth(<var>monthValue</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>monthValue</code></dt> + <dd>Un entero entre 0 y 11, representando los meses de Enero a Diciembre.</dd> + <dt><code>dayValue</code></dt> + <dd>Opcional. Un entero de 1 a 31, representando el dia del mes.</dd> +</dl> + +<h3 id="Resultado">Resultado</h3> + +<p>El valor retornado es el número de milisegundos entre el 1 de Enero de 1970 00:00:00 UTC y la fecha actualizada.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si no especificas el parámetro <code>dayValue</code>, el valor retornado del metodo {{jsxref("Date.prototype.getDate()", "getDate()")}} es usado.</p> + +<p>Si un parámetro especificado esta fuera del rango esperado, <code>setMonth()</code> intenta actualizar la información de la fecha en el objeto {{jsxref("Date")}} en consecuencia. Por ejemplo, si usted usa 15 para <code>monthValue</code>, usa 12 para incrementar el año en 1, y los 3 restantes para calcular el mes.</p> + +<p>El día actual del mes tendrá un impacto en el comportamiento de este método. Conceptualmente agregará el número de días dados por el día actual del mes al primer día del nuevo mes especificado como parámetro, para devolver la nueva fecha. Por ejemplo, si el valor actual es el 31 de agosto de 2016, llamar a setMonth con un valor de 1 devolverá el 2 de marzo de 2016. Esto se debe a que en febrero de 2016 tuvo 29 días.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_setMonth">Usando <code>setMonth()</code></h3> + +<pre class="brush: js">var theBigDay = new Date(); +theBigDay.setMonth(6); + +//Cuidado con las transiciones de fin de mes +var endOfMonth = new Date(2016, 7, 31); +endOfMonth.setMonth(1); +console.log(endOfMonth); //Wed Mar 02 2016 00:00:00 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción.</p> + +<p>{{Compat("javascript.builtins.Date.setMonth")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.getMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/todatestring/index.html b/files/es/web/javascript/reference/global_objects/date/todatestring/index.html new file mode 100644 index 0000000000..b0a3b5f431 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/todatestring/index.html @@ -0,0 +1,88 @@ +--- +title: Date.prototype.toDateString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toDateString +tags: + - Fecha + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toDateString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toDateString()</code></strong> devuelve la porción de la fecha de un objeto {{jsxref("Date")}} en formato humano legible en Inglés Americano.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toDateString()</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena que representa la porción de fecha de un determinado objeto {{jsxref("Date")}} en formato humano legible en Inglés Americano.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Las instancias de {{jsxref("Date")}} representan momentos especificos en el tiempo. Un llamado a {{jsxref("Date.prototype.toString()", "toString()")}} devolverá la fecha formateada en un formato humano legible en Inglés Americano. En <a href="/en-US/docs/SpiderMonkey">SpiderMonkey</a>, esto consiste en la porción de la fecha (día, mes, y año) seguido por la porción de la hora (horas, minutos, segundos, y zona horaria). Algunas veces sólo se necesita obtener una cadena de la porción de la hora; esto puede lograrse con el método <code>toTimeString()</code>.</p> + +<p>El método <code>toDateString()</code> es especialmente útil, pues los distintos motores compatibles que implementan <a href="/en-US/docs/ECMAScript">ECMA-262</a> pueden diferir en la cadena obtenida al ejecutar {{jsxref("Date.prototype.toString()", "toString()")}} para los objetos de tipo {{jsxref("Date")}}, pues dicho formato depende de la implementación, por lo que es posible que el enfoque de la segmentación simple de cadenas no produzca resultados consistentes entre distintos motores.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_básico_de_toDateString()">Uso básico de <code>toDateString()</code></h3> + +<pre class="brush: js">var d = new Date(1993, 5, 28, 14, 39, 7); + +console.log(d.toString()); // logs Wed Jun 28 1993 14:39:07 GMT-0600 (PDT) +console.log(d.toDateString()); // logs Wed Jun 28 1993 +</pre> + +<div class="note"> +<p><strong>Nota:</strong> Los meses son 0-indexados cuando son utilizados como parámetros de {{jsxref("Date")}} (Siendo así, el cero (0) corresponde a Enero y el once (11) a Diciembre).</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Epecificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.3', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.todatestring', 'Date.prototype.toDateString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quisieras contrubuir con esos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y genera un pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toDateString")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/toisostring/index.html b/files/es/web/javascript/reference/global_objects/date/toisostring/index.html new file mode 100644 index 0000000000..b3461f355d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/toisostring/index.html @@ -0,0 +1,144 @@ +--- +title: Date.prototype.toISOString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toISOString +tags: + - Date + - JavaScript + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toISOString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toISOString()</code></strong> devuelve una cadena en el formato <em>simplificado</em> extendido ISO (<a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a>), que siempre mide 24 o 27 caracteres de largo: (<code><var>YYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code> or <code><var>±</var><var>YYYYYY</var>-<var>MM</var>-<var>DD</var>T<var>HH</var>:<var>mm</var>:<var>ss.sss</var>Z</code>, respectivamente). El uso horario no tiene retraso respecto a UTC, como lo denota el sufijo <code>"Z"</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toISOString()</code> +</pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena que representa la fecha dada en el formato <a href="http://en.wikipedia.org/wiki/ISO_8601">ISO 8601</a> según la hora universal.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toISOString">Usando <code>toISOString()</code></h3> + +<pre class="brush: js notranslate">var today = new Date('05 October 2011 14:48 UTC'); + +console.log(today.toISOString()); // Devuelve 2011-10-05T14:48:00.000Z +</pre> + +<p>El ejemplo de arriba usa una cadena no estándar que podría no ser interpretada correctamente en navegadores distintos de Firefox.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método fue estandarizado en ECMA-262 5° edición. Los motores javascript que no han sido actualizados para soportar este método pueden solucionar su ausencia de la siguiente manera:</p> + +<pre class="brush: js notranslate">if (!Date.prototype.toISOString) { + (function() { + + function pad(number) { + if (number < 10) { + return '0' + number; + } + return number; + } + + Date.prototype.toISOString = function() { + return this.getUTCFullYear() + + '-' + pad(this.getUTCMonth() + 1) + + '-' + pad(this.getUTCDate()) + + 'T' + pad(this.getUTCHours()) + + ':' + pad(this.getUTCMinutes()) + + ':' + pad(this.getUTCSeconds()) + + '.' + (this.getUTCMilliseconds() / 1000).toFixed(3).slice(2, 5) + + 'Z'; + }; + + }()); +} +</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('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en javascript 1.8</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatIE("9")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte 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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/tojson/index.html b/files/es/web/javascript/reference/global_objects/date/tojson/index.html new file mode 100644 index 0000000000..7d44a716c2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/tojson/index.html @@ -0,0 +1,61 @@ +--- +title: Date.prototype.toJSON() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toJSON +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toJSON +--- +<div>{{JSRef}}</div> + +<p>El metodo <strong><code>toJSON()</code></strong> retorna una representacion de cadena del objeto {{jsxref("Date")}}</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tojson.html")}}</div> + +<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envienos un pull request.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>dateObj</var>.toJSON()</code></pre> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una representación de cadena de la fecha dada.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>{{jsxref("Date")}} las instancias se refieren a un momento específico en el tiempo. Llamando a <code>toJSON()</code> retorna un string (usando {{jsxref("Date.prototype.toISOString()", "toISOString()")}}) representando el {{jsxref("Date")}} valor del objeto. Este método generalmente está destinado, de forma predeterminada, a serializar de manera útil {{jsxref("Date")}} objetos durante la serialización <a href="/en-US/docs/Glossary/JSON">JSON</a> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toJSON">Usando <code>toJSON()</code></h3> + +<pre class="brush:js notranslate">var jsonDate = (new Date()).toJSON(); +var backToDate = new Date(jsonDate); + +console.log(jsonDate); //2015-10-26T07:46:36.611Z +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_buscadores">Compatibilidad en buscadores</h2> + +<p class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos un pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toJSON")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..26b773ba9a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html @@ -0,0 +1,159 @@ +--- +title: Date.prototype.toLocaleDateString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString +tags: + - Fecha + - IANA formato horario + - Internacionalizacion + - JavaScript + - Prototipo + - Prototype + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toLocaleDateString()</code></strong> devuelve una cadena con una representación de la fecha sensible al lenguaje. Los nuevos argumentos <code>locales</code> y <code>options</code> permiten a las aplicaciones especificar el lenguaje cuyas convenciones de formato deben usarse y permitir personalizar el comportamiento de la función. En implementaciones anteriores, las cuales ignoran los argumentos <code>locales</code> y <code>options</code>, el configuración regional usada y el formato de cadena devuelto dependen completamente de la implementación.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocaledatestring.html")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo está almacenado en el repositorio de GitHub. Si usted quiere 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 envíanos una solicitud de extracción (pull request).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>dateObj</var>.toLocaleDateString([<var>locales</var> [, <var>options</var>]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Compruebe la sección de <a href="#Browser_compatibility">Compatibilidad con su navegador</a> para ver qué navegadores suportan los argumentos <code>locales</code> y <code>options</code>, y el Ejemplo: <a href="#Checking_for_support_for_locales_and_options_arguments">Comprobando el soporte para los argumentos locales y options</a> para detectar dicha característica.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat', 'Parameters')}}</div> + +<p>El valor por defecto para cada propiedad del componente date-time es {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code>, y <code>day</code> se asumen tener el valor <code>"numeric"</code>.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena representando una porción de fecha de la instancia {{jsxref("Global_Objects/Date", "Date")}} indicada de acuerdo con las convenciones específicas del lenguaje.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toLocaleDateString">Usando <code>toLocaleDateString()</code></h3> + +<p>En un caso básico sin especificar una configuración regional, se devolverá una cadena formateada en la configuración regional y las opciones por defecto.</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleDateString() sin argumentos dependientes de la implementación, +// de la configuración regional por defecto y la zona horaria por defecto +console.log(date.toLocaleDateString()); +// → "12/11/2012" si se ejecuta en una configuración regional en-US con zona horaria America/Los_Angeles +</pre> + +<h3 id="Comprobando_el_soporte_para_los_argumentos_locales_y_options">Comprobando el soporte para los argumentos <code>locales</code> y <code>options</code></h3> + +<p>Los argumentos <code>locales</code> y <code>options</code> no son soportados aún por todos los navegadores. Para comprobar si una implementación los soporta, puede usar el requerimiento To check whether an implementation supports them already, you can use the requirement that illegal language tags are rejected with a {{jsxref("RangeError")}} exception:</p> + +<pre>function toLocaleDateStringSupportsLocales() { + try { + new Date().toLocaleDateString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} + +Using <code>locales</code></pre> + +<h3 id="Usando_locales">Usando <code>locales</code></h3> + +<p>Este ejemplo muestra algunas de las variaciones en los formatos de configuración regional de las fechas. Para poder obtener el formato del idioma usado en la interfaz de usuario de su aplicación, asegúrese de especificar el idioma (y posiblemente algunos idiomas alternativos) usando el argumento <code>locales</code>:</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// Los formatos de abajo asumen la zona horaria local de la configuración regional; +// America/Los_Angeles para US + +// El inglés de USA hace uso de orden mes-día-año +console.log(date.toLocaleDateString('en-US')); +// → "12/19/2012" + +// El inglés británico hace uso del orden día-mes-año +console.log(date.toLocaleDateString('en-GB')); +// → "20/12/2012" + +// El coreano hace uso del orden año-mes-día +console.log(date.toLocaleDateString('ko-KR')); +// → "2012. 12. 20." + +// Evento para persa. Es difícil convertir manualmente la fecha a Solar Hijri +console.log(date.toLocaleDateString('fa-IR')); +// → "۱۳۹۱/۹/۳۰" + +// El árave en la mayoría de paises arabehablantes hace uso de los dígitos árabes +console.log(date.toLocaleDateString('ar-EG')); +// → "<span dir="rtl">٢٠/١٢/٢٠١٢</span>" + +// Para el japonés, las aplicaciones quieren poder usar el calendario japonés, +// donde 2012 era el año 24 de la era Heisei +console.log(date.toLocaleDateString('ja-JP-u-ca-japanese')); +// → "24/12/20" + +// Cuando solicite un idioma que no esté soportado, por ejemplo el balinés, +// incluya un idioma alternativo, en este caso el indonesio +console.log(date.toLocaleDateString(['ban', 'id'])); +// → "20/12/2012" +</pre> + +<h3 id="Usando_options">Usando <code>options</code></h3> + +<p>Los resultados aportados por <code>toLocaleDateString()</code> pueden ser personalizados usando el argumento <code>options</code>:</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// Solicita el día de la semana junto a una fecha larga +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(date.toLocaleDateString('de-DE', options)); +// → "Donnerstag, 20. Dezember 2012" + +// Una aplicación puede querer usar UTC y hacer que sea visible +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(date.toLocaleDateString('en-US', options)); +// → "Thursday, December 20, 2012, GMT" +</pre> + +<h2 id="Performance">Performance</h2> + +<p>Cuando se formatea números largos de fechas, es mejor crear un objeto {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} y usar la función aportada por esta propiedad {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaledatestring', 'Date.prototype.toLocaleDateString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada desde una estructura de datos. Si usted desea contribuir a los datos, por favor compruebe <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de extracción (pull request).</p> + +<p>{{Compat("javascript.builtins.Date.toLocaleDateString")}}</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html new file mode 100644 index 0000000000..77f48344d3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html @@ -0,0 +1,163 @@ +--- +title: Date.prototype.toLocaleString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toLocaleString()</code></strong> devuelve un cadena con la representación al idioma de la fecha especificada. <span class="tlid-translation translation" lang="es"><span title="">Los nuevos argumentos </span></span> <code>locales</code> <span class="tlid-translation translation" lang="es"><span title="">y </span></span> <code>options</code> <span class="tlid-translation translation" lang="es"><span title=""> permiten a las aplicaciones especificar el idioma cuyas convenciones de formato deben usarse y personalizar el comportamiento de la función</span></span>. <span class="tlid-translation translation" lang="es"><span title="">En implementaciones anteriores, ignoran los argumentos de las configuraciones </span></span><code>locales</code><span class="tlid-translation translation" lang="es"><span title=""> y </span></span><code>options</code> <span class="tlid-translation translation" lang="es"><span title=""> </span></span><span class="tlid-translation translation" lang="es"><span title="">, la configuración regional utilizada y la forma de la cadena devuelta dependen completamente de la implementación</span></span> .</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocalestring.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>dateObj</var>.toLocaleString([<var>locales</var>[, <var>options</var>]])</pre> + +<h3 id="Parametros">Parametros</h3> + +<p>Los argumentos <code>locales</code> y de <code>options</code> personalizan el comportamiento de la función y permiten que las aplicaciones especifiquen el lenguaje cuyas convenciones de formato deben ser utilizadas. En las implementaciones, que ignoran los argumentos, <code>locales</code> y <code>options</code>, el locale utilizado y la forma de la cadena devuelta dependen totalmente de la implementación.</p> + +<p>Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">constructor</a> de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat"><code>Intl.DateTimeFormat()</code> </a> para detalles en esos parametros y como se usan.</p> + +<p>El valor por defecto para cada componente <code>date-time</code> es {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code>, <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code>, y <code>day</code> son asumidas como <code>"numeric"</code>.</p> + +<h3 id="Return_value">Return value</h3> + +<p>A string representing the given date according to language-specific conventions.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_toLocaleString">Using <code>toLocaleString()</code></h3> + +<p>In basic use without specifying a locale, a formatted string in the default locale and with default options is returned.</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleString() without arguments depends on the implementation, +// the default locale, and the default time zone +console.log(date.toLocaleString()); +// → "12/11/2012, 7:00:00 PM" if run in en-US locale with time zone America/Los_Angeles +</pre> + +<h3 id="Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</h3> + +<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them already, you can use the requirement that illegal language tags are rejected with a {{jsxref("RangeError")}} exception:</p> + +<pre class="brush: js">function toLocaleStringSupportsLocales() { + try { + new Date().toLocaleString('i'); + } catch (e) { + return e instanceof RangeError; + } + return false; +} +</pre> + +<h3 id="Using_locales">Using <code>locales</code></h3> + +<p>This example shows some of the variations in localized date and time formats. In order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// formats below assume the local time zone of the locale; +// America/Los_Angeles for the US + +// US English uses month-day-year order and 12-hour time with AM/PM +console.log(date.toLocaleString('en-US')); +// → "12/19/2012, 7:00:00 PM" + +// British English uses day-month-year order and 24-hour time without AM/PM +console.log(date.toLocaleString('en-GB')); +// → "20/12/2012 03:00:00" + +// Korean uses year-month-day order and 12-hour time with AM/PM +console.log(date.toLocaleString('ko-KR')); +// → "2012. 12. 20. 오후 12:00:00" + +// Arabic in most Arabic speaking countries uses real Arabic digits +console.log(date.toLocaleString('ar-EG')); +// → "<span dir="rtl">٢٠/١٢/٢٠١٢ ٥:٠٠:٠٠ ص</span>" + +// for Japanese, applications may want to use the Japanese calendar, +// where 2012 was the year 24 of the Heisei era +console.log(date.toLocaleString('ja-JP-u-ca-japanese')); +// → "24/12/20 12:00:00" + +// when requesting a language that may not be supported, such as +// Balinese, include a fallback language, in this case Indonesian +console.log(date.toLocaleString(['ban', 'id'])); +// → "20/12/2012 11.00.00" +</pre> + +<h3 id="Using_options">Using <code>options</code></h3> + +<p>The results provided by <code>toLocaleString()</code> can be customized using the <code>options</code> argument:</p> + +<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// request a weekday along with a long date +var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; +console.log(date.toLocaleString('de-DE', options)); +// → "Donnerstag, 20. Dezember 2012" + +// an application may want to use UTC and make that visible +options.timeZone = 'UTC'; +options.timeZoneName = 'short'; +console.log(date.toLocaleString('en-US', options)); +// → "Thursday, December 20, 2012, GMT" + +// sometimes even the US needs 24-hour time +console.log(date.toLocaleString('en-US', { hour12: false })); +// → "12/19/2012, 19:00:00" +</pre> + +<h3 id="Avoid_comparing_formatted_date_values_to_static_values">Avoid comparing formatted date values to static values</h3> + +<p>Most of the time, the formatting returned by <code>toLocaleString()</code> is consistent. However, this might change in the future and isn't guaranteed for all languages — output variations are by design and allowed by the specification. Most notably, the IE and Edge browsers insert bidirectional control characters around dates, so the output text will flow properly when concatenated with other text.</p> + +<p>For this reason you cannot expect to be able to compare the results of <code>toLocaleString()</code> to a static value:</p> + +<pre class="brush: js; example-bad">"1/1/2019, 01:00:00" === new Date("2019-01-01T01:00:00Z").toLocaleString("en-US"); +// true in Firefox and others +// false in IE and Edge</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: See also this <a href="https://stackoverflow.com/questions/25574963/ies-tolocalestring-has-strange-characters-in-results">StackOverflow thread</a> for more details and examples.</p> +</div> + +<h2 id="Performance">Performance</h2> + +<p>When formatting large numbers of dates, it is better to create an {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} object and use the function provided by its {{jsxref("DateTimeFormat.prototype.format", "format")}} property.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocalestring', 'Date.prototype.toLocaleString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toLocaleString")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..c3954096f6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html @@ -0,0 +1,152 @@ +--- +title: Date.prototype.toLocaleTimeString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString +tags: + - Date + - Fecha + - Internacionalizacion + - JavaScript + - Method + - Prototype + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toLocaleTimeString()</code></strong> devuelve una cadena con una representación de la parte del tiempo de esta fecha sensible al idioma. Los nuevos argumentos <code>locales</code> y <code>options</code> le permiten a la aplicación especificar el idioma cuyas convenciones de formato deben usarse y personalizan el comportamiento de esta función. En implementaciones antiguas que ignoran los argumentos <code>locales</code> y <code>options</code> la localidad usada y la forma de la cadena devuelta son completamente dependientes de la implementación.</p> + +<div>{{EmbedInteractiveExample("pages/js/date-tolocaletimestring.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toLocaleTimeString([<var>locales[, </var><var>options</var>]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Los argumentos <code>locales</code> y <code>options</code> personalizan el comportamiento de la función y le permiten a la aplicación especificar el idioma cuyas convenciones de formato deben usarse. En las implementaciones que ignoran los argumentos <code>locales</code> y <code>options</code>, la localidad y la forma de la cadena devuelta son dependientes por completo de la implementación.</p> + +<p>Vea el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/DateTimeFormat">constructor <code>Intl.DateTimeFormat()</code></a> para los detalles de estos parámetros y sobre cómo usarlos.</p> + +<p>El valor predeterminado de cada componente de fecha-hora es {{jsxref("undefined")}}, pero si las propiedades <code>weekday</code>, <code>year</code>, <code>month</code> y <code>day</code> son todas {{jsxref("undefined")}}, entonces <code>year</code>, <code>month</code> y <code>day</code> se asumen como <code>"numeric"</code>.</p> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena representando la porción de tiempo de la instancia {{jsxref("Global_Objects/Date", "Date")}} dada, conforme a las convenciones específicas del idioma.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toLocaleTimeString">Usando <code>toLocaleTimeString()</code></h3> + +<p>En el uso básico sin especificar una localidad, una cadena con formato en la localidad y opciones predeterminadas es devuelta.</p> + +<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 12, 3, 0, 0)); + +// toLocaleTimeString() sin argumentos depende de la implementación, +// la localidad y la zona horaria predeterminadas +console.log(date.toLocaleTimeString()); +// → "21:00:00" si se ejecuta en la localidad es-MX con la zona horaria America/Mexico_City +</pre> + +<h3 id="Verificando_el_soporte_de_argumentos_locales_y_options">Verificando el soporte de argumentos <code>locales</code> y <code>options</code></h3> + +<p>Los argumentos <code>locales</code> y <code>options</code> aún no están soportados en todos los navegadores. Para verificar si alguna implementación ya los soporta, puede usar el requerimiento de que etiquetas inválidas son rechazadas con una excepción {{jsxref("RangeError")}}:</p> + +<pre class="brush: js">function toLocaleTimeStringSoportaLocales() { + try { + new Date().toLocaleTimeString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Usando_locales">Usando <code>locales</code></h3> + +<p>Este ejemplo muestra una de las variaciones en formatos de tiempo localizados. Para obtener el formato del idioma usado en la interfaz de su aplicación, asegúrese de especificar ese idioma (y posiblemente algunos de <em>fallback</em>) usando el argumento <code>locales</code>:</p> + +<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// los siguientes formatos asumen la zona horaria de la localidad; +// America/Los_Angeles para los EEUU + +// El inglés americano usa formato de 12 horas con AM/PM +console.log(fecha.toLocaleTimeString('en-US')); +// → "7:00:00 PM" + +// El inglés británico usa formato de 24 horas sin AM/PM +console.log(date.toLocaleTimeString('en-GB')); +// → "03:00:00" + +// El koreano usa formato de 12 horas con AM/PM +console.log(date.toLocaleTimeString('ko-KR')); +// → "오후 12:00:00" + +// En muchos países donde hablan árabe se usan dígitos árabes +console.log(date.toLocaleTimeString('ar-EG')); +// → "<span dir="rtl">٧:٠٠:٠٠ م</span>" + +// cuando se pide un idioma que puede no estar disponible, como +// balinés, incluya un idioma de respaldo, como en este caso, indonesio +console.log(date.toLocaleTimeString(['ban', 'id'])); +// → "11.00.00" +</pre> + +<h3 id="Usando_options">Usando <code>options</code></h3> + +<p>Los resultados provistos por <code>toLocaleTimeString()</code> pueden ser personalizados usando el argumento <code>options</code>:</p> + +<pre class="brush: js">var fecha = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)); + +// una aplicación puede querer usar UTC y visibilizarlo: +var options = { timeZone: 'UTC', timeZoneName: 'short' }; +console.log(date.toLocaleTimeString('en-US', options)); +// → "3:00:00 AM GMT" + +// algunas veces incluso en EEUU necesitan el tiempo en 24 horas +console.log(date.toLocaleTimeString('en-US', { hour12: false })); +// → "19:00:00" + +// mostrar únicamente horas y minutos, use options con la localidad predeterminada - usar un arreglo vacío +console.log(date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })); +// → "20:01" + +</pre> + +<h2 id="Rendimiento">Rendimiento</h2> + +<p>Cuando se da formato a un gran número de fechas, es mejor crear un objeto {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} y usar su método {{jsxref("DateTimeFormat.prototype.format", "format")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-date.prototype.tolocaletimestring', 'Date.prototype.toLocaleTimeString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toLocaleTimeString")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toTimeString()")}}</li> + <li>{{jsxref("Date.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/toutcstring/index.html b/files/es/web/javascript/reference/global_objects/date/toutcstring/index.html new file mode 100644 index 0000000000..4742a6eacf --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/toutcstring/index.html @@ -0,0 +1,105 @@ +--- +title: Date.prototype.toUTCString() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString +tags: + - Date + - JavaScript + - Method + - Prototype + - Reference + - UTC +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toUTCString +--- +<div>{{JSRef}}</div> + +<p><code>El método</code><strong><code>toUTCString()</code></strong> convierte una fecha en una cadena, utilizando <span class="tlid-translation translation" lang="es"><span title="">la zona horaria UTC.</span></span></p> + +<div>{{EmbedInteractiveExample("pages/js/date-toutcstring.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.toUTCString()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena que representa la fecha dada usando la zona horaria UTC</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor devuelto por <code>toUTCString()</code> es una cadena con la forma</p> + +<p><code>Www, dd Mmm yyyy hh:mm:ss GMT</code></p> + +<p>donde:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Www</td> + <td>Día de la semana, como tres letras (ej. Sun, Mon, ...)</td> + </tr> + <tr> + <td>dd</td> + <td>Día del mes, como dos dígitos, con cero a la izquierda si es necesario.</td> + </tr> + <tr> + <td>Mmm</td> + <td>Mes, como tres letras (ej. Jan, Feb, ...)</td> + </tr> + <tr> + <td>yyyy</td> + <td>Año, como cuatro o más dígitos con cero a la izquierda si es necesario.</td> + </tr> + <tr> + <td>hh</td> + <td>Hora, como dos dígitos con cero a la izquierda si es necesario.</td> + </tr> + <tr> + <td>mm</td> + <td>Minutos, como dos dígitos con cero a la izquierda si es necesario.</td> + </tr> + <tr> + <td>ss</td> + <td>Segundos, como dos dígitos con cero a la izquierda si es necesario.</td> + </tr> + </tbody> +</table> + +<p>Antes de ECMAScript 2018, el formato del valor devuelto variaba según la plataforma. El valor devuelto más comun era un sello de fecha con formato RFC-1123, que es una versión ligeramente actualizada de los sellos de fecha RFC-822.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toUTCString">Usando <code>toUTCString()</code></h3> + +<pre class="brush: js">var today = new Date('Wed, 14 Jun 2017 00:00:00 PDT'); +var UTCstring = today.toUTCString(); // Wed, 14 Jun 2017 07:00:00 GMT +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Date.toUTCString")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toDateString()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/date/utc/index.html b/files/es/web/javascript/reference/global_objects/date/utc/index.html new file mode 100644 index 0000000000..605ae2819d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/date/utc/index.html @@ -0,0 +1,78 @@ +--- +title: Date.UTC() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/UTC +tags: + - Date + - JavaScript + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date/UTC +--- +<div> + {{JSRef("Objetos_globales", "Date")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Accepts the same parameters as the longest form of the constructor, and returns the number of milliseconds in a <code>Date</code> object since January 1, 1970, 00:00:00, universal time.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">Date.UTC(<em>año</em>,<em>mes</em>[, <em>dia</em>[, <em>hora</em>[, <em>minutos</em>[, <em>segundos</em>, <em>milisegundos</em>]]]])</pre> +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> +<dl> + <dt> + <code>año</code></dt> + <dd> + Un año mayor de 1900.</dd> +</dl> +<dl> + <dt> + <code>mes</code></dt> + <dd> + Un entero entre 0 y 11 que representa al mes.</dd> +</dl> +<dl> + <dt> + <code>dia</code></dt> + <dd> + Un entero entre 1 y 31 que representa al día del mes.</dd> +</dl> +<dl> + <dt> + <code>hora</code></dt> + <dd> + Un entero entre 0 y 23 que representa la hora.</dd> +</dl> +<dl> + <dt> + <code>minutos</code></dt> + <dd> + Un entero entre 0 y 59 que representa los minutos.</dd> +</dl> +<dl> + <dt> + <code>segundos</code></dt> + <dd> + Un entero entre 0 y 59 que representa los segundos.</dd> +</dl> +<dl> + <dt> + <code>milisegundos</code></dt> + <dd> + Un entero entre 0 y 999 que representa los milisegundos.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p><code>UTC</code> toma los parámetros de la fecha delimitados por punto y comay devuelve el número de milisegundos entre las 00:00:00 del 1 de enero de 1970 (hora universal) y la hora que especifique.</p> +<p>Debería especificar los dígitos del año completo; por ejemplo, 1998. Si se especifica un año entre 0 y 99, el método convierte dicho año en uno del siglo XX (1900 + año); por ejemplo, si especifica 95, se usará el año 1995.</p> +<p>El método <code>UTC</code> difiere del constructor de <code>Date</code> de dos modos.</p> +<ul> + <li><code>Date.UTC</code> utiliza la fecha y hora universal en vez de la local.</li> + <li><code>Date.UTC</code> devuelve la fecha y hora como un número en vez de crear un objeto <code>Date</code>.</li> +</ul> +<p>Si especifica un parámetro fuera del rango esperado, el método <code>UTC</code> modifica los otros parámetros para tener en cuenta su número. Por ejemplo, si usa 15 para el mes, el año será incrementado en 1 (año + 1), y 3 se usará para el mes.</p> +<p>Debido a que <code>UTC</code> es un método estático de <code>Date</code>, utilícelo siempre como <code>Date.UTC()</code>, en vez de como un método del objeto <code>Date</code> que usted cree.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_Date.UTC" name="Ejemplo:_Usando_Date.UTC">Ejemplo: Usando <code>Date.UTC</code></h3> +<p>La sentencia siguiente crea un objeto <code>Date</code> usando GMT en vez de la hora local:</p> +<pre class="brush: js">fechaGmt = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Date.parse()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/decodeuri/index.html b/files/es/web/javascript/reference/global_objects/decodeuri/index.html new file mode 100644 index 0000000000..dc8264eebe --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/decodeuri/index.html @@ -0,0 +1,38 @@ +--- +title: decodeURI() +slug: Web/JavaScript/Referencia/Objetos_globales/decodeURI +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Decodifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) previamente creado por {{jsxref("encodeURI")}} o por una rutina similar.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p><code>decodeURI(<em>encodedURI</em>) </code></p> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>encodedURI</code></dt> + <dd>Un completo, Identificador de Recurso Uniforme.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Sustituye a cada secuencia de escape codificado en URI con el carácter que representa.</p> + +<p>No decodifica secuencias de escape que no se puedan haber introducido por {{jsxref("encodeURI")}}.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("decodeURIComponent")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref( "encodeURIComponent")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html new file mode 100644 index 0000000000..05d9bd4b52 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html @@ -0,0 +1,42 @@ +--- +title: decodeURIComponent +slug: Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent +tags: + - JavaScript + - JavaScript Reference + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/decodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Decodifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) previamente creado por {{jsxref("encodeURIComponent")}} o por una rutina similar.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p><code>decodeURIComponent(<em>encodedURI</em>) </code></p> + +<h2 id="Parameters" name="Parameters">Parámetros</h2> + +<dl> + <dt><code>encodedURI</code></dt> + <dd>Un Identificador de Recurso Uniforme codificado.</dd> + <dt> </dt> +</dl> + +<h2 id="Return value" name="Return value">Valor retornado</h2> + +<p>Retorna una nueva cadena representando la version decodificada del componente URI dado</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Sustituye a cada secuencia de escape codificado en URI con el carácter que representa.</p> + +<h2 id="See_Also" name="See_Also">Ver También</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/encodeuri/index.html b/files/es/web/javascript/reference/global_objects/encodeuri/index.html new file mode 100644 index 0000000000..51277231e0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/encodeuri/index.html @@ -0,0 +1,61 @@ +--- +title: encodeURI +slug: Web/JavaScript/Referencia/Objetos_globales/encodeURI +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURI +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Codifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) reemplazando cada instancia de ciertos carácteres por uno, dos o tres secuencias de escape representando el carácter codificado en UTF-8.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p><code>encodeURI(<em>URI</em>) </code></p> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>URI</code></dt> + <dd>Un Identificador de Recurso Uniforme codificado.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Se asume que el URI es un URI completo, a fin de no codificar caracteres reservados que tienen un significado especial en la URI.</p> + +<p><code>encodeURI </code>reemplaza todos los caracteres excepto los siguientes con las secuencias de escape UTF-8:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Tipo</td> + <td class="header">Incluye</td> + </tr> + <tr> + <td>Caracteres reservados</td> + <td><code>; , / ? : @ & = + $</code></td> + </tr> + <tr> + <td>Caracteres No escape</td> + <td>Alfabéticos, dígitos decimales, <code>- _ . ! ~ * ' ( )</code></td> + </tr> + <tr> + <td>Almohadilla</td> + <td><code>#</code></td> + </tr> + </tbody> +</table> + +<p>Tenga en cuenta que encodeURI por sí sola no puede formar solicitudes correctas HTTP GET y POST, como por XMLHTTPRequests, porque "&", "+", y "=" no están codificados, los cuales son tratados como caracteres especiales en las solicitudes GET y POST. <code><a href="/es/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="es/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code>, sin embargo, codifica estos caracteres. Lo más probable es que estos comportamientos no sean compatibles en los navegadores Web.</p> + +<h2 id="See_also" name="See_also">Ver También</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html new file mode 100644 index 0000000000..53af149970 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html @@ -0,0 +1,161 @@ +--- +title: encodeURIComponent +slug: Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent +tags: + - JavaScript + - URI +translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <strong>encodeURIComponent()</strong> codifica un componente URI (Identificador Uniforme de Recursos) al reemplazar cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter (solo serán cuatro secuencias de escape para caracteres compuestos por dos carácteres "sustitutos").</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">encodeURIComponent(str);</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>str</code></dt> + <dd>Cadena. Un componente de un URI.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ . ! ~ * ' ( )</code></p> + +<p>Note that an {{jsxref("Objetos_globales/URIError", "URIError")}} will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,</p> + +<pre class="brush: js">// high-low pair ok +alert(encodeURIComponent('\uD800\uDFFF')); + +// lone high surrogate throws "URIError: malformed URI sequence" +alert(encodeURIComponent('\uD800')); + +// lone low surrogate throws "URIError: malformed URI sequence" +alert(encodeURIComponent('\uDFFF')); +</pre> + +<p>To avoid unexpected requests to the server, you should call <code>encodeURIComponent</code> on any user-entered parameters that will be passed as part of a URI. For example, a user could type "<code>Thyme &time=again</code>" for a variable <code>comment</code>. Not using <code>encodeURIComponent</code> on this variable will give <code>comment=Thyme%20&time=again</code>. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST <code>comment</code> key equal to "<code>Thyme &time=again</code>", you have two POST keys, one equal to "<code>Thyme </code>" and another (<code>time</code>) equal to <code>again</code>.</p> + +<p>For <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST), spaces are to be replaced by '+', so one may wish to follow a <code>encodeURIComponent</code> replacement with an additional replacement of "%20" with "+".</p> + +<p>To be more stringent in adhering to <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:</p> + +<pre class="brush: js">function fixedEncodeURIComponent (str) { + return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A"); +} +</pre> + +<h2 id="See_also" name="See_also">Examples</h2> + +<p>The following example provides the special encoding required within UTF-8 <code>Content-Disposition</code> and <code>Link</code> server response header parameters (e.g., UTF-8 filenames):</p> + +<pre class="brush: js">var fileName = 'my file(2).txt'; +var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName); + +console.log(header); +// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" + + +function encodeRFC5987ValueChars (str) { + return encodeURIComponent(str). + // Note that although RFC3986 reserves "!", RFC5987 does not, + // so we do not need to escape it + replace(/['()]/g, escape). // i.e., %27 %28 %29 + replace(/\*/g, '%2A'). + // The following are not required for percent-encoding per RFC5987, + // so we can allow for a little better readability over the wire: |`^ + replace(/%(?:7C|60|5E)/g, unescape); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition.</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_Also" name="See_Also">See also</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/error/index.html b/files/es/web/javascript/reference/global_objects/error/error/index.html new file mode 100644 index 0000000000..114831c512 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/error/index.html @@ -0,0 +1,69 @@ +--- +title: Constructor Error() +slug: Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error +tags: + - Constructor + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Error/Error +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">El constructor <strong><code>Error</code></strong> crea un objeto <code>Error</code>.</span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new Error([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>message</var></code>{{Optional_Inline}}</dt> + <dd>Una descripción del error legible para los humanos.</dd> + <dt><code><var>fileName</var></code> {{Optional_Inline}}{{Non-standard_inline}}</dt> + <dd>El valor de la propiedad <code><var>fileName</var></code> en el objeto <code>Error</code> creado. De manera predeterminada, el nombre del archivo que contiene el código que llamó al constructor <code>Error()</code>.</dd> + <dt><code><var>lineNumber</var></code> {{Optional_Inline}}{{Non-standard_inline}}</dt> + <dd>El valor de la propiedad <code><var>lineNumber</var></code> en el objeto <code>Error</code> creado. De manera predeterminada, el número de línea que contiene la invocación del constructor <code>Error()</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Llamada_a_función_o_construcción_new">Llamada a función o construcción <code>new</code></h3> + +<p>Cuando se usa <code>Error</code> como una función, sin {{JSxRef("Operators/new", "new")}}, devolverá un objeto <code>Error</code>. Por lo tanto, una simple llamada a <code>Error</code> producirá el mismo resultado que la construcción de un objeto <code>Error</code> mediante la palabra clave <code>new</code>.</p> + +<pre class="brush: js; notranslate">// esto... +const x = Error('¡Fui creado usando una llamada a función!') + + // ...tiene la misma funcionalidad que esta. +const y = new Error('¡Fui construido con la palabra clave "new"!') </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-error-constructor', 'Error constructor')}}</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.builtins.Error.Error")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Sentencias/throw", "throw")}}</li> + <li>{{JSxRef("Sentencias/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/filename/index.html b/files/es/web/javascript/reference/global_objects/error/filename/index.html new file mode 100644 index 0000000000..8e633934e0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/filename/index.html @@ -0,0 +1,48 @@ +--- +title: Error.prototype.fileName +slug: Web/JavaScript/Referencia/Objetos_globales/Error/fileName +tags: + - JavaScript + - No estandar + - Propiedad + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Error/fileName +--- +<div>{{jsRef}} {{non-standard_header}}</div> + +<p>La propiedad <code><strong>fileName</strong></code> contiene la ruta al archivo que generó este error.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta propiedad no estándar contiene la ruta al archivo que generó este error. Si se llama desde un contexto de depuración, devuelve las herramientas de desarrollo de Firefox, por ejemplo, "código de evaluación del depurador".</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_fileName">Usar <code>fileName</code></h3> + +<pre class="brush: js notranslate">var e = new Error('No se pudo procesar la entrada'); +throw e; +// e.fileName podría verse como "file:///C:/ejemplo.html" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><span class="pl-s">No forma parte de ningún estándar.</span></p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<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.builtins.Error.fileName")}}</p> +</div> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}}</li> + <li>{{jsxref("Error.prototype.lineNumber")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/index.html b/files/es/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..03cbd038da --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,219 @@ +--- +title: Error +slug: Web/JavaScript/Referencia/Objetos_globales/Error +tags: + - Error + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>Los objetos <code>Error</code> se lanzan cuando ocurren errores en tiempo de ejecución. También puedes utilizar el objeto <code>Error</code> como objeto base para excepciones definidas por el usuario. Ve más adelante los tipos de errores estándar integrados.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Los errores en tiempo de ejecución dan como resultado la creación y lanzamiento de nuevos objetos <code>Error</code>.</p> + +<h3 id="Tipos_Error">Tipos <code>Error</code></h3> + +<p>Además del constructor genérico <code>Error</code>, hay otros siete constructores de errores en el núcleo de JavaScript. Para conocer las excepciones de lado del cliente, consulta {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Declaraciones para el manejo de excepciones", "#Sentencias_de_manejo_de_excepciones", 1)}}.</p> + +<dl> + <dt>{{JSxRef("EvalError")}}</dt> + <dd>Crea una instancia que representa un error que ocurre con respecto a la función global {{JSxRef("eval", "eval()")}}.</dd> + <dt>{{JSxRef("InternalError")}} </dt> + <dd>Crea una instancia que representa un error que ocurre cuando se produce un error interno en el motor de JavaScript. Por ejemplo: "demasiada recursividad".</dd> + <dt>{{JSxRef("RangeError")}}</dt> + <dd>Crea una instancia que representa un error que ocurre cuando una variable numérica o parámetro está fuera de su rango válido.</dd> + <dt>{{JSxRef("ReferenceError")}}</dt> + <dd>Crea una instancia que representa un error que ocurre cuando se quita la referencia a una referencia no válida.</dd> + <dt>{{JSxRef("SyntaxError")}}</dt> + <dd>Crea una instancia que representa un error de sintaxis.</dd> + <dt>{{JSxRef("TypeError")}}</dt> + <dd>Crea una instancia que representa un error que ocurre cuando una variable o parámetro no es de un tipo válido.</dd> + <dt>{{JSxRef("URIError")}}</dt> + <dd>Crea una instancia que representa un error que ocurre cuando {{JSxRef("encodeURI", "encodeURI()")}} o {{JSxRef("decodeURI", "decodeURI()")}} pasan parámetros no válidos.</dd> +</dl> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{JSxRef("Objetos_globales/Error/Error", "Error()")}}</dt> + <dd>Crea un nuevo objeto <code>Error</code>.</dd> +</dl> + +<h2 id="Métodos_estáticos">Métodos estáticos</h2> + +<dl> + <dt>{{JSxRef("Error.captureStackTrace()")}}</dt> + <dd>Una función <strong>V8</strong> no estándar que crea la propiedad {{JSxRef("Error.prototype.stack", "stack")}} en una instancia de <code>Error</code>.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Mensaje de error.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>Nombre del error.</dd> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>Una propiedad no estándar de Microsoft para la descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>Una propiedad no estándar de Microsoft para un número de error.</dd> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Una propiedad no estándar de Mozilla para la ruta al archivo que generó este error.</dd> + <dt>{{JSxRef("Error.prototype.lineNumber")}}</dt> + <dd>Una propiedad no estándar de Mozilla para el número de línea en el archivo que generó este error.</dd> + <dt>{{JSxRef("Error.prototype.columnNumber")}}</dt> + <dd>Una propiedad no estándar de Mozilla para el número de columna en la línea que generó este error.</dd> + <dt>{{JSxRef("Error.prototype.stack")}}</dt> + <dd>Una propiedad no estándar de Mozilla para un seguimiento de la pila.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{JSxRef("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Lanzar_un_error_genérico">Lanzar un error genérico</h3> + +<p>Normalmente, creas un objeto <code>Error</code> con la intención de generarlo utilizando la palabra clave {{JSxRef("Sentencias/throw", "throw")}}. Puedes manejar el error usando la construcción {{JSxRef("Sentencias/try...catch", "try...catch")}}:</p> + +<pre class="brush: js; notranslate">try { + throw new Error('¡Ups!') +} catch (e) { + console.error(e.name + ': ' + e.message) +} +</pre> + +<h3 id="Manejar_de_un_error_específico">Manejar de un error específico</h3> + +<p>Puede elegir manejar solo tipos de error específicos probando el tipo de error con la propiedad {{JSxRef("Object.prototype.constructor", "constructor")}} del error o, si estás escribiendo para motores JavaScript modernos, la palabra clave {{JSxRef("Operators/instanceof", "instanceof")}}:</p> + +<pre class="brush: js; notranslate">try { + foo.bar() +} catch (e) { + if (e instanceof EvalError) { + console.error(e.name + ': ' + e.message) + } else if (e instanceof RangeError) { + console.error(e.name + ': ' + e.message) + } + // ... etc +} +</pre> + +<h3 id="Tipos_Error_personalizados">Tipos <code>Error</code> personalizados</h3> + +<p>Posiblemente desees definir tus propios tipos de error derivados de <code>Error</code> para poder lanzarlo con <code>throw new MyError()</code> y usar <code>instanceof MyError</code> para verificar el tipo de error en el controlador de excepciones. Esto da como resultado un código de manejo de errores más limpio y consistente. </p> + +<p>Consulta <a href="http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript">"¿Cuál es una buena manera de extender <code>Error</code> en JavaScript?"</a> en StackOverflow para una discusión en profundidad.</p> + +<h4 id="Clase_Error_personalizado_en_ES6">Clase <code>Error</code> personalizado en ES6</h4> + +<div class="blockIndicator warning"> +<p>Las versiones de Babel anteriores a la 7 pueden manejar métodos de clase <code>CustomError</code>, pero solo cuando se declaran con {{JSxRef("Objetos_globales/Object/defineProperty", "Object.defineProperty()")}}. De lo contrario, las versiones antiguas de Babel y otros transpiladores no manejarán correctamente el siguiente código sin <a href="https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend">configuración adicional</a>.</p> +</div> + +<div class="blockIndicator note"> +<p>Algunos navegadores incluyen el constructor <code>CustomError</code> en el seguimiento de la pila cuando se utilizan clases de ES2015.</p> +</div> + +<pre class="brush: js notranslate">class CustomError extends Error { + constructor(foo = 'bar', ...params) { + // Pasa los argumentos restantes (incluidos los específicos del proveedor) al constructor padre + super(...params) + + // Mantiene un seguimiento adecuado de la pila para el lugar donde se lanzó nuestro error (solo disponible en V8) + if (Error.captureStackTrace) { + Error.captureStackTrace(this, CustomError) + } + + this.name = 'CustomError' + // Información de depuración personalizada + this.foo = foo + this.date = new Date() + } +} + +try { + throw new CustomError('baz', 'bazMessage') +} catch(e) { + console.error(e.name) // CustomError + console.error(e.foo) // baz + console.error(e.message) // bazMessage + console.error(e.stack) // stacktrace +}</pre> + +<h4 id="Objeto_Error_personalizado_ES5">Objeto <code>Error</code> personalizado ES5</h4> + +<div class="warning"> +<p><strong>Todos</strong> los navegadores incluyen el constructor <code>CustomError</code> en el seguimiento de la pila cuando se usa una declaración de prototipo.</p> +</div> + +<pre class="brush: js notranslate">function CustomError(foo, message, fileName, lineNumber) { + var instance = new Error(message, fileName, lineNumber); + instance.name = 'CustomError'; + instance.foo = foo; + Object.setPrototypeOf(instance, Object.getPrototypeOf(this)); + if (Error.captureStackTrace) { + Error.captureStackTrace(instance, CustomError); + } + return instance; +} + +CustomError.prototype = Object.create(Error.prototype, { + constructor: { + value: Error, + enumerable: false, + writable: true, + configurable: true + } +}); + +if (Object.setPrototypeOf){ + Object.setPrototypeOf(CustomError, Error); +} else { + CustomError.__proto__ = Error; +} + +try { + throw new CustomError('baz', 'bazMessage'); +} catch(e){ + console.error(e.name); // CustomError + console.error(e.foo); // baz + console.error(e.message); // bazMessage +}</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-error-objects', 'Error')}}</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.builtins.Error")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Sentencias/throw", "throw")}}</li> + <li>{{JSxRef("Sentencias/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/linenumber/index.html b/files/es/web/javascript/reference/global_objects/error/linenumber/index.html new file mode 100644 index 0000000000..0efec0696f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/linenumber/index.html @@ -0,0 +1,101 @@ +--- +title: Error.prototype.lineNumber +slug: Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber +translation_of: Web/JavaScript/Reference/Global_Objects/Error/lineNumber +--- +<div>No es una norma<br> +Esta característica no es una norma y no está en la lista de normas. No la utilice en sitios de producción que enfrenta la Web: no va a funcionar para todos los usuarios. También puede haber grandes incompatibilidades entre implementaciones y el comportamiento puede cambiar en el futuro.</div> + +<div> </div> + +<div>La propiedad <strong>lineNumber </strong>contiene el número de linea en el archivo que arrojó el error.</div> + +<div> </div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_lineNumber">Utilizando <code>lineNumber</code></h3> + +<pre class="brush: js">var e = new Error('No fue posible analizar el dato introducido'); +throw e; +console.log(e.lineNumber) // 2 +</pre> + +<h3 id="Ejemplo_alternativo_utilizando_el_evento_'error'">Ejemplo alternativo utilizando el evento '<code>error'</code></h3> + +<pre class="brush: js">window.addEventListener('error', function(e) { + console.log(e.lineno); // 5 +}); +var e = new Error('No fue posible analizar el dato introducido'); +throw e; +</pre> + +<p>Esta es una norma soportada por Chrome, Firefox entre otros.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No forma parte de ninguna especificación. No es una norma.</p> + +<h2 id="Navegadores_compatibles">Navegadores compatibles</h2> + +<div> +<p> </p> + +<p>Tabla de compatibilidad</p> + +<table class="compat-table" style="line-height: 1.5;"> + <tbody> + <tr> + <th>Caracteristica</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>Compatible [1]</td> + <td>Compatible</td> + <td>No compatible</td> + <td>No compatible</td> + <td>No compatible</td> + </tr> + </tbody> +</table> + +<p> [1] Objeto error en errores manejados.</p> + +<table class="compat-table" style="line-height: 1.5;"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Android</th> + <th>Chorme para Android</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>No compatible</td> + <td>No compatible</td> + <td>Compatible</td> + <td>No compatible</td> + <td>No compatible</td> + <td>No compatible</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="Vea_también">Vea también:</h2> + +<ul> + <li>{{jsxref("Error.prototype.stack")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.columnNumber")}} {{non-standard_inline}}</li> + <li>{{jsxref("Error.prototype.fileName")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/message/index.html b/files/es/web/javascript/reference/global_objects/error/message/index.html new file mode 100644 index 0000000000..3f14983d6e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/message/index.html @@ -0,0 +1,114 @@ +--- +title: Error.prototype.message +slug: Web/JavaScript/Referencia/Objetos_globales/Error/message +translation_of: Web/JavaScript/Reference/Global_Objects/Error/message +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>message</strong></code> es una descripción legible del error.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta propiedad contiene una breve descripción del error, si está disponible o ha sido fijado. <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> hace un amplio uso de esta propiedad para las excepciones. Esta porpiedad combinada con la propiedad {{jsxref("Error.prototype.name", "name")}} es usada por el método {{jsxref("Error.prototype.toString()")}} para crear una cadena de texto del objeto Error.</p> + +<p>Por defecto, la propiedad <code>message</code> es una cadena vacía, pero se puede especificar un mensaje a través del primer parámetro del {{jsxref("Error", "constructor Error")}}.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Lanzar_un_error_personalizado">Lanzar un error personalizado</h3> + +<pre class="brush: js">var e = new Error('No se pudo analizar la entrada'); +// e.message es 'No se pudo analizar la entrada' +throw e; +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Error.prototype.name")}}</li> + <li>{{jsxref("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/name/index.html b/files/es/web/javascript/reference/global_objects/error/name/index.html new file mode 100644 index 0000000000..841cc7cbc4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/name/index.html @@ -0,0 +1,58 @@ +--- +title: Error.prototype.name +slug: Web/JavaScript/Referencia/Objetos_globales/Error/name +tags: + - Error + - JavaScript + - Propiedad + - Prototipo +translation_of: Web/JavaScript/Reference/Global_Objects/Error/name +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>name</strong></code> representa un nombre para el tipo de error. El valor inicial es "Error".</p> + +<h2 id="Descripción">Descripción</h2> + +<p>De forma predeterminada, las instancias {{JSxRef("Error")}} reciben el nombre "Error". La propiedad <code>name</code>, además de la propiedad {{JSxRef("Error.prototype.message", "message")}}, la utiliza el método {{JSxRef("Error.prototype.toString()")}} para crear una representación de cadena del error.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Lanzar_un_error_personalizado">Lanzar un error personalizado</h3> + +<pre class="brush: js notranslate">var e = new Error('Entrada mal formada'); // e.name es 'Error' + +e.name = 'ParseError'; +throw e; +// e.toString() devolverá 'ParseError: Entrada mal formada' +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<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.builtins.Error.name")}}</p> +</div> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Error.prototype.message")}}</li> + <li>{{JSxRef("Error.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/tosource/index.html b/files/es/web/javascript/reference/global_objects/error/tosource/index.html new file mode 100644 index 0000000000..fb1b429884 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/tosource/index.html @@ -0,0 +1,60 @@ +--- +title: Error.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Error/toSource +tags: + - JavaScript + - No estandar + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <code><strong>toSource()</strong></code> devuelve código que podría evaluar el mismo error.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>e</var>.toSource()</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena que contiene el código fuente del error.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_toSource">Usar toSource</h3> + +<p>Llamar al método <code>toSource</code> de una instancia {{JSxRef("Error")}} (incluido {{JSxRef("Global_Objects/Error", "NativeErrors", "#Error_types")}}) devolverá una cadena que contiene el código fuente del error. Esta cadena se puede evaluar para crear un objeto (aproximadamente) igual. Naturalmente, la cadena que contiene la fuente sigue la estructura del constructor {{JSxRef("Error")}}. Por ejemplo:</p> + +<pre class="brush: js notranslate">(new<em>name</em>(<em>message</em> ,<em>fileName</em>,<em>lineNumber</em>)) +</pre> + +<p>donde estos atributos corresponden a las propiedades respectivas de la instancia de <code>error</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Ten en cuenta que las propiedades utilizadas por el método <code>toSource</code> en la creación de esta cadena son mutables y es posible que no reflejen con precisión la función utilizada para crear una instancia de <code>error</code> o el nombre de archivo o número de línea donde ocurrió un error real.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No forma parte de ningún estándar.</p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<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.builtins.Error.toSource")}}</p> +</div> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Error.prototype.fileName")}}</li> + <li>{{JSxRef("Error.prototype.lineNumber")}}</li> + <li>{{JSxRef("Error.prototype.message")}}</li> + <li>{{JSxRef("Error.prototype.name")}}</li> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/error/tostring/index.html b/files/es/web/javascript/reference/global_objects/error/tostring/index.html new file mode 100644 index 0000000000..f4ea4a44b9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/error/tostring/index.html @@ -0,0 +1,98 @@ +--- +title: Error.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Error/toString +tags: + - JavaScript + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Error/toString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toString()</strong></code> devuelve una cadena que representa el objeto {{JSxRef("Error")}} especificado.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>e</var>.toString()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena que representa el objeto {{JSxRef("Error")}} especificado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El objeto {{JSxRef("Error")}} redefine el método {{JSxRef("Object.prototype.toString()")}} heredado por todos los objetos. Su semántica es la siguiente (asumiendo que {{JSxRef("Object")}} y {{JSxRef("String")}} tienen sus valores originales):</p> + +<pre class="brush: js notranslate">Error.prototype.toString = function() { + 'use strict'; + + var obj = Object(this); + if (obj !== this) { + throw new TypeError(); + } + + var name = this.name; + name = (name === undefined) ? 'Error' : String(name); + + var msg = this.message; + msg = (msg === undefined) ? '' : String(msg); + + if (name === '') { + return msg; + } + if (msg === '') { + return name; + } + + return name + ': ' + msg; +}; +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_toString">Usar <code>toString()</code></h3> + +<pre class="brush: js notranslate">var e = new Error('fatal error'); +console.log(e.toString()); // 'Error: error fatal' + +e.name = undefined; +console.log(e.toString()); // 'Error: error fatal' + +e.name = ''; +console.log(e.toString()); // 'error fatal' + +e.message = undefined; +console.log(e.toString()); // '' + +e.name = 'hola'; +console.log(e.toString()); // 'hola' +</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-error.prototype.tostring', 'Error.prototype.toString')}}</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.builtins.Error.toString")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Error.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/escape/index.html b/files/es/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..4925618b0e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,91 @@ +--- +title: escape() +slug: Web/JavaScript/Referencia/Objetos_globales/escape +tags: + - JavaScript + - Obsoleto + - escape +translation_of: Web/JavaScript/Reference/Global_Objects/escape +--- +<div class="warning">{{Deprecated_header}} Advertencia <code>escape()</code> no esta estrictamente en desuso("eliminada por los estándares Web"), esta definida en <a href="https://www.ecma-international.org/ecma-262/9.0/index.html#sec-additional-ecmascript-features-for-web-browsers">Anexo B</a> El estándar ECMA-262 , cuya introducción establece: +<blockquote>… Todos las características especificas y comportamientos del lenguaje en este anexo tienen mas de una caracterísitca indeseable y en ausencia del legado sera eliminada de esta especificación. …<br> +… Los programadores no deben usar o suponer la existencia de estas características y/o comportamientos al escribir nuevo código ECMAScript …</blockquote> +</div> + +<div></div> + +<p><span class="seoSummary">La función obsoleta <code><strong>escape()</strong></code> crea una nueva cadena de caracteres en los que ciertos caracteres han sido sustituidos por una secuencia hexadecimal de escape.</span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">escape(str)</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>str</code></dt> + <dd>Cadena a codificar.</dd> +</dl> + +<h3 id="Devuelve">Devuelve</h3> + +<p>Una nueva cadena en la que ciertos caracteres han sido sustituidos.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función <code>escape </code>es una propiedad del <em>objeto global. </em>SLos caracteres especiales son codificados a excepción de: @*_+-./</p> + +<p>La forma hexadecimal de los caracteres cuyo valor es 0xFF o menor, es una secuencia de escape de dos digitos: %xx. Para caracteres un valor superior, se usa el fomato de cuatro digitos: %<strong>u</strong>xxxx.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">escape('abc123'); // "abc123" +escape('äöü'); // "%E4%F6%FC" +escape('ć'); // "%u0107" + +// caracteres especiales +escape('@*_+-./'); // "@*_+-./"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.1', 'escape')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in the (informative) Compatibility Annex B</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-escape-string', 'escape')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-escape-string', 'escape')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.escape")}}</p> + +<h2 id="Ver_más">Ver más</h2> + +<ul> + <li>{{jsxref("encodeURI")}}</li> + <li>{{jsxref("encodeURIComponent")}}</li> + <li>{{jsxref("unescape")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/eval/index.html b/files/es/web/javascript/reference/global_objects/eval/index.html new file mode 100644 index 0000000000..52375445c4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/eval/index.html @@ -0,0 +1,309 @@ +--- +title: eval +slug: Web/JavaScript/Referencia/Objetos_globales/eval +tags: + - JavaScript + - eval +translation_of: Web/JavaScript/Reference/Global_Objects/eval +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La función <code>eval()</code> evalúa un código JavaScript representado como una cadena de caracteres (string), sin referenciar a un objeto en particular.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="brush: js"><code>eval(<em>cadena</em> de caracteres o string)</code> +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>cadena de caracteres (string)</code></dt> + <dd>Una cadena de caracteres (string) que representa una expresión, sentencia o secuencia de sentencias en JavaScript. La expresión puede incluir variables y propiedades de objetos existentes.</dd> + <dt> + <h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Valores retornados o devueltos</h3> + </dt> +</dl> + +<p>El valor que resulta de la evaluación del código proporcionado. Si este valor está vacío. {{jsxref("undefined")}} (artículo en inglés) es devuelto.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>eval()</code> es una propiedad de la función del objeto global.</p> + +<p>El argumento de la función <code>eval</code> es una cadena de caracteres. Si la cadena de caracteres representa una expresión, <code>eval()</code> evalúa la expresión. Si el argumento representa una o más sentencias JavaScript, <code>eval()</code> evalúa las sentencias. No se debe llamar a <code>eval()</code> para evaluar una expresión aritmética; ya que JavaScript evalúa las expresiones aritméticas automáticamente.</p> + +<p>Si construye una expresión aritmética como una cadena de caracteres, puede usar <code>eval()</code> para evaluarla más tarde. Por ejemplo, suponga que tiene la variable <code>x</code>. Puede posponer la evaluación de una expresión que involucre a <code>x</code> mediante la asignación del valor de la cadena de caracteres de la expresión, asignando "<code>3 * x + 2</code>" a la variable, y entonces llamar a <code>eval()</code> posteriormente en el script.</p> + +<p>Si el argumento de <code>eval()</code> no es una cadena de caracteres, <code>eval()</code> devuelve el argumento sin cambio. En el siguiente ejemplo, el constructor <code>String</code> es especificado, y <code>eval()</code> devuelve un objeto <code>String</code> en lugar de evaluar la cadena de caracteres.</p> + +<pre>eval(new String("2 + 2")); // devuelve un objeto String que contiene "2 + 2" +eval("2 + 2"); // devuelve 4 +</pre> + +<p>Puede trabajar sobre esta limitación de una manera genérica utilizando <code>toString()</code>.</p> + +<pre>var expresion = new String("2 + 2"); +eval(expresion.toString()); +</pre> + +<p>Si utiliza la función <code>eval()</code> <em>indirectamente</em>, invocándola a través de una referencia distinta de <code>eval</code>, a partir de ECMAScript 5, ésta funciona en el ámbito global en lugar de hacerlo en el ámbito local; esto quiere decir, por ejemplo, que las declaraciones de función crean funciones globales, y que el código siendo evaluado no tiene acceso a las variables locales dentro del ámbito en donde está siendo llamada.</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">test</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">,</span> y <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">"x + y"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Llamada directa, utiliza el ámbito local, el resultado es 6</span> + <span class="keyword token">var</span> geval <span class="operator token">=</span> eval<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="function token">geval</span><span class="punctuation token">(</span><span class="string token">"x + y"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Llamada indirecta, utiliza el ámbito global, através de ReferenceError por que `x` es indefinida</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="No_utilice_eval_innecesariamente">No utilice <code>eval</code> innecesariamente</h2> + +<p><code>eval()</code> es una función peligrosa, quel ejecuta el código el cual es pasado con los privilegios de quien llama. Si ejecuta <code>eval()</code> con una cadena de carcteres que podría ser afectada por un elemento malicioso, podría terminar ejecutando código malicioso dentro de la computadora del usuario con los permisos de su página o extensión web . Más importante aún, una parte del código de terceros podría accesar al ámbito en el cual <code>eval()</code> fue invocada, lo que puede permitir la entrada a posibles ataques de formas a las que el constructor {{jsxref("Global_Objects/Function", "Function")}} (art. en inglés) el cual es similar, no es susceptible.</p> + +<p><code>eval()</code> es generalmente también más lenta que otras alternativas desde que se invoca en el intérprte de JS, mientras que otros muchos constructores son optimizados por los motores JS modernos.</p> + +<p>Existen alternativas más seguras (y rápidas) que <code>eval() </code>para casos de uso común.</p> + +<h3 id="Accediendo_a_propiedades_de_los_miembros">Accediendo a propiedades de los miembros</h3> + +<p>No debería utilizar <code>eval()</code> con el fin de convertir nombres de propiedades en propiedades. Observe el siguiente ejemplo en el cual la función <code>getNombreCampo(n)</code> devuelve el nombre del elemento del formulario especificado como una cadena. La primera sentencia asigna el valor de cadena del tercer elemento del formulario a la variable <code>campo</code>. La segunda sentencia utiliza <code>eval</code> para mostrar el valor del elemento del formulario.</p> + +<pre>var campo = getNombreCampo(3); +document.write("El campo llamado ", campo, " tiene un valor de ", eval(campo + ".value")); +</pre> + +<p>Sin embargo, <code>eval()</code> no es necesario en este código. De hecho, su uso aquí no se recomienda. En su lugar, utilice los <a href="/es/Web/JavaScript/Referencia/Operadores/Miembros">operadores de miembro</a> (art. en inglés), que son mucho más rápidos y seguros:</p> + +<pre class="brush: js">var campo = getFieldName(3); +document.write("El campo llamado ", campo, " tiene un valor de ", campo[valor]); +</pre> + +<p>Considere ahora este nuevo ejemplo, en donde la propiedad del objeto a ser accesado no es conocida hasta que el código es ejecutado. Esto puede hacerse con eval:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> a<span class="punctuation token">:</span> <span class="number token">20</span><span class="punctuation token">,</span> b<span class="punctuation token">:</span> <span class="number token">30</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> nombreProp <span class="operator token">=</span> obtenerNombreProp<span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devuelve "a" o "b"</span> + +<span class="function token">eval</span><span class="punctuation token">(</span> <span class="string token">"var resultado = obj."</span> <span class="operator token">+</span> nombreProp <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Y con el uso de los <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors" title="JavaScript/Reference/Operators/Member_Operators">accesores de propiedades</a> (artículo en inglés), el cual es mucho más rápido y seguro, sería así:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span> a<span class="punctuation token">:</span> <span class="number token">20</span><span class="punctuation token">,</span> b<span class="punctuation token">:</span> <span class="number token">30</span> <span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> nombreProp <span class="operator token">=</span> obtenerNombreProp<span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devuelve "a" o "b"</span> +<span class="keyword token">var</span> resultado <span class="operator token">=</span> obj<span class="punctuation token">[</span> nombreProp <span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// obj[ "a" ] es el mismo que obj.a</span></code></pre> + +<p>Puede incluso utilizar este método para acceder a las propiedades de los descendientes. Utilizando <code>eval()</code> esto sería de la siguiente forma:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns e.g. "a.b.c"</span> + +<span class="function token">eval</span><span class="punctuation token">(</span> <span class="string token">"var result = obj."</span> <span class="operator token">+</span> propPath <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Evitando <code>eval()</code>, esto podría hacerse dividiendo la ruta de propiedad y haciendo un bucle a través de las diferentes propiedades:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">getDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> desc<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> arr <span class="operator token">=</span> desc<span class="punctuation token">.</span><span class="function token">split</span><span class="punctuation token">(</span><span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">while</span><span class="punctuation token">(</span>arr<span class="punctuation token">.</span>length<span class="punctuation token">)</span> <span class="punctuation token">{</span> + obj <span class="operator token">=</span> obj<span class="punctuation token">[</span>arr<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> obj<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns e.g. "a.b.c"</span> +<span class="keyword token">var</span> result <span class="operator token">=</span> <span class="function token">getDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> propPath<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Estableciendo una propiedad que funcione de modo similar:</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">setDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> desc<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> arr <span class="operator token">=</span> desc<span class="punctuation token">.</span><span class="function token">split</span><span class="punctuation token">(</span><span class="string token">"."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">while</span><span class="punctuation token">(</span>arr<span class="punctuation token">.</span>length <span class="operator token">></span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + obj <span class="operator token">=</span> obj<span class="punctuation token">[</span>arr<span class="punctuation token">.</span><span class="function token">shift</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">]</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + obj<span class="punctuation token">[</span>arr<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">]</span> <span class="operator token">=</span> value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> obj <span class="operator token">=</span> <span class="punctuation token">{</span>a<span class="punctuation token">:</span> <span class="punctuation token">{</span>b<span class="punctuation token">:</span> <span class="punctuation token">{</span>c<span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> propPath <span class="operator token">=</span> <span class="function token">getPropPath</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// returns e.g. "a.b.c"</span> +<span class="keyword token">var</span> result <span class="operator token">=</span> <span class="function token">setDescendantProp</span><span class="punctuation token">(</span>obj<span class="punctuation token">,</span> propPath<span class="punctuation token">,</span> <span class="number token">1</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// test.a.b.c will now be 1</span></code></pre> + +<h3 id="Utilice_funciones_en_lugar_de_evaluar_fragmentos_de_código">Utilice funciones en lugar de evaluar fragmentos de código</h3> + +<p>JavaScript tiene <a class="external external-icon" href="http://en.wikipedia.org/wiki/First-class_function" title="http://en.wikipedia.org/wiki/First-class_function">funciones de primera clase </a>(artículo en inglés), lo que quiere decir que usted puede pasar funciones como argumentos a otras APIs, almacenarlas en variables y propiedades de objetos, etc. Muchas APIs de DOM están diseñadas con esto en mente, o sea que usted puede (y debería) escribir:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// instead of setTimeout(" ... ", 1000) use:</span> +<span class="function token">setTimeout</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// instead of elt.setAttribute("onclick", "...") use:</span> +elt<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span> <span class="punctuation token">}</span> <span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Las <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" title="JavaScript/Guide/Closures">clausuras o cierres </a>(art. en inglés) son muy útiles como forma de crear funciones parametrizadas sin la concatenación de cadenas de caracteres o strings.</p> + +<h3 id="Analizando_JSON_(convirtiendo_cadenas_de_caracteres_(strings)_hacia_objetos_de_JavaScript)">Analizando JSON (convirtiendo cadenas de caracteres (strings) hacia objetos de JavaScript)</h3> + +<p>Si la cadena de caracteres que usted esta llamando <code>eval()</code> contiene datos (por ejemplo, un array: <code>"[1, 2, 3]"</code>), en contraposición al código, debería considerar un cambio a <a href="https://developer.mozilla.org/en-US/docs/Glossary/JSON" title="JSON">JSON</a> (art. en inglés), el cual permite a la cadena de caracteres utilizar un subconjunto de sintaxis de JavaScript para representar los datos. Vea también <a href="https://developer.mozilla.org/en-US/docs/Downloading_JSON_and_JavaScript_in_extensions" title="Downloading_JSON_and_JavaScript_in_extensions">Descargando JSON y JavaScript en extensiones</a> (art. en inglés).</p> + +<p>Observe, que ya que la sintaxis de JSON es limitada en comparación con la sintaxis de JavaScript, muchas literales válidas de JavaScript no serán analizadas como JSON. Por ejemplo, seguir comas no está permitido en JSON, y los nombres de propiedades (keys) en literales de objeto deben ser entrecomilladas. Asegúrese de utilizar un serializados de JSON para generar cadenas de caracteres que posteriormente sean analizadas como JSON.</p> + +<h3 id="Pasar_datos_en_lugar_de_código">Pasar datos en lugar de código</h3> + +<p>Por ejemplo, una extensión diseñada para arrastar contenido de páginas web podría tener reglas de arrastre definidas en <a href="https://developer.mozilla.org/en-US/docs/XPath" title="XPath">XPath</a> (art. en inglés) en lugar de código JavaScript.</p> + +<h3 id="Ejecutar_código_sin_privilegos_limitados">Ejecutar código sin privilegos limitados</h3> + +<p>Si usted debe ejecutar código, considere ejecutarlo con privilegios reducidos. Este consejo aplica principalmente para las extensiones y las aplicaciones XUL, para lo cual puede utilizar <a href="https://developer.mozilla.org/en-US/docs/Components.utils.evalInSandbox" title="Components.utils.evalInSandbox">Components.utils.evalInSandbox</a> (art. en inglés).</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>Los siguientes ejemplos muestran el resultado usando <code>document.write</code>. En JavaScript del lado servidor, puede mostrar el mismo resultado llamando a la función <code>write</code> en vez de <code>document.write</code>.</p> + +<h3 id="Utlizando_eval">Utlizando <code>eval</code></h3> + +<p>En el siguiente código, las dos sentencias que contienen <code>eval</code> devuelven 42. La primera evalúa la cadena "<code>x + y + 1</code>"; la segunda evalúa la cadena "<code>42</code>".</p> + +<pre>var x = 2; +var y = 39; +var z = "42"; +eval("x + y + 1"); // returns 42 +eval(z); // returns 42 +</pre> + +<h3 id="Utilizando_eval_para_evaluar_una_cadena_de_caracteres_(string)_como_sentencias_de_JavaScript">Utilizando <code>eval</code> para evaluar una cadena de caracteres (string) como sentencias de JavaScript</h3> + +<p>El siguiente ejemplo utiliza <code>eval</code> para evaluar una cadena de caracteres <code>str</code>. Esta cadena consiste de sentencias de JavaScript que abren un diálogo <code>Alert</code> y asignan a <code>z</code> un valor de 42 si <code>x</code> es cinco, y asigna 0 a <code>z</code> en caso contrario. Cuando se ejecuta la segunda sentencia, <code>eval</code> ocasionará que estas sentencias sean ejecutadas, y también evaluará el conjunto de sentencias y devolverá que el valor es asignado a <code>z</code>.</p> + +<pre class="brush: js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span></code> +var str = "if (x == 5) {alert('z is 42'); z = 42;} else z = 0; "; + +document.write("<P>z es ", eval(str)); +</pre> + +<h3 id="La_última_espresión_es_evaluada">La última espresión es evaluada</h3> + +<p><code>eval()</code> devuelve el valor de la última expresión evaluada</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> str <span class="operator token">=</span> <span class="string token">"if ( a ) { 1+1; } else { 1+2; }"</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> a <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> b <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>str<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devuelve 2</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"b is : "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span> + +a <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span> +b <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>str<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// devuelve 3</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"b is : "</span> <span class="operator token">+</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h3 id="eval_como_una_cadena_de_caracteres_(string)_definiendo_funciones_requiere_(_y_)_como_prefijo_y_sufijo"><code>eval</code> como una cadena de caracteres (string) definiendo funciones requiere "(" y ")" como prefijo y sufijo</h3> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> fctStr1 <span class="operator token">=</span> <span class="string token">"function a() {}"</span> +<span class="keyword token">var</span> fctStr2 <span class="operator token">=</span> <span class="string token">"(function a() {})"</span> +<span class="keyword token">var</span> fct1 <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>fctStr1<span class="punctuation token">)</span> <span class="comment token">// devuelve undefined</span> +<span class="keyword token">var</span> fct2 <span class="operator token">=</span> <span class="function token">eval</span><span class="punctuation token">(</span>fctStr2<span class="punctuation token">)</span> <span class="comment token">// deuelve una función</span></code></pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.1', 'eval')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-eval-x', 'eval')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Carác.</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>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>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="Observaciones_específicas_para_Gecko">Observaciones específicas para Gecko</h2> + +<ul> + <li>Históricamente <code>eval()</code> tenía un segundo argumento opcional, especificando un objeto en cuyo contexto la evaluación era ejecutada. Este argunmento no era estándar, y fue removido del <em>SpiderMonkey en</em> Gecko 1.9.1 (Firefox 3.5). Vea {{bug(442333)}}.</li> +</ul> + +<h2 id="Compatibilidad_Hacia_Atr.C3.A1s" name="Compatibilidad_Hacia_Atr.C3.A1s">Compatibilidad Hacia Atrás</h2> + +<h3 id="JavaScript_1.3_y_anteriores" name="JavaScript_1.3_y_anteriores">JavaScript 1.3 y anteriores</h3> + +<p>Puede usar <code>eval</code> indirectamente, aunque ésto está desaconsejado.</p> + +<h3 id="JavaScript_1.1" name="JavaScript_1.1">JavaScript 1.1</h3> + +<p><code>eval</code> también es un método de todos los objetos.</p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Objetos_globales/uneval", "uneval()")}}</li> + <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/Miembros">Miembros de operadores</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/evalerror/index.html b/files/es/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..13fbe371e4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,163 @@ +--- +title: EvalError +slug: Web/JavaScript/Referencia/Objetos_globales/EvalError +tags: + - Error +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong>EvalError </strong>indica un error con respecto a la función global {{jsxref("Global_Objects/eval", "eval()")}}. Esta excepción ya no es lanzada por JavaScript, sin embargo, el objeto EvalError se mantiene por motivos de compatibilidad.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>new EvalError([<var>mensaje</var>[, <var>nombreArchivo</var>[, <var>lineaNumero</var>]]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>mensaje</code></dt> + <dd>Opcional. Descripción del error en formato legible.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">nombreArchivo</font>{{non-standard_inline}}</dt> + <dd> + <p dir="ltr" id="tw-target-text">Opcional. El nombre del archivo que contiene el código que causó la excepción.</p> + </dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">lineaNumero</font>{{non-standard_inline}}</dt> + <dd> + <p dir="ltr" id="tw-target-text">Opcional. El número de línea del código que causó la excepción.</p> + </dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("EvalError.prototype")}}</dt> + <dd> + <p dir="ltr" id="tw-target-text">Permite la adición de propiedades a un objeto <strong>EvalError</strong>.</p> + </dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<p dir="ltr" id="tw-target-text">El objeto global <strong>EvalError</strong> no contiene ningún método propio, sin embargo, hereda algunos métodos a través de la cadena de prototipos.</p> + +<h2 id="Instancias_de_EvalError">Instancias de <code>EvalError</code></h2> + +<h3 id="Propiedades_2">Propiedades</h3> + +<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype', 'Properties')}}</div> + +<h3 id="Métodos_2">Métodos</h3> + +<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error/prototype', 'Métodos')}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p><code><strong>EvalError </strong></code>no se usa en la especificación actual de ECMAScript y, por ende, no será lanzado en tiempo de ejecución. Sin embargo, el mismo permanece para compatibilidad con versiones anteriores de la especificación.</p> + +<h3 id="Creando_un_EvalError">Creando un <code>EvalError</code></h3> + +<pre class="brush: js notranslate">try { + throw new EvalError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof EvalError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "EvalError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>No usado en esta especificación. Presente por compatibilidad con versiones anteriores.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>No usado en esta especificación. Presente por compatibilidad con versiones anteriores.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError.prototype")}}</li> + <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/apply/index.html b/files/es/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..07f47b42f2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,233 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/apply +tags: + - Function + - JavaScript + - Method + - función + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <strong>apply()</strong> invoca una determinada función asignando explícitamente el objeto <strong>this</strong> y un array o similar (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>) como parámetros (<strong>argumentos)</strong> para dicha función.</p> + +<div class="note"><strong>NOTA:</strong> Aunque la sintaxis de esta función es casi idéntica a {{jsxref("Function.call", "call()")}}, la diferencia fundamental es que <code>call()</code> acepta una lista de argumentos, mientras que <code>apply()</code> acepta un simple array con los argumentos.</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>fun</em>.apply(<em>thisArg</em>[, <em>argsArray</em>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>El valor del objeto <strong>this</strong> a utilizar dentro de la llamada a <em>fun</em>. Cabe mencionar que éste puede no ser el valor visto por el método: si el método es una función del tipo {{jsxref("Functions_and_function_scope/Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} o {{jsxref("Global_Objects/undefined", "undefined")}} será reemplazado por el objeto global, y los valores primitivos serán encapsulados.</dd> + <dt><code>argsArray</code></dt> + <dd>Un objeto similar a un array (<a href="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects" title="/en-US/docs/JavaScript/Guide/Predefined_Core_Objects#Working_with_Array-like_objects">array like object</a>), que contiene los parámetros con los que será llamada <em><code>fun</code></em>, o <code>null</code> o {{jsxref("undefined")}} si ningún argumento es estipulado. Desde la versión 5 de ECMAScript estos parámetros pueden estar en un objeto similar a un array en lugar de un array. Véase {{anch("Browser_compatibility", "browser compatibility")}} para mayor información.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + + <p>El resultado de llamar a la función con el valor dado <code><strong>this</strong></code> y argumentos.</p> + </dt> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Puede estipularse un objeto <code>this</code> diferente al llamar una función. <code>this</code> se refiere al objeto actual, el objeto haciendo la llamada. Con <code>apply</code>, puede escribirse un método una vez y heredarlo a otro objeto, sin necesidad de reescribir el método para adecuarlo al nuevo objeto.</p> + +<p><code>apply</code> es muy similar a {{jsxref("Function.call", "call()")}}, excepto por el tipo de argumentos que soporta. Puede utilizarse un arreglo de parámetros en lugar de un conjunto de pares nombre-valor. Con <code>apply</code>, puede utilizarse un arreglo literal, por ejemplo, <code><em>fun</em>.apply(this, ['eat', 'bananas'])</code>, o un objeto <code>Array</code>, por ejemplo, <code><em>fun</em>.apply(this, new Array('eat', 'bananas'))</code>.</p> + +<p>Puede también utilizarse {{jsxref("Funciones/arguments", "arguments")}} como parámetro <code>argsArray</code>. <code>arguments</code> es una variable local a la función. Puede utilizarse para acceder a todos los argumentos no específicados en la llamada al objeto. Por lo tanto, no se requiere conocer todos los argumentos del objeto invocado cuando se utiliza el método <code>apply</code>. Puede utilizarse <code>arguments</code> para pasar los argumentos al objeto invocado. El objeto invocado es entonces responsable por el manejo de los argumentos.</p> + +<p>Desde la 5ta edición de ECMAScript se puede utilizar también cualquier tipo de objeto similar a un arreglo, que en términos prácticos significa que tendrá una propiedad <code>length</code> y propiedades integer en el rango (<code>0...length)</code>. Por ejemplo, ahora puede utilizarse un {{domxref("NodeList")}} o un objeto personalizado como: <code>{'length': 2, '0': 'eat', '1': 'bananas'}</code>.</p> + +<div>{{ note("La mayoría de los navegadores, incluidos Chrome 14 e Internet Explorer 9, aún no soportan el uso de objetos similares a un array y arrojarán una excepción.") }}</div> + +<div> </div> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">Utilizando <strong><code>apply</code></strong> para encadenar constructores</h3> + +<p>Puedes utilizar <code>apply</code> para encadenar {{jsxref("Operadores/new", "constructors")}} para un objeto, similar a Java. En el ejemplo siguiente se crea un método global a {{jsxref("Function")}} llamado <code>construct</code>, en cual posibilita el uso de un objeto similar a un arreglo en un constructor en lugar de una lista de argumentos.</p> + +<pre class="brush: js">Function.prototype.construct = function (aArgs) { + var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>Ejemplo de uso:</p> + +<pre class="brush: js">function MyConstructor () { + for (var nProp = 0; nProp < arguments.length; nProp++) { + this["property" + nProp] = arguments[nProp]; + } +} + +var myArray = [4, "Hello world!", false]; +var myInstance = MyConstructor.construct(myArray); + +alert(myInstance.property1); // alerts "Hello world!" +alert(myInstance instanceof MyConstructor); // alerts "true" +alert(myInstance.constructor); // alerts "MyConstructor"</pre> + +<div class="note"><strong>Nota:</strong> El método <code>Function.construct</code> no nativo no funcionará con algunos constructores nativos (como {{jsxref("Date")}}, por ejemplo). En estos casos se deberá utilizar el método {{jsxref("Function.bind")}} (por ejemplo, supóngase un arreglo como el siguiente para utilizar con el constructor <code>Date</code>: <code>[2012, 11, 4]</code>; en este caso se tendría que escribir algo como: <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> – de cualquier manera, ésta no es la mejor manera de hacerlo y probablemente no debería utilizarse en ningún entorno en producción).</div> + +<h3 id="apply_and_built-in_functions" name="apply_and_built-in_functions"><strong><code>apply</code></strong> y funciones <strong>built-in</strong></h3> + +<p>El uso inteligente de <strong><code>apply</code></strong> permite utilizar funciones built-in para algunas tareas que, de otra manera, habrían sido escritas recorriendo los valores del arreglo dentro de un bucle. Como ejemplo, vamos a utilizar <code>Math.max</code>/<code>Math.min </code>para encontrar el máximo/mínimo valor en un arreglo.</p> + +<pre class="brush: js">/* min/max number in an array */ +var numbers = [5, 6, 2, 3, 7]; + +/* using Math.min/Math.max apply */ +var max = Math.max.apply(null, numbers); /* This about equal to Math.max(numbers[0], ...) or Math.max(5, 6, ..) */ +var min = Math.min.apply(null, numbers); + +/* vs. simple loop based algorithm */ +max = -Infinity, min = +Infinity; + +for (var i = 0; i < numbers.length; i++) { + if (numbers[i] > max) + max = numbers[i]; + if (numbers[i] < min) + min = numbers[i]; +}</pre> + +<p>Pero cuidado: utilizando <code>apply</code> de esta manera estás corriendo el riesgo de exceder el límite de argumentos permitido por el motor de JavaScript. Las consecuencias de aplicar una función con demasiados argumentos (imagínate más de decenas de miles de argumentos) varían entre los distintos motores (JavaScriptCore tiene un <a href="https://bugs.webkit.org/show_bug.cgi?id=80797">límite de argumentos fijo de 65536</a>), porque el límite (de hecho, incluso el comportamiento de cualquier pila excesivamente larga) no está especificado. Algunos motores lanzarán una excepción. Más perniciosamente, otros limitarán de manera arbitraria el número de argumentos que se están pasando en realidad a la función. (Para ilustrar este último caso: si un motor tuviera un límite de cuatro argumentos [por supuesto, los límites reales son significamente mayores], sería como si los argumentos 5, 6, 2 y 3 hubieran sido pasados a <code>apply</code> en los ejemplos anteriores, en lugar del arreglo completo). Si el valor de tu arreglo pudiera crecer en decenas de miles, utiliza una estrategia híbrida: aplica a tu función trozos del array a la vez:</p> + +<pre class="brush: js">function minOfArray(arr) { + var min = Infinity; + var QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +var min = minOfArray([5, 6, 2, 3, 7]);</pre> + +<h3 id="Utilizando_apply_en_monkey-patching">Utilizando apply en "monkey-patching" </h3> + +<p>(Reemplazando de manera dinámica los argumentos en tiempo de ejecución)</p> + +<p><code>apply </code>puede ser la mejor manera de reemplazar dinámicamente una función 'built-in' de Firefox, o de una librería de JavaScript. Dada una función <code>someobject.foo</code>, puedes modificar la función de una forma 'hacker', como ésta:</p> + +<pre><code>var originalfoo = someobject.foo; +someobject.foo = function() { + // Haz algo antes de llamar a la función + console.log(arguments); + // Llama a la función como la hubieras llamado normalmente + originalfoo.apply(this, arguments); + // Aquí, ejecuta algo después +}</code></pre> + +<p>Este método es especialmente útil cuando quieres depurar eventos, o interfaces con algún elemento que no tiene API, al igual que los diversos <code>.on</code> (eventos<code> [event]..., </code>como los que se usan en el <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">Devtools Inspector</a>)</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición Inicial. Implementada in JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.3', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<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>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<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>ES 5.1 generic array-like object as {{jsxref("Functions/arguments", "arguments")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{jsxref("Funciones/arguments", "arguments")}} objetos</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/arguments/index.html b/files/es/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..f0f8f6ca90 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,44 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Referencia/Objetos_globales/Function/arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef("Objetos_globales", "Function")}} {{deprecated_header}}</div> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Un objeto de tipo arreglo correspondiente a los argumentos pasados a la función.</p> + +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> + +<p>Use el objeto <code><a href="es/Referencia_de_JavaScript_1.5/Funciones/arguments">arguments</a></code> disponible dentro de las funciones en vez de <code>Function.arguments</code>.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>En caso de recursividad, es decir, si la función <code>f</code> aparece varias veces en la pila de llamada, el valor de <code>f.arguments</code> representa los argumentos correspondientes a la invocación más reciente de la función.</p> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3> + +<pre class="eval">function f(n) { g(n-1) } +function g(n) { + print("antes: " + g.arguments[0]); + if(n>0) + f(n); + print("después: " + g.arguments[0]); +} +f(2) +</pre> + +<p>resultados:</p> + +<pre class="eval">antes: 1 +antes: 0 +después: 0 +después: 1 +</pre> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Function/arguments", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Function/arguments" } ) }}</p> diff --git a/files/es/web/javascript/reference/global_objects/function/bind/index.html b/files/es/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..bdc7b5b73c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,293 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/bind +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef("Global_Objects", "Function")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <code><strong>bind()</strong></code> crea una nueva función, que cuando es llamada, asigna a su operador <em>this</em> el valor entregado, con una secuencia de argumentos dados precediendo a cualquiera entregados cuando la función es llamada. </p> + +<p>El valor de <em>this</em> es ignorado cuando la función es llamada con el operador <em>new</em>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>fun</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<dl> + <dt><code>thisArg</code></dt> + <dd>Es un valor que será enviado a la función destino cuando se llame a la función de enlace. Este valor será ignorado si la función de enlace es construida usando el operador {{jsxref("Operators/new", "new")}}.</dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Son los argumentos que se enviarán además de los provistos a la función de enlace cuando se invoque la función destino.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una copia de la función entregada con el valor especificado <code>this </code>y los argumentos iniciales.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>La función <code>bind()</code> crea una nueva función (<strong>función ligada</strong>) con el mismo cuerpo (propiedad interna {{jsxref("Function.prototype.call", "call")}} en términos de ECMAScript 5) como la función que será llamada (la <strong>función objetivo</strong> de la función ligada) con la referencia <code>this</code> asociada al primer argumento de <code>bind()</code>, el cual no podrá ser sobreescrito. <code>bind()</code> también acepta parámetros predeterminados que antecederán al resto de los parámetros específicos cuando la función objetivo sea llamada. Una función ligada también puede ser construída utilizando el operador {{jsxref("Operators/new", "new")}}: al hacerlo, actuará como si en su lugar hubiera sido construída la función objetivo.</p> + +<p>En este último caso, el parámetro correspondiente para <code>this</code> será ignorado, aunque los parámetros predeterminados que antecederán al resto sí serán provistos para la función emulada.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Ejemplo_Crear_una_función_ligada">Ejemplo: Crear una función ligada</h3> + +<p>El uso más simple de <code>bind()</code> es hacer que una función que, sin importar cómo es llamada, siempre apunte al mismo objeto con la referencia <code>this</code>. Un error común para nuevos programadores de JavaScript es que obtienen una referencia a un método de un objeto, posteriormente ejecutan ese método desde la referencia externa y esperan que la referencia de <code>this</code> siga apuntando al objeto original de donde se obtuvo el método (v.g. cuando se usa ese método en un callback). Sin el debido cuidado, el objeto original es comúnmente perdido. Creando una función ligada desde la función empleando el objeto original, resuelve limpiamente este problema:</p> + +<pre class="brush: js">this.x = 9; +var module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); // 81 + +var getX = module.getX; +getX(); // 9, porque en este caso, "this" apunta al objeto global + +// Crear una nueva función con 'this' asociado al objeto original 'module' +var boundGetX = getX.bind(module); +boundGetX(); // 81</pre> + +<h3 id="Ejemplo_Funciones_Parciales">Ejemplo: Funciones Parciales</h3> + +<p>El siguiente uso simple de <code>bind()</code> es definir una función con argumentos predeterminados que precederán a los argumentos finales de la función ligada. Estos argumentos iniciales (en caso de haberlos) se definen a continuación de lo que será la referencia de <code>this</code> y son entonces enviados como argumentos de la función objetivo, seguidos por los argumentos enviados a la función ligada cada vez que dicha función sea llamada.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] + +// Crear funcion (sin referencia this) con argumento inicial predeterminado +var leadingThirtysevenList = list.bind(undefined, 37); + +var list2 = leadingThirtysevenList(); // [37] +var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] +</pre> + +<h3 id="Ejemplo_Con_setTimeout">Ejemplo: Con setTimeout</h3> + +<p>De manera predeterminada, dentro de {{ domxref("window.setTimeout()") }}, la palabra reservada <code>this</code> será setteada al objeto {{ domxref("window") }} (o a global). Cuando se esté trabajando con métodos de clase que requieran que <code>this</code> se refiera a instancias de clase, usted puede explícitamente ligar <code>this</code> a la función callback para mantener la referencia de la instancia.</p> + +<pre class="brush: js">function LateBloomer() { + this.petalCount = Math.ceil(Math.random() * 12) + 1; +} + +// Declare bloom after a delay of 1 second +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log('I am a beautiful flower with ' + + this.petalCount + ' petals!'); +}; +</pre> + +<h3 id="Ejemplo_Funciones_ligadas_usadas_como_constructores">Ejemplo: Funciones ligadas usadas como constructores</h3> + +<div class="warning"> +<p><strong>Advetencia:</strong> Esta sección demuestra las capacidades de JavaScript y documenta algunos usos extremos del método <code>bind()</code>. Los métodos mostrados a continuación no son la mejor forma de hacer las cosas y probablemente no deberían ser utilizados en ningún ambiente productivo.</p> +</div> + +<p>Las funciones ligadas son automáticamente adecuadas para usarse con el operador {{jsxref("Operators/new", "new")}} para construir nuevas instancias creadas por la función objetivo. Cuando una función ligada es utilizada para construir un valor, el parámetro enviado para reemplazar la referencia <code>this</code> es ignorado. De cualquier forma, los argumentos iniciales sí son tomados en consideración y antecederán a los parámetros que se envíen al constructor:</p> + +<pre class="brush: js">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return this.x + ',' + this.y; +}; + +var p = new Point(1, 2); +p.toString(); // '1,2' + + +var emptyObj = {}; +var YAxisPoint = Point.bind(emptyObj, 0/*x*/); +// not supported in the polyfill below, +// works fine with native bind: +var YAxisPoint = Point.bind(null, 0/*x*/); + +var axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new Point(17, 42) instanceof YAxisPoint; // true +</pre> + +<p>Note que no necesita hacer nada especial para crear una función ligada para usarse con {{jsxref("Operators/new", "new")}}. El razonamiento es que usted no necesita hacer nada especial para crear una función ligada para ser llamada planamente, aún si usted prefiriera requerir que la función ligada sea llamada únicamente utilizando {{jsxref("Operators/new", "new")}}.</p> + +<pre class="brush: js">// Ejemplo que puede ser ejecutado directamente en tu consola JavaScript +// ...continúa de arriba + +// Aún puede ser invocada como una función normal +// (aunque es usualmente indeseable) +YAxisPoint(13); + +emptyObj.x + ',' + emptyObj.y; +// > '0,13' +</pre> + +<p>Si desea utilizar una función ligada únicamente usando {{jsxref("Operators/new", "new")}}, o únicamente mediante una llamada directa, la función objetivo debe forzar esa restricción.</p> + +<h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">Ejemplo: Crear atajos</h3> + +<p><code>bind()</code> también es útil en casos en los que desea crear un atajo para una función que requiere una referencia específica para <code>this</code>.</p> + +<p>Tomando {{jsxref("Array.prototype.slice")}}, por ejemplo, el cual se desearía utilizar para convertir un objeto tipo array a un arreglo real. Podría crear un atajo como el siguiente:</p> + +<pre class="brush: js">var slice = Array.prototype.slice; + +// ... + +slice.call(arguments); +</pre> + +<p>Con <code>bind()</code>, esto puede ser simplificado. En el siguiente fragmento de código, <code>slice</code> es una función ligada a la función {{jsxref("Function.prototype.call()", "call()")}} de {{jsxref("Function.prototype")}}, con la referencia <code>this</code> setteada a la función {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Esto significa que llamadas adicionales a <code>call()</code> pueden omitirse:</p> + +<pre class="brush: js">// same as "slice" in the previous example +var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>La función <code>bind()</code> fue añadida a la especificación ECMA-262, 5a edición; por lo tanto podría no estar presente en todos los navegadores. Usted puede parcialmente simularla al insertar el siguiente código al inicio de sus scripts, permitiendo emplear muchas de las funcionalidades de <code>bind()</code> en implementaciones que no la soportan nativamente.</p> + +<pre class="brush: js">if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP && oThis + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; +} +</pre> + +<p>Algunas de las muchas diferencias (bien podría haber otras, en tanto la siguiente lista no intenta ser exhaustiva) entre este algoritmo y el algoritmo de la especificación son:</p> + +<ul> + <li>La implementación parcial se basa en {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}} y {{jsxref("Function.prototype.apply()")}}, métodos incorporados para tener sus valores originales.</li> + <li>La implementación parcial crea funciones que no tienen "poison pills" inmutables {{jsxref("Function.caller", "caller")}} y las propiedades de los <code>argumentos</code> que lanzan una {{jsxref("Global_Objects/TypeError", "TypeError")}} sobre get, set, o deletion. (Esto podría ser añadido si la implementación soportara {{jsxref("Object.defineProperty")}}, o parcialmente implementada [sin el comportamiento throw-on-delete] si la implementación soportara las extensiones {{jsxref("Object.defineGetter", "__defineGetter__")}} y {{jsxref("Object.defineSetter", "__defineSetter__")}} ).</li> + <li>La implementación parcial crea funciones que tienen una propiedad <code>prototype</code>. (Las funciones ligadas no tienen ninguna).</li> + <li>La implementación parcial crea funciones ligadas cuya propiedad {{jsxref("Function.length", "length")}} no coincide con la indicada por ECMA-262: ésta crea funciones con longitud 0, mientras que la implementación completa, dependiendo de la longitud de la función objetivo y del número de argumentos pre-especificados, podría regresar una longitud mayor a zero.</li> +</ul> + +<p>Si elige usar esta implementación parcial,<strong> no debe de utilizarla en los casos en los que el comportamiento es distinto al de la especificación ECMA-262, 5th edition!</strong> Con un poco de cuidado, de cualquier manera (y tal vez con algunas modificaciones adicionales para adecuarse a sus necesidades específicas), esta implementación parcial podría ser un puente razonable al momento en que <code>bind()</code> sea ampliamente implementada acorde a a la especificación.</p> + +<p>Por favor checa <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> para ver una solución más profunda.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.5', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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("7")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5.1.4")}}</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>{{CompatAndroid("4.0")}}</td> + <td>{{CompatChrome("0.16")}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile("11.50")}}</td> + <td>{{CompatSafari("6.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/call/index.html b/files/es/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..4200c5d2a5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,113 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/call +tags: + - Function + - JavaScript + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El método <strong><code>call()</code></strong> llama a una función con un valor dado <code>this</code> y con argumentos provistos individualmente.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><em>function</em>.call(<em>thisArg</em>[, <em>arg1</em>[, <em>arg2</em>[, ...]]])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code><em>thisArg</em></code> {{optional_inline}}</dt> + <dd>El valor a usar como <code>this</code> cuando se llama a <em><code>function</code></em>.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Cuidado:</strong> En ciertos casos, <code><em>thisArg</em></code> puede no ser el valor actual visto por el método.</p> + + <p>Si el método es una función en {{jsxref("Strict_mode", "non-strict mode", "", 1)}}, {{jsxref("Global_Objects/null", "null")}} y {{jsxref("Global_Objects/undefined", "undefined")}} serán reemplazados con el objeto global, y valores primitivos serán convertidos a objetos.</p> + </div> + </dd> + <dt><code>arg1, arg2, ...</code></dt> + <dd>Argumentos para el objeto.</dd> + <dt> + <h3 id="Valor_de_retorno">Valor de retorno</h3> + </dt> + <dd>El resultado de llamar a la función con el <code>this</code> especificado y los argumentos.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><code>call()</code> permite que una función/método que pertenece a un objeto, ser asignada y llamada para un objeto diferente.</p> + +<p><code>call()</code> provee un nuevo valor de <code>this</code> a la función/método. Con <code>call()</code>, puedes escribir un método ona vez y heredarlo a otro objeto, sin tener que reescribir el método en el nuevo objeto.</p> + +<div class="note"><strong>Nota:</strong> Mientras la sintaxis de esta función es casi identica a la función {{jsxref("Function.apply", "apply()")}}, la diferencia fundamental es que <code>call()</code> acepta una <strong>lista de argumentos</strong>, mientras <code>apply()</code> accepta un <strong>arreglo sencillo de argumentos</strong>.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_call_para_encadenar_constructores_para_un_objeto">Usando <code>call</code> para encadenar constructores para un objeto</h3> + +<p>Puede usar <code>call</code> para encadenar constructores para un objeto (similar a Java).</p> + +<p>En el siguiente ejemplo, el constructor para el objeto <code>Producto</code> es definido con dos parametros, <code>nombre</code> y <code>precio</code>.</p> + +<p>Otras dos funciones <code>Comida</code> y <code>Juguete</code> invocan a <code>Producto</code>, pasándo <code>this</code>, <code>nombre</code> y <code>precio</code>. <code>Producto</code> inicializa las propiedades <code>nombre</code> y <code>precio</code>, ambas funciones especializadas definen la <code>categoria</code>.</p> + +<pre class="brush: js notranslate">function Producto(nombre, precio) { + this.nombre = nombre; + this.precio = precio; + + if (precio < 0) + throw RangeError('No se puede crear el producto "' + nombre + '" con un precio negativo'); + return this; +} + +function Comida(nombre, precio) { + Producto.call(this, nombre, precio); + this.categoria = 'comida'; +} +Comida.prototype = new Producto(); + +function Juguete(nombre, precio) { + Producto.call(this, nombre, precio); + this.categoria = 'juguete'; +} +Juguete.prototype = new Producto(); + +var queso = new Comida('feta', 5); +var diversion = new Juguete('robot', 40); +</pre> + +<h3 id="Usando_call_para_invocar_una_función_anónima">Usando <code>call</code> para invocar una función anónima</h3> + +<p>En este ejemplo, creamos una función anónima y usamos <code>call</code> para invocarla en cada objeto en un arreglo.</p> + +<p>El propósito principal de la función anónima aquí es agregar una función <code>print</code> a cada objeto, el cual puede imprimir el índice correcto en el arreglo.</p> + +<div class="blockIndicator note"> +<p>Pasar el objeto como valor <code>this</code> no es estrictamente necesario, pero se hace con propósito explicativo.</p> +</div> + +<pre class="brush: js notranslate">var animales = [ + {especie: 'Leon', nombre: 'Rey'}, + {especie: 'Whale', nombre: 'Fail'} +]; + +for (var i = 0; i < animales.length; i++) { + (function (i) { + this.imprimir = function () { + console.log('#' + i + ' ' + this.especie + ': ' + this.nombre); + } + this.imprimir(); + }).call(animales[i], i); +} +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/caller/index.html b/files/es/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..942df69a68 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,128 @@ +--- +title: Function.caller +slug: Web/JavaScript/Referencia/Objetos_globales/Function/caller +tags: + - Función Javascript No-standard Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef("Global_Objects", "Function")}} {{non-standard_header}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <code><strong><em>function</em>.caller</strong></code> retorna la función que llamó a la función especificada.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Si la función <code>f</code> fue llamada por desde nivel raiz (top level code), el valor de <code>f.caller</code> es {{jsxref("Global_Objects/null", "null")}}, de lo contrario se retorna la función que llamó a <code>f</code>.</p> + +<p>Esta propiedad reemplaza a la propiedad obsoleta {{jsxref("Functions_and_function_scope/arguments/caller", "arguments.caller")}} del objeto {{jsxref("Funciones/arguments", "arguments")}}.</p> + +<p>la propiedad especial <code>__caller__</code>, la cual retornaba el objeto de activación del llamador y permitía reconstruir la pila de llamadas, ha sido removida por motivos de seguridad.</p> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p>En caso de recursión se puede reconstruir la pila de llamada utilizando esta propiedad, tal como se muestra a continuación:</p> + +<pre class="brush: js">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p>Al momento de ejecutar <code>stop()</code> este se llama con la siguiente pila de llamadas:</p> + +<pre class="eval">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>Siendo verdadero la siguiente consideración:</p> + +<pre class="eval">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>Por lo tanto si se intenta obtener el rastro de llamadas (stack trace) de la función <code>stop()</code> como se muestra a continuación:</p> + +<pre class="brush: js">var f = stop; +var stack = 'Stack trace:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>se provocará una bucle que nunca termina.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Checking_the_value_of_a_function.27s_caller_property" name="Example:_Checking_the_value_of_a_function.27s_caller_property">Ejemplo: Verificar el valor de la propiedad <code>caller</code> de una función</h3> + +<p>El siguiente código verifica el valor de la propiedad <code>caller</code> de una función.</p> + +<pre class="brush: js">function myFunc() { + if (myFunc.caller == null) { + return 'The function was called from the top!'; + } else { + return 'This function\'s caller was ' + myFunc.caller; + } +} +</pre> + +<h2 id="Especificación">Especificación</h2> + +<p>No es parte de ninguna especificación. Se implementa en JavaScript 1.5.</p> + +<h2 id="Compatiblilidad_de_Navegadores">Compatiblilidad de Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Véase también</h2> + +<ul> + <li>Problema de implementación para SpiderMonkey {{bug(65683)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/displayname/index.html b/files/es/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..d464266838 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,77 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Referencia/Objetos_globales/Function/displayName +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>The <code><strong><em>function</em>.displayName</strong></code> property returns the display name of the function.</p> + +<h2 id="Description">Description</h2> + +<p>Cuando se define la propiedad <code>displayName</code> , retorna un mensaje con el nombre para mostrar en una función:</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<p>Tu puedes definir una funcion con un nombre a mostrar en un {{jsxref("Functions", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<p>Puedes cambiar dinámicamente el <code>displayName</code> de una función:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function(value) { + arguments.callee.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Normalmente, se prefiere por consolas y profilers sobre {{jsxref("Function.name", "func.name")}} a mostrar el nombre de una función.</p> + +<p>Al ingresar lo siguiente en una consola, debería mostrarse como algo así como "<code>function My Function()</code>":</p> + +<pre class="brush: js">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of any specification.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> +</div> + +<div> </div> diff --git a/files/es/web/javascript/reference/global_objects/function/function/index.html b/files/es/web/javascript/reference/global_objects/function/function/index.html new file mode 100644 index 0000000000..af4dff0361 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/function/index.html @@ -0,0 +1,92 @@ +--- +title: Function() constructor +slug: Web/JavaScript/Referencia/Objetos_globales/Function/Función +tags: + - Constructor + - Function + - JavaScript + - Referencia + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function/Function +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<p><span class="seoSummary">El constructor <strong><code>Function</code></strong> crea un nuevo <strong>objeto</strong> <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de eval, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>new Function([<var>arg1 </var>[, <var>arg2 </var>[, ...<var>argN</var>]] ,] <var>functionBody</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>arg1</var>, <var>arg2</var>, ... <var>argN</var></code></dt> + <dd>Nombres que utilizará la función como nombres de argumentos formales. Cada uno debe ser una cadena que corresponda a un identificador JavaScript válido, o una lista de dichas cadenas separadas por una coma. Por ejemplo: "<code>x</code>", "<code>theValue</code>" —o "<code>x,theValue</code>".</dd> + <dt><code><var>functionBody</var></code></dt> + <dd>Una cadena que contiene las declaraciones de JavaScript que comprenden la definición de función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Los objetos <code>Function</code> creados con el constructor <code>Function</code> se procesan cuando se crea la función. Esto es menos eficiente que declarar una función con una {{jsxref("Operators/function", "expresión de función")}} o {{jsxref("Statements/function", "declaración de función")}} y llamarla dentro de tu código porque tales funciones se procesan con el resto del código.</p> + +<p>Todos los argumentos pasados a la función se tratan como los nombres de los identificadores de los parámetros en la función que se va a crear, en el orden en que se pasan. Omitir un argumento dará como resultado que el valor de ese parámetro sea <code>undefined</code>.</p> + +<p>Invocar el constructor <code>Function</code> como función (sin usar el operador <code>new</code>) tiene el mismo efecto que invocarlo como constructor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Especificar_argumentos_con_el_constructor_Function">Especificar argumentos con el constructor Function</h3> + +<p>El siguiente código crea un objeto <code>Function</code> que toma dos argumentos.</p> + +<pre class="brush: js notranslate">// El ejemplo se puede ejecutar directamente en tu consola JavaScript + +// Crea una función que toma dos argumentos y devuelve la suma de esos argumentos +const adder = new Function('a', 'b', 'return a + b'); + +// Llama a la función +adder(2, 6); +// 8 +</pre> + +<p>Los argumentos "<code>a</code>" y "<code>b</code>" son nombres de argumentos formales que se utilizan en el cuerpo de la función, "<code>return a + b</code>".</p> + +<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-function-constructor', 'Constructor Function')}}</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.builtins.Function.Function")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li> + <li>{{jsxref("Statements/function", "Declaración de function")}}</li> + <li>{{jsxref("Operators/function*", "Expresión function*")}}</li> + <li>{{jsxref("Statements/function", "Declaración de function*")}}</li> + <li>{{jsxref("Operators/function*", "Expresión function*")}}</li> + <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li> + <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/index.html b/files/es/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..5b586f3611 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,118 @@ +--- +title: Function +slug: Web/JavaScript/Referencia/Objetos_globales/Function +tags: + - Clase + - Class + - Declaración + - Expresión + - Function + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<p>Cada función de JavaScript en realidad es un objeto <code>Function</code>. Esto se puede ver con el código <code>(function() {}).constructor === Function</code>, que devuelve <code>true</code>.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("Function/Function", "Function()", "", 1)}}</dt> + <dd>Crea un nuevo objeto <code>Function</code>. Llamar al constructor directamente puede crear funciones dinámicamente, pero tiene problemas de seguridad y de rendimiento similares (pero mucho menos importantes) para {{jsxref("eval")}}. Sin embargo, a diferencia de <code>eval</code>, el constructor <code>Function</code> crea funciones que solo se ejecutan en el ámbito global.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}}</dt> + <dd>Un arreglo que corresponde a los argumentos pasados a una función.<br> + Esto está obsoleto como propiedad de {{jsxref("Function")}}. En su lugar, utiliza el objeto {{jsxref("Functions/arguments", "arguments", "", 1)}} (disponible dentro de la función).</dd> + <dt>{{jsxref("Function.caller")}}</dt> + <dd>Especifica la función que invocó a la función que se está ejecutando actualmente.<br> + Esta propiedad está obsoleta, y solo es funcional para algunas funciones no estrictas.</dd> + <dt>{{jsxref("Function.displayName")}}</dt> + <dd>El nombre a mostrar de la función.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Especifica el número de argumentos que espera la función.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>El nombre de la función.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}</dt> + <dd>Llama a una función y establece su <code>this</code> en el <code><var>thisArg</var></code> proporcionado. Los argumentos se pueden pasar como un objeto {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}</dt> + <dd>Crea una nueva función que, cuando se llama, tiene su <code>this</code> configurado en el <code><var>thisArg</var></code>. Opcionalmente, una determinada secuencia de argumentos se antepondrá a los argumentos siempre que se llame a la función recién invocada.</dd> + <dt>{{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}</dt> + <dd>Llama a una función y establece su <code>this</code> en el valor proporcionado. Los argumentos se pueden pasar tal cual.</dd> + <dt>{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el código fuente de la función.<br> + Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Diferencia_entre_el_constructor_Function_y_la_declaración_function">Diferencia entre el constructor Function y la declaración function</h3> + +<p>Las funciones creadas con el constructor <code>Function</code> no crean cierres para sus contextos de creación; siempre se crean en el ámbito global. Al ejecutarlos, solo podrán acceder a sus propias variables locales y globales, no a las del ámbito en el que se creó el constructor <code>Function</code>. Esto es diferente de usar {{jsxref("eval")}} con código para una expresión de función.</p> + +<pre class="brush: js notranslate">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // esta |x| se refiere a la |x| global +} + +function createFunction2() { + var x = 20; + function f() { + return x; // esta |x| se refiere a la |x| local + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>Si bien este código funciona en los navegadores web, <code>f1()</code> producirá un <code>ReferenceError</code> en Node.js, ya que no encontrará a <code>x</code>. Esto se debe a que el ámbito de nivel superior en Node no es el ámbito global, y <code>x</code> será local para el módulo.</p> + +<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-function-objects', 'Function')}}</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.builtins.Function")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Functions", "Funciones y ámbito de la función", "", 1)}}</li> + <li>Declaración {{jsxref("Statements/function", "function")}}</li> + <li>Expresión {{jsxref("Operators/function", "function")}}</li> + <li>Declaración {{jsxref("Statements/function*", "function*")}}</li> + <li>Expresión {{jsxref("Operators/function*", "function*")}}</li> + <li>{{jsxref("AsyncFunction", "Función asíncrona", "", 1)}}</li> + <li>{{jsxref("GeneratorFunction", "Función generadora", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/length/index.html b/files/es/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..7638859bba --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,151 @@ +--- +title: Function.length +slug: Web/JavaScript/Referencia/Objetos_globales/Function/length +tags: + - JavaScript + - Propiedad + - función +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef("Global_Objects", "Function")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La propiedad <code><strong>length</strong></code> especifica el número de argumentos esperados por la función.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>length</code> es la propiedad de una función objeto, e indica el número de argumentos que una función requiere, por ejemplo, el número de parámetros formales. Este número no incluye {{jsxref("rest_parameters", "rest parameter", "", 1)}}. En cambio, {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} es local a una función y aporta el número de argumentos actuales pasados a una función.</p> + +<h3 id="Propiedades_de_la_Función_constructora">Propiedades de la <code>Función</code> constructora</h3> + +<p>El {{jsxref("Global_Objects/Function", "Function")}} constructor en sí mismo es {{jsxref("Global_Objects/Function", "Function")}} un objeto. Sú <code>propiedad length</code> tiene el valor 1. Los atributos son: Grabable: <code>false</code>, Enumerable: <code>false</code>, Configurable: <code>true</code>.</p> + +<h3 id="Propiedad_de_la_Función_prototype_object">Propiedad de la <code>Función</code> prototype object</h3> + +<p>La propiedad length del {{jsxref("Global_Objects/Function", "Function")}} objeto prototype tiene el valor 0.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: js">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ +console.log((function(...args) {}).length); /* 0, resto de parámetros no se contemplan */ +console.log((function(a, b = 1, c) {}).length); /* 1, solo parámetros antes del primero con un valor por defecto son contados */ +</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.1.</td> + </tr> + <tr> + <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br> + {{SpecName('ES5.1', '#sec-15.3.3.2', 'Function.length')}}<br> + <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br> + {{SpecName('ES5.1', '#sec-properties-of-the-function-prototype-object', 'Function.length')}}<br> + <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br> + {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td><code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} constructor:<br> + {{SpecName('ES6', '#sec-function.length', 'Function.length')}}<br> + <code>length</code> property of the {{jsxref("Global_Objects/Function", "Function")}} prototype object:<br> + {{SpecName('ES6', '#sec-15.3.4', 'Function.length')}}<br> + <code>length</code> property of {{jsxref("Global_Objects/Function", "Function")}} instances:<br> + {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>El atributo <code>configurable</code> de esta propiedad ahora es <code>true</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(37)}}</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>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> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(37)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Global_Objects/Function", "Función")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/name/index.html b/files/es/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..2440bd60f1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,223 @@ +--- +title: Function.name +slug: Web/JavaScript/Referencia/Objetos_globales/Function/name +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong><em>function</em>.name</strong></code> retorna el nombre de la función o retorna <code>"anonymous"</code> por funciones creadas anónimamente.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div>Nótese que en implementaciones no estándar previas a ES2015 el atributo <code>configurable</code> también era <code>false</code>.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Nombre_de_una_declaración_de_función">Nombre de una declaración de función</h3> + +<p>La propiedad <code>name</code> retorna el nombre de una declaración de función.</p> + +<pre class="brush: js">function doSomething() {} + +console.log(doSomething.name); // imprime en pantalla "doSomething" +</pre> + +<h3 id="Nombre_de_constructor_de_función">Nombre de constructor de función</h3> + +<p>Las funciones creadas con la sintaxis <code>new Function(...)</code> o simplemente <code>Function(...)</code> tienen como propiedad <code>name</code> una cadena vacía. En los ejemplos a continuación se crean funciones anónimas, tales que su <code>name</code> retorna una cadena vacía:</p> + +<pre class="brush: js">var f = function() {}; +var object = { + someMethod: function() {} +}; + +console.log(f.name == ''); // true +console.log(object.someMethod.name == ''); // también true +</pre> + +<h3 id="Nombres_de_función_inferidos">Nombres de función inferidos</h3> + +<p>Los navegadores que implementan funciones ES2015 pueden inferir el nombre de una función anónima de su posición sintáctica. Por ejemplo:</p> + +<pre class="brush: js">var f = function() {}; +console.log(f.name); // "f"</pre> + +<p>Se puede definir una función con un nombre en un {{jsxref("Operators/Function", "function expression", "", 1)}}:</p> + +<pre class="brush: js">var object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // imprime "object_someMethod" + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>No se puede cambiar el nombre de una función, esta propiedad es de solo lectura:</p> + +<pre class="brush: js">var object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'someMethod'; +console.log(object.someMethod.name); // cadena vacía, someMethod es anónimo +</pre> + +<p>Sin embargo, se puede usar {{jsxref("Object.defineProperty()")}} para cambiarlo.</p> + +<h3 id="Nombres_de_métodos">Nombres de métodos</h3> + +<pre class="brush: js">var o = { + foo(){} +}; +o.foo.name; // "foo";</pre> + +<h3 id="Nombres_de_funciones_atadas_(creadas_con_.bind())">Nombres de funciones atadas (creadas con .bind())</h3> + +<p>{{jsxref("Function.bind()")}} produce una función cuyo nombre es igual a "bound " seguido del nombre de la función original.</p> + +<pre class="brush: js">function foo() {}; +foo.bind({}).name; // "bound foo"</pre> + +<h3 id="Nombres_de_funciones_getters_y_setters">Nombres de funciones getters y setters</h3> + +<p>Cuando se usan <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> y <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a>, </code>"get" y "set" aparecerán en el nombre de la función.</p> + +<pre class="brush: js">var o = { + get foo(){}, + set foo(x){} +}; + +var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); +descriptor.get.name; // "get foo" +descriptor.set.name; // "set foo";</pre> + +<h2 id="Ejemplos_2">Ejemplos</h2> + +<p>Se puede usar <code>obj.constructor.name</code> para saber cuál es la "clase" de un objeto:</p> + +<pre class="brush: js">function a() {} + +var b = new a(); + +console.log(b.constructor.name); // imprime "a" +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para versiones de IE < 9, se puede usar <code>fn._name()</code> en su lugar. Para IE9 o posteriores se puede usar el siguiente <a href="https://github.com/JamesMGreene/Function.name">polyfill</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-name', 'name')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-name', 'name')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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(33.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Nombres inferidos en funciones anónimas</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</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 for Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Configurable: true</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Nombres inferidos en funciones anónimas</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(51.0)}}</td> + <td>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(51.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] See {{bug(883377)}}.</p> diff --git a/files/es/web/javascript/reference/global_objects/function/tosource/index.html b/files/es/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..3cee3c1d4c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,97 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <code><strong>toSource()</strong></code> devuelve un string representando el código fuente del objeto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>function</var>.toSource(); +Function.toSource(); +</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toSource</code> devuelve los siguientes valores:</p> + +<ul> + <li>For the built-in {{jsxref("Function")}} object, <code>toSource()</code> devuelve la siguiente cadena indicando que el código fuente no está disponible: + + <pre class="brush: js">function Function() { + [native code] +} +</pre> + </li> + <li>En funciones personalizadas, <code>toSource()</code> devuelve el código JavaScript que define el objeto como un string.</li> +</ul> + +<p>Éste método es usado de forma interna por JavaScript y no explicitamente desde el código. Puedes usar <code>toSource</code> mientras depuras para examinar el contenido de un objeto.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No está reflejado en ningún estándar. Implementaso en JavaScript 1.3.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/function/tostring/index.html b/files/es/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..b5ee70147e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,130 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/toString +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toString()</strong></code> retorna una cadena representando el código fuente de la función.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>function</var>.toString(indentation)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>indentation</code> {{non-standard_inline}} {{obsolete_inline(17)}}</dt> + <dd>La cantidad de espacios a indentar en la representación de cadena del código fuente. Si <code>indentation</code> es menor o igual a <code>-1</code>, la mayoría de los espacios innecesarios son eliminados.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El objeto {{jsxref("Function")}} reconduce el método {{jsxref("Object.prototype.toString", "toString")}} heredado de {{jsxref("Object")}}; no hereda {{jsxref("Object.prototype.toString")}}. Para objetos {{jsxref("Function")}}, el método <code>toString</code> retorna una representación de cadena del objeto en forma de declaración de función. Esto es, <code>toString</code> descompila la función y la cadena retornada incluye la palabra clave <code>function</code>, la lista de argumentos, llaves y el código fuente del cuerpo de la función.</p> + +<p>JavaScript llama al método <code>toString</code> automáticamente cuando una {{jsxref("Function")}} va a ser representada como un valor de texto, p.e. cuando una función es concatenada con un valor de cadena (string).</p> + +<p>El método <code>toString()</code> producirá una excepción {{jsxref("TypeError")}} ("Function.prototype.toString called on incompatible object"), si el valor de su objeto <code>this</code> no es un objeto <code>Function</code>. Esto también ocurrirá para objetos {{jsxref("Proxy")}}, por ejemplo:</p> + +<pre class="brush: js example-bad">Function.prototype.toString.call("foo"); // TypeError + +var proxy = new Proxy(function() {}, {}); +Function.prototype.toString.call(proxy); // TypeError +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.4.2', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Añadidos requerimientos más específicos para la representación de cadena.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</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>Prestación</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="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> + +<ul> + <li>Desde Gecko 17.0 {{geckoRelease("17")}}, <code>Function.prototype.toString()</code> fue implementada salvando el código fuente de la función. El descompilador fue eliminado, de modo que el parámetro <code>indentation</code> ya no se necesita más. Ver {{bug("761723")}} para más detalles.</li> + <li>A partir de Gecko 38 {{geckoRelease("38")}}, <code>Function.prototype.toString()</code> produce error para objetos {{jsxref("Proxy")}} ({{bug(1100936)}}).</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/generator/index.html b/files/es/web/javascript/reference/global_objects/generator/index.html new file mode 100644 index 0000000000..ec92ca413f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/generator/index.html @@ -0,0 +1,228 @@ +--- +title: Generador +slug: Web/JavaScript/Referencia/Objetos_globales/Generador +tags: + - ECMAScript2015 + - ECMAScript6 + - Generador + - Generador Legado + - Iterador Legado + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Generator +--- +<div>{{JSRef}}</div> + +<div></div> + +<p>El objeto <code>Generator</code> es retornado por una {{jsxref("Statements/function*", "función generator", "", 1)}} y es conformado tanto el protocolo iterable como el protocolo iterador.</p> + +<h2 id="Constructor">Constructor</h2> + +<p>Este objeto no puede ser instanciado directamente. En su lugar, una instancia del objeto <code>Generator</code> puede ser devuelta por una <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/function*">función generator</a>:</p> + +<pre class="syntaxbox notranslate"> function* gen() { + yield 1; + yield 2; + yield 3; + } + + var g = gen(); // "Generator { }"</pre> + +<dl> +</dl> + +<h2 id="Métodos_de_instanciación">Métodos de instanciación</h2> + +<p><em>Tambien hereda propiedades de {{JSxRef("Iterator")}}</em></p> + +<dl> + <dt>{{jsxref("Generator.prototype.next()")}}</dt> + <dd>Retorna el valor ofecido por la expresión {{jsxref("Operators/yield", "yield")}}</dd> + <dt>{{jsxref("Generator.prototype.return()")}}</dt> + <dd>Retorna el valor dado y finaliza el generador.</dd> + <dt>{{jsxref("Generator.prototype.throw()")}}</dt> + <dd>Lanza un error al generador (también finaliza el generador, a menos que sea atrapado desde ese generador)</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<p><em>Tambien hereda propiedades de {{JSxRef("Iterator")}}</em></p> + +<dl> + <dt><code>Generator.prototype.constructor</code></dt> + <dd>Especifica la funciòn que construye el prototipo del objeto.</dd> +</dl> + +<dl> + <dt><code>Generator.prototype[@@toStringTag]</code></dt> + <dd>La cuerda <code>"Generator"</code>.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Un_iterador_infinito">Un iterador infinito</h3> + +<pre class="brush: js notranslate"> function* idMaker() { + var index = 0; + while(true) + yield index++; + } + + var gen = idMaker(); // "Generator { }" + + console.log(gen.next().value); // 0 + console.log(gen.next().value); // 1 + console.log(gen.next().value); // 2 + // ...</pre> + +<h2 id="Objetos_generadores_legados">Objetos generadores legados</h2> + +<p>Firefox(SpderMonkey) tambén implementa una versón mas temprana de generadores en JavaScript 1.7, donde el asterisco (*) en la declaración de la funcion no era necesario(sólo use la palabra reservada yield en el cuerpo de la función). Sin embargo, los generadores legados se encuentran depreciados. No los use. Serán removidos ({{bug(1083482)}}).</p> + +<h3 id="Métodos_de_generadores_legados">Métodos de generadores legados</h3> + +<dl> + <dt><code>Generator.prototype.next() </code>{{non-standard_inline}}</dt> + <dt></dt> + <dt>Retorna el valor ofrecido por la expresión {{jsxref("Operators/yield", "yield")}}. Esto se corresponde con el método next() en el objeto generador de ES2015.</dt> + <dt></dt> + <dt><code>Generator.prototype.close()</code> {{non-standard_inline}}</dt> + <dd><br> + Cierra el generador. Sí el método next() es llamado por la expresión {{jsxref("StopIteration")}}, un error será lanzado. Esto se corresponde con el método return() del objeto generador de ES2015.</dd> + <dt><code>Generator.prototype.send()</code> {{non-standard_inline}}</dt> + <dd>Utilizado para enviar un valor al generador. El valor es retornado por la expresion {{jsxref("Operators/yield", "yield")}}, y retorna el valor ofrecido por la siguiente expresion {{jsxref("Operators/yield", "yield")}}. <code>send(x)</code> Se corresponde a <code>next(x)</code> en el objeto generador de ECMAScript 2015.</dd> + <dt><strong><code>Generator.</code></strong><code>prototype.</code> <strong><code>throw()</code> </strong> {{non-standard_inline}}</dt> + <dd>Lanza un error al generador. Esto se corresponde con el metodo throw() en el objeto genererador de ES2015.</dd> +</dl> + +<h3 id="Ejemplo_de_generador_legado">Ejemplo de generador legado</h3> + +<pre class="brush: js notranslate"> function fibonacci() { + var a = yield 1; + yield a * 2; + } + + var it = fibonacci(); + console.log(it); // "Generator { }" + console.log(it.next()); // 1 + console.log(it.send(10)); // 20 + console.log(it.close()); // undefined + console.log(it.next()); // throws StopIteration (as the generator is now closed) + </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-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-objects', 'Generator objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></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>Funcionalidad</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</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>Funcionalidad</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</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>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(39.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Vea_también">Vea también</h2> + +<h3 id="Generadores_Legados">Generadores Legados</h3> + +<ul> + <li>{{jsxref("Statements/Legacy_generator_function", "The legacy generator function", "", 1)}}</li> + <li>{{jsxref("Operators/Legacy_generator_function", "The legacy generator function expression", "", 1)}}</li> + <li>{{jsxref("StopIteration")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol">The legacy Iterator protocol</a></li> +</ul> + +<h3 id="Generadores_ES2015">Generadores ES2015</h3> + +<ul> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/generator/next/index.html b/files/es/web/javascript/reference/global_objects/generator/next/index.html new file mode 100644 index 0000000000..6b6bf61cbe --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/generator/next/index.html @@ -0,0 +1,109 @@ +--- +title: Generator.prototype.next() +slug: Web/JavaScript/Referencia/Objetos_globales/Generador/next +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/next +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>next</strong></code><strong><code>()</code></strong> regresa un objeto con las propiedades <code>done</code> y <code>value</code>. También puedes pasar un parámetro al método <code>next</code> para enviar un valor al generador.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>gen</var>.next(valor)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor a enviar al generador.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un {{jsxref("Object")}} con dos propiedades:</p> + +<ul> + <li><code>done</code> (booleano) + + <ul> + <li>Es <code>verdadero</code> si el iterador ya llegó al final de la secuencia. En este caso <code>valor</code> define opcionalmente el <em>valor de retorno</em> del iterador.</li> + <li>Es <code>falso</code> si el iterador puede dar un siguiente valor en la secuencia. Es equivalente a no definir la propiedad <code>done</code>.</li> + </ul> + </li> + <li><code>value</code> - cualquier valor Javascript regresado por el iterador. Éste puede ser omitido si <code>done</code> is <code>verdadero</code>.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_next()">Using <code>next()</code></h3> + +<p>The following example shows a simple generator and the object that the <code>next</code> method returns:</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); // "Generator { }" +g.next(); // "Object { value: 1, done: false }" +g.next(); // "Object { value: 2, done: false }" +g.next(); // "Object { value: 3, done: false }" +g.next(); // "Object { value: undefined, done: true }" +</pre> + +<h3 id="Sending_values_to_the_generator">Sending values to the generator</h3> + +<p>In this example, <code>next</code> is called with a value. Note that the first call did not log anything, because the generator was not yielding anything initially.</p> + +<pre class="brush: js">function* gen() { + while(true) { + var value = yield null; + console.log(value); + } +} + +var g = gen(); +g.next(1); +// "{ value: null, done: false }" +g.next(2); +// 2 +// "{ value: null, done: false }" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Generator.next")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/generator/return/index.html b/files/es/web/javascript/reference/global_objects/generator/return/index.html new file mode 100644 index 0000000000..649d5b8dec --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/generator/return/index.html @@ -0,0 +1,102 @@ +--- +title: Generator.prototype.return() +slug: Web/JavaScript/Referencia/Objetos_globales/Generador/return +tags: + - ECMAScript 2015 + - Generador + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/return +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>return()</strong></code> regresa el valor dado y finaliza al generador.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>gen</var>.return(valor)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor a regresar.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El valor dado como argumento.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_return()">Utilizando <code>return()</code></h3> + +<p>El siguiente ejemplo muestra un generador simple y su método <code>return</code>.</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); + +g.next(); // { value: 1, done: false } +g.return('foo'); // { value: "foo", done: true } +g.next(); // { value: undefined, done: true } +</pre> + +<p>Si <code>return(valor)</code> es invocado en un generador que ya está en su estado "completado", el generador permanecerá en estado "completado". Si no se da ningún argumento, el objeto regresado es el mismo a que si se invocara <code>.next()</code>. Si se da un argumento, éste se asignará como valor en la propiedad <code>value</code> del objeto regresado.</p> + +<pre class="brush: js">function* gen() { + yield 1; + yield 2; + yield 3; +} + +var g = gen(); +g.next(); // { value: 1, done: false } +g.next(); // { value: 2, done: false } +g.next(); // { value: 3, done: false } +g.next(); // { value: undefined, done: true } +g.return(); // { value: undefined, done: true } +g.return(1); // { value: 1, done: 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('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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 es generada a partir de datos estructurados. Si quieres contribuir a estos datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y manda un pull request.</div> + +<p>{{Compat("javascript.builtins.Generator.return")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/function*","function*")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/generator/throw/index.html b/files/es/web/javascript/reference/global_objects/generator/throw/index.html new file mode 100644 index 0000000000..9f4cd76fbe --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/generator/throw/index.html @@ -0,0 +1,94 @@ +--- +title: Generator.prototype.throw() +slug: Web/JavaScript/Referencia/Objetos_globales/Generador/throw +translation_of: Web/JavaScript/Reference/Global_Objects/Generator/throw +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>throw()</strong></code> reanuda la ejecución de un generador al lanzar un error en éste y regresar un objeto con las dos propiedades <code>done</code> y <code>value</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>gen</var>.throw(excepción)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>excepción</code></dt> + <dd>La excepción a lanzar. Al hacer depuración, es útil que la excepción cumpla con <code>instanceof</code> {{jsxref("Error")}}.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un {{jsxref("Object")}} con dos propiedades:</p> + +<ul> + <li><code>done</code> (booleano) + + <ul> + <li>Es <code>verdadero</code> si el iterador ya llegó al final de la secuencia. En este caso <code>valor</code> define opcionalmente el <em>valor de retorno</em> del iterador.</li> + <li>Es <code>falso</code> si el iterador puede dar un siguiente valor en la secuencia. Es equivalente a no definir la propiedad <code>done</code>.</li> + </ul> + </li> + <li><code>value</code> - cualquier valor Javascript regresado por el iterador. Éste puede ser omitido si <code>done</code> is <code>verdadero</code>.</li> +</ul> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_throw()">Using <code>throw()</code></h3> + +<p>The following example shows a simple generator and an error that is thrown using the <code>throw</code> method. An error can be caught by a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> block as usual.</p> + +<pre class="brush: js">function* gen() { + while(true) { + try { + yield 42; + } catch(e) { + console.log('Error caught!'); + } + } +} + +var g = gen(); +g.next(); +// { value: 42, done: false } +g.throw(new Error('Something went wrong')); +// "Error caught!" +// { value: 42, done: false } +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Generator.throw")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">function*</a></code></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/index.html b/files/es/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..9946b3f648 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/index.html @@ -0,0 +1,203 @@ +--- +title: Objetos globales +slug: Web/JavaScript/Referencia/Objetos_globales +tags: + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>Este capítulo documenta todo acerca de estándares de Javascript, los objetos integrados en JavaScript, así como los métodos y propiedades de cada uno.</p> + +<p>El término "objetos globales" (u objetos incorporados estándar) aquí no debe confundirse con el <strong>objeto global</strong>. Aquí, los objetos globales se refieren a <strong>objetos en el ámbito global</strong>. Se puede acceder al <strong>objeto global</strong> en sí usando el operador {{jsxref("Operadores/this", "this")}} en el ámbito global (pero solo si no se usa el modo estricto ECMAScript 5, en ese caso devuelve {{jsxref("undefined")}}). De hecho, el alcance global consiste en las propiedades del objeto global, incluidas las propiedades heredadas, si las hay.</p> + +<p>Otros objetos en el alcance global son <a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">creados por el script de usuario</a> o son proporcionados por la aplicación host. Los objetos host disponibles en los contextos del navegador están documentados en la <span style="line-height: 1.5;"><a href="/es/docs/Web/API/Reference">referencia de la API</a></span>. Para obtener más información acerca de la distinción entre <span style="line-height: 1.5;">el <a href="/es/docs/DOM/DOM_Reference">DOM</a> y el núcleo de <a href="/es/docs/Web/JavaScript">JavaScript</a></span>, <span style="line-height: 1.5;">vea <a href="/es/docs/Web/JavaScript/JavaScript_technologies_overview">Introducción a las tecnologías JavaScript</a>.</span></p> + +<h2 id="Objetos_estándar_por_categoría">Objetos estándar por categoría</h2> + +<h3 id="Propiedades_de_valor">Propiedades de valor</h3> + +<p>Estas propiedades globales devuelven un valor simple; ellos no tienen propiedades o métodos.</p> + +<ul> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}} literal</li> + <li>{{JSxRef("globalThis")}}</li> +</ul> + +<h3 id="Propiedades_de_funciones">Propiedades de funciones</h3> + +<p>Estas funciones globales -funciones llamadas globalmente en lugar de un objeto- devuelven directamente sus resultados a la persona que llama.</p> + +<ul> + <li>{{jsxref("Objetos_globales/eval", "eval()")}}</li> + <li>{{jsxref("Objetos_globales/uneval", "uneval()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Objetos_globales/isFinite", "isFinite()")}}</li> + <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Objetos_globales/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Objetos_globales/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Objetos_globales/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Objetos_globales/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Objetos_globales/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Objetos_globales/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{jsxref("Objetos_globales/escape", "escape()")}} {{deprecated_inline}}</li> + <li>{{jsxref("Objetos_globales/unescape", "unescape()")}} {{deprecated_inline}}</li> +</ul> + +<h3 id="Objetos_fundamentales">Objetos fundamentales</h3> + +<p>Estos son los objetos fundamentales y básicos sobre los que se basan todos los demás objetos. Esto incluye objetos que representan objetos generales, funciones y errores.</p> + +<ul> + <li>{{jsxref("Object")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Symbol")}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</li> + <li>{{jsxref("RangeError")}}</li> + <li>{{jsxref("ReferenceError")}}</li> + <li>{{jsxref("SyntaxError")}}</li> + <li>{{jsxref("TypeError")}}</li> + <li>{{jsxref("URIError")}}</li> +</ul> + +<h3 id="Números_y_fechas">Números y fechas</h3> + +<p>Estos son los objetos base que representan números, fechas y cálculos matemáticos.</p> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{JSxRef("BigInt")}}</li> + <li>{{jsxref("Math")}}</li> + <li>{{jsxref("Date")}}</li> +</ul> + +<h3 id="Procesamiento_de_texto">Procesamiento de texto</h3> + +<p>Estos objetos representan cadenas y soporte para manipularlos.</p> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Colecciones_indexadas">Colecciones indexadas</h3> + +<p>Estos objetos representan colecciones de datos que están ordenadas por un valor de índice. Esto incluye matrices (tipadas) y construcciones tipo array.</p> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Int8Array")}}</li> + <li>{{jsxref("Uint8Array")}}</li> + <li>{{jsxref("Uint8ClampedArray")}}</li> + <li>{{jsxref("Int16Array")}}</li> + <li>{{jsxref("Uint16Array")}}</li> + <li>{{jsxref("Int32Array")}}</li> + <li>{{jsxref("Uint32Array")}}</li> + <li>{{jsxref("Float32Array")}}</li> + <li>{{jsxref("Float64Array")}}</li> + <li>{{JSxRef("BigInt64Array")}}</li> + <li>{{JSxRef("BigUint64Array")}}</li> +</ul> + +<h3 id="Colecciones_con_clave">Colecciones con clave</h3> + +<p>Estos objetos representan colecciones que usan claves; estos contienen elementos que son iterables en el orden de inserción.</p> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> + +<h3 id="Colecciones_de_vectores">Colecciones de vectores</h3> + +<p>Los tipos de datos vectoriales {{Glossary("SIMD")}} son objetos donde los datos se organizan en carriles.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Datos_estructurados">Datos estructurados</h3> + +<p>Estos objetos representan e interactúan con los búferes de datos estructurados y los datos codificados utilizando la notación de objetos JavaScript (JSON del inglés <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation).</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> + <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> + <li>{{jsxref("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Objetos_de_abstracción_de_control">Objetos de abstracción de control</h3> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Generator")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> +</ul> + +<h3 id="Reflexión">Reflexión</h3> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li>{{jsxref("Proxy")}}</li> +</ul> + +<h3 id="Internacionalización">Internacionalización</h3> + +<p>Adiciones al núcleo de ECMAScript para funcionalidades sensibles al lenguaje.</p> + +<ul> + <li>{{jsxref("Intl")}}</li> + <li>{{jsxref("Objetos_globales/Collator", "Intl.Collator")}}</li> + <li>{{jsxref("Objetos_globales/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("Objetos_globales/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{jsxref("WebAssembly")}}</li> + <li>{{jsxref("WebAssembly.Module")}}</li> + <li>{{jsxref("WebAssembly.Instance")}}</li> + <li>{{jsxref("WebAssembly.Memory")}}</li> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li>{{jsxref("WebAssembly.CompileError")}}</li> + <li>{{jsxref("WebAssembly.LinkError")}}</li> + <li>{{jsxref("WebAssembly.RuntimeError")}}</li> +</ul> + +<h3 id="Otro">Otro</h3> + +<ul> + <li> + <article> + <p>{{JSxRef("Functions/arguments", "arguments")}}</p> + </article> + + <article> + <header></header> + </article> + </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/infinity/index.html b/files/es/web/javascript/reference/global_objects/infinity/index.html new file mode 100644 index 0000000000..2a0a716eeb --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/infinity/index.html @@ -0,0 +1,96 @@ +--- +title: Infinity +slug: Web/JavaScript/Referencia/Objetos_globales/Infinity +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Infinity +--- +<div> + {{jsSidebar("Objects")}}</div> +<h2 id="Resumen">Resumen</h2> +<p>La propiedad global <strong><code>Infinity </code></strong>es un valor numérico que representa el infinito.</p> +<p>{{js_property_attributes(0,0,0)}}</p> +<h2 id="Sintaxis">Sintaxis</h2> +<pre class="brush: js">Infinity</pre> +<h2 id="Description" name="Description" style="padding-top: 0px; padding-left: 0px; border: 0px; line-height: 24px;">Description</h2> +<p><code>Infinity </code>es una del objeto global, es decir, esta es una variable de alcance global.</p> +<p>El valor inicial de <code>Infinity</code> es {{jsxref("Number.POSITIVE_INFINITY")}}. El valor de <code>Infinity</code> (infinito positivo) es mayor que cualquier otro numero incluido el mismo. Este valor se comporta matematicamente como el infinito matemático; por ejemplo, cualquier numero multiplicado por <code>Infinity</code> da como resultado <code>Infinity</code>, y cualquier numero divido por <code>Infinity</code> da como resultado cero.</p> +<p>Para la especificación ECMAScript 5, <code>Infinity </code>es de solo lectura (implementado en JavaScript 1.8.5 / Firefox 4).</p> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table" style=""> + <tbody> + <tr> + <th scope="col" style="font-style: inherit;">Especificación</th> + <th scope="col" style="font-style: inherit;">Estado</th> + <th scope="col" style="font-style: inherit;">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1ra edición.</td> + <td>Estándar</td> + <td>Definición inicial. Implementada en JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidad_con_navegadores" style="margin-bottom: 20px; padding-top: 0px; padding-left: 0px; font-size: 28px; border: 0px; line-height: 28px;">Compatibilidad con navegadores</h2> +<p style="padding-top: 0px; padding-left: 0px; border: 0px;">{{ CompatibilityTable() }}</p> +<div id="compat-desktop" style="padding-top: 0px; padding-left: 0px; border: 0px;"> + <table class="compat-table" style=""> + <tbody> + <tr> + <th style="font-style: inherit; line-height: 16px;">Característica</th> + <th style="font-style: inherit; line-height: 16px;">Chrome</th> + <th style="font-style: inherit; line-height: 16px;">Firefox (Gecko)</th> + <th style="font-style: inherit; line-height: 16px;">Internet Explorer</th> + <th style="font-style: inherit; line-height: 16px;">Opera</th> + <th style="font-style: inherit; line-height: 16px;">Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile" style="padding-top: 0px; padding-left: 0px; border: 0px;"> + <table class="compat-table" style=""> + <tbody> + <tr> + <th style="font-style: inherit; line-height: 16px;">Característica</th> + <th style="font-style: inherit; line-height: 16px;">Android</th> + <th style="font-style: inherit; line-height: 16px;">Chrome for Android</th> + <th style="font-style: inherit; line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="font-style: inherit; line-height: 16px;">IE Mobile</th> + <th style="font-style: inherit; line-height: 16px;">Opera Mobile</th> + <th style="font-style: inherit; line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also" style="margin-bottom: 20px; padding-top: 0px; padding-left: 0px; font-size: 28px; border: 0px; line-height: 28px;">Ver también</h2> +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/internalerror/index.html b/files/es/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..e7754d1575 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,98 @@ +--- +title: InternalError +slug: Web/JavaScript/Referencia/Objetos_globales/InternalError +tags: + - Clase + - Class + - InternalError + - JavaScript + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El objeto <strong><code>InternalError</code></strong> indica un error que se produjo internamente en el motor JavaScript.</p> + +<p>Los principalmente casos de ejemplo son cuando algo es demasiado grande, por ejemplo:</p> + +<ul> + <li>"demasiados casos del switch",</li> + <li>"demasiados paréntesis en la expresión regular",</li> + <li>"iniciador de arreglo demasiado grande",</li> + <li>"demasiada recursividad".</li> +</ul> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{JSxRef("Global_Objects/InternalError/InternalError", "InternalError()")}}</dt> + <dd>Crea un nuevo objeto <code>InternalError</code>.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> + <dd>Mensaje de error. Heredado de {{JSxRef("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> + <dd>Nombre del error. Heredado de {{JSxRef("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> + <dd>Ruta al archivo que generó este error. Heredado de {{JSxRef("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> + <dd>Número de línea en el archivo que generó este error. Heredado de {{JSxRef("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> + <dd>Número de columna en la línea que generó este error. Heredado de {{JSxRef("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> + <dd>Seguimiento de la pila. Heredado de {{JSxRef("Error")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Demasiada_recursividad">Demasiada recursividad</h3> + +<p>Esta función recursiva se ejecuta 10 veces, según la condición de salida.</p> + +<pre class="brush: js notranslate">function loop(x) { + if (x >= 10) // "x >= 10" es la condición de salida + return; + // hacer cosas + loop(x + 1); // la llamada recursiva +} +loop(0);</pre> + +<p>Establecer esta condición en un valor extremadamente alto, no funcionará:</p> + +<pre class="brush: js example-bad notranslate">function loop(x) { + if (x >= 1000000000000) + return; + // hacer cosas + loop(x + 1); +} +loop(0); + +// InternalError: demasiada recursividad</pre> + +<p>Para obtener más información, consulta {{JSxRef("Errors/Too_much_recursion", "InternalError: demasiada recursividad.")}}</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><span class="pl-s">No forma parte de ningún estándar.</span></p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<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.builtins.InternalError")}}</p> +</div> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Error")}}</li> + <li> + <p>{{JSxRef("Errors/Too_much_recursion", "demasiada recursividad")}}</p> + </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html b/files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html new file mode 100644 index 0000000000..ba895aaff9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html @@ -0,0 +1,55 @@ +--- +title: Constructor InternalError() +slug: >- + Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError +tags: + - Constructor + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError/InternalError +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El constructor <strong><code>InternalError()</code></strong> crea un error que indica un error que ocurrió internamente en el motor de JavaScript. Por ejemplo: <strong>"InternalError</strong>: demasiada recursividad".</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new InternalError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Opcional. Una descripción del error legible para los humanos.</dd> + <dt><code>fileName</code></dt> + <dd>Opcional. El nombre del archivo que contiene el código que provocó la excepción.</dd> + <dt><code>lineNumber</code></dt> + <dd>Opcional. El número de línea del código que provocó la excepción.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Crear_un_nuevo_InternalError">Crear un nuevo <code>InternalError</code></h3> + +<pre class="brush: js notranslate">new InternalError("Fallo del motor"); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><span class="pl-s">No forma parte de ningún estándar.</span></p> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<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.builtins.InternalError.InternalError")}}</p> +</div> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Error")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/intl/index.html b/files/es/web/javascript/reference/global_objects/intl/index.html new file mode 100644 index 0000000000..c1a2a47243 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/intl/index.html @@ -0,0 +1,126 @@ +--- +title: Intl +slug: Web/JavaScript/Referencia/Objetos_globales/Intl +translation_of: Web/JavaScript/Reference/Global_Objects/Intl +--- +<div>{{JSRef}}</div> + +<p>El objeto de ámbito global <strong><code>Intl</code></strong> es el espacio de nombres para el API de Internacionalización de ECMAScript, éste provee comparación de cadenas y formato de números, fechas y tiempos con sensibilidad al lenguaje. Los constructores para los objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, y {{jsxref("DateTimeFormat")}} son propiedades del objeto <code>Intl</code>. En ésta página se documentan tales propiedades, así como la funcionalidad común a los constructores de internacionalización y otras funciones sensibles al lenguaje.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</dt> + <dd>Constructor para collators, objetos que permiten la comparación de cadenas con sensibilidad al lenguaje.</dd> + <dt>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</dt> + <dd>Constructor para objetos que permiten el formato de fecha y tiempos con sensibilidad al lenguaje.</dd> + <dt>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</dt> + <dd>Constructor para objetos que permiten el formato de números con sensibilidad al lenguaje.</dd> + <dt>{{jsxref("Global_Objects/PluralRules", "Intl.PluralRules")}}</dt> + <dd><em>Por definir</em></dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Intl.getCanonicalLocales()")}}</dt> + <dd>Método que retorna los nombres canónicos de las diferentes variantes de lenguaje.</dd> +</dl> + +<h2 id="Identificación_de_variantes_de_lenguaje_y_negociación">Identificación de variantes de lenguaje y negociación</h2> + +<p>Los constructores de internacionalización, así como otros metodos de constructores sensibles al lenguaje (listados bajo {{anch("See_also", "Ver más")}}) siguen un mismo patrón para identificar variantes de lenguaje y determinar aquella a utilizar: todos aceptan los argumentos <code>locales</code> y <code>options</code>, y negocian las variantes requeridas contra aquellas que soportan utilizando un algoritmo especificado en la propiedad <code>options.localeMatcher</code>.</p> + +<h3 id="locales"><code>locales</code></h3> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">El argumento </span></font>locales</code> debe ser tanto una cadena que contenga una <a href="http://tools.ietf.org/html/rfc5646">Etiqueta de Idioma BCP 47</a>, o una matriz de etiquetas de dicho idioma. Si el argumento <code>locales</code> no es provisto o es indefinido, será usado la localicacion predeterminada.</p> + +<p>Una etiqueta de idioma BCP 47 define un idioma y minimamente contiene un código primario de idioma. En estos la forma mas comun puede contener, : un código de idioma, un código del sistema de escritura, y un código de país o región, todo separado por guiones. Mientras la etiqueta no es case sensitive, es recomendable usar un titulo para el código del sistema de escritura, mayúsculas para el país y región y minúsculas para todo lo demás.</p> + +<p>Ejemplos:</p> + +<ul> + <li><code>"hi"</code>: Hindi (idioma principal).</li> + <li><code>"de-AT"</code>: Alemán usado en Austria (idioma principal con código del país).</li> + <li><code>"zh-Hans-CN"</code>: Escritura China en caracteres simplificados como se usa en China (idioma principal con código de escritura y código del país).</li> +</ul> + +<p>Las subetiquetas que identifican idiomas, scripts, países (regiones), y (raramente utilizadas) variantes en las etiquetas de idiomas BCP 47 pueden ser encontradas en el <a href="http://www.iana.org/assignments/language-subtag-registry">Registro de subetiquetas de idioma de la IANA</a>.</p> + +<p>BCP 47 permite también extensiones. Las funciones de internacionalización de JavaScript utilizan la extensión <code>"u"</code> (Unicode), misma que puede emplearse para requerir personalizacioón de los objetos {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, o {{jsxref("DateTimeFormat")}}. A continuación algunos ejemplos:</p> + +<ul> + <li><code>"de-DE-u-co-phonebk"</code>: Utiliza la variante de guía telefónica del orden de clasificación alemán, que expande las vocales con umlaut a pares de caracteres: ä → ae, ö → oe, ü → ue.</li> + <li><code>"th-TH-u-nu-thai"</code>: Utiliza dígitos tailandeses (๐, ๑, ๒, ๓, ๔, ๕, ๖, ๗, ๘, ๙) para formatear números.</li> + <li><code>"ja-JP-u-ca-japanese"</code>: Use the Japanese calendar in date and time formatting, so that 2013 is expressed as the year 25 of the Heisei period, or 平成25.</li> + <li><code>"en-GB-u-ca-islamic"</code>: use British English with the Islamic (Hijri) calendar, where the Gregorian date 14 October, 2017 is the Hijri date 24 Muharram, 1439.</li> +</ul> + +<h3 id="Locale_negotiation">Locale negotiation</h3> + +<p>The <code>locales</code> argument, after stripping off all Unicode extensions, is interpreted as a prioritized request from the application. The runtime compares it against the locales it has available and picks the best one available. Two matching algorithms exist: the <code>"lookup"</code> matcher follows the Lookup algorithm specified in <a href="http://tools.ietf.org/html/rfc4647#section-3.4">BCP 47</a>; the <code>"best fit"</code> matcher lets the runtime provide a locale that's at least, but possibly more, suited for the request than the result of the Lookup algorithm. If the application doesn't provide a <code>locales</code> argument, or the runtime doesn't have a locale that matches the request, then the runtime's default locale is used. The matcher can be selected using a property of the <code>options</code> argument (see below).</p> + +<p>If the selected language tag had a Unicode extension substring, that extension is now used to customize the constructed object or the behavior of the function. Each constructor or function supports only a subset of the keys defined for the Unicode extension, and the supported values often depend on the language tag. For example, the <code>"co"</code> key (collation) is only supported by {{jsxref("Collator")}}, and its <code>"phonebk"</code> value is only supported for German.</p> + +<h3 id="options_argument"><code>options</code> argument</h3> + +<p>The <code>options</code> argument must be an object with properties that vary between constructors and functions. If the <code>options</code> argument is not provided or is undefined, default values are used for all properties.</p> + +<p>One property is supported by all language sensitive constructors and functions: The <code>localeMatcher</code> property, whose value must be a string <code>"lookup"</code> or <code>"best fit"</code> and which selects one of the locale matching algorithms described above.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-8', 'Intl')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-8', 'Intl')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#intl-object', 'Intl')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>Added Intl.getCanonicalLocales in the 4th edition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Introduction: <a href="http://norbertlindenberg.com/2012/12/ecmascript-internationalization-api/index.html">The ECMAScript Internationalization API</a></li> + <li>Constructors + <ul> + <li>{{jsxref("Collator", "Intl.Collator")}}</li> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> + </ul> + </li> + <li>Methods + <ul> + <li>{{jsxref("String.prototype.localeCompare()")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleDateString()")}}</li> + <li>{{jsxref("Date.prototype.toLocaleTimeString()")}}</li> + </ul> + </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html b/files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html new file mode 100644 index 0000000000..713302ea3c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html @@ -0,0 +1,92 @@ +--- +title: Intl.NumberFormat.prototype.format() +slug: Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Intl.NumberFormat.prototype.format()</code></strong> formatea un número de acuerdo con la configuración regional y las opciones de formato de este objeto {{jsxref("NumberFormat")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-numberformat-prototype-format.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>numberFormat</var>.format(<var>number</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>number</code></dt> + <dd>A {{jsxref("Number")}} or {{jsxref("BigInt")}} to format.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>The <code>format</code> getter function formats a number into a string according to the locale and formatting options of this {{jsxref("NumberFormat")}} object.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_format">Usando <code>format</code></h3> + +<p>Use the <code>format</code> getter function for formatting a single currency value, here for Russia:</p> + +<pre class="brush: js">var options = { style: 'currency', currency: 'RUB' }; +var numberFormat = new Intl.NumberFormat('ru-RU', options); +console.log(numberFormat.format(654321.987)); +// → "654 321,99 руб." +</pre> + +<h3 id="Usando_format_con_map">Usando <code>format</code> con <code>map</code></h3> + +<p>Use the <code>format</code> getter function for formatting all numbers in an array. Note that the function is bound to the {{jsxref("NumberFormat")}} from which it was obtained, so it can be passed directly to {{jsxref("Array.prototype.map")}}.</p> + +<pre class="brush: js">var a = [123456.789, 987654.321, 456789.123]; +var numberFormat = new Intl.NumberFormat('es-ES'); +var formatted = a.map(numberFormat.format); +console.log(formatted.join('; ')); +// → "123.456,789; 987.654,321; 456.789,123" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-intl.numberformat.prototype.format', 'Intl.NumberFormat.prototype.format')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.NumberFormat.format")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{jsxref("Number.prototype.toLocaleString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/es/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..7ee880d0e8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,188 @@ +--- +title: Intl.NumberFormat +slug: Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +--- +<div>{{JSRef("Global_Objects", "NumberFormat", "Intl,Collator,DateTimeFormat")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El objeto <strong><code>Intl.NumberFormat</code></strong> es un constructor para objetos que permiten un formato numérico sensible al idioma.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">new Intl.NumberFormat([locales [, <em>options</em>]]) + +Intl.<code>NumberFormat</code>.call(<em>this</em> [, locales [, <em>options</em>]])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>locales</code></dt> + <dd> + <p>Cadena o arreglo de cadenas identificadoras para el código de idioma, conforme a BCP 47. Para mayor información con respecto a la forma e interpretación del argumento <code>locales</code>, visite el siguiente enlace: <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation" title="/Intl#Functionality_common_to_internationalization_constructors">página de Intl</a>. Se admite la siguiente clave de extension Unicode:</p> + + <dl> + <dt>nu</dt> + <dd>El sistema numérico a ser utilizado. Los siguientes son valores admisibles: "arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".</dd> + </dl> + </dd> + <dt><code>options</code></dt> + <dd> + <p>Objeto con alguna o todas las propiedas listadas a continuación:</p> + + <dl> + <dt><code>localeMatcher</code></dt> + <dd>Algoritmo a emplear para establecer el idioma. Los valores admitidos son "lookup" (coincidencia exacta) y "best fit" (mejor coincidencia); el valor por defecto es "best fit". Para mayor información respecto a esta opción visite el siguiente enlace: <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">página de Intl</a>.</dd> + <dt><code>style</code></dt> + <dd>El estilo de formato a utilizar. Los valores admisibles son "decimal" para un formato numérico simple, "currency" para un formato de divisa, y "percent" para un formato porcentual; el valor por defecto es "decimal".</dd> + <dt><code>currency</code></dt> + <dd>La divisa a utilizar para el formato de divisa. Los valores admisibles son los establecidos en ISO 4217, por ejemplo "USD" para el dólar americano, "EUR" para el euro, o "CNY" para el RMB chino - para mayor información se recomienda visitar el siguiente enlace: l<a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">ista actual de códigos de divisa y fondos</a>. No existe un valor por defecto, por lo que si es valor del parámetro <code>style</code> es "currency", deberá proveerse también un valor para la propiedad <code>currency</code>.</dd> + <dt><code>currencyDisplay</code></dt> + <dd>Descriptor a utilizar para denotar el valor expresado como divisa. Los valores admisibles son "symbol" para utilizar el símbolo local a su contexto, por ejemplo €, "code" para utilizar el código de divisa ISO, "name" para utilizar el nombre local de la divisa, por ejemplo "dollar"; el valor por defecto es "symbol".</dd> + <dt><code>useGrouping</code></dt> + <dd>Si deberán emplearse o no separadores para agrupamiento, como es el caso de los separadores para millares o separadores millares/lakh/crore. Los valores admisibles son <code>true</code> y <code>false</code>; el valor por defecto es <code>true</code>.</dd> + </dl> + + <p>Las propiedades descritas a continuación se dividen en dos grupos: por un lado <code>minimumIntegerDigits</code>, <code>minimumFractionDigits</code> y <code>maximumFractionDigits</code>, por el otro <code>minimumSignificantDigits</code> y <code>maximumSignificantDigits</code>. Si al menos una propiedad del segundo grupo es definida, todas aquellas del primero serán ignoradas.</p> + + <dl> + <dt><code>minimumIntegerDigits</code></dt> + <dd>El número mínimo de digitos enteros a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es 1.</dd> + <dt><code>minimumFractionDigits</code></dt> + <dd>El número mínimo de digitos fraccionarios a utilizar. El rango de valores admisibles va desde 0 hasta 20; el valor por defecto para formato simple y porcentual es 0; el valor por defecto para formato de divisa es el indicado en la <a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">lista de códigos de moneda ISO 4217</a> para subdivisiones de tal divisa (o 2 si la lista no establece un valor).</dd> + <dt><code>maximumFractionDigits</code></dt> + <dd>El número máximo de dígitos de fraccionarios a utilizar. El rango de valores admisibles va desde 0 hasta 20; el valor por defecto para formato simple es el valor más alto admisible en <code>minimumFractionDigits</code> y 3; el valor por defecto para el formato de moneda es el valor más alto admisible en <code>minimumFractionDigits</code> y el indicado en la <a href="http://www.currency-iso.org/en/home/tables/table-a1.html" title="http://www.currency-iso.org/en/home/tables/table-a1.html">lista de cógidos de moneda ISO 4217</a> para subdivisiones de tal divisa (o 2 si la lista no establece un valor); el valor por defecto en el formato porcentual es el valor más alto admisible en <code>minimumFractionDigits</code> y 0.</dd> + <dt><code>minimumSignificantDigits</code></dt> + <dd>El número mínimo de dígitos significativos a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es 1.</dd> + <dt><code>maximumSignificantDigits</code></dt> + <dd>El número máximo de dígitos significativos a utilizar. El rango de valores admisibles va desde 1 hasta 21; el valor por defecto es <code>minimumSignificantDigits</code>.</dd> + </dl> + </dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<h3 id="Properties" name="Properties">Propiedades</h3> + +<dl> + <dt>{{jsxref("NumberFormat.prototype", "Intl.NumberFormat.prototype")}}</dt> + <dd>Permite agregar nuevas propiedades a todos los objetos.</dd> +</dl> + +<h3 id="Métodos">Métodos</h3> + +<dl> + <dt>{{jsxref("NumberFormat.supportedLocalesOf", "Intl.NumberFormat.supportedLocalesOf()")}}</dt> + <dd>Regresa un arreglo con aquellos códigos de idioma proveídos y que son soportados sin necesidad de recurrir a la configuración por defecto en el entorno de ejecucion.</dd> +</dl> + +<h2 id="Instancias_NumberFormat">Instancias <code>NumberFormat</code></h2> + +<h3 id="Propiedades">Propiedades</h3> + +<p>Toda instancia de <code>NumberFormat</code> hereda las siguientes propiedades de su prototipo:</p> + +<div>{{page('en-US/docs/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Properties')}}</div> + +<h3 id="Métodos_2">Métodos</h3> + +<div> +<p>Toda instancia de <code>NumberFormat </code>hereda los siguientes métodos de su prototipo:</p> +{{page('en-US/docs/JavaScript/Reference/Global_Objects/NumberFormat/prototype','Methods')}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Al no especificar un código de idioma, se regresa una cadena con el formato correspondiente al código de idioma y opciones disponibles por defecto en el entorno de ejecución.</p> + +<pre class="brush: js">var number = 3500; + +alert(new Intl.NumberFormat().format(number)); +// → "3,500" si el código de idioma es US English +</pre> + +<h3 id="Example_Using_locales" name="Example:_Using_locales">Ejemplo: Utilizando <code>locales</code></h3> + +<p>Este ejemplo muestra algunas de las variantes en formato numérico con diferentes contextos locales. A fin de emplear el idioma correspondiente a aquél en la interfaz del usuario para su aplicación, asegúrese de especificar dicho idioma ( y de ser posible alternativas) utilizando el argumento <code>locales</code>:</p> + +<pre class="brush: js">var number = 123456.789; + +// En el alemán la coma se utiliza como separador decimal y el punto para los millares +alert(new Intl.NumberFormat("de-DE").format(number)); +// → 123.456,789 + +// En la mayoría de los países de lengua arábiga se utilizan también símbolos arábigos +alert(new Intl.NumberFormat("ar-EG").format(number)); +// → ١٢٣٤٥٦٫٧٨٩ + +// En la India se utilizan separadores millares/lakh/crore +alert(new Intl.NumberFormat("en-IN").format(number)); +// → 1,23,456.789 + +// use de nu para establecer un sistema numérico, el sistema decimal chino por ejemplo +alert(new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec").format(number)); +// → 一二三,四五六.七八九 + +// cuando se requiera un lenguaje que pudiera no ser soportado, como es el caso del Balinés +// se recomienda incluir un lenguaje alternativo, en éste caso Indonesio +alert(new Intl.NumberFormat(["ban", "id"]).format(number)); +// → 123.456,789 +</pre> + +<h3 id="Example_Using_options" name="Example:_Using_options">Ejemplo: Utilizando <code>options</code></h3> + +<p>El valor que regresa la función <code>toLocaleString</code> puede ser modificado utilizando el argumento <code>options</code>:</p> + +<pre class="brush: js">var number = 123456.789; + +// se establece un formato de divisa +alert(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(number)); +// → 123.456,79 € + +// el yen japonés no tiene ninguna subdivisión +alert(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(number)) +// → ¥123,457 + +// limitamos a tres los dígitos significativos +alert(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format(number)); +// → 1,23,000 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado actual</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Intl.NumberFormat")}}</p> +</div> + +<h2 id="Vea_también">Vea también</h2> + +<p>{{page('en-US/docs/JavaScript/Reference/Global_Objects/Intl','See_also')}}</p> diff --git a/files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html b/files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html new file mode 100644 index 0000000000..fc15049fa6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html @@ -0,0 +1,106 @@ +--- +title: Intl.RelativeTimeFormat +slug: Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat +tags: + - RelatimeTimeFormat +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>Intl.RelativeTimeFormat</code></strong> te proporciona una manera de formatear tiempos relativos con traducciones.</p> + +<div>{{EmbedInteractiveExample("pages/js/intl-relativetimeformat.html")}}</div> + +<p class="hidden">El código de este ejemplo interactivo está disponible en un repositorio GitHub. Si quieres contribuir a los ejemplos interactivos del proyecto, por favor, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y manda una Pull Request.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("RelativeTimeFormat.RelativeTimeFormat()", "Intl.RelativeTimeFormat.RelativeTimeFormat()")}}</dt> + <dd>Crea una nueva instancia de <code>Intl.RelativeTimeFormat</code>.</dd> +</dl> + +<h2 id="Métodos_estáticos">Métodos estáticos</h2> + +<dl> + <dt>{{jsxref("RelativeTimeFormat.supportedLocalesOf", "Intl.RelativeTimeFormat.supportedLocalesOf()")}}</dt> + <dd>Devuelve un {{jsxref("Array")}} con todos los idiomas disponibles sin necesidad de usar el que hay por defecto.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}</dt> + <dd>Formatea <code>value</code> y <code>unit</code> conforme al idioma y las opciones de formateo al crear la instancia con <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat"><code>Intl.RelativeTimeFormat</code></a>.</dd> + <dt>{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</dt> + <dd>Devuelve un {{jsxref("Array")}} de objetos representando el tiempo relativo en partes que pueden ser usadas en traducciones.</dd> + <dt>{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>Devuelve un nuevo objeto con las propiedades que reflejan las opciones de localización y formato usadas durante la inicialización del objeto.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<p>El siguiente ejemplo muestra cómo conseguir el tiempo relativo para el mejor idioma según el usuario.</p> + +<pre class="brush: js notranslate">// Crea un formateador de tiempo relativo en tu lenguaje +// con los valores por defectos pasados expresamente. +const rtf = new Intl.RelativeTimeFormat("en", { + localeMatcher: "best fit", // otros valores: "lookup" + numeric: "always", // otros valores: "auto" + style: "long", // otros valores: "short" or "narrow" +}); + +// Formatea el tiempo relativo con valores negativos (-1). +rtf.format(-1, "day"); +// > "Hace 1 día" + +// Formatea el tiempo relativo con valores positivos (1). +rtf.format(1, "day"); +// > "Dentro de 1 día"</pre> + +<h3 id="Usando_formatToParts">Usando <code>formatToParts</code></h3> + +<p>El siguiente ejemplo muestra cómo crear un formateador de tiempo relativo que devuelve las partes separadas:</p> + +<pre class="brush: js notranslate">const rtf = new Intl.RelativeTimeFormat("es", { numeric: "auto" }); + +// Formatea el tiempo relativo usando día como unidad. +rtf.formatToParts(-1, "day"); +// > [{ type: "literal", value: "ayer"}] + +rtf.formatToParts(100, "day"); +// > [{ type: "literal", value: "Dentro de " }, +// > { type: "integer", value: "100", unit: "day" }, +// > { type: "literal", value: " días" }] +</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('ES Int Draft', '#relativetimeformat-objects', 'RelativeTimeFormat')}}</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">La tabla de compatibilidad es generada a partir de datos estructurados. Si quieres contribuir, por favor, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una Pull Request.</div> + +<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developers.google.com/web/updates/2018/10/intl-relativetimeformat">The Intl.RelativeTimeFormat API</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/isfinite/index.html b/files/es/web/javascript/reference/global_objects/isfinite/index.html new file mode 100644 index 0000000000..1227071c44 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/isfinite/index.html @@ -0,0 +1,114 @@ +--- +title: isFinite() +slug: Web/JavaScript/Referencia/Objetos_globales/isFinite +tags: + - Function + - JavaScript + - isFinite() +translation_of: Web/JavaScript/Reference/Global_Objects/isFinite +--- +<div> + {{jsSidebar("Objects")}}</div> +<h2 id="Resumen">Resumen</h2> +<p>La función global <strong><code>isFinite()</code></strong> determina si el valor que se le pasa como argumento es un numero finito. Si es necesario, realiza una conversión a un numero al parametro pasado.</p> +<h2 id="Sintaxis">Sintaxis</h2> +<pre><code>isFinite(testValue)</code></pre> +<h2 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h2> +<dl> + <dt> + <code>testvalue</code></dt> + <dd> + Valor a ser evaluado.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p><code>isFinite</code> es una función de alto nivel y no está asociada a ningún objeto.</p> +<p>Puede usar esta función para determinar si un número es un número finito. La función <code>isFinite</code> examina el número de su argumento. Si el argumento es <code>NaN</code>, infinito positivo o infinito negativo, este método devuelve <code>false</code>, de otro modo devuelve <code>true</code>.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<pre>isFinite(Infinity); // falso +isFinite(NaN); // falso +isFinite(-Inifinity); // falso + +isFinite(0); // verdadero +isFinite(2e64); // verdadero + +isFinite("0"); // verdadero, hubiera sido falso en el caso de usar Number.isFinite("0") que es mas robusta</pre> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>ECMAScript 2nd Edition.</td> + <td>Estándar</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}}</td> + <td>{{Spec2('ES6')}}</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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soprte básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</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>Soporte básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li><code><strong>Number.isFinite()</strong></code></li> + <li><strong><code>Number.NaN()</code></strong></li> + <li><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY"><code><strong>Number.POSITIVE_INFINITY</strong></code></a></li> + <li><a href="/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY"><code><strong>Number.NEGATIVE_INFINITY</strong></code></a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/isnan/index.html b/files/es/web/javascript/reference/global_objects/isnan/index.html new file mode 100644 index 0000000000..d2607d0134 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/isnan/index.html @@ -0,0 +1,88 @@ +--- +title: isNaN +slug: Web/JavaScript/Referencia/Objetos_globales/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/isNaN +--- +<div>{{jsSidebar("Objects")}} +<p>La función <code><strong>isNaN()</strong></code> determina cuando el valor es {{jsxref("NaN")}} o no. Tenga presente que la coerción dentro de la función <code>isNaN</code> tiene reglas <a href="https://wiki.developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN$edit#Description">interesantes</a>; tal vez quieras usar de forma alternativa <strong><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/isNaN">Number.isNaN()</a></code></strong>, como fue definido en ECMAScript 2015.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-isnan.html")}}</div> +</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre><code>isNaN(<em>valor</em>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><strong><code>valor</code></strong></dt> + <dd>El valor a probar o evaluar.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p><strong><code>true</code></strong> si es valor dado es {{jsxref("NaN")}}, de otro modo, <code><strong>false</strong></code>.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>isNaN</code> es una función de alto nivel y no está asociada a ningún objeto.</p> + +<p><code>isNaN</code> intenta convertir el parámetro pasado a un número. Si el parámetro no se puede convertir, devuelve true; en caso contrario, devuelve false.</p> + +<p>Esta función es útil ya que el valor {{jsxref("Objetos_globales/NaN", "NaN")}} no puede se probado correctamente con operadores de igualdad. <code>x == NaN</code> y <code>x === NaN</code> son siempre false, sin importar lo que sea <code>x</code>, incluso si <code>x</code> es <code>NaN</code>. Por ejemplo, tanto <code>1 == NaN</code> como <code>NaN == NaN</code> devuelven <code>false</code>.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<pre class="brush: js">isNaN(NaN) //devuelve true +isNaN("string") //devuelve true +isNaN("12") //devuelve false +isNaN(12) //devuelve false +</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>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("javascript.builtins.isNaN")}}</p> + +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> + +<ul> + <li>{{jsxref("Objetos_globales/NaN", "NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/json/index.html b/files/es/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..2744fb71e5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,231 @@ +--- +title: JSON +slug: Web/JavaScript/Referencia/Objetos_globales/JSON +tags: + - JSON + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +--- +<div>{{JSRef("Objetos_globales", "JSON")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El objeto JSON contiene métodos para analizar <a class="external" href="http://json.org/">JavaScript Object Notation</a> (JSON) y convertir valores a JSON. No puede ser llamado o construído, y aparte de estas dos propiedades, no tiene funcionalidad interesante por sí mismo.</p> + +<h2 id="Descripción">Descripción</h2> + +<h3 id="JavaScript_Object_Notation">JavaScript Object Notation</h3> + +<p>JSON es una sintaxis para serializar objetos, arreglos, números, cadenas, booleanos y nulos. Está basado sobre sintaxis JavaScript pero es diferente a ella: algo JavaScript no es JSON, y algo JSON no es JavaScript. Mira también: <a href="http://timelessrepo.com/json-isnt-a-javascript-subset">JSON: The JavaScript subset that isn't</a>.</p> + +<table> + <caption>Diferencias entre JavaScript y JSON</caption> + <thead> + <tr> + <th scope="col">Tipo JavaScript</th> + <th scope="col">Diferencia JSON</th> + </tr> + </thead> + <tbody> + <tr> + <td>Objetos y arreglos</td> + <td> + <p>Los nombres de las propiedades deben tener doble comilla; las comas finales están prohibidas.</p> + </td> + </tr> + <tr> + <td>Números</td> + <td>Los ceros a la izquierda están prohibidos; <span id="result_box" lang="es"><span class="hps">un punto</span> <span class="hps">decimal</span> <span class="hps">debe ser seguido</span> <span class="hps">al menos por un dígito</span><span>.</span></span></td> + </tr> + <tr> + <td>Cadenas</td> + <td> + <p>Solo un limitado conjunto de caracteres pueden ser de escape; ciertos caracteres de control estan prohibidos; los caracteres de separador de linea Unicode (U+2028) y el separador de parrafo (U+2029) son permitidos; las cadenas deben estar entre comillas dobles. Mira el siguiente ejemplo donde {{jsxref("JSON.parse")}} funciona bien y un{{jsxref("SyntaxError")}} es generado cuando se evalua el codigo como JavaScript:</p> + + <pre class="brush: js notranslate" id="comment_text_1"> +var code = '"\u2028\u2029"'; +JSON.parse(code); // works fine +eval(code); // fails</pre> + </td> + </tr> + </tbody> +</table> + +<p>La sintaxis JSON completa es la siguiente:</p> + +<pre class="eval notranslate"><var>JSON</var> = <strong>null</strong> + <em>or</em> <strong>true</strong> <em>or</em> <strong>false</strong> + <em>or</em> <var>JSONNumber</var> + <em>or</em> <var>JSONString</var> + <em>or</em> <var>JSONObject</var> + <em>or</em> <var>JSONArray</var> + +<var>JSONNumber</var> = <strong>-</strong> <var>PositiveNumber</var> + <em>or</em> <var>PositiveNumber</var> +<var>PositiveNumber</var> = DecimalNumber + or <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> + or <var>DecimalNumber</var> <strong>.</strong> <var>Digits</var> <var>ExponentPart</var> + or <var>DecimalNumber</var> <var>ExponentPart</var> +<var>DecimalNumber</var> = <strong>0</strong> + <em>or</em> <var>OneToNine</var> <var>Digits</var> +<var>ExponentPart</var> = <strong>e</strong> <var>Exponent</var> + <em>or</em> <strong>E</strong> <var>Exponent</var> +<var>Exponent</var> = <var>Digits</var> + <em>or</em> <strong>+</strong> <var>Digits</var> + <em>or</em> <strong>-</strong> <var>Digits</var> +<var>Digits</var> = <var>Digit</var> + <em>or</em> <var>Digits</var> <var>Digit</var> +<var>Digit</var> = <strong>0</strong> through <strong>9</strong> +<var>OneToNine</var> = <strong>1</strong> through <strong>9</strong> + +<var>JSONString</var> = <strong>""</strong> + <em>or</em> <strong>"</strong> <var>StringCharacters</var> <strong>"</strong> +<var>StringCharacters</var> = <var>StringCharacter</var> + <em>or</em> <var>StringCharacters</var> <var>StringCharacter</var> +<var>StringCharacter</var> = any character + <em>except</em> <strong>"</strong> <em>or</em> <strong>\</strong> <em>or</em> U+0000 through U+001F + <em>or</em> <var>EscapeSequence</var> +<var>EscapeSequence</var> = <strong>\" </strong><em>or</em> <strong>\/ </strong><em>or</em> <strong>\\ </strong><em>or</em> <strong>\b </strong><em>or</em> <strong>\f </strong><em>or</em> <strong>\n </strong><em>or</em> <strong>\r </strong><em>or</em> <strong>\t</strong> + <em>or</em> <strong>\u</strong> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> <var>HexDigit</var> +<var>HexDigit</var> = <strong>0</strong> through <strong>9</strong> + <em>or</em> <strong>A</strong> through <strong>F</strong> + <em>or</em> <strong>a</strong> through <strong>f</strong> + +<var>JSONObject</var> = <strong>{</strong> <strong>}</strong> + <em>or</em> <strong>{</strong> <var>Members</var> <strong>}</strong> +<var>Members</var> = <var>JSONString</var> <strong>:</strong> <var>JSON</var> + <em>or</em> <var>Members</var> <strong>,</strong> <var>JSONString</var> <strong>:</strong> <var>JSON</var> + +<var>JSONArray</var> = <strong>[</strong> <strong>]</strong> + <em>or</em> <strong>[</strong> <var>ArrayElements</var> <strong>]</strong> +<var>ArrayElements</var> = <var>JSON</var> + <em>or</em> <var>ArrayElements</var> <strong>,</strong> <var>JSON</var></pre> + +<p>Espacios en blanco insignificantes pueden estar presentes en cualquier lugar excepto en un <var>JSONNumber</var> (los números no deben contener ningún espacio) o en una <var>JSONString</var> (donde es interpretado como el caracter correspondiente en la cadena, o podría causar un error). Los caracteres de Tabulación (U+0009), de retorno de carro (U+000D), de nueva línea (U+000A), y de espacio (U+0020) son los únicos caracteres de espacios en blanco válidos.</p> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<dl> + <dt>{{jsxref("JSON.parse()")}}</dt> + <dd>Analiza una cadena de texto JSON, opcionalmente transformando el valor producido y sus propiedades, retornando el valor.</dd> + <dt>{{jsxref("JSON.stringify()")}}</dt> + <dd>Devuelve un string JSON correspondiente al valor especificado, incluyendo opcionalmente ciertas propiedades o reemplazando valores de propiedades de la manera definida por el usuario.</dd> +</dl> + +<h2 id="Polyfill">Polyfill</h2> + +<p>El objeto JSON no es soportado por navegadores antiguos. Se puede solucionar esto insertando el siguiente código al inicio del script, permitiendo usar el objeto JSON en navegadores que no soportan su implementación de forma nativa (por ejemplo en Internet Explorer 6).</p> + +<p>El siguiente algoritmo es una imitación del objeto JSON nativo:</p> + +<pre class="brush: js notranslate">if (!window.JSON) { + window.JSON = { + parse: function (sJSON) { return eval("(" + sJSON + ")"); }, + stringify: function (vContent) { + if (vContent instanceof Object) { + var sOutput = ""; + if (vContent.constructor === Array) { + for (var nId = 0; nId < vContent.length; sOutput += this.stringify(vContent[nId]) + ",", nId++); + return "[" + sOutput.substr(0, sOutput.length - 1) + "]"; + } + if (vContent.toString !== Object.prototype.toString) { + return "\"" + vContent.toString().replace(/"/g, "\\$&") + "\""; + } + for (var sProp in vContent) { + sOutput += "\"" + sProp.replace(/"/g, "\\$&") + "\":" + this.stringify(vContent[sProp]) + ","; + } + return "{" + sOutput.substr(0, sOutput.length - 1) + "}"; + } + return typeof vContent === "string" ? "\"" + vContent.replace(/"/g, "\\$&") + "\"" : String(vContent); + } + }; +} +</pre> + +<p>Los objectos <a class="link-https" href="https://github.com/douglascrockford/JSON-js" title="https://github.com/douglascrockford/JSON-js">JSON2</a> y <a class="external" href="http://bestiejs.github.com/json3" title="http://bestiejs.github.com/json3">JSON3</a> son mas complejos que el objeto JSON ya que manejan <a class="external" href="http://remysharp.com/2010/10/08/what-is-a-polyfill/" title="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a>.</p> + +<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('ES5.1', '#sec-15.12', 'JSON')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json-object', 'JSON')}}</td> + <td>{{Spec2('ES6')}}</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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>8.0</td> + <td>10.5</td> + <td>4.0</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>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Using native JSON</a></li> + <li>{{jsxref("Date.prototype.toJSON()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/json/parse/index.html b/files/es/web/javascript/reference/global_objects/json/parse/index.html new file mode 100644 index 0000000000..d8816fe8ff --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/json/parse/index.html @@ -0,0 +1,178 @@ +--- +title: JSON.parse() +slug: Web/JavaScript/Referencia/Objetos_globales/JSON/parse +tags: + - ECMAScript5 + - JSON + - JavaScript + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/parse +--- +<div>{{JSRef("Global_Objects", "JSON")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <code><strong>JSON.parse()</strong></code> analiza una cadena de texto como JSON, transformando opcionalmente el valor producido por el análisis.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>JSON.parse(<em>text</em>[, <em>reviver</em>])</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>text</code></dt> + <dd>El texto que se convertirá a JSON. Vea el objeto {{jsxref("JSON")}} para una descripción de la sintaxis JSON.</dd> + <dt><code>reviver</code> {{optional_inline()}}</dt> + <dd>Si una función, <span id="result_box" lang="es"><span class="hps">prescribe</span> <span class="hps">cómo se transforma</span> <span class="hps">el valor producido</span> <span class="hps">originalmente por</span> <span class="hps">el parsing</span></span>, antes de retornar.</dd> +</dl> + +<h3 id="Returns">Returns</h3> + +<p>Retorna el objeto que se corresponde con el texto JSON entregado.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<p>Lanza una excepción {{jsxref("SyntaxError")}} si la cadena a transformar no es un JSON válido.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Usando_JSON.parse()">Ejemplo: Usando <code>JSON.parse()</code></h3> + +<pre class="brush: js">JSON.parse('{}'); // {} +JSON.parse('true'); // true +JSON.parse('"foo"'); // "foo" +JSON.parse('[1, 5, "false"]'); // [1, 5, "false"] +JSON.parse('null'); // null +</pre> + +<h3 id="Ejemplo_Usando_el_parámetro_reviver">Ejemplo: <code>Usando el parámetro reviver</code></h3> + +<p>Si se especifica un reviver, el valor computado por el parsing <em>es transformado </em>antes de retornar. Específicamente, el valor computado, y todas sus propiedades (comenzando con las propiedades más anidadas y siguiendo al propio valor original), son individualmente ejecutados a través del <code>reviver</code>, el cual es llamado con el objeto que contiene la propiedad que está siendo procesada como <code>this</code> y con el nombre de la propiedad como cadena y el valor de la propiedad como argumentos. Si la función <code>reviver</code> retorna <code>undefined</code> (o no retorna algún valor, por ejemplo: si la ejecución cae el final de la función), la propiedad es eliminada del objeto. De otra manera, la propiedad es redefinidad para ser el valor de retorno.</p> + +<p>El <code>reviver</code> es llamada último con la cadena vacía y el valor más alto <span class="short_text" id="result_box" lang="es"><span class="hps">para permitir</span> <span class="hps">la transformación</span> <span class="hps">del valor</span> <span class="hps">más alto</span></span>. <span class="short_text" id="result_box" lang="es"><span class="hps">Asegúrese de</span> <span class="hps">manejar este caso</span> <span class="hps">adecuadamente</span></span>, <span id="result_box" lang="es"><span class="hps">por lo general</span> <span class="hps">mediante la devolución del</span> <span class="hps">valor proporcionado</span></span>, o <code>JSON.parse</code> will retorna <code>undefined</code>.</p> + +<pre class="brush: js">JSON.parse('{"p": 5}', function (k, v) { + if(k === "") return v; // if topmost value, return it, + return v * 2; // else return v * 2. +}); // { p: 10 } + +JSON.parse('{"1": 1, "2": 2,"3": {"4": 4, "5": {"6": 6}}}', function (k, v) { + console.log(k); // log the current property name, the last is "". + return v; // return the unchanged property value. +}); + +// 1 +// 2 +// 4 +// 6 +// 5 +// 3 +// "" +</pre> + +<h3 id="JSON.parse()_no_admite_comas_finales"><code>JSON.parse()</code> no admite comas finales</h3> + +<pre class="example-bad brush: js example-bad line-numbers language-js"><code class="language-js"><span class="comment token">// ambos lanzarán un SyntaxError</span> +JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'[1, 2, 3, 4, ]'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +JSON<span class="punctuation token">.</span><span class="function token">parse</span><span class="punctuation token">(</span><span class="string token">'{"foo" : 1, }'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></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('ES5.1', '#sec-15.12.2', 'JSON.parse')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial.<br> + Implementado en JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.parse', 'JSON.parse')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>8.0</td> + <td>10.5</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h3 id="Especificaciones_Gecko">Especificaciones Gecko</h3> + +<p>Comenzando con Gecko 29 {{geckoRelease("29")}},<span class="short_text" id="result_box" lang="es"><span class="hps"> unas cadenas JSON malformadas</span></span><span class="short_text" lang="es"><span class="hps"> producen</span> </span><span id="result_box" lang="es"><span class="hps">un mensaje</span> <span class="hps">de error más detallado</span> <span class="hps">que contiene el</span> <span class="hps">número de línea y</span> <span class="hps">columna</span> <span class="hps">que provocó el</span> <span class="hps">error de parsing</span></span>. Esto es útil cuando se está haciendo debug de un JSON grande.</p> + +<pre class="brush: js">JSON.parse('[1, 2, 3,]') +// SyntaxError: JSON.parse: unexpected character at +// line 1 column 10 of the JSON data +</pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">Utilizando</a> <a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON">JSON nativo</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/json/stringify/index.html b/files/es/web/javascript/reference/global_objects/json/stringify/index.html new file mode 100644 index 0000000000..13f508d7f7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/json/stringify/index.html @@ -0,0 +1,265 @@ +--- +title: JSON.stringify() +slug: Web/JavaScript/Referencia/Objetos_globales/JSON/stringify +tags: + - JSON + - JavaScript + - Method + - stringify +translation_of: Web/JavaScript/Reference/Global_Objects/JSON/stringify +--- +<p>{{JSRef}}</p> + +<p>El método <code><strong>JSON.stringify()</strong></code> convierte un objeto o valor de JavaScript en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.</p> + +<div>{{EmbedInteractiveExample("pages/js/json-stringify.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>JSON.stringify(<var>value</var>[, <var>replacer</var>[, <var>space</var>]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>value</code></dt> + <dd>El valor que será convertido a una cadena JSON.</dd> + <dt><code>replacer</code>{{Optional_Inline}}</dt> + <dd>Una función que altera el comportamiento del proceso de conversión a cadena de texto, o un array de objetos {{JSxRef("String")}} o {{JSxRef("Number")}} que representan una lista de elementos válidos que se incluyen en la cadena JSON. Si este valor es {{JSxRef("null")}} o no se define, todas las propiedades del objeto son incluidas en la cadena de texto JSON resultante.</dd> + <dt><code>space</code>{{Optional_Inline}}</dt> + <dd>Un objeto de tipo {{JSxRef("String")}} o {{JSxRef("Number")}} que se utiliza para insertar un espacio en blanco dentro de la cadena de salida JSON para mejorar su legibilidad. + <p>Si es de tipo <code>Number</code>, indica el número de espacios a usar como espacios en blanco; este número está limitado se limita a 10 (si es mayor, el valor es sólo <code>10</code>). Los valores inferiores a 1 indican que no se deben utilizar espacios.</p> + + <p>Si es de tipo <code>String</code>, la cadena de texto (o sus 10 primeros caracteres, si es mayor) se utiliza como espacios en blanco. Si este parámetro no se define o es {{JSxRef("null")}}, no se utilizará ningún espacio en blanco.</p> + </dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena de texto JSON que representa el valor dado.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<p>Lanza una excepción {{JSxRef("TypeError")}} ("cyclic object value") cuando encuentra una referencia circular.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>JSON.stringify</code> convierte un valor a notación JSON representándolo:</p> + +<ul> + <li>Si el valor tiene un método <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify$edit#toJSON()_behavior">toJSON()</a>, es responsable de definir qué será serializado.</li> + <li>Los objetos {{JSxRef("Boolean")}}, {{JSxRef("Number")}}, and {{JSxRef("String")}} se convierten a sus valores primitivos, de acuerdo con la conversión semántica tradicional.</li> + <li>Si durante la conversión se encuentra un {{JSxRef("undefined")}}, una {{JSxRef("Function")}}, o un {{JSxRef("Symbol")}} se omite (cuando se encuentra en un objeto) o se censura a {{JSxRef("null")}} (cuando se encuentra en un array). <code>JSON.stringify()</code> puede devolver <code>undefined</code> cuando se pasan valores "puros" como <code>JSON.stringify(function(){}</code>) o <code>JSON.stringify(undefined)</code>.</li> + <li>Todas las propiedades que utilicen {{JSxRef("Symbol")}} en los nombres de la clave se ignoran por completo, incluso si utilizan una función <code>replacer</code>.</li> + <li>Las instancias de {{JSxRef("Date")}} implementan la función <code>toJSON()</code> devolviendo una cadena de texto (igual que <code>date.toISOString()</code>). Por lo que son tratadas como strings.</li> + <li>Los números {{JSxRef("Infinity")}} y {{JSxRef("NaN")}}, así como el valor {{JSxRef("null")}}, se consideran <code>null</code>.</li> + <li>El resto de instancias de {{JSxRef("Object")}} (incluyendo {{JSxRef("Map")}}, {{JSxRef("Set")}}, {{JSxRef("WeakMap")}}, y {{JSxRef("WeakSet")}}) sólo tendrán serializadas sus propiedades enumerables.</li> +</ul> + +<pre class="brush: js">JSON.stringify({}); // '{}' +JSON.stringify(true); // 'true' +JSON.stringify('foo'); // '"foo"' +JSON.stringify([1, 'false', false]); // '[1,"false",false]' +JSON.stringify([NaN, null, Infinity]); // '[null,null,null]' +JSON.stringify({ x: 5 }); // '{"x":5}' + +JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) +// '"2006-01-02T15:04:05.000Z"' + +JSON.stringify({ x: 5, y: 6 }); +// '{"x":5,"y":6}' +JSON.stringify([new Number(3), new String('false'), new Boolean(false)]); +// '[3,"false",false]' + +// Elementos de array identificados por string no son enumerables y no tienen sentido en JSON +let a = ['foo', 'bar']; +a['baz'] = 'quux'; // a: [ 0: 'foo', 1: 'bar', baz: 'quux' ] +JSON.stringify(a); +// '["foo","bar"]' + +JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }); +// '{"x":[10,null,null,null]}' + +// Estructuras de datos standard +JSON.stringify([new Set([1]), new Map([[1, 2]]), new WeakSet([{a: 1}]), new WeakMap([[{a: 1}, 2]])]); +// '[{},{},{},{}]' + +// TypedArray +JSON.stringify([new Int8Array([1]), new Int16Array([1]), new Int32Array([1])]); +// '[{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Uint8Array([1]), new Uint8ClampedArray([1]), new Uint16Array([1]), new Uint32Array([1])]); +// '[{"0":1},{"0":1},{"0":1},{"0":1}]' +JSON.stringify([new Float32Array([1]), new Float64Array([1])]); +// '[{"0":1},{"0":1}]' + +// toJSON() +JSON.stringify({ x: 5, y: 6, toJSON(){ return this.x + this.y; } }); +// '11' + +// Símbolos: +JSON.stringify({ x: undefined, y: Object, z: Symbol('') }); +// '{}' +JSON.stringify({ [Symbol('foo')]: 'foo' }); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]); +// '{}' +JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) { + if (typeof k === 'symbol') { + return 'a symbol'; + } +}); +// undefined + +// Propiedades no enumerables: +JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) ); +// '{"y":"y"}' +</pre> + +<h3 id="El_parámetro_replacer">El parámetro <code>replacer</code></h3> + +<p>El parámetro <code>replacer</code> (de reemplazo) puede ser tanto una función como o un array.</p> + +<p><strong>Como una función</strong> toma dos parámetros: el <em>valor</em> y la <em>clave</em> que van a ser procesados. El objeto al cual pertenece la clave representa el parametro this del reemplazo.</p> + +<p>Inicialmente es llamado con una clave vacía y representa el objeto que se va a procesar, y solo después es llamado por cada propiedad en el objeto o array que se va a procesar.</p> + +<p>Devuelve el valor que se va a agregar a la cadena JSON, de la siguiente manera:</p> + +<ul> + <li>Si se devuelve un número, la cadena correspondiente es usada como el valor de la propiedad cuando se agrega a la cadena JSON.</li> + <li>Si se devuelve una cadena, esta es usuada cono el valor de la propiedad cuando se agrega a la cadena JSON.</li> + <li>Si se devuelve un Boolean, true o false son usados como el valor de la propiedad cuando se agrega a la cadena JSON.</li> + <li>Si se devuelve algún otro objeto, este es recursivamente procesado en una cadena JSON llamando a la función de reemplazo para cada propiedad, amenos que el objeto sea una función, en tal caso nada se agrega a la cadena JSON.</li> + <li>Si se devuelve undefined, la propiedad no se incluye en la salida de la cadena JSON.</li> +</ul> + +<div class="note"><strong>Nota:</strong> No se puede usar la función de reemplazo para borrar los valores de un array. Si se devuelve undefined o una función, entonces se usara null en su lugar.</div> + +<h4 id="Ejemplo_con_una_función">Ejemplo con una función</h4> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">replacer<span class="punctuation token">(</span></span>key<span class="punctuation token">,</span> value<span class="punctuation token">)</span> <span class="punctuation token">{ + // Filtrando propiedades </span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">typeof</span> value <span class="operator token">===</span> <span class="string token">"string"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> undefined<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> value<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> foo <span class="operator token">=</span> <span class="punctuation token">{</span>foundation<span class="punctuation token">:</span> <span class="string token">"Mozilla"</span><span class="punctuation token">,</span> model<span class="punctuation token">:</span> <span class="string token">"box"</span><span class="punctuation token">,</span> week<span class="punctuation token">:</span> <span class="number token">45</span><span class="punctuation token">,</span> transport<span class="punctuation token">:</span> <span class="string token">"car"</span><span class="punctuation token">,</span> month<span class="punctuation token">:</span> <span class="number token">7</span><span class="punctuation token">}</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> jsonString <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>foo<span class="punctuation token">,</span> replacer<span class="punctuation token">)</span><span class="punctuation token">;</span> +// '{"week":45, "month":7}' +</code></pre> + +<p>El resultado en una cadena JSON sería: <code>{"week":45,"month":7}</code>.</p> + +<p>Ejemplo con un array</p> + +<p>Si el reemplazo es un array, los valores indican los nombres de las propiedades del objeto que se va a incluir en la cadena JSON resultado.</p> + +<pre class="brush: js language-js"><code class="language-js">JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>foo<span class="punctuation token">,</span> <span class="punctuation token">[</span><span class="string token">'week'</span><span class="punctuation token">,</span> <span class="string token">'month'</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token"> +// '{"week":45,"month":7}', sólo mantiene las propiedades de "week" y de "month"</span></code> +</pre> + +<h3 id="Argumento_space">Argumento <code>space</code></h3> + +<p>Este argumento puede ser empleado para controlar el espaciado en la cadena final. Si es un número, los niveles sucesivos del proceso serán identados cada uno por tantos espacios como se indique (hasta 10). Si es una cadena, serán identados con dicha cadena (o los primeros diez caracteres de la misma).</p> + +<pre class="brush: js">JSON.stringify({ a: 2 }, null, ' '); +// regresa la cadena de texto: +// '{ +// "a": 2 +// }'</pre> + +<p>Usar el carácter tabulador simula la apariencia de impresión:</p> + +<pre class="brush: js">JSON.stringify({ uno: 1, dos : 2 }, null, '\t') +// devuelve el string: +// '{ \ +// "uno": 1, \ +// "dos": 2 \ +// }' </pre> + +<h3 id="Comportamiento_toJSON()">Comportamiento toJSON()</h3> + +<p>Si un objeto que sera estringificado tiene una propiedad llamada <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> donde su valor es una función, entonces el método <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> modifica el comportamiento de la estringificación JSON: en lugar del objeto que esta siendo serializado, el valor retornado por el método <span style="font-family: consolas,monaco,andale mono,monospace;">toJSON</span> será serializado cuando el mismo sea llamado. Por ejemplo:</p> + +<pre class="brush: js">var obj = { + foo: 'foo', + toJSON: function () { + return 'bar'; + } +}; +var json = JSON.stringify({x: obj}); // <code>'{"x":"bar"}'</code>. +</pre> + +<h3 id="Example_of_using_JSON.stringify_with_localStorage" name="Example_of_using_JSON.stringify_with_localStorage">Ejemplo de como usar <code>JSON.stringify()</code> con <code>localStorage</code></h3> + +<p>En dado caso en el cual se requiera que un objeto creado por el usuario y al cual se le permita ser restaurado incluso cuando el navegador ha sido cerrado, el siguiente ejemplo es un modelo de la aplicabilidad del metodo JSON. stringify().</p> + +<div class="warning"> +<p>Las funciones no son un tipo de dato valido por lo cual estas no funcionaran. Algunos objetos como tipo DATE, se convertiran a cadenas de texto despues de ejecutar JSON.parse().</p> +</div> + +<pre class="brush: js language-js"><code class="language-js"><span class="comment token">// Creando un ejemplo de JSON +</span><span class="keyword token">var</span> session <span class="operator token">=</span> <span class="punctuation token">{</span> + <span class="string token">'screens'</span><span class="punctuation token">:</span> <span class="punctuation token">[</span><span class="punctuation token">]</span><span class="punctuation token">,</span> + <span class="string token">'state'</span><span class="punctuation token">:</span> <span class="keyword token">true</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenA'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">450</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">250</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenB'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">650</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">350</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenC'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">750</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenD'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">250</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">60</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenE'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">390</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">120</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +session<span class="punctuation token">.</span>screens<span class="punctuation token">.</span><span class="function token">push<span class="punctuation token">(</span></span><span class="punctuation token">{</span> <span class="string token">'name'</span><span class="punctuation token">:</span> <span class="string token">'screenF'</span><span class="punctuation token">,</span> <span class="string token">'width'</span><span class="punctuation token">:</span> <span class="number token">1240</span><span class="punctuation token">,</span> <span class="string token">'height'</span><span class="punctuation token">:</span> <span class="number token">650</span> <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token"> +// Convirte el JSON string con JSON.stringify() +</span><span class="comment token">// entonces guarda con localStorage con el nombre de la sesión +</span>localStorage<span class="punctuation token">.</span><span class="function token">setItem<span class="punctuation token">(</span></span><span class="string token">'session'</span><span class="punctuation token">,</span> JSON<span class="punctuation token">.</span><span class="function token">stringify<span class="punctuation token">(</span></span>session<span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token"> +// Ejemplo de como transformar el String generado usando +// JSON.stringify() y guardándolo en localStorage como objeto JSON otra vez +</span><span class="keyword token">var</span> restoredSession <span class="operator token">=</span> JSON<span class="punctuation token">.</span><span class="function token">parse<span class="punctuation token">(</span></span>localStorage<span class="punctuation token">.</span><span class="function token">getItem<span class="punctuation token">(</span></span><span class="string token">'session'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token"> +// Ahora la variable restoredSession contiene el objeto que fue guardado +// en localStorage +</span>console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span>restoredSession<span class="punctuation token">)</span><span class="punctuation token">;</span></code></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('ES5.1', '#sec-15.12.3', 'JSON.stringify')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición incial.<br> + Implementada en JavaScript 1.7.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-json.stringify', 'JSON.stringify')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.JSON.stringify")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{JSxRef("JSON.parse()")}}</li> + <li><a href="https://github.com/douglascrockford/JSON-js/blob/master/cycle.js">cycle.js</a> – Introduces two functions: <code>JSON.decycle</code> and <code>JSON.retrocycle</code>. These allow encoding and decoding of cyclical structures and DAGs into an extended and retrocompatible JSON format.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/clear/index.html b/files/es/web/javascript/reference/global_objects/map/clear/index.html new file mode 100644 index 0000000000..67e8288ad2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/clear/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.clear() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/clear +translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>clear()</strong></code> elimina todos los elementos de un objeto <code>Map.</code></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.clear();</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_clear">Usando el método <code>clear</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "baz"); +myMap.set(1, "foo"); + +myMap.size; // 2 +myMap.has("bar"); // true + +myMap.clear(); + +myMap.size; // 0 +myMap.has("bar") // false +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</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>Feature</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>38</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>Soporte básico.</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/delete/index.html b/files/es/web/javascript/reference/global_objects/map/delete/index.html new file mode 100644 index 0000000000..cbd6e02a50 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/delete/index.html @@ -0,0 +1,114 @@ +--- +title: Map.prototype.delete() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>delete()</strong></code> elimina el elemento especificado de un objeto <code>Map.</code></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">myMap.delete(clave);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>clave</dt> + <dd>Requerido. La clave del elemento a eliminar del objeto <code>Map</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Retorna <code>true</code> si el elemento existe en el objeto <code>Map</code> objecty fue eliminado, o <code>false</code> si el elemento no existe.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3> + +<pre class="brush: js">var myMap = new Map(); +myMap.set("bar", "foo"); + +myMap.delete("bar"); // Retorna true. Eliminado con éxito. +myMap.has("bar"); // Retorna false. El elemento "bar" ya no está presente. +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</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>Prestación</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>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/entries/index.html b/files/es/web/javascript/reference/global_objects/map/entries/index.html new file mode 100644 index 0000000000..76a4ca10b7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/entries/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.entries() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>entries()</strong></code> retorna un nuevo objeto <code><strong>Iterator</strong></code> que contiene los pares <code>[clave, valor]</code> para cada elemento en el objeto <code>Map</code> en orden de inserción.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.entries()</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_entries()">Usando <code>entries()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set("0", "foo"); +myMap.set(1, "bar"); +myMap.set({}, "baz"); + +var mapIter = myMap.entries(); + +console.log(mapIter.next().value); // ["0", "foo"] +console.log(mapIter.next().value); // [1, "bar"] +console.log(mapIter.next().value); // [Object, "baz"] +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</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>Prestación</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>38</td> + <td>{{ CompatGeckoDesktop("20") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("20")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/foreach/index.html b/files/es/web/javascript/reference/global_objects/map/foreach/index.html new file mode 100644 index 0000000000..00d8e85ff8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/foreach/index.html @@ -0,0 +1,94 @@ +--- +title: Map.prototype.forEach() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/forEach +translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>forEach()</strong></code> ejecuta una función por cada par clave / valor en el objeto Map, en orden de inserción.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Función ejecutada en cada elemento.</dd> + <dt><code>thisArg</code></dt> + <dd>Valor a usar por la funcion <code>callback</code>.</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>forEach</code> ejecuta la devolución de llamada (<code>callback</code>) proporcionada una vez para cada clave del mapa que realmente exista. No se invoca para las claves que se han eliminado. Sin embargo, se ejecuta para los valores que están presentes pero tienen el valor indefinido (<code>undefined</code>).</p> + +<p>La función (<code>callback</code>) es invocada con <strong>3 argumentos</strong>:</p> + +<ul> + <li><strong>valor del elemento</strong></li> + <li><strong>clave del elemento</strong></li> + <li><strong>El objeto utilizado</strong></li> +</ul> + +<p>Si se provee un parámetro <code>thisArg</code> al método <code>forEach</code>, pasará al <code>callback</code> cuando sea invocado, para ser utilizado como su valor <code>this</code>. De otra manera, el valor <code>undefined</code> pasará para ser usado como su valor <code>this</code>. El valor <code>this</code> finalmente observable por el <code>callback</code> se determina de acuerdo a <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this">las reglas usuales para determinar la visibilidad de <code>this</code> por una función</a>.</p> + +<p>Cada valor es usado una vez, excepto en este caso cuando es eliminado y agregado de nuevo antes de que el <code>forEach</code> haya terminado. <code>callback</code> no es invocado para valores eliminados antes de que sean usados. </p> + +<p>El método <code>forEach</code> ejecuta la función <code>callback</code> una vez para cada elemento en el objeto <code>Map</code>; No se retornan valores.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Imprimiendo_el_contenido_de_un_objeto_Map">Imprimiendo el contenido de un objeto <code>Map</code></h3> + +<p>El siguiente código imprime una línea por cada elemento en el objeto <code>Map</code>:</p> + +<pre class="brush:js">function logMapElements(value, key, map) { + console.log(`m[${key}] = ${value}`); +} +new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(logMapElements); +// logs: +// "m[foo] = 3" +// "m[bar] = [object Object]" +// "m[baz] = undefined" +</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-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición Inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Map.forEach")}}</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Set.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/get/index.html b/files/es/web/javascript/reference/global_objects/map/get/index.html new file mode 100644 index 0000000000..7f53d850e3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/get/index.html @@ -0,0 +1,77 @@ +--- +title: Map.prototype.get() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/get +tags: + - JavaScript + - Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map/get +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>get()</strong></code> devuelve un elemento específico de un objeto <code>Map</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-get.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo se escuentra en un repositorio de GitHub. Si quieres contribuir al projecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud de pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>miMapa</em>.get(clave);</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>clave</dt> + <dd>Requerido. La clave del elemento del objeto <code>Map</code> que queremos obtener.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Devuelve el elemento asociado a la clave indicada o <code>undefined</code> si la clave no ha sido encontrada en el objeto <code>Map</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_get">Usando el método <code>get</code></h3> + +<pre class="brush: js">var miMapa = new Map(); +miMapa.set('bar', 'foo'); + +miMapa.get('bar'); // Devuelve "foo". +miMapa.get('baz'); // Devuelve undefined. +</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-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> + +<div class="hidden">La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, por favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</div> + +<p>{{Compat("javascript.builtins.Map.get")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/has/index.html b/files/es/web/javascript/reference/global_objects/map/has/index.html new file mode 100644 index 0000000000..c556a00dae --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/has/index.html @@ -0,0 +1,65 @@ +--- +title: Map.prototype.has() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/has +translation_of: Web/JavaScript/Reference/Global_Objects/Map/has +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>has()</strong></code> devuelve un booleano indicando si el elemento con la llave especificada existe o no.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>myMap</var>.has(<var>key</var>)</pre> + +<h3 id="Parameteros">Parameteros</h3> + +<dl> + <dt><code><var>key</var></code></dt> + <dd>La llave del elemento a probar si esta presente en el objeto <code>Map</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><code>true</code> si el elemento con la llave especificada existe en el objeto <code>Map</code>; de lo contrario <code>false</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_has">Usando <code>has()</code></h3> + +<pre class="brush: js notranslate">let myMap = new Map() +myMap.set('bar', "foo") + +myMap.has('bar') // returns true +myMap.has('baz') // returns false +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Map.has")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.set()")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/index.html b/files/es/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..e3ad7812b7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,213 @@ +--- +title: Map +slug: Web/JavaScript/Referencia/Objetos_globales/Map +tags: + - ECMAScript2015 + - JavaScript + - Map +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef("Global_Objects", "Map")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El objeto <strong><code>Map</code></strong> almacena pares clave/valor. Cualquier valor (tanto objetos como {{Glossary("Primitive", "valores primitivos")}}) pueden ser usados como clave o valor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>new Map([iterable]) +</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable es un array o cualquier otro objeto <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> cuyos elementos son pares clave-valor (arrays de 2 elementos). Cada par clave-valor será agregado al nuevo Map.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle <code>for..of</code> devolverá un array de <code>[clave, valor]</code> en cada iteración.</p> + +<p>Cabe destacar que un <strong>Map </strong>el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.</p> + +<h3 id="Igualdad_de_claves">Igualdad de claves</h3> + +<p>La igualdad de claves esta basada en el algoritmo "SameValueZero": <code>NaN</code> es considerado lo mismo que <code>NaN </code>(sin importar que <code>NaN !== NaN</code>) y todos los otros operadores son considerados iguales de acuerdo a la semantica del operador ===. En las primeras versiones de ECMAScript 6 <code>-0</code> y <code>+0</code> eran considarados distintos (even though <code>-0 === +0</code>), esto fue cambiado en posteriores versiones y ha sido implementado en Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) and a <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>.</p> + +<h3 id="Objetos_y_mapas_comparados">Objetos y mapas comparados</h3> + +<p>Los {{jsxref("Object", "Objetos")}} son similares a los <code>Maps</code> en cuanto a que ambos permiten establecer claves a valores, recuperar dichos valores, eliminar claves, y detectar si existe algo almacenado en una clave determinada. Por esto, los <code>Objects</code> han sido usados históricamente como <code>Maps</code>; no obstante, hay diferencias importantes entre <code>Objects</code> y <code>Maps</code> que hacen mejor usar un <code>Map</code> en la mayoría de casos.</p> + +<ul> + <li>Las claves de un <code>Object</code> son {{jsxref("String", "Strings")}} y {{jsxref("Symbol", "Symbols")}}, mientras que para un <code>Map</code> pueden ser de cualquier tipo, incluyendo funciones, objetos y cualquier otro tipo primitivo.</li> + <li>Puedes saber facilmente el tamaño de un <code>Map</code> usando la propiedad <code>size</code>, mientras que le número de propiedades en un <code>Object</code> tiene que ser deternminado manualmente.</li> + <li>Un <code>Map</code> es un <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Iteration_protocols">iterable</a> lo que permite iterar directamente sobre el, mientras que si queremos iterar sobre un <code>Object</code> necesitamos obtener primero las claves de alguna forma para después iterar sobre el.</li> + <li>Un <code>Object</code> tiene prototipo, por lo que hay claves por defecto en tu mapa que pueden colisionar con tus claves si no eres cuidadoso. En el estandard ES5 esto se puede evitar usando <code>mapa = Object.create(null)</code>, pero esto raramente se hace.</li> +</ul> + +<h2 id="Properties" name="Properties">Propiedades</h2> + +<dl> + <dt><code>Map.length</code></dt> + <dd>El valor de la propiedad de longitud es 0</dd> + <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> + <dd>La función constructor que se usa para crear objetos derivados.</dd> + <dt>{{jsxref("Map.prototype")}}</dt> + <dd>Representa el prototipo para el constructor de Map. Permite añadir propiedades a todos los objetos <code>Map</code>.</dd> +</dl> + +<h2 id="Boolean_instances" name="Boolean_instances">Instancias de Map</h2> + +<p>Todas las instancias de Map heredan de {{jsxref("Map.prototype")}}.</p> + +<h3 id="Propiedades">Propiedades</h3> + +<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Propiedades')}}</p> + +<h3 id="Métodos">Métodos</h3> + +<p>{{page('es/docs/Web/JavaScript/Referencia/Objetos_globales/Map/prototype','Métodos')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Usando_el_objeto_Map">Ejemplo: Usando el objeto Map</h3> + +<pre class="brush: js">var miMapa = new Map(); + +var claveObj = {}, + claveFunc = function () {}, + claveCadena = "una cadena"; + +// asignando valores +miMapa.set(claveCadena, "valor asociado con 'una cadena'"); +miMapa.set(claveObj, "valor asociado con claveObj"); +miMapa.set(claveFunc, "valor asociado with claveFunc"); + +miMapa.size; // 3 + +// obteniendo los valores +miMapa.get(claveCadena); // "valor asociado con 'una cadena'" +miMapa.get(claveObj); // "valor asociado con claveObj" +miMapa.get(claveFunc); // "valor asociado con claveFunc" + +miMapa.get("una cadena"); // ""valor asociado con 'una cadena'" + // porque claveCadena === 'una cadena' +miMapa.get({}); // undefined, porque claveObj !== {} +miMapa.get(function() {}) // undefined, porque claveFunc !== function () {} +</pre> + +<h3 id="Ejemplo_Usando_NaN_como_claves_de_Map">Ejemplo: Usando <code>NaN</code> como claves de Map</h3> + +<p><code>NaN</code> también puede ser usado como una clave. Aún cuando cada clave <code>NaN</code> no es igual a sí misma (<code>NaN !== NaN</code> es verdadera), el siguiente ejemplo funciona, porque las claves NaNs <code>NaN</code>s no son distinguibles unas de otras:</p> + +<pre class="brush: js">var miMapa = new Map(); +miMapa.set(NaN, "no es un número"); + +miMapa.get(NaN); // "no es un número" + +var otroNaN = Number("foo"); +miMapa.get(otroNaN); // "no es un número" +</pre> + +<h3 id="Ejemplo_Iterando_Map_con_for..of">Ejemplo: Iterando <code>Map</code> con <code>for..of</code></h3> + +<p>Los Map pueden ser iterados usando un bucle <code>for..of</code>:</p> + +<pre class="brush: js">var miMapa = new Map(); +miMapa.set(0, "cero"); +miMapa.set(1, "uno"); +for (var [clave, valor] of miMapa) { + alert(clave + " = " + valor); +} +// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" + +for (var clave of miMapa.keys()) { + alert(clave); +} +// Mostrará 2 alertas; primero con "0" y segundo con "1" + +for (var valor of miMapa.values()) { + alert(valor); +} +// Mostrará 2 alertas; primero con "cero" y segundo con "uno" + +for (var [clave, valor] of miMapa.entries()) { + alert(clave + " = " + valor); +} +// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" + +miMapa.forEach(function(valor, clave, miMapa) { + alert(clave + " = " + valor); +}) +// Mostrará 2 alertas; primero con "0 = cero" y segundo con "1 = uno" +</pre> + +<h3 id="Iterando_Maps_usando_forEach()">Iterando <code>Maps</code> usando <code>forEach()</code></h3> + +<p>Los Map pueden ser iterados usando el método <code>forEach()</code>:</p> + +<pre><code>miMapa.forEach(function(valor, clave) { + console.log(clave + ' = ' + valor); +}); +// Mostrará 2 logs; el primero con "0 = cero" y el segundo con "1 = uno"</code></pre> + +<h3 id="Ejemplo_Relación_con_los_objetos_Array">Ejemplo: Relación con los objetos <code>Array</code></h3> + +<pre class="brush: js">var kvArray = [["clave1", "valor1"], ["clave2", "valor2"]]; + +// El constructor por defecto de Map para transforar un Array 2D (clave-valor) en un mapa +var miMapa = new Map(kvArray); + +miMapa.get("clave1"); // devuelve "valor1" + +// Usando la función Array.from para transformar el mapa a un Array 2D clave-valor. +console.log(Array.from(miMapa)); // Muestra exactamente el mismo Array que kvArray + +// O usando los iteradores de claves o valores y convirtiendo a array. +console.log(Array.from(miMapa.keys())); // Muestra ["clave1", "clave2"] +</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-map-objects', 'Map')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<p> </p> + +<div class="hidden"> +<p>La tabla de compatiblidad en esta página es generada desde datos estructurados. Si quieres contribuir a los datos, pro favor mira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una solicitud de pull request.</p> +</div> + +<p>{{Compat("javascript.builtins.Map")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/keys/index.html b/files/es/web/javascript/reference/global_objects/map/keys/index.html new file mode 100644 index 0000000000..6f67e49dee --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/keys/index.html @@ -0,0 +1,109 @@ +--- +title: Map.prototype.keys() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys +--- +<div>{{JSRef}}</div> + +<p>El metodo <code><strong>keys()</strong></code> returna un nuevo objeto <code><strong>Iterator</strong></code> que contiene las llaves/keys por cada elemento en el objeto en orden de insercion.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_keys()">Usando <code>keys()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set("0", "foo"); +myMap.set(1, "bar"); +myMap.set({}, "baz"); + +var mapIter = myMap.keys(); + +console.log(mapIter.next().value); // "0" +console.log(mapIter.next().value); // 1 +console.log(mapIter.next().value); // Object +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>38</td> + <td>{{CompatGeckoDesktop("20")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("20") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/set/index.html b/files/es/web/javascript/reference/global_objects/map/set/index.html new file mode 100644 index 0000000000..27faa5a1a6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/set/index.html @@ -0,0 +1,133 @@ +--- +title: Map.prototype.set() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/set +tags: + - ECMAScript6 + - JavaScript + - Mapa + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Map/set +--- +<div>{{JSRef}}</div> + +<p>El método <strong>set()</strong> agrega un nuevo elemento al objeto Map con la llave y el valor especificado.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.set(llave, valor);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>llave</dt> + <dd>Requerido. La llave del elemento a agregar al objeto Map.</dd> + <dt>valor</dt> + <dd>Requerido. El valor del elemento a agregar al objeto Map.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El objeto Map.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_set">Usando el método set</h3> + +<pre class="brush: js">var miMapa = new Map(); + +// Agregar nuevos elementos al mapa +miMapa.set("bar", "foo"); +miMapa.set(1, "foobar"); + +// Actualizar un elemento en el mapa +miMapa.set("bar", "baz"); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</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ítica</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>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracterítica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<ul> + <li>En versiones inferiores a Firefox 33 {{geckoRelease("33")}}, <code>Map.prototype.set</code> retorna <code>undefined</code> y no es encadenable. Esto se ha reparado ({{bug(1031632)}}). Este comportamiento también se encontró en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li> +</ul> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Map.prototype.get()")}}</li> + <li>{{jsxref("Map.prototype.has()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/size/index.html b/files/es/web/javascript/reference/global_objects/map/size/index.html new file mode 100644 index 0000000000..3ca4d446db --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/size/index.html @@ -0,0 +1,110 @@ +--- +title: Map.prototype.size +slug: Web/JavaScript/Referencia/Objetos_globales/Map/size +translation_of: Web/JavaScript/Reference/Global_Objects/Map/size +--- +<div>{{JSRef}}</div> + +<p>La propiedad evaluada <code><strong>size</strong></code> retorna el número de elementos en un objeto {{jsxref("Map")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor de <code>size</code> es un entero representando cuántas entradas tiene el objeto <code>Map</code>. No hay definida una función de evalador set para <code>size</code>; uted no puede cambiar esta propiedad.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_size">Usando <code>size</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set("a", "alpha"); +myMap.set("b", "beta"); +myMap.set("g", "gamma"); + +myMap.size // 3 +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibildad_entre_navegadores">Compatibildad entre 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>Soporte básico</td> + <td>38</td> + <td>{{ CompatGeckoDesktop("19") }}</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</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>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> + +<ul> + <li>Desde Gecko 13 {{geckoRelease("13")}} a Gecko 18 {{geckoRelease("18")}} la propiedad size era implementada como un método <strong><code>Map.prototype.size()</code></strong>, esto ha sido modificado a propiedad en versiones posteriores de acuerdo a la especficiación ECMAScript 6 ({{bug("807001")}}).</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/map/values/index.html b/files/es/web/javascript/reference/global_objects/map/values/index.html new file mode 100644 index 0000000000..c81b54dbe7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/map/values/index.html @@ -0,0 +1,77 @@ +--- +title: Map.prototype.values() +slug: Web/JavaScript/Referencia/Objetos_globales/Map/values +tags: + - ECMAScript 2015 + - Iterador + - JavaScript + - Map + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Map/values +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>values()</strong></code> devuelve un nuevo objeto <strong><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterador</a></strong> que contiene los valores para cada elemento en el objeto <code>Map</code> en el mismo orden de inserción.</p> + +<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>myMap</em>.values()</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un nuevo objeto iterador {{jsxref("Map")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_values()">Utilizando <code>values()</code></h3> + +<pre class="brush:js">var myMap = new Map(); +myMap.set('0', 'foo'); +myMap.set(1, 'bar'); +myMap.set({}, 'baz'); + +var mapIter = myMap.values(); + +console.log(mapIter.next().value); // "foo" +console.log(mapIter.next().value); // "bar" +console.log(mapIter.next().value); // "baz"</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-map.prototype.values', 'Map.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Map.values")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/abs/index.html b/files/es/web/javascript/reference/global_objects/math/abs/index.html new file mode 100644 index 0000000000..eb286dcc59 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/abs/index.html @@ -0,0 +1,149 @@ +--- +title: Math.abs() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/abs +tags: + - JavaScript + - Math + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/abs +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.abs()</code></strong> retorna el valor absoluto de un número, que es </p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.abs</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mrow><mo stretchy="false">|</mo><mi>x</mi><mo stretchy="false">|</mo></mrow><mo>=</mo><mrow><mo>{</mo><mtable columnalign="left left"><mtr><mtd><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr><mtr><mtd><mi>0</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr><mtr><mtd><mo>-</mo><mi>x</mi></mtd><mtd><mtext>if</mtext><mspace width="1em"></mspace><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr></mtable></mrow></mrow><annotation encoding="TeX">{\mathtt{\operatorname{Math.abs}(x)}} = {|x|} = \begin{cases} x & \text{if} \quad x \geq 0 \\ -x & \text{if} \quad x < 0 \end{cases} </annotation></semantics></math></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.abs(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> + <dt> + <h3 dir="ltr" id="Valor_de_retorno">Valor de retorno</h3> + + <p dir="ltr">El valor absoluto del número dado.</p> + + <p dir="ltr"></p> + </dt> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Como <code>abs()</code> es un método estático de <code>Math</code>, deberías siempre usar <code>Math.abs()</code>, en lugar de un método de un objeto <code>Math</code> que crees (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Comportamiento_de_Math.abs">Comportamiento de <code>Math.abs()</code></h3> + +<p>Pasando un string no-numérico o una variable {{jsxref("undefined")}}/empty retorna {{jsxref("NaN")}}. Pasando {{jsxref("null")}} retorna 0.</p> + +<pre class="brush: js">Math.abs('-1'); // 1 +Math.abs(-2); // 2 +Math.abs(null); // 0 +<code>Math.abs(''); // 0 +</code>Math.abs([]); // 0 +<code>Math.abs([2]); // 2 +</code>Math.abs([1,2]); // NaN +<code>Math.abs({}); // NaN</code> +Math.abs('string'); // NaN +Math.abs(); // NaN +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>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>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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/acos/index.html b/files/es/web/javascript/reference/global_objects/math/acos/index.html new file mode 100644 index 0000000000..3280a9b17f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/acos/index.html @@ -0,0 +1,99 @@ +--- +title: Math.acos() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/acos +tags: + - JavaScript + - Math + - Métodos + - Referências +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acos +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.acos()</code></strong> devuelve el arco coseno (en radianes) de un número que es</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.acos(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El arco coseno (en radianes) de un número dado si se encuentra entre <strong>-1</strong> y <strong>1</strong>; de otro modo, {{jsxref("NaN")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Math.acos()</code> devuelve un valor numérico entre 0 y π radianes para <code>x</code> entre -1 y 1. Si el valor de <code>x</code> está fuera de este rango, devuelve {{jsxref("NaN")}}.</p> + +<p>Debido a que <code>acos()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.acos()</code>, en vez de como un método de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.acos()">Usando <code>Math.acos()</code></h3> + +<pre class="brush: js">Math.acos(-2); // NaN +Math.acos(-1); // 3.141592653589793 +Math.acos(0); // 1.5707963267948966 +Math.acos(0.5); // 1.0471975511965979 +Math.acos(1); // 0 +Math.acos(2); // NaN +</pre> + +<p>Para valores menores que -1 o mayores que 1, <code>Math.acos()</code> devuelve {{jsxref("NaN")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.acos")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/acosh/index.html b/files/es/web/javascript/reference/global_objects/math/acosh/index.html new file mode 100644 index 0000000000..8819e3c69a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/acosh/index.html @@ -0,0 +1,94 @@ +--- +title: Math.acosh() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/acosh +tags: + - JavaScript + - Math + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/acosh +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.acosh()</code></strong> retorna el arco coseno hiperbólico de un número que es: </p> + +<p><math display="block"><semantics><annotation encoding="TeX">Para todo x mayor ó igual a 1,se cumple que : la funcion Math.acosh(x) = arcosh(x) = al único y mayor ó igual a 0 ; tal que; cosh(y) = x</annotation></semantics></math></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.acosh(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>El arco coseno hiperbólico del número dado. Si el número es menor que 1, {{jsxref("NaN")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Como <code>acosh()</code> es un método estático de <code>Math</code>, siempre debe ser usado como <code>Math.acosh()</code>, en vez de como un método de un objeto <code>Math</code> creado (<code>Math</code> no es constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.acosh()">Utilizando <code>Math.acosh()</code></h3> + +<pre class="brush: js">Math.acosh(-1); // NaN +Math.acosh(0); // NaN +Math.acosh(0.5); // NaN +Math.acosh(1); // 0 +Math.acosh(2); // 1.3169578969248166 +</pre> + +<p>Para valores menores que 1 <code>Math.acosh()</code> retorna {{jsxref("NaN")}}.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para todo <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>1</mn></mrow><annotation encoding="TeX">x mayor ó igual a 1</annotation></semantics></math>, se tiene que el arcosh(x) <math><semantics><annotation encoding="TeX">= ln(x + la raiz cuadrada de(x cuadrado - 1)) </annotation></semantics></math> y esto puede ser emulado con la siguiente funcion:</p> + +<pre class="brush: js">Math.acosh = Math.acosh || function(x) { + return Math.log(x + Math.sqrt(x * x - 1)); +}; +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{ SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada de datos estructurados. Si desea contribuir a los datos, por favor, revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una solicitud de edición.</p> + +<p>{{Compat("javascript.builtins.Math.acosh")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/asin/index.html b/files/es/web/javascript/reference/global_objects/math/asin/index.html new file mode 100644 index 0000000000..1a6c78d6a5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/asin/index.html @@ -0,0 +1,144 @@ +--- +title: Math.asin() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/asin +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asin +--- +<div>{{JSRef}}</div> + +<p>La Funcion <strong><code>Math.asin()</code></strong> retorna El arco seno (en radianes) de un número, eso es.</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arcsin</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sin</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.asin}(x)} = \arcsin(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \sin(y) = x</annotation></semantics></math></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.asin(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un Numero.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The arcsine (in radians) of the given number if it's between <strong>-1</strong> and <strong>1</strong>; otherwise, {{jsxref("NaN")}}.</p> + +<h2 id="Descripcion">Descripcion</h2> + +<p>The <code>Math.asin()</code> method returns a numeric value between <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> and <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radians for <code>x</code> between -1 and 1. If the value of <code>x</code> is outside this range, it returns {{jsxref("NaN")}}.</p> + +<p>Because <code>asin()</code> is a static method of <code>Math</code>, you always use it as <code>Math.asin()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.asin()">Usando <code>Math.asin()</code></h3> + +<pre class="brush: js">Math.asin(-2); // NaN +Math.asin(-1); // -1.5707963267948966 (-pi/2) +Math.asin(0); // 0 +Math.asin(0.5); // 0.5235987755982989 +Math.asin(1); // 1.5707963267948966 (pi/2) +Math.asin(2); // NaN +</pre> + +<p>For values less than -1 or greater than 1, <code>Math.asin()</code> returns {{jsxref("NaN")}}.</p> + +<h2 id="Espesificaciones">Espesificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Espesificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.asin', 'Math.asin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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> + <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>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_Mas">Ver Mas</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/asinh/index.html b/files/es/web/javascript/reference/global_objects/math/asinh/index.html new file mode 100644 index 0000000000..9a3204a6a8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/asinh/index.html @@ -0,0 +1,90 @@ +--- +title: Math.asinh() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/asinh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/asinh +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.asinh()</code></strong> retorna el arcoseno hyperbólico de un número, es decir</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.asinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">sinh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.asinh}(x)} = \operatorname{arsinh}(x) = \text{ the unique } \; y \; \text{such that} \; \sinh(y) = x</annotation></semantics></math></p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox"><code>Math.asinh(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El arcoseno hyperbólico del número dado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que <code>asinh()</code> es un método estático de <code>Math</code>, siempre hay que usarlo como <code>Math.asinh()</code>, en lugar de como un método del objeto <code>Math</code> que se hayamos creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usos_de_Math.asinh()">Usos de <code>Math.asinh()</code></h3> + +<pre class="brush: js">Math.asinh(1); // 0.881373587019543 +Math.asinh(0); // 0 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>As a quick and dirty hack the expression <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">arsinh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mrow><mi>x</mi><mo>+</mo><msqrt><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mn>1</mn></mrow></msqrt></mrow><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {arsinh} (x) = \ln \left(x + \sqrt{x^{2} + 1} \right)</annotation></semantics></math> may be used directly for a coarse emulation by the following function:</p> + +<pre class="brush: js">Math.asinh = Math.asinh || function(x) { + if (x === -Infinity) { + return x; + } else { + return Math.log(x + Math.sqrt(x * x + 1)); + } +}; +</pre> + +<p>Been formally correct it suffers from a number of issues related to floating point computations. Accurate result requires special handling of positive/negative, small/large arguments as it done e.g. in <a href="https://sourceware.org/git/?p=glibc.git;a=blob;f=sysdeps/ieee754/dbl-64/s_asinh.c">glibc</a> or <a href="http://git.savannah.gnu.org/cgit/gsl.git/tree/sys/invhyp.c">GNU Scientific Library</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidades_de_buscadores">Compatibilidades de buscadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p> + +<p>{{Compat("javascript.builtins.Math.asinh")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/atan/index.html b/files/es/web/javascript/reference/global_objects/math/atan/index.html new file mode 100644 index 0000000000..abb0453e6c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/atan/index.html @@ -0,0 +1,107 @@ +--- +title: Math.atan() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/atan +tags: + - JavaScript + - Matemática + - Math + - Method + - Trigonometría +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.atan()</code></strong> retorna el arcotangente (en radianes) de un number, esto es</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arctan</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> el único </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>∊</mo><mrow><mo>[</mo><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac><mo>;</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><mo>]</mo></mrow><mspace width="thinmathspace"></mspace><mtext> tal que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tan</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.atan}(x)} = \arctan(x) = \text{ the unique } \; y \in \left[-\frac{\pi}{2}; \frac{\pi}{2}\right] \, \text{such that} \; \tan(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-atan.html")}}</div> + +<p class="hidden">La fuente para este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor clona el repositorio que hay en este link: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> ; y envíanos una <em>pull request</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.atan(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El arcotangente (en radianes) de el número dado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Math.atan()</code> retorna un valor numérico entre <math><semantics><mrow><mo>-</mo><mfrac><mi>π</mi><mn>2</mn></mfrac></mrow><annotation encoding="TeX">-\frac{\pi}{2}</annotation></semantics></math> y <math><semantics><mfrac><mi>π</mi><mn>2</mn></mfrac><annotation encoding="TeX">\frac{\pi}{2}</annotation></semantics></math> radianes.</p> + +<p>Dado que <code>atan()</code> es un método estático de <code>Math</code>, siempre debes usarlo como <code>Math.atan()</code>, y no como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.atan()">Usando <code>Math.atan()</code></h3> + +<pre class="brush: js">Math.atan(1); // 0.7853981633974483 +Math.atan(0); // 0 +Math.atan(-0); // -0 + +Math.atan(Infinity); <span class="objectBox objectBox-number"> // 1.5707963267948966 +Math.atan(-Infinity); // -1.5707963267948966 + +</span>// El ángulo que la línea [(0,0);(x,y)] forma con el eje-x en un sistema de coordenadas Cartesianas. +Math.atan(y / x); +</pre> + +<p>Nota que podrías querer evitar usar <strong>±</strong><code>Infinity</code> por razones de estilo. En este caso, {{jsxref("Math.atan2()")}} con <code>0</code> como segundo argumento puede ser una mejor solución.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada apartir de datos estructurados. Si quieres contribuir a los datos, por favor consulte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos una <em>pull request</em>.</p> + +<p>{{Compat("javascript.builtins.Math.atan")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/atan2/index.html b/files/es/web/javascript/reference/global_objects/math/atan2/index.html new file mode 100644 index 0000000000..7b0dc147da --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/atan2/index.html @@ -0,0 +1,141 @@ +--- +title: Math.atan2() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/atan2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atan2 +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La función <strong><code>Math.atan2()</code></strong> retorna la arcotangente del cociente de los argumentos.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.atan2(<var>y</var>, <var>x</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>y</code></dt> + <dd>Primer número.</dd> + <dt><code>x</code></dt> + <dd>Segundo número.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El método <code>Math.atan2()</code> retorna un valor númerico entre -π y π representando el ángulo theta de un punto <code>(x, y)</code>. Este es un ángulo en sentido antihorario, medido en radianes, entre el eje positivo X, y el punto (<code>x, y)</code>. Tenga en cuenta que esta función recibe la coordenada Y como primer argumento y X como segundo.</p> + +<p>A la función<code> Math.atan2()</code> se le pasan los argumentos <code>x</code> y <code>y</code> por separado, y a <code>Math.atan()</code> se le pasa la relación de los dos argumentos.</p> + +<p>Debido a que <code>atan2()</code> es un método estatico de <code>Math</code>, siempre se debe usar <code>Math.atan2()</code>, en vez de usarlo como un método creado por el objeto <code>Math</code> (<code>Math</code> no es un contructor).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.atan2" name="Example:_Using_Math.atan2">Ejemplo: Usando <code>Math.atan2()</code></h3> + +<pre class="brush: js">Math.atan2(90, 15); // 1.4056476493802699 +Math.atan2(15, 90); // 0.16514867741462683 + +Math.atan2(±0, -0); // ±PI. +Math.atan2(±0, +0); // ±0. +Math.atan2(±0, -x); // ±PI for x > 0. +Math.atan2(±0, x); // ±0 for x > 0. +Math.atan2(-y, ±0); // -PI/2 for y > 0. +Math.atan2(y, ±0); // PI/2 for y > 0. +Math.atan2(±y, -Infinity); // ±PI for finite y > 0. +Math.atan2(±y, +Infinity); // ±0 for finite y > 0. +Math.atan2(±Infinity, x); // ±PI/2 for finite x. +Math.atan2(±Infinity, -Infinity); // ±3*PI/4. +Math.atan2(±Infinity, +Infinity); // ±PI/4. +</pre> + +<h2 id="Specifications" name="Specifications">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>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.5', 'Math.atan2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.atan2', 'Math.atan2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>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="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/atanh/index.html b/files/es/web/javascript/reference/global_objects/math/atanh/index.html new file mode 100644 index 0000000000..85022b4138 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/atanh/index.html @@ -0,0 +1,87 @@ +--- +title: Math.atanh() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/atanh +translation_of: Web/JavaScript/Reference/Global_Objects/Math/atanh +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.atanh()</code></strong> nos retorna un arco hiperbólico de un numero, eso es:</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> the unique </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ el unico } \; y \; \text{de tal manera que} \; \tanh(y) = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-atanh.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Math.atanh(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><var>x</var></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Retorna_un_valor">Retorna un valor</h3> + +<p>El arco hiperbolico tangible nos otorga un numero.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Por que <code>atanh()</code> es un metodo estatico de <code>Math</code>, tu siempre puedes usar eso como <code>Math.atanh()</code>, se puede usar como un metod de <code>Math</code> objeto que tu creaste (<code>Math</code> no es un constructor).</p> + +<h2 id="Polimorfismo">Polimorfismo</h2> + +<p>Para <math><semantics><mrow><mrow><mo>|</mo><mi>x</mi><mo>|</mo></mrow><mo><</mo><mn>1</mn></mrow><annotation encoding="TeX">\left|x\right| < 1</annotation></semantics></math>, tenemos <math><semantics><mrow><mo lspace="0em" rspace="thinmathspace">artanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo lspace="0em" rspace="0em">ln</mo><mrow><mo>(</mo><mfrac><mrow><mn>1</mn><mo>+</mo><mi>x</mi></mrow><mrow><mn>1</mn><mo>-</mo><mi>x</mi></mrow></mfrac><mo>)</mo></mrow></mrow><annotation encoding="TeX">\operatorname {artanh} (x) = \frac{1}{2}\ln \left( \frac{1 + x}{1 - x} \right)</annotation></semantics></math> por lo que esto puede estar emulado con la siguiente función:</p> + +<pre class="brush: js notranslate">Math.atanh = Math.atanh || function(x) { + return Math.log((1+x)/(1-x)) / 2; +}; +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Using_Math.atanh">Using <code>Math.atanh()</code></h3> + +<pre class="brush: js notranslate">Math.atanh(-2); // NaN +Math.atanh(-1); // -Infinito +Math.atanh(0); // 0 +Math.atanh(0.5); // 0.5493061443340548 +Math.atanh(1); // Infinito +Math.atanh(2); // NaN +</pre> + +<p>Para valores mayores a 1 o menores a -1, {{jsxref("NaN")}} retorna.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.atanh")}}</p> + +<h2 id="Puedes_leer">Puedes leer</h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> + <li>{{jsxref("Math.tanh()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/cbrt/index.html b/files/es/web/javascript/reference/global_objects/math/cbrt/index.html new file mode 100644 index 0000000000..350bc03054 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/cbrt/index.html @@ -0,0 +1,96 @@ +--- +title: Math.cbrt() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/cbrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cbrt +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.cbrt()</code></strong> nos retorna la raíz del cubo del numero, eso es</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>c</mi><mi>b</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>3</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\mathtt{Math.cbrt(x)} = \sqrt[3]{x} = \text{un unico} \; y \; \text{de tal manera que} \; y^3 = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-cbrt.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"><code>Math.cbrt(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><var>x</var></dt> + <dd>Un numero</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>La raíz cubica del numero proporcionado</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Al <code>cbrt()</code> ser un metodo estatico de <code>Math</code>, tu siempre la puedes usar como <code>Math.cbrt()</code>,un metodo de <code>Math</code> que es un objeto que se crea (<code>Math</code> no es un constructor).</p> + +<h2 id="Poliformismo">Poliformismo</h2> + +<p>Para <math><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn></mrow><annotation encoding="TeX">x \geq 0</annotation></semantics></math>, tenemos <math><semantics><mrow><mroot><mi>x</mi><mn>3</mn></mroot><mo>=</mo><msup><mi>x</mi><mrow><mn>1</mn><mo>/</mo><mn>3</mn></mrow></msup></mrow><annotation encoding="TeX">\sqrt[3]{x} = x^{1/3}</annotation></semantics></math> esto puede ser emulado con la siguiente función:</p> + +<pre class="brush: js notranslate">if (!Math.cbrt) { + Math.cbrt = (function(pow) { + return function cbrt(x){ + // Esto asegura que numeros negativos sigan siendo negativos + return x < 0 ? -pow(-x, 1/3) : pow(x, 1/3); + }; + })(Math.pow); // Localiza Math.pow para una mayor eficiencía +} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.cbrt">Usando Math.cbrt()</h3> + +<pre class="brush: js notranslate">Math.cbrt(NaN); // NaN +Math.cbrt(-1); // -1 +Math.cbrt(-0); // -0 +Math.cbrt(-Infinity); // -Infinito +Math.cbrt(0); // 0 +Math.cbrt(1); // 1 +Math.cbrt(Infinity); // Infinito +Math.cbrt(null); // 0 +Math.cbrt(2); // 1.2599210498948732 +</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-math.cbrt', 'Math.cbrt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a></div> + +<div class="hidden"> + +</div> + +<p><a href="https://github.com/mdn/browser-compat-data">and send us a pull request.</a></p> + +<p><a href="https://github.com/mdn/browser-compat-data">{{Compat("javascript.builtins.Math.cbrt")}}</a></p> + +<h2 id="Puedes_leer">Puedes leer</h2> + +<ul> + <li><a href="https://github.com/mdn/browser-compat-data">{{jsxref("Math.pow()")}}</a></li> + <li><a href="https://github.com/mdn/browser-compat-data">{{jsxref("Math.sqrt()")}}</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/ceil/index.html b/files/es/web/javascript/reference/global_objects/math/ceil/index.html new file mode 100644 index 0000000000..52b43cd3a2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/ceil/index.html @@ -0,0 +1,166 @@ +--- +title: Math.ceil() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/ceil +tags: + - JavaScript + - Math + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/ceil +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.ceil()</code></strong> devuelve el entero mayor o igual más próximo a un número dado.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-ceil.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.ceil(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El número entero mayor o igual más próximo que el número dado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Como <code>ceil()</code> es un método estático de <code>Math</code>, siempre debe usarlo como <code>Math.ceil()</code>, en lugar de como un método de un objeto que ha creado <code>Math</code> (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.ceil()">Utilizando <code>Math.ceil()</code></h3> + +<p>El siguiente ejemplo muestra el uso de <code>Math.ceil()</code>.</p> + +<pre class="brush: js">Math.ceil(.95); // 1 +Math.ceil(4); // 4 +Math.ceil(7.004); // 8 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 +Math.ceil(-7.004); // -7 +</pre> + +<h3 id="Ajuste_decimal">Ajuste decimal</h3> + +<pre class="brush: js">// Closure +(function() { + /** + * Ajuste decimal de un número. + * + * @param {String} type El tipo de ajuste. + * @param {Number} value El número. + * @param {Integer} exp El exponente (El logaritmo de ajuste en base 10). + * @returns {Number} El valor ajustado. + */ + function decimalAdjust(type, value, exp) { + // Si exp es undefined o cero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Si el valor no es un número o exp no es un entero... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Espicificaciones">Espicificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.6', 'Math.ceil')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ceil', 'Math.ceil')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("javascript.builtins.Math.ceil")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/cos/index.html b/files/es/web/javascript/reference/global_objects/math/cos/index.html new file mode 100644 index 0000000000..82a0793769 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/cos/index.html @@ -0,0 +1,74 @@ +--- +title: Math.cos() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/cos +translation_of: Web/JavaScript/Reference/Global_Objects/Math/cos +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">La función estática <strong><code>Math.cos()</code></strong> devuelve el <a href="https://es.wikipedia.org/wiki/Coseno">coseno</a> del ángulo especificado, que debe ser especificado en <a href="https://es.wikipedia.org/wiki/Radi%C3%A1n" title="radians">radianes</a>. Este valor es </span><math style="display: inline;"> <mstyle displaystyle="true"> <mfrac> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>adyacente</mtext> </mrow> </mrow> </msub> <msub> <mrow> <mtext>longitud</mtext> </mrow> <mrow> <mrow> <mtext>hipotenusa</mtext> </mrow> </mrow> </msub> </mfrac> </mstyle> </math>.<span style="display: none;"> </span></p> + +<div>{{EmbedInteractiveExample("pages/js/math-cos.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo interactivo está almacenado en un repositorio de GitHub. Si te gustaría contribuir con el proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Math.cos(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>El ángulo en radianes por el cual devolverá el coseno.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El coseno del número dado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Math.cos()</code> retorna un valor numérico entre -1 y 1, que representa el coseno del ángulo.</p> + +<p>Debido a que <code>cos()</code> es un método estático de <code>Math</code>, siempre debes utilizarlo como <code>Math.cos()</code>, en lugar de como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.cos">Usando <code>Math.cos()</code></h3> + +<pre class="brush: js notranslate">Math.cos(0); // 1 +Math.cos(1); // 0.5403023058681398 + +Math.cos(Math.PI); // -1 +Math.cos(2 * Math.PI); // 1 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si te gustaría contribuir a los datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</p> + +<p>{{Compat("javascript.builtins.Math.cos")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/e/index.html b/files/es/web/javascript/reference/global_objects/math/e/index.html new file mode 100644 index 0000000000..2fdc92d125 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/e/index.html @@ -0,0 +1,83 @@ +--- +title: Math.E +slug: Web/JavaScript/Referencia/Objetos_globales/Math/E +tags: + - JavaScript + - Math + - Property + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/E +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Math.E</strong></code> representa la base de los logaritmos naturales, e, aproximadamente 2.718.</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.E</mi></mstyle><mo>=</mo><mi>e</mi><mo>≈</mo><mn>2.718</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.E}} = e \approx 2.718</annotation></semantics></math></p> + +<p>{{EmbedInteractiveExample("pages/js/math-e.html")}}</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Porque <code>E</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.E</code>, en lugar de como una propiedad de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.E" name="Example:_Using_Math.E">Utilizando <code>Math.E</code></h3> + +<p>La función siguiente devuelve e:</p> + +<pre class="brush:js">function getNapier() { + return Math.E +} + +getNapier(); // 2.718281828459045</pre> + +<p> </p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.e', 'Math.E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.Math.E")}}</p> + +<p> </p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/exp/index.html b/files/es/web/javascript/reference/global_objects/math/exp/index.html new file mode 100644 index 0000000000..ca60758600 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/exp/index.html @@ -0,0 +1,136 @@ +--- +title: Math.exp() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/exp +translation_of: Web/JavaScript/Reference/Global_Objects/Math/exp +--- +<div>{{JSRef}}</div> + +<div>La función <strong>Math.exp()</strong> devuelve <code>e<sup>x</sup></code>, donde <code>x</code> es el argumento, y <code>e</code> es {{jsxref("Math.E", "El número de Euler (también conocido como la constante de Napier)", "", 1)}}, la base de los algoritmos naturales.</div> + +<div> </div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.exp(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un número represetando <code>e<sup>x</sup></code>, donde <code>e</code> es {{jsxref("Math.E", "número de Euler", "", 1)}} y <code>x</code> es el argumento.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Porque <code>exp()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.exp()</code>, en vez de un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.exp()">Usando <code>Math.exp()</code></h3> + +<pre class="brush: js">Math.exp(-1); // 0.36787944117144233 +Math.exp(0); // 1 +Math.exp(1); // 2.718281828459045 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial. Implementado en JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.exp', 'Math.exp')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para 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="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.expm1()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/expm1/index.html b/files/es/web/javascript/reference/global_objects/math/expm1/index.html new file mode 100644 index 0000000000..d8679d9230 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/expm1/index.html @@ -0,0 +1,89 @@ +--- +title: Math.expm1() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/expm1 +tags: + - JavaScript + - Matemáticas + - Math + - Method + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/expm1 +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.expm1()</code></strong> regresa <code>e<sup>x</sup> - 1</code>, donde <code>x</code> es el argumento, y {{jsxref("Math.E", "e", "", 1)}} la base del logaritmo natural.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-expm1.html")}}</div> + +<div class="hidden">El código para este ejemplo interactivo está almacenado en un repositorio de GitHub. Sí te gustaría contribuir al proyecto de ejemplos interactivos If you'd like to contribute, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un pull request.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">Math.expm1(<var>x</var>)</pre> + +<h3 id="Parámetos">Parámetos</h3> + +<dl> + <dt><code><var>x</var></code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un número representando <code>e<sup>x</sup> - 1</code>, donde <code>e</code> es {{jsxref("Math.E", "Número de Euler", "", 1)}} y <code>x</code> es el argumento.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que <code>expm1()</code> es un método estático de <code>Math</code>, uselo siempre como <code>Math.expm1()</code>, en lugar de como un método del objeto <code>Math</code> que creó (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.expm1">Usando Math.expm1()</h3> + +<pre class="brush: js notranslate">Math.expm1(-1); // -0.6321205588285577 +Math.expm1(0); // 0 +Math.expm1(1); // 1.718281828459045 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Esto puede ser emulado con la ayuda de la función {{jsxref("Math.exp()")}}:</p> + +<pre class="brush: js notranslate">Math.expm1 = Math.expm1 || function(x) { + return Math.exp(x) - 1; +}; +</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-math.expm1', 'Math.expm1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada de información estructurada. Sí le gustaría contribuir a la información, por favor consulte <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.builtins.Math.expm1")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Math.E")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/floor/index.html b/files/es/web/javascript/reference/global_objects/math/floor/index.html new file mode 100644 index 0000000000..867f3e8dac --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/floor/index.html @@ -0,0 +1,124 @@ +--- +title: Math.floor() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/floor +tags: + - JavaScript + - Math + - Method +translation_of: Web/JavaScript/Reference/Global_Objects/Math/floor +--- +<div>{{JSRef("Objetos_globales", "Math")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Devuelve el máximo entero menor o igual a un número.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Math.floor(<em>x</em>) </code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Es número.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Como <code>floor</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.floor()</code>, en lugar de usarlo como un método de un objeto <code>Math</code> creado.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Using_Math.floor" name="Example:_Using_Math.floor">Ejemplo: Usando <code>Math.floor</code></h3> + +<p>La siguiente función devuelve el valor entero redondeado más bajo de la variable <code>x</code>:</p> + +<pre class="brush:js notranslate">function getFloor(x) { + return Math.floor(x); +}</pre> + +<p>Si se pasa <code>45.95</code> a <code>getFloor</code>, éste devuelve <code>45</code>; si se le pasa <code>-45.95</code>, devuelve <code>-46</code>.</p> + +<h3 id="Example_Decimal_adjustment" name="Example:_Decimal_adjustment">Ejemplo: Ajuste decimal</h3> + +<pre class="brush:js notranslate">// Cierre +(function(){ + + /** + * Ajuste decimal de un número. + * + * @param {String} type El tipo de ajuste. + * @param {Number} value El número. + * @param {Integer} exp El exponente(el logaritmo en base 10 del ajuste). + * @returns {Number} El valor ajustado. + */ + function decimalAdjust(type, value, exp) { + // Si el exp es indefinido o cero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Si el valor no es un número o el exp no es un entero... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Cambio + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Volver a cambiar + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Redondeo decimal + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Redondeo hacia abajo + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Redondeo hacia arriba + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } + +})(); + +// Redondeo +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +// Piso +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Techo +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="See_also" name="See_also">Ven También</h2> + +<ul> + <li>El {{jsxref("Math")}} objeto.</li> + <li>{{jsxref("Math.abs")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.round()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/fround/index.html b/files/es/web/javascript/reference/global_objects/math/fround/index.html new file mode 100644 index 0000000000..73d773e5b0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/fround/index.html @@ -0,0 +1,199 @@ +--- +title: Math.fround() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/fround +tags: + - JavaScript + - Math + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/fround +--- +<div>{{JSRef}}</div> + +<p class="seoSummary">The <strong><code>Math.fround()</code></strong> function returns the nearest <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">32-bit single precision</a> float representation of a {{jsxref("Number")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-fround.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>singleFloat</em> = Math.fround(<em>doubleFloat</em>);</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>doubleFloat</code></dt> + <dd>A {{jsxref("Number")}}. If the parameter is of a different type, it will get converted to a number or to {{jsxref("NaN")}} if it cannot be converted.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The nearest <a class="external" href="https://en.wikipedia.org/wiki/Single-precision_floating-point_format" title="link to the wikipedia page on single-precision floating-point format">32-bit single precision</a> float representation of the given number.</p> + +<h2 id="Description">Description</h2> + +<p>JavaScript uses 64-bit double floating-point numbers internally, which offer a very high precision. However, sometimes you may be working with 32-bit floating-point numbers, for example if you are reading values from a {{jsxref("Float32Array")}}. This can create confusion: Checking a 64-bit float and a 32-bit float for equality may fail even though the numbers are seemingly identical.</p> + +<p>To solve this, <code>Math.fround()</code> can be used to cast the 64-bit float to a 32-bit float. Internally, JavaScript continues to treat the number as a 64-bit float, it just performs a "round to even" on the 23rd bit of the mantissa, and sets all following mantissa bits to <code>0</code>. If the number is outside the range of a 32-bit float, <code>{{jsxref("Infinity")}}</code> or <code>-Infinity</code> is returned.</p> + +<p>Because <code>fround()</code> is a static method of <code>Math</code>, you always use it as <code>Math.fround()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.fround()">Using <code>Math.fround()</code></h3> + +<p>The number 1.5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit:</p> + +<pre class="brush: js">Math.fround(1.5); // 1.5 +Math.fround(1.5) === 1.5; // true +</pre> + +<p>However, the number 1.337 cannot be precisely represented in the binary numeral system, so it differs in 32-bit and 64-bit:</p> + +<pre class="brush: js">Math.fround(1.337); // 1.3370000123977661 +Math.fround(1.337) === 1.337; // false +</pre> + +<p><math><semantics><msup><mn>2</mn><mn>150</mn></msup><annotation encoding="TeX">2^150</annotation></semantics></math> is too big for a 32-bit float, so <code>Infinity</code> is returned:</p> + +<pre class="brush: js">2 ** 150; // 1.42724769270596e+45 +Math.fround(2 ** 150); // Infinity +</pre> + +<p>If the parameter cannot be converted to a number, or it is <a href="https://en.wikipedia.org/wiki/NaN" title="NaN on Wikipedia">not-a-number</a> (<code>NaN</code>), <code>Math.fround()</code> will return <code>NaN</code>:</p> + +<pre class="brush: js">Math.fround('abc'); // NaN +Math.fround(NaN); // NaN +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This can be emulated with the following function, if {{jsxref("Float32Array")}} are supported:</p> + +<pre class="brush: js">Math.fround = Math.fround || (function (array) { + return function(x) { + return array[0] = x, array[0]; + }; +})(new Float32Array(1)); +</pre> + +<p>Supporting older browsers is slower, but also possible:</p> + +<pre class="brush: js">if (!Math.fround) Math.fround = function(arg) { + arg = Number(arg); + // Return early for ±0 and NaN. + if (!arg) return arg; + var sign = arg < 0 ? -1 : 1; + if (sign < 0) arg = -arg; + // Compute the exponent (8 bits, signed). + var exp = Math.floor(Math.log(arg) / Math.LN2); + var powexp = Math.pow(2, Math.max(-126, Math.min(exp, 127))); + // Handle subnormals: leading digit is zero if exponent bits are all zero. + var leading = exp < -127 ? 0 : 1; + // Compute 23 bits of mantissa, inverted to round toward zero. + var mantissa = Math.round((leading - arg / powexp) * 0x800000); + if (mantissa <= -0x800000) return sign * Infinity; + return sign * powexp * (leading - mantissa / 0x800000); +};</pre> + +<h2 id="Faster_Alternative_Polyfill_(Work_In_Progress)">Faster Alternative Polyfill (Work In Progress)</h2> + +<p>The below polyfill is much faster and uses double-precision rounding errors to emulate the rounding errors caused by floating point narrowing. Although the polyfill higher on the page is good for comprehension, all of the complex Math function that it uses make it terrible slow. Although this polyfill is much faster, it is off by a bit in about 1 out of 2048 of the tests due to the tendency to round upwards like <code>Math.ceil</code> instead of like <code>Math.round</code> in the division of the subnormal-handling section of the code. Because single precision floating points have 23 bits of precision, the mean error deviation from the correct value is roughly <code>2**-28</code> or 0.0000000058%. This deviation from the correct value should be insignifigant in most circumstances, however please edit this polyfill if you have some tweaks to increase correctness without bloating the code size too much. NaN is not optimized for because it is most likely (almost certain) that you will not be calling <code>Math.fround</code> with NaN exclusively in a tight loop. Moreover, an additional check just for NaN instead of letting NaN naturally arise would induce a performance penalty for this function in older browsers when not called with NaN. Thus, the code below handles NaN correctly, but inefficiently for good reason.</p> + +<pre class="brush: js">const Math_round = Math.round; +if (!Math.fround) Math.fround = function(x) { + if (x > 3.402823669209385e+38) return Infinity; // maximum float is 2**128 + if (x < -3.402823669209385e+38) return -Infinity; // minimum is -2**128 + if (-1.1754943508222875e-38 < x && x < 1.1754943508222875e-38) { + if (-1.401298464324817e-45 < x && x < 1.401298464324817e-45) return 0; + // else, it is a subnormal + var mul = Math_round(x/1.4012984643e-45)*1e-323; + return mul * 1.418129833677085e+278; + } + + var hi = x * 9007199254740992; // 9007199254740992 is 2**53 which is the maximum of double precision + var exp = (x + hi) - hi; // adding this number chops off all lower bits, rounding the number. + exp /= 16777216; // 8388608 = 2**23 * 2, so preserve 23 bits in x because there are 23 bits in a float + // The "* 2" compensates for the addition shifting up the bits unwantedly + return Math_round(x / exp) * exp; +} +</pre> + +<p>Below is code used to test for deviations from the correct value. The code below is meant for testing the merit of the function, not for polyfilling older browsers (as evidenced by the fact that the native Math.fround function is used).</p> + +<pre class="brush: js">requestIdleCallback(function(){"use strict"; + const Math_fround = Math.fround; + const Math_round = Math.round; + function my_fround(x) { + if (x > 3.402823669209385e+38) return Infinity; // maximum float is 2**128 + if (x < -3.402823669209385e+38) return -Infinity; // minimum is -2**128 + if (-1.1754943508222875e-38 < x && x < 1.1754943508222875e-38) { + if (-1.401298464324817e-45 < x && x < 1.401298464324817e-45) return 0; + // else, it is a subnormal + var mul = Math_round(x/1.4012984643e-45)*1e-323; + return mul * 1.418129833677085e+278; + } + + var hi = x * 9007199254740992; // 9007199254740992 is 2**53 which is the maximum of double precision + var exp = (x + hi) - hi; // adding this number chops off all lower bits, rounding the number. + exp /= 16777216; // 8388608 = 2**23 * 2, so preserve 23 bits in x because there are 23 bits in a float + // The "* 2" compensates for the addition shifting up the bits unwantedly + return Math_round(x / exp) * exp; + } + + const doublesArray = new Float64Array(8192); + const int32s = new Uint32Array(doublesArray.buffer); + + const crypto = window.crypto; + + var hasWarned = false, warnings=0; + for (var i=0; i<4; i=i+1|0) { + crypto.getRandomValues(int32s); + for (var k=0; k<8192; k=k+1|0) { + const myValue = my_fround(doublesArray[k]); + const froundVal = Math_fround(doublesArray[k]); + // quicker version of Object.is because of no function call overhead: + if (myValue === myValue ? myValue !== froundVal : froundVal === froundVal) { + if (!hasWarned) console.error(doublesArray[k]); // only show the first incorrect number + hasWarned = true; + warnings = warnings + 1|0; + } + } + } + console[warnings > 0 ? "warn" : "log"]( "Total number of mishandled floats: " + warnings ); +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.fround', 'Math.fround')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.fround")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.round()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/hypot/index.html b/files/es/web/javascript/reference/global_objects/math/hypot/index.html new file mode 100644 index 0000000000..21d6850e44 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/hypot/index.html @@ -0,0 +1,124 @@ +--- +title: Math.hypot() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/hypot +tags: + - JavaScript + - Math +translation_of: Web/JavaScript/Reference/Global_Objects/Math/hypot +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.hypot()</code></strong> retorna la raíz cuadrada de la suma de los cuadrados de sus argumentos, es decir:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.hypot</mo><mo stretchy="false">(</mo><msub><mi>v</mi><mn>1</mn></msub><mo>,</mo><msub><mi>v</mi><mn>2</mn></msub><mo>,</mo><mo>…</mo><mo>,</mo><msub><mi>v</mi><mi>n</mi></msub><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><msubsup><mi>v</mi><mi>i</mi><mn>2</mn></msubsup></mrow></msqrt><mo>=</mo><msqrt><mrow><msubsup><mi>v</mi><mn>1</mn><mn>2</mn></msubsup><mo>+</mo><msubsup><mi>v</mi><mn>2</mn><mn>2</mn></msubsup><mo>+</mo><mo>…</mo><mo>+</mo><msubsup><mi>v</mi><mi>n</mi><mn>2</mn></msubsup></mrow></msqrt></mrow><annotation encoding="TeX">\mathtt{\operatorname{Math.hypot}(v_1, v_2, \dots, v_n)} = \sqrt{\sum_{i=1}^n v_i^2} = \sqrt{v_1^2 + v_2^2 + \dots + v_n^2}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-hypot.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.hypot(<var>valor1</var>, <var>valor2</var>, ..., <em>valorN</em>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>Valor1, Valor2, ...</code></dt> + <dd>Números.</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>La raíz cuadrada de la suma de los cuadrados de los argumentos proporcionados. Si tan sólo uno de los argumentos no pudiese ser convertido a un número, se retornaría {{jsxref("NaN")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Para calcular la hipotenusa de un triángulo rectángulo, o la magnitud de un número complejo, se usa el Teorema de Pitágoras, representado en la siguiente fórmula <code>Math.sqrt(v1*v1 + v2*v2)</code> donde <em>v1</em> y <em>v2</em> son, o los catetos del triángulo, o los valores reales y complejos usados para hallar la mencionada magnitud. Para calcular distancias de dos o más dimensiones, simplemente añade más valores al cuadrado (multiplicado por sí mismo) dentro de el método <code>sqrt()</code> del objeto <code>Math</code>, algo como: <code>Math.sqrt(v1*v1 + v2*v2 + v3*v3 + v4*v4)</code>. </p> + +<p>Esta función lo hace un poco más fácil y rápido, sólo coloca: <code>Math.hypot(v1, v2)</code> , o <code>Math.hypot(v1, v2, v3, v4, ...)</code> . </p> + +<p>Esto también evita un problema si la magnitud de tus números es muy elevada. El número más largo que puedes representar en JavaScript es <span style="line-height: 1.5;"><code>Number.MAX_VALUE = 1.797...e+308</code> . Si tus números son mayores que 1e154, tomando el cuadrado de esos valores resultaría en infinito destruyendo así tus resultados. Por ejemplo, <code>Math.sqrt(1e200*1e200 + 1e200*1e200) = Infinito</code>. Si usas <code>hypot()</code> en su lugar, tú obtendrías un buen resultado <code>Math.hypot(1e200, 1e200) = 1.4142...e+200</code> . Eso también es verdad con números demasiados pequeños. <code>Math.sqrt(1e-200*1e-200 + 1e-200*1e-200) = 0</code>, pero si en su lugar, usamos </span><code><span style="line-height: 1.5;">Math.hypot(1e-200, 1e-200) =</span></code><span style="line-height: 1.5;"><code>1.4142...e-200</code>, obtendríamos un buen resultado una vez más.</span></p> + +<p>Debido a que <code>hypot()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.hypot()</code>, en lugar de un método del objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<p>Si ningún argumento es provisto, el resultado es 0.</p> + +<p>Con sólo un argumento, <code>Math.hypot()</code> retornaría lo mismo que <code>Math.abs()</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.hypot()">Usando <code>Math.hypot()</code></h3> + +<pre class="brush: js">Math.hypot(3, 4); // 5 +Math.hypot(3, 4, 5); // 7.0710678118654755 +Math.hypot(); // 0 +Math.hypot(NaN); // NaN +Math.hypot(3, 4, 'foo'); // NaN, +'foo' => NaN +Math.hypot(3, 4, '5'); // 7.0710678118654755, +'5' => 5 +Math.hypot(-3); // 3, lo mismo que Math.abs(-3) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Esto puede ser emulado usando la siguiente función:</p> + +<pre class="brush: js">Math.hypot = Math.hypot || function() { + var y = 0, i = arguments.length; + while (i--) y += arguments[i] * arguments[i]; + return Math.sqrt(y); +}; +</pre> + +<p>Un polyfill que evita subdesbordamientos (underflows) y desbordamientos (overflows):</p> + +<pre class="brush: js">Math.hypot = function (x, y) { + // https://bugzilla.mozilla.org/show_bug.cgi?id=896264#c28 + var max = 0; + var s = 0; + for (var i = 0; i < arguments.length; i += 1) { + var arg = Math.abs(Number(arguments[i])); + if (arg > max) { + s *= (max / arg) * (max / arg); + max = arg; + } + s += arg === 0 && max === 0 ? 0 : (arg / max) * (arg / max); + } + return max === 1 / 0 ? 1 / 0 : max * Math.sqrt(s); +}; +</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-math.hypot', 'Math.hypot')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.hypot")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/index.html b/files/es/web/javascript/reference/global_objects/math/index.html new file mode 100644 index 0000000000..bdf0d21e74 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/index.html @@ -0,0 +1,196 @@ +--- +title: Math +slug: Web/JavaScript/Referencia/Objetos_globales/Math +tags: + - JavaScript + - Math + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math</code></strong> es un objeto incorporado que tiene propiedades y métodos para constantes y funciones matemáticas. No es un objeto de función.</p> + +<p><strong><code>Math</code></strong> funciona con el tipo {{jsxref("Number")}}. No funciona con {{jsxref("BigInt")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>A diferencia de los demás objetos globales, el objeto <code>Math</code><strong> </strong>no se puede editar. Todas las propiedades y métodos de <code>Math</code> son<strong> </strong>estáticos. Usted se puede referir a la constante <em>pi</em> como <code>Math.PI</code><em><strong> </strong> </em>y puede llamar a la función <em>seno </em>como <code>Math.sin(x)</code>,<em><strong> </strong></em>donde<em><strong> </strong></em><code><strong>x</strong></code><em><strong> </strong></em>es el argumento del método. Las constantes se definen con la precisión completa de los números reales en JavaScript.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Math.E")}}</dt> + <dd>Constante de Euler, la base de los logaritmos naturales, aproximadamente 2.718.</dd> + <dt>{{jsxref("Math.LN2")}}</dt> + <dd>Logaritmo natural de 2, aproximadamente 0.693.</dd> + <dt>{{jsxref("Math.LN10")}}</dt> + <dd>Logaritmo natural de 10, aproximadamente 2.303.</dd> + <dt>{{jsxref("Math.LOG2E")}}</dt> + <dd>Logaritmo de E con base 2, aproximadamente 1.443.</dd> + <dt>{{jsxref("Math.LOG10E")}}</dt> + <dd>Logaritmo de E con base 10, aproximadamente 0.434.</dd> + <dt>{{jsxref("Math.PI")}}</dt> + <dd>Ratio de la circunferencia de un circulo respecto a su diámetro, aproximadamente 3.14159.</dd> + <dt>{{jsxref("Math.SQRT1_2")}}</dt> + <dd>Raíz cuadrada de 1/2; Equivalentemente, 1 sobre la raíz cuadrada de 2, aproximadamente 0.707.</dd> + <dt>{{jsxref("Math.SQRT2")}}</dt> + <dd>Raíz cuadrada de 2, aproximadamente 1.414.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<div class="note"> +<p>Tenga en cuenta que las funciones trigonométricas (<code>sin()</code>, <code>cos()</code>, <code>tan()</code>, <code>asin()</code>, <code>acos()</code>, <code>atan()</code>, <code>atan2()</code>) devuelven ángulos en radianes. Para convertir radianes a grados, divida por <code>(Math.PI / 180)</code>, y multiplique por esto para convertir a la inversa.</p> +</div> + +<div class="note"> +<p>Tenga en cuenta que muchas de las funciones matemáticas tienen una precisión que es dependiente de la implementación. Esto significa que los diferentes navegadores pueden dar un resultado diferente, e incluso el mismo motor de JS en un sistema operativo o arquitectura diferente puede dar resultados diferentes.</p> +</div> + +<dl> + <dt>{{jsxref("Global_Objects/Math/abs", "Math.abs(x)")}}</dt> + <dd>Devuelve el valor absoluto de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/acos", "Math.acos(x)")}}</dt> + <dd>Devuelve el arco coseno de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/acosh", "Math.acosh(x)")}}</dt> + <dd>Devuelve el arco coseno hiperbólico de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/asin", "Math.asin(x)")}}</dt> + <dd>Devuelve el arco seno de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/asinh", "Math.asinh(x)")}}</dt> + <dd>Devuelve el arco seno hiperbólico de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/atan", "Math.atan(x)")}}</dt> + <dd>Devuelve el arco tangente de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/atanh", "Math.atanh(x)")}}</dt> + <dd>Devuelve el arco tangente hiperbólico de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/atan2", "Math.atan2(y, x)")}}</dt> + <dd>Devuelve el arco tangente del cuociente de sus argumentos.</dd> + <dt>{{jsxref("Global_Objects/Math/cbrt", "Math.cbrt(x)")}}</dt> + <dd>Devuelve la raíz cúbica de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/ceil", "Math.ceil(x)")}}</dt> + <dd>Devuelve el entero más pequeño mayor o igual que un número.</dd> + <dt>{{jsxref("Global_Objects/Math/clz32", "Math.clz32(x)")}}</dt> + <dd>Devuelve el número de ceros iniciales de un entero de 32 bits.</dd> + <dt>{{jsxref("Global_Objects/Math/cos", "Math.cos(x)")}}</dt> + <dd>Devuelve el coseno de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/cosh", "Math.cosh(x)")}}</dt> + <dd>Devuelve el coseno hiperbólico de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/exp", "Math.exp(x)")}}</dt> + <dd>Devuelve <code>E<sup>x</sup></code>, donde <var>x</var> es el argumento, y <code>E</code> es la constante de Euler (2.718...), la base de los logaritmos naturales.</dd> + <dt>{{jsxref("Global_Objects/Math/expm1", "Math.expm1(x)")}}</dt> + <dd>Devuelve e<sup>x</sup> - 1.</dd> + <dt>{{jsxref("Global_Objects/Math/floor", "Math.floor(x)")}}</dt> + <dd>Devuelve el mayor entero menor que o igual a un número.</dd> + <dt>{{jsxref("Global_Objects/Math/fround", "Math.fround(x)")}}</dt> + <dd>Devuelve la representación flotante de precisión simple más cercana de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/hypot", "Math.hypot([x[, y[, …]]])")}}</dt> + <dd>Devuelve la raíz cuadrada de la suma de los cuadrados de sus argumentos.</dd> + <dt>{{jsxref("Global_Objects/Math/imul", "Math.imul(x, y)")}}</dt> + <dd>Devuelve el resultado de una multiplicación de enteros de 32 bits.</dd> + <dt>{{jsxref("Global_Objects/Math/log", "Math.log(x)")}}</dt> + <dd>Devuelve el logaritmo natural (log, también ln) de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/log1p", "Math.log1p(x)")}}</dt> + <dd>Devuelve el logaritmo natural de x + 1 (loge, también ln) de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/log10", "Math.log10(x)")}}</dt> + <dd>Devuelve el logaritmo en base 10 de x.</dd> + <dt>{{jsxref("Global_Objects/Math/log2", "Math.log2(x)")}}</dt> + <dd>Devuelve el logaritmo en base 2 de x.</dd> + <dt>{{jsxref("Global_Objects/Math/max", "Math.max([x[, y[, …]]])")}}</dt> + <dd>Devuelve el mayor de cero o más números.</dd> + <dt>{{jsxref("Global_Objects/Math/min", "Math.min([x[, y[, …]]])")}}</dt> + <dd>Devuelve el más pequeño de cero o más números.</dd> + <dt>{{jsxref("Global_Objects/Math/pow", "Math.pow(x, y)")}}</dt> + <dd>Las devoluciones de base a la potencia de exponente, que es, baseexponent.</dd> + <dt>{{jsxref("Global_Objects/Math/random", "Math.random()")}}</dt> + <dd>Devuelve un número pseudo-aleatorio entre 0 y 1.</dd> + <dt>{{jsxref("Global_Objects/Math/round", "Math.round(x)")}}</dt> + <dd>Devuelve el valor de un número redondeado al número entero más cercano.</dd> + <dt>{{jsxref("Global_Objects/Math/sign", "Math.sign(x)")}}</dt> + <dd>Devuelve el signo de la x, que indica si x es positivo, negativo o cero.</dd> + <dt>{{jsxref("Global_Objects/Math/sin", "Math.sin(x)")}}</dt> + <dd>Devuelve el seno de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/sinh", "Math.sinh(x)")}}</dt> + <dd>Devuelve el seno hiperbólico de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/sqrt", "Math.sqrt(x)")}}</dt> + <dd>Devuelve la raíz cuadrada positiva de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/tan", "Math.tan(x)")}}</dt> + <dd>Devuelve la tangente de un número.</dd> + <dt>{{jsxref("Global_Objects/Math/tanh", "Math.tanh(x)")}}</dt> + <dd>Devuelve la tangente hiperbólica de un número.</dd> + <dt> + <pre class="notranslate"><code>Math.toSource()</code> {{non-standard_inline}}</pre> + </dt> + <dd>Devuelve la cadena "<code>Math</code>".</dd> + <dt>{{jsxref("Global_Objects/Math/trunc", "Math.trunc(x)")}}</dt> + <dd>Devuelve la parte entera del número x, la eliminación de los dígitos fraccionarios.</dd> +</dl> + +<h2 id="Extendiendo_el_objeto_Math">Extendiendo el objeto <code>Math</code></h2> + +<p>Como muchos de los objetos incluidos en JavaScript, el objeto <code>Math</code> puede ser extendido con propiedades y métodos personalizados. Para extender el objeto <code>Math</code> no se debe usar 'prototype'. Es posible extender directamente <code>Math</code>:</p> + +<pre class="brush: js notranslate">Math.propName = propValue; +Math.methodName = methodRef;</pre> + +<p>Como demostración, el siguiente ejemplo agrega un método al objeto <code>Math</code> para calcular el <em>máximo común divisor</em> de una lista de argumentos.</p> + +<pre class="brush: js notranslate">/* Función variádica -- Retorna el máximo común divisor de una lista de argumentos */ +Math.gcd = function() { + if (arguments.length == 2) { + if (arguments[1] == 0) + return arguments[0]; + else + return Math.gcd(arguments[1], arguments[0] % arguments[1]); + } else if (arguments.length > 2) { + var result = Math.gcd(arguments[0], arguments[1]); + for (var i = 2; i < arguments.length; i++) + result = Math.gcd(result, arguments[i]); + return result; + } +};</pre> + +<p>Pruébalo:</p> + +<pre class="brush: js notranslate">console.log(Math.gcd(20, 30, 15, 70, 40)); // `5`</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición Inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8', 'Math')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Nuevos métodos {{jsxref("Math.log10()", "log10()")}}, {{jsxref("Math.log2()", "log2()")}}, {{jsxref("Math.log1p()", "log1p()")}}, {{jsxref("Math.expm1()", "expm1()")}}, {{jsxref("Math.cosh()", "cosh()")}}, {{jsxref("Math.sinh()", "sinh()")}}, {{jsxref("Math.tanh()", "tanh()")}}, {{jsxref("Math.acosh()", "acosh()")}}, {{jsxref("Math.asinh()", "asinh()")}}, {{jsxref("Math.atanh()", "atanh()")}}, {{jsxref("Math.hypot()", "hypot()")}}, {{jsxref("Math.trunc()", "trunc()")}}, {{jsxref("Math.sign()", "sign()")}}, {{jsxref("Math.imul()", "imul()")}}, {{jsxref("Math.fround()", "fround()")}}, {{jsxref("Math.cbrt()", "cbrt()")}} y {{jsxref("Math.clz32()", "clz32()")}} añadidos.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math-object', 'Math')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Math")}}</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/ln10/index.html b/files/es/web/javascript/reference/global_objects/math/ln10/index.html new file mode 100644 index 0000000000..8b9f40b77b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/ln10/index.html @@ -0,0 +1,84 @@ +--- +title: Math.LN10 +slug: Web/JavaScript/Referencia/Objetos_globales/Math/LN10 +tags: + - JavaScript + - Math + - Property + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN10 +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Math.LN10</strong></code> representa el logaritmo natural de 10, aproximadamente 2.302:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN10</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>10</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>2.302</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN10}} = \ln(10) \approx 2.302</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln10.html")}}</div> + +<div> </div> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Porque <code>LN10</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.LN10</code>, en lugar de como una propiedad de un objeto <code>Math</code> creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.LN10" name="Example:_Using_Math.LN10">Utilizando <code>Math.LN10</code></h3> + +<p>La función siguiente devuelve el logaritmo natural de 10:</p> + +<pre class="brush:js">function getNatLog10() { + return Math.LN10 +} + +getNatLog10(); // 2.302585092994046 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN10")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/ln2/index.html b/files/es/web/javascript/reference/global_objects/math/ln2/index.html new file mode 100644 index 0000000000..4a447f677a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/ln2/index.html @@ -0,0 +1,83 @@ +--- +title: Math.LN2 +slug: Web/JavaScript/Referencia/Objetos_globales/Math/LN2 +tags: + - JavaScript + - Math + - Property + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LN2 +--- +<div>{{JSRef}}</div> + +<p>La propiedad <strong><code>Math.LN2</code></strong> representa el logaritmo natural de 2, aproximadamente 0.693:</p> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LN2</mi></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mn>2</mn><mo stretchy="false">)</mo><mo>≈</mo><mn>0.693</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LN2}} = \ln(2) \approx 0.693</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-ln2.html")}}</div> + +<div> </div> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Como <code>LN2</code> es una propiedad estática de <code>Math</code>, siempre se usa como <code>Math.LN2</code>, en lugar de como una propiedad de un objeto <code>Math</code> que ha creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.LN2" name="Example:_Using_Math.LN2">Utilizando <code>Math.LN2</code></h3> + +<p>La función siguiente devuelve el logaritmo natural de 2:</p> + +<pre class="brush: js">function getNatLog2() { + return Math.LN2; +} + +getNatLog2(); // 0.6931471805599453</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.LN2")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/log/index.html b/files/es/web/javascript/reference/global_objects/math/log/index.html new file mode 100644 index 0000000000..d243cd0501 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/log/index.html @@ -0,0 +1,112 @@ +--- +title: Math.log() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/log +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.log()</code></strong> devuelve la base neutral de un número (base {{jsxref ("Math.E", "e")}})</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">ln</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>e</mi><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log}(x)} = \ln(x) = \text{el unico} \; y \; \text{tal que} \; e^y = x</annotation></semantics></math></p> + +<p> </p> + +<p>La función en JavaScrcrip <strong><code>Math.log()</code></strong> es equivalente a <em>ln(x)</em> en matematicas.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-log.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.log(<var>x</var>)</code></pre> + +<h3 id="Parametetros">Parametetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Es un numero.</dd> +</dl> + +<h3 id="Retorna_el_valor">Retorna el valor</h3> + +<p> </p> + +<p>La base natural (base {{jsxref("Math.E", "e")}}) del número dado. Si el número es negativo, se devuelve {{jsxref("NaN")}} </p> + +<h2 id="Descripcion">Descripcion</h2> + +<p>If the value of <code>x</code> is negative, the return value is always {{jsxref("NaN")}}.</p> + +<p>Because <code>log()</code> is a static method of <code>Math</code>, you always use it as <code>Math.log()</code>, rather than as a method of a <code>Math</code> object you created (<code>Math</code> is not a constructor).</p> + +<p>If you need the natural log of 2 or 10, use the constants {{jsxref("Math.LN2")}} or {{jsxref("Math.LN10")}} . If you need a logarithm to base 2 or 10, use {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}} . If you need a logarithm to other bases, use Math.log(x) / Math.log(otherBase) as in the example below; you might want to precalculate 1 / Math.log(otherBase) .</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Math.log()">Using <code>Math.log()</code></h3> + +<pre class="brush: js">Math.log(-1); // NaN, out of range +Math.log(0); // -Infinity +Math.log(1); // 0 +Math.log(10); // 2.302585092994046 +</pre> + +<h3 id="Using_Math.log()_with_a_different_base">Using <code>Math.log()</code> with a different base</h3> + +<p>The following function returns the logarithm of <code>y</code> with base <code>x</code> (ie. <math><semantics><mrow><msub><mo>log</mo><mi>x</mi></msub><mi>y</mi></mrow><annotation encoding="TeX">\log_x y</annotation></semantics></math>):</p> + +<pre class="brush: js">function getBaseLog(x, y) { + return Math.log(y) / Math.log(x); +} +</pre> + +<p>If you run <code>getBaseLog(10, 1000)</code> it returns <code>2.9999999999999996</code> due to floating-point rounding, which is very close to the actual answer of 3.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.10', 'Math.log')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log', 'Math.log')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/log10/index.html b/files/es/web/javascript/reference/global_objects/math/log10/index.html new file mode 100644 index 0000000000..dc97208b63 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/log10/index.html @@ -0,0 +1,137 @@ +--- +title: Math.log10() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/log10 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log10 +--- +<div>{{JSRef}}</div> + +<p><strong><code>Math.log10()</code></strong> funcion que retorna el logaritmo de base 10 de un numero, esto es</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>la unica</mtext><mspace width="thickmathspace"></mspace><mi>y tal que</mi><mspace width="thickmathspace"></mspace><mtext></mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Math.log10(<var>x</var>)</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un Numero</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>El logaritmo de base 10 del numero dado. SI el numero es negativo, {{jsxref("NaN")}} es devuelto.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si el valor de x es menor que cero, el valor de retorno siempre es {{jsxref("NaN")}}.</p> + +<p>Porque <code>log10()</code> <code>es un metodo estatico de Math</code>, debe usarse siempre <code>Math.log10()</code>, en vez de usarse como un metodo del objeto math que se ha creado (<code>Math</code> no es un constructor).</p> + +<p>Esta función es equivalente de Math.log(x) / Math.log(10). Para log10(e) use la constante {{jsxref("Math.LOG10E")}} que es 1 / {{jsxref("Math.LN10")}}. </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="usando_Math.log10()">usando <code>Math.log10()</code></h3> + +<pre class="brush: js">Math.log10(2); // 0.3010299956639812 +Math.log10(1); // 0 +Math.log10(0); // -Infinito +Math.log10(-2); // NaN +Math.log10(100000); // 5 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Puede ser emulada con la siguiente función</p> + +<pre class="brush: js">Math.log10 = Math.log10 || function(x) { + return Math.log(x) * Math.LOG10E; +}; +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log10', 'Math.log10')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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("38")}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_Tambien">Vea Tambien</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.log2()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/log10e/index.html b/files/es/web/javascript/reference/global_objects/math/log10e/index.html new file mode 100644 index 0000000000..755b6ceb1a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/log10e/index.html @@ -0,0 +1,130 @@ +--- +title: Math.LOG10E +slug: Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E +tags: + - JavaScript + - Math + - Propiedad + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG10E +--- +<div>{{JSRef}}</div> + +<div> </div> + +<div>La propiedad <strong><code>Math.LOG10E</code></strong> representa el logaritmo base 10 de e, el cual es aproximadamente 0.434:</div> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.LOG10E</mi></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>e</mi><mo stretchy="false">)</mo><mo>≈</mo><mn>0.434</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.LOG10E}} = \log_10(e) \approx 0.434</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que LOG10E es una propiedad estatica del módulo Math, se debe de invocar siempre como Math.LOG10E, en lugar de invocarla como una propiedad de algun objeto Math que hayas creado ( Math no es un constructor ).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.LOG10E">Utilizando <code>Math.LOG10E</code></h3> + +<p>La siguiente funcion regresa el logaritmo base 10 de e:</p> + +<pre class="brush:js">function getLog10e() { + return Math.LOG10E; +} + +getLog10e(); // 0.4342944819032518 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial. Implementado en JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>Caracteristica</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="Ver_tambien">Ver tambien</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/log2/index.html b/files/es/web/javascript/reference/global_objects/math/log2/index.html new file mode 100644 index 0000000000..b394270684 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/log2/index.html @@ -0,0 +1,96 @@ +--- +title: Math.log2() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/log2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/log2 +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.log2()</code></strong> retorna el logaritmo base 2 de un número, esto es</p> + +<p><math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log2</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>2</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mn>2</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log2}(x)} = \log_2(x) = \text{the unique} \; y \; \text{such that} \; 2^y = x</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-log2.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Math.log2(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El logaritmo base 2 del número usado como parámetro. Si el número es negativo, {{jsxref("NaN")}} será retornado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si el valor de <code>x</code> es mejor a 0, el valor de retorno es siempre {{jsxref("NaN")}}.</p> + +<p>Debido a que <code>log2()</code> es una función estática de <code>Math</code>, siempre debe ser usado como <code>Math.log2()</code>, en lugar de ser usado como un método del objeto <code>Math</code> (<code>Math</code> no es un constructor).</p> + +<p>Esta función es equivalente a Math.log(x) / Math.log(2). Para log2(e) use la constante {{jsxref("Math.LOG2E")}} que es 1 / {{jsxref("Math.LN2")}}. </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.log2()">Usando <code>Math.log2()</code></h3> + +<pre class="brush: js">Math.log2(3); // 1.584962500721156 +Math.log2(2); // 1 +Math.log2(1); // 0 +Math.log2(0); // -Infinity +Math.log2(-2); // NaN +Math.log2(1024); // 10 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This Polyfill emulates the <code>Math.log2</code> function. Note that it returns imprecise values on some inputs (like 1 << 29), wrap into {{jsxref("Math.round()")}} if working with bit masks.</p> + +<pre class="brush: js">Math.log2 = Math.log2 || function(x) { + return Math.log(x) * Math.LOG2E; +}; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.log2', 'Math.log2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Math.log2")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.log10()")}}</li> + <li>{{jsxref("Math.log1p()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/log2e/index.html b/files/es/web/javascript/reference/global_objects/math/log2e/index.html new file mode 100644 index 0000000000..f9593b4bc6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/log2e/index.html @@ -0,0 +1,27 @@ +--- +title: Math.LOG2E +slug: Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E +tags: + - JavaScript + - Math + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Math/LOG2E +--- +<div> + {{JSRef("Objetos_globales", "Math")}}</div> +<h2 id="Summary" name="Summary">Resumen</h2> +<p>El base 2 del logaritmo natural de E (aproximadamente 1.442).</p> +<div> + {{js_property_attributes(0,0,0)}}</div> +<h2 id="Description" name="Description">Descripción</h2> +<p>Porque <code>LOG2E</code> es una propiedad estática de <code>Math</code>, siempre usted lo usa como <code>Math.LOG2E</code>, en lugar de una propedad de un objecto de <code>Math</code> usted creó.</p> +<h2 id="Examples" name="Examples">Ejemplos</h2> +<h3 id="Example:_Using_Math.LOG2E" name="Example:_Using_Math.LOG2E">Ejemplo: Usar <code>Math.LOG2E</code></h3> +<p>La función siguiente devuelve el base 2 del logaritmo natural del <code>E</code>:</p> +<pre class="brush:js">function getLog2e() { + return Math.LOG2E +}</pre> +<h2 id="Ven_También">Ven También</h2> +<ul> + <li>El {{jsxref("Math")}} objeto.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/max/index.html b/files/es/web/javascript/reference/global_objects/math/max/index.html new file mode 100644 index 0000000000..0e0f82881c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/max/index.html @@ -0,0 +1,145 @@ +--- +title: Math.max() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/max +tags: + - JavaScript + - Math + - Método(2) + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/max +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La función <strong><code>Math.max()</code></strong> devuelve el mayor de cero o más números.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.max([<var>valor1</var>[, <var>valor2</var>[, ...]]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>valor1, valor2, ...</code></dt> + <dd>Números.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Ya que <code>max()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.max()</code>, en lugar de un método de un objeto <code>Math</code> instanciado (<code>Math</code> no es un constructor).</p> + +<p>Si no se proporcionan argumentos, el resultado es -{{jsxref("Global_Objects/Infinity", "Infinity")}}.</p> + +<p>Si al menos uno de los argumentos no puede ser convertido a número, el resultado es {{jsxref("Global_Objects/NaN", "NaN")}}.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.max" name="Example:_Using_Math.max">Ejemplo: Usando <code>Math.max()</code></h3> + +<pre class="brush: js">Math.max(10, 20); // 20 +Math.max(-10, -20); // -10 +Math.max(-10, 20); // 20 +</pre> + +<p>La siguiente función usa {{jsxref("Function.prototype.apply()")}} para encontrar el elemento mayor en un array numérico. <code>getMaxOfArray([1, 2, 3])</code> es equivalente a <code>Math.max(1, 2, 3)</code>, pero se puede usar <code>getMaxOfArray()</code> sobre arreglos construidos programáticamente de cualquier tamaño.</p> + +<pre class="brush: js">function getMaxOfArray(numArray) { + return Math.max.apply(null, numArray); +} +</pre> + +<p>O con el nuevo {{jsxref("Operadores/Spread_operator", "spread operator")}}, obtener el máximo de un arreglo se vuelve mucho más fácil.</p> + +<pre class="brush: js">var arr = [1, 2, 3]; +var max = Math.max(...arr);</pre> + +<h2 id="Specifications" name="Specifications">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 1ra Edición.</td> + <td>Estandar</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.max', 'Math.max')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> + +<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 para Android</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</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="See_also" name="See_also">Ver además</h2> + +<ul> + <li>{{jsxref("Math.min()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/min/index.html b/files/es/web/javascript/reference/global_objects/math/min/index.html new file mode 100644 index 0000000000..a2dbf8348a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/min/index.html @@ -0,0 +1,150 @@ +--- +title: Math.min() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/min +tags: + - JavaScript + - Math + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/min +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.min()</code></strong> devuelve el menor de cero o más números.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.min([<var>valor1</var>[, <var>valor2</var>[, ...]]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor1, valor2, ...</code></dt> + <dd>Números.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Ya que <code>min()</code> es un método estático de <code>Math</code>, siempre debe usarse como <code>Math.min()</code>, en lugar de como un método de un objeto <code>Math</code> instanciado (Math no es un constructor).</p> + +<p>Si no se proporcionan argumentos, el resultado es {{jsxref("Infinity")}}.</p> + +<p>Si al menos uno de los argumentos no puede ser convertido a número, el resultado es {{jsxref("NaN")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.min()">Usando <code>Math.min()</code></h3> + +<p>Lo siguiente encuentra el mínimo de <code>x</code> e <code>y</code> y lo asigna a <code>z</code>:</p> + +<pre class="brush: js">var x = 10, y = -20; +var z = Math.min(x, y); +</pre> + +<h3 id="Recortando_un_valor_con_Math.min()">Recortando un valor con <code>Math.min()</code></h3> + +<p><code>Math.min()</code> es a menudo usado para recortar un valor de tal manera que siempre sea menor o igual a un límite. Este ejemplo</p> + +<pre class="brush: js">var x = f(foo); + +if (x > limite) { + x = limite; +} +</pre> + +<p>puede ser escrito de la siguiente manera</p> + +<pre class="brush: js">var x = Math.min(f(foo), limite); +</pre> + +<p>{{jsxref("Math.max()")}} puede ser usado en una forma similar para recortar un valor en el otro extremo.</p> + +<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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.min', 'Math.min')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para Android</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</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="Ver_además">Ver además</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/pi/index.html b/files/es/web/javascript/reference/global_objects/math/pi/index.html new file mode 100644 index 0000000000..d4428498cd --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/pi/index.html @@ -0,0 +1,126 @@ +--- +title: Math.PI +slug: Web/JavaScript/Referencia/Objetos_globales/Math/PI +tags: + - JavaScript + - Math + - Propiedad + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/PI +--- +<div>{{JSRef}}</div> + +<div>La propiedad <code><strong>Math.PI</strong></code> representa la relacion entre la longitud de la circunferencia de un circulo y su diametro, la cual es aproximadamente 3.14159.</div> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.PI</mi></mstyle><mo>=</mo><mi>π</mi><mo>≈</mo><mn>3.14159</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.PI}} = \pi \approx 3.14159</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que PI es una propiedad estatica del modulo <strong><code>Math</code></strong>, siempre debes de utilizarla como <strong><code>Math.PI</code></strong>, en lugar de una propiedad de un objeto <strong><code>Math</code></strong> que tu hayas creado ( <strong><code>Math</code></strong> no es un constructor ).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.PI">Utilizando <code>Math.PI</code></h3> + +<p>La siguiente función utiliza <strong><code>Math.PI</code></strong> para calcular la longitud de la circunferencia de un circulo mediante el radio del circulo proporcionado como parametro.</p> + +<pre class="brush: js">function calculaCircunferencia(radio) { + return 2 * Math.PI * radio; +} + +calculaCircunferencia(1); // 6.283185307179586 +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial. Implementado en JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.pi', 'Math.PI')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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 Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li>{{jsxref("Math")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/pow/index.html b/files/es/web/javascript/reference/global_objects/math/pow/index.html new file mode 100644 index 0000000000..7185cffede --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/pow/index.html @@ -0,0 +1,140 @@ +--- +title: Math.pow() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/pow +translation_of: Web/JavaScript/Reference/Global_Objects/Math/pow +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La función <strong><code>Math.pow()</code></strong> devuelve la <code>base elevada al</code> <code>exponente</code> , esto es, <code>base<sup>exponente</sup></code>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.pow(<var>base</var>, <var>exponente</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<dl> + <dt><code>base</code></dt> + <dd>El número base.</dd> + <dt><code>exponente</code></dt> + <dd>El exponente utilizado para elevar la <code>base</code>.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>La función <strong><code>Math.pow()</code></strong> retorna la <code>base</code> elevada al <code>exponente</code>, es decir, <code>base<sup>exponente</sup></code>. La base y el exponente estan en el sistema numérico decimal.</p> + +<p>Puesto que <code>pow()</code> es un método estático de <code>Math</code>, siempre se utiliza como <code>Math.pow()</code>. Si la base es negativa y el exponente no es un número entero, el resultado será NaN.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Using_Math.pow" name="Example:_Using_Math.pow">Ejemplo: Usando <code>Math.pow()</code></h3> + +<pre class="brush: js">// simple +Math.pow(7, 2); // 49 +Math.pow(7, 3); // 343 +Math.pow(2, 10); // 1024 +// exponentes fraccionales +Math.pow(4, 0.5); // 2 (raíz cuadrada de 4) +Math.pow(8, 1/3); // 2 (raíz cúbica de 8) +Math.pow(2, 0.5); // 1.412135623730951 (raíz cuadrada de 2) +Math.pow(2, 1/3); // 1.2599210498948732 (raíz cúbica de 2) +// exponentes con signo +Math.pow(7, -2); // 0.02040816326530612 (1/49) +Math.pow(8, -1/3); // 0.5 +// bases con signo +Math.pow(-7, 2); // 49 (los cuadrados son positivos) +Math.pow(-7, 3); // -343 (El cubo de una base negativa puede ser negativo) +Math.pow(-7, 0.5); // NaN (Los números negativos no tienen raíz cuadrada real) +Math.pow(-7, 1/3); // NaN +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Estándar</td> + <td>Definición inicial implementada en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.13', 'Math.pow')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.pow', 'Math.pow')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para 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="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/random/index.html b/files/es/web/javascript/reference/global_objects/math/random/index.html new file mode 100644 index 0000000000..ace95bc0cf --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/random/index.html @@ -0,0 +1,132 @@ +--- +title: Math.random() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/random +tags: + - JavaScript + - Math + - Números Aleatorios + - Random + - Referências +translation_of: Web/JavaScript/Reference/Global_Objects/Math/random +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La función <strong><code>Math.random()</code></strong> retorna un punto flotante, un número pseudo-aleatorio dentro del rango <code>[0, 1).</code> Esto es, desde el 0 (Incluido) hasta el 1 pero sin incluirlo (excluido), el cual se puede escalar hasta el rango deseado. La implementación selecciona la semilla inicial hasta el algoritmo que genera el número aleatorio; este no puede ser elegido o cambiado por el usuario.</p> + +<div class="note"> +<p><strong>Nota:</strong> <code>Math.random()</code> <strong>NO</strong> provee números aleatorios con seguridad criptográfica. No deben ser usados para algo relacionado con seguridad. En vez de eso, usar la API Web Crypto, y más precisamente el método: {{domxref("RandomSource.getRandomValues()", "window.crypto.getRandomValues()")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.random()</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<p>Ninguno.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.random" name="Example:_Using_Math.random">Ejemplo: Usando <code>Math.random()</code></h3> + +<p>Notar que, como los números en Javascript son números de punto flotante IEEE 754 con redondeo-al-par-más-cercano, los rangos generados por las funciones de abajo (excluyendo a <code>Math.random()</code> en sí misma) no son exactos. Si se eligen límites extremadamente grandes (2<sup>53</sup> o más), es posible, en casos extremadamente raros, calcular el generalmente-excluído límite superior.</p> + +<pre class="brush: js">// Retorna un número aleatorio entre 0 (incluido) y 1 (excluido) +function getRandom() { + return Math.random(); +} +</pre> + +<pre class="brush: js">// Retorna un número aleatorio entre min (incluido) y max (excluido) +function getRandomArbitrary(min, max) { + return Math.random() * (max - min) + min; +} +</pre> + +<pre class="brush: js">// Retorna un entero aleatorio entre min (incluido) y max (excluido) +// ¡Usando Math.round() te dará una distribución no-uniforme! +function getRandomInt(min, max) { + return Math.floor(Math.random() * (max - min)) + min; +} +</pre> + +<h2 id="Specifications" name="Specifications">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 1a Edición.</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. JavaScript 1.0 (Sólo UNIX) / JavaScript 1.1 (Todas las plataformas).</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.14', 'Math.random')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.random', 'Math.random')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>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>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> diff --git a/files/es/web/javascript/reference/global_objects/math/round/index.html b/files/es/web/javascript/reference/global_objects/math/round/index.html new file mode 100644 index 0000000000..0257148e69 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/round/index.html @@ -0,0 +1,218 @@ +--- +title: Math.round() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/round +translation_of: Web/JavaScript/Reference/Global_Objects/Math/round +--- +<div>{{JSRef}}</div> + +<div>La función <strong><code>Math.round() </code></strong><code>retorna el valor de un número redondeado al entero más cercano.</code></div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Devuelve el valor del número dado redondeado al entero más cercano.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Math.round(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<dl> + <dd>El valor del número dado redondeado al entero más cercano.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Si la porción fraccionaría del número es 0.5 o mayor, el argumento es redondeado al siguiente número entero superior. Si la porción de la fracción del número es menor a 0.5, el argumento es redondeado al siguiente número entero inferior.</p> + +<p>Debido a que round() es un método estático de Math, siempre se debe utilizar como Math.round(), en vez de un método del objeto Math que ha creado. (Math no es un constructor)</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.round">Usando <code>Math.round()</code></h3> + +<pre class="brush: js notranslate">// Retorna el valor 20 +x = Math.round(20.49); + +// Retorna el valor 21 +x = Math.round(20.5); + +// Retorna el valor -20 +x = Math.round(-20.5); + +// Retorna el valor -21 +x = Math.round(-20.51); + +// Retorna el valor 1 (!) +// Note el error de redondeo debido a la inexactitud del punto aritmético. +// Compare esto con Math.round10(1.005, -2) de el ejemplo de abajo. +x = Math.round(1.005*100)/100; +</pre> + +<h3 id="Redondeo_decimal">Redondeo decimal</h3> + +<pre class="brush: js notranslate">// Conclusión +(function() { + /** + * Ajuste decimal de un número. + * + * @param {String} tipo El tipo de ajuste. + * @param {Number} valor El numero. + * @param {Integer} exp El exponente (el logaritmo 10 del ajuste base). + * @returns {Number} El valor ajustado. + */ + function decimalAdjust(type, value, exp) { + // Si el exp no está definido o es cero... + if (typeof exp === 'undefined' || +exp === 0) { + return Math[type](value); + } + value = +value; + exp = +exp; + // Si el valor no es un número o el exp no es un entero... + if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split('e'); + value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); + // Shift back + value = value.toString().split('e'); + return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); + } + + // Decimal round + if (!Math.round10) { + Math.round10 = function(value, exp) { + return decimalAdjust('round', value, exp); + }; + } + // Decimal floor + if (!Math.floor10) { + Math.floor10 = function(value, exp) { + return decimalAdjust('floor', value, exp); + }; + } + // Decimal ceil + if (!Math.ceil10) { + Math.ceil10 = function(value, exp) { + return decimalAdjust('ceil', value, exp); + }; + } +})(); + +// Round +Math.round10(55.55, -1); // 55.6 +Math.round10(55.549, -1); // 55.5 +Math.round10(55, 1); // 60 +Math.round10(54.9, 1); // 50 +Math.round10(-55.55, -1); // -55.5 +Math.round10(-55.551, -1); // -55.6 +Math.round10(-55, 1); // -50 +Math.round10(-55.1, 1); // -60 +Math.round10(1.005, -2); // 1.01 -- compare this with Math.round(1.005*100)/100 above +// Floor +Math.floor10(55.59, -1); // 55.5 +Math.floor10(59, 1); // 50 +Math.floor10(-55.51, -1); // -55.6 +Math.floor10(-51, 1); // -60 +// Ceil +Math.ceil10(55.51, -1); // 55.6 +Math.ceil10(51, 1); // 60 +Math.ceil10(-55.59, -1); // -55.5 +Math.ceil10(-59, 1); // -50 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial. Implementada en JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.15', 'Math.round')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.round', 'Math.round')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{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>Firefox Mobile (Gecko)</th> + <th>IE Phone</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> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.sign()")}} {{experimental_inline}}</li> + <li>{{jsxref("Math.trunc()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/sign/index.html b/files/es/web/javascript/reference/global_objects/math/sign/index.html new file mode 100644 index 0000000000..3c48027556 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/sign/index.html @@ -0,0 +1,151 @@ +--- +title: Math.sign() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/sign +tags: + - JavaScript + - Math + - Method + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sign +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.sign()</code></strong> retorna el signo de un número, indicando si el número es positivo, negativo o cero.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code>Math.sign(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno.">Valor de retorno.</h3> + +<p>Un número representando el signo del argumento dado. Si el argumento es un número positivo, negativo, cero positivo, o cero negativo, la función retornará <code>1</code>, <code>-1</code>, <code>0</code> or <code>-0</code> respectivamente. De lo contrario, retorna {{jsxref("NaN")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Como <code>sign()</code> es un método estático de <code>Math</code>, siempre se utiliza como <code>Math.sign()</code>, en vez de un método de un objeto Math que hayas creado. (<code>Math</code> no es un constructor).</p> + +<p>Esta función tiene 5 tipos de valores de retorno, <code>1</code>, <code>-1</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, que representan "número positivo", "número negativo", "cero positivo", "cero negativo" y {{jsxref("NaN")}} respectivamente.</p> + +<p>El argumento pasado a esta función será convertido a tipo <code>x</code> implicitamente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.sign()">Usando <code>Math.sign()</code></h3> + +<pre class="brush: js">Math.sign(3); // 1 +Math.sign(-3); // -1 +Math.sign('-3'); // -1 +Math.sign(0); // 0 +Math.sign(-0); // -0 +Math.sign(NaN); // NaN +Math.sign('foo'); // NaN +Math.sign(); // NaN +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (!Math.sign) { + Math.sign = function(x) { + // Si x es NaN, el resultado es NaN. + // Si x es -0, el resultado es -0. + // Si x es +0, el resultado es +0. + // Si x es negativo y no -0, el resultado es -1. + // Si x es positivo y no +0, el resultado es +1. + x = +x; // convertir a número + if (x === 0 || isNaN(x)) { + return Number(x); + } + return x > 0 ? 1 : -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('ES6', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sign', 'Math.sign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Propiedad</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("38")}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("9")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Propiedad</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_También">Ver También</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.trunc()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/sin/index.html b/files/es/web/javascript/reference/global_objects/math/sin/index.html new file mode 100644 index 0000000000..a89a6e635e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/sin/index.html @@ -0,0 +1,126 @@ +--- +title: Math.sin() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/seno +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sin +--- +<div>{{JSRef("Global_Objects", "Math")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La función <strong><code>Math.sin()</code></strong><code> devuelve el seno de un número</code>.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.sin(<var>x</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número (en radianes).</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El método <code>Math.sin()</code> devuelve un valor numérico entre -1 y 1, que representa el seno del ángulo dado en radianes.<br> + Debido a que <code>sin()</code> es un método estático de <code>Math</code>, siempre se usa como <code>Math.sin()</code>, en vez de crear un objeto <code>Math</code> y usarlo como un método (<code>Math</code> no es un constructor).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_Math.sin" name="Example:_Using_Math.sin">Ejemplo: Usando <code>Math.sin()</code></h3> + +<pre class="brush: js">Math.sin(0); // 0 +Math.sin(1); // 0.8414709848078965 + +Math.sin(Math.PI / 2); // 1 +</pre> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estatus</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>ECMAScript 1ª Edición.</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sin', 'Math.sin')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para 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="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.tan()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/sqrt/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt/index.html new file mode 100644 index 0000000000..a3977c6f08 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/sqrt/index.html @@ -0,0 +1,134 @@ +--- +title: Math.sqrt() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/sqrt +translation_of: Web/JavaScript/Reference/Global_Objects/Math/sqrt +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.sqrt()</code></strong> retorna la raíz cuadrada de un número, que es<math display="block"><semantics><mrow><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>the unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>such that</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.sqrt(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>La raíz cuadrada del número proporcionado. Si los números son negativos, {{jsxref("NaN")}} es devuelto.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Si el valor de <code>x</code> es negativo <code>Math.sqrt()</code> retorna {{jsxref("NaN")}}.</p> + +<p>Debido a que <code>sqrt()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.sqrt()</code>, en lugar de un método del objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.sqrt()">Usando <code>Math.sqrt()</code></h3> + +<pre class="brush: js">Math.sqrt(9); // 3 +Math.sqrt(2); // 1.414213562373095 + +Math.sqrt(1); // 1 +Math.sqrt(0); // 0 +Math.sqrt(-1); // NaN +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.cbrt()")}}</li> + <li>{{jsxref("Math.exp()")}}</li> + <li>{{jsxref("Math.log()")}}</li> + <li>{{jsxref("Math.pow()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html new file mode 100644 index 0000000000..de9bd99eb9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html @@ -0,0 +1,123 @@ +--- +title: Math.SQRT1_2 +slug: Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2 +tags: + - JavaScript + - Math + - Propiedad + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2 +--- +<div>{{JSRef}}</div> + +<div>La propiedad <strong><code>Math.SQRT1_2</code></strong> representa la raiz cuadrada de 1/2, la cual es equivalente al inverso de la raiz cuadrada de 2, aproximadadamente 0.707:</div> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT1_2</mi></mstyle><mo>=</mo><msqrt><mfrac><mn>1</mn><mn>2</mn></mfrac></msqrt><mo>=</mo><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><mo>≈</mo><mn>0.707</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707</annotation></semantics></math></p> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que SQRT1_2 es una propiedad estatica de Math, siempre debes utilizarla como Math.SQRT1_2, en lugar de invocarla como una propiedad de alguna instancia de Math que hayas creado ( Math no es un constructor ).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.SQRT1_2">Utilizando <code>Math.SQRT1_2</code></h3> + +<p>La siguiente funcion regresa la raiz cuadrada de 1/2:</p> + +<pre class="brush:js">function getRoot1_2() { + return Math.SQRT1_2; +} + +getRoot1_2(); // 0.7071067811865476 +</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">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en Javascript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Navegadores_Compatibles">Navegadores Compatibles</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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 basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_Tambien">Ver Tambien</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/sqrt2/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt2/index.html new file mode 100644 index 0000000000..7e23295f25 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/sqrt2/index.html @@ -0,0 +1,124 @@ +--- +title: Math.SQRT2 +slug: Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2 +translation_of: Web/JavaScript/Reference/Global_Objects/Math/SQRT2 +--- +<div>{{JSRef}}</div> + +<div>La propiedad <strong>Math.SQRT2</strong> representa la raíz cuadrada de de 2, aproximadamente 1.414:</div> + +<p><math display="block"><semantics><mrow><mstyle mathvariant="monospace"><mi>Math.SQRT2</mi></mstyle><mo>=</mo><msqrt><mn>2</mn></msqrt><mo>≈</mo><mn>1.414</mn></mrow><annotation encoding="TeX">\mathtt{\mi{Math.SQRT2}} = \sqrt{2} \approx 1.414</annotation></semantics></math></p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Debido a que SQRT2 es una propiedad estática de <code>Math</code>, siempre se utiliza como <code>Math.SQRT2</code>, en lugar de una propiedad de un objeto <code>Math</code> creado<code>.</code></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_Math.SQRT2">Utilizando Math.SQRT2</h3> + +<p>La siguiente función retorna la raíz cuadrada de 2:</p> + +<pre class="brush: js">function getRoot2() { + return Math.SQRT2; +} + +getRoot2(); // 1.4142135623730951 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial. Implementada en JavaScript 1.0.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="sect1"> </h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.pow()")}}</li> + <li>{{jsxref("Math.sqrt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/tan/index.html b/files/es/web/javascript/reference/global_objects/math/tan/index.html new file mode 100644 index 0000000000..8a773b0da5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/tan/index.html @@ -0,0 +1,82 @@ +--- +title: Math.tan() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/tan +tags: + - Matemáticas + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tan +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.tan()</code></strong> retorna la tangente de un número.</p> + +<div>{{EmbedInteractiveExample("pages/js/math-tan.html")}}</div> + +<p class="hidden">La fuente para este ejemplo interactivo se encuentra almacenada en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, por favor, clona el repositorio en este link: <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un <em>Pull Request</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.tan(<var>x</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número que representa un ángulo en radianes.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>La tangente del número proporcionado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Math.tan()</code> retorna un valor numérico que representa la tangente de un ángulo.</p> + +<p>Dado que <code>tan()</code> es un método estático de <code>Math</code>, siempre debes usarlo como <code>Math.tan()</code>, y no como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.tan">Usando <code>Math.tan()</code></h3> + +<pre class="brush: js">Math.tan(1); // 1.5574077246549023 +</pre> + +<p>Ya que la función <code>Math.tan()</code> acepta radianes, pero es más fácil trabajar con grados, la siguiente función acepta un valor en grados, lo convierte a radianes, y retorna la tangente de dicho valor.</p> + +<pre class="brush: js">function getTanDeg(deg) { + var rad = deg * Math.PI/180; + return Math.tan(rad); +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir a los datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>, y envíanos un <em>Pull Request</em>.</p> + +<p>{{Compat("javascript.builtins.Math.tan")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Math.acos()")}}</li> + <li>{{jsxref("Math.asin()")}}</li> + <li>{{jsxref("Math.atan()")}}</li> + <li>{{jsxref("Math.atan2()")}}</li> + <li>{{jsxref("Math.cos()")}}</li> + <li>{{jsxref("Math.sin()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/tanh/index.html b/files/es/web/javascript/reference/global_objects/math/tanh/index.html new file mode 100644 index 0000000000..138c466b37 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/tanh/index.html @@ -0,0 +1,95 @@ +--- +title: Math.tanh() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/tanh +tags: + - ECMAScript 2015 + - JavaScript + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Math/tanh +--- +<div>{{JSRef}}</div> + +<p>La funcion <strong><code>Math.tanh()</code></strong> devuelve la hyperbolica tangente de un numero, esto es </p> + +<p><math display="block"><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math></p> + +<div>{{EmbedInteractiveExample("pages/js/math-tanh.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Math.tanh(<var>x</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un numero.</dd> +</dl> + +<h3 id="Devolver_valor">Devolver valor</h3> + +<p>La hyperbolica tangente del numero obtenido.</p> + +<h2 id="Descripcion">Descripcion</h2> + +<p>Porque <code>tanh()</code> es un metodo estatico de <code>Math</code>, siempre se usa como <code>Math.tanh()</code>, en lugar de ser un metodo de <code>Math</code> objeto que creas (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Math.tanh()">Usando <code>Math.tanh()</code></h3> + +<pre class="brush: js">Math.tanh(0); // 0 +Math.tanh(Infinity); // 1 +Math.tanh(1); // 0.7615941559557649 +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Esto puede ser emulado con ayuda de {{jsxref("Math.exp()")}} funcion:</p> + +<pre class="brush: js">Math.tanh = Math.tanh || function(x){ + var a = Math.exp(+x), b = Math.exp(-x); + return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificacion</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> + <p>Definicion inicial.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">La compatibilidad de la tabla en esta pagina esta generada desde una structura data. Si quiers contribuir a la data, visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un propuesta.</p> + +<p>{{Compat("javascript.builtins.Math.tanh")}}</p> + +<h2 id="sect1"> </h2> + +<ul> + <li>{{jsxref("Math.acosh()")}}</li> + <li>{{jsxref("Math.asinh()")}}</li> + <li>{{jsxref("Math.atanh()")}}</li> + <li>{{jsxref("Math.cosh()")}}</li> + <li>{{jsxref("Math.sinh()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/math/trunc/index.html b/files/es/web/javascript/reference/global_objects/math/trunc/index.html new file mode 100644 index 0000000000..9efe511927 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/math/trunc/index.html @@ -0,0 +1,144 @@ +--- +title: Math.trunc() +slug: Web/JavaScript/Referencia/Objetos_globales/Math/trunc +tags: + - ECMAScript6 + - JavaScript + - Math + - Método(2) + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Math/trunc +--- +<div>{{JSRef}}</div> + +<p>La función <strong><code>Math.trunc()</code></strong> devuelve la parte entera de un numero removiendo cualquier dígito decimal (dígitos situados después de la coma).</p> + +<h2 id="Sintaxis.">Sintaxis.</h2> + +<pre class="syntaxbox notranslate"><code>Math.trunc(<var>x</var>)</code></pre> + +<h3 id="Parámetros.">Parámetros.</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Un número.</dd> +</dl> + +<h3 id="Valor_de_retorno.">Valor de retorno.</h3> + +<p>La parte entera del número dado.</p> + +<h2 id="Descripción.">Descripción.</h2> + +<p>A diferencia de los otros tres métodos de <code>Math</code>: {{jsxref("Math.floor()")}}, {{jsxref("Math.ceil()")}} y {{jsxref("Math.round()")}}, la forma en que <code>Math.trunc()</code> funciona es muy simple. <em>trunca</em> (corta) el punto y los dígitos a la derecha de él, sin importar si el argumento es un número positivo o negativo.</p> + +<p>Si el argumento es un número positivo, <code>Math.trunc()</code> es equivalente a <code>Math.floor();</code> de otra forma <code>Math.trunc()</code> es equivalente a <code>Math.ceil()</code>.</p> + +<p>El argumento pasado a este método será convertido a un tipo numérico entero.</p> + +<p>Debido a que <code>trunc()</code> es un método estático de <code>Math</code>, siempre úsalo como <code>Math.trunc()</code>, en lugar de como un método de un objeto <code>Math</code> que hayas creado (<code>Math</code> no es un constructor).</p> + +<h2 id="Ejemplos.">Ejemplos.</h2> + +<h3 id="Usando_Math.trunc">Usando <code>Math.trunc()</code></h3> + +<pre class="brush: js notranslate">Math.trunc(13.37); // 13 +Math.trunc(42.84); // 42 +Math.trunc(0.123); // 0 +Math.trunc(-0.123); // -0 +Math.trunc('-1.123'); // -1 +Math.trunc(NaN); // NaN +Math.trunc('foo'); // NaN +Math.trunc(); // NaN +</pre> + +<h2 id="Polyfill.">Polyfill.</h2> + +<pre class="brush: js notranslate">Math.trunc = Math.trunc || function (x) { + return (x < 0 ? Math.ceil(x) : Math.floor(x)); +} +</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-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-math.trunc', 'Math.trunc')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores.">Compatibilidad con navegadores.</h2> + +<div>{{CompatibilityTable}}</div> + +<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("38")}}</td> + <td>{{CompatGeckoDesktop("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("25")}}</td> + <td>{{CompatSafari("7.1")}}</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("25")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_también.">Vea también.</h2> + +<ul> + <li>{{jsxref("Math.abs()")}}</li> + <li>{{jsxref("Math.ceil()")}}</li> + <li>{{jsxref("Math.floor()")}}</li> + <li>{{jsxref("Math.round()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/nan/index.html b/files/es/web/javascript/reference/global_objects/nan/index.html new file mode 100644 index 0000000000..f107f1bb3c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/nan/index.html @@ -0,0 +1,46 @@ +--- +title: NaN +slug: Web/JavaScript/Referencia/Objetos_globales/NaN +tags: + - JavaScript + - Propiedad + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/NaN +--- +<div>{{jsSidebar("Objects")}}</div> + +<div> +<p dir="ltr" id="tw-target-text">La propiedad global <code>NaN</code> es un valor que representa Not-A-Number.</p> +</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>Un valor representando un Not-A-Number (No es Un Número).</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<p><code>NaN</code></p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>NaN</code> es una propiedad del <em>global object (objeto global)</em>, por ejemplo, es una variable de alcance global.</p> + +<p>El valor inicial de <code>NaN</code> es Not-A-Number (No es Un Número) - lo mismo que el valor de {{jsxref("Number.NaN")}}.</p> + +<p><span class="comment">Keep text below in sync with Number.NaN page</span> <code>NaN</code> nunca es equivalente con cualquier otro número, incluido el mismo <code>NaN</code>; no puedes chequear el valor de un not-a-number comparándolo con <code>Number.NaN</code>. Usar la función {{jsxref("isNaN()")}} para aquello.</p> + +<p>Muchos métodos de JavaScript (como son el {{jsxref("Number")}} constructor, {{jsxref("parseFloat")}} y {{jsxref("parseInt")}}) retornan <code>NaN</code> si el valor especificado en el parámetro no puede ser parseado como un número.</p> + +<p><span class="hps">Puedes utilizar</span> <span class="hps">la propiedad</span> <code>NaN</code> <span class="hps">para indicar</span> <span class="hps">una condición de error</span> <span class="hps">para</span> tu<span class="hps"> función</span> <span class="hps">que devuelva un número</span> <span class="hps">en caso de éxito</span><span>.</span></p> + +<p>JavaScript imprime el valor <code>Number.NaN</code> como <code>NaN</code>.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Number.NaN")}}</li> + <li>{{jsxref("Number.isNaN()")}}</li> + <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/null/index.html b/files/es/web/javascript/reference/global_objects/null/index.html new file mode 100644 index 0000000000..94d1a392c5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/null/index.html @@ -0,0 +1,129 @@ +--- +title: 'null' +slug: Web/JavaScript/Referencia/Objetos_globales/null +tags: + - JavaScript + - Literal + - Primitivo +translation_of: Web/JavaScript/Reference/Global_Objects/null +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El valor <code>null</code> es un literal de Javascript que representa intencionalmente un valor nulo o "vacío". Es uno de los {{Glossary("Primitive", "valores primitivos")}} de Javascript.</p> + +<div>{{EmbedInteractiveExample("pages/js/globalprops-null.html")}}</div> + + + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>null </code></pre> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El valor <code>null</code> es un literal (no una propiedad del objeto global como podría ser <code>{{jsxref("undefined", "undefined")}}</code>). En APIs, se devuelve <code>null</code> normalmente dónde se espera un objeto pero éste no es relevante. Al comparar con <code style="font-style: normal;">null</code> o <code>{{jsxref("undefined", "undefined")}}</code><code> </code>hay que tener en cuenta las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Comparison_Operators">diferencias entre los operadores de igualdad (==) e identidad (===) </a>(con el primero se realiza una conversión de tipo).</p> + +<pre class="brush: js">// foo no existe, no está definido y nunca ha sido inicializado: +> foo +"ReferenceError: foo is not defined" + +// foo existe, pero no tiene tipo ni valor: +> var foo = null; foo +"null" +</pre> + +<h3 id="Diferencias_entre_null_y_undefined">Diferencias entre <code>null</code> y <code>undefined</code></h3> + +<pre class="brush: js">typeof null // object (bug en ECMAScript, debería ser null) +typeof undefined // undefined +null === undefined // false +null == undefined // 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">Comentarios</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-4.3.11', 'null value')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-null-value', 'null value')}}</td> + <td>{{Spec2('ES6')}}</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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also" name="See_also">Véase también</h2> + +<ul> + <li>{{jsxref("undefined", "undefined")}}</li> + <li>{{jsxref("NaN", "NaN")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/index.html b/files/es/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..72c1425b8b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,181 @@ +--- +title: Number +slug: Web/JavaScript/Referencia/Objetos_globales/Number +tags: + - JavaScript + - Number + - Referencia + - Referência(2) +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div>{{JSRef}}</div> + +<p><strong><code>Number</code></strong> es un objeto primitivo envolvente que permite representar y manipular valores numéricos cómo 37 o -9.25. El constructor Number contiene constantes y métodos para trabajar con números. Valores de otro tipo pueden ser convertidos a números usando la función Number().</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new Number(<em>value</em>); +var <em>a</em> = new Number('123'); // a === 123 es false +var <em>b</em> = Number('123'); // b === 123 es true +<em>a</em> instanceof Number; // es true +<em>b</em> instanceof Number; // es false</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor numérico de un objeto que está siendo creado.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Los principales usos del objeto <code>Number(valor)</code> son convertir un string u otro valor a uno de tipo numérico; si el argumento no puede ser convertido a un número, devuelve {{jsxref("NaN")}}.</p> + +<h3 id="Literal_syntax">Literal syntax</h3> + +<pre class="notranslate">123 // one-hundred twenty-three +123.0 // same +123 === 123.0 // true</pre> + +<h3 id="Function_syntax">Function syntax</h3> + +<pre class="notranslate">Number('123') // retorna el número 123 +Number('123') === 123 // retorna true + +Number("unicorn") // NaN +Number(undefined) // NaN</pre> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/Number"><code>Number()</code></a></dt> + <dd>Crea un nuevo valor Numérico ( <code>Number</code> value).</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Number.EPSILON")}}</dt> + <dd>El intervalo más pequeño entre dos números representables</dd> + <dt>{{jsxref("Number.MAX_SAFE_INTEGER")}}</dt> + <dd>El número máximo representable en JavaScript (<code>2<sup>53</sup> - 1</code>).</dd> + <dt>{{jsxref("Number.MAX_VALUE")}}</dt> + <dd>El número más grande representable.</dd> + <dt>{{jsxref("Number.MIN_SAFE_INTEGER")}}</dt> + <dd>El número mínimo representable en JavaScript (<code>-(2<sup>53</sup> - 1)</code>).</dd> + <dt>{{jsxref("Number.MIN_VALUE")}}</dt> + <dd>El número más pequeño representable - que es el número positivo más cercano a cero (sin llegar a ser cero)-.</dd> + <dt>{{jsxref("Number.NaN")}}</dt> + <dd>Valor especial "no es número" NaN.</dd> + <dt>{{jsxref("Number.NEGATIVE_INFINITY")}}</dt> + <dd>Valor especial para representar infinitos negativos; retorno de un desborde de pila overflow.</dd> + <dt>{{jsxref("Number.POSITIVE_INFINITY")}}</dt> + <dd>Valor especial para representar infinitos positivos; retorno de un desborde de pila overflow.</dd> + <dt>{{jsxref("Number.prototype")}}</dt> + <dd>Permite la adición de propiedades a un objeto <code>Number</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Number.isNaN()")}}</dt> + <dd>Determina si el valor es NaN.</dd> + <dt>{{jsxref("Number.isFinite()")}}</dt> + <dd>Determina si el valor es un numero infinito.</dd> + <dt>{{jsxref("Number.isInteger()")}}</dt> + <dd>Determina si un numero es entero.</dd> + <dt>{{jsxref("Number.isSafeInteger()")}}</dt> + <dd>Determine si el valor pasado es un entero seguro (número entre <code>-(2<sup>53</sup> - 1)</code> y <code>2<sup>53</sup> - 1</code>).</dd> + <dt><s class="obsoleteElement">{{jsxref("Number.toInteger()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Se usa para evaluar el valor pasado y convertirlo en un entero (or {{jsxref("Global_Objects/Infinity", "Infinity")}}), pero ha sido eliminado.</s></dd> + <dt>{{jsxref("Number.parseFloat()")}}</dt> + <dd>El valor es el mismo que {{jsxref ("parseFloat", "parseFloat ()")}} del objeto global.</dd> + <dt>{{jsxref("Number.parseInt()")}}</dt> + <dd>El valor es el mismo que {{jsxref("parseInt", "parseInt()")}} del objeto global.</dd> +</dl> + +<h2 id="Instancias_Number">Instancias <code>Number</code></h2> + +<p>Todas las instancias <code>Number</code> heredan de {{jsxref("Number.prototype")}}. El objeto prototipo del constructor de <code>Number</code> puede modificarse para aceptar a todas las instancias de <code>Number</code>.</p> + +<h3 id="Métodos_2">Métodos</h3> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}}</dt> + <dd>Devuelve una cadena que representa el número en notación exponencial.</dd> +</dl> + +<dl> + <dt>{{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}}</dt> + <dd>Devuelve una cadena que representa el número en notación de punto fijo.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}}</dt> + <dd>Devuelve una cadena con una representación sensible al idioma de este número. Invalida el método {{jsxref ("Object.prototype.toLocaleString ()")}}.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_asignar_valores_a_variables_num.C3.A9ricas" name="Ejemplo:_Utilizando_el_objeto_Number_para_asignar_valores_a_variables_num.C3.A9ricas">Ejemplo: Utilizando el objeto <code>Number</code> para asignar valores a variables numéricas</h3> + +<p>El siguiente ejemplo utiliza las propiedades del objeto <code>Number</code> para asignar valores a varias variables numéricas:</p> + +<pre class="brush: js notranslate">const MásgrandeNum = Number.MAX_VALUE; +const MáspequeNum = Number.MIN_VALUE; +const infinitoNum = Number.POSITIVE_INFINITY; +const notInfinitoNum = Number.NEGATIVE_INFINITY; +const noEsNum = Number.NaN; +</pre> + +<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number" name="Ejemplo:_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number">Intervalo de enteros para Number</h3> + +<p>El siguiente ejemplo muestra los valores máximos y minimos que pueden ser representados mediante el objeto Number: </p> + +<p>Cuando se analizan datos que se han serializado en JSON, se puede esperar que los valores enteros que se encuentran fuera de este rango se corrompan cuando el analizador JSON los coacciona al tipo Number.</p> + +<p>Una posible solución es usar {{jsxref ("String")}} en su lugar.</p> + +<p>Los números más grandes se pueden representar usando el tipo {{jsxref ("BigInt")}}.</p> + +<pre class="notranslate">const biggestInt = Number.MAX_SAFE_INTEGER // (<code>2<sup>53</sup> - 1</code>) => 9007199254740991 +const smallestInt = Number.MIN_SAFE_INTEGER // -(<code>2<sup>53</sup> - 1</code>) => -9007199254740991</pre> + +<h3 id="Ejemplo_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number" name="Ejemplo:_Utilizando_el_objeto_Number_para_modificar_todos_los_objetos__Number">Ejemplo: Utilizando el objeto <code>Number</code> para modificar todos los objetos <code>Number</code></h3> + +<p>El siguiente ejemplo crea un objeto Number, miNúmero, luego añade la propiedad descripción a todos los objetos Number. Luego el valor es asignado a la propiedad descripción del objeto miNúmero.</p> + +<pre class="brush: js notranslate">miNúmero = new Number(65); +Number.prototype.descripción = null; +miNúmero.descripción = "velocidad del viento"; +</pre> + +<h3 id="Utilizando_el_objecto_Number_para_transformar_un_objeto_Date">Utilizando el objecto <code>Number</code> para transformar un objeto <code>Date</code> </h3> + +<p>El siguiente ejemplo convierte el objeto {{jsxref ("Date")}} a un valor numérico usando <code>Number</code> como función:</p> + +<pre class="notranslate"><code>var d = new Date('December 17, 1995 03:24:00'); +console.log(Number(d));</code></pre> + +<p>Esto muestra "819199440000".</p> + +<h3 id="Convierte_cadenas_numéricas_a_números">Convierte cadenas numéricas a números</h3> + +<pre class="notranslate"><code>Number('123') // 123 +Number('12.3') // 12.3 +Number('123e-1') // 12.3 +Number('') // 0 +Number('0x11') // 17 +Number('0b11') // 3 +Number('0o11') // 9 +Number('foo') // NaN +Number('100a') // NaN</code></pre> + +<pre dir="rtl">Number('-Infinity') //-Infinity</pre> + + + +<h3 id="Vea_También">Vea También</h3> + +<ul> + <li>{{jsxref("Global_Objects/NaN", "NaN")}}</li> + <li>{{jsxref("Global_Objects/Math", "Math")}}</li> + <li>{{jsxref("Arithmetic operators")}} </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/isfinite/index.html b/files/es/web/javascript/reference/global_objects/number/isfinite/index.html new file mode 100644 index 0000000000..f26af9f671 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/isfinite/index.html @@ -0,0 +1,88 @@ +--- +title: Number.isFinite() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/isFinite +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isFinite +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Number.isFinite()</code></strong> determina si el valor pasado es un número finito.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isfinite.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Number.isFinite(valor)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor cuya finitud será probada.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Un {{jsxref("Boolean")}} indicando si el valor dado es finito o no.</p> + +<h2 id="Description">Description</h2> + +<p>En comparación con la funcion global {{jsxref("isFinite", "isFinite()")}} , este método no convierte el parámetro forzádamente a un número. Esto significa que solo valores de tipo númerico, que también son finitos, retornan <code>true</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">Number.isFinite(Infinity); // false +Number.isFinite(NaN); // false +Number.isFinite(-Infinity); // false + +Number.isFinite(0); // true +Number.isFinite(2e64); // true + +Number.isFinite('0'); // false, retornaría true con la función + // global isFinite('0') +Number.isFinite(null); // false, retornaría true con la función + // global isFinite(null) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Number.isFinite = Number.isFinite || function(value) { + return typeof value === 'number' && isFinite(value); +} +</pre> + +<h2 id="Specificaciones">Specificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isfinite', 'Number.isInteger')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isfinite', 'Number.isInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.isFinite")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El objeto {{jsxref("Number")}} al que pertenece esta función.</li> + <li>La función global {{jsxref("isFinite")}}.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/isinteger/index.html b/files/es/web/javascript/reference/global_objects/number/isinteger/index.html new file mode 100644 index 0000000000..6fdafca32e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/isinteger/index.html @@ -0,0 +1,94 @@ +--- +title: Number.isInteger() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/isInteger +tags: + - JavaScript + - Number + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isInteger +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Number.isInteger()</code></strong> determina si el valor pasado es de tipo entero.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-isinteger.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Number.isInteger(valor)</code></pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor a ser probado si es un entero.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un {{jsxref("Boolean")}} indicando si el valor dado es un entero o no.</p> + +<h2 id="Descripción">Descripción </h2> + +<p>Si el valor seleccionado es un entero, devuelve <code>true</code>, de lo contrario <code>false</code>. Si el valor es {{jsxref("NaN")}} o infinito, devuelve <code>false</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">Number.isInteger(0); // true +Number.isInteger(1); // true +Number.isInteger(-100000); // true +Number.isInteger(99999999999999999999999); // true + +Number.isInteger(0.1); // false +Number.isInteger(Math.PI); // false + +Number.isInteger(NaN); // false +Number.isInteger(Infinity); // false +Number.isInteger(-Infinity); // false +Number.isInteger('10'); // false +Number.isInteger(true); // false +Number.isInteger(false); // false +Number.isInteger([1]); // false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Number.isInteger = Number.isInteger || function(value) { + return typeof value === 'number' && + isFinite(value) && + Math.floor(value) === value; +}; +</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-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isinteger', 'Number.isInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatitibilidad_con_navegadores">Compatitibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.Number.isInteger")}}</p> + +<h2 id="Ver también" name="Ver también">Ver también</h2> + +<ul> + <li>El objeto {{jsxref("Number")}} al que pertenece.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/isnan/index.html b/files/es/web/javascript/reference/global_objects/number/isnan/index.html new file mode 100644 index 0000000000..cc9c62274c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/isnan/index.html @@ -0,0 +1,140 @@ +--- +title: Number.isNaN() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/isNaN +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isNaN +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Number.isNaN()</code></strong> determina si el valor pasado es {{jsxref("NaN")}}. Versión más robusta de la función global {{jsxref("isNaN", "isNaN()")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Number.isNaN(v<var>alue</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor</code></dt> + <dd>El valor para ser evaluado por {{jsxref("NaN")}}.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Debido a los dos operadores de igualdad, {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} y {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}, evaluando a <code>false</code> cuando al comprobar si {{jsxref("NaN")}} <em>is</em> {{jsxref("NaN")}}, la función <code>Number.isNaN()</code> se ha convertido en necesaria. Esta situación es diferente a las otras comparaciones de valor en JavaScript.</p> + +<p>En comparación a la función global {{jsxref("isNaN", "isNaN()")}}, <code>Number.isNaN()</code> no sufre el problema de forzar la conversión del parámetro a un número. Esto significa que ahora es seguro pasar valores que normalmente se convertirían a {{jsxref("NaN")}}, pero no son del mismo valor que {{jsxref("NaN")}}. Esto también significa que solo los valores de tipo número, que también son {{jsxref("NaN")}}, retornan <code>true</code>.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js notranslate">Number.isNaN(NaN); // true +Number.isNaN(Number.NaN); // true +Number.isNaN(0 / 0) // true + +// e.g. estos hubiesen sido true con la función global isNaN() +Number.isNaN("NaN"); // false +Number.isNaN(undefined); // false +Number.isNaN({}); // false +Number.isNaN("blabla"); // false + +// Todos retornan false +Number.isNaN(true); +Number.isNaN(null); +Number.isNaN(37); +Number.isNaN("37"); +Number.isNaN("37.37"); +Number.isNaN(""); +Number.isNaN(" "); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">Number.isNaN = Number.isNaN || function(value) { + return typeof value === "number" && isNaN(value); +} + +// O +Number.isNaN = Number.isNaN || function(value) { + return value !== value; +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<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("25")}}</td> + <td>{{CompatGeckoDesktop("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</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>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("15")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Number")}}</li> + <li>{{jsxref("isNaN", "isNaN()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html b/files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html new file mode 100644 index 0000000000..b12c4cf4d6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html @@ -0,0 +1,99 @@ +--- +title: Number.isSafeInteger() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger +tags: + - ECMAScript6 + - JavaScript + - Number + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Number.isSafeInteger()</code></strong> determina si el valor provisto es un número que es un entero seguro.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-issafeinteger.html")}}</div> + + + +<p>Un entero seguro es un entero que</p> + +<ul> + <li>puede ser exactamente representado como un número IEEE-754 de doble presición, y</li> + <li>su representación IEEE-754 no puede ser el resultado de redondear cualquier otro entero para adaptarse a la representación de IEEE-754.</li> +</ul> + +<p>Por ejemplo, <code>2<sup>53</sup> - 1</code> es un entero seguro: puede ser exactamente representado y ningún otro entero puede ser redondeado a él bajo cualquier modo de redondeo de IEEE-754. En contraste, <code>2<sup>53</sup></code> <em>no</em> es un entero seguro, puede ser exactamente representado en IEEE-754, pero el entero <code>2<sup>53</sup> + 1</code> no puede ser directamente representado en IEEE-754 pero en su lugar, redondea a <code>2<sup>53</sup></code> bajo los modos de redondeo <em>redondeo-al-más-cercano</em> y <em>redondeo-a-cero</em>. Los enteros seguros consisten en todos los enteros desde <code>-(2<sup>53</sup> - 1)</code> inclusivo, hasta <code>2<sup>53</sup> - 1</code> inclusivo (± <code>9007199254740991</code> o ± 9,007,199,254,740,991). </p> + +<p>Manejar valores más grandes o más pequeños que ~9 cuatrillones con presición completa requiere usar una <a href="https://en.wikipedia.org/wiki/Arbitrary-precision_arithmetic">biblioteca de artimética de presición arbitraria</a>. Ver <a href="http://floating-point-gui.de/">Lo que todo programador necesita saber sobre aritmética de punto flotante</a> para más información sobre representaciones de punto flotante de los números.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Number.isSafeInteger(<em>valorDePrueba</em>)</code> +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><em>valorDePrueba</em></code></dt> + <dd>El valor a probar si es un entero seguro.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un {{jsxref("Boolean")}} que indica si el valor dado es un número que es entero seguro.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">Number.isSafeInteger(3); // true +Number.isSafeInteger(Math.pow(2, 53)); // false +Number.isSafeInteger(Math.pow(2, 53) - 1); // true +Number.isSafeInteger(NaN); // false +Number.isSafeInteger(Infinity); // false +Number.isSafeInteger('3'); // false +Number.isSafeInteger(3.1); // false +Number.isSafeInteger(3.0); // true +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">Number.isSafeInteger = Number.isSafeInteger || function (value) { + return Number.isInteger(value) && Math.abs(value) <= Number.MAX_SAFE_INTEGER; +}; +</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-number.issafeinteger', 'Number.isSafeInteger')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.issafeinteger', 'Number.isSafeInteger')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.isSafeInteger")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El objeto {{jsxref("Number")}} al que pertenece.</li> + <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html b/files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html new file mode 100644 index 0000000000..e5fa9df144 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html @@ -0,0 +1,68 @@ +--- +title: Number.MAX_SAFE_INTEGER +slug: Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER +tags: + - ECMAScript 2015 + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER +--- +<div>{{JSRef}}</div> + +<p>La constante <strong><code>Number.MAX_SAFE_INTEGER</code></strong> es el número mas grande 'seguro' en JavaScript (<code>2<sup>53</sup> - 1</code>).</p> + +<div>{{EmbedInteractiveExample("pages/js/number-maxsafeinteger.html")}}</div> + +<p class="hidden">La fuente de este ejemplo interactivo está almacenada en GitHub. Si quieres contribuir al proyecto de ejmplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos un 'pull request'.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>La constante <code>MAX_SAFE_INTEGER</code> tiene un valor de <code>9007199254740991</code> (9,007,199,254,740,991 o ~9 mil billones). El razonamiento detrás de ese número es que JavaScript usa <a href="http://en.wikipedia.org/wiki/Double_precision_floating-point_format">números flotantes de doble precisión</a> tal como está especfificado en <a href="http://en.wikipedia.org/wiki/IEEE_floating_point">IEEE 754</a> por lo que puedes representar números de forma segura entre <code>-(2<sup>53</sup> - 1)</code> y <code>2<sup>53</sup> - 1</code>.</p> + +<p>Seguro, en este contexto, se refiere a la habilidad de representar enteros de forma exacta y compararlos de forma correcta. Por ejemplo, <code>Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2</code> evaluará como 'verdadero', lo cual es matemáticamente incorrecto. Ver {{jsxref("Number.isSafeInteger()")}} para más información.</p> + +<p>Debido a que <code>MAX_SAFE_INTEGER</code> es una propiedad estática de {{jsxref("Number")}}, siempre se usa como <code>Number.MAX_SAFE_INTEGER</code>, en lugar de como una propiedad de un objeto {{jsxref("Number")}} que hayas creado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">Number.MAX_SAFE_INTEGER // 9007199254740991 +Math.pow(2, 53) - 1 // 9007199254740991 +</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-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_safe_integer', 'Number.MAX_SAFE_INTEGER')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página está generada con base en información estructurada. Si quieres contribuir a dicha información, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un 'pull request'.</p> + +<p>{{Compat("javascript.builtins.Number.MAX_SAFE_INTEGER")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Number.MIN_SAFE_INTEGER")}}</li> + <li>{{jsxref("Number.isSafeInteger()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/max_value/index.html b/files/es/web/javascript/reference/global_objects/number/max_value/index.html new file mode 100644 index 0000000000..60c3d04e95 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/max_value/index.html @@ -0,0 +1,131 @@ +--- +title: Number.MAX_VALUE +slug: Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE +--- +<div>{{JSRef}}</div> + +<div>La propiedad <strong><code>Number.MAX_VALUE</code></strong><code> </code>representa el valor numérico positivo máximo representable en JavaScript.</div> + +<div> </div> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad <code>MAX_VALUE</code> tiene un valor aproximado a <code>1.79E+308</code>. Si el valor es mayor será representado como <em><code>Infinity</code></em>.</p> + +<p>Dado que <code>MAX_VALUE</code> es una propiedad estática de {{jsxref("Number")}}, siempre ha de usarse como <code>Number.MAX_VALUE</code>, y no como propiedad del objeto que has creado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_MAX_VALUE">Usando <code>MAX_VALUE</code></h3> + +<p>La función <em>verificarValorMaximo </em>recibe un número como parámetro que se compara con <em>Number.MAX_VALUE. </em>Si el número es menor se imprime por consola <em>"El número no es infinito"</em>, de ser mayor <em>"El número es infinito"</em>.</p> + +<pre class="brush: js">var numero1 = 1.79E+307; +var numero2 = 1.79E+310; + +function verificarValorMaximo(num){ + + if (num <= Number.MAX_VALUE) { + console.log("El número no es infinito"); + } else { + console.log("El número es infinito"); + } + +} + +verificarValorMaximo(numero1); // El número no es infinito +verificarValorMaximo(numero2); // El número es infinito +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad">Compatibilidad</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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>{{jsxref("Number.MIN_VALUE")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/min_value/index.html b/files/es/web/javascript/reference/global_objects/number/min_value/index.html new file mode 100644 index 0000000000..dadda2e337 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/min_value/index.html @@ -0,0 +1,121 @@ +--- +title: Number.MIN_VALUE +slug: Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE +translation_of: Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Number.MIN_VALUE</strong></code> representa el menor valor positivo numérico representable en JavaScript.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad <code>MIN_VALUE </code>es el número más cercano a 0, no el más negativo, que JavaScript puede representar.</p> + +<p><code>MIN_VALUE </code>tiene un valor aproximado de <code>5e-324</code>. Los valores menores que <code>MIN_VALUE </code>(“subdesbordamiento de valores”) son convertidos a 0.</p> + +<p>Ya que <code>MIN_VALUE </code>es una propiedad estática de {{jsxref("Number")}}, debes utilizarla como <code>Number.MIN_VALUE</code>, más que como una propiedad del objeto {{jsxref("Number")}} que has creado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_MIN_VALUE">Usando <code>MIN_VALUE</code></h3> + +<p>El siguiente código divide dos valores numéricos. Si el resultado es mayor o igual a <code>MIN_VALUE</code>, se ejecuta la función <code>func1</code>, si no, se ejecuta la función <code>func2</code>.</p> + +<pre class="brush: js">if (num1 / num2 >= Number.MIN_VALUE) { + func1(); +} else { + func2(); +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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>{{jsxref("Number.MAX_VALUE")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/nan/index.html b/files/es/web/javascript/reference/global_objects/number/nan/index.html new file mode 100644 index 0000000000..79db15a598 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/nan/index.html @@ -0,0 +1,59 @@ +--- +title: Number.NaN +slug: Web/JavaScript/Referencia/Objetos_globales/Number/NaN +tags: + - JavaScript + - Número + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NaN +--- +<div>{{JSRef}}</div> + +<p>La propiedad <strong><code>Number.NaN</code></strong> representa Not-A-Number (No es numero). Equivalente de {{jsxref("NaN")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-nan.html")}}</div> + +<p>No tienes que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (usa <code>Number.NaN</code>).</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Chequea_si_los_valores_son_numericos">Chequea si los valores son numericos</h3> + +<pre class="brush: js notranslate">function sanitise(x) { + if (isNaN(x)) { + return Number.NaN; + } + return x; +}</pre> + +<h3 id="Testing_against_NaN">Testing against NaN</h3> + +<p>See <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN#Testing_against_NaN">Testing against NaN</a> on the <code>NaN</code> page.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.NaN")}}</p> + +<h2 id="Tambien_mira">Tambien mira</h2> + +<ul> + <li>El objeto global {{jsxref("NaN")}} .</li> + <li>El objeto {{jsxref("Number")}} al que pertenece.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html b/files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html new file mode 100644 index 0000000000..2e2d7d1573 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html @@ -0,0 +1,117 @@ +--- +title: Number.NEGATIVE_INFINITY +slug: Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY +--- +<div> + {{JSRef("Objetos_globales", "Number")}}</div> +<h2 id="Summary" name="Summary">Resumen</h2> +<p>La propiedad <code><strong>Number.NEGATIVE_INFINITY</strong></code> representa el valor del infinito negativo.</p> +<p>No se tiene que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (use <code>Number.NEGATIVE_INFINITY</code>).</p> +<p>{{js_property_attributes(0,0,0)}}</p> +<h2 id="Description" name="Description">Descripción</h2> +<p>El valor <code>Number.NEGATIVE_INFINITY</code> es el mismo que el valor negativo de la propiedad del objeto global {{jsxref( "Infinity")}}<strong><code>.</code></strong></p> +<p>Este valor tiene un comportamiento ligeramente diferente que el del infinito matematico:</p> +<ul> + <li>Cualquier valor positivo, incluyendo <code>POSITIVE_INFINITY</code>, multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>NEGATIVE_INFINITY</code>.</li> + <li>Cualquier valor negativo, incluyendo <code>NEGATIVE_INFINITY</code>, multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>POSITIVE_INFINITY</code>.</li> + <li>Cero multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>NaN</code>.</li> + <li>NaN multiplicado por <code>NEGATIVE_INFINITY</code> da como resultado <code>NaN</code>.</li> + <li><code>NEGATIVE_INFINITY</code>, divido por cualquier valor negativo excepto <code>NEGATIVE_INFINITY</code>, da como resultado <code>POSITIVE_INFINITY</code>.</li> + <li><code>NEGATIVE_INFINITY</code>, divido por cualquier valor positivo excepto <code>POSITIVE_INFINITY</code>, da como resultado <code>NEGATIVE_INFINITY</code>.</li> + <li><code>NEGATIVE_INFINITY</code>, divido por <code>NEGATIVE_INFINITY</code> o por <code>POSITIVE_INFINITY</code>, da como resultado <code>NaN</code>.</li> + <li>Cualquier numero divido por <code>NEGATIVE_INFINITY</code> da como resultado cero.</li> +</ul> +<p>Muchos métodos JavaScript (tales como el constructor del objeto <code>Number</code>, <code>parseFloat</code>, y <code>parseInt</code>) retornan <code>NaN</code> si el valor especifico en el párametro es significativamente menor a <code>Number.MIN_VALUE</code>.</p> +<p>Podrías utilizar la propiedad <code>Number.NEGATIVE_INFINITY</code> para indicar una condición de error que retorne un numero finito en caso de que esto suceda. Note, sin embargo, que <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite">isFinite</a></code> seria mas apropiado en estos casos.</p> +<h2 id="Example" name="Example">Example</h2> +<p>En el siguiente ejemplo, a la variable <code>smallNumber </code>se le asigna un valor mucho mas pequeño al valor minimo. Cuando la sentencia <code>if</code> es ejecutada, <code>smallNumber </code>tiene el valor "<code>-Infinity</code>", por lo cual a <code>smallNumber </code>le es asignado un valor finito mas manejable antes de continuar.</p> +<pre class="brush:js">var smallNumber = (-Number.MAX_VALUE) * 2 + +if (smallNumber === Number.NEGATIVE_INFINITY) { + smallNumber = returnFinite(); +} +</pre> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1ra Edición. Implementado en JavaScript 1.1</td> + <td>Estándar</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}}</td> + <td>{{Spec2('ES6')}}</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</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</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>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">Ver también</h2> +<ul> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> + <li>{{jsxref( "Infinity")}}</li> + <li>{{jsxref("isFinite")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/parsefloat/index.html b/files/es/web/javascript/reference/global_objects/number/parsefloat/index.html new file mode 100644 index 0000000000..6285aa9b5a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/parsefloat/index.html @@ -0,0 +1,76 @@ +--- +title: Number.parseFloat() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat +tags: + - ECMAScript2015 + - ECMAScript6 + - JavaScript + - Número + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseFloat +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Number.parseFloat()</code></strong> parsea un argumento cadena y regresa un número de punto flotante. Este método se comporta de igual forma a la función global {{jsxref("parseFloat", "parseFloat()")}} y es parte de ECMAScript 2015 (su propósito es la modularización de los globales).</p> + +<div>{{EmbedInteractiveExample("pages/js/number-parsefloat.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Number.parseFloat(<var>string</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Parameters")}}</p> + +<h3 id="Valor_de_regreso">Valor de regreso</h3> + +<p>{{page("en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat", "Return value")}}</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Por favor ver {{jsxref("parseFloat", "parseFloat()")}} para más detalles y ejemplos.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js notranslate">if (Number.parseFloat === void 0) { + Number.parseFloat = parseFloat; +} +</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-number.parsefloat', 'Number.parseFloat')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.parseFloat")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El objeto {{jsxref("Number")}} al que pertenece.</li> + <li>El método global {{jsxref("parseFloat", "parseFloat()")}}.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/parseint/index.html b/files/es/web/javascript/reference/global_objects/number/parseint/index.html new file mode 100644 index 0000000000..e899827599 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/parseint/index.html @@ -0,0 +1,80 @@ +--- +title: Number.parseInt() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/parseInt +tags: + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Number/parseInt +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Number.parseInt()</code></strong> method parses a string argument and returns an integer of the specified radix or base.</p> + +<p>The <strong><code>Number.parseInt()</code></strong> El método Number.parseInt () analiza un argumento de cadena y devuelve un entero de la raíz o base especificada.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-parseint.html", "taller")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">Number.parseInt(<var>string,</var>[ <var>radix</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<div> +<dl> + <dt><code><var>string</var></code></dt> + <dd>The value to parse. If this argument is not a string, then it is converted to one using the <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> abstract operation. Leading whitespace in this argument is ignored.</dd> + <dt><code><var>radix</var></code><var> {{optional_inline}}</var></dt> + <dd>An integer between <code>2</code> and <code>36</code> that represents the <em>radix</em> (the base in mathematical numeral systems) of the <code><var>string</var></code>. Be careful—this does <strong><em>not</em></strong> default to <code>10</code>!</dd> +</dl> +</div> + +<h3 id="Return_value">Return value</h3> + +<p>An integer parsed from the given <code><var>string</var></code>.</p> + +<p>If the <code><var>radix</var></code> is smaller than <code>2</code> or bigger than <code>36</code>, and the first non-whitespace character cannot be converted to a number, {{jsxref("NaN")}} is returned.</p> + +<h2 id="Description">Description</h2> + +<p>This method has the same functionality as the global {{jsxref("parseInt", "parseInt()")}} function:</p> + +<pre class="brush: js">Number.parseInt === parseInt // true</pre> + +<p>and is part of ECMAScript 2015 (its purpose is modularization of globals). Please see {{jsxref("parseInt", "parseInt()")}} for more detail and examples.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush: js">if (Number.parseInt === undefined) { + Number.parseInt = window.parseInt +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Number.parseInt")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{jsxref("Number")}} object it belongs to.</li> + <li>The global {{jsxref("parseInt", "parseInt()")}} method.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html b/files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html new file mode 100644 index 0000000000..41d101a569 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html @@ -0,0 +1,115 @@ +--- +title: Number.POSITIVE_INFINITY +slug: Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY +--- +<p>{{JSRef("Objetos_globales", "Number")}}</p> +<h2 id="Resumen">Resumen</h2> +<p>La propiedad <code><strong>Number.POSITIVE_INFINITY</strong></code> representa el infinito positivo.</p> +<p>No se tiene que crear un objeto {{jsxref("Number")}} para acceder a esta propiedad estática (use <code>Number.POSITIVE_INFINITY</code>).</p> +<p>{{js_property_attributes(0,0,0)}}</p> +<h2 id="Descripción">Descripción</h2> +<p>El valor de <code>Number.POSITIVE_INFINITY</code> es el mismo valor de la propiedad {{jsxref( "Infinity")}} del objeto global.</p> +<p>Este valor tiene un comportamiento ligeramente diferente al infinio matemático:</p> +<ul> + <li>Cualquier valor positivo, incluyendo <code>POSITIVE_INFINITY</code>, multiplicado por <code>POSITIVE_INFINITY</code> da como resultado <code>POSITIVE_INFINITY</code>.</li> + <li>Cualquier valor negativo, incluyendo <code>NEGATIVE_INFINITY</code>, multiplicado por <code>POSITIVE_INFINITY</code> da como resultado <code>NEGATIVE_INFINITY</code>.</li> + <li>Cero multiplicado por <code>POSITIVE_INFINITY</code> da como resultado NaN.</li> + <li>NaN multiplicado por <code>POSITIVE_INFINITY</code> da como resultado NaN.</li> + <li><code>POSITIVE_INFINITY</code>, dividido por cualquier valor negativo excepto <code>NEGATIVE_INFINITY</code>, da como resultado <code>NEGATIVE_INFINITY</code>.</li> + <li><code>POSITIVE_INFINITY</code>, divido por cualquier valor positivo excepto <code>POSITIVE_INFINITY</code>, da como resultado <code>POSITIVE_INFINITY</code>.</li> + <li><code>POSITIVE_INFINITY</code>, divido por <code>INFINITY</code> o por <code>POSITIVE_INFINITY</code>, da como resultado NaN.</li> + <li>Cualquier numero divido por <code>POSITIVE_INFINITY</code> da como resultado cero.</li> +</ul> +<p>Muchos métodos de JavaScript (tales como el constructor del objeto <code>Number</code>, <code>parseFloat</code> y <code>parseInt</code>) retornan <code>NaN</code> si el valor especificado en el parámetro es signficativamente mayor a <code>Number.MAX_VALUE</code>.</p> +<p>Podrías utilizar la propiedad <code>Number.POSITIVE_INFINITY</code> para indicar una condición de error que retorne un numero finito en caso de que esto suceda. Note, sin embargo, que <code><a href="/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite">isFinite</a></code> seria mas apropiado en estos casos.</p> +<h2 id="Ejemplo">Ejemplo</h2> +<p>En el siguiente ejemplo, a la variable <code>bigNumber </code>se le asigna un valor mucho mayor al valor máximo. Cuando la sentencia <code>if</code> es ejecutada, <code>bigNumber </code>tiene el valor "<code>Infinity</code>", por lo cual a <code>bigNumber</code> le es asignado un valor mas manejable antes de continuar.</p> +<pre class="brush: js">var bigNumber = Number.MAX_VALUE * 2; +if (bigNumber === Number.POSITIVE_INFINITY) { + bigNumber = returnFinite(); +} +</pre> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1st Edition. Implemented in JavaScript 1.1</td> + <td>Estándar</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}}</td> + <td>{{Spec2('ES6')}}</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>Caracteristica</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>(SI)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>Soprote básico</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + <td>(Si)</td> + </tr> + </tbody> + </table> +</div> +<h2 id="See_also" name="See_also">Ver también</h2> +<ul> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("isFinite")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/tofixed/index.html b/files/es/web/javascript/reference/global_objects/number/tofixed/index.html new file mode 100644 index 0000000000..f11ccc3938 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/tofixed/index.html @@ -0,0 +1,147 @@ +--- +title: Number.prototype.toFixed() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/toFixed +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toFixed()</code></strong> formatea un número usando notación de punto fijo.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.toFixed([<var>digitos</var>])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>digitos</code></dt> + <dd>Opcional. El número de digitos que aparecen después del punto decimal; este puede ser un valor entre 0 y 20, inclusive, algunas implementaciones pueden soportar un rango más amplio de valores. Si el argumento es omitido, es tratado como 0.</dd> +</dl> + +<h3 id="Valor_Devuelto">Valor Devuelto</h3> + +<p>Una cadena que representa el número dado, usando notación de punto fijo.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Si <code>digits</code> es demasiado pequeño o demasiado grande. Los valores entre 0 y 20, inclusive, no causarán un error tipo<code> {{jsxref("RangeError")}}</code>. Las implementaciones también pueden admitir valores cada vez más grandes.</dd> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Si este método se invoca en un objeto que no es un {{jsxref("Number")}}.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><strong><code>toFixed()</code></strong> devuelve una representación de cadena de <code> numObj </code> que no usa notación exponencial y tiene exactamente <code> dígitos </code> dígitos después del decimal. El número se redondea si es necesario, y la parte fraccional se rellena con ceros si es necesario para que tenga la longitud especificada.Si <code>numObj</code> es mayor que <code>1e+21</code>, este metodo llama a {{jsxref("Number.prototype.toString()")}} y retorna una cadena de notacion exponencial.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_toFixed">Using <code>toFixed</code></h3> + +<pre class="brush: js">var numObj = 12345.6789; + +numObj.toFixed(); // Returns '12346': note rounding, no fractional part +numObj.toFixed(1); // Returns '12345.7': note rounding +numObj.toFixed(6); // Returns '12345.678900': note added zeros +(1.23e+20).toFixed(2); // Returns '123000000000000000000.00' +(1.23e-10).toFixed(2); // Returns '0.00' +2.34.toFixed(1); // Returns '2.3' +2.35.toFixed(1); // Returns '2.4'. Note that it rounds up in this case. +-2.34.toFixed(1); // Returns -2.3 (due to operator precedence, negative number literals don't return a string...) +(-2.34).toFixed(1); // Returns '-2.3' (...unless you use parentheses) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html new file mode 100644 index 0000000000..d0c28b1431 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html @@ -0,0 +1,155 @@ +--- +title: Number.prototype.toLocaleString() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString +tags: + - Internacionalizacion + - JavaScript + - Número +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toLocaleString()</code></strong> retorna una representacion localizada del número en forma de texto</p> + +<div>{{EmbedInteractiveExample("pages/js/number-tolocalestring.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox notranslate"><code><em>numObj</em>.toLocaleString(</code><code>[locales [, options]])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<p>Los argumentos <code>locales</code> y <code>options</code> personalizan el comportamiento de la funcion y permite especificar el lenguaje cuyo formato deberá ser utilizado. En implementaciones, que ignoran los argumentos <code>locales</code> y <code>options</code> la localización utilizada y la forma del texto retornado es enteramente dependiente de la implementación.</p> + +<div>Mira el <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat">constructor Intl.NumberFormat()</a> para ver más detalles sobre los parámetros y como se utilizan.</div> + +<div></div> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un texto con una representación localizada del número dado.</p> + +<h2 id="Performance">Performance</h2> + +<p>Cuando formateas una gran cantidad de números, es mejor crear un objeto {{jsxref("NumberFormat")}} y utilizar la función {{jsxref("NumberFormat.format")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toLocaleString">Usando <code>toLocaleString</code></h3> + +<p>Un uso básico sin especificar <code>locales</code>, retorna un texto formateado con el <code>locales</code> y <code>options</code> por defecto.</p> + +<pre class="brush: js notranslate">var number = 3500; + +console.log(number.toLocaleString()); // Muestra "3,500" si se está utilizando la localización U.S. English +</pre> + +<h3 id="Verificando_el_soporte_de_los_parámetros_locales_y_options">Verificando el soporte de los parámetros <code>locales</code> y <code>options</code></h3> + +<p>Los parámetros <code>locales</code> y <code>options</code> no son soportados aún por todos los navegadores. Para verificar el soporte en ES5.1 y posteriores implementaciones, se puede utilizar el hecho que los tags inválidos en la localización son rechazados con una excepción {{jsxref("Global_Objects/RangeError", "RangeError")}}:</p> + +<pre class="brush: js notranslate">function toLocaleStringSupportsLocales() { + var number = 0; + try { + number.toLocaleString('i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<p>Antes de ES5.1, las implementaciones no requieren devolver una exepción {{jsxref("Global_Objects/RangeError", "RangeError")}} cuando <code>toLocaleString </code>es llamado sin argumentos.</p> + +<p>Para verificar que funciona todos los navegadores, incluyendo aquellos que soportan ECMA-262, anterior a ES5.1, se puede verificar por las funcionalidades especificadas en ECMA-402 que requieren soportar opciones regionales para <code>Number.prototype.toLocaleString</code> directamente:</p> + +<pre class="brush: js notranslate">function toLocaleStringSupportsOptions() { + return !!(typeof Intl == 'object' && Intl && typeof Intl.NumberFormat == 'function'); +} +</pre> + +<p>Esta validación del objeto global <code>Intl</code> , verificar que no es <code>null</code> (nulo) y que tiene la propiedad <code>NumberFormat</code> que es una función.</p> + +<h3 id="Utilizando_locales">Utilizando <code>locales</code></h3> + +<p>Este ejemplo muestra alguna de las variaciones en los formatos de números localizados. Para obtener el formato de la localización utilizada en la interfaz del usuario de tu aplicación, asegurate de especificar la localización (y de ser posible alguna localización de respaldo) utilizando el parámetro <code>locales</code>:</p> + +<pre class="brush: js notranslate">var number = 123456.789; + +// Aleman utiliza comas como separador decimal y puntos miles +console.log(number.toLocaleString('de-DE')); +// → 123.456,789 + +// Arabe en la mayoría de países de habla Arabe utilizan numerales <a href="https://en.wikipedia.org/wiki/Eastern_Arabic_numerals">Eastern Arabic</a> +console.log(number.toLocaleString('ar-EG')); +// → ١٢٣٤٥٦٫٧٨٩ + +// India utiliza separadores de miles/lakh/crore +console.log(number.toLocaleString('en-IN')); +// → 1,23,456.789 + +// la extensión nu requiere un sistema numerico, e.g. Decimales Chino +console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec')); +// → 一二三,四五六.七八九 + +// cuando solicitas un lenguage que podria no ser soportado, como +// Balinese, incluye un lenguaje de respaldo, en este caso Indonesio +console.log(number.toLocaleString(['ban', 'id'])); +// → 123.456,789 +</pre> + +<h3 id="Utilizando_options">Utilizando <code>options</code></h3> + +<p>El resultado proveido por <code>toLocaleString</code> puede ser personalizado utilizando el parámetro <code>options</code> :</p> + +<pre class="brush: js notranslate">var number = 123456.789; + +// solicitar un formato de moneda +console.log(number.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); +// → 123.456,79 € + +// en Japones yen no utiliza una moneda menor +console.log(number.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) +// → ¥123,457 + +// limitar a tres digitos el significante +console.log(number.toLocaleString('en-IN', { maximumSignificantDigits: 3 })); +// → 1,23,000 + +// Utilizar el lenguaje por defecto del host con opciones para el formato del número +var num = 30000.65; +console.log(num.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})); +// → "30,000.65" donde English es el lenguaje por defecto, o +// → "30.000,65" donde Aleman es el lenguaje por defecto, o +// → "30 000,65" donde French es el lenguaje por defecto +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.toLocaleString")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/toprecision/index.html b/files/es/web/javascript/reference/global_objects/number/toprecision/index.html new file mode 100644 index 0000000000..7a5110d7a9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/toprecision/index.html @@ -0,0 +1,102 @@ +--- +title: Number.prototype.toPrecision() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toPrecision +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toPrecision()</code></strong> devuelve una cadena que representa un objeto {{jsxref("Number")}} según la precisión especificada.</p> + +<div>{{EmbedInteractiveExample("pages/js/number-toprecision.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>numObj</var>.toPrecision([<var>precision</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>precision</code></dt> + <dd>Opcional. Un entero que especifica el número de digitos significativos.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena que representa un objeto {{jsxref("Number")}} en punto fijo o en notación exponencial redondeada a <code>precision</code> de digitos significativos. Vea la discusión acerca del redondeo en la descripción del método {{jsxref("Number.prototype.toFixed()")}} , que además aplica a <code>toPrecision()</code>.</p> + +<p>Si el parámetro <code>precision</code> es omitido, se comporta como {{jsxref("Number.prototype.toString()")}}. Si el parámetro <code>precision</code> es un valor no entero, el valor es redondeado al entero más cercano.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt> + <dd>If <code>precision</code> is not between 1 and 100 (inclusive), a {{jsxref("RangeError")}} is thrown. Implementations are allowed to support larger and smaller values as well. ECMA-262 only requires a precision of up to 21 significant digits.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toPrecision">Usando <code>toPrecision</code></h3> + +<pre class="brush: js">var numObj = 5.123456; + +console.log(numObj.toPrecision()); // logs '5.123456' +console.log(numObj.toPrecision(5)); // logs '5.1235' +console.log(numObj.toPrecision(2)); // logs '5.1' +console.log(numObj.toPrecision(1)); // logs '5' + +numObj = 0.000123 + +console.log(numObj.toPrecision()); // logs '0.000123' +console.log(numObj.toPrecision(5)); // logs '0.00012300' +console.log(numObj.toPrecision(2)); // logs '0.00012' +console.log(numObj.toPrecision(1)); // logs '0.0001' + +// observe que bajo algunas circunstancias el valor retornado es en notación exponencial +console.log((1234.5).toPrecision(2)); // logs '1.2e+3' +</pre> + +<h2 id="Especificaciónes">Especificaciónes</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Primera definición. Implementada en JavaScript 1.5.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.Number.toPrecision")}}</p> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/tostring/index.html b/files/es/web/javascript/reference/global_objects/number/tostring/index.html new file mode 100644 index 0000000000..f911fa271e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/tostring/index.html @@ -0,0 +1,63 @@ +--- +title: Number.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/toString +tags: + - JavaScript + - Method + - Number + - Prototype + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Number/toString +--- +<div>{{JSRef("Objetos_globales", "Number")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Devuelve una cadena que representa al objeto <em>Number</em> especificado</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code><em>number</em> .toString( {{ mediawiki.external('<em>base</em> ') }} )</code></p> + +<h3 id="Par.C3.A1metro" name="Par.C3.A1metro">Parámetro</h3> + +<dl> + <dt>base</dt> + <dd>Un entero entre 2 y 36 especificando la base a usar para representar los valores numéricos.</dd> +</dl> + +<h3 id="Devuelve" name="Devuelve">Devuelve</h3> + +<p>Una cadena que representa al objeto.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>El objeto <code>Number</code> sobreescribe el método <code>toString</code> y no lo hereda del objeto {{jsxref("Object")}}; por tanto no hereda {{jsxref("Object.prototype.toString()")}}. Para objetos <code>Number</code>, el método <code>toString</code> devuelve una cadena que representa al objeto en la base especificada.</p> + +<p>El método toString comprueba su primer argumento, e intenta devolver una cadena de representación en la base especificada. Para bases superiores a 10, las letras del alfabeto indican numerales mayores de 9. Por ejemplo, para números hexadecimales (base 16), se utiliza de A hasta F.</p> + +<p>Si no se da a toString una base entre 2 y 36, se lanza una excepción.</p> + +<p>Si no se especifica la base, JavaScript asume la base predefinida, que es 10.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var howMany = 10; + +alert("howMany.toString() is " + howMany.toString()); // displays "10" + +alert("45 .toString() is " + 45 .toString()); //displays "45" + +var x = 7; +alert(x.toString(2)) // Displays "111" +</pre> + + + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/number/valueof/index.html b/files/es/web/javascript/reference/global_objects/number/valueof/index.html new file mode 100644 index 0000000000..588c421746 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/number/valueof/index.html @@ -0,0 +1,81 @@ +--- +title: Number.prototype.valueOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Number/valueOf +tags: + - JavaScript + - Métodos + - Number + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Number/valueOf +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>valueOf()</code></strong> retorna el valor primitivo inserto en un objeto {{jsxref("Number")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>numObj</var>.valueOf()</code></pre> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Un número representando al valor primitivo del objeto {{jsxref("Number")}} especificado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Este método es usualmente llamado de forma interna por JavaScript y no es explicitado en el código web.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_valueOf">Utilizando <code>valueOf</code></h3> + +<pre class="brush: js">var numObj = new Number(10); +console.log(typeof numObj); // objeto + +var num = numObj.valueOf(); +console.log(num); // 10 +console.log(typeof num); // número +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegador">Compatibilidad con navegador</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si deseas contribuir con los datos, por favor, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud.</p> + +<p>{{Compat("javascript.builtins.Number.valueOf")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Number.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html new file mode 100644 index 0000000000..fceb708912 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html @@ -0,0 +1,144 @@ +--- +title: Object.prototype.__defineGetter__() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__ +tags: + - JavaScript + - Objeto + - Prototipo + - Prototype + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ +--- +<div>{{JSRef}}</div> + +<div class="warning"> +<p>Esta característica está obsoleta en favor de definir getters usando el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer syntax</a> o la API {{jsxref("Object.defineProperty()")}}.</p> + +<p>En todo caso, como es ampliamente implementada y usada en la Web, es poco probable que los navegadores dejen de implementarla.</p> +</div> + +<p>El método <code><strong>__defineGetter__</strong></code> enlaza una propiedad de un objeto a una función a ser llamada cuando esa propiedad es buscada.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Un texto (string) que contiene el nombre de la propiedad para enlazar la función dada.</dd> + <dt><code>func</code></dt> + <dd>A function to be bound to a lookup of the specified property.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>The <code>__defineGetter__</code> allows a {{jsxref("Operators/get", "getter", "", 1)}} to be defined on a pre-existing object.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Forma no-estándar y obsoleta + +var o = {}; +o.__defineGetter__('gimmeFive', function() { return 5; }); +console.log(o.gimmeFive); // 5 + + +// Formas compatibles con el estándar + +// Usando el operador get +var o = { get gimmeFive() { return 5; } }; +console.log(o.gimmeFive); // 5 + +// Usando Object.defineProperty +var o = {}; +Object.defineProperty(o, 'gimmeFive', { + get: function() { + return 5; + } +}); +console.log(o.gimmeFive); // 5 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('JavaScript', '#object.prototype.__definegetter__', 'Object.prototype.__defineGetter__()')}}</td> + <td>{{Spec2('JavaScript')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li>{{jsxref("Operators/get", "get")}} operator</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li> + <li><a href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> + <li>{{bug(647423)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html b/files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..8292222a38 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html @@ -0,0 +1,84 @@ +--- +title: Object.prototype.__lookupGetter__() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__ +translation_of: Web/JavaScript/Reference/Global_Objects/Object/__lookupGetter__ +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>Los <code><strong>__lookupGetter__</strong></code> metodos retornan la funcion enlazada como un getter para especificar la propiedad.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__lookupGetter__(<var>sprop</var>)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>sprop</code></dt> + <dd>A string containing the name of the property whose getter should be returned.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The function bound as a getter to the specified property.</p> + +<h2 id="Description">Description</h2> + +<p>If a getter has been defined for an object's property, it's not possible to reference the getter function through that property, because that property refers to the return value of that function. <code>__lookupGetter__</code> can be used to obtain a reference to the getter function.</p> + +<p>It is now possible to do this in a standardized way using {{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var obj = { + get foo() { + return Math.random() > 0.5 ? 'foo' : 'bar'; + } +}; + + +// Non-standard and deprecated way +obj.__lookupGetter__('foo'); +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) + + +// Standard-compliant way +Object.getOwnPropertyDescriptor(obj, "foo").get; +// (function() { return Math.random() > 0.5 ? 'foo' : 'bar'; }) +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.__lookupGetter__', 'Object.prototype.__lookupGetter__()')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.lookupGetter")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> + <li>{{jsxref("Functions/get", "get")}} operator</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__defineGetter__()")}}</li> + <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/assign/index.html b/files/es/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..17de417d75 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,274 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Objeto + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Object.assign()</code></strong> copia todas las propiedades enumerables de uno o más objetos fuente a un objeto destino. Devuelve el objeto destino. </p> + +<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Object.assign(<var>objetivo</var>, ...<var>fuentes</var>)</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>objetivo</code></dt> + <dd>El objeto destino.</dd> + <dt><code>fuentes</code></dt> + <dd>Los objetos origen.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El objeto destino.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Las propiedades en el objeto destino serán sobrescritas por las propiedades en las fuentes si tienen la misma clave. Propiedades posteriores de las fuentes podrán sobrescribir las anteriores.</p> + +<p>El método <code>Object.assign()</code> copia sólo las propiedades <em>enumerables</em> y <em>propias</em> del objeto origen a un objeto destino. Usa <code>[[Get]]</code> en la origen y <code>[[Set]] </code>en el destino, por lo que invocará los métodos de acceso y establecimiento (<em>getters</em> y <em>setters</em>). Por consiguiente <em>asignará</em> propiedades frente a sólo copiar o definir propiedades nuevas. Esto puede hacer que sea inadecuado para fusionar propiedades nuevas en un prototipo si los objetos fuente contienen métodos de acceso (<em>getters</em>). Para copiar definiciones de propiedades en prototipos, incluyendo su enumerabilidad, se deben usar {{jsxref("Object.getOwnPropertyDescriptor()")}} y {{jsxref("Object.defineProperty()")}}.</p> + +<p>Tanto las propiedades {{jsxref("String")}} como {{jsxref("Symbol")}} son copiadas.</p> + +<p>En caso de un error, por ejemplo si una propiedad es de solo lectura, se lanza un {{jsxref("TypeError")}}, y el objeto destino se mantendrá sin cambios.</p> + +<p>Note que <code>Object.assign()</code> no lanza excepciones al encontrar en las fuentes propiedades {{jsxref("null")}} o {{jsxref("undefined")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Clonando_un_objeto">Clonando un objeto</h3> + +<pre class="brush: js">var obj = { a: 1 }; +var copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Advertencia_para_clonado_profundo">Advertencia para clonado profundo</h3> + +<p>Para un clonado profundo, necesitamos usar otra alternativa ya que <code>Object.assign()</code> copia valores de propiedades. Si el valor en la fuente es una referencia a un objeto, solo se copia la referencia en sí, como valor de la propiedad.</p> + +<pre class="brush: js">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}} + console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { a: 0, b: { c: 0}} +} + +test();</pre> + +<h3 id="Fusionando_objetos">Fusionando objetos</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { b: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.</pre> + +<h3 id="Fusionando_objetos_con_las_mismas_propiedades">Fusionando objetos con las mismas propiedades</h3> + +<pre class="brush: js">var o1 = { a: 1, b: 1, c: 1 }; +var o2 = { b: 2, c: 2 }; +var o3 = { c: 3 }; + +var obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>Las propiedades también son sobreescritas por otros objetos que aparecen posteriormente en la lista de parámetros y que tienen propiedades con el mismo nombre.</p> + +<h3 id="Copiando_propiedades_de_tipo_símbolo">Copiando propiedades de tipo símbolo</h3> + +<pre class="brush: js">var o1 = { a: 1 }; +var o2 = { [Symbol('foo')]: 2 }; + +var obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Las_propiedades_heredadas_y_las_no_enumerables_no_pueden_ser_copiadas">Las propiedades heredadas y las no enumerables no pueden ser copiadas</h3> + +<pre class="brush: js">var obj = Object.create({ foo: 1 }, { // foo es una propiedad heredada. + bar: { + value: 2 // bar es una propiedad no enumerable. + }, + baz: { + value: 3, + enumerable: true // baz es una propiedad propia enumerable. + } +}); + +var copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Los_tipos_primitivos_serán_encapsulados_en_objetos">Los tipos primitivos serán encapsulados en objetos</h3> + +<pre class="brush: js">var v1 = 'abc'; +var v2 = true; +var v3 = 10; +var v4 = Symbol('foo') + +var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Los tipos primitivos son encapsulados en objetos y se ignoran las propiedades con valor null o undefined. +// Nótese que sólo los wrappers de cadenas tienen propiedades enumerables: +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Las_excepciones_interrumpen_la_tarea_de_copiado">Las excepciones interrumpen la tarea de copiado</h3> + +<pre class="brush: js">var target = Object.defineProperty({}, 'foo', { + value: 1, + writeable: false +}); // target.foo es una propiedad de sólo lectura + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" es de sólo lectura +// La excepción se lanza cuando se intenta asignar un valor a target.foo + +console.log(target.bar); // 2, la primera fuente fue copiada. +console.log(target.foo2); // 3, la primera propiedad del segundo objeto fuente se copió correctamente. +console.log(target.foo); // 1, se lanza la excepción. +console.log(target.foo3); // undefined, el método assign ha finalizado, no se copiará foo3. +console.log(target.baz); // undefined, tampoco se copiará el tercer objecto fuente. +</pre> + +<h3 id="Copiando_métodos_de_acceso">Copiando métodos de acceso</h3> + +<pre class="brush: js">var obj = { + foo: 1, + get bar() { + return 2; + } +}; + +var copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 }, the value of copy.bar is obj.bar's getter's return value. + +// This is an assign function that copies full descriptors +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + // by default, Object.assign copies enumerable Symbols too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +var copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Este {{Glossary("Polyfill","polyfill")}} no soporta propiedades símbolo, ya que ES5 no tiene símbolos.</p> + +<pre class="brush: js">if (typeof Object.assign != 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target == null) { // TypeError if undefined or null + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource != null) { // Skip over if undefined or null + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: 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('ES2015', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<p>{{Compat("javascript.builtins.Object.assign")}}</p> +</div> + +<h2 id="Ver_también" name="Ver también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/es/docs/Web/JavaScript/enumeracion_y_propietario_de_propiedades">Enumeración y propietarios de propiedades</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread#Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/constructor/index.html b/files/es/web/javascript/reference/global_objects/object/constructor/index.html new file mode 100644 index 0000000000..3871c41fe3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/constructor/index.html @@ -0,0 +1,161 @@ +--- +title: Object.prototype.constructor +slug: Web/JavaScript/Referencia/Objetos_globales/Object/constructor +tags: + - JavaScript + - Object + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/constructor +--- +<div>{{JSRef("Objetos_globales", "Object")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>Retorna una referencia a la función del {{jsxref("Object")}} que creó el objeto de la instancia. Note que el valor de esta propiedad es una referencia a la función misma, no a un string conteniendo el nombre de la función. El valor es sólo de lectura para valores primitivos tales como 1, true y 'test'.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Todos los objetos tienen una propiedad <code>constructor.</code> Los objetos creados sin explicitar el uso de una función (como son los objetos y las cadenas literales) tendrán una propiedad de <code>constructor</code> que apunta al tipo de constructor del Objeto Fundamento para ese objeto.</p> + +<pre class="brush:js">var o = {}; +o.constructor === Object; // true + +var a = []; +a.constructor === Array; // true + +var n = new Number(3); +n.constructor === Number; // true</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Displaying_the_constructor_of_an_object" name="Example:_Displaying_the_constructor_of_an_object">Ejemplo: Mostrando el constructor de un objeto.</h3> + +<p>El siguiente ejemplo crea un prototipo, <code>Tree</code>, y un objeto de este tipo, <code>theTree</code>. El ejemplo muestra entonces la propiedad <code>constructor</code> para el objeto <code>theTree</code>.</p> + +<pre class="brush:js">function Tree (name) { + this.name = name; +} + +var theTree = new Tree( "Redwood" ); +console.log( "theTree.constructor is " + theTree.constructor );</pre> + +<p>Este ejemplo muestra la siguiente salida:</p> + +<pre class="brush:js">theTree.constructor is function Tree (name) { + this.name = name; +}</pre> + +<h3 id="Example:_Changing_the_constructor_of_an_object" name="Example:_Changing_the_constructor_of_an_object">Ejemplo: Cambiando el constructor de un objeto.</h3> + +<p>El siguiente ejemplo demuestra como modificar el valor del constructor de objetos genéricos. Solo <code>true</code>, <code>1</code> y <code>"test"</code> no serán afectados ya que ellos tienen constructores nativos de solo lectura. Este ejemplo demuestra que no siempre es seguro confiar en la propiedad constructor de un objeto.</p> + +<pre class="brush:js">function Type () {} + +var types = [ + new Array(), + [], + new Boolean(), + true, // no cambia +<span style="line-height: normal;"> </span>new Date(), +<span style="line-height: normal;"> </span>new Error(), +<span style="line-height: normal;"> </span>new Function(), + function () {}, +<span style="line-height: normal;"> </span>Math, +<span style="line-height: normal;"> </span>new Number(), + 1, // no cambia +<span style="line-height: normal;"> </span>new Object(), + {}, +<span style="line-height: normal;"> </span>new RegExp(), + /(?:)/, +<span style="line-height: normal;"> </span>new String(), + "test" // no cambia +]; + +for( var i = 0; i < types.length; i++ ) { + types[i].constructor = Type; + types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ]; +} + +console.log( types.join( "\n" ) );</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1ra. Edición. Implementado en JavaScript 1.1</td> + <td>Estandar.</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.1', 'Objectprototype.constructor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}}</td> + <td>{{Spec2('ES6')}}</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</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> + +<p> </p> diff --git a/files/es/web/javascript/reference/global_objects/object/create/index.html b/files/es/web/javascript/reference/global_objects/object/create/index.html new file mode 100644 index 0000000000..94608d1c58 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/create/index.html @@ -0,0 +1,377 @@ +--- +title: Object.create() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/create +tags: + - ECMAScript5 + - JavaScript + - 'Null' + - Objeto + - Referencia + - metodo + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Object/create +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.create()</strong></code> crea un objeto nuevo, utilizando un objeto existente como el prototipo del nuevo objeto creado.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-create.html")}}</div> + +<div></div> + +<div>La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción (pull request).</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">Object.create(<var>proto</var>[, <var>propertiesObject</var>])</pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><em>proto</em></dt> + <dd>Objeto el cual debe ser el prototipo del nuevo objeto creado.</dd> + <dt><em>propertiesObject</em></dt> + <dd>Opcional. Si se especifica y no es {{jsxref("undefined")}}, un objeto cuyas propiedades enumerables propias (es decir, aquellas propiedades definidas sobre si mismo y <em>no</em> son propiedades enumerable a lo largo de su cadena de prototipos) espefica descriptores de propiedad para ser agregadas al objeto recien creado, con los nombres de propiedad correspondiente. Estas propiedades corresponden al segundo argumento de {{jsxref("Object.defineProperties")}}.</dd> +</dl> + +<h3 id="Description" name="Description">Valor devuelto</h3> + +<p>Un nuevo objeto con el prototipo y propiedades del objeto especificado.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<p>Una excepción {{jsxref("TypeError")}} si el parámetro <code>propertiesObject</code> es {{jsxref("null")}} o un objeto envolvente no primitivo.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Herencia_clásica_con_Object.create">Herencia clásica con <code>Object.create()</code></h3> + +<p>Debajo se encuentra un ejemplo de cómo usar <code>Object.create()</code> para lograr herencia clásica. Este es para herencia simple, la cual es todo lo que soporta JavaScript.</p> + +<pre class="brush: js notranslate">// Shape - superclase +function Shape() { + this.x = 0; + this.y = 0; +} + +// método de la superclase +Shape.prototype.move = function(x, y) { + this.x += x; + this.y += y; + console.info("Shape moved."); +}; + +// Rectangle - subclase +function Rectangle() { + Shape.call(this); // llama al contructor de la superclase. +} + +// subclase extiende superclase +Rectangle.prototype = Object.create(Shape.prototype); +Rectangle.prototype.constructor = Rectangle; + +var rect = new Rectangle(); + +console.log('¿Es rect una instancia de Rectangle?', + rect instanceof Rectangle); // true +console.log('¿Es rect una instancia de Shape?', + rect instanceof Shape); // true +rect.move(1, 1); // Imprime, 'Shape moved.' +</pre> + +<p>Si desea heredar desde múltiples objetos, entonces los mixins son una posibilidad.</p> + +<pre class="brush: js notranslate">function MyClass() { + SuperClass.call(this); + OtherSuperClass.call(this); +} + +// inherit one class +MyClass.prototype = Object.create(SuperClass.prototype); +// mixin another +Object.assign(MyClass.prototype, OtherSuperClass.prototype); +// re-assign constructor +MyClass.prototype.constructor = MyClass; + +MyClass.prototype.myMethod = function() { + // do something +}; +</pre> + +<p>{{jsxref("Object.assign()")}} copia las propiedades del prototipo <em>OtherSuperClass</em> al prototipo de <em>MyClass</em>, haciéndolas disponibles en todas las instancias de <em>MyClass</em>. <code>Object.assign()</code> se introdujo con ES2015 y <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/assign#Polyfill">tiene polyfill</a>. Si el soporte para navegadores antiguos es necesario, se puede utilizar <code><a href="https://api.jquery.com/jQuery.extend/">jQuery.extend()</a></code> o <code><a href="https://lodash.com/docs/#assign">_.assign()</a></code>.</p> + +<h3 id="Usando_el_argumento_propertiesObject_con_Object.create">Usando el argumento <code>propertiesObject</code> con <code>Object.create()</code></h3> + +<pre class="brush: js notranslate">var o; + +// crea un objeto con un prototipo como null +o = Object.create(null); + + +o = {}; +// esto equivale a: +o = Object.create(Object.prototype); + + +// Ejemplo en donde creamos un objeto con un par de propiedades de ejemplo. +// (Note que el segundo parámetro mapea claves para los *descriptores de propiedad*.) +o = Object.create(Object.prototype, { + // foo es un habitual "propiedad de valor" + foo: { writable:true, configurable:true, value: "hello" }, + // bar es una propiedad getter-and-setter (de acceso) + bar: { + configurable: false, + get: function() { return 10 }, + set: function(value) { console.log("Setting `o.bar` to", value) } +}}); + + +function Constructor(){} +o = new Constructor(); +// es equivalente a: +o = Object.create(Constructor.prototype); +// Por supuesto, si hay un código de inicialización en la +// función Constructor, el Object.create no puede reflejar esta. + + +// crear un nuevo objeto cuyo prototipo es un nuevo, objeto vacío +// y agregar una única propiedad 'p', con el valor 42 +o = Object.create({}, { p: { value: 42 } }) + +// por defecto las propiedades NO SON editables, enumerables o configurables: +o.p = 24 +o.p +// 42 + +o.q = 12 +for (var prop in o) { + console.log(prop) +} +// "q" + +delete o.p +// false + +// <span style="font-size: 1rem;">para especificar una propiedad en ES3</span> + +o2 = Object.create({}, { p: { + value: 42, + writable: true, + enumerable: true, + configurable: true } +}); +</pre> + +<h2 id="Objetos_personalizados_y_nulos">Objetos personalizados y nulos</h2> + +<p>Un objeto nuevo creado de un objeto completamente personalizado (especialmente uno creado de un objeto nulo, que es básicamente un objeto personalizado sin miembros) puede comportarse de manera inesperada. Esto es especialmente cierto cuando se depura, ya que las funciones comunes de conversión/detección de propiedad de objeto pueden generar errores, o simplemente perder información (especialmente si se atrapan excepciones de manera silenciosa que ignoran los errores). Por ejemplo, aquí hay dos objetos:</p> + +<pre class="brush: js notranslate">oco = Object.create( {} ); // Crea un objeto normal +ocn = Object.create( null ); // Crea un objeto "null" + +> console.log(oco) // {} -- Parece normal +> console.log(ocn) // {} -- Parece normal aquí también, hasta este momento + +oco.p = 1; // Crea una propiedad simple en un objeto normal +ocn.p = 0; // Crea una propiedad simple en un objeto "null" + +> console.log(oco) // {p: 1} -- Todavía parece normal +> console.log(ocn) // {p: 0} --Todavía parece normal aquí también. PERO ESPERA... +</pre> + +<p>Como se muestra arriba, todo parece normal hasta ahora. Sin embargo, al intentar usar estos objetos, sus diferencias se hacen evidentes rápidamente:</p> + +<pre class="brush: js notranslate">> "oco is: " + oco // Muestra "ocn is: [object Object]" + +> "ocn is: " + ocn // Arroja error: Cannot convert object to primitive value +</pre> + +<p>Probar solo algunas de las funciones incorporadas más básicas muestra la magnitud del problema más claramente:</p> + +<pre class="brush: js notranslate">> alert(oco) // Muestra: [object Object] +> alert(ocn) // Arroja error: Cannot convert object to primitive value + +> oco.toString() // Muestra [object Object] +> ocn.toString() // Arroja error: ocn.toString is not a function + +> oco.valueOf() // Muestra{} +> ocn.valueOf() // Arroja error: ocn.valueOf is not a function + +> oco.hasOwnProperty("p") // Muestra "true" +> ocn.hasOwnProperty("p") // Arroja error: ocn.hasOwnProperty is not a function + +> oco.constructor // Muestra "Object() { [native code] }" +> ocn.constructor // Muestra "undefined" +</pre> + +<p>Como se dijo, estas diferencias pueden hacer que la depuración e incluso problemas aparentemente simples se pierdan rápidamente. Por ejemplo:</p> + +<p><em>Una función simple de depuración:</em></p> + +<pre class="brush: js notranslate">// mostrar nombre de propiedad de nivel superior: pares de valores de un objeto dado +function ShowProperties( b ){ + for( var i in b ){ console.log( i + ": " + b[i] + "\n" ) } +}</pre> + +<p><em>Resultados no tan simples: (especialmente si la captura silenciosa de errores había ocultado los mensajes de error)</em></p> + +<pre class="brush: js notranslate">ob={}; ob.po=oco; ob.pn=ocn; // crear un objeto compuesto usando los objetos de prueba de arriba como valores de propiedad + +> ShowProperties( ob ) // Muestra propiedades de nivel superior +- po: [object Object] +- Error: Cannot convert object to primitive value + +Tenga en cuenta que solo se muestra la primera propiedad. +</pre> + +<p><em>(Pero si se crea el mismo objeto simplemente en un orden diferente, al menos en algunas implementaciones ...)</em></p> + +<pre class="brush: js notranslate">ob={}; ob.pn=ocn; ob.po=oco; // cree el mismo objeto compuesto nuevamente, pero cree las mismas propiedades en un orden diferente + +> ShowProperties( ob ) // Muestra propiedades de nivel superior +- Error: Cannot convert object to primitive value + +Tenga en cuenta que ninguna propiedad se muestra.</pre> + +<p>Tenga en cuenta que un orden tan diferente puede surgir estáticamente a través de codificaciones fijas dispares, como aquí, pero también dinámicamente a través del orden en que se ejecutan dichas ramas de código de adición de propiedades en tiempo de ejecución, ya que depende de entradas y / o variables aleatorias. Por otra parte, el orden de iteración real no está garantizado, independientemente de cómo son agregados los miembros.</p> + +<h4 id="Algunas_NO-soluciones">Algunas NO-soluciones</h4> + +<p>A good solution for the missing object-methods is not immediately apparent.</p> + +<p>Adding the missing object-method directly from the standard-object does NOT work:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.toString = Object.toString; // since new object lacks method then try assigning it directly from standard-object + +<span style="">> ocn.toString // shows "toString() { [native code] }" -- missing method seems to be there now</span> +> ocn.toString == Object.toString // shows "true" -- method seems to be same as the standard object-method + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<p><br> + Adding the missing object-method directly to new object's "prototype" does not work either, since new object does not have a real prototype (which is really the cause of ALL these problems) and one cannot be <strong>directly</strong> added:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.prototype.toString = Object.toString; // Error: Cannot set property 'toString' of undefined + +ocn.prototype = {}; // try to create a prototype +ocn.prototype.toString = Object.toString; // since new object lacks method then try assigning it from standard-object <span style=""> + +> ocn.toString() // error: ocn.toString is not a function</span> +</pre> + +<p><br> + Adding the missing object-method by using the standard-object<strong> </strong>as new object's prototype does not work either:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) +Object.setPrototypeOf(ocn, Object); // set new object's prototype to the standard-object + +> ocn.toString() // error: Function.prototype.toString requires that 'this' be a Function +</pre> + +<h4 id="Algunas_soluciones_aceptables">Algunas soluciones aceptables</h4> + +<p>Again, adding the missing object-method directly from the <strong>standard-object </strong>does NOT work. However, adding the <strong>generic</strong> method directly, DOES:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) + +ocn.toString = toString; // since new object lacks method then assign it directly from generic version + +> ocn.toString() // shows "[object Object]" +> "ocn is: " + ocn // shows "ocn is: [object Object]" + + +ob={}; ob.pn=ocn; ob.po=oco; // create a compound object (same as before) + +> ShowProperties(ob) // display top-level properties +- po: [object Object] +- pn: [object Object] +</pre> + +<p>However, setting the generic <strong>prototype</strong> as the new object's prototype works even better:</p> + +<pre class="brush: js notranslate">ocn = Object.create( null ); // create "null" object (same as before) +Object.setPrototypeOf(ocn, Object.prototype); // set new object's prototype to the "generic" object (NOT standard-object) +</pre> + +<p><em>(In addition to all the string-related functions shown above, this also adds:)</em></p> + +<pre class="brush: js notranslate">> ocn.valueOf() // shows {} +> ocn.hasOwnProperty("x") // shows "false" +> ocn.constructor // shows "Object() { [native code] }" + +// ...and all the rest of the properties and methods of Object.prototype. +</pre> + +<p>As shown, objects modified this way now look very much like ordinary objects.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este polyfill cubre el caso de uso principal el cual es la creación de un nuevo objeto para el prototipo que ha sido escogido pero no toma el segundo argumento en cuenta.</p> + +<p>Note that while the setting of <code>null</code> as <code>[[Prototype]]</code> is supported in the real ES5 <code>Object.create</code>, this polyfill cannot support it due to a limitation inherent in versions of ECMAScript lower than 5.</p> + +<pre class="brush: js notranslate"> if (typeof Object.create !== "function") { + Object.create = function (proto, propertiesObject) { + if (typeof proto !== 'object' && typeof proto !== 'function') { + throw new TypeError('Object prototype may only be an Object: ' + proto); + } else if (proto === null) { + throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument."); + } + + if (typeof propertiesObject != 'undefined') { + throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument."); + } + + function F() {} + F.prototype = proto; + + return new F(); + }; +} +</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('ES5.1', '#sec-15.2.3.5', 'Object.create')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.create', 'Object.create')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Object.create")}}</div> + +<h2 id="Ver_tambien" name="Ver_tambien">Ver también</h2> + +<ul> + <li>{{jsxref("Object.defineProperty")}}</li> + <li>{{jsxref("Object.defineProperties")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>Publicación de John Resig sobre <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf()</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/defineproperties/index.html b/files/es/web/javascript/reference/global_objects/object/defineproperties/index.html new file mode 100644 index 0000000000..3002dd200d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/defineproperties/index.html @@ -0,0 +1,194 @@ +--- +title: Object.defineProperties() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Método(2) + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperties +--- +<div>{{JSRef("Objetos_globales", "Object")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>El metodo <strong><code>Object.defineProperties()</code></strong> define nuevas o modifica propiedades existentes directamente en el objeto, retornando el objeto.</p> + +<h2 id="Syntax" name="Syntax">Sintáxis</h2> + +<pre class="syntaxbox"><code>Object.defineProperties(<em>obj</em>, <em>propiedades</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt>obj</dt> + <dd>El objeto sobre el cual se crearán o modificaran sus propiedades.</dd> + <dt>propiedades</dt> + <dd>Un objeto cuyas propiedades enumerables propias consituyen descriptores para las propiedades a ser definidas o modificadas.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p><code>Object.defineProperties</code>, en escencia, define todas las propiedades correspondientes a las propiedades propias con capacidad de enumeración de <code>props</code> en el objeto <code>objrops.</code></p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<pre class="brush: js">Object.defineProperties(obj, { + "property1": { + value: true, + writable: true + }, + "property2": { + value: "Hello", + writable: false + } + // etc. etc. +});</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Asumiendo una ejecución pristina del entorno con todos los nombres y propiedades referidas a sus valores iniciales, <code>Object.defineProperties</code> es casi completamente equivalente (note el comentario en <code>isCallable</code>) a la siguiente reimplementación de JavaScript:</p> + +<pre class="brush: js;highlight:[8]">function defineProperties(obj, properties) { + function convertToDescriptor(desc) { + function hasProperty(obj, prop) { + return Object.prototype.hasOwnProperty.call(obj, prop); + } + + function isCallable(v) { + // NB: modify as necessary if other values than functions are callable. + return typeof v === "function"; + } + + if (typeof desc !== "object" || desc === null) + throw new TypeError("bad desc"); + + var d = {}; + + if (hasProperty(desc, "enumerable")) + d.enumerable = !!obj.enumerable; + if (hasProperty(desc, "configurable")) + d.configurable = !!obj.configurable; + if (hasProperty(desc, "value")) + d.value = obj.value; + if (hasProperty(desc, "writable")) + d.writable = !!desc.writable; + if ( hasProperty(desc, "get") ) { + var g = desc.get; + + if (!isCallable(g) && g !== "undefined") + throw new TypeError("bad get"); + d.get = g; + } + if ( hasProperty(desc, "set") ) { + var s = desc.set; + if (!isCallable(s) && s !== "undefined") + throw new TypeError("bad set"); + d.set = s; + } + + if (("get" in d || "set" in d) && ("value" in d || "writable" in d)) + throw new TypeError("identity-confused descriptor"); + + return d; + } + + if (typeof obj !== "object" || obj === null) + throw new TypeError("bad obj"); + + properties = Object(properties); + + var keys = Object.keys(properties); + var descs = []; + + for (var i = 0; i < keys.length; i++) + descs.push([keys[i], convertToDescriptor(properties[keys[i]])]); + + for (var i = 0; i < descs.length; i++) + Object.defineProperty(obj, descs[i][0], descs[i][1]); + + return obj; +}</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('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de navegadores</h2> + +<p>Basado en <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>5 (previous versions untested)</td> + <td>9</td> + <td>11.60</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>11.50</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/defineproperty/index.html b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.html new file mode 100644 index 0000000000..f971d5a131 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.html @@ -0,0 +1,419 @@ +--- +title: Object.defineProperty() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Método(2) + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/defineProperty +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="summary" name="summary">Resumen</h2> + +<p>El método estático <code><strong>Object.defineProperty()</strong></code> define una nueva propiedad sobre un objeto, o modifica una ya existente, y devuelve el objeto modificado.</p> + +<div class="note"> +<p><strong>Nota:</strong> Ud. puede llamar a este método directamente mediante el constructor {{jsxref("Object")}} en vez de crear una instancia del tipo <code>Object</code>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.defineProperty(<var>obj</var>, <var>prop</var>, <var>descriptor</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto sobre el cual se define la propiedad.</dd> + <dt><code>prop</code></dt> + <dd>El nombre de la propiedad a ser definida o modificada.</dd> + <dt><code>descriptor</code></dt> + <dd>El descriptor de la propiedad que está siendo definida o modificada.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Este método permite añadir o modificar una propiedad en un objeto.</p> + +<p>La adición normal de una propiedad a través de la asignación crea propiedades que aparecen durante la enumeración de propiedades en el bucle ({{jsxref("Sentencias/for...in", "for...in")}} o el método {{jsxref("Object.keys")}}), cuyos valores pueden modificarse y pudiendo incluso eliminar la propiedad del objeto mediante el método {{jsxref("Operadores/delete", "delete")}}.</p> + +<p>Este método nos permite modificar el comportamiento por defecto de las propiedades. Es decir, nos permite definir una propiedad como no enumerable, no modificable o incluso evitar que pueda ser eliminada del objeto.</p> + +<p>Existen dos tipos de descriptores: De datos y de acceso. Un <em><dfn>descriptor de datos</dfn></em> define una propiedad que tiene un valor, el cual puede ser o no modificado. Un descriptor de acceso define una propiedad mediante un par de funciones getter-setter que describe como se obtiene o se modifica el contenido de dicha propiedad. Un descriptor debe de ser de uno de estos dos tipos; no puede ser ambos.</p> + +<p>Ambos tipos de descriptores son objetos y comparten las siguientes claves opcionales:</p> + +<dl> + <dt><code>configurable</code></dt> + <dd><code>true</code> si y solo si el tipo de descriptor de propiedad puede modificarse y si la propiedad puede ser eliminada del correspondiente objeto.<br> + <strong>Por defecto es <code>false</code>.</strong></dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si y solo si dicha propiedad se muestra durante la enumeración de las propiedades del objeto correspondiente.<br> + <strong>Por defecto es <code>false</code>.</strong></dd> +</dl> + +<p>Un descriptor de datos tiene además las siguientes claves opcionales:</p> + +<dl> + <dt><code>value</code></dt> + <dd>El valor asociado a la propiedad. Puede ser cualquier tipo valido de JavaScript (number, object, function, etc).<br> + <strong>Por defecto es {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd> + <dt><code>writable</code></dt> + <dd><code>true</code> Indica si el valor de la propiedad puede modificarse con el {{jsxref("Operators/Assignment_Operators", "operador de asignación", "", 1)}}.<br> + <strong>Defaults to <code>false</code>.</strong></dd> +</dl> + +<p>Un descriptor de acceso además tiene las siguientes claves opcionales:</p> + +<dl> + <dt><code>get</code></dt> + <dd>Una función cuyo valor retornado será el que se use como valor de la propiedad.<br> + <strong>Defaults to {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd> + <dt><code>set</code></dt> + <dd>Una función que recibe como único argumento el nuevo valor que se desea asignar a la propiedad y que devuelve el valor que se almacenará finalmente en el objeto.<br> + <strong>Defaults to {{jsxref("Objetos_Globales/undefined", "undefined")}}.</strong></dd> +</dl> + +<p>Hay que tener en cuenta que estas opciones también pueden heredarse; es decir, las opciones de la propiedad se han podido establecer en el prototipo de una clase de la que hereda el objeto. De modo que si queremos asegurarnos unos valores por defecto tenemos tres opciones: fijar el {{jsxref("Object.prototype")}} con {{jsxref("Object.freeze")}}, definir todas las opciones explicitamente, o establecer a {{jsxref("Objetos_Globales/null", "null")}} la propiedad {{jsxref("Object.prototype.__proto__", "__proto__")}}.</p> + +<pre class="brush: js">// Usando __proto__ +Object.defineProperty(obj, 'key', { + __proto__: null, // no aceptar propiedades heredadas + value: 'static' // no enumerable + // no configurable + // no modificable + // como opciones por defecto +}); + +// Definiendo todo explicitamente +Object.defineProperty(obj, 'key', { + enumerable: false, + configurable: false, + writable: false, + value: 'static' +}); + +// Reciclando el mismo objeto +function withValue(value) { + var d = withValue.d || ( + withValue.d = { + enumerable: false, + writable: false, + configurable: false, + value: null + } + ); + d.value = value; + return d; +} +// ... y ... +Object.defineProperty(obj, 'key', withValue('static')); + +// Si está disponible freeze, previene añadir o eliminar +//del prototipo del objeto las propiedades +// (value, get, set, enumerable, writable, configurable) +(Object.freeze || Object)(Object.prototype); +</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>Si quiere ver algunos ejemplos de utilización del método <code>Object.defineProperty</code> con una sintaxis tipo <em>binary-flags</em>, vea <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">ejemplos adicionales</a>.</p> + +<h3 id="Example:_Creating_a_property" name="Example:_Creating_a_property">Ejemplo: Creando una propiedad</h3> + +<p>Cuando la propiedad especificada no existe en el objeto<code>, Object.defineProperty()</code> crea una nueva. En el descriptor pueden omitirse campos, a los cuales se les asignará el valor por defecto. A todos los que sean de tipo Booleano se les asignará el valor falso. Los campos <code>value</code>, <code>get</code> y <code>set</code> se establecerán por defecto a {{jsxref("Objetos_Globales/undefined", "undefined")}}. Una propiedad definida sin indicar <code>get</code>/<code>set</code>/<code>value</code>/<code>writable</code> es denominada “genérica” y “tipificada” como un descriptor de datos.</p> + +<pre class="brush: js">var o = {}; // Creates a new object + +// Example of an object property added with defineProperty with a data property descriptor +Object.defineProperty(o, 'a', { + value: 37, + writable: true, + enumerable: true, + configurable: true +}); +// 'a' property exists in the o object and its value is 37 + +// Example of an object property added with defineProperty with an accessor property descriptor +var bValue = 38; +Object.defineProperty(o, 'b', { + get: function() { return bValue; }, + set: function(newValue) { bValue = newValue; }, + enumerable: true, + configurable: true +}); +o.b; // 38 +// 'b' property exists in the o object and its value is 38 +// The value of o.b is now always identical to bValue, unless o.b is redefined + +// You cannot try to mix both: +Object.defineProperty(o, 'conflict', { + value: 0x9f91102, + get: function() { return 0xdeadbeef; } +}); +// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors +</pre> + +<h3 id="Example:_Modifying_a_property" name="Example:_Modifying_a_property">Ejemplo: Modificando una propiedad</h3> + +<p>Cuando la propiedad realmente existe, <code>Object.defineProperty()</code> intenta modificar la propiedad de acuerdo a los valores en la descripción y la configuración actual del objeto. Si la descripción antigüa tenía su atributo de configuración establecido en <code>false</code> (la propiedad se dice "sin capacidad de configuración"), entonces ningún atributo además de los que tienen capacidad de escritura pueden ser cambiados. En ese caso, no es posible cambiar hacía atras o hacía delante entre datos y métodos de acceso de tipos de propiedades.</p> + +<p>Si una propiedad no tiene capacidad de configuración, su atributo <code>writabble</code> solo puede ser cambiada to <code>false</code>.</p> + +<p>Un {{jsxref("Global_Objects/TypeError", "TypeError")}} es arrojado cuando se intenta cambiar las propiedades de atributos sin capacidad de configuración (adeḿas del atributo <code>writable</code>) a menos que el valor actual y el valor nuevo sean los mismos.</p> + +<h4 id="Writable_attribute" name="Writable_attribute">Atributo writable</h4> + +<p>Cuando la propiedad de un atributo <code>writable</code> es establecido to <code>false</code>, la propiedad se dice esta "sin capacidad de escritura". No puede ser reasignada.</p> + +<pre class="brush: js">var o = {}; // Crea un objeto nuevo + +Object.defineProperty(o, 'a', { + value: 37, + writable: false +}); + +console.log(o.a); // logs 37 +o.a = 25; // Ningún error arrojado (lo tiraría en modo estricto, aún si el valor fuera el mismo) +console.log(o.a); // muestra 37. La asignación no funcionó +</pre> + +<p>Como es visto en el ejemplo anterior, intentar escribir en una propiedad "sin capacidad de escritura" no la cambia pero sí arroja un error.</p> + +<h4 id="Enumerable_attribute" name="Enumerable_attribute">Atributo enumerable</h4> + +<p>El atributo de la propiedad <code>enumerable</code> se define si la propiedad aparece en un ciclo {{jsxref("Statements/for...in", "for...in")}} y {{jsxref("Object.keys()")}} o no.</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { value: 1, enumerable: true }); +Object.defineProperty(o, 'b', { value: 2, enumerable: false }); +Object.defineProperty(o, 'c', { value: 3 }); // enumerable defaults to false +o.d = 4; // enumerable defaults to true when creating a property by setting it + +for (var i in o) { + console.log(i); +} +// logs 'a' and 'd' (in undefined order) + +Object.keys(o); // ['a', 'd'] + +o.propertyIsEnumerable('a'); // true +o.propertyIsEnumerable('b'); // false +o.propertyIsEnumerable('c'); // false +</pre> + +<h4 id="Configurable_attribute" name="Configurable_attribute">Atributo configurable</h4> + +<p>El atributo <code>configurable</code> define si la propiedad puede ser eliminada del objeto, y si sus atributos (excepto <code>writable</code>) pueden ser modificados</p> + +<pre class="brush: js">var o = {}; +Object.defineProperty(o, 'a', { + get: function() { return 1; }, + configurable: false +}); + +Object.defineProperty(o, 'a', { configurable: true }); // arroja TypeError +Object.defineProperty(o, 'a', { enumerable: true }); // arroja TypeError +Object.defineProperty(o, 'a', { set: function() {} }); // arroja TypeError (set estaba definido como undefined) +Object.defineProperty(o, 'a', { get: function() { return 1; } }); // arroja TypeError (incluso aunque los get hacen lo mismo) +Object.defineProperty(o, 'a', { value: 12 }); // arroja TypeError + +console.log(o.a); // logs 1 +delete o.a; // No hace nada +console.log(o.a); // logs 1 +</pre> + +<p>Si <code>o.a</code> tuviese <code>configurable</code> a <code>true</code>, no se habrían arrojado errores y la propiedad habría sido eliminada. </p> + +<h3 id="Example:_Adding_properties_and_default_values" name="Example:_Adding_properties_and_default_values">Ejemplo: Añadiendo propiedades y valores por defecto</h3> + +<p>Es importante tener en cuenta la forma en la se aplican los valores por defecto de los atributos. Suele haber diferencias entre simplemente usar la notación con '.' y usar <code>Object.defineProperty()</code>, como se muestra en el siguiente ejemplo:</p> + +<pre class="brush: js">var o = {}; + +o.a = 1; +// es equivalente a : +Object.defineProperty(o, 'a', { + value: 1, + writable: true, + configurable: true, + enumerable: true +}); + + +// Sin embargo, +Object.defineProperty(o, 'a', { value: 1 }); +// es equivalente a : +Object.defineProperty(o, 'a', { + value: 1, + writable: false, + configurable: false, + enumerable: false +}); +</pre> + +<h3 id="Example:_Custom_setters_and_getters" name="Example:_Custom_setters_and_getters">Ejemplo: Setters y Getters a medida</h3> + +<p>Example below shows how to implement a self-archiving object. When <code>temperature</code> property is set, the <code>archive</code> array gets a log entry.</p> + +<pre class="brush: js">function Archiver() { + var temperature = null; + var archive = []; + + Object.defineProperty(this, 'temperature', { + get: function() { + console.log('get!'); + return temperature; + }, + set: function(value) { + temperature = value; + archive.push({ val: temperature }); + } + }); + + this.getArchive = function() { return archive; }; +} + +var arc = new Archiver(); +arc.temperature; // 'get!' +arc.temperature = 11; +arc.temperature = 13; +arc.getArchive(); // [{ val: 11 }, { val: 13 }] +</pre> + +<p>or</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> pattern <span class="operator token">=</span> <span class="punctuation token">{</span> + <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="string token">'I always return this string, whatever you have assigned'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">this</span><span class="punctuation token">.</span>myname <span class="operator token">=</span> <span class="string token">'this is my name string'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span> + + +<span class="keyword token">function</span> <span class="function token">TestDefineSetAndGet</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> <span class="string token">'myproperty'</span><span class="punctuation token">,</span> pattern<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + + +<span class="keyword token">var</span> instance <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">TestDefineSetAndGet</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +instance<span class="punctuation token">.</span>myproperty <span class="operator token">=</span> <span class="string token">'test'</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>instance<span class="punctuation token">.</span>myproperty<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// I always return this string, whatever you have assigned</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>instance<span class="punctuation token">.</span>myname<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// this is my name string</span></code></pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.6', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.defineproperty', 'Object.defineProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatChrome("5")}} (versiones previas sin testear)</td> + <td>{{CompatIE("9")}} ({{CompatIE("8")}}, pero solo con objetos DOM y con muchos comportamientos no estándares <a href="#Internet_Explorer_8_specific_notes">See below</a>.)</td> + <td>{{CompatOpera("11.60")}}</td> + <td>{{CompatSafari("5.1")}} ({{CompatSafari("5")}}, but not on DOM objects)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("9")}} and above</td> + <td>{{CompatOperaMobile("11.50")}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat tables</a>.</p> + +<h3 id="Redefining_the_length_property_of_an_Array_object" name="Redefining_the_length_property_of_an_Array_object">Redefining the <code>length</code> property of an <code>Array</code> object</h3> + +<p>It is possible to redefine the {{jsxref("Array.length", "length")}} property of arrays, subject to the usual redefinition restrictions. (The {{jsxref("Array.length", "length")}} property is initially non-configurable, non-enumerable, and writable. Thus on an unaltered array it is possible to change the {{jsxref("Array.length", "length")}} property's value, or to make it non-writable. It is not allowed to change its enumerability or configurability, or if it is non-writable to change its value or writability.) However, not all browsers permit this redefinition.</p> + +<p>Firefox 4 through 22 will throw a {{jsxref("Global_Objects/TypeError", "TypeError")}} on any attempt whatsoever (whether permitted or not) to redefine the {{jsxref("Array.length", "length")}} property of an array.</p> + +<p>Versions of Chrome which implement <code>Object.defineProperty()</code> in some circumstances ignore a length value different from the array's current {{jsxref("Array.length", "length")}} property. In some circumstances changing writability seems to silently not work (and not throw an exception). Also, relatedly, some array-mutating methods like {{jsxref("Array.prototype.push")}} don't respect a non-writable length.</p> + +<p>Versions of Safari which implement <code>Object.defineProperty()</code> ignore a <code>length</code> value different from the array's current {{jsxref("Array.length", "length")}} property, and attempts to change writability execute without error but do not actually change the property's writability.</p> + +<p>Only Internet Explorer 9 and later, and Firefox 23 and later, appear to fully and correctly implement redefinition of the {{jsxref("Array.length", "length")}} property of arrays. For now, don't rely on redefining the {{jsxref("Array.length", "length")}} property of an array to either work, or to work in a particular manner. And even when you <em>can</em> rely on it, <a href="http://whereswalden.com/2013/08/05/new-in-firefox-23-the-length-property-of-an-array-can-be-made-non-writable-but-you-shouldnt-do-it/">there's really no good reason to do so</a>.</p> + +<h3 id="Particularidades_de_Internet_Explorer_8">Particularidades de Internet Explorer 8</h3> + +<p>El método <code>Object.defineProperty()</code> de Internet Explorer <a href="http://msdn.microsoft.com/en-us/library/dd229916%28VS.85%29.aspx">sólo puede ser usado en objetos del DOM.</a> Algunas explicaciones al respecto:</p> + +<ul> + <li>Intentar usar <code>Object.defineProperty()</code> en objetos nativos produce un error.</li> + <li>Hay que definir un valor para todos los atributos de una propiedad: <code>true, true, true</code> para descriptores de datos y <code>true</code> para configurables, <code>false</code> para el descriptor de acceso <code>enumerable</code>.(?) Cualquier intento de proporcionar otro valor(?) lanzará un error.</li> + <li>Para reconfirurar una propiedad primero hay que eliminarla. Si no se elimina, la propiedad no cambia aunque se intente modificar.</li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Operators/get", "get")}}</li> + <li>{{jsxref("Operators/set", "set")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty/Additional_examples">Additional <code>Object.defineProperty</code> examples</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/entries/index.html b/files/es/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..98aff1178a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,161 @@ +--- +title: Object.entries() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.entries()</strong></code> devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado, en el mismo orden que es proporcionado por {{jsxref("Sentencias/for...in", "for...in")}} (La diferencia es que un bucle for-in enumera las propiedades en la cadena de prototipos).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>The object whose enumerable own property <code>[key, value]</code> pairs are to be returned.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>An array of the given object's own enumerable property <code>[key, value]</code> pairs.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Object.entries()</code> returns an array whose elements are arrays corresponding to the enumerable property <code>[key, value]</code> pairs found directly upon <code>object</code>. The ordering of the properties is the same as that given by looping over the property values of the object manually.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] + +// array like object +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] + +// array like object with random key ordering +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] + +// getFoo is property which isn't enumerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ] + +// non-object argument will be coerced to an object +console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] + +// iterate through key-value gracefully +var obj = {a: 5, b: 7, c: 9}; +for (var [key, value] of Object.entries(obj)) { + console.log(key + ' ' + value); // "a 5", "b 7", "c 9" +} + +// Or, using array extras +Object.entries(obj).forEach(([key, value]) => { + console.log(key + ' ' + value); // "a 5", "b 7", "c 9" +}); +</pre> + +<h3 id="Converting_an_Object_to_a_Map">Converting an <code>Object</code> to a <code>Map</code></h3> + +<p>The {{jsxref("Map", "new Map()")}} constructor accepts an iterable of <code>entries</code>. With <code>Object.entries</code>, you can easily convert from {{jsxref("Object")}} to {{jsxref("Map")}}:</p> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +var map = new Map(Object.entries(obj)); +console.log(map); // Map { foo: "bar", baz: 42 }</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>To add compatible <code>Object.entries</code> support in older environments that do not natively support it, you can find a Polyfill in the <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> or in the <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a> repositories.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(47)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(10.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</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>{{CompatChrome(54)}}</td> + <td>{{CompatChrome(54)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(47)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/freeze/index.html b/files/es/web/javascript/reference/global_objects/object/freeze/index.html new file mode 100644 index 0000000000..890d0d07b4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/freeze/index.html @@ -0,0 +1,174 @@ +--- +title: Object.freeze() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/freeze +translation_of: Web/JavaScript/Reference/Global_Objects/Object/freeze +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.freeze()</strong></code> <em>congela</em> un objeto, es decir: impide que se le agreguen nuevas propiedades; impide que se puedan eliminar las propiedades ya existentes; impide que dichas propiedades, o su capacidad de enumeración, configuración, o escritura, puedan ser modificadas; impide también que se pueda modificar su prototipo. El método devuelve el objeto recibido.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-freeze.html")}}</div> + +<p class="hidden">El código de este ejemplo interactivo está almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, puedes clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos un <em>pull request</em>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.freeze(<var>obj</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto a <em>congelar</em>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El mismo objeto</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Nada puede ser agregado o removido de las propiedades establecidas de un objeto <em>congelado</em>. Cualquier intento de hacerlo fallará, ya sea de manera silenciosa o <em>arrojando una excepción </em>{{jsxref("TypeError")}} (más comunmente, pero no exclusivamente, en {{jsxref("Strict_mode", "strict mode", "", 1)}}).</p> + +<p>Los valores no pueden ser cambiados por propiedades de datos. Propiedades de acceso (<em>getters</em> y <em>setters</em>) funcionan igual (y aún dan la ilusión de que estas cambiando el valor). Note que los valores que son objetos aún pueden ser modificados, a menos que esten <em>congelados</em> tambien.</p> + +<p>La función retorna el mismo objeto pasado en ella, no crea una copia <em>congelada</em></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Congelando_Objetos">Congelando Objetos</h3> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Nuevas propiedades pueden ser agregadas, +// propiedades existentes pueden cambiar o removerse +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +// Ambos, el objeto pasado como argumento tanto como el que se regresa +// serán congelados +// Es innecesario salvar el objeto que es regresado en orden de <em>congelar</em> +// el original. +var o = Object.freeze(obj); + +assert(Object.isFrozen(obj) === true); + +// Ahora cualquier cambio fallará +obj.foo = 'quux'; // No hace nada de manera silenciosa +obj.quaxxor = 'the friendly duck'; // No agrega una nueva propiedad, de manera silenciosa + +// ...y en modo estrico tal intento arrojará TypeErrors +function fail(){ + 'use strict'; + obj.foo = 'sparky'; // arroja un TypeError + delete obj.quaxxor; // arroja un TypeError + obj.sparky = 'arf'; // arroja un TypeError +} + +fail(); + +// Los intentos utilizando Object.defineProperty tambien arrojarán una excepción... +Object.defineProperty(obj, 'ohai', { value: 17 }); // arroja un TypeError +Object.defineProperty(obj, 'foo', { value: 'eit' }); // arroja un TypeError + +// Es imposible cambiar un prototipo +// Estos ejemplos retornan un error TypeError +Object.setPrototype(obj,{x:20}) +obj.__proto__ = {x:20} +</pre> + +<p>El siguiente ejemplo muestra que los valores de objetos en un objeto congelado pueden ser mutados (la congelación es superficial).</p> + +<pre class="brush: js">obj1 = { + internal: {} +}; + +Object.freeze(obj1); +obj1.internal.a = 'aValue'; + +obj1.internal.a // 'aValue' + +// Para hacer obj completamente inmutable, congelamos cada objeto en obj. +// Para hacerlo, usamos esta función. +function deepFreeze(obj) { + + // Recuperamos el nombre de las propiedades en obj + var propNames = Object.getOwnPropertyNames(obj); + + // Congelamos las propiedades antes de congelar a obj + propNames.forEach(function(name) { + var prop = obj[name]; + + // Si la propiedad es un objeto, llamaremos a deepFreezze para que congele las propiedades de ese objeto + if (typeof prop == 'object' && prop !== null && !Object.isFrozen(prop)) + deepFreeze(prop); + }); + + // congelamos a obj + return Object.freeze(obj); +} + +obj2 = { + internal: {} +}; + +deepFreeze(obj2); +obj2.internal.a = 'anotherValue'; +obj2.internal.a; // undefined +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento pasado a este método no es un objeto (un primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si fuera un objeto <em>congelado</em> cualquiera, simplemente lo regresa.</p> + +<pre class="brush: js">> Object.freeze(1) +TypeError: 1 is not an object // Código ES5 + +> Object.freeze(1) +1 // Código ES6 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{Compat("javascript.builtins.Object.freeze")}}</p> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/fromentries/index.html b/files/es/web/javascript/reference/global_objects/object/fromentries/index.html new file mode 100644 index 0000000000..023cc5f8ca --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/fromentries/index.html @@ -0,0 +1,106 @@ +--- +title: Object.fromEntries() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries +tags: + - JavaScript + - Objeto + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/fromEntries +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.fromEntries()</strong></code> transforma una lista de pares con <code>[clave-valor] </code>en un objeto.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-fromentries.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">Object.fromEntries(<var>iterable</var>);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>iterador</var></code></dt> + <dd>Un iterador como {{jsxref("Array")}}, {{jsxref("Map")}} u otros objetos que implementen el <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">protocolo iterable</a>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un nuevo objeto cuyas propiedades son dadas por las entradas del iterador.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Object.fromEntries()</code> toma una lista de pares con clave-valor y devuelve un nuevo objeto cuyas propiedades son dadas por éstas entradas. El argumento <em>iterador </em>se espera que sea un objeto que implemente un método <code>@@iterator</code>, que devuelve un objeto iterador, que produce un objeto tipo array de dos elementos, donde el primer elemento es un valor que se usará como la clave de la propiedad, y el segundo elemento es el valor a asociar con esa clave de propiedad.</p> + +<p><code>Object.fromEntries()</code> realiza lo inverso de {{jsxref("Object.entries()")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Convirtiendo_un_Map_en_un_Objeto">Convirtiendo un <code>Map</code> en un <code>Objeto</code></h3> + +<p>Con <code>Object.fromEntries</code>, puedes convertir de un {{jsxref("Map")}} a un {{jsxref("Object")}}:</p> + +<pre class="brush: js notranslate">const map = new Map([ ['foo', 'bar'], ['baz', 42] ]); +const obj = Object.fromEntries(map); +console.log(obj); // { foo: "bar", baz: 42 } +</pre> + +<h3 id="Convirtiendo_un_Arreglo_en_un_Objeto">Convirtiendo un <code>Arreglo</code> en un <code>Objeto</code></h3> + +<p>Con <code>Object.fromEntries</code>, puedes convertir de un {{jsxref("Array")}} a un {{jsxref("Object")}}:</p> + +<pre class="brush: js notranslate">const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; +const obj = Object.fromEntries(arr); +console.log(obj); // { 0: "a", 1: "b", 2: "c" } +</pre> + +<h3 id="Transformación_de_Objetos">Transformación de Objetos</h3> + +<p>Con <code>Object.fromEntries</code>, su método inverso {{jsxref("Object.entries()")}}, y <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#Methods_2">array métodos de manipulaciín de arreglos</a>, puedes transformar objetos así:</p> + +<pre class="brush: js notranslate">const object1 = { a: 1, b: 2, c: 3 }; + +const object2 = Object.fromEntries( + Object.entries(object1) + .map(([ key, val ]) => [ key, val * 2 ]) +); + +console.log(object2); +// { a: 2, b: 4, c: 6 }</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.fromentries', 'Object.fromEntries')}}</td> + <td>Etapa 4</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Object.fromEntries")}}</p> + +<h2 id="Véase_tambien">Véase tambien</h2> + +<ul> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Map.prototype.entries()")}}</li> + <li>{{jsxref("Map.prototype.keys()")}}</li> + <li>{{jsxref("Map.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..fb2eaf68da --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html @@ -0,0 +1,161 @@ +--- +title: Object.getOwnPropertyDescriptor() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor +tags: + - ECMAScript5 + - JavaScript + - Método(2) + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.getOwnPropertyDescriptor()</strong></code> regresa como descripción de propiedad para una propiedad propia (eso es, una presente directamente en el objeto, no presente por la fuerza a través de la cadena de prototipo del objeto) de un objeto dado.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertyDescriptor(<var>obj</var>, <var>prop</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto en el que se busca la propiedad.</dd> + <dt><code>prop</code></dt> + <dd>El nombre de la propiedad del cuál se obtendrá la descripción.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un descriptor de propiedad de una propiedad dada si existe en el objeto, {{jsxref("undefined")}} en cualquier otro caso.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Éste método permite la examinación precisa de la descripción de una propiedad. Una propiedad en JavaScript consiste de el nombre de una cadena de valor y un descriptor de propiedad. Información más detallada acerca de los tipos de descripciones y sus atributos puede ser encontrada en {{jsxref("Object.defineProperty()")}}.</p> + +<p>Una descripción de propiedad es un registro con alguno de los siguientes atributos:</p> + +<dl> + <dt><code>value</code></dt> + <dd>El valor asociado con la propiedad (descriptores de datos unicamente).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd><code>true</code> si y solo si el valor asociado con la propiedad puede ser cambiada (descriptores de datos unicamente).</dd> + <dt><code>get</code></dt> + <dd>Una función que sirve como método de acceso para la propiedad, o {{jsxref("undefined")}} si no hay método de acceso (métodos de acceso de descripciones unicamente).</dd> + <dt><code>set</code></dt> + <dd>Una función que sirve como método de establecimiento para la propieda, o {{jsxref("undefined")}} si no hay método de establecimiento (métodos de establecimiento de descripciones unicamente).</dd> + <dt><code>configurable</code></dt> + <dd><code>true</code> si y solo si el tipo de ésta descripción de propiedad puede ser cambiada y si la propiedad puede ser eliminada del objeto correspondiente.</dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si y solo si ésta propiedad aparece durante la enumeración de las propiedades del objeto correspondiente.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var o, d; + +o = { get foo() { return 17; } }; +d = Object.getOwnPropertyDescriptor(o, 'foo'); +// d is { configurable: true, enumerable: true, get: /* la función de acceso */, set: undefined } + +o = { bar: 42 }; +d = Object.getOwnPropertyDescriptor(o, 'bar'); +// d is { configurable: true, enumerable: true, value: 42, writable: true } + +o = {}; +Object.defineProperty(o, 'baz', { value: 8675309, writable: false, enumerable: false }); +d = Object.getOwnPropertyDescriptor(o, 'baz'); +// d es { value: 8675309, writable: false, enumerable: false, configurable: false } +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el primer argumento que se le pasa a éste método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como primer argumento será convertido (coerción) a un objeto en primera instancia.</p> + +<pre class="brush: js">Object.getOwnPropertyDescriptor("foo", 0); +// TypeError: "foo" is not an object // Código ES5 + +Object.getOwnPropertyDescriptor("foo", 0); +// {configurable:false, enumerable:true, value:"f", writable:false} // Código ES6 +</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('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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("5")}}</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>{{CompatIE("8")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..9585fa80e8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html @@ -0,0 +1,117 @@ +--- +title: Object.getOwnPropertyDescriptors() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors +tags: + - JavaScript + - Objeto + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors +--- +<div>{{JSRef}}</div> + +<p>El método<code><strong>Object.getOwnPropertyDescriptors()</strong></code><strong> </strong>regresa todos los descriptores de propiedad propios de un objeto dado.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-getownpropertydescriptors.html")}}</div> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox">Object.getOwnPropertyDescriptors(<var>obj</var>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto para el cual obtener todos los descriptores de propiedad.</dd> +</dl> + +<h3 id="Valores_devueltos">Valores devueltos</h3> + +<p>Un objeto que contiene todos los descriptores de propiedad propios de un objeto.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Este método permite la examinación de la descripción precisa de todas las propiedades de un objeto. Una propiedad en JavaScript consiste en un valor-cadena nombre y un descriptor de propiedad. Más información acerca de los tipos de descriptores de propiedad y sus atributos pueden ser encontrados en {{jsxref("Object.defineProperty()")}}.</p> + +<p>Un descriptor de propiedad es un registro con algunos de los siguientes atributos:</p> + +<dl> + <dt><code>value</code></dt> + <dd>El valor asociado con la propiedad (solo descriptores de datos).</dd> + <dt><code><strong>writable</strong></code></dt> + <dd><code>true</code> si y solo si el valor asociado con la propiedad puede ser cambiado (solo descriptores de datos).</dd> + <dt><code>get</code></dt> + <dd>Un función que sirve como un getter para la propiedad, o {{jsxref("undefined")}} si no hay getter (solo descriptores de acceso).</dd> + <dt><code>set</code></dt> + <dd>Una función que sirve como un setter para la propiedad, o {{jsxref("undefined")}} si no hay setter (solo descriptores de acceso).</dd> + <dt><code>configurable</code></dt> + <dd><code>true</code> si y solo si el tipo de este descriptor de propiedad puede ser cambiado y si la propiedad puede ser borrada de el objeto correspondiente.</dd> + <dt><code>enumerable</code></dt> + <dd><code>true</code> si y solo si esta propiedad aparece durante la enumeración de las propiedad en el objeto correspondiente.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Creando_un_clon_superficial">Creando un clon superficial</h3> + +<p>Mientras el método {{jsxref("Object.assign()")}} solo copiará las propiedades enumerables y propias de un objeto fuente a un objeto destino, puedes usar este método y {{jsxref("Object.create()")}} para una copia superficial entre dos objetos desconocidos:</p> + +<pre class="brush: js">Object.create( + Object.getPrototypeOf(obj), + Object.getOwnPropertyDescriptors(obj) +); +</pre> + +<h3 id="Creando_una_subclase">Creando una subclase</h3> + +<p>Una manera típica de crear una subclase es definir la subclase, establecer su prototipo a una instancia de la superclase, y después definir propiedades en esa instancia. Esto puede ponerse incómodo especialmente por los getters y setters. En cambio, tú puedes usar este código para establecer el prototipo:</p> + +<pre class="brush: js">function superclass() {} +superclass.prototype = { + // Define tus métodos y propiedades aquí +}; +function subclass() {} +subclass.prototype = Object.create( + superclass.prototype, + { + // Define tus métodos y propiedades aquí + } +); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definición inicial en ECMAScript 2017.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quisieras contribuir con los datos, por favor vaya a <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> mándenos una petición pull.</div> + +<p>{{Compat("javascript.builtins.Object.getOwnPropertyDescriptors")}}</p> +</div> + +<h2 id="Ver_también">Ver también:</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li><a href="https://github.com/tc39/proposal-object-getownpropertydescriptors">Polyfill</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html new file mode 100644 index 0000000000..5c3819045a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html @@ -0,0 +1,163 @@ +--- +title: Object.getOwnPropertyNames() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames +--- +<div> + {{JSRef("Global_Objects", "Object")}}</div> +<h2 id="Summary" name="Summary">Resumen</h2> +<p>El método <code><strong>Object.getOwnPropertyNames()</strong></code> devuelve un array con todas las propiedades (numerables o no) encontradas en un objeto dado.</p> +<h2 id="Syntax" name="Syntax">Sintaxis</h2> +<pre class="syntaxbox"><code>Object.getOwnPropertyNames(<em>obj</em>)</code></pre> +<h3 id="Parameters" name="Parameters">Parámetros</h3> +<dl> + <dt> + obj</dt> + <dd> + El objeto cuyas propiedades directas, numerables <em>y no-numerables</em>, serán devueltas.</dd> +</dl> +<h2 id="Description" name="Description">Descripción</h2> +<p><code>Object.getOwnPropertyNames</code> devuelve un array cuyos elementos son <em>strings </em>correspondientes a cada una de las propiedades encontradas directamente en <code>obj</code>. El orden de las propiedades numerables en el array coincide con el expuesto para <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in loop</a> (o para {{jsxref("Object.keys")}}) con respecto a las propiedades del object. El orden de las propiedades no-numerables del array, y de éstas respecto a las numerables, no está definido.</p> +<h2 id="Ejemplos">Ejemplos</h2> +<pre class="brush: js">var arr = ["a", "b", "c"]; +print(Object.getOwnPropertyNames(arr).sort()); // imprime "0,1,2,length" + +// Objeto similar a Array +var obj = { 0: "a", 1: "b", 2: "c"}; +print(Object.getOwnPropertyNames(obj).sort()); // imprime "0,1,2" + +// Imprime nombres de variables y valores usando Array.forEach +Object.getOwnPropertyNames(obj).forEach(function(val, idx, array) { + print(val + " -> " + obj[val]); +}); +// imprime +// 0 -> a +// 1 -> b +// 2 -> c + +// propiedad no-numerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; }, enumerable: false } }); +my_obj.foo = 1; + +print(Object.getOwnPropertyNames(my_obj).sort()); // imprime "foo, getFoo" +</pre> +<p>Si se quiere solo las propiedades numerables, ver {{jsxref("Object.keys")}} o usar un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in loop</a> (aunque esto devolvería propiedades numerables no directas del <span style="line-height: 1.5;">objeto pertenecientes a la cadena de <em>prototype</em> a la que pertenezca, a menos que finalmente se filtre con hasOwnProperty()).</span></p> +<p>Items de la cadena <em>prototype</em> no se listan:</p> +<pre class="brush: js">function ParentClass () { +} +ParentClass.prototype.inheritedMethod = function () { +}; + +function ChildClass () { + this.prop = 5; + this.method = function () {}; +} +ChildClass.prototype = new ParentClass; +ChildClass.prototype.prototypeMethod = function () { +}; + +alert( + Object.getOwnPropertyNames( + new ChildClass() // ["prop", "method"] + ) +) +</pre> +<h3 id="Get_Non-Enumerable_Only">Get Non-Enumerable Only</h3> +<p>Aquí se usa la función Array.prototype.filter para quitar las <em>keys</em> numerables (obtenidas con Object.keys) de una lista con todas las <em>keys</em> (obtenida con Object.getOwnPropertynames) dejando solo las no-numerables.</p> +<pre class="brush: js">var target = myObject; +var enum_and_nonenum = Object.getOwnPropertyNames(target); +var enum_only = Object.keys(target); +var nonenum_only = enum_and_nonenum.filter(function(key) { + var indexInEnum = enum_only.indexOf(key) + if (indexInEnum == -1) { + //no encontrada en las keys de enum_only, por lo que se trata de una key numerable, se devuelve true para mantenerla en filter + return true; + } else { + return false; + } +}); + +console.log(nonenum_only); +</pre> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Initial definition.<br> + Implemented in JavaScript 1.8.5</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidad_con_Navegadores"> Compatibilidad con Navegadores</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>4 (2.0)</td> + <td>5</td> + <td>9</td> + <td>12</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<p>Based on <a href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> +<h3 id="SpiderMonkey-specific_notes">SpiderMonkey-specific notes</h3> +<ul> + <li>Prior to SpiderMonkey 28 {{geckoRelease("28")}}, <code>Object.getOwnPropertyNames</code> did not see unresolved properties of {{jsxref("Error")}} objects. This has been fixed in later versions ({{bug("724768")}}).</li> +</ul> +<h2 id="See_also" name="See_also">Ver también</h2> +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.prototype.hasOwnProperty")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable")}}</li> + <li>{{jsxref("Object.create")}}</li> + <li>{{jsxref("Object.keys")}}</li> + <li>{{jsxref("Array.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..cf8be23f59 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html @@ -0,0 +1,123 @@ +--- +title: Object.getOwnPropertySymbols() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols +tags: + - ECMAScript6 + - Experimental + - JavaScript + - Método(2) + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.getOwnPropertySymbols()</strong></code> regresa una colección de todos las propiedades de los simbolos encontrados directamente en un objeto dado.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.getOwnPropertySymbols(<var>obj</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto del cual los simbolos de propiedades son devueltos.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Similar a {{jsxref("Object.getOwnPropertyNames()")}}, puedes obtener todas las propiedades de simbolos de un objeto dado como una colección de simbolos. Note que {{jsxref("Object.getOwnPropertyNames()")}} no contiene en sí mismo las propiedades de simbolos de un objeto y solo contiene las propiedades de cadenas.</p> + +<p>Cómo todos los objetos no tienen inicialmente propiedades simbolos propios, <code>Object.getOwnPropertySymbols()</code> regresa una colección vacia a menos que tengas propiedades de simbolos establecidas en tu objeto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var obj = {}; +var a = Symbol('a'); +var b = Symbol.for('b'); + +obj[a] = 'localSymbol'; +obj[b] = 'globalSymbol'; + +var objectSymbols = Object.getOwnPropertySymbols(obj); + +console.log(objectSymbols.length); // 2 +console.log(objectSymbols); // [Symbol(a), Symbol(b)] +console.log(objectSymbols[0]); // Symbol(a) +</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-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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(38)}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>5.1</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoMobile("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Symbol")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html new file mode 100644 index 0000000000..a9b50ec2ec --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html @@ -0,0 +1,137 @@ +--- +title: Object.getPrototypeOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf +tags: + - ECMAScript5 + - JavaScript + - Objeto + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <code><strong>Object.getPrototypeOf()</strong></code> devuelve el prototipo (es decir, el valor de la propiedad interna <code>[[Prototype]]</code>) del objeto especificado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.getPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto cuyo prototipo va a ser devuelto.</dd> +</dl> + +<h3 id="Valor_Devuelto">Valor Devuelto</h3> + +<p>El prototipo del objeto dado. Si no existen propiedades heredadas se devolverá {{jsxref("null")}}.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<pre class="brush: js">var proto = {}; +var obj= Object.create(proto); +Object.getPrototypeOf(obj) === proto; // true +</pre> + +<h2 id="Notes" name="Notes">Notas</h2> + +<p>En ES5, lanzará una excepción {{jsxref("Global_Objects/TypeError", "TypeError")}} si el parámetro <code>obj</code> no es un objeto. en ES6, El parámetro será forzado a un {{jsxref("Global_Objects/Object", "Object")}}.</p> + +<pre class="brush: js">> Object.getPrototypeOf('foo') +TypeError: "foo" is not an object // ES5 code +> Object.getPrototypeOf('foo') +String.prototype // ES6 code +</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('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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("5")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12.10")}} (tal vez en las últimas versiones)</td> + <td>{{CompatSafari("5")}}</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>Based on <a class="external" href="http://kangax.github.com/es5-compat-table/">Kangax's compat table</a>.</p> + +<h3 id="Notas_espécificas_sobre_Opera">Notas espécificas sobre Opera</h3> + +<p>A pesar de que las versiones anteriores de opera no soportan aun <code>Object.getPrototypeOf()</code>, Opera soporta la propiedad no estándar {{jsxref("Object.proto", "__proto__")}} desde Opera 10.50.</p> + +<h2 id="See_also" name="See_also">Mira también</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}} {{experimental_inline}}</li> + <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/">getPrototypeOf</a></li> + <li>{{jsxref("Object.prototype.__proto__")}}</li> + <li>{{jsxref("Reflect.getPrototypeOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html b/files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html new file mode 100644 index 0000000000..d84e5d6a52 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html @@ -0,0 +1,186 @@ +--- +title: Object.prototype.hasOwnProperty() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty +--- +<div>{{JSRef("Objetos_globales", "Object")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <code><strong>hasOwnProperty()</strong></code> devuelve un booleano indicando si el objeto tiene la propiedad especificada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>obj</em>.hasOwnProperty(<em>prop</em>)</code></pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>El nombre de la propiedad a buscar.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Todo objeto descendiente de <code>Object</code> hereda el método <code>hasOwnProperty</code>. Este método puede ser usando para determinar si un objeto tiene la propiedad especificada como una propiedad directa de ese objeto; a diferencia del operador {{jsxref("Operators/in", "in")}}, este método no verifica la cadena prototipo del objeto.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence" name="Example:_Using_hasOwnProperty_to_test_for_a_property.27s_existence">Ejemplo: usar <code>hasOwnProperty</code> para comprobar la existencia de una propiedad</h3> + +<p>El siguiente ejemplo determina si el objeto <code>o</code> contiene una propiedad llamada <code>prop</code>:</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; + +function changeO() { + o.newprop = o.prop; + delete o.prop; +} + +o.hasOwnProperty('prop'); // returns true +changeO(); +o.hasOwnProperty('prop'); // returns false</pre> + +<h3 id="Example:_Direct_versus_inherited_properties" name="Example:_Direct_versus_inherited_properties">Ejemplo: Directo versus propiedades heredadas</h3> + +<p>El siguiente ejemplo diferencia entre propiedades directas y propiedades heredadas a través de la cadena prototype:</p> + +<pre class="brush: js">o = new Object(); +o.prop = 'exists'; +o.hasOwnProperty('prop'); // returns true +o.hasOwnProperty('toString'); // returns false +o.hasOwnProperty('hasOwnProperty'); // returns false</pre> + +<h3 id="Example:_Itarate_over_properties_not_considering_inherited_properties" name="Example:_Itarate_over_properties_not_considering_inherited_properties">Ejemplo: Iterando sobre las propiedades de un objeto</h3> + +<p>El siguiente ejemplo muestra como iterar sobre las propiedades de un objeto sin ejecutar sobre propiedades heredadas. Observe que el bucle for..in ya está no solo iterando elementos enumerables, por consiguiente uno no debería asumir que basado en la falta de propiedades no numerales mostrando en el bucle que hasOwnProperty por si misma no está solo es estrictamente para iterar elementos numerados (como con {{jsxref("Object.getOwnPropertyNames()")}}).</p> + +<pre class="brush: js">var buz = { + fog: 'stack' +}; + +for (var name in buz) { + if (buz.hasOwnProperty(name)) { + alert("this is fog (" + name + ") for sure. Value: " + buz[name]); + } + else { + alert(name); // toString or something else + } +}</pre> + +<h3 id="Ejemplo_hasOwnProperty_como_una_propiedad">Ejemplo: <code>hasOwnProperty</code> como una propiedad</h3> + +<p>JavaScript no protege el nombre de la propiedad <code>hasOwnProperty</code>; en consecuencia, si existe la posibilidad de que un objeto pudiera tener la propiedad con ese nombre, es necesario usar un externo <code>hasOwnProperty</code> para obtener los correctos resultados:</p> + +<pre class="brush: js">var foo = { + hasOwnProperty: function() { + return false; + }, + bar: 'Here be dragons' +}; + +foo.hasOwnProperty('bar'); // always returns false + +// Use another Object's hasOwnProperty and call it with 'this' set to foo +({}).hasOwnProperty.call(foo, 'bar'); // true + +// It's also possible to use the hasOwnProperty property from the Object property for this purpose +Object.prototype.hasOwnProperty.call(foo, 'bar'); // true +</pre> + +<p>Observe que en el último caso no han habido nuevos objetos creados.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 3rd Edition. Implemented in JavaScript 1.5</td> + <td>Standard</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_Also" name="See_Also">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties" title="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_Revisited">JavaScript Guide: Inheritance revisted</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/index.html b/files/es/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..99089bd28e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,187 @@ +--- +title: Object +slug: Web/JavaScript/Referencia/Objetos_globales/Object +tags: + - Constructor + - JavaScript + - Objeto + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<div>La clase Object representa uno de los tipos de datos de Javascript. Es es usado para guardar una colección de datos definidos y entidades más complejas. Los objetos pueden ser creados utilzando el constructor {{jsxref("Object/Object", "Object()")}} o la sintaxis literal de objeto. </div> + +<p>El constructor <code><strong>Object</strong></code> crea una envoltura al objeto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + + + +<pre class="syntaxbox notranslate">// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Los pares de nombres (strings) y los valores (cualquier valor) donde los nombres son separados por una coma.</dd> + <dt><code>valor</code></dt> + <dd>Cualquier valor.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>El constructor <code>Object</code> crea una envoltura de objeto al valor dado. Si el valor es {{jsxref("null")}} o {{jsxref("undefined")}}, creará y retornará un objeto vacío, de otra forma, retornará un objeto de un tipo que corresponda al valor dado. Si el valor ya es un objeto devolverá el valor.</p> + +<p>Cuando es llamano en un contexto non-constructor, <code>Object </code>se comportará indenticamente a <code>new Object()</code>.</p> + +<p>Ver <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Propiedades_del_constructor_Object">Propiedades del constructor <code>Object</code></h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Tiene un valor de 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Permite añadir propiedades a todos los objetos del tipo Object.</dd> +</dl> + +<h2 id="Métodos_del_constructor_Object">Métodos del constructor <code>Object</code></h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Copia los valores de todas sus propiedades enumerables desde uno o más objetos fuente a un objeto destino.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Crea un nuevo objeto con el prototipo objeto y propiedades específicadas.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Añade la propiedad nombrada descrita por un descriptor dado a un objeto.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Agrega las propiedades nombradas descritas por los descriptores dados a un objeto.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Returns an array containing all of the <code>[key, value]</code> pairs of a given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Returns a new object from an iterable of key-value pairs (reverses {{jsxref("Object.entries")}}).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Returns an object containing all own property descriptors for an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Returns an array containing the values that correspond to all of a given object's <strong>own</strong> enumerable string properties.</dd> +</dl> + +<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Deleting_a_property_from_an_object">Deleting a property from an object</h2> + +<p>There isn't any method in an Object itself to delete its own properties (e.g. like <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). To do so one has to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js notranslate">var o = new Object(); +</pre> + +<pre class="brush: js notranslate">var o = new Object(undefined); +</pre> + +<pre class="brush: js notranslate">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js notranslate">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js notranslate">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/is/index.html b/files/es/web/javascript/reference/global_objects/object/is/index.html new file mode 100644 index 0000000000..926357d0ab --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/is/index.html @@ -0,0 +1,172 @@ +--- +title: Object.is() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/is +tags: + - Comparación + - Condición + - ECMAScript2015 + - JavaScript + - Objeto + - condicional + - igualdad + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/is +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.is()</strong></code> determina si dos valores <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">son iguales</a>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox notranslate"><code>Object.is(<var>valor1</var>, <var>valor2</var>);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>valor1</code></dt> + <dd>Primer valor a comparar.</dd> + <dt><code>valor2</code></dt> + <dd>Segundo valor a comparar.</dd> +</dl> + +<h3 id="Valor_return_del_método">Valor return del método</h3> + +<p>Este método devuelve un valor de tipo {{jsxref("Boolean")}} indicando si los valores pasados como parámetros son iguales o no.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Object.is()</code> determina si dos valores <a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">son iguales</a>. Dos valores son iguales si se puede asegurar que:</p> + +<ul> + <li>ambos son {{jsxref("undefined")}}</li> + <li>ambos son {{jsxref("null")}}</li> + <li>ambos son <code>true</code> o <code>false</code></li> + <li>ambos son strings y tienen la misma longitud con los mismos carácteres</li> + <li>ambos son el mismo objeto</li> + <li>ambos son números y + <ul> + <li><code>ambos +0 (mayores que 0)</code></li> + <li><code>ambos -0 (menores que 0)</code></li> + <li>ambos son {{jsxref("NaN")}}</li> + <li>o ambos no son cero o no son de tipo {{jsxref("NaN")}} y tienen el mismo valor</li> + </ul> + </li> +</ul> + +<p>Esta comparación <em>no</em> es igual a la que realiza el operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}. El operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}} aplica varias coerciones(comprobaciones) en ambos sentidos (si no tienen el mismo Type) antes de probar la igualdad (lo que resulta en comportamientos como <code>"" == false</code> siendo <code>true</code>), pero <code>Object.is</code> no obliga a niguno de los valores.</p> + +<p>Esta <em>tampoco</em> es igual a la que realiza el operador {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}. El operador {{jsxref("Operators/Comparison_Operators", "===", "#Identity")}} (y el operador {{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}) trata los valores <code>-0</code> <code>y +0</code> como iguales, y además, trata {{jsxref("Number.NaN")}} como no igual a {{jsxref("NaN")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js notranslate">Object.is('foo', 'foo'); // true +Object.is(window, window); // true + +Object.is('foo', 'bar'); // false +Object.is([], []); // false + +var test = { a: 1 }; +Object.is(test, test); // true + +Object.is(null, null); // true + +// Special Cases +Object.is(0, -0); // false +Object.is(-0, -0); // true +Object.is(NaN, 0/0); // true +</pre> + +<h2 id="Polyfill_para_navegadores_no_ES6"><a href="https://en.wikipedia.org/wiki/Polyfill">Polyfill</a> para navegadores no ES6</h2> + +<p><code>Object.is()</code> es una adición propuesta en el estandar ECMA-262; y como tal, puede no estar presente en todos los navegadores. Para los casos en que no tenga disponible este método, podría utilizar este código haciendolo que se cargue antes que cualquier otro script. Esto permite que puedas utilizar <code>Object.is()</code> en los navegadores que no lo llevan incluído.</p> + +<pre class="brush: js notranslate">if (!Object.is) { + Object.is = function(x, y) { + // SameValue algorithm + if (x === y) { // Steps 1-5, 7-10 + // Steps 6.b-6.e: +0 != -0 + return x !== 0 || 1 / x === 1 / y; + } else { + // Step 6.a: NaN == NaN + return x !== x && 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('ES6', '#sec-object.is', 'Object.is')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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("30")}}</td> + <td>{{CompatGeckoDesktop("22")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</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>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>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("22")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparadores de igualdad e identidad</a> —Una comparación de las 3 operaciones de cotejamiento integradas.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/isextensible/index.html b/files/es/web/javascript/reference/global_objects/object/isextensible/index.html new file mode 100644 index 0000000000..30082032ea --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/isextensible/index.html @@ -0,0 +1,144 @@ +--- +title: Object.isExtensible() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Objeto + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isExtensible +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Object.isExtensible()</code></strong> determina si un objeto es extendible (si puede tener propiedades nuevas agregadas a éste).</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.isExtensible(<var>obj</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto a ser revisado.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Los objetos son extendibles por defecto: ellos pueden tener propiedades nuevas agregadas a ellos, y (en motores que soportan {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} la propiedad __proto__) pueden ser modificados. Un objeto puede ser marcado como no extendible usando {{jsxref("Object.preventExtensions()")}}, {{jsxref("Object.seal()")}}, o {{jsxref("Object.freeze()")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Los Objetos nuevos son extendibles (por defecto). +var empty = {}; +Object.isExtensible(empty); // === true + +// ...pero eso puede cambiar. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Objetos sellados por definición son no-extendibles. +var sealed = Object.seal({}); +Object.isExtensible(sealed); // === false + +// Objetos congelados también por definición son no-extendibles. +var frozen = Object.freeze({}); +Object.isExtensible(frozen); // === false +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento pasado a éste método no es un objeto (primitivo), entonces regresará {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como argumento será tratado como si fuera un objeto no-extendible ordinario, simplemente regresa <code>false</code>.</p> + +<pre class="brush: js">Object.isExtensible(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isExtensible(1); +// false (ES6 code) +</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('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>Soporote básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.isExtensible()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/isfrozen/index.html b/files/es/web/javascript/reference/global_objects/object/isfrozen/index.html new file mode 100644 index 0000000000..9a2bc2ee94 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/isfrozen/index.html @@ -0,0 +1,190 @@ +--- +title: Object.isFrozen() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Objeto + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isFrozen +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.isFrozen()</strong></code> determina si un objeto está <em>congelado</em>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.isFrozen(<var>obj</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto a ser revisado.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Un objeto está congelado si y solo si no es {{jsxref("Object.isExtensible()", "extendible", "", 1)}}, todas sus propiedades son no-configurables, y todos los datos de sus propiedades no tienen capacidad de escritura.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Un objeto nuevo es extendible, así que no está congelado. +Object.isFrozen({}); // === false + +// Un objeto vacio el cuál no es extendible está congelado vacuamente. +var vacuouslyFrozen = Object.preventExtensions({}); +Object.isFrozen(vacuouslyFrozen); // === true + +// Un objeto nuevo con una propiedad es tabién extendible, ergo no congelado. +var oneProp = { p: 42 }; +Object.isFrozen(oneProp); // === false + +// Prevenir la extensión de un objeto no lo congela. +// porque la propiedad sigue teniendo capacidad de configuración (y capacidad de escritura). +Object.preventExtensions(oneProp); +Object.isFrozen(oneProp); // === false + +// ...pero eliminar la propiedad congela el objeto vacuamente. +delete oneProp.p; +Object.isFrozen(oneProp); // === true + +// Un ojbeto no-extendible con una propiedad sin capacidad de escritura pero si con capacidad de configuración no está congelado. +var nonWritable = { e: 'plep' }; +Object.preventExtensions(nonWritable); +Object.defineProperty(nonWritable, 'e', { writable: false }); // Le quita la capacidad de escritura. +Object.isFrozen(nonWritable); // === false + +// Quitarle la capacidad de configuración a una propiedad congela el objeto. +Object.defineProperty(nonWritable, 'e', { configurable: false }); // le quita la capacidad de configuración. +Object.isFrozen(nonWritable); // === true + +// Un objeto no-extendible con una propiedad sin capacidad de configuración pero con capacidad de escritura no congela a dicho objeto. +var nonConfigurable = { release: 'the kraken!' }; +Object.preventExtensions(nonConfigurable); +Object.defineProperty(nonConfigurable, 'release', { configurable: false }); +Object.isFrozen(nonConfigurable); // === false + +// Quitarle la capacidad de configuración a esa propiedad congela el objeto. +Object.defineProperty(nonConfigurable, 'release', { writable: false }); +Object.isFrozen(nonConfigurable); // === true + +// A non-extensible object with a configurable accessor property isn't frozen. +var accessor = { get food() { return 'yum'; } }; +Object.preventExtensions(accessor); +Object.isFrozen(accessor); // === false + +// ...but make that property non-configurable and it becomes frozen. +Object.defineProperty(accessor, 'food', { configurable: false }); +Object.isFrozen(accessor); // === true + +// But the easiest way for an object to be frozen is if Object.freeze has been called on it. +var frozen = { 1: 81 }; +Object.isFrozen(frozen); // === false +Object.freeze(frozen); +Object.isFrozen(frozen); // === true + +// By definition, a frozen object is non-extensible. +Object.isExtensible(frozen); // === false + +// Also by definition, a frozen object is sealed. +Object.isSealed(frozen); // === true +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento pasado a éste método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un no-objeto pasado como argumento será tratado como si fuera un objeto ordinario congelado, simplemente regresa <code>true</code>.</p> + +<pre class="brush: js">Object.isFrozen(1); +// TypeError: 1 is not an object (ES5 code) + +Object.isFrozen(1); +// true (ES6 code) +</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('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definición inicial. Implementada en JavaScript 1.8.5.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</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("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristicas</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html new file mode 100644 index 0000000000..8275ebafac --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html @@ -0,0 +1,158 @@ +--- +title: Object.prototype.isPrototypeOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isPrototypeOf +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>isPrototypeOf()</strong></code> comprueba si un objeto se encuentra en la cadena de prototipado de otro.</p> + +<div class="note"> +<p><strong>Nota:</strong> <code>isPrototypeOf</code> difiere del operador {{jsxref("Operators/instanceof", "instanceof")}}. En la expresión "<code>object instanceof AFunction</code>", la cadena de prototipado de <code>object</code> es comprobada contra <code>AFunction.prototype</code>, no contra la propia <code>AFunction</code>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>prototypeObj</var>.isPrototypeOf(<var>obj</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>prototypeObj</code></dt> + <dd>Un objeto para ver comprobado contra cada vínculo en la cadena de prototipado del argumento <strong>object</strong>.</dd> + <dt><code>object</code></dt> + <dd>El object sobre cuya cadena de prototipado se realizará la búsqueda.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>isPrototypeOf</code> permite comprobar si un objetyo existe o no en la cadena de prototipado de otro.</p> + +<p>Por ejemplo, considerese la siguiente cadena de prototipado:</p> + +<pre class="brush: js">function Fee() { + // ... +} + +function Fi() { + // ... +} +Fi.prototype = new Fee(); + +function Fo() { + // ... +} +Fo.prototype = new Fi(); + +function Fum() { + // ... +} +Fum.prototype = new Fo(); +</pre> + +<p>Al final de la secuencia, si se instanci <code>Fum</code> y se necesita verificar si el prototipo de <code>Fi</code> existe en la cadena de prototipado de <code>Fum</code> prototype chain, puede hacerse esto:</p> + +<pre class="brush: js">var fum = new Fum(); +// ... + +if (Fi.prototype.isPrototypeOf(fum)) { + // do something safe +} +</pre> + +<p>Esto, junto con el operador {{jsxref("Operators/instanceof", "instanceof")}} resulta especialmente útil si se tiene código que sólo puede operar cuando se trata de objetos descendientes de una cadena de prototipado específica, p.e., para garantizar que ciertos métodos o propiedades estén presentes en dichos objetos.</p> + +<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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</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>Prestación</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="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li> + <div>{{jsxref("Object.setPrototypeOf()")}}</div> + </li> + <li>{{jsxref("Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/issealed/index.html b/files/es/web/javascript/reference/global_objects/object/issealed/index.html new file mode 100644 index 0000000000..c28437561a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/issealed/index.html @@ -0,0 +1,140 @@ +--- +title: Object.isSealed() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/isSealed +tags: + - ECMAScript5 + - JavaScript + - JavaScript 1.8.5 + - Objeto + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/isSealed +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.isSealed()</strong></code> si el objeto está sellado.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-issealed.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.isSealed(<var>obj</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto que debe ser verificado.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un {{jsxref("Boolean")}} indicando si el objeto dado está sellado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Devuelve <code>true</code> si el objeto está sellado, de lo contrario devuelve <code>false</code>. Un objeto está sellado si no es {{jsxref("Object.isExtensible", "extensible", "", 1)}} y si todas sus propiedades no se pueden configurar y por lo tanto no removibles (pero no necesariamente no modificables).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Los objetos no están sellados por defecto +var empty = {}; +Object.isSealed(empty); // === false + +// Si haces un objeto vacío no extendible, +// está vacíamente sellado +Object.preventExtensions(empty); +Object.isSealed(empty); // === true + +// Lo mismo no es vedad sobre un objeto no vacío, +// a menos que sus propiedades son todas no configurables. +var hasProp = { fee: 'fie foe fum' }; +Object.preventExtensions(hasProp); +Object.isSealed(hasProp); // === false + +// Pero hazlas todas no configurables +// y el objeto se vuelve sellado. +Object.defineProperty(hasProp, 'fee', { + configurable: false +}); +Object.isSealed(hasProp); // === true + +// La manerá más facil de sellar un objeto, por supuesto, +// es Object.seal +var sealed = {}; +Object.seal(sealed); +Object.isSealed(sealed); // === true + +// Un objeto sellado es, por definición, no extendible. +Object.isExtensible(sealed); // === false + +// Un objeto sellado puodría estar congelado, +// pero no tiene que ser. +Object.isFrozen(sealed); // === true +// (Todas las propiedades también no modificables) + +var s2 = Object.seal({ p: 3 }); +Object.isFrozen(s2); // === false +// ('p' todavía es modificable) + +var s3 = Object.seal({ get p() { return 0; } }); +Object.isFrozen(s3); // === true +// (solo la configurabilidad es importante para las propiedades de acceso) +</pre> + +<h2 id="Notes">Notes</h2> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">En ES5, si el argumento de este método no es un objeto (primitivo), entonces causará un </span></font></code>{{jsxref("TypeError")}}. En ES2015, un argumento que no sea un objeto será tratado como si fuera un objeto sellado ordinario, simplemente devuelve <code>true</code>.</p> + +<pre class="brush: js">Object.isSealed(1); +// TypeError: 1 no es un objeto (ES5 code) + +Object.isSealed(1); +// true (ES2015 code) +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.isSealed")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/keys/index.html b/files/es/web/javascript/reference/global_objects/object/keys/index.html new file mode 100644 index 0000000000..d6bd068f2f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/keys/index.html @@ -0,0 +1,156 @@ +--- +title: Object.keys() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/keys +translation_of: Web/JavaScript/Reference/Global_Objects/Object/keys +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El método <code>Object.keys()</code> devuelve un array de las propiedades <strong><code>names</code> </strong>de un objeto, en el mismo orden como se obtienen en un loop normal</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>Object.keys(<var>obj</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto cuyas propiedades enumerables serán devueltas.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un array de strings que representan toda las propiedades del objeto</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Object.keys</code> devuelve un array cuyos elementos son strings correspondientes a las propiedades enumerables que se encuentran directamente en el object. El orden de las propiedades es el mismo que se proporciona al iterar manualmente sobre las propiedades del objeto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js notranslate">var arr = ['a', 'b', 'c']; +console.log(Object.keys(arr)); // console: ['0', '1', '2'] + +// arreglo como objeto +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.keys(obj)); // console: ['0', '1', '2'] + +// arreglo como objeto con nombres ordenados aleatoriamente +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.keys(an_obj)); // console: ['2', '7', '100'] + +// getFoo es una propiedad no enumerable +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 1; + +console.log(Object.keys(my_obj)); // console: ['foo'] +</pre> + +<p>Si quieres todas las propiedades, incluso las no enumerables, mira {{jsxref("Object.getOwnPropertyNames()")}}.</p> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento para este método no es un objeto (uno primitivo), causará un {{jsxref("Global_Objects/TypeError", "TypeError")}}. En ES2015, un argumento no-objeto será coaccionado hacia un objeto.</p> + +<pre class="brush: js notranslate">> Object.keys("foo") +// TypeError: "foo" is not an object (ES5) + +> Object.keys("foo") +// ["0", "1", "2"] (ES2015)</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para añadir soporte <code>Object.keys</code> en entornos más antiguos que no lo soportan de forma nativa, copia el siguiente fragmento:</p> + +<pre class="brush: js notranslate">// De https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys +if (!Object.keys) { + Object.keys = (function() { + 'use strict'; + var hasOwnProperty = Object.prototype.hasOwnProperty, + hasDontEnumBug = !({ toString: null }).propertyIsEnumerable('toString'), + dontEnums = [ + 'toString', + 'toLocaleString', + 'valueOf', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'constructor' + ], + dontEnumsLength = dontEnums.length; + + return function(obj) { + if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) { + throw new TypeError('Object.keys called on non-object'); + } + + var result = [], prop, i; + + for (prop in obj) { + if (hasOwnProperty.call(obj, prop)) { + result.push(prop); + } + } + + if (hasDontEnumBug) { + for (i = 0; i < dontEnumsLength; i++) { + if (hasOwnProperty.call(obj, dontEnums[i])) { + result.push(dontEnums[i]); + } + } + } + return result; + }; + }()); +} +</pre> + +<p>Ten en cuenta que el código anterior incluye claves no-enumerables en IE7 (y quizás IE8), al pasar en un objeto desde una ventana diferente.</p> + +<p>Para un simple Polyfill del Navegador, mira <a href="http://tokenposts.blogspot.com.au/2012/04/javascript-objectkeys-browser.html">Javascript - Compatibilidad de Object.keys en Navegadores</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.14', 'Object.keys')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.keys', 'Object.keys')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Object.keys")}}</div> + + + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Propiedades de enumerabilidad y pertenencia</a></li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.values()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/preventextensions/index.html b/files/es/web/javascript/reference/global_objects/object/preventextensions/index.html new file mode 100644 index 0000000000..50f51214a8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/preventextensions/index.html @@ -0,0 +1,176 @@ +--- +title: Object.preventExtensions() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions +translation_of: Web/JavaScript/Reference/Global_Objects/Object/preventExtensions +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.preventExtensions()</strong></code> previene que nuevas propiedades sean agregadas a un objeto (p.e. previene la extensión futuras al objeto).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.preventExtensions(<var>obj</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto que debería hacerse inextendible.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Un objeto es extendible si propiedades nuevas pueden ser agregadas a este. Object.preventExtensions() marca un objecto como no extendible, así nunca más tendrá propiedades más allá de las tenía en el momento en que fue marcado como no extendible. Note que las propiedades de un objeto no-extendible, en general, aún pueden ser eliminadas. Los intentos de agregar propiedades nuevas a un objeto no-extendible fallarán, ya sea de manera silenciosa o arrojando una excepción {{jsxref("TypeError")}} (comunmente, pero no de manera exclusiva, en {{jsxref("Functions_and_function_scope/Strict_mode", "strict mode", "", 1)}}).</p> + +<p><code>Object.preventExtensions()</code> solo previene la adición de propiedades propias. Las propiedades aún pueden ser agregadas a object.prototype. Sin embargo, llamar <code>Object.preventExtensions()</code> sobre un objeto tambien prevendrá extensiones sobre la propiedad {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}}.</p> + +<p>Si hay una manera de cambiar un objeto extendible a uno no-extendible, hay una manera de hacer lo opuesto en ECMAScript 5.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Object.preventExtensions regresa el objeto hecho no-extendible. +var obj = {}; +var obj2 = Object.preventExtensions(obj); +obj === obj2; // true + +// Los Objetos son extendibles por defecto. +var empty = {}; +Object.isExtensible(empty); // === true + +// ...pero pueden ser cambiados. +Object.preventExtensions(empty); +Object.isExtensible(empty); // === false + +// Object.defineProperty arroja una excepción cuando se agrega +// una propiedad nueva a un objeto no-extendible. +var nonExtensible = { removable: true }; +Object.preventExtensions(nonExtensible); +Object.defineProperty(nonExtensible, 'new', { value: 8675309 }); // arroja TypeError + +// En modo estricto, tratar de agregar propiedades nuevas +// a un objeto no-extensible arroja una excepción TypeError. +function fail() { + 'use strict'; + nonExtensible.newProperty = 'FAIL'; // arroja TypeError +} +fail(); + +// EXTENSION (solo funciona en motores que soporten __proto__ +// (el cual esta obsoleto. Usar Object.getPrototypeOf en su lugar)): +// La propiedad prototype de un objeto no-extendible es inmutable. +var fixed = Object.preventExtensions({}); +fixed.__proto__ = { oh: 'hai' }; // arroja TypeError +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento pasado a este método no es un objeto (primitivo), entonces causará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si fuera un objeto ordinario no-extendible, simplemente lo regresa.</p> + +<pre class="brush: js">Object.preventExtensions(1); +// TypeError: 1 is not an object (ES5 code) + +Object.preventExtensions(1); +// 1 (ES6 code) +</pre> + +<h2 id="Especificación">Especificación</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('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementada en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + <tr> + <td>Comportamiento en ES6 para un no-objeto pasado como argumento</td> + <td>{{CompatChrome("44")}}</td> + <td>{{CompatGeckoDesktop("35.0")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatOpera("31")}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Comportamiento en ES6 para no-objetos pasados como argumentos</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("35.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.seal()")}}</li> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> + <li>{{jsxref("Reflect.preventExtensions()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html b/files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..b2ede9dd60 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html @@ -0,0 +1,185 @@ +--- +title: Object.prototype.propertyIsEnumerable() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable +tags: + - JavaScript + - Objecto + - Property + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>propertyIsEnumerable()</strong></code> regresa un Boleano indicando si la propiedad especificada es enumerable.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>obj</var>.propertyIsEnumerable(<var>prop</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Nombre de la propiedad a probar.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Todos los objetos tienen un método <code>propertyIsEnumerable</code>. Este método puede determinar si la propiedad especificada en el objeto puede ser enumerada por un ciclo {{jsxref("Statements/for...in", "for...in")}}, con la excepción de propiedades heredadas a través de prototype. Si el objeto no tiene la propiedad especificada, este método regresa un valor <code>false</code>.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Uso_básico_de_propertyIsEnumerable">Uso básico de <code>propertyIsEnumerable</code></h3> + +<p>El siguiente ejemplo muestra el uso de <code>propertyIsEnumerable</code> en objetos y arrays:</p> + +<pre class="brush: js">var o = {}; +var a = []; +o.prop = 'es enumerable'; +a[0] = 'es enumerable'; + +o.propertyIsEnumerable('prop'); // regresa true +a.propertyIsEnumerable(0); // regresa true +</pre> + +<h3 id="Definidas_por_usuario_vs_predefinidas">Definidas por usuario vs predefinidas</h3> + +<p>El siguiente ejemplo demuestra la enumerabilidad de las propiedades definidas por el usuario contra las predefinidas:</p> + +<pre class="brush: js">var a = ['es enumerable']; + +a.propertyIsEnumerable(0); // regresa true +a.propertyIsEnumerable('length'); // regresa false + +Math.propertyIsEnumerable('random'); // regresa false +this.propertyIsEnumerable('Math'); // regresa false +</pre> + +<h3 id="Directa_vs_heredadas">Directa vs heredadas</h3> + +<pre class="brush: js">var a = []; +a.propertyIsEnumerable('constructor'); // regresa false + +function primerConstructor() { + this.propiedad = 'no es enumerable'; +} + +primerConstructor.prototype.primerMetodo = function() {}; + +function segundoConstructor() { + this.metodo = function() { return 'es enumerable'; }; +} + +secondConstructor.prototype = new primerConstructor; +secondConstructor.prototype.constructor = segundoConstructor; + +var o = new segundoConstructor(); +o.propiedadArbitraria = 'is enumerable'; + +o.propertyIsEnumerable('propiedadArbitraria '); // regresa true +o.propertyIsEnumerable('metodo'); // regresa true +o.propertyIsEnumerable('propiedad'); // regresa false + +o.propiedad = 'es enumerable'; + +o.propertyIsEnumerable('propiedad'); // regresa true + +// Regresan false por estar en el prototipo el cual no es +// considerado por propertyIsEnumerable (a pesar de que las dos ultimas son +// iterables con un for-in) +o.propertyIsEnumerable('prototype'); // regresa false (como en JS 1.8.1/FF3.6) +o.propertyIsEnumerable('constructor'); // regresa false +o.propertyIsEnumerable('firstMethod'); // regresa false +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Notas_específicas_para_Gecko">Notas específicas para Gecko</h2> + +<p>Al inicio de JavaScript 1.8.1 (in Firefox 3.6), <code>propertyIsEnumerable('prototype')</code> regresa <code>false</code> en lugar de <code>true</code>; esto hace que el resultado cumpla con la especificación de ECMAScript 5.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/proto/index.html b/files/es/web/javascript/reference/global_objects/object/proto/index.html new file mode 100644 index 0000000000..24055ac261 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/proto/index.html @@ -0,0 +1,128 @@ +--- +title: Object.prototype.__proto__ +slug: Web/JavaScript/Referencia/Objetos_globales/Object/proto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/proto +--- +<div class="warning"> +<p><strong>Advertencia:</strong> Cambiar la propiedad <code>[[Prototype]]</code> de un objeto es, por como los navegadores modernos optimizan las propiedades de acceso, una operación muy lenta en <strong><em>todos</em></strong> los navegadores y motores JavaScript. Los efectos en el rendimiento de alterar la herencia son muchos y delicados, y no se limita simplemente al tiempo que necesita la asignación <code>obj.__proto__ = ...</code> sentencia, sin embargo afecta a <strong><em>cualquier</em></strong> código que tiene acceso a <strong><em>cualquier</em></strong> objeto cuya propiedad <code>[[Prototype]]</code> ha sido alterada, por lo que se debe de tener mucho cuidado.</p> + +<p>Si el rendimiento en tu aplicación es necesario, deberías evitar modificar la propiedad <code>[[Prototype]]</code> de un objeto. En su lugar, crea un objecto nuevo con la propiedad <code>[[Prototype]]</code> deseada usando {{jsxref("Object.create()")}}.</p> +</div> + +<div class="warning"> +<p><strong>Advertencia:</strong> Mientras <code>Object.prototype.__proto__</code> es soportado hoy día por la mayoría de navegadores, su existencia y comportamiento exacto solo ha sido estandarizado en la especificación ECMAScript 6 como una característica de legado y para asegurar la compatibilidad entre los navegadores web. Para tener un mejor soporte, es recomendable que se utilice {{jsxref("Object.getPrototypeOf()")}} para obtener el prototipo de un objeto.</p> +</div> + +<div>{{JSRef}}</div> + +<p>La propiedad <code>__proto__</code> de {{jsxref("Object.prototype")}} es una propiedad llamada de acceso (una función getter y también función setter) que provee acceso al interior de <code>[[Prototype]]</code> (ya sea un objeto o {{jsxref("Global_Objects/null", "null")}}) del objeto a través del cual se accede a ella.</p> + +<p>El uso de la propiedad <code>__proto__</code> es polémico actualmente, y está rechazado. Originalmente, nunca fué incluído en la especificación de EcmaScript, pero los navegadores modernos decidieron implementarla de todas maneras. Sólo actualmente, <code>la propiedad __proto__</code> ha sido estandarizada en la especificación del lenguaje ECMAScript 6, para asegurar la compatibilidad entre navegadores, por lo tanto, esta será soportada en el futuro. Actualmente está obsoleta en favor de {{jsxref("Object.getPrototypeOf")}}/{{jsxref("Reflect.getPrototypeOf")}} y {{jsxref("Object.setPrototypeOf")}}/{{jsxref("Reflect.setPrototypeOf")}} (aunque todavía establecer el <code>[[Prototype]]</code> de un objeto es una operación muy lenta, por lo que si nos preocupa el rendimiento, debemos de evitarlo).</p> + +<p>La propiedad <code>__proto__</code> puede ser usada también en un objeto definido de forma literal, para establecer el <code>[[Prototype]]</code> en la creación de este, como alternativa a {{jsxref("Object.create()")}}. Ver: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush: js">var shape = {}; +var circle = new Circle(); + +// Establecer el objeto prototype. +// OBSOLETO. Esto es solo un ejemplo. NO HACER ESTO en código real. +shape.__proto__ = circle; + +// Obtener el objeto prototype +console.log(shape.__proto__ === circle); // true +</pre> + +<p>Nota: esto es, dos guiones bajos, seguidos de cinco carácteres "proto", seguido de dos guiones bajos mas.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función getter <code>__proto__</code>el valor interno del <code>[[Prototype]]</code> de un objeto. Para objetos creados usando un objeto literal, el valor es {{jsxref("Object.prototype")}}. Para objetos creados usando literales de array, este valor es {{jsxref("Array.prototype")}}. Para funciones, este valor {{jsxref("Function.prototype")}}. Para objetos creados utilizando el operador new fun, donde <strong>fun</strong> es una función constructora incluída en JavaScript ({{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("String")}}, etcétera—incluyendo nuevos contrusctores conforme JavaScript evoluciona), este valor es <code>fun.prototype</code>. (Esto es, si el constructor no devuelve un objeto de forma explícita, o el <code>fun.prototype</code> ha sido reasignado desde que la instancia fué creada).</p> + +<p>El <code>__proto__</code> setter la mutación del objeto <code>[[Prototype]]</code> de un objeto. El objeto debe ser extensible según {{jsxref("Object.isExtensible()")}}: si no, un {{jsxref("Global_Objects/TypeError", "TypeError")}} es lanzado. El valor proveído debe ser un objeto o {{jsxref("Global_Objects/null", "null")}}. Provetendo otro tipo de valor no hará nada.</p> + +<p>Para entender como los prototipos son usados para herencia, ver el artículo <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Inheritance and the prototype chain</a>.</p> + +<p>La propiedad <code>__proto__</code> es una simple propiedad de acceso a {{jsxref("Object.prototype")}} que consiste en una función getter y setter. Un acceso a la propiedad <code>__proto__</code> que eventualmente consulta {{jsxref("Object.prototype")}} encontrará esta propiedad, pero un acceso que no consulta {{jsxref("Object.prototype")}} no lo encontrará. Si alguna otra propiedad <code>__proto__</code> es encontrada antes {{jsxref("Object.prototype")}} es consultada, esta propiedad sera ocultada por la encontrada en {{jsxref("Object.prototype")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-additional-properties-of-the-object.prototype-object', 'Object.prototype.__proto__')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Incluída en el anexo (normativa) para características de legado ECMAScript para navegadores web (observar que la especificación de codificación es lo que ya está en las implementaciones).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caracteristica</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="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<p>Mientras la especificación ECMAScript 2015 (ES6) dicta que el soporte para <code>__proto__</code> es requerido <em>solo</em> para navegadores web (a pesar de ser normativo), otros medios pueden soportarlo por uso de legado.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.setPrototypeOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/seal/index.html b/files/es/web/javascript/reference/global_objects/object/seal/index.html new file mode 100644 index 0000000000..42c89175a3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/seal/index.html @@ -0,0 +1,167 @@ +--- +title: Object.seal() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/seal +translation_of: Web/JavaScript/Reference/Global_Objects/Object/seal +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.seal()</strong></code> sella un objeto, previniendo que puedan añadirse nuevas propiedades al mismo, y marcando todas las propiedades existentes como no-configurables. Los valores de las propiedades presentes permanecen pudiendo cambiarse en tanto en cuanto dichas propiedades sean de escritura.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.seal(<var>obj</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto que ha de ser sellado.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Por defecto, los objetos son {{jsxref("Object.isExtensible()", "extensibles", "", 1)}} (pueden añadirse nuevas propiedades a los mismos). Sellar un objeto previene que nuevas propiedades puedan ser añadidas y marca todas las propiedades existentes como no-configurables. Esto tiene el efecto de hacer fijo e inmutable el juego de propiedades del objeto. Al hacer todas las propiedades no-configurables previene también que se puedan convertir propiedades de datos en propiedades de acceso y viceversa, pero no evita que los valores de las propiedades de datos puedan ser modificados. Intentar eliminar o añadir propiedades a un objeto sellado, o convertir una propiedad de datos en una propiedad de acceso fallará, bien silenciadamente o bien produciendo un {{jsxref("TypeError")}} (más frecuentemente, aunque no exclusivamente, con código en {{jsxref("Strict_mode", "modo estricto", "", 1)}}).</p> + +<p>La cadena de prototiado permanece inalterada. No obstante, la propiedad {{jsxref("Object.proto", "__proto__")}} {{deprecated_inline}} es también sellada.</p> + +<p>Retorna una referencia al Objeto pasado.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var obj = { + prop: function() {}, + foo: 'bar' +}; + +// Pueden añadirse nuevas propiedades, propiedades existentes pueden cambiarse o eliminarse. +obj.foo = 'baz'; +obj.lumpy = 'woof'; +delete obj.prop; + +var o = Object.seal(obj); + +o === obj; // true +Object.isSealed(obj); // === true + +// Sigue permitido modificar valores de propiedades en un objeto sellado. +obj.foo = 'quux'; + +// Pero no puedes convertir propiedades de datos en propiedades de acceso, ni viveversa +Object.defineProperty(obj, 'foo', { get: function() { return 'g'; } }); // produce un TypeError + +// Ahora, cualquier cambio que no sea modificar valores de propiedades fallará +obj.quaxxor = 'the friendly duck'; // silenciosamente, no añadirá la propiedad +delete obj.foo; // silenciosamente, no eliminará la propiedad + +// ...y en modo estricto esos intentos producirán TypeErrors. +function fail() { + 'use strict'; + delete obj.foo; // genera un TypeError + obj.sparky = 'arf'; // genera un TypeError +} +fail(); + +// Intentar añadir propiedades mediante Object.defineProperty también fallará. +Object.defineProperty(obj, 'ohai', { value: 17 }); // genera un TypeError +Object.defineProperty(obj, 'foo', { value: 'eit' }); // cambia el valor exisitente +</pre> + +<h2 id="Notas">Notas</h2> + +<p>En ES5, si el argumento de este método no es un objeto (una primitiva), se generará un {{jsxref("TypeError")}}. En ES6, un argumento no-objeto será tratado como si se sellase un objeto ordinario, símplemente retornándolo.</p> + +<pre class="brush: js">Object.seal(1); +// TypeError: 1 no es un objeto (código ES5) + +Object.seal(1); +// 1 (código ES6) +</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">Observaciones</th> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.8', 'Object.seal')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.8.5.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.seal', 'Object.seal')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestación</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("6")}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("12")}}</td> + <td>{{CompatSafari("5.1")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Prestiación</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.isSealed()")}}</li> + <li>{{jsxref("Object.preventExtensions()")}}</li> + <li>{{jsxref("Object.isExtensible()")}}</li> + <li>{{jsxref("Object.freeze()")}}</li> + <li>{{jsxref("Object.isFrozen()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html new file mode 100644 index 0000000000..ff32fc5738 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html @@ -0,0 +1,237 @@ +--- +title: Object.setPrototypeOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf +tags: + - ECMAScript6 + - Experimental + - JavaScript + - Método(2) + - Objeto +translation_of: Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf +--- +<p>{{JSRef}}</p> + +<p>El método <code><strong>Object.setPrototypeOf()</strong></code> establece el prototipo (p.e., la propiedad interna <code>[[Prototype]]</code>) de un objeto especificado a otro objeto o sino establece {{jsxref("null")}}.</p> + +<div class="warning"> +<p><strong>Adverdencia:</strong> Cambiar la propiedad <code>[[Prototype]]</code> de un objeto, debido a la naturaleza de la optimización del acceso a propiedades de los motores modernos de JavaScript, es una operación bastante lenta, en todo <strong><em>todo</em></strong> navegador y motor de JavaScript. Los efectos sobre el rendimiento al alterar la herencia son sutiles y vastos., y no están limitados a simplemente el tiempo gastado en la sentencia <code>obj.__proto___ = ...</code>, but may extend to <strong><em>any</em></strong> code that has access to <strong><em>any</em></strong> object whose <code>[[Prototype]]</code> has been altered. If you care about performance you should avoid setting the <code>[[Prototype]]</code> of an object. Instead, create a new object with the desired <code>[[Prototype]]</code> using {{jsxref("Object.create()")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.setPrototypeOf(<var>obj</var>, <var>prototype</var>);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto al que se ha de establecer el prototipo.</dd> + <dt><code>prototype</code></dt> + <dd>El nuevo prototipo del objeto, (un objeto o {{jsxref("null")}}).</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Arroja una excepción del tipo {{jsxref("TypeError")}} si el objeto cuyo <code>[[Prototype]]</code> se va a modificar no es extensible de acuerdo con {{jsxref("Object.isExtensible()")}}. No hace nada si el parametro <code>prototype</code> no es un objeto o {{jsxref("null")}} (p.e., número, cadena, booleano, o {{jsxref("undefined")}}). De cualquier otra forma, este método cambia la propiedad <code>[[Prototype]]</code> del <code>obj</code> al valor nuevo.</p> + +<p><code>Object.setPrototypeOf()</code> está en el último borrador del estandar ECMAScript6. Es considerado generalmente la manera adecuada de establecer el prototipo de un objeto, contra la propiedad más controversial {{jsxref("Object.prototype.__proto__")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var dict = Object.setPrototypeOf({}, null); +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Utilizando la vieja propiedad {{jsxref("Object.prototype.__proto__")}}, podemos definir facilmente <code>Object.setPrototypeOf</code> si aún no está disponible:</p> + +<pre class="brush: js">// Solo funciona en Chrome y FirefoxOnly works in Chrome y FireFox, no funciona en IE: +Object.setPrototypeOf = Object.setPrototypeOf || function(obj, proto) { + obj.__proto__ = proto; + return obj; +} +</pre> + +<h2 id="Agregando_cadenas_de_prototipo">Agregando cadenas de prototipo</h2> + +<p>Una combinación de <code>Object.getPrototypeOf()</code> y {{jsxref("Object.proto", "Object.prototype.__proto__")}} permite agregar una nueva cadena de prototipos al nuevo prototipo del objeto.</p> + +<pre class="brush: js">/** +*** Object.appendChain(@object, @prototype) +* +* Agrega el primer prototipo no-nativo de una cadena a un nuevo prototipo. +* Retorna @object (si es Primitivo (Primitive value) será transoformado a Objeto). +* +*** Object.appendChain(@object [, "@arg_name_1", "@arg_name_2", "@arg_name_3", "..."], "@function_body") +*** Object.appendChain(@object [, "@arg_name_1, @arg_name_2, @arg_name_3, ..."], "@function_body") +* +* Agrega el primer prototipo no-nativo de una cadena a la Function.prototype nativa del objeto, luego agrega una +* ueva Function(["@arg"(s)], "@function_body") a la cadena. +* Retorna la función. +* +**/ + +Object.appendChain = function(oChain, oProto) { + if (arguments.length < 2) { + throw new TypeError('Object.appendChain - Not enough arguments'); + } + if (typeof oProto === 'number' || typeof oProto === 'boolean') { + throw new TypeError('second argument to Object.appendChain must be an object or a string'); + } + + var oNewProto = oProto, + oReturn = o2nd = oLast = oChain instanceof this ? oChain : new oChain.constructor(oChain); + + for (var o1st = this.getPrototypeOf(o2nd); + o1st !== Object.prototype && o1st !== Function.prototype; + o1st = this.getPrototypeOf(o2nd) + ) { + o2nd = o1st; + } + + if (oProto.constructor === String) { + oNewProto = Function.prototype; + oReturn = Function.apply(null, Array.prototype.slice.call(arguments, 1)); + this.setPrototypeOf(oReturn, oLast); + } + + this.setPrototypeOf(o2nd, oNewProto); + return oReturn; +} +</pre> + +<h3 id="Uso">Uso</h3> + +<h4 id="Primer_ejemplo_Agregar_una_cadena_a_un_prototipo">Primer ejemplo: Agregar una cadena a un prototipo</h4> + +<pre class="brush: js">function Mammal() { + this.isMammal = 'yes'; +} + +function MammalSpecies(sMammalSpecies) { + this.species = sMammalSpecies; +} + +MammalSpecies.prototype = new Mammal(); +MammalSpecies.prototype.constructor = MammalSpecies; + +var oCat = new MammalSpecies('Felis'); + +console.log(oCat.isMammal); // 'yes' + +function Animal() { + this.breathing = 'yes'; +} + +Object.appendChain(oCat, new Animal()); + +console.log(oCat.breathing); // 'yes' +</pre> + +<h4 id="Segundo_ejemplo_Transofrmando_un_valor_Primitivo_en_una_instancia_de_su_constructor_y_agregar_su_cadena_al_prototipo">Segundo ejemplo: Transofrmando un valor Primitivo en una instancia de su constructor y agregar su cadena al prototipo</h4> + +<pre class="brush: js">function Symbol() { + this.isSymbol = 'yes'; +} + +var nPrime = 17; + +console.log(typeof nPrime); // 'number' + +var oPrime = Object.appendChain(nPrime, new Symbol()); + +console.log(oPrime); // '17' +console.log(oPrime.isSymbol); // 'yes' +console.log(typeof oPrime); // 'object' +</pre> + +<h4 id="Tercer_ejemplo_Agregando_una_cadena_a_la_Function.prototype_de_un_objeto_y_agregando_una_nueva_función_a_la_cadena">Tercer ejemplo: Agregando una cadena a la Function.prototype de un objeto y agregando una nueva función a la cadena</h4> + +<pre class="brush: js">function Person(sName) { + this.identity = sName; +} + +var george = Object.appendChain(new Person('George'), + 'console.log("Hello guys!!");'); + +console.log(george.identity); // 'George' +george(); // 'Hello guys!!' +</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-object.setprototypeof', 'Object.setProtoypeOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div>{{CompatibilityTable}}</div> + +<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("34")}}</td> + <td>{{CompatGeckoDesktop("31")}}</td> + <td>{{CompatIE("11")}}</td> + <td>{{CompatVersionUnknown}}</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>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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("31")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Reflect.setPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.isPrototypeOf()")}}</li> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li>{{jsxref("Object.prototype.__proto__")}} </li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html new file mode 100644 index 0000000000..d0de708b98 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html @@ -0,0 +1,106 @@ +--- +title: Object.prototype.toLocaleString() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toLocaleString +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>toLocaleString()</strong></code> devuelve un string que representa a un objeto. Este método está pensado para ser redefinido en los objetos derivados, para los propósitos específicos de cada configuración regional.</p> + +<div>{{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>objeto</var>.toLocaleString()</pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un string que representa al objeto.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>{{jsxref("Object")}}'s <code>toLocaleString</code> devuelve el resultado de llamar a {{jsxref("Object.toString", "toString()")}}.</p> + +<p>Se proporciona esta función para que los objetos dispongan de un método <code>toLocaleString</code> genérico, aunque puede que no todos la utilicen. Véase la lista siguiente.</p> + +<h3 id="Objetos_que_redefinen_toLocaleString">Objetos que redefinen <code>toLocaleString</code></h3> + +<ul> + <li>{{jsxref("Array")}}: {{jsxref("Array.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Number")}}: {{jsxref("Number.prototype.toLocaleString()")}}</li> + <li>{{jsxref("Date")}}: {{jsxref("Date.prototype.toLocaleString()")}}</li> + <li>{{jsxref("TypedArray")}}: {{jsxref("TypedArray.prototype.toLocaleString()")}}</li> + <li>{{jsxref("BigInt")}}: {{jsxref("BigInt.prototype.toLocaleString()")}}</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Redefinición_de_toLocaleString_en_Array">Redefinición de toLocaleString() en Array</h3> + +<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code> se puede utilizar <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString">toLocaleString()</a></code> para imprimir los valores del <em>array</em> como un string, con indicadores opcionales de configuración regional (como símbolos de moneda) aplicados.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js notranslate">const unArray = [4, 7, 10]; + +let preciosEnEuros = unArray.toLocaleString('fr', { style: 'currency', currency: 'EUR'}); +// "4,00 €,7,00 €,10,00 €"</pre> + +<h3 id="Redefinición_de_toLocaleString_para_Date">Redefinición de toLocaleString() para Date</h3> + +<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code> se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString">toLocaleString()</a></code> para imprimir fechas en un formato adecuado a la configuración regional.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js notranslate">const unaFecha = new Date(Date.now()); +// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox"><span class="objectTitle">"</span>2020-07-07T19:51:44.046Z<span class="Date">" + +</span></span></span></span></span>let fechaAleman = unaFecha.toLocaleString('de'); +// "7.7.2020, 21:55:22" + +var fechaFrances= unaFecha.toLocaleString('fr'); +//"07/07/2020 à 21:55:22"</pre> + +<h3 id="Redefinición_de_toLocaleString_para_Number">Redefinición de toLocaleString() para Number</h3> + +<p>En los objetos <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">toLocaleString()</a></code> para imprimir números de forma adecuada a la configuración regional, p. ej. para usar los separadores de miles correctos.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js notranslate">const unNumero = 2901234564; +// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-number">"2901234564" + +</span></span></span></span>let numeroAleman = unNumero.toLocaleString('de'); +// "2.901.234.564" + +let numeroFrances = unNumero.toLocaleString('fr'); +// "2 901 234 564"</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-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Object.toLocaleString")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/tosource/index.html b/files/es/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..713a176b0b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,126 @@ +--- +title: Object.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/toSource +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <strong><code>toSource()</code></strong> regresa una cadena representando el código fuente del objeto.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>Object.toSource(); +<var>obj</var>.toSource(); +</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>Una cadena representando el código fuente del objeto.</p> + +<h2 id="Description">Description</h2> + +<p>EL método <code>toSource()</code> regresa los siguientes valores:</p> + +<ul> + <li>Para el objeto incorporado {{jsxref("Object")}}, <code>toSource()</code> regresa la siguiente cadena indicando que el código fuente no está disponible: + + <pre class="brush: js">function Object() { + [native code] +} +</pre> + </li> + <li>Para instancias de {{jsxref("Object")}}, <code>toSource()</code> regresa una cadena representando el código fuente.</li> +</ul> + +<p>Puedes llamar el método <code>toSource()</code> durante el depurado para examinar el contenido de un objeto.</p> + +<h3 id="Sobreescribir_el_método_toSource()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;">Sobreescribir el método </span></font>toSource()</code></h3> + +<p>Es seguro para los objetos sobreescribir el método <strong>toSource()</strong><strong>.</strong> Por ejemplo:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; +} + +Person.prototype.toSource = function Person_toSource() { + return 'new Person(' + uneval(this.name) + ')'; +}; + +console.log(new Person('Joe').toSource()); // ---> nueva Person("Joe") +</pre> + +<h3 id="Métodos_de_toSource()_incorporados">Métodos de <code>toSource()</code> incorporados</h3> + +<p>Cada tipo fundamental de JavaScript tiene su propio método <code>toSource()</code>. Éstos objetos son:</p> + +<ul> + <li>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Array")}} object.</li> + <li>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Boolean")}} object.</li> + <li>{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Date")}} object.</li> + <li>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Function")}} object.</li> + <li>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Number")}} object.</li> + <li>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("RegExp")}} object.</li> + <li>{{jsxref("SIMD.toSource()", "SIMD.%type%.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("SIMD")}} objects.</li> + <li>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("String")}} object.</li> + <li>{{jsxref("Symbol.prototype.toSource()")}} {{non-standard_inline}} — {{jsxref("Symbol")}} object.</li> + <li><code>Math.toSource()</code> — Regrsa la cadena "Math".</li> +</ul> + +<h3 id="Limitaciones_en_objetos_cíclicos">Limitaciones en objetos cíclicos</h3> + +<p>EN el caso de los objetos que contienen referencia a ellos mismos, por ejemplo, una lista enlazada cíclicamente o un árbol que puede ser atravesado en ambas formas, <code>toSource()</code> no recreará la referencia a sí mismo, a partir de Firefox 24. Por ejemplo:</p> + +<pre class="brush: js">var obj1 = {}; +var obj2 = { a: obj1 }; +obj1.b = obj2; + +console.log('Ciclico: ' + (obj1.b.a == obj1)); + +var objSource = obj1.toSource(); // regresa "({b:{a:{}}})" + +obj1 = eval(objSource); + +console.log('Ciclico: ' + (obj1.b.a == obj1)); +</pre> + +<p>Si una estructura cíclica es usada y se necesita el método <code>toSource()</code>, el objeto debe proveer la sobreescritura de <code>toSource()</code>, ya sea usando una referencia a un constructor o proveyendo una función anónima.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toSource()">Usando <code>toSource()</code></h3> + +<p>El código siguiente define el objeto tipo <code>Dog</code> y crea a <code>theDog</code>, un objeto tipo <code>Dog</code>:</p> + +<pre class="brush: js">function Dog(name, breed, color, sex) { + this.name = name; + this.breed = breed; + this.color = color; + this.sex = sex; +} + +theDog = new Dog('Gabby', 'Lab', 'chocolate', 'female'); +</pre> + +<p>Llamando al método <code>toSource() de</code> <code>theDog</code> muestra el código JavaScript que define al objeto:</p> + +<pre class="brush: js">theDog.toSource(); +// returns ({name:"Gabby", breed:"Lab", color:"chocolate", sex:"female"}) +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ningún estándar. Implementado en JavaScript 1.3.</p> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.toSource")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/tostring/index.html b/files/es/web/javascript/reference/global_objects/object/tostring/index.html new file mode 100644 index 0000000000..a9ffc11535 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/tostring/index.html @@ -0,0 +1,70 @@ +--- +title: Object.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/toString +tags: + - JavaScript + - Method + - Object + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toString +--- +<div>{{JSRef("Objetos_globales", "Object")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Devuelve una cadena que representa al objeto.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code>toString() </code></p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Todos los objetos tienen un método <code>toString</code> que se llama automáticamente cuando el objeto se representa como un valor de texto o cuando un objeto se referencia de tal manera que se espera una cadena. Por defecto, el método <code>toString</code> es heredado por todos los objetos que descienden de <code>Object</code>. Si este método no se sobreescribe en el objeto personalizado, <code>toString</code> devuelve <code>{{ mediawiki.external('object<em>type</em> ') }}</code>, donde <code><em>type</em> </code> es el tipo de objeto. El siguiente código ilustra esto:</p> + +<pre class="brush: js">var objeto = new Object(); +objeto.toString(); // Devuelve [object Object] +</pre> + +<h3 id="Examples" name="Examples">Ejemplos</h3> + +<h4 id="Sobreescribir_el_m.C3.A9todo_por_defecto_toString" name="Sobreescribir_el_m.C3.A9todo_por_defecto_toString">Sobreescribir el método por defecto <code>toString</code></h4> + +<p>Puede crear una función que sea llamada en lugar del método predeterminado <code>toString</code>. El método <code>toString</code> no toma argumentos y debería devolver una cadena. El método <code>toString</code> que cree puede ser cualquier valor que quiera, pero será más útil si aporta información sobre el objeto.</p> + +<p>El siguiente código define el tipo de objeto <code>Perro</code> y crea <code>elPerro</code>, un objeto de tipo <code>Perro</code>:</p> + +<pre class="brush: js">function Perro(nombre,criadero,color,sexo) { + this.nombre=nombre; + this.criadero=criadero; + this.color=color; + this.sexo=sexo; +} + +elPerro = new Perro("Gabby","Laboratorio","chocolate","femenino") +</pre> + +<p>Si llama al método <code>toString</code> en el objeto personalizado, devuelve el valor predeterminado heredado de <code>Object</code>:</p> + +<pre class="brush: js">elPerro.toString() //devuelve [object Object] +</pre> + +<p>El siguiente código crea y asigna <code>perroToString</code> para sobreescribir el método predeterminado <code>toString</code>. Esta función genera una cadena que contiene nombre, criadero, color, y sexo del objeto, en la forma "<code>propiedad = valor;</code>".</p> + +<pre class="brush: js">Perro.prototype.toString = function perroToString() { + var retorno = "Perro " + this.nombre + " es " + this.sexo + " " + this.color + " " + this.criadero; + return retorno; +} +</pre> + +<p>Con el código precedente en su lugar, cualquier vez que se use <code>elDog</code> en un contexto de una cadena, JavaScript automáticamente llamará a la función <code>perroToString</code>, la cuál devuelve la siguiente cadena:</p> + +<pre>Perro Gabby es femenino chocolate Laboratorio +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/valueof/index.html b/files/es/web/javascript/reference/global_objects/object/valueof/index.html new file mode 100644 index 0000000000..5cf466078d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/valueof/index.html @@ -0,0 +1,157 @@ +--- +title: Object.prototype.valueOf() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/valueOf +translation_of: Web/JavaScript/Reference/Global_Objects/Object/valueOf +--- +<div>{{JSRef("Global_Objects", "Object")}}</div> + +<p>El método <code><strong>valueOf()</strong></code> retorna el valor primitivo del objeto especificado.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>object</var>.valueOf()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>El valor primitivo del objeto especificado.</p> + +<p> </p> + +<p>{{EmbedInteractiveExample("pages/js/object-prototype-valueof.html")}}</p> + +<p> </p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>JavaScript utiliza el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> para convertir un objeto a un valor primitivo. Raramente usted necesitará invocar el método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> por su cuenta; JavaScript lo realizará de forma automática cuando encuentre un objeto, donde un valor primitivo es esperado.</span></p> + +<p>Por defecto, el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> es heredado por cada objeto descendiente de </span>{{jsxref("Object")}}.<span style="line-height: 1.5;"> Cada objeto incorporado en el núcleo del lenguaje sobreescribe este método para retornar un valor apropiado. Si un objeto no tiene un valor primitivo, </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> devuelve el objeto en sí.</span></p> + +<p>Puede utilizar <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf </span><span style="line-height: 1.5;">dentro de su propio código para convertir un objeto incorporado en el núcleo del lenguaje en un valor primitivo. Cuando usted crea un objeto personalizado, puede sobreescribir el comportamiento de </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">Object.prototype.valueOf()</span><span style="line-height: 1.5;"> para invocar un método personalizado, en vez de utilizar el método por defecto </span><span style="line-height: 1.5;">{{jsxref("Object")}}.</span></p> + +<h3 id="Sobreescribiendo_valueOf_para_objetos_personalizados">Sobreescribiendo <code>valueOf</code> para objetos personalizados</h3> + +<p>Puede crear una función para ser invocada en lugar de utilizar el método <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> por defecto. Su función no debe contener ningún parámetro.</span></p> + +<p><span style="line-height: 1.5;">Suponga que tiene un objeto de tipo </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">myNumberType</span><span style="line-height: 1.5;"> y usted quiere crear un método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> para este. El código a continuación asigna una función personalizada al método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;">:</span></p> + +<pre class="brush: js">myNumberType.prototype.valueOf = function() { return customPrimitiveValue; };</pre> + +<p>Al tener el código anterior funcionando, cada vez que un objeto de tipo <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">myNumberType</span><span style="line-height: 1.5;"> es utilizado en un contexto donde deba ser representado por un valor primitivo, JavaScript automáticamente invocará la función definida en el código anterior.</span></p> + +<p><span style="line-height: 1.5;">El método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;"> es invocado usualmente por JavaScript pero usted puede invocarlo directamente como sigue a continuación:</span></p> + +<pre class="brush: js">myNumber.valueOf()</pre> + +<div class="note"> +<p><strong>Nota: </strong>Objetos en contextos de string realizan la conversión a string a través del método <span style="line-height: 1.5;">{{jsxref("Object.toString", "toString()")}} </span><span style="line-height: 1.5;">, el cual, es diferente de </span><span style="line-height: 1.5;">{{jsxref("String")}}</span><span style="line-height: 1.5;"> para convertir objetos a primitivos string utilizando el método </span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">valueOf</span><span style="line-height: 1.5;">. Todos los objetos pueden ser convertidos a string, si solo "</span><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">[object </span><em>type</em><span style="font-family: 'Courier New','Andale Mono',monospace; line-height: 1.5;">]</span><span style="line-height: 1.5;">". Pero muchos objetos no se pueden convertir a number, boolean o function.</span></p> +</div> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_valueOf" name="Example:_Using_valueOf">Utilizando <code>valueOf</code></h3> + +<pre class="brush: js">function myNumberType(n) { + this.number = n; +} + +myNumberType.prototype.valueOf = function() { + return this.number; +}; + +myObj = new myNumberType(4); +myObj + 3; // 7 +</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">Commentario</th> + </tr> + <tr> + <td>ECMAScript 1ra Edición.</td> + <td>Estándar</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}}</td> + <td>{{Spec2('ESDraft')}} </td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Elemento</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>Elemento</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte 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="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> + <li>{{jsxref("parseInt", "parseInt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/object/values/index.html b/files/es/web/javascript/reference/global_objects/object/values/index.html new file mode 100644 index 0000000000..81b56ef1e0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/object/values/index.html @@ -0,0 +1,97 @@ +--- +title: Object.values() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/values +tags: + - JavaScript + - Objeto + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Object/values +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Object.values()</strong></code><strong> </strong>devuelve un array con los valores correspondientes a las propiedades <strong>enumerables</strong> de un objeto. Las propiedades son devueltas en el mismo orden a como lo haría un bucle {{jsxref("Statements/for...in", "for...in")}} (la única diferencia es que un bucle <code>for-in</code> también enumera las propiedades en la cadena de prototipo de un objeto).</p> + +<p>{{EmbedInteractiveExample("pages/js/object-values.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Object.values(<var>obj</var>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>Objeto cuyas propiedades enumerables serán devueltas.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un <code>array</code><strong> </strong>con las propiedades enumerables del objeto pasado como parámetro.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Object.values()</code><strong> </strong>devuelve un array cuyos elementos son valores de propiedades enumarables que se encuentran en el objeto. El orden de las propiedades es el mismo que el dado cuando se recorre el objeto de forma manual.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">var obj = { foo: 'bar', baz: 42 }; +console.log(Object.values(obj)); // ['bar', 42] + +// array como objeto +var obj = { 0: 'a', 1: 'b', 2: 'c' }; +console.log(Object.values(obj)); // ['a', 'b', 'c'] + +// array como objeto con una ordenación aleatoria de las claves +var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; +console.log(Object.values(an_obj)); // ['b', 'c', 'a'] + +// getFoo no es una propiedade enumerable, por lo que como se observa, no se devuelve +var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); +my_obj.foo = 'bar'; +console.log(Object.values(my_obj)); // ['bar'] + +// parámetros que no son Objetos<strong> </strong>se fuerzan a que se comporten como tal +console.log(Object.values('foo')); // ['f', 'o', 'o'] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Para dar soporte compatible con <code>Object.values()</code> a entornos antiguos que no la soportan de forma nativa, puedes encontrar un Polyfill<strong> </strong>en <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> o en los repositorios <a href="https://github.com/es-shims/Object.values">es-shims/Object.values</a>.</p> + +<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-object.values', 'Object.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-object.values', 'Object.values')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{Compat("javascript.builtins.Object.values")}}</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/enumeracion_y_propietario_de_propiedades">Enumeración y propietarios de propiedades</a></li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.entries()")}}</li> + <li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/parsefloat/index.html b/files/es/web/javascript/reference/global_objects/parsefloat/index.html new file mode 100644 index 0000000000..16510d882d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/parsefloat/index.html @@ -0,0 +1,58 @@ +--- +title: parseFloat() +slug: Web/JavaScript/Referencia/Objetos_globales/parseFloat +translation_of: Web/JavaScript/Reference/Global_Objects/parseFloat +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Convierte (parsea) un argumento de tipo cadena y devuelve un número de punto flotante.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<p><code>parseFloat(<em>cadena</em> ) </code></p> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>cadena</code></dt> + <dd>Una cadena que representa al valor que se desea convertir.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>parseFloat</code> es una función de alto nivel y no está asociada a ningún objeto.</p> + +<p><code>parseFloat</code> convierte su argumento, una cadena, y devuelve un número de punto flotante. Si encuentra un carácter diferente al signo (+ o -), numerales (0-9), un punto decimal o un exponente, devuelve el valor hasta ese punto e ignora ese carácter y todos los correctos siguientes. Se permiten espacios anteriores y posteriores.</p> + +<p>Si el primer carácter no se puede convertir a número, <code>parseFloat</code> devuelve <code>NaN</code>.</p> + +<p>Para fines aritméticos, el valor <code>NaN</code> no es un número para ninguna base. Puede llamar a la función {{jsxref("isNaN")}} para determinar si el resultado de <code>parseFloat</code> es <code>NaN</code>. Si se pasa <code>NaN</code> en operaciones aritméticas, la operación resultante también será <code>NaN</code>.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_parseFloat_devolviendo_un_n.C3.BAmero" name="Ejemplo:_parseFloat_devolviendo_un_n.C3.BAmero">Ejemplo: <code>parseFloat</code> devolviendo un número</h3> + +<p>Todos los siguientes ejemplos devuelven 3.14.</p> + +<pre class="brush: js notranslate">parseFloat("3.14"); +parseFloat("314e-2"); +parseFloat("0.0314E+2"); v +var cadena = "3.14"; parseFloat(cadena); +parseFloat("3.14más caracteres no dígitos");</pre> + +<h3 id="Example_parseFloat_returning_NaN" name="Example:_parseFloat_returning_NaN">Example: <code>parseFloat</code> returning NaN</h3> + +<p>El siguiente ejemplo devuelve <code>NaN</code>:</p> + +<pre class="brush: js notranslate"><code>parseFloat("F</code><code>F2");</code></pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Objetos_globales/parseInt", "parseInt()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Objetos_globales/isNan", "isNaN()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/parseint/index.html b/files/es/web/javascript/reference/global_objects/parseint/index.html new file mode 100644 index 0000000000..30e3874a34 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/parseint/index.html @@ -0,0 +1,89 @@ +--- +title: parseInt() +slug: Web/JavaScript/Referencia/Objetos_globales/parseInt +translation_of: Web/JavaScript/Reference/Global_Objects/parseInt +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Convierte (parsea) un argumento de tipo cadena y devuelve un entero de la base especificada.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">parseInt(<em>string</em>, <em>base</em>);</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>cadena</code></dt> + <dd>Una cadena que representa el valor que se desea convertir.</dd> +</dl> + +<dl> + <dt><code>base</code></dt> + <dd>Un entero que representa la base de la mencionada cadena.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>parseInt</code> es una función de alto nivel y no está asociada a ningún objeto.</p> + +<p>La función <code>parseInt</code> comprueba el primer argumento, una cadena, e intenta devolver un entero de la base especificada. Por ejemplo, una base de 10 indica una conversión a número decimal, 8 octal, 16 hexadecimal, y así sucesivamente. Para bases superiores a 10, las letras del alfabeto indican numerales mayores que 9. Por ejemplo, para números hexadecimales (base 16), se utiliza de la A hasta la F.</p> + +<p>Si <code>parseInt</code> encuentra un carácter que no es un numeral de la base especificada, lo ignora a él y a todos los caracteres correctos siguientes, devolviendo el valor entero obtenido hasta ese punto. <code>parseInt</code> trunca los números en valores enteros. Se permiten espacios anteriores y posteriores.</p> + +<p>Si no se especifica la base o se especifica como 0, JavaScript asume lo siguiente:</p> + +<ul> + <li>Si el parámetro <code>cadena</code> comienza por "0x", la base es 16 (hexadecimal).</li> + <li>Si el parámetro <code>cadena</code> comienza por "0", la base es de 8 (octal). Esta característica está desaconsejada.</li> + <li>Si el parámetro <code>cadena</code> comienza por cualquier otro valor, la base es 10 (decimal).</li> +</ul> + +<p>Si el primer carácter no se puede convertir en número, <code>parseInt</code> devuelve <code>NaN</code>.</p> + +<p>Para fines aritméticos, el valor <code>NaN</code> no es un número en ninguna base. Puede llamar a la función {{jsxref("Objetos_globales/isNaN", "isNaN")}} para determinar se el resultado de <code>parseInt</code> es <code>NaN</code>. Si se pasa <code>NaN</code> en operaciones aritméticas, la operación resultante también será <code>NaN</code>.</p> + +<p>Para convertir números a su literal cadena en una base en particular, utilice <code>intValue.toString(base)</code>.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_parseInt" name="Ejemplo:_Usando_parseInt">Ejemplo: Usando <code>parseInt</code></h3> + +<p>Todos los siguientes ejemplos devuelven 15:</p> + +<pre class="brush: js">parseInt("F", 16); +parseInt("17", 8); +parseInt("15", 10); +parseInt(15.99, 10); +parseInt("FXX123", 16); +parseInt("1111", 2); +parseInt("15*3", 10); +parseInt("12", 13); +</pre> + +<p>Todos los siguientes ejemplos devuelven <code>NaN</code>:</p> + +<pre class="brush: js">parseInt("Hello", 8); // No es un número en absoluto +parseInt("0x7", 10); // No es de base 10 +parseInt("546", 2); // Los dígitos no son válidos para representaciones binarias. +</pre> + +<p>Incluso aunque la base especificada es diferente, todos los siguientes ejemplos devuelven 17 ya que el argumento <code>cadena</code> comienza por "<code>0x</code>".</p> + +<pre class="brush: js">parseInt("0x11", 16); +parseInt("0x11", 0); +parseInt("0x11"); +</pre> + +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Véase También</h3> + +<ul> + <li>{{jsxref("Objetos_globales/parseFloat", "parseFloat()")}}</li> + <li>{{jsxref("Number.parseFloat()")}}</li> + <li>{{jsxref("Number.parseInt()")}}</li> + <li>{{jsxref("Objetos_globales/isNaN", "isNaN()")}}</li> + <li>{{jsxref("Number.toString()")}}</li> + <li>{{jsxref("Object.valueOf")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/all/index.html b/files/es/web/javascript/reference/global_objects/promise/all/index.html new file mode 100644 index 0000000000..79a16aadc6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/all/index.html @@ -0,0 +1,123 @@ +--- +title: Promise.all() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/all +tags: + - ECMAScript6 + - JavaScript + - Método(2) + - Promesa + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/all +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Promise.all(iterable)</strong></code> devuelve una promesa que termina correctamente cuando todas las promesas en el argumento iterable han sido concluídas con éxito, o bien rechaza la petición con el motivo pasado por la primera promesa que es rechazada.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>Promise.all(iterable)</var>;</pre> + +<dl> + <dt>iterable</dt> + <dd>Un objeto iterable, por ejemplo un {{jsxref("Array")}}. Vea <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una {{jsxref("Promise")}} que se cumplirá cuando todas las promesas del argumento iterable hayan sido cumplidas, o bien se rechazará cuando alguna de ellas se rechace.</p> + +<h2 id="Descripción">Descripción</h2> + +<p><strong><code>Promise.all</code> </strong> se cumple cuando todas las promesas del iterable dado se han cumplido, o es rechazada si alguna promesa no se cumple. {{jsxref("Promise.resolve")}}.</p> + +<p>Si alguna de las promesas pasadas en el argumento iterable falla, la promesa <code>all</code> es rechazada inmediatamente con el valor de la promesa que fué rechazada, descartando todas las demás promesas hayan sido o no cumplidas. Si se pasa un array vacío a <code>all</code> , la promesa se cumple inmediatamente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_Promise.all">Uso de <code>Promise.all</code></h3> + +<p><code>Promise.all</code> espera a que todo se cumpla (o bien al primer rechazo).</p> + +<pre class="brush: js">var p1 = Promise.resolve(3); +var p2 = 1337; +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 100, "foo"); +}); + +Promise.all([p1, p2, p3]).then(values => { + console.log(values); // [3, 1337, "foo"] +});</pre> + +<h3 id="Promise.all_comportamiento_de_fallo-rápido"><code>Promise.all</code> comportamiento de fallo-rápido</h3> + +<p><code>Promise.all</code> se rechaza si uno de los elementos ha sido rechazado y <code>Promise.all</code> falla rápido: Si tienes cuatro promesas que se resuelven después de un timeout y una de ellas falla inmediatamente, entonces <code>Promise.all</code> se rechaza inmediatamente.</p> + +<pre class="brush: js">var p1 = new Promise((resolve, reject) => { + setTimeout(resolve, 1000, "one"); +}); +var p2 = new Promise((resolve, reject) => { + setTimeout(resolve, 2000, "two"); +}); +var p3 = new Promise((resolve, reject) => { + setTimeout(resolve, 3000, "three"); +}); +var p4 = new Promise((resolve, reject) => { + setTimeout(resolve, 4000, "four"); +}); +var p5 = new Promise((resolve, reject) => { + reject("reject"); +}); + +Promise.all([p1, p2, p3, p4, p5]).then(values => { + console.log(values); +}, reason => { + console.log(reason) +}); + +//From console: +//"reject" + +// Evenly, it's possible to use .catch +Promise.all([p1, p2, p3, p4, p5]).then(values => { + console.log(values); +}).catch(reason => { + console.log(reason) +}); + +//From console: +//"reject" + +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{Compat("javascript/promise","Promise.all")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.race()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/catch/index.html b/files/es/web/javascript/reference/global_objects/promise/catch/index.html new file mode 100644 index 0000000000..a99a071979 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/catch/index.html @@ -0,0 +1,183 @@ +--- +title: Promise.prototype.catch() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/catch +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/catch +--- +<div>{{JSRef}}</div> + +<p>El método <strong>catch()</strong> retorna una <code>Promise</code> y solo se ejecuta en los casos en los que la promesa se marca como <code>Reject</code>. Se comporta igual que al llamar {{jsxref("Promise.then", "Promise.prototype.then(undefined, onRejected)")}} (de hecho, al llamar <code>obj.catch(onRejected)</code> internamente llama a <code>obj.then(undefined, onRejected)</code>).</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><var>p.catch(onRejected)</var>; + +p.catch(function(reason) { + // rejection +}); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>onRejected</dt> + <dd>Una {{jsxref("Function")}} llamada cuando la <code>Promise</code> es rechazada. Esta función tiene un argumento: + <dl> + <dt><code>reason</code></dt> + <dd>La razón del rechazo.</dd> + </dl> + La promesa devuelta por <code>catch()</code> es rechazada si <code>onRejected</code> lanza un error o retorna una <code>Promise</code> que a su vez se rechaza, de cualquier otra manera la <code>Promise</code> es resuelta.</dd> +</dl> + +<h3 id="Valor_de_Retorno_(Return)">Valor de Retorno (Return)</h3> + +<p>Internamente llama a <code>Promise.prototype.then</code> en el objeto sobre el que se llama, pasándole el parámetro <code>undefined</code> y el manejador <code>onRejected</code> recibido; luego devuelve un valor de esa llamada (que es una {{jsxref("Promise")}}).</p> + +<p><strong>Demostración de la llamada interna:</strong></p> + +<pre class="brush: js">// overriding original Promise.prototype.then/catch just to add some logs +(function(Promise){ + var originalThen = Promise.prototype.then; + var originalCatch = Promise.prototype.catch; + + Promise.prototype.then = function(){ + console.log('> > > > > > called .then on %o with arguments: %o', this, arguments); + return originalThen.apply(this, arguments); + }; + Promise.prototype.catch = function(){ + console.log('> > > > > > called .catch on %o with arguments: %o', this, arguments); + return originalCatch.apply(this, arguments); + }; + +})(this.Promise); + + + +// calling catch on an already resolved promise +Promise.resolve().catch(function XXX(){}); + +// logs: +// > > > > > > called .catch on Promise{} with arguments: Arguments{1} [0: function XXX()] +// > > > > > > called .then on Promise{} with arguments: Arguments{2} [0: undefined, 1: function XXX()] +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>catch</code> puede ser muy útil para el manejo de errores en tu código con promesas.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_y_encadenando_el_método_catch">Usando y encadenando el método <code>catch</code></h3> + +<pre class="brush: js">var p1 = new Promise(function(resolve, reject) { + resolve('Success'); +}); + +p1.then(function(value) { + console.log(value); // "Success!" + throw 'oh, no!'; +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); + +// The following behaves the same as above +p1.then(function(value) { + console.log(value); // "Success!" + return Promise.reject('oh, no!'); +}).catch(function(e) { + console.log(e); // "oh, no!" +}).then(function(){ + console.log('after a catch the chain is restored'); +}, function () { + console.log('Not fired due to the catch'); +}); +</pre> + +<h3 id="Trucos_cuando_lanzamos_errores">Trucos cuando lanzamos errores</h3> + +<pre class="brush: js">// Hacer un throw llamará al método catch +var p1 = new Promise(function(resolve, reject) { + throw 'Uh-oh!'; +}); + +p1.catch(function(e) { + console.log(e); // "Uh-oh!" +}); + +// Los errores que se lancen dentro de funciones asíncronas actuarán como errores no capturados +var p2 = new Promise(function(resolve, reject) { + setTimeout(function() { + throw 'Uncaught Exception!'; + }, 1000); +}); + +p2.catch(function(e) { + console.log(e); // Nunca será llamado +}); + +// Errores lanzados después de resolve() serán omitidos +var p3 = new Promise(function(resolve, reject) { + resolve(); + throw 'Silenced Exception!'; +}); + +p3.catch(function(e) { + console.log(e); // Nunca será llamado +});</pre> + +<h3 id="Si_se_resuelve_la_promesa">Si se resuelve la promesa</h3> + +<pre class="brush: js">// Crea una promesa que no llamará a <code>onReject</code> +var p1 = Promise.resolve("calling next"); + +var p2 = p1.catch(function (reason) { + // Nunca será llamado + console.log("catch p1!"); + console.log(reason); +}); + +p2.then(function (value) { + console.log("next promise's onFulfilled"); /* next promise's onFulfilled */ + console.log(value); /* calling next */ +}, function (reason) { + console.log("next promise's onRejected"); + console.log(reason); +});</pre> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial en el standar ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.catch', 'Promise.prototype.catch')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.promise.catch")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/finally/index.html b/files/es/web/javascript/reference/global_objects/promise/finally/index.html new file mode 100644 index 0000000000..8d21aa785a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/finally/index.html @@ -0,0 +1,95 @@ +--- +title: Promise.prototype.finally() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/finally +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/finally +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>finally()</strong></code> devuelve una {{jsxref("Promise")}}. Cuando la promesa se resuelve, sea exitosa o rechazada, la función de callback específicada será ejecutada. Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa.</p> + +<p>Esto ayuda a evitar tener código duplicado tanto en el {{jsxref("Promise.then", "then()")}} como en el {{jsxref("Promise.catch", "catch()")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>p.finally(alFinalizar)</var>; + +p.finally(function() { + // finalizada (exitosa o rechazada) +}); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>alFinalizar</code></dt> + <dd>Una {{jsxref("Function")}} llamada cuando la <code>Promise</code> se resuelve con éxito o falla.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Devuelve una {{jsxref("Promise")}} cuyo <code>finally</code> fue fijado a la función específicada en <code>alFinalizar</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>finally()</code> puede ser de utilidad si quieres hacer algún proceso o limpieza una vez que la promesa termina, sin importar su resultado.</p> + +<p>Utilizar <code>finally()</code> es muy similar a llamar <code>.then(onFinally, onFinally)</code>, sin embargo tiene algunas diferencias:</p> + +<ul> + <li>Cuando usamos una función <code>inline</code>, se la puede pasar una sola vez, en vez de estar forzado a declararla dos veces, o guardarla en una variable.</li> + <li>Un callback <code>finally</code> no recibe ningún argumento, ya que no hay una manera fehaciente de determinar si la promesa fue exitosa o fallida. Este caso de uso es precisamente para cuando <em>no nos importa</em> la razón por la que falló o el valor al que resuelve, y no hay necesidad de proveerlos.</li> + <li>A diferencia de <code>Promise.resolve(2).then(() => {}, () => {})</code> (que va a resolver a <code>undefined</code>), <code>Promise.resolve(2).finally(() => {})</code> resolverá con un <code>2</code>.</li> + <li>Del mismo modo, a diferencia de <code>Promise.reject(3).then(() => {}, () => {})</code> (que resolverá con <code>undefined</code>), <code>Promise.reject(3).finally(() => {})</code> será rechazada con un <code>3</code>.</li> +</ul> + +<div class="note"> +<p><strong>Nota:</strong> Un <code>throw</code> (o retornar una promesa rechazada) en el callback <code>finally</code> va a rechazar la nueva promesa con la razón de rechazo especificada al llamar <code>throw()</code>.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">let isLoading = true; + +fetch(myRequest).then(function(response) { + var contentType = response.headers.get("content-type"); + if(contentType && contentType.includes("application/json")) { + return response.json(); + } + throw new TypeError("Oops, no hemos obtenido un JSON!"); + }) + .then(function(json) { /* procesar el JSON */ }) + .catch(function(error) { console.log(error); /* esta línea podría arrojar error, e.g. cuando console = {} */ }) + .finally(function() { isLoading = false; }); + +</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-promise.prototype.finally', 'Promise.prototype.finally')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.finally")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.then()")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/index.html b/files/es/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..58a2319c2f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,222 @@ +--- +title: Promise +slug: Web/JavaScript/Referencia/Objetos_globales/Promise +tags: + - ECMAScript6 + - JavaScript + - Promesa + - Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>Promise</code></strong> (Promesa) es usado para computaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new Promise( /* ejecutor */ function(resolver, rechazar) { ... } );</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>ejecutor</dt> + <dd>Una función con los argumentos <code>resolver</code> y <code>rechazar</code>. La función <code>ejecutor</code> es ejecutada inmediatamente por la implementación de la Promesa, pasándole las funciones <code>resolver</code> y <code>rechazar</code> (el ejecutor es llamado incluso antes de que el constructor de la <code>Promesa</code> devuelva el objeto creado). Las funciones <code>resolver</code> y <code>rechazar</code>, al ser llamadas, resuelven o rechazan la promesa, respectivamente. Normalmente el ejecutor inicia un trabajo asíncrono, y luego, una vez que es completado, llama a la función <code>resolver</code> para resolver la promesa o la rechaza si ha ocurrido un error.<br> + Si un error es lanzado en la función ejecutor, la promesa es rechazada y el valor de retorno del ejecutor es rechazado.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Una <strong>Promesa</strong> es un proxy para un valor no necesariamente conocido en el momento que es creada la promesa. Permite asociar manejadores que actuarán asincrónicamente sobre un eventual valor en caso de éxito, o la razón de falla en caso de una falla. Esto permite que métodos asíncronos devuelvan valores como si fueran síncronos: en vez de inmediatamente retornar el valor final, el método asíncrono devuelve una <em>promesa</em> de suministrar el valor en algún momento en el futuro.</p> + +<p>Una <code>Promesa</code> se encuentra en uno de los siguientes estados:</p> + +<ul> + <li><em>pendiente (pending)</em>: estado inicial, no cumplida o rechazada.</li> + <li><em>cumplida (fulfilled)</em>: significa que la operación se completó satisfactoriamente.</li> + <li><em>rechazada (rejected)</em>: significa que la operación falló.</li> +</ul> + +<p>Una promesa pendiente puede ser <em>cumplida</em> con un valor, o <em>rechazada</em> con una razón (error). Cuando cualquiera de estas dos opciones sucede, los métodos asociados, encolados por el método <em>then</em> de la promesa, son llamados. (Si la promesa ya ha sido cumplida o rechazada en el momento que es anexado su correspondiente manejador, el manejador será llamado, de tal manera que no exista una condición de carrera entre la operación asíncrona siendo completada y los manejadores siendo anexados)</p> + +<p>Como los métodos <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> y <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> retornan promesas, éstas pueden ser encadenadas.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8633/promises.png"></p> + +<div class="note"> +<p><strong>No confundir con:</strong> Varios lenguajes tienen mecanismos para evaluar perezosamente y postergar una computación, a los que también les llaman "promesas" - p.ej.: Scheme. Las promesas en JavaScript representan procesos que ya están sucediendo, y pueden ser encadenados con funciones callback. Si lo que se busca es evaluar perezosamente una expresión, se debe considerar la función <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">flecha </a> (arrow function) sin argumentos: <code>f = () => <em>expresión</em></code> para crear la expresión evaluada perezosamente, y <code>f()</code> para evaluar.</p> +</div> + +<div class="note" id="settledNote"> +<p><strong>Nota</strong>: Una promesa se dice que está <em>determinada (settled)</em> si se ha cumplido o si se ha rechazado, pero no está pendiente. Con promesas también se usa el término <em>resuelta</em> — esto significa que la promesa está determinada, o que se encuentra bloqueada dentro de una cadena de promesas. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> de Domenic Denicola contiene mas detalles sobre la terminología de las promesas.</p> +</div> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Propiedad longitud cuyo valor es siempre 1 (numero de argumentos del constructor).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Representa el prototipo del constructor <code>Promise</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Devuelve una de dos promesas: una que se cumple cuando todas las promesas en el argumento iterable han sido cumplidas, o una que se rechaza tan pronto como una de las promesas del argumento iterable es rechazada. Si la promesa retornada es cumplida, lo hace con un arreglo de los valores de las promesas cumplidas en el mismo orden definido en el iterable. Si la promesa retornada es rechazada, es rechazada con la razón de la primera promesa rechazada en el iterable. Este método puede ser útil para agregar resultados de múltiples promesas</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Devuelve una promesa que se cumple o rechaza tan pronto como una de las promesas del iterable se cumple o rechaza, con el valor o razón de esa promesa.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Devuelve un objeto <code>Promise</code> que es rechazado con la razón dada.</dd> +</dl> + +<dl> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Devuelve un objeto <code>Promise</code> que es resuelto con el valor dado. Si el valor es un <em>thenable</em> (p.ej. tiene un método <code>then</code>), la promesa devuelta "seguirá" este thenable, adoptando su eventual estado; de lo contrario la promesa devuelta será cumplida con el valor. Generalmente, si se quiere saber si un valor es una promesa o no, se podría usar - {{jsxref("Promise.resolve", "Promise.resolve(value)")}} y trabajar con el valor devuelto como una promesa.</dd> +</dl> + +<h2 id="Prototipo_Promise">Prototipo <code>Promise</code></h2> + +<h3 id="Propiedades_2">Propiedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Métodos_2">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Súper_simple_¡10_líneas!">Súper simple (¡10 líneas!)</h3> + +<pre class="brush: js notranslate"><code>let miPrimeraPromise = new Promise((resolve, reject) => { + // Llamamos a resolve(...) cuando lo que estabamos haciendo finaliza con éxito, y reject(...) cuando falla. + // En este ejemplo, usamos setTimeout(...) para simular código asíncrono. + // En la vida real, probablemente uses algo como XHR o una API HTML5. + setTimeout(function(){ + resolve("¡Éxito!"); // ¡Todo salió bien! + }, 250); +}); + +miPrimeraPromise.then((successMessage) => { + // succesMessage es lo que sea que pasamos en la función resolve(...) de arriba. + // No tiene por qué ser un string, pero si solo es un mensaje de éxito, probablemente lo sea. + console.log("¡Sí! " + successMessage); +});</code></pre> + +<h3 id="Creando_una_Promise">Creando una Promise</h3> + +<p>Este pequeño ejemplo muestra el mecanismo de una <code>Promise</code>. El método <code>testPromise()</code> se llama cada vez que se pulsa el {{HTMLElement("button")}}. Esto crea una promesa que se cumplirá, aplicando {{domxref("window.setTimeout()")}}, al contador de la promesa (partiendo desde 1) aleatoriamente cada 1-3 segundos. El constructor de la Promise() es usado para crear dicha promesa.</p> + +<p>El cumplimiento de la promesa simplemente se registra, a través de una llamada de retorno al cumplirse utilizando {{jsxref("Promise.prototype.then()","p1.then()")}}. A los pocos registros muestra cómo la parte síncrona del método se desacopla de la finalización asíncrona de la promesa.</p> + +<pre class="brush: js notranslate">'use strict'; +var promiseCount = 0; + +function testPromise() { + var thisPromiseCount = ++promiseCount; + + var log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Comenzó (<small>Comenzó el código sincrónico</small>)<br/>'); + + // Hacemos una promesa: prometemos un contador numérico de esta promesa, + // empezando por 1 (después de esperar 3s) + var p1 = new Promise( + // La función resolvedora es llamada con la + // habilidad de resolver o rechazar la promesa + function(resolve, reject) { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Comenzó la promesa (<small>Código asíncrono comenzó</small>)<br/>'); + + // Esto es solo un ejemplo para crear asincronismo + window.setTimeout( + function() { + // ¡Cumplimos la promesa! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // Definimos qué hacer cuando la promesa es resuelta/cumplida con la llamada + // al método then(). La llamada al método catch() define qué hacer si + // la promesa es rechazada + p1.then( + // Registrar el valor de la promesa cumplida + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promesa cumplida (<small>Código asíncrono terminado.</small>)<br/>'); + }) + .catch( + // Registrar la razón del rechazo + function(reason) { + console.log('Manejar promesa rechazada ('+reason+') aquí.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promesa hecha (<small>Código síncrono terminado. </small>)<br/>'); +} +</pre> + +<pre class="brush:js hidden notranslate">if ("Promise" in window) { + var btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "El ejemplo en vivo no está disponible ya que tu navegador no soporta la interfaz <code>Promise<code>."; +} +</pre> + +<p>Este ejemplo es ejecutado cuando pulsas el botón. Necesitas un navegador que soporte <code>Promise</code>. Al pulsar el botón varias veces en un período corto de tiempo, verás las diferentes promesas siendo cumplidas una tras otra.</p> + +<p>{{EmbedLiveSample("Creando_una_Promise", "500", "200")}}</p> + +<h2 id="Cargando_una_imagen_con_XHR">Cargando una imagen con XHR</h2> + +<p>Otro ejemplo sencillo utilizando <code>Promise</code> y <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> para cargar una imagen está disponible en el repositorio <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> de MDN en GitHub. También puedes <a href="https://mdn.github.io/js-examples/promises-test/">verlo en acción</a>. Cada paso está comentado y te permite seguir de cerca la arquitectura detrás de las Promesas y XHR.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript/promise")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: We have a problem with promises — Common mistakes with promises</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/race/index.html b/files/es/web/javascript/reference/global_objects/promise/race/index.html new file mode 100644 index 0000000000..f24be82a9c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/race/index.html @@ -0,0 +1,112 @@ +--- +title: Promise.race() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/race +tags: + - ECMAScript2015 + - ECMAScript6 + - JavaScript + - Promesa + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/race +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Promise.race(iterable)</strong></code> retorna una promesa que se cumplirá o no tan pronto como una de las promesas del argumento iterable se cumpla o se rechace, con el valor o razón de rechazo de ésta.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>Promise.race(iterable)</var>;</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>iterable</dt> + <dd>Un objeto iterable , como por ejemplo un {{jsxref("Array")}}. Vea <a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable</a>.</dd> +</dl> + +<h3 id="Retorna">Retorna</h3> + +<p>Una {{jsxref("Promise")}} que se cumple o se rechaza tan pronto como una de las promesas dadas en el argumento iterable se cumple o se rechaza.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función <code>race</code> retorna una <code>Promise</code> que se comporta como tal. Se cumple o se rechaza, lo que suceda antes en alguno de sus argumentos (iterable).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Promise.race_–_ejemplos_con_setTimeout">Usando <code>Promise.race</code> – ejemplos con <code>setTimeout</code></h3> + +<pre class="brush: js">var p1 = new Promise( (resolve, reject) => { + setTimeout(resolve, 500, "uno"); +}); +var p2 = new Promise( (resolve, reject) => { + setTimeout(resolve, 100, "dos"); +}); + +Promise.race([p1, p2]).then( value => { + console.log(value); // "dos" + // Ambas se resuelven, pero la p2 antes. +}); + + // Ejemplo con un resolve y un reject en el mismo método race. +var p3 = new Promise( (resolve, reject) => { + setTimeout(resolve, 100, "tres"); +}); +var p4 = new Promise( (resolve, reject) => { + setTimeout(reject, 500, "cuatro"); +}); + +Promise.race([p3, p4]).then( value => { + console.log(value); // "tres" + // p3 es mas rápida, así que se resuelve el race +}, reason => { + // No es llamado +}); + +var p5 = new Promise( (resolve, reject) => { + setTimeout(resolve, 500, "cinoc"); +}); +var p6 = new Promise( (resolve, reject) => { + setTimeout(reject, 100, "seis"); +}); + +Promise.race([p5, p6]).then( value => { + // No es llamado +}, reason => { + console.log(reason); // "seis" + // p6 es mas rápida, así que se rechaza +}); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentar</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.race', 'Promise.race')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.race', 'Promise.race')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{Compat}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.all()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/reject/index.html b/files/es/web/javascript/reference/global_objects/promise/reject/index.html new file mode 100644 index 0000000000..70505d7471 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/reject/index.html @@ -0,0 +1,80 @@ +--- +title: Promise.reject() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/reject +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/reject +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Promise.reject(reason)</strong></code> retorna un objeto <code>Promise</code> que es rechazado por la razón específicada.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-reject.html")}}</div> + +<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p> + +<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p> + +<p class="hidden"><span class="tlid-translation translation" lang="es"><span title="">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub.</span> <span title="">Si desea contribuir al proyecto de ejemplos interactivos, clone https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.</span></span></p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>Promise.reject(reason)</var>;</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>reason</dt> + <dd>Razón por la cual esta {jsxref("Promise")}} fue rechazada.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>Un objeto {{jsxref("Promise")}} que es rechazado por la razón específicada.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función estática <code>Promise.reject</code> retorna un objecto {{jsxref("Promise")}} que es rechazado. Para fines de depuración y captura selectiva de error, se suele pasar por el parámetro <code>reason</code> un <code>instanceof</code> {{jsxref("Error")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_estático_Promise.reject">Usando el método estático Promise.reject()</h3> + +<pre class="brush: js">Promise.reject(new Error('fail')).then(function() { + // no entra en esta función +}, function(error) { + console.log(error); // Stacktrace +});</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.reject")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li><a href="https://github.com/petkaantonov/bluebird#error-handling">Selective error catching using the BlueBird Promise library</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/resolve/index.html b/files/es/web/javascript/reference/global_objects/promise/resolve/index.html new file mode 100644 index 0000000000..e91dc7b80d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/resolve/index.html @@ -0,0 +1,150 @@ +--- +title: Promise.resolve() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/resolve +tags: + - ECMAScript 2015 + - JavaScript + - Promise + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/resolve +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Promise.resolve(value)</strong></code> retorna un objeto {{jsxref("Promise")}} que es resuelto con el valor dado. Si el valor es una <em>promise</em>, esa <em>promise </em>es devuelta; si el valor es un <em>thenable </em>(si tiene un {{jsxref("Promise.then", "método \"then\"")}}), el valor devuelto le seguirá a ese <em>thenable</em>, adoptando su estado; de otro modo la <em>promise</em> devuelta estará completada con el valor.</p> + +<div>{{EmbedInteractiveExample("pages/js/promise-resolve.html")}}</div> + +<p class="hidden">La fuente para esta demostración interactiva se encuentra en un repositorio de GitHub. Si te gustaría contribuir al proyecto de la demostración interactiva, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una <em>pull request</em>.</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="brush: js">Promise.resolve(value); +Promise.resolve(promise); +Promise.resolve(thenable); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>value</dt> + <dd>Argumento por resolver por esta <code>Promise</code>. También puede ser una <code>Promise</code> o un <em>thenable</em> por resolver.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una {{jsxref("Promise")}} que es resuelta con el valor dado, o con la <em>promise </em>pasada como valor, si el valor era un objeto <em>promise</em>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función estática <code>Promise.resolve</code> retorna una <code>Promise</code> que es resuelta.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_el_método_estático_Promise.resolve">Utilizando el método estático <code>Promise.resolve</code></h3> + +<pre class="brush: js">Promise.resolve('Éxito').then(function(value) { + console.log(value); // "Éxito" +}, function(value) { + // no es llamada +}); +</pre> + +<h3 id="Resolviendo_un_arreglo">Resolviendo un arreglo</h3> + +<pre class="brush: js">var p = Promise.resolve([1,2,3]); +p.then(function(v) { + console.log(v[0]); // 1 +});</pre> + +<h3 id="Resolviendo_otra_Promise">Resolviendo otra <code>Promise</code></h3> + +<pre class="brush: js">var original = Promise.resolve(33); +var cast = Promise.resolve(original); +cast.then(function(value) { + console.log('valor: ' + value); +}); +console.log('original === cast ? ' + (original === cast)); + +// registros, en orden: +// original === cast ? true +// valor: 33 +</pre> + +<p>El orden invertido de los registros se debe al hecho de que los <em>handler </em><code>then</code> sean llamados asíncronamente. Vea cómo funciona <code>then</code> <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#Return_value">aquí</a>.</p> + +<h3 id="Resolviendo_thenables_y_arrojando_Errores">Resolviendo thenables y arrojando Errores</h3> + +<pre class="brush: js">// Resolviendo un objeto thenable +var p1 = Promise.resolve({ + then: function(onFulfill, onReject) { onFulfill('¡Completada!'); } +}); +console.log(p1 instanceof Promise) // true, objeto convertido en una Promise +j +p1.then(function(v) { + console.log(v); // "¡Completada!" + }, function(e) { + // no es llamada +}); + +// Thenable arroja antes del callback +// Rechaza la Promise +var thenable = { then: function(resolve) { + throw new TypeError('Arrojando'); + resolve('Resolviendo'); +}}; + +var p2 = Promise.resolve(thenable); +p2.then(function(v) { + // no es llamada +}, function(e) { + console.log(e); // TypeError: Arrojando +}); + +// Thenable arroja después del callback +// Resuelve la Promise +var thenable = { then: function(resolve) { + resolve('Resolviendo'); + throw new TypeError('Arrojando'); +}}; + +var p3 = Promise.resolve(thenable); +p3.then(function(v) { + console.log(v); // "Resolviendo" +}, function(e) { + // no es llamada +}); +</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-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial en un estándar de ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p class="hidden">Para contribuir a esta información de compatibilidad, porfavor haz una <em>pull request</em> contra este repositorio: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.resolve")}}</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/promise/then/index.html b/files/es/web/javascript/reference/global_objects/promise/then/index.html new file mode 100644 index 0000000000..8998f3b180 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/promise/then/index.html @@ -0,0 +1,302 @@ +--- +title: Promise.prototype.then() +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/then +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Promise + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Promise/then +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>then()</strong></code> retorna una {{domxref("Promesa")}}. Recibe dos argumentos: funciones callback para los casos de éxito y fallo de <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code>.</p> + +<p>Nota: Si ambos argumentos son omitidos, o se proveen métodos que no sean funciones, se creará una nueva <code>Promesa</code> sin handlers adicionales, que simplemente adoptan el estado final de la <code>Promesa</code> que entonces es llamado. Si el primer argumento es omitido o se provee una no-función, el nuevo <code>Promise</code> que es creado simplemente adopta el estado cumplido del <code>Promise</code> que entonces es llamado (si se convierte en fulfilled). Si el segundo argument es omitido o se provee una no-función, el nuevo <code>Promise</code> que es creado simplemente adopta el estado de rechazo del <code>Promesa</code> que entonces es llamado (si se convierte en rechazado).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>p.then(alCumplir[, enRechazo])</var>; + +p.then(function(value) { + // cumplimiento + }, function(reason) { + // rechazo +}); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Retorna un <code>Promise</code> el cual es determinado por las funciones input:</p> + +<ul> + <li>Si <font face="consolas, Liberation Mono, courier, monospace">alCumplir</font> o <code>enRechazo</code> arroja un error, o retorna un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> rechazado, <code>then</code> retorna un <code>Promise</code> rechazado.</li> + <li>Si <font face="consolas, Liberation Mono, courier, monospace">alCumplir</font> o <code>enRechazo</code> retorna un <code>Promise</code> que resuelve, o retorna cualquier otro valor, <code>then</code> retorna un <code>Promise </code>resuelto.</li> +</ul> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace">alCumplir </font>{{optional_inline}}</dt> + <dd>Una <a href="es/docs/Web/JavaScript/Referencia/Objetos_globales/Function">Función</a> es llamada si la <code>Promesa</code> se cumple. Esta función tiene un argumento, el <code>valor de</code> cumplimiento. Si no es una función, se reemplaza internamente con una función de "Identidad" (devuelve el argumento recibido).</dd> + <dt><code>enRechazo</code> {{optional_inline}}</dt> + <dd>Una <a href="es/docs/Web/JavaScript/Referencia/Objetos_globales/Function">Función</a> es llamada si la <code>Promesa </code>es rechazada. Esta función tiene un argumento, la <code>razón</code> de rechazo. Si no es una función, se reemplaza internamente con una función "Lanzador" (lanza un error que recibió como argumento).</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un <code><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise">Promise</a></code> en estado <strong>pendiente.</strong> La función de control (<code>alCumplir o enRechazo)</code> es llamada de forma <strong>asíncrona</strong> (tan pronto como el stack se vacíe). Después de la invocación de la función de control pueden darse diferentes casos:</p> + +<ul> + <li>Si se recibe un valor, la Promesa devuelta por el método <code>then</code> queda resuelta adoptando el valor de retorno.</li> + <li>Si se produce un error, la Promesa devuelta por el método <code>then</code> es rechazada, adoptando el error como su valor.</li> + <li>Si se devuelve una Promesa ya resuelta, la Promesa devuelta por el método <code>then</code> queda resuelta adoptando el valor de la promesa anterior.</li> + <li>Si se devuelve una Promesa con un objeto <strong>pendiente</strong> de resolver, la resolución o rechazo devueltos por <code>then</code> quedará a esperas de que la Promesa establecida para la función de control quede resuelta. Además, el valor de la Promesa en estado pendiente será el mismo que el valor devuelto por el controlador.</li> +</ul> + +<p>Veamos un ejemplo para demostrar la asincronía del método <code>then</code>.</p> + +<pre class="notranslate"><code>// al usar una promesa revuelta, el bloque 'then' se lanzará automáticamente, +// pero sus funciones controladoras se lanzarán asíncronamente, +// como demuestran los console.logs +var promResuelta = Promise.resolve(33); + +var thenProm = promResuelta.then(función(valor){ + console.log("ésto será invocado cuando acabe el stack principal. El valor recibido y devuelto es: " + valor); + return valor; +}); +// imprimimos al momento el valor de thenProm() +console.log(thenProm); + +// usando setTimeout podemos posponer la ejecución de una función al momento en el que el stack quede vacío. +setTimeout(función(){ + console.log(thenProm); +}); + + +// logs, en orden: +// Promise {[[EstadoPromise¡]]: "pendiente", [[ValorPromise]]: undefined} +// "ésto será invocado cuando acabe el stack principal. El valor recibido y devuelto es: "33" +// Promise {[[EstadoPromise]]: "resuelta", [[ValorPromise]]: 33}</code></pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Ya que los métodos <code>then</code> y {{jsxref("Promise.prototype.catch()")}} devuelven promesas, pueden ser encadenados — una operación llamada <em>composición</em>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_metodo_then">Usando el metodo <code>then</code></h3> + +<pre class="brush: js notranslate">var p1 = new Promise(function(resolve, reject) { + resolve('Success!'); + // or + // reject ("Error!"); +}); + +p1.then(function(value) { + console.log(value); // Success! +}, function(reason) { + console.log(reason); // Error! +}); +</pre> + +<h3 id="Encadenamiento">Encadenamiento</h3> + +<p>El método <code>then</code> devuelve una <code>Promise</code> que permite encadenar métodos.</p> + +<p>Puedes pasar una lambda a <code>then</code> y si devuelve una promesa, una <code>Promise</code> equivalente será expuesta al <code>then</code> subsecuente en la cadena de métodos. El fragmento incluido debajo simula un código asíncrono mediante la función <code>setTimeout</code>. </p> + +<pre class="brush: js notranslate">Promise.resolve('foo') + // 1. Recibe "foo", concatena "bar" con él, y resuelve la cadena con el siguiente 'then' + .then(función(hilo) { + return new Promise(function(resolve, reject) { + setTimeout(función() { + hilo += 'bar'; + resolve(hilo); + }, 1); + }); + }) + // 2. recibe "foobar", registra una función de llamada para opear sobre ese hilo + // e imprimirlo en la consola, pero no antes de devolver el hilo sin modificar + // en la resolución del siguiente 'then' + .then(función(hilo) { + setTimeout(función() { + hilo += 'baz'; + console.log(hilo); + }, 1) + return hilo; + }) + // 3. imprime mensajes útiles sobre cómo funcionará el código en esta sección + // antes de que el hilo se procese por el código de prueba + // antes del bloque 'then'. + .then(función(hilo) { + console.log("Último Then: oops... no me he molestado en instanciar y devolver " + + "una promesa en el then anterior, así que la secuencia puede ser un poco " + + "sorprendente"); + + // Observemos que `string` no incluye el trozo 'baz' en éste punto. Ésto ocurre + // porque lo hemos contruido para que ocurra asíncronamente con una función setTimeout + console.log(hilo); +});</pre> + +<p>Cuando un valor sencillamente se devuelve desde un lambda <code>then</code> , devolverá un <code>Promise.resolve(<valor devuelto por el controlador que haya sido invocado>)</code>.</p> + +<pre class="brush: js notranslate">var p2 = nueva Promise(function(resolver, rechazar) { + resolver(1); +}); + +p2.then(función(valor) { + console.log(valor); // 1 + return valor + 1; +}).then(function(value) { + console.log(valor + '- Este uso síncrono es prácticamente inútil'); // 2- Este uso síncrono es prácticamente inútil +}); + +p2.then(función(valor) { + console.log(valor); // 1 +}); +</pre> + +<p>Una llamada a <code>then</code> devolverá una promesa rechazada si la función lanza un error o devuelve una Promise rechazada.</p> + +<pre class="brush: js notranslate">Promise.resolve() + .then( () => { + // Hace que .then() devuelva una promera rechazada + throw new Error('Oh no!'); + }) + .then( () => { + console.log( 'No invocada.' ); + }, error => { + console.error( 'Función de rechazo llamada: ', error ); +});</pre> + +<p>En cualquier otro caso, una Promise en resolución será devuelta. El el siguiente ejemplo, el primer <code>then()</code> devolverá un <code>42</code> dentro de una Promise en resolución, aunque la Promise de la cadena fue rechazada.</p> + +<pre class="brush: js notranslate">Promise.reject() + .then( () => 99, () => 42 ) // enRechazo devuelve 42, que está dentro de una Promise en resolución + .then( respuesta => console.log( 'Resuelta con ' + respuesta ) ); // Resuelta con 42</pre> + +<p>En la práctica, suele ser preferible capturar promesas rechazadas en lugar de utilizar la sintaxis de dos casos de <code>then,</code> como demostramos abajo.</p> + +<pre class="brush: js notranslate">Promise.resolve() + .then( () => { + // Hace que .then() devuelva una promesa rechazada + throw new Error('Oh no!'); + }) + .catch( error => { + console.error( 'función enRechazo invocada: ', error ); + }) + .then( () => { + console.log( "Siempre soy invocada, incluso si la promesa del then previo es rechazada" ); + });</pre> + +<p><br> + También puedes usar encadenamiento para implementar una función con una API basada en promesas, sobre una función del mismo tipo.</p> + +<pre class="brush: js notranslate">function traer_datos_actuales() { + // La función <a href="/en-US/docs/Web/API/GlobalFetch/fetch">fetch</a>() de la API devuelve una Promesa. Esta función + // expone una API similar, pero el valor de cumplimiento + // de la Promesa de esta función tiene más tareas + // implementadas sobre ella. + return fetch('datos_actuales.json').then((response) => { + if (response.headers.get('content-type') != 'application/json') { + throw new TypeError(); + } + var j = response.json(); + // podríamos hacer algo con j + return j; // valor de cumplimiento asignado al usuario de + // fetch_datos_actuales().then() + }); +} +</pre> + +<p>Si <code>alCumplir</code> devuelve una promesa, el valor de retorno de <code>then</code> será resuelto o rechazado por la promesa.</p> + +<pre class="brush: js notranslate">function resolverDespues(resolver, reject) { + setTimeout(función () { + resolver(10); + }, 1000); +} +function rechazarDespues(resolver, reject) { + setTimeout(function () { + resolver(new Error('Error')); + }, 1000); +} + +var p1 = Promise.resolve('foo'); +var p2 = p1.then(función() { + // Devuelve la promesa aquí, que será resuelta igualada a 10 tras 1 segundo + return new Promise(resolverDespues); +}); +p2.then(función(v) { + console.log('resuelta', v); // "resuelta", 10 +}, función(e) { + // no invocada + console.log('rechazada', e); +}); + +var p3 = p1.then(funcion() { + // Devuelve la promesa aquí, que será rechazada con 'Error' despues de 1 segundo + return new Promise(rechazarDespues); +}); +p3.then(funcion(v) { + // no invocada + console.log('resuelta', v); +}, funcion(e) { + console.log('rechazada', e); // "rechazada", 'Error' +}); +</pre> + +<h3 id="window.setImmediate_estilo_polyfill_basado_en_promesas"><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate" title="This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates."><code>window.setImmediate</code></a> estilo polyfill basado en promesas</h3> + +<p>Usar un método {{jsxref("Function.prototype.bind()")}}<code>Reflect.apply</code> ({{jsxref("Reflect.apply()")}}) para crear un (non-cancellable) setImmediate-style function.</p> + +<pre class="notranslate">const nextTick = (() => { + const noop = () => {}; // literally + const nextTickPromise = () => Promise.resolve().then(noop); + + const rfab = Reflect.apply.bind; // (thisArg, fn, thisArg, [...args]) + const nextTick = (fn, ...args) => ( + fn !== undefined + ? Promise.resolve(args).then(rfab(null, fn, null)) + : nextTickPromise(), + undefined + ); + nextTick.ntp = nextTickPromise; + + return nextTick; +})();</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-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial en el estándar ECMA.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype.then', 'Promise.prototype.then')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegador">Compatibilidad en navegador</h2> + +<p class="hidden">Para contribuir a la compatibilidad de estos datos, realiza una pull request sobre éste archivo: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> + +<p>{{Compat("javascript/promise","Promise.prototype.then")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> + <li>{{jsxref("Promise.prototype.catch()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/proxy/index.html b/files/es/web/javascript/reference/global_objects/proxy/index.html new file mode 100644 index 0000000000..1469b1f138 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/proxy/index.html @@ -0,0 +1,439 @@ +--- +title: Proxy +slug: Web/JavaScript/Referencia/Objetos_globales/Proxy +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy +--- +<div> +<div>{{JSRef}}</div> +</div> + +<p>El objeto <strong>Proxy</strong> se usa para definir un comportamiento personalizado para operaciones fundamentales (por ejemplo, para observar propiedades, cuando se asignan, enumeración, invocación de funciones, etc).</p> + +<h2 id="Terminología">Terminología</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">handler</a></dt> + <dd>Objeto que gestiona las intercepciones a las propiedades del objeto proxy.</dd> + <dt>traps</dt> + <dd>Son los métodos interceptores que proveen acceso a las propiedades. Es análogo al concepto de <em>traps</em> en los sistemas operativos.</dd> + <dt>target</dt> + <dd>El objeto que virtualiza este objeto. Suele usarse como <em>backend</em> de almacenamiento del proxy. Invariantes (semántica que no acepta cambios) respecto a la no extensibilidad del objeto o propiedades no configurables se verifican contra este <em>target</em>.</dd> +</dl> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">var p = new Proxy(target, handler); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>target</code></dt> + <dd>Un objeto <em>target </em>(puede ser cualquier órden de objetos, incluyendo un array nativa, funcion o incluso otro proxy) o función que contenga el <code>Proxy</code></dd> + <dt><code>handler</code></dt> + <dd>Un objeto cuyas propiedades son funciones que definen el comportamiento del proxy cuando una operación es realizada en él.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Proxy.revocable()")}}</dt> + <dd>Crea un objeto <code>Proxy</code> revocable</dd> +</dl> + +<h2 id="Métodos_del_objeto_handler">Métodos del objeto handler</h2> + +<p>The handler object is a placeholder object which contains traps for <code>Proxy</code>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler', 'Methods') }}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<p>En este simple ejemplo el número <code>37</code> se devuelve como valor predeterminado cuando la propiedad <code>name</code> no se encuentra en el objeto. Se utilizando el manejador <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/get">get</a></code>.</p> + +<pre class="brush: js notranslate">var handler = { + get: function(target, name){ + return name in target? + target[name] : + 37; + } +}; + +var p = new Proxy({}, handler); +p.a = 1; +p.b = undefined; + +console.log(p.a, p.b); // 1, undefined +console.log('c' in p, p.c); // false, 37 +</pre> + +<h3 id="No-op_forwarding_proxy">No-op forwarding proxy</h3> + +<p>In this example, we are using a native JavaScript object to which our proxy will forward all operations that are applied to it.</p> + +<pre class="brush: js notranslate">var target = {}; +var p = new Proxy(target, {}); + +p.a = 37; // operation forwarded to the target + +console.log(target.a); // 37. The operation has been properly forwarded +</pre> + +<h3 id="Validación">Validación</h3> + +<p>Con un <code>Proxy</code>, puedes validar fácilmente el valor puesto a un objeto. Este ejemplo usa el handler (manejador) <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> + +<pre class="brush: js notranslate">let validator = { + set: function(obj, prop, value) { + if (prop === 'age') { + if (!Number.isInteger(value)) { + throw new TypeError('The age is not an integer'); + } + if (value > 200) { + throw new RangeError('The age seems invalid'); + } + } + + // The default behavior to store the value + obj[prop] = value; + } +}; + +let person = new Proxy({}, validator); + +person.age = 100; +console.log(person.age); // 100 +person.age = 'young'; // Throws an exception +person.age = 300; // Throws an exception +</pre> + +<h3 id="Extending_constructor">Extending constructor</h3> + +<p>A function proxy could easily extend a constructor with a new constructor. This example uses the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/construct"><code>construct</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply"><code>apply</code></a> handlers.</p> + +<pre class="brush: js notranslate">function extend(sup,base) { + var descriptor = Object.getOwnPropertyDescriptor( + base.prototype,"constructor" + ); + base.prototype = Object.create(sup.prototype); + var handler = { + construct: function(target, args) { + var obj = Object.create(base.prototype); + this.apply(target,obj,args); + return obj; + }, + apply: function(target, that, args) { + sup.apply(that,args); + base.apply(that,args); + } + }; + var proxy = new Proxy(base,handler); + descriptor.value = proxy; + Object.defineProperty(base.prototype, "constructor", descriptor); + return proxy; +} + +var Person = function(name){ + this.name = name; +}; + +var Boy = extend(Person, function(name, age) { + this.age = age; +}); + +Boy.prototype.sex = "M"; + +var Peter = new Boy("Peter", 13); +console.log(Peter.sex); // "M" +console.log(Peter.name); // "Peter" +console.log(Peter.age); // 13</pre> + +<h3 id="Manipular_nodos_del_DOM">Manipular nodos del DOM</h3> + +<p>A veces queremos cambiar el atributo clase de dos elementos diferentes. Aquí se muestra cómo usando el handler (manejador) <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/set"><code>set</code></a>.</p> + +<pre class="brush: js notranslate">let view = new Proxy({ + selected: null +}, +{ + set: function(obj, prop, newval) { + let oldval = obj[prop]; + + if (prop === 'selected') { + if (oldval) { + oldval.setAttribute('aria-selected', 'false'); + } + if (newval) { + newval.setAttribute('aria-selected', 'true'); + } + } + + // The default behavior to store the value + obj[prop] = newval; + } +}); + +let i1 = view.selected = document.getElementById('item-1'); +console.log(i1.getAttribute('aria-selected')); // 'true' + +let i2 = view.selected = document.getElementById('item-2'); +console.log(i1.getAttribute('aria-selected')); // 'false' +console.log(i2.getAttribute('aria-selected')); // 'true' +</pre> + +<h3 id="Value_correction_and_an_extra_property">Value correction and an extra property</h3> + +<p>The <code>products</code> proxy object evaluates the passed value and convert it to an array if needed. The object also supports an extra property called <code>latestBrowser</code> both as a getter and a setter.</p> + +<pre class="brush: js notranslate">let products = new Proxy({ + browsers: ['Internet Explorer', 'Netscape'] +}, +{ + get: function(obj, prop) { + // An extra property + if (prop === 'latestBrowser') { + return obj.browsers[obj.browsers.length - 1]; + } + + // The default behavior to return the value + return obj[prop]; + }, + set: function(obj, prop, value) { + // An extra property + if (prop === 'latestBrowser') { + obj.browsers.push(value); + return; + } + + // Convert the value if it is not an array + if (typeof value === 'string') { + value = [value]; + } + + // The default behavior to store the value + obj[prop] = value; + } +}); + +console.log(products.browsers); // ['Internet Explorer', 'Netscape'] +products.browsers = 'Firefox'; // pass a string (by mistake) +console.log(products.browsers); // ['Firefox'] <- no problem, the value is an array + +products.latestBrowser = 'Chrome'; +console.log(products.browsers); // ['Firefox', 'Chrome'] +console.log(products.latestBrowser); // 'Chrome' +</pre> + +<h3 id="Finding_an_array_item_object_by_its_property">Finding an array item object by its property</h3> + +<p>This proxy extends an array with some utility features. As you see, you can flexibly "define" properties without using <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties"><code>Object.defineProperties</code></a>. This example can be adapted to find a table row by its cell. In that case, the target will be <a href="/en-US/docs/DOM/table.rows"><code>table.rows</code></a>.</p> + +<pre class="brush: js notranslate">let products = new Proxy([ + { name: 'Firefox', type: 'browser' }, + { name: 'SeaMonkey', type: 'browser' }, + { name: 'Thunderbird', type: 'mailer' } +], +{ + get: function(obj, prop) { + // The default behavior to return the value; prop is usually an integer + if (prop in obj) { + return obj[prop]; + } + + // Get the number of products; an alias of products.length + if (prop === 'number') { + return obj.length; + } + + let result, types = {}; + + for (let product of obj) { + if (product.name === prop) { + result = product; + } + if (types[product.type]) { + types[product.type].push(product); + } else { + types[product.type] = [product]; + } + } + + // Get a product by name + if (result) { + return result; + } + + // Get products by type + if (prop in types) { + return types[prop]; + } + + // Get product types + if (prop === 'types') { + return Object.keys(types); + } + + return undefined; + } +}); + +console.log(products[0]); // { name: 'Firefox', type: 'browser' } +console.log(products['Firefox']); // { name: 'Firefox', type: 'browser' } +console.log(products['Chrome']); // undefined +console.log(products.browser); // [{ name: 'Firefox', type: 'browser' }, { name: 'SeaMonkey', type: 'browser' }] +console.log(products.types); // ['browser', 'mailer'] +console.log(products.number); // 3 +</pre> + +<h3 id="A_complete_traps_list_example">A complete <code>traps</code> list example</h3> + +<p>Now in order to create a complete sample <code>traps</code> list, for didactic purposes, we will try to proxify a <em>non native</em> object that is particularly suited to this type of operation: the <code>docCookies</code> global object created by <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie/Simple_document.cookie_framework" title="https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support">the "little framework" published on the <code>document.cookie</code> page</a>.</p> + +<pre class="brush: js notranslate">/* + var docCookies = ... get the "docCookies" object here: + https://developer.mozilla.org/en-US/docs/DOM/document.cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support +*/ + +var docCookies = new Proxy(docCookies, { + get: function (oTarget, sKey) { + return oTarget[sKey] || oTarget.getItem(sKey) || undefined; + }, + set: function (oTarget, sKey, vValue) { + if (sKey in oTarget) { return false; } + return oTarget.setItem(sKey, vValue); + }, + deleteProperty: function (oTarget, sKey) { + if (sKey in oTarget) { return false; } + return oTarget.removeItem(sKey); + }, + enumerate: function (oTarget, sKey) { + return oTarget.keys(); + }, + ownKeys: function (oTarget, sKey) { + return oTarget.keys(); + }, + has: function (oTarget, sKey) { + return sKey in oTarget || oTarget.hasItem(sKey); + }, + defineProperty: function (oTarget, sKey, oDesc) { + if (oDesc && "value" in oDesc) { oTarget.setItem(sKey, oDesc.value); } + return oTarget; + }, + getOwnPropertyDescriptor: function (oTarget, sKey) { + var vValue = oTarget.getItem(sKey); + return vValue ? { + value: vValue, + writable: true, + enumerable: true, + configurable: false + } : undefined; + }, +}); + +/* Cookies test */ + +console.log(docCookies.my_cookie1 = "First value"); +console.log(docCookies.getItem("my_cookie1")); + +docCookies.setItem("my_cookie1", "Changed value"); +console.log(docCookies.my_cookie1);</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-objects', 'Proxy')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(49.0)}}</td> + <td>13 (10586)</td> + <td>{{ CompatGeckoDesktop("18") }}</td> + <td>{{CompatNo}}</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>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{ CompatGeckoDesktop("18") }}</td> + <td>13 (10586)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Gecko_specific_notes">Gecko specific notes</h2> + +<ul> + <li>At present, <code>Object.getPrototypeOf(proxy)</code> unconditionally returns <code>Object.getPrototypeOf(target)</code>, because the ES6 getPrototypeOf trap is not yet implemented ({{bug(795904)}}, {{bug(888969)}}).</li> + <li><code>Array.isArray(proxy)</code> unconditionally returns <code>Array.isArray(target)</code> ({{bug(1096753)}}, {{bug(1111785)}}).</li> + <li><code>Object.prototype.toString.call(proxy)</code> unconditionally returns <code>Object.prototype.toString.call(target)</code>, because ES6 Symbol.toStringTag is not yet implemented ({{bug(1114580)}}).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="https://www.youtube.com/watch?v=sClk6aB_CPk">"Proxies are awesome" Brendan Eich presentation at JSConf</a> (<a class="external" href="http://www.slideshare.net/BrendanEich/metaprog-5303821">slides</a>)</li> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies">ECMAScript Harmony Proxy proposal page</a> and <a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:proxies_semantics">ECMAScript Harmony proxy semantics page</a></li> + <li><a class="external" href="http://soft.vub.ac.be/~tvcutsem/proxies/">Tutorial on proxies</a></li> + <li><a href="/en-US/docs/JavaScript/Old_Proxy_API" title="/en-US/docs/JavaScript/Old_Proxy_API">SpiderMonkey specific Old Proxy API</a></li> + <li>{{jsxref("Object.watch()")}} is a non-standard feature but has been supported in Gecko for a long time.</li> +</ul> + +<h2 id="Licensing_note">Licensing note</h2> + +<p>Some content (text, examples) in this page has been copied or adapted from the <a class="external" href="http://wiki.ecmascript.org/doku.php">ECMAScript wiki</a> which content is licensed <a class="external" href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC 2.0 BY-NC-SA</a>.</p> diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html index 6c050f7f0a..6c050f7f0a 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/index.html index 2be6abb116..2be6abb116 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/index.html diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html index ee5ac155e7..ee5ac155e7 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html deleted file mode 100644 index fa75157c9d..0000000000 --- a/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -tags: - - Error - - JavaScript - - Propiedad - - Prototipo - - Prototype - - RangeError -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>RangeError.prototype</strong></code> representa el prototipo de {{jsxref("RangeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("RangeError")}} heredan de <code>RangeError.prototype</code>. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Especifica la función que crea instancias del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio <code>message</code>, en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, se hereda de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Nombre del error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Pila de llamadas. Heredada de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p>Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</p> - -<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">Commentario</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<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="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/reference/global_objects/referenceerror/index.html b/files/es/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..5b48497b5d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,99 @@ +--- +title: ReferenceError +slug: Web/JavaScript/Referencia/Objetos_globales/ReferenceError +tags: + - Clase + - Class + - JavaScript + - Object + - Objeto + - ReferenceError + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +--- +<div>{{JSRef("Objetos_globales", "ReferenceError")}}</div> + +<p>El objeto <strong><code>ReferenceError</code></strong> representa un error cuando se hace referencia a una variable inexistente.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError/ReferenceError"><code>ReferenceError()</code></a></dt> + <dd>Crea un nuevo objeto <code>ReferenceError</code>.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> + <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("ReferenceError")}} debe proporcionar su propia propiedad <code>message</code>, en <a href="/es/docs/Mozilla/Projects/SpiderMonkey"><code>SpiderMonkey</code></a>, hereda {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> + <dd>Nombre del error. Heredado de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> + <dd>Ruta al archivo que generó este error. Heredado de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> + <dd>Número de línea en el archivo que generó este error. Heredado de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> + <dd>Número de columna en la línea que generó este error. Heredado de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> + <dd>Seguimiento de la pila. Heredado de {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Capturar_un_ReferenceError">Capturar un <code>ReferenceError</code></h3> + +<pre class="brush: js notranslate">try { + let a = undefinedVariable +} catch (e) { + console.log(e instanceof ReferenceError) // true + console.log(e.message) // "undefinedVariable no está definida" + console.log(e.name) // "ReferenceError" + console.log(e.fileName) // "Scratchpad/1" + console.log(e.lineNumber) // 2 + console.log(e.columnNumber) // 6 + console.log(e.stack) // "@Scratchpad/2:2:7\n" +} +</pre> + +<h3 id="Crear_un_ReferenceError">Crear un <code>ReferenceError</code></h3> + +<pre class="brush: js notranslate">try { + throw new ReferenceError('Hola', 'someFile.js', 10) +} catch (e) { + console.log(e instanceof ReferenceError) // true + console.log(e.message) // "Hola" + console.log(e.name) // "ReferenceError" + console.log(e.fileName) // "someFile.js" + console.log(e.lineNumber) // 10 + console.log(e.columnNumber) // 0 + console.log(e.stack) // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}}</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.builtins.ReferenceError")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Error")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/compile/index.html b/files/es/web/javascript/reference/global_objects/regexp/compile/index.html new file mode 100644 index 0000000000..0bce81a56d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/compile/index.html @@ -0,0 +1,93 @@ +--- +title: RegExp.prototype.compile() +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/compile +tags: + - Desaprovado + - Expresion Regular + - JavaScript + - Obsoleto + - Prototype + - Referencia + - RegExp + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/compile +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p>El método obsoleto <code><strong>compile</strong></code><strong><code>()</code></strong> es usado para (re-)compilar una expresión regular durante la ejecución del script. Es básicamente lo mismo que el constructor <code>RegExp</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.compile(<var>patrón, flags</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>patrón</code></dt> + <dd>El texto de la expresión regular.</dd> + <dt><code>flags</code></dt> + <dd> + <p>Si es especificado, las flags pueden tener cualquier combinación de los siguientes valores:</p> + + <dl> + <dt><code>g</code></dt> + <dd>búsqueda global (global match)</dd> + <dt><code>i</code></dt> + <dd>ignorar mayúsculas o minúsculas</dd> + <dt><code>m</code></dt> + <dd>Tratar caracteres de inicio y fin (^ y $) como multiples líneas de texto(por ejemplo: encontrar el inicio o fin de cada línea delimitada por \n o \r, no sólo al inicio o fin de toda la entrada de texto)</dd> + <dt><code>y</code></dt> + <dd>sticky; busca solamente desde el índice indicado por la propiedad <code>lastIndex</code> de esta expresión regular en la cadena objetivo (y no intenta buscar desde ningún índice posterior).</dd> + </dl> + </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p> El método <code>compile</code> es obsoleto. Puedes simplemente utilizar el constructor <code>RegExp</code> para lograr el mismo efecto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_compile">Usando <code>compile()</code></h3> + +<p>El siguiente ejemplo muestra como recompilar una expresión regultar con un nuevo patrón y nuevas flags.</p> + +<pre class="brush: js">var regexObj = new RegExp('foo', 'gi'); +regexObj.compile('new foo', 'g'); +</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">Commentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial. Definido en la (norma) Annex B ECMAScript para Características Adicionales para Navegadores Web.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.compile', 'RegExp.prototype.compile')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definido en la (norma) Annex B ECMAScript para Características Adicionales para Navegadores Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.compile")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/exec/index.html b/files/es/web/javascript/reference/global_objects/regexp/exec/index.html new file mode 100644 index 0000000000..1925e63b67 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/exec/index.html @@ -0,0 +1,238 @@ +--- +title: RegExp.prototype.exec() +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/exec +tags: + - Expresiones Regulares + - JavaScript + - Prototipo + - Referencia + - RegExp + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/exec +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>exec()</code></strong> ejecuta una busqueda sobre las coincidencias de una expresión regular en una cadena especifica. Devuelve el resultado como array, o {{jsxref("null")}}.</p> + +<p>Si está ejecutando una expresión regular solo para buscar si algo se cumple o no, usa el método {{jsxref("RegExp.prototype.test()")}} o el método {{jsxref("String.prototype.search()")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>regexObj</var>.exec(<em>cadena</em>)</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>cadena</code></dt> + <dd>Cadena sobre la cual se quiere aplicar la expresión regular</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Si se encuentran coincidencial, el método <code>exec()</code> devuelve un array y actualiza las propiedades del objecto de la expresión regular. El array devuelto contiene los elementos encontrados en su primer elemento, y un elemento por cada parte de la expresión regular que se encuentra entre parentesis y se encuentra dentro del texto que fué capturado.</p> + +<p>Si la busqueda falla, el método <code>exec()</code> devuelve {{jsxref("null")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Considerando el siguiente ejemplo:</p> + +<pre class="brush: js">// Busca "quick brown" seguido de "jumps", ignorando los caracteres que se +// encuentren entre medias. +// Recuerda "brown" y "jumps" +// Ignora mayusculas y minusculas +var re = /quick\s(brown).+?(jumps)/ig; +var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog'); +</pre> + +<p>La siguiente tabla muestra el resultado de este script:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Objeto</td> + <td class="header">Propiedad/Índice</td> + <td class="header">Descripción</td> + <td class="header">Ejemplo</td> + </tr> + <tr> + <td rowspan="4"><code>result</code></td> + <td><code>[0]</code></td> + <td>Todas las partes de la cadena que cumplen la expresión regular</td> + <td><code>Quick Brown Fox Jumps</code></td> + </tr> + <tr> + <td><code>[1],...[<em>n</em>]</code></td> + <td> + <p>Las subcadenas entre parentesis que han sido encontradas, si hay alguna. El número de subcadenas encontradas es ilimitado</p> + </td> + <td><code>[1] = Brown<br> + [2] = Jumps</code></td> + </tr> + <tr> + <td><code>index</code></td> + <td>El índice de base-0 del elemento encontrado en la cadena.</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>input</code></td> + <td>La cadena original.</td> + <td><code>The Quick Brown Fox Jumps Over The Lazy Dog</code></td> + </tr> + <tr> + <td rowspan="5"><code>re</code></td> + <td><code>lastIndex</code></td> + <td>El índice sobre el cual empieza la siguiente busqueda. Cuando no se usa g (busqueda global), esto va a ser siempre 0.</td> + <td><code>25</code></td> + </tr> + <tr> + <td><code>ignoreCase</code></td> + <td>Indica si la bandera "<code>i</code>" ha sido usada para ignorar mayusculas y minusculas.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>global</code></td> + <td>Indica si la bandera "<code>g</code>" fue usada para hacer una busqueda global.</td> + <td><code>true</code></td> + </tr> + <tr> + <td><code>multiline</code></td> + <td>Indica si la bandera "<code>m"</code> fue usada para buscar en cadenas sobre multiples lineas</td> + <td><code>false</code></td> + </tr> + <tr> + <td><code>source</code></td> + <td>El texto del patrón de busqueda</td> + <td><code>quick\s(brown).+?(jumps)</code></td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Encontrando_coincidencias_sucesivas">Encontrando coincidencias sucesivas</h3> + +<p>Si tu expresión regular contiene la bandera "<code>g</code>", puedes usar el método <code>exec()</code> varias veces para encontrar coincidencias sucesivas en la misma cadena. Cuando lo haces, la busqueda empieza en la subcadena <code>str</code> especificada por la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}} de la expresión regular ({{jsxref("RegExp.prototype.test()", "test()")}} también movera hacia adelante el indice de la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}}). Por ejemplo, asumiendo que tienes este script:</p> + +<pre class="brush: js">var myRe = /ab*/g; +var str = 'abbcdefabh'; +var myArray; +while ((myArray = myRe.exec(str)) !== null) { + var msg = 'Se ha encontrado ' + myArray[0] + '. '; + msg += 'La siguiente coincidencia empieza en el indice ' + myRe.lastIndex; + console.log(msg); +} +</pre> + +<p>Este script muestra el siguiente texto:</p> + +<pre>Se ha encontrado abb. La siguiente coincidencia empieza en el indice 3 +Se ha encontrado ab. La siguiente coincidencia empieza en el indice 9 +</pre> + +<p>Nota: No uses la expresión regular literalmente (o el constructor {{jsxref("RegExp")}}) dentro de la condición del bucle while o se creará un bucle infinito si hay una coincidencia, por culpa de que la propiedad {{jsxref("RegExp.lastIndex", "lastIndex")}} va a ser reiniciada por cada iteración del bucle. Además asegurate de que has usado la bandera de busqueda global "g" o se creará un bucle también.</p> + +<h3 id="Usando_exec()_con_RegExp_literales">Usando <code>exec()</code> con <code>RegExp</code> literales</h3> + +<p>También se puede usar <code>exec() sin crear un objeto de </code> {{jsxref("RegExp")}}:</p> + +<pre class="brush: js">var matches = /(hola \S+)/.exec('Esto es un hola mundo!'); +console.log(matches[1]); +</pre> + +<p>Esto logueará un mensaje que contiene 'hola mundo!'.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.6.21', 'RegExp.exec')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.exec', 'RegExp.exec')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_con_navegadores">Compatiblidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</th> + <th>Chrome</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Móvil (Gecko)</th> + <th>IE Móvil</th> + <th>Opera Móvil</th> + <th>Safari Móvil</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Capítulo de <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a> en la <a href="/en-US/docs/Web/JavaScript/Guide">Guía de Javascript</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html b/files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html new file mode 100644 index 0000000000..9073d631d1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html @@ -0,0 +1,142 @@ +--- +title: RegExp.prototype.ignoreCase +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase +--- +<div>{{JSRef}}</div> + +<p>La propiedad <strong><code>ignoreCase</code></strong> indica si la expresión regular está usando la bandera "i". <code>ignoreCase</code> es una propiedad de <em>sólo lectura </em>de una instancia de expresión regular.</p> + +<div>{{js_property_attributes(0, 0, 1)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor de <code>ignoreCase es un </code>{{jsxref("Boolean")}} y <code>true si la bandera "i" fue usada. De otra manera es false. La bandera "i" indica que el se debe ignorar la capitalización al tratar de encontrar los equivalentes en un texto.</code></p> + +<p>No se puede cambiar esta propiedad directamente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_ignoreCase">Usando <code>ignoreCase</code></h3> + +<pre class="brush: js">var regex = new RegExp('foo', 'i'); + +console.log(regex.ignoreCase); // true +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2. JavaScript 1.5: <code>ignoreCase</code> es una propiedad de la instancia {{jsxref("RegExp")}}, y no del objecto {{jsxref("RegExp")}}.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td><code>ignoreCase</code> es ahora una propiedad accesora del prototipo en lugar de una propiedad de dato de una instancia.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Propiedad accesor del Prototipo</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</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 para Android</th> + <th>Edge</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> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Propiedad accesor del Prototipo</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("RegExp.lastIndex")}}</li> + <li>{{jsxref("RegExp.prototype.global")}}</li> + <li>{{jsxref("RegExp.prototype.multiline")}}</li> + <li>{{jsxref("RegExp.prototype.source")}}</li> + <li>{{jsxref("RegExp.prototype.sticky")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/index.html b/files/es/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..9a26edead0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,264 @@ +--- +title: RegExp +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp +tags: + - Clase + - Expresiones Regulares + - JavaScript + - Referencia + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>RegExp</code></strong> se utiliza para hacer coincidir texto con un patrón.</p> + +<p>Para obtener una introducción a las expresiones regulares, lee el {{JSxRef("../Guide/Regular_Expressions", "capítulo sobre expresiones regulares")}} en la {{JSxRef("../Guide/Regular_Expressions", "Guía de JavaScript")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<h3 id="Notación_literal_y_constructor">Notación literal y constructor</h3> + +<p>Hay dos formas de crear un objeto <code>RegExp</code>: una <em>notación literal</em> y un <em>constructor</em>.</p> + +<ul> + <li>Los parámetros de <strong>la notación literal</strong> se encierran entre barras y no utilizan comillas.</li> + <li>Los parámetros de <strong>la función constructora</strong> no se encierran entre barras, pero utilizan comillas.</li> +</ul> + +<p>Las siguientes tres expresiones crean el mismo objeto de expresión regular:</p> + +<pre class="brush: js notranslate">let er = /ab+c/i; // notación literal +let er = new RegExp('ab+c', 'i') // constructor con patrón de cadena como primer argumento +let er = new RegExp(/ab+c/, 'i') // constructor con expresión regular literal como primer argumento (a partir de ECMAScript 6) +</pre> + +<p>La notación literal da como resultado la compilación de la expresión regular cuando se evalúa la expresión. Utiliza la notación literal cuando la expresión regular permanecerá constante. Por ejemplo, si usas notación literal para construir una expresión regular usada en un bucle, la expresión regular no se volverá a compilar en cada iteración.</p> + +<p>El constructor del objeto de expresión regular, por ejemplo, <code>new RegExp('ab+c')</code>, da como resultado la compilación en tiempo de ejecución de la expresión regular. Utiliza la función constructora cuando sepas que el patrón de expresión regular cambiará, o no conozcas el patrón y lo obtienes de otra fuente, tal como la entrada del usuario.</p> + +<h3 id="Banderas_en_el_constructor">Banderas en el constructor</h3> + +<p>A partir de ECMAScript 6, <code>new RegExp(/ab+c/, 'i')</code> ya no arroja un {{JSxRef("TypeError")}} (<code>"no puedes proporcionar banderas cuando construyes una expresión regular a partir de otra"</code>) cuando el primer argumento es una <code>RegExp</code> y el segundo argumento <code><var>flags</var></code> está presente. En su lugar, se crea una nueva <code>RegExp</code> a partir de los argumentos.</p> + +<p>Cuando se utiliza la función constructora, las reglas de escape de cadenas normales (antes de los caracteres especiales con <code>\</code> cuando se incluyen en una cadena) son necesarias.</p> + +<p>Por ejemplo, los siguientes son equivalentes:</p> + +<pre class="brush: js notranslate">let er = /\w+/ +let er = new RegExp('\\w+') +</pre> + +<h3 id="Propiedades_de_expresiones_regulares_similares_a_Perl">Propiedades de expresiones regulares similares a Perl</h3> + +<p>Ten en cuenta que varias de las propiedades de {{JSxRef("RegExp")}} tienen nombres largos y cortos (tipo Perl). Ambos nombres siempre se refieren al mismo valor. (Perl es el lenguaje de programación a partir del cual JavaScript modeló sus expresiones regulares). Consulta también las propiedades {{JSxRef("Características_Desaprobadas", "en desuso de RegExp", "#Propiedades_de_RegExp")}}</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{JSxRef("Objetos_globales/RegExp/RegExp", "RegExp()")}}</dt> + <dd>Crea un nuevo objeto <code>RegExp</code>.</dd> +</dl> + +<h2 id="Propiedades_estáticas">Propiedades estáticas</h2> + +<dl> + <dt>{{JSxRef("RegExp.@@species", "get RegExp[@@species]")}}</dt> + <dd>La función constructora utilizada para crear objetos derivados.</dd> + <dt>{{JSxRef("RegExp.lastIndex")}}</dt> + <dd>El índice en el que comenzará la siguiente búsqueda.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{JSxRef("RegExp.prototype.flags")}}</dt> + <dd>Una cadena que contiene las banderas del objeto <code>RegExp</code>.</dd> + <dt>{{JSxRef("RegExp.prototype.dotAll")}}</dt> + <dd>Si el "<code>.</code>" coincide con nuevas líneas o no.</dd> + <dt>{{JSxRef("RegExp.prototype.global")}}</dt> + <dd>Si se debe probar o no la expresión regular con todas las posibles ocurrencias en una cadena, o solo con la primera.</dd> + <dt>{{JSxRef("RegExp.prototype.ignoreCase")}}</dt> + <dd>Si se deben o no ignorar las mayúsculas/minúsculas al buscar en una cadena.</dd> + <dt>{{JSxRef("RegExp.prototype.multiline")}}</dt> + <dd>Si buscar o no en cadenas multilínea.</dd> + <dt>{{JSxRef("RegExp.prototype.source")}}</dt> + <dd>El texto del patrón.</dd> + <dt>{{JSxRef("RegExp.prototype.sticky")}}</dt> + <dd>Si la búsqueda es pegajosa o no.</dd> + <dt>{{JSxRef("RegExp.prototype.unicode")}}</dt> + <dd>Si las funciones Unicode están habilitadas o no.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{JSxRef("RegExp.prototype.compile()")}}</dt> + <dd>(Re)compila una expresión regular durante la ejecución de un script.</dd> + <dt>{{JSxRef("RegExp.prototype.exec()")}}</dt> + <dd>Ejecuta una búsqueda de una coincidencia en su parámetro de cadena.</dd> + <dt>{{JSxRef("RegExp.prototype.test()")}}</dt> + <dd>Prueba una coincidencia en su parámetro de cadena.</dd> + <dt>{{JSxRef("RegExp.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{JSxRef("Object.prototype.toString()")}}.</dd> + <dt>{{JSxRef("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt> + <dd>Realiza la coincidencia con la cadena dada y devuelve el resultado de la coincidencia.</dd> + <dt>{{JSxRef("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt> + <dd>Devuelve todas las coincidencias de la expresión regular con una cadena.</dd> + <dt>{{JSxRef("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt> + <dd>Reemplaza las coincidencias en una cadena dada con una nueva subcadena.</dd> + <dt>{{JSxRef("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt> + <dd>Busca la coincidencia en la cadena dada y devuelve el índice del patrón encontrado en la cadena.</dd> + <dt>{{JSxRef("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt> + <dd>Divide la cadena dada en un arreglo separando la cadena en subcadenas.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_una_expresión_regular_para_cambiar_el_formato_de_los_datos">Usar una expresión regular para cambiar el formato de los datos</h3> + +<p>El siguiente script usa el método {{JSxRef("String.prototype.replace()", "replace()")}} de la instancia {{JSxRef("Objetos_globales/String", "String")}} para hacer coincidir una nombre en el formato <em>primero último</em> y enviarlo en el formato <em>último, primero</em>.</p> + +<p>En el texto de reemplazo, el script usa <code>$1</code> y <code>$2</code> para indicar los resultados de los correspondientes paréntesis coincidentes en el patrón de expresión regular.</p> + +<pre class="brush: js notranslate">let er = /(\w+)\s(\w+)/ +let str = 'John Smith' +let newstr = str.replace(er, '$2, $1') +console.log(newstr) +</pre> + +<p>Esto muestra <code>"Smith, John"</code>.</p> + +<h3 id="Uso_de_expresiones_regulares_para_dividir_líneas_con_diferentes_finales_de_líneasaltos_de_línea">Uso de expresiones regulares para dividir líneas con diferentes finales de línea/saltos de línea</h3> + +<p>El final de línea predeterminado varía según la plataforma (Unix, Windows, etc.). La división de líneas proporcionada en este ejemplo funciona en todas las plataformas.</p> + +<pre class="brush: js notranslate">let texto = 'Un poco de texto\ny un poco más\r\ny aún\reste es el final' +let lineas = texto.split(/\r\n|\r|\n/) +console.log(lineas) // logs [ 'Un poco de texto', 'y un poco más', 'y aún', 'este es el final' ] +</pre> + +<p>Ten en cuenta que el orden de los patrones en la expresión regular es importante.</p> + +<h3 id="Usar_expresiones_regulares_en_varias_líneas">Usar expresiones regulares en varias líneas</h3> + +<pre class="brush: js notranslate">let s = '¡Por favor, sí\nhazme el día!' + +s.match(/sí.*día/); +// Devuelve null + +s.match(/sí[^]*día/); +// Devuelve ["sí\nhazme el día"] +</pre> + +<h3 id="Usar_una_expresión_regular_con_la_bandera_pegajosa">Usar una expresión regular con la bandera pegajosa</h3> + +<p>La bandera {{JSxRef("Objetos_globales/RegExp/sticky", "sticky")}} indica que la expresión regular realiza una coincidencia permanente en la cadena de destino al intentar hacer coincidir a partir de {{JSxRef("RegExp.prototype.lastIndex")}}.</p> + +<pre class="brush: js notranslate">let str = '#foo#' +let regex = /foo/y + +regex.lastIndex = 1 +regex.test(str) // true +regex.lastIndex = 5 +regex.test(str) // false (lastIndex se tiene en cuenta con una bandera pegajosa) +regex.lastIndex // 0 (restablecer después de un error de coincidencia)</pre> + +<h3 id="La_diferencia_entre_la_bandera_pegajosa_y_la_bandera_global">La diferencia entre la bandera pegajosa y la bandera global</h3> + +<p>Con la bandera pegajosa <code>y</code>, la siguiente coincidencia tiene que ocurrir en la posición <code>lastIndex</code>, mientras que con la bandera global <code>g</code>, la coincidencia puede ocurrir en la posición <code>lastIndex</code> o posterior:</p> + +<pre class="brush: js notranslate">er = /\d/y; +while (r = re.exec("123 456")) console.log(r, "Y er.lastIndex", er.lastIndex); + +// [ '1', index: 0, input: '123 456', groups: undefined ] AND er.lastIndex 1 +// [ '2', index: 1, input: '123 456', groups: undefined ] AND er.lastIndex 2 +// [ '3', index: 2, input: '123 456', groups: undefined ] AND er.lastIndex 3 +// ... y no más coincidencias.</pre> + +<p>Con la bandera global <code>g</code>, coincidirían los 6 dígitos, no solo 3.</p> + +<h3 id="Expresión_regular_y_caracteres_Unicode">Expresión regular y caracteres Unicode</h3> + +<p><code>\w</code> y <code>\W</code> solo coincide con caracteres basados en ASCII; por ejemplo, <code>a</code> a <code>z</code>, <code>A</code> a <code>Z</code>, <code>0</code> a <code>9</code> y <code>_</code>.</p> + +<p>Para hacer coincidir caracteres de otros idiomas como Cirílico o Hebreo, usa <code>\u<var>hhhh</var></code>, donde <code><var>hhhh</var></code> es el Valor Unicode en hexadecimal.</p> + +<p>Este ejemplo demuestra cómo se pueden separar los caracteres Unicode de una palabra.</p> + +<pre class="brush: js notranslate">let texto = 'Образец texto на русском языке' +let regex = /[\u0400-\u04FF]+/g + +let match = regex.exec(text) +console.log(match[0]) // registra 'Образец' +console.log(regex.lastIndex) // registra '7' + +let match2 = regex.exec(texto) +console.log(match2[0]) // registra 'на' [no registró 'texto'] +console.log(regex.lastIndex) // registra '15' + +// y así sucesivamente +</pre> + +<p>La función {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "Escapes de propiedad Unicode")}} presenta una solución, al permitir una declaración tan simple como <code>\p{scx=Cyrl}</code>.</p> + +<h3 id="Extraer_el_nombre_de_subdominio_de_la_URL">Extraer el nombre de subdominio de la URL</h3> + +<pre class="brush: js notranslate">let url = 'http://xxx.dominio.com' +console.log(/[^.]+/.exec(url)[0].substr(7)) // registra 'xxx' +</pre> + +<div class="blockIndicator note"> +<p>En lugar de utilizar expresiones regulares para analizar las URL, normalmente es mejor utilizar el analizador de URL integrado en los navegadores mediante la <a href="/es/docs/Web/API/URL_API">API URL</a>.</p> +</div> + +<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-regexp-regular-expression-objects', 'RegExp')}}</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.builtins.RegExp")}}</p> +</div> + +<h3 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h3> + +<p>A partir de Firefox 34, en el caso de un grupo de captura con cuantificadores que impiden su ejercicio, el texto coincidente para un grupo de captura ahora es <code>undefined</code> en lugar de una cadena vacía:</p> + +<pre class="brush: js notranslate">// Firefox 33 o anterior +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'grupo: " + group + "'"); +}); +// 'grupo: ' + +// Firefox 34 o más reciente +'x'.replace(/x(.)?/g, function(m, group) { + console.log("'grupo: " + group + "'"); +}); +// 'grupo: undefined' +</pre> + +<p>Ten en cuenta que, debido a la compatibilidad web, <code>RegExp.<var>$N</var></code> seguirá devolviendo una cadena vacía en lugar de <code>undefined</code> ({{bug(1053944)}}).</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>El capítulo de {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}</li> + <li>{{JSxRef("String.prototype.match()")}}</li> + <li>{{JSxRef("String.prototype.replace()")}}</li> + <li>{{JSxRef("String.prototype.split()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/regexp/index.html b/files/es/web/javascript/reference/global_objects/regexp/regexp/index.html new file mode 100644 index 0000000000..ad3a8c90e9 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/regexp/index.html @@ -0,0 +1,114 @@ +--- +title: Constructor RegExp() +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp +tags: + - Constructor + - JavaScript + - Referencia + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/RegExp +--- +<div>{{JSRef}}</div> + +<p>El constructor <strong><code>RegExp</code></strong> crea un objeto de expresión regular para hacer coincidir el texto con un patrón.</p> + +<p>Para ver la introducción a las expresiones regulares, lee el {{JSxRef("../Guide/Regular_Expressions", "capítulo sobre expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-constructor.html")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Son posibles las notaciones literal, constructor y de fábrica:</p> + +<pre class="syntaxbox notranslate">/<var>patrón</var>/<var>banderas</var> +new RegExp(<var>patrón</var>[, <var>banderas</var>]) +RegExp(<var>patrón</var>[, <var>banderas</var>]) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>patrón</var></code></dt> + <dd>El texto de la expresión regular.</dd> + <dd>A partir de ES5, también puede ser otro objeto o <code>RegExp</code> literal (solo para las dos notaciones del constructor RegExp). Los patrones pueden incluir {{JSxRef("../Guide/Regular_Expressions", "caracteres especiales", "#Usar_caracteres_especiales")}} para que coincidan con un rango de valores más amplio que el de una cadena literal.</dd> + <dt><code><var>banderas</var></code></dt> + <dd> + <p>Si se especifica, <code><var>banderas</var></code> es una cadena que contiene las banderas para agregar.</p> + + <p>Alternativamente, si se proporciona un objeto para el patrón, la cadena <code><var>banderas</var></code> reemplazará cualquiera de las banderas de ese objeto (y <code>lastIndex</code> se restablecerá a <code>0</code>) (a partir de ES2015).</p> + + <p>Si no se especifica <code><var>banderas</var></code> y se proporciona un objeto de expresiones regulares, las banderas de ese objeto (y el valor de <code>lastIndex</code>) se copiarán.</p> + + <p><code>banderas</code> puede contener cualquier combinación de los siguientes caracteres:</p> + + <dl> + <dt><code>g</code> (coincidencia global)</dt> + <dd>Encuentra todas las coincidencias en lugar de detenerse después de la primera.</dd> + <dt><code>i</code> (ignorar mayúsculas y minúsculas)</dt> + <dd>Si el indicador <code>u</code> también está habilitado, utiliza el plegado de mayúsculas y minúsculas Unicode.</dd> + <dt><code>m</code> (multilínea)</dt> + <dd>Trata los caracteres iniciales y finales (<code>^</code> y <code>$</code>) como si estuvieran trabajando en varias líneas. En otras palabras, hace coincidir el principio o el final de <em>cada</em> línea (delimitada por <code>\n</code> o <code>\r</code>), no solo al principio o final de toda la cadena de entrada.</dd> + <dt><code>s</code> («<em>dotAll</em>» o punto para todo)</dt> + <dd>Permite que el punto (<code>.</code> coincida con nuevas líneas o no.</dd> + <dt><code>u</code> (unicode)</dt> + <dd>Trata el <code><var>patrón</var></code> como una secuencia de puntos de código Unicode. (Consulta también <a href="/es/docs/Web/API/DOMString/Binary">Cadenas binarias</a>).</dd> + <dt><code>y</code> (sticky)</dt> + <dd>Coincide solo con el índice indicado por la propiedad <code>lastIndex</code> de esta expresión regular en la cadena destino. No intenta coincidir con índices posteriores.</dd> + </dl> + </dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Notación_literal_y_constructor">Notación literal y constructor</h3> + +<p>Hay dos formas de crear un objeto <code>RegExp</code>: una <em>notación literal</em> y un <em>constructor</em>.</p> + +<ul> + <li>Los parámetros de <strong>la notación literal</strong> se encierran entre barras y no utilizan comillas.</li> + <li>Los parámetros de <strong>la función constructora</strong> no se encierran entre barras, pero utilizan comillas.</li> +</ul> + +<p>Las siguientes tres expresiones crean la misma expresión regular:</p> + +<pre class="brush: js notranslate">/ab+c/i +new RegExp(/ab+c/, 'i') // notación literal +new RegExp('ab+c', 'i') // constructor +</pre> + +<p>La notación literal da como resultado la compilación de la expresión regular cuando se evalúa la expresión. Utiliza la notación literal cuando la expresión regular permanecerá constante. Por ejemplo, si usas notación literal para construir una expresión regular usada en un bucle, la expresión regular no se volverá a compilar en cada iteración.</p> + +<p>El constructor del objeto de expresión regular, por ejemplo, <code>new RegExp('ab+c')</code>, da como resultado la compilación en tiempo de ejecución de la expresión regular. Usa la función constructora cuando sepas que el patrón de la expresión regular cambiará, o no conoces el patrón y lo obtienes de otra fuente, como la entrada del usuario.</p> + +<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-regexp-constructor', 'RegExp constructor')}}</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.builtins.RegExp.RegExp")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>El capítulo de {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} en la {{JSxRef("../Guide", "Guía de JavaScript")}}</li> + <li>{{JSxRef("String.prototype.match()")}}</li> + <li>{{JSxRef("String.prototype.replace()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html b/files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html new file mode 100644 index 0000000000..39530ee1b5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html @@ -0,0 +1,54 @@ +--- +title: RegExp.rightContext ($') +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/rightContext +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>La propiedad <strong>rightContext <em>(No es estándar)</em></strong> es una propiedad estática y de solo lectura de expresiones regulares que contiene la subcadena que sigue a la coincidencia más reciente. el alias para esta propiedad es <code>RegExp.$'</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>RegExp</var>.rightContext +RegExp["$'"]</code> +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad <code>rightContext</code> es estática, no es una propiedad de un objeto de expresión regular individual. Debe usarse como <code>RegExp.rightContext</code> o <code>RegExp["$'"].</code></p> + +<p>El valor de la propiedad <code>rightContext</code> es de solo lectura y se modifica cada que hay una coincidencia exitosa.</p> + +<p>Tenga presente que no puede usar la abreviatura (<code>RegExp.$'</code>), porque el analizador espera una cadena de inicio, si lo hace optendra un error de sintaxis {{jsxref("SyntaxError")}} , para este caso, usted debe usar corchetes. consulte <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">notación de paréntesis para acceso a la propiedad</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_rightContext_y_'">Usando <code>rightContext</code> y <code>$'</code></h3> + +<pre class="brush: js">var re = /hola/g; +re.test('hola mundo!'); +RegExp.rightContext; // " mundo!" +RegExp["$'"]; // " mundo!" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No estándar. No forma parte de ninguna especificación actual.</p> + +<h2 id="Navegadores_compactibles">Navegadores compactibles</h2> + +<div> + + +<p>{{Compat("javascript.builtins.RegExp.rightContext")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{non-standard_inline}} {{jsxref("RegExp.input", "RegExp.input ($_)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.lastMatch", "RegExp.lastMatch ($&)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.lastParen", "RegExp.lastParen ($+)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.leftContext", "RegExp.leftContext ($`)")}}</li> + <li>{{non-standard_inline}} {{jsxref("RegExp.n", "RegExp.$1-$9")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/test/index.html b/files/es/web/javascript/reference/global_objects/regexp/test/index.html new file mode 100644 index 0000000000..4507b57c97 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/test/index.html @@ -0,0 +1,152 @@ +--- +title: RegExp.prototype.test() +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/test +tags: + - Expresion Regular + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/test +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>test()</strong></code> ejecuta la búsqueda de una ocurrencia entre una expresión regular y una cadena especificada. Devuelve <code>true</code> o <code>false</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.test(<var>cadena</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>cadena</code></dt> + <dd>La cadena a comparar contra la expresión regular.</dd> +</dl> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>Retorna <code>true</code> si existe una coincidencia entre la expresión regular y la cadena especificada; de lo contrario retorna <code>false</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Use <code>test()</code> cuando desee saber si existe la ocurrencia de un patrón en una cadena (similar al método {{jsxref("String.prototype.search()")}}, la diferencia es que <code>test()</code> devuelve un booleano, mientras que <code>search()</code> devuelve el índice de la coincidencia (si la encuentra) o -1 si no la encuentra).</p> + +<p>Si requiere más información (a coste de una ejecución más lenta) utilice el método {{jsxref("RegExp.prototype.exec()", "exec()")}}. Al igual que este último, multiples llamadas a <code>test()</code> sobre la misma instancia global de una expresión regular avanzará desde de la ocurrencia anterior.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_test()">Usando <code>test()</code></h3> + +<p>Ejemplo simple que prueba si "hello" está contenido al principio de una cadena y devuelve un valor booleano.</p> + +<pre class="brush: js">var cadena = "hello world!"; +var result = /^hello/.test(cadena); +console.log(result); // true +</pre> + +<p dir="ltr" id="tw-target-text">El siguiente ejemplo registra un mensaje que depende del éxito de la prueba:</p> + +<pre class="brush: js">function probarEntrada(regexp, cadena){ + var subcadena; + if (regexp.test(cadena)) { + subcadena = ' contiene '; + } else { + subcadena = ' no contiene '; + } + console.log(cadena + subcadena + regexp.source); +} +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definition inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.6.3', 'RegExp.test')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.test', 'RegExp.test')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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> + +<h3 id="Notas_específicas_para_Gecko">Notas específicas para Gecko</h3> + +<p>Antes de Gecko 8.0 {{geckoRelease("8.0")}}, <code>test()</code> estaba incorrectamente implementado; cuando era llamado sin parámetros, buscaba emparejar contra el valor de la entrada anterior (la propiedad <code>RegExp.input</code>) en lugar de hacerlo contra la cadena <code>"undefined"</code>. Esto ha sido corregido; ahora <code>/undefined/.test()</code> resulta correctamente en <code>true</code>, en lugar de un error.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>El capítulo <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a> de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide">Guía JavaScript</a></li> + <li>{{jsxref("RegExp")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/regexp/tostring/index.html b/files/es/web/javascript/reference/global_objects/regexp/tostring/index.html new file mode 100644 index 0000000000..50c10d2bb2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/regexp/tostring/index.html @@ -0,0 +1,171 @@ +--- +title: RegExp.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/RegExp/toString +tags: + - Expresion Regular + - Prototipo + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp/toString +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toString()</code></strong> devuelve una cadena que representa el patrón de la expresión regular.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>regexObj</var>.toString();</code></pre> + +<h3 id="Valor_de_Retorno">Valor de Retorno</h3> + +<p>Una cadena que representa el objeto dado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El objeto {{jsxref("RegExp")}} reemplaza el método <code>toString()</code> del objeto {{jsxref("Object")}}; no hereda de {{jsxref("Object.prototype.toString()")}}. Para objetos {{jsxref("RegExp")}}, el método <code>toString()</code> retorna una cadena que representa el patrón de la expresión regular.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toString()">Usando <code>toString()</code></h3> + +<p dir="ltr" id="tw-target-text">El siguiente ejemplo muestra la cadena de representación de un objeto {{jsxref("RegExp")}}:</p> + +<pre class="brush: js">var myExp = new RegExp('a+b+c'); +console.log(myExp.toString()); // '/a+b+c/' + +var foo = new RegExp('bar', 'g'); +console.log(foo.toString()); // '/bar/g' +</pre> + +<h3 id="Expresiones_regulares_vacías_y_escapado">Expresiones regulares vacías y escapado</h3> + +<p>A partir de ECMAScript 5, una expresión regular vacía devuelve la cadena "/(?:)/" y los terminadores de línea tales como "\n" son escapados:</p> + +<pre class="brush: js">new RegExp().toString(); // "/(?:)/" + +new RegExp('\n').toString() === "/\n/"; // true, antes de ES5 +new RegExp('\n').toString() === "/\\n/"; // true, desde ES5 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table" style="color: #3b3c40; font-size: 14px; font-weight: normal;"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Agregado de la definición para escapado de caracteres especiales y "(?:)" para expresiones regulares vacías.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Escaping</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generic function</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(39)}}</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>Escaping</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(38)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Generic function</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(39)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/@@iterator/index.html b/files/es/web/javascript/reference/global_objects/set/@@iterator/index.html new file mode 100644 index 0000000000..7445821fc0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/@@iterator/index.html @@ -0,0 +1,86 @@ +--- +title: 'Set.prototype[@@iterator]()' +slug: Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator +tags: + - Iteradores +translation_of: Web/JavaScript/Reference/Global_Objects/Set/@@iterator +--- +<div>{{JSRef}}</div> + +<p>El valor inicial de la propiedad <code><strong>@@iterator</strong></code>, es la misma función objeto que el valor inicial de la propiedad {{jsxref("Set.prototype.values()", "values")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-@@iterator.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo interactivo lo puedes encontrar en el repositorio de Github. Si quieres contribuir con más ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>[Symbol.iterator]</code></pre> + +<h3 id="Valor_retornado"> Valor retornado</h3> + +<p>La función <strong>iteradora</strong> <code>Set</code> , la cuál es {{jsxref("Set.prototype.values()", "values()")}} por defecto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_iterator">Usando <code>[@@iterator]()</code></h3> + +<pre class="brush:js">const mySet = new Set(); +mySet.add('0'); +mySet.add(1); +mySet.add({}); + +const setIter = mySet[Symbol.iterator](); + +console.log(setIter.next().value); // "0" +console.log(setIter.next().value); // 1 +console.log(setIter.next().value); // Object +</pre> + +<h3 id="Usando_iterator_con_for..of">Usando <code>[@@iterator]()</code> con <code>for..of</code></h3> + +<pre class="brush:js">const mySet = new Set(); +mySet.add('0'); +mySet.add(1); +mySet.add({}); + +for (const v of mySet) { + console.log(v); +} +</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-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div class="hidden">La tabla de compatibilidad de esta página está generada a partir de datos estructurados. Si quieres contribuir con ello, por favor comprueba <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div> + +<p>{{Compat("javascript.builtins.Set.@@iterator")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Set.prototype.entries()")}}</li> + <li>{{jsxref("Set.prototype.keys()")}}</li> + <li>{{jsxref("Set.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/add/index.html b/files/es/web/javascript/reference/global_objects/set/add/index.html new file mode 100644 index 0000000000..f9385894fb --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/add/index.html @@ -0,0 +1,124 @@ +--- +title: Set.prototype.add() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/add +translation_of: Web/JavaScript/Reference/Global_Objects/Set/add +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>add()</strong></code> añade un nuevo elemento con un valor específico al final del objeto <code>Set</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.add(value);</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt>value</dt> + <dd>Requerido. El valor del elemento a ser añadido al objeto <code>Set</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>El objeto <code>Set</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_add">Usando el método add</h3> + +<pre class="brush: js">var mySet = new Set(); + +mySet.add(1); +mySet.add(5).add("some text"); // chainable + +console.log(mySet); +// Set [1, 5, "some text"] +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Prior to Firefox 33 {{geckoRelease("33")}}, <code>Set.prototype.add</code> returned <code>undefined</code> and was not chainable. This has been fixed ({{bug(1031632)}}). The behavior can be found in Chrome/v8 as well (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>).</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> + <li>{{jsxref("Set.prototype.has()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/clear/index.html b/files/es/web/javascript/reference/global_objects/set/clear/index.html new file mode 100644 index 0000000000..0fdca7e492 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/clear/index.html @@ -0,0 +1,119 @@ +--- +title: Set.prototype.clear() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/clear +tags: + - ECMAScript6 + - JavaScript + - Prototype + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/clear +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>clear()</strong></code> remueve todos los elementos de un objeto <code>Set</code>.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.clear();</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>{{jsxref("undefined")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_clear">Usando el método clear</h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add(1); +mySet.add("foo"); + +mySet.size; // 2 +mySet.has("foo"); // true + +mySet.clear(); + +mySet.size; // 0 +mySet.has("bar") // false +</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-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>38</td> + <td>{{CompatGeckoDesktop("19.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/delete/index.html b/files/es/web/javascript/reference/global_objects/set/delete/index.html new file mode 100644 index 0000000000..3e5544e06a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/delete/index.html @@ -0,0 +1,117 @@ +--- +title: Set.prototype.delete() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/delete +translation_of: Web/JavaScript/Reference/Global_Objects/Set/delete +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>delete()</strong></code> remueve el elemento especificado del objeto <code>Set</code>.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.delete(value);</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>valor</dt> + <dd>Requerido. El valor del elemento a remover del objeto <code>Set</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p><code>true</code> si el elemento ha sido removido exitosamente en el <code>Set</code>; de otra manera retorna <code>false</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_delete">Usando el método <code>delete</code></h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add("foo"); + +mySet.delete("bar"); // Retorna false. No hay elemento "bar" para ser removido. +mySet.delete("foo"); // Retorna true. Removido exitosamente. + +mySet.has("foo"); // Retorna false. El elemento "foo" ya no está presente. +</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-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.clear()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/entries/index.html b/files/es/web/javascript/reference/global_objects/set/entries/index.html new file mode 100644 index 0000000000..ba07d24187 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/entries/index.html @@ -0,0 +1,71 @@ +--- +title: Set.prototype.entries() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/entries +translation_of: Web/JavaScript/Reference/Global_Objects/Set/entries +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>entries()</strong></code> devuelve un nuevo objeto de tipo <code>Iterator</code> que contiene<strong> un array de tuplas <code>[value, value]</code></strong> por cada elemento en el <code>Set</code> original, manteniendo el orden de inserción. En los objetos de tipo <code>Set</code> no existe una clave <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">key</span></font> como ocurre en los objetos de tipo <code>Map</code>. Sin embargo, para mantener una API similar a la de los objetos de tipo <code>Map</code>, cada <em>entry</em> contiene el mismo valor para su clave y valor, devolviendo por tanto un array de tuplas <code>[value, value]</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-entries.html")}}</div> + +<p class="hidden">El código de este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interativos, simplemente clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.entries()</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un nuevo objeto de tipo <code>Iterator</code> que contiene un array de tuplas <code>[value, value]</code> por cada elemento en el <code>Set</code> original, en orden de inserción.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_entries">Usando el método <code>entries</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add('foobar'); +mySet.add(1); +mySet.add('baz'); + +var setIter = mySet.entries(); + +console.log(setIter.next().value); // ["foobar", "foobar"] +console.log(setIter.next().value); // [1, 1] +console.log(setIter.next().value); // ["baz", "baz"] +</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">Commentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.entries', 'Set.prototype.entries')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad de esta página ha sido generada a partir de datos estructurados. Si te apetece contribuir, comprueba <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos una pull request.</div> + +<p>{{Compat("javascript.builtins.Set.entries")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Set.prototype.keys()")}}</li> + <li>{{jsxref("Set.prototype.values()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/has/index.html b/files/es/web/javascript/reference/global_objects/set/has/index.html new file mode 100644 index 0000000000..e133de2d00 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/has/index.html @@ -0,0 +1,124 @@ +--- +title: Set.prototype.has() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/has +tags: + - ECMAScript6 + - JavaScript + - Prototype + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set/has +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>has()</strong></code> retorna un booleano indicando si el elemento especificado existe en el objeto <code>Set</code> o no.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.has(value);</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>valor</dt> + <dd>Requerido. El valor del cual se probará su presencia en el objeto <code>Set</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<dl> + <dt>Booleano</dt> + <dd>Retorna <code>true</code> si el elemento con el valor especificado existe en el objeto <code>Set</code>; de otra manera retorna <code>false</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_has">Usando el método <code>has</code></h3> + +<pre class="brush: js">var mySet = new Set(); +mySet.add("foo"); + +mySet.has("foo"); // retorna true +mySet.has("bar"); // retorna false +</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-set.prototype.has', 'Set.prototype.has')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>38</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>11</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("Set.prototype.add()")}}</li> + <li>{{jsxref("Set.prototype.delete()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/index.html b/files/es/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..db091b3a59 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,230 @@ +--- +title: Set +slug: Web/JavaScript/Referencia/Objetos_globales/Set +tags: + - ECMAScript 2015 + - JavaScript + - Object + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>Set</code></strong> permite almacenar valores únicos de cualquier tipo, incluso {{Glossary("Primitive", "valores primitivos")}} u referencias a objetos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">new Set([iterable]);</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>iterable</dt> + <dd>Si un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">objeto iterable </a>es pasado, todos sus elementos serán añadidos al nuevo Set. Si no se especifica este parámetro, o si su valor es <code>null,</code> el nuevo <code>Set</code> estará vacío.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una nueva instancia de <code>Set</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Los objetos <code><strong>Set</strong></code> son colecciones de valores. Se puede iterar sus elementos en el orden de su inserción. Un valor en un <code>Set</code> <strong>sólo puede estar una vez</strong>; éste es único en la colección <code>Set</code>.</p> + +<h3 id="Igualdad_de_valores">Igualdad de valores</h3> + +<p>Ya que cada valor en el Set tiene que ser único, la igualdad del valor será comprobada y esta igualdad no se basa en el mismo algoritmo usado en el operador <code>===</code>. Específicamente, para Sets, <code>+0</code> (el cual es estrictamente igual a <code>-0</code>) y <code>-0</code> son valores distintos. Sin embargo, esto ha cambiado en la última especificación ECMAScript 6. Iniciando con Gecko 29.0 {{geckoRelease("29")}} ({{bug("952870")}}) y un <a href="https://code.google.com/p/v8/issues/detail?id=3069">recent nightly Chrome</a>, <code>+0</code> y <code>-0</code> son tratados como el mismo valor en objetos <code>Set</code>. </p> + +<p><code>NaN</code> y <code>undefined</code> también pueden ser almacenados en un Set. <code>NaN</code> es considerado igual que <code>NaN</code> (A pesar que <code>NaN !== NaN</code>).</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>Set.length</code></dt> + <dd>El valor de la propiedad <code>length</code> es 0.</dd> + <dt>{{jsxref("Set.@@species", "get Set[@@species]")}}</dt> + <dd>La función constructora que es usada para crear objetos derivados.</dd> + <dt>{{jsxref("Set.prototype")}}</dt> + <dd>Representa el prototipo para el constructor Set. Permite la adición de propiedades a todos los objetos Set.</dd> +</dl> + +<h2 id="Instancias_Set">Instancias <code>Set</code></h2> + +<p>Todas las instancias de <code>Set</code> heredan de {{jsxref("Set.prototype")}}.</p> + +<h3 id="Propiedades_2">Propiedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Properties')}}</p> + +<h3 id="Métodos">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Set/prototype','Methods')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_objeto_Set">Usando el objeto <code>Set</code></h3> + +<pre class="brush: js">const mySet = new Set(); + +mySet.add(1); +mySet.add(5); +mySet.add('some text'); + +const o = {a: 1, b: 2}; +mySet.add(o); + +<code>mySet.add({a: 1, b: 2}); // La variable "o" referencia a otro objeto, por lo que agrega otro valor. +</code> +mySet.has(1); // true +mySet.has(3); // false, 3 no ha sido añadido al Set +mySet.has(5); // true +mySet.has(Math.sqrt(25)); // true +mySet.has('Some Text'.toLowerCase()); // true +mySet.has(o); // true + +mySet.size; // 5 + +mySet.delete(5); // Elimina 5 del Set +mySet.has(5); // false, 5 fue eliminado + +mySet.size; // 4, sólo removimos un valor +<code>console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}</code></pre> + +<h3 id="Iterando_los_Sets">Iterando los Sets</h3> + +<pre class="brush: js">// iterar todos los items de un set +// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2} +for (let item of mySet) console.log(item); + +// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2} +for (let item of mySet.keys()) console.log(item); + +// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2} +for (let item of mySet.values()) console.log(item); + +// imprimir en consola los items en orden: 1, 'some text', {a: 1, b: 2} +//(key y value poseen en mismo valor en este caso) +for (let [key, value] of mySet.entries()) console.log(key); + +// crear un Array plano con los mismos valores, utilizando Array.from +const myArr = Array.from(mySet); // [1, 'some text', {a: 1, b: 2}] + +// también se puede utilizar para guardar elementos del DOM +mySet.add(document.body); +mySet.has(document.querySelector('body')); // true + +// crear un Array plano con los mismos valores, utilizando propagación +const mySet2 = new Set([1,2,3,4]); +mySet2.size; // 4 +[...mySet2]; // [1,2,3,4] + +// la intersección entre dos sets puede ser simulada con +const intersection = <code>new Set([...set1].filter(x => set2.has(x)));</code> + +<code>// la diferencia puede ser simulada con +const difference = new Set([...set1].filter(x => !set2.has(x)));</code> + +// Iteración utilizando forEach +mySet.forEach((value) => { + console.log(value); +}); + +// 1 +// 2 +// 3 +// 4</pre> + +<h3 id="Implementando_operaciones_básicas">Implementando operaciones básicas</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js">Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>isSuperset <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>subset<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> subset<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> <span class="keyword token">true</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>union <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> union <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + union<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> union<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>intersection <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> intersection <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">has</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + intersection<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> intersection<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +Set<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>difference <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> difference <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> elem <span class="keyword token">of</span> setB<span class="punctuation token">)</span> <span class="punctuation token">{</span> + difference<span class="punctuation token">.</span><span class="keyword token">delete</span><span class="punctuation token">(</span>elem<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">return</span> difference<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">//Examples</span> +<span class="keyword token">var</span> setA <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">,</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + setB <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">,</span><span class="number token">3</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">,</span> + setC <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Set</span><span class="punctuation token">(</span><span class="punctuation token">[</span><span class="number token">3</span><span class="punctuation token">,</span><span class="number token">4</span><span class="punctuation token">,</span><span class="number token">5</span><span class="punctuation token">,</span><span class="number token">6</span><span class="punctuation token">]</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +setA<span class="punctuation token">.</span><span class="function token">isSuperset</span><span class="punctuation token">(</span>setB<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// => true</span> +setA<span class="punctuation token">.</span><span class="function token">union</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// => Set [1, 2, 3, 4, 5, 6]</span> +setA<span class="punctuation token">.</span><span class="function token">intersection</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// => Set [3, 4]</span> +setA<span class="punctuation token">.</span><span class="function token">difference</span><span class="punctuation token">(</span>setC<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// => Set [1, 2]</span></code></pre> + +<h3 id="Relación_con_los_objetos_Array">Relación con los objetos <code>Array</code></h3> + +<pre class="brush: js">const myArray = ['value1', 'value2', 'value3']; + +// Utiliza el constructor para para crear un set con el mismo contenido que un array +const mySet = new Set(myArray); + +mySet.has('value1'); // devuelve true + +// Utiliza la propagación para crear un array con los contenidos de un set +console.log([...mySet]); // Muestra lo mismo utilizando myArray</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-set-objects', 'Set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set-objects', 'Set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde información estructurada. Si desea contribuir, por favor revise la información en <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envie un pull request/merge request.</div> + +<p>{{Compat("javascript.builtins.Set")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/size/index.html b/files/es/web/javascript/reference/global_objects/set/size/index.html new file mode 100644 index 0000000000..444ad7ae8a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/size/index.html @@ -0,0 +1,106 @@ +--- +title: Set.prototype.size +slug: Web/JavaScript/Referencia/Objetos_globales/Set/size +translation_of: Web/JavaScript/Reference/Global_Objects/Set/size +--- +<div>{{JSRef}}</div> + +<p>La propiedad de acceso <code><strong>size</strong></code> devuelve el número de elementos que hay en el objeto {{jsxref("Set")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El valor de <code>size</code> es un entero que representa cuantas entradas tiene el objeto <code>Set</code>. La función de accesso set para <code>size</code> es <code>undefined</code>; no se puede cambiar esta propiedad.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_size">Usando <code>size</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add(1); +mySet.add(5); +mySet.add("un texto") + +mySet.size; // 3 +</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('ES6', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-set.prototype.size', 'Set.prototype.size')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Feature</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>38</td> + <td>{{ CompatGeckoDesktop("19") }} [1]</td> + <td>{{ CompatIE("11") }}</td> + <td>25</td> + <td>7.1</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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatGeckoMobile("19")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Gecko 13 (Firefox 13 / Thunderbird 13 / SeaMonkey 2.10) to Gecko 18 (Firefox 18 / Thunderbird 18 / SeaMonkey 2.15 / Firefox OS 1.0.1 / Firefox OS 1.1) la propiedad size fue implementado como un método <code>Set.prototype.size()</code>, esto fue cambiado a una propiedad en versiones posteriores conforme la especificación ECMAScript 6 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=807001">bug 807001</a>).</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Set")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/set/values/index.html b/files/es/web/javascript/reference/global_objects/set/values/index.html new file mode 100644 index 0000000000..8b7ec88ece --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/set/values/index.html @@ -0,0 +1,72 @@ +--- +title: Set.prototype.values() +slug: Web/JavaScript/Referencia/Objetos_globales/Set/values +translation_of: Web/JavaScript/Reference/Global_Objects/Set/values +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>values()</strong></code> retorna un objeto de tipo <code>Iterator</code> que contiene los valores para cada elemento en el objecto <code>Set</code> en orden de inserción.</p> + +<p>El metodo <strong><code>keys()</code></strong> es un alias para este metodo (por similaridad con objetos {{jsxref("Map")}}); se comporta exactamente igual y retorna <strong>valores</strong> para cada elemento de un <code>Set</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/set-prototype-values.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code><em>mySet</em>.values(); +</code></pre> + +<h3 id="Return_value">Return value</h3> + +<p>Un nuevo objeto <code><strong>Iterator</strong></code> que contiene los valores para cada elemento en el <code>Set</code> dado, en orden de inserción.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_values">Using <code>values()</code></h3> + +<pre class="brush:js">var mySet = new Set(); +mySet.add('foo'); +mySet.add('bar'); +mySet.add('baz'); + +var setIter = mySet.values(); + +console.log(setIter.next().value); // "foo" +console.log(setIter.next().value); // "bar" +console.log(setIter.next().value); // "baz"</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Set.values")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Set.prototype.entries()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/anchor/index.html b/files/es/web/javascript/reference/global_objects/string/anchor/index.html new file mode 100644 index 0000000000..c34abd62b1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/anchor/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.anchor() +slug: Web/JavaScript/Referencia/Objetos_globales/String/anchor +tags: + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor +--- +<div>{{JSRef("Objetos_globales", "String")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>anchor()</code></strong> crea un ancla HTML, {{HTMLElement("a")}}, que se usa como un enlace a hipertexto.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.anchor(<em>nombreAtributo</em>)</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>nombreAtributo</code></dt> + <dd>Una cadena.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Usa el método <code>anchor</code> con los métodos <code>document.write</code> o <code>document.writeln</code> para crear y mostrar programando un ancla en un documento. Crea el ancla con el método <code>anchor</code>, y entonces llama a <code>write</code> o <code>writeln</code> para mostrar el ancla en el documento. En JavaScript en el lado Servidor, usa la función <code>write</code> para mostrar el ancla.</p> + +<p>En la sintaxis, la cadena de texto representa el texto literal que usted quiere que el usuario vea. La cadena <code>nombreAtributo</code> representa el atributo <code>NAME</code> de la etiqueta A.</p> + +<p>Los anclas creados con el método <code>anchor</code> serán elementos del arreglo {{domxref("document.anchors")}}</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_anchor" name="Ejemplo:_Usando_anchor">Ejemplo: Usando <code>anchor</code></h3> + +<p>El siguiente código de ejemplo dentro de un elemento HTML <code>script</code>:</p> + +<pre class="brush: js">var miCadena = "Tabla de Contenidos"; +document.body.innerHTML = miCadena.anchor("ancla_contenidos"); +</pre> + +<p>obtendrá el siguiente HTML:</p> + +<pre class="brush: html"><a name="ancla_contenidos">Tabla de Contenidos</A> +</pre> + +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> + +<ul> + <li>{{jsxref("String.prototype.link()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/big/index.html b/files/es/web/javascript/reference/global_objects/string/big/index.html new file mode 100644 index 0000000000..0aa04e5b74 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/big/index.html @@ -0,0 +1,54 @@ +--- +title: String.prototype.big() +slug: Web/JavaScript/Referencia/Objetos_globales/String/big +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/big +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<p>{{deprecated_header}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Provoca que una cadena sea mostrada con un tamaño de fuente grade, como si estuviese en una etiqueta {{HTMLElement("big")}}.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.big()</pre> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Usa el método <code>big</code> para formatear y mostrar una cadena en un documento.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_big" name="Ejemplo:_Usando_big">Ejemplo: Usando <code>big</code></h3> + +<p>El siguiente ejemplo usa los métodos de <code>string</code> para cambiar el tamañó de una cadena:</p> + +<pre>var cadenaMundo="¡Hola Mundo!"; + +console.log(cadenaMundo.small()); +console.log("<P>" + cadenaMundo.big()); +console.log("<P>" + cadenaMundo.fontsize(7)); +</pre> + +<p>Este ejemplo produce el mismo resultado que el siguiente HTML:</p> + +<pre><small>¡Hola Mundo!</small> +<p><big>¡Hola Mundo!</big> +<p><fontsize=7>¡Hola Mundo!</fontsize> +</pre> + +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> + +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/blink/index.html b/files/es/web/javascript/reference/global_objects/string/blink/index.html new file mode 100644 index 0000000000..cf49f3d840 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/blink/index.html @@ -0,0 +1,42 @@ +--- +title: String.prototype.blink() +slug: Web/JavaScript/Referencia/Objetos_globales/String/blink +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/blink +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<p>{{deprecated_header}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena parpadee como si estuviese en una etiqueta {{HTMLElement("blink")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.blink()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>blink</code> para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3> +<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p> +<pre class="brush: js">var cadenaMundo="¡Hola mundo!" + +console.log(cadenaMundo.blink()) +console.log(cadenaMundo.bold()) +console.log(cadenaMundo.italics()) +console.log(cadenaMundo.strike()) +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html"><blink>¡Hola mundo!</blink> +<b>¡Hola mundo!</b> +<i>¡Hola mundo!</b> +<strike>¡Hola mundo!</strike> +</pre> +<h2 id="Vea_tambi.C3.A9n" name="Vea_tambi.C3.A9n">Vea también</h2> +<ul> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/bold/index.html b/files/es/web/javascript/reference/global_objects/string/bold/index.html new file mode 100644 index 0000000000..cc7c841181 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/bold/index.html @@ -0,0 +1,43 @@ +--- +title: String.prototype.bold() +slug: Web/JavaScript/Referencia/Objetos_globales/String/bold +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/bold +--- +<p>{{JSRef("Objetos_globales", "String")}}<br> + <br> + {{Deprecated_header}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Provoca que una cadena se muestre en negrita como si estuviera en una etiqueta {{HTMLElement("b")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.bold()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>bold</code> para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3> +<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p> +<pre class="brush: js">var cadenaMundo="¡Hola mundo!" + +console.log(cadenaMundo.blink()) +console.log(cadenaMundo.bold()) +console.log(cadenaMundo.italics()) +console.log(cadenaMundo.strike()) +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html"><blink>¡Hola mundo!</blink> +<b>¡Hola mundo!</b> +<i>¡Hola mundo!</i> +<strike>¡Hola mundo!</strike> +</pre> +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/charat/index.html b/files/es/web/javascript/reference/global_objects/string/charat/index.html new file mode 100644 index 0000000000..6ef6d46e37 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/charat/index.html @@ -0,0 +1,143 @@ +--- +title: String.prototype.charAt() +slug: Web/JavaScript/Referencia/Objetos_globales/String/charAt +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/charAt +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>charAt() </code></strong><code>de</code><strong><code> </code></strong>{{jsxref("String")}} devuelve en un nuevo String el carácter UTF-16 de una cadena.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><em>str</em>.charAt(<em>indice</em>)</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Un entero entre 0 y 1 menos que la longitud de la cadena. Si no se proporciona ningún indice charAt() utilizará 0.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer caracter es 0, y el índice del último caracter en una cadena llamada <code>nombreCadena</code> es <code>nombreCadena.length - 1</code>. Si el <code>indice</code> que usted proporciona está fuera del rango, JavaScript devuelve una cadena vacía.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Mostrando_caracteres_de_diferentes_localizaciones_en_una_cadena" name="Ejemplo:_Mostrando_caracteres_de_diferentes_localizaciones_en_una_cadena">Ejemplo: Mostrando caracteres de diferentes localizaciones en una cadena</h3> + +<p>El siguiente ejemplo muestra caracteres de diferentes localizaciones en la cadena "<code>Brave new world</code>":</p> + +<pre class="brush: js">var cualquierCadena="Brave new world"; + +console.log("El carácter en el índice 0 es '" + cualquierCadena.charAt(0) + "'") +console.log("El carácter en el índice 1 es '" + cualquierCadena.charAt(1) + "'") +console.log("El carácter en el índice 2 es '" + cualquierCadena.charAt(2) + "'") +console.log("El carácter en el índice 3 es '" + cualquierCadena.charAt(3) + "'") +console.log("El carácter en el índice 4 es '" + cualquierCadena.charAt(4) + "'") +console.log("El carácter en el índice 999 es '" + cualquierCadena.charAt(999) + "'") +</pre> + +<p>Estas líneas muestran lo siguiente:</p> + +<pre>El carácter en el índice 0 es 'B' +El carácter en el índice 1 es 'r' +El carácter en el índice 2 es 'a' +El carácter en el índice 3 es 'v' +El carácter en el índice 4 es 'e' +El carácter en el índice 999 es '' +</pre> + +<h2 id="Especificaciónes">Especificaciónes</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>Estándar</td> + <td>Primera definición</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.4', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.charat', 'String.prototype.charAt')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.indexOf()")}}, {{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/es/web/javascript/reference/global_objects/string/charcodeat/index.html new file mode 100644 index 0000000000..4eccf78f13 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -0,0 +1,65 @@ +--- +title: String.prototype.charCodeAt() +slug: Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt +tags: + - JavaScript + - Method + - Prototype + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <code><strong>charCodeAt()</strong></code> método devuelve un número indicando el valor Unicode del carácter en el índice proporcionado.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.charCodeAt(<em>indice</em>); +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Un entero entre 0 y 1 menos que la longitud de la cadena; si no se especifica, su valor predeterminado es 0.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>El rango del código Unicode va del 0 al 1,114,111<span class="comment">0x10FFFF</span>. Los primeros 128 códigos de Unicode encajan directamente con los códigos de caractéres de la codificación ASCII. Para información sobre Unicode, vea la <a href="/es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales#Unicode">Guía de JavaScript</a>. Observe que <code>charCodeAt</code> siempre devolverá un valor menor de 65.536.</p> + +<p><code>charCodeAt</code> devuelve {{jsxref("NaN")}} si el indice proporcionado no está entre 0 y 1 menos de la longitud de la cadena.</p> + +<p>En JavaScript 1.2 el método <code>charCodeAt</code> devuelve un número indicando el valor de la hoja de códigos ISO-Latin-1 del carácter correspondiente al índice proporcionado. El rango de la hoja de códigos ISO-Latin-1 va del 0 al 255. Del 0 al 127 encajan directamente con la hoja de códigos ASCII.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_charCodeAt" name="Ejemplo:_Usando_charCodeAt">Ejemplo: Usando <code>charCodeAt</code></h3> + +<p>El siguiente ejemplo devuelve 65, el valor Unicode para A. </p> + +<pre class="eval">"ABC".charCodeAt(0) // returns 65 +</pre> + +<p>El siguiente ejemplo devuelve 83.</p> + +<pre>"AaSdas".charCodeAt(2) // returns 83 +</pre> + +<p>teniendo en cuenta que 2 es la posicion de la letra. Si `S` fuera minuscula, el Unicode es diferente</p> + +<pre>"Aasdas".charCodeAt(2) // returns 115</pre> + +<p> </p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/codepointat/index.html b/files/es/web/javascript/reference/global_objects/string/codepointat/index.html new file mode 100644 index 0000000000..ae3fef3ec8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/codepointat/index.html @@ -0,0 +1,127 @@ +--- +title: String.prototype.codePointAt() +slug: Web/JavaScript/Referencia/Objetos_globales/String/codePointAt +translation_of: Web/JavaScript/Reference/Global_Objects/String/codePointAt +--- +<div>{{JSRef}}</div> + +<div> </div> + +<div>El método <strong><code>codePointAt() </code></strong><code>d</code>evuelve un entero no negativo que equivale al valor Unicode code point del carácter.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.codePointAt(<var>indice</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>indice</code></dt> + <dd>Índice del carácter en la cadena del que se quiere obtener el valor del Unicode code point.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un número que equivale al valor code point del carácter especificado en el índice de la cadena; devuelve {{jsxref("undefined")}} si no se encuentra carácter en la posición especifica.</p> + +<h2 id="Description">Description</h2> + +<p>If there is no element at the specified position, {{jsxref("undefined")}} is returned. If no UTF-16 surrogate pair begins at <code>pos</code>, the code unit at <code>pos</code> is returned.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_codePointAt()">Using <code>codePointAt()</code></h3> + +<pre class="brush: js">'ABC'.codePointAt(1); // 66 +'\uD800\uDC00'.codePointAt(0); // 65536 + +'XYZ'.codePointAt(42); // undefined +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>The following extends Strings to include the <code>codePointAt()</code> function as specified in ECMAScript 2015 for browsers not supporting it natively.</p> + +<pre class="brush: js">/*! http://mths.be/codepointat v0.1.0 by @mathias */ +if (!String.prototype.codePointAt) { + (function() { + 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` + var codePointAt = function(position) { + if (this == null) { + throw TypeError(); + } + var string = String(this); + var size = string.length; + // `ToInteger` + var index = position ? Number(position) : 0; + if (index != index) { // better `isNaN` + index = 0; + } + // Account for out-of-bounds indices: + if (index < 0 || index >= size) { + return undefined; + } + // Get the first code unit + var first = string.charCodeAt(index); + var second; + if ( // check if it’s the start of a surrogate pair + first >= 0xD800 && first <= 0xDBFF && // high surrogate + size > index + 1 // there is a next code unit + ) { + second = string.charCodeAt(index + 1); + if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate + // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000; + } + } + return first; + }; + if (Object.defineProperty) { + Object.defineProperty(String.prototype, 'codePointAt', { + 'value': codePointAt, + 'configurable': true, + 'writable': true + }); + } else { + String.prototype.codePointAt = codePointAt; + } + }()); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.codePointAt")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/concat/index.html b/files/es/web/javascript/reference/global_objects/string/concat/index.html new file mode 100644 index 0000000000..d00ffce70e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/concat/index.html @@ -0,0 +1,90 @@ +--- +title: String.prototype.concat() +slug: Web/JavaScript/Referencia/Objetos_globales/String/concat +tags: + - JavaScript + - Prototipo + - Referencia + - String + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/concat +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">El método <strong><code>concat()</code></strong> combina dos o más cadenas de texto y devuelve una cadena de texto nueva.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/string-concat.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>str</var>.concat(<var>str2</var> [, ...<var>strN</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>str2</var> [, ...<var>strN</var>]</code></dt> + <dd>Cadenas que se concatenarán con <code><var>str</var></code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una nueva cadena que contiene el texto combinado de las cadenas proporcionadas.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>La función <code>concat()</code> concatena los argumentos de tipo texto con la cadena de sobre la que se llama a la función y devuelve una nueva cadena de texto. Los cambios en la cadena original o la cadena devuelta no afectan al otro.</p> + +<p>Si los argumentos no son de tipo texto, son convertidos a texto antes de concatenarlos</p> + +<h2 id="Rendimiento">Rendimiento</h2> + +<p>Es altamente recomendado que se utilicen {{jsxref("Operators/Assignment_Operators", "operadores de asignación", "", 1)}} (<code>+</code>, <code>+=</code>) en lugar del método <code>concat()</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_concat">Usando concat()</h3> + +<p>El siguiente ejemplo combina cadenas de texto en una nueva.</p> + +<pre class="brush: js notranslate">let hello = 'Hello, ' +console.log(hello.concat('Kevin', '. Have a nice day.')) +// Hello, Kevin. Have a nice day. + +let greetList = ['Hello', ' ', 'Venkat', '!'] +"".concat(...greetList) // "Hello Venkat!" + +"".concat({}) // [object Object] +"".concat([]) // "" +"".concat(null) // "null" +"".concat(true) // "true" +"".concat(4, 5) // "45" + +</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-string.prototype.concat', 'String.prototype.concat')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.String.concat")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Operators/Assignment_Operators", "Operadores de asignación", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/endswith/index.html b/files/es/web/javascript/reference/global_objects/string/endswith/index.html new file mode 100644 index 0000000000..cbeac4f481 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/endswith/index.html @@ -0,0 +1,88 @@ +--- +title: String.prototype.endsWith() +slug: Web/JavaScript/Referencia/Objetos_globales/String/endsWith +tags: + - JavaScript + - Prototipo + - Referencia + - String + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/endsWith +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>endsWith()</code></strong> determina si una cadena de texto termina con los caracteres de una cadena indicada, devolviendo <code>true</code> o <code>false</code> según corresponda.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-endswith.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>str</var>.endsWith(<var>searchString</var>[, <var>position</var>])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>searchString</var></code></dt> + <dd>Los caracteres a buscar hasta el final de la cadena <em><code>str</code></em>.</dd> + <dt><code><var>length</var></code> {{optional_inline}}</dt> + <dd>Si se indica, se utiliza como el tamaño de <em><code>str</code></em>. Por defecto se usa <code><em>str</em>.length</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><strong><code>true</code></strong> si los caracteres proporcionados se encuentran al final de la cadena de texto; en caso contrario, <strong><code>false</code></strong>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Este método determina si una cadena de texto termina en otra cadena o no. Este método distingue entre mayúsculas y minúsculas.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método ha sido añadido a la especificación ECMAScript 6 y puede no estar disponible en todas las implementaciones de JavaScript. Sin embargo, puedes implementar el polyfill <code>String.prototype.endsWith()</code> con el siguiente fragmento de código:</p> + +<pre class="brush: js notranslate">if (!String.prototype.endsWith) { + String.prototype.endsWith = function(search, this_len) { + if (this_len === undefined || this_len > this.length) { + this_len = this.length; + } + return this.substring(this_len - search.length, this_len) === search; + }; +} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_endsWith">Usando <code>endsWith()</code></h3> + +<pre class="brush: js notranslate">let str = 'To be, or not to be, that is the question.' + +console.log(str.endsWith('question.')) // true +console.log(str.endsWith('to be')) // false +console.log(str.endsWith('to be', 19)) // true +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("javascript.builtins.String.endsWith")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/fixed/index.html b/files/es/web/javascript/reference/global_objects/string/fixed/index.html new file mode 100644 index 0000000000..3d188bc39d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/fixed/index.html @@ -0,0 +1,35 @@ +--- +title: String.prototype.fixed() +slug: Web/JavaScript/Referencia/Objetos_globales/String/fixed +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<p>{{deprecated_header}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena se muestre con una fuente de ancho fijo, como si estuviesde dentro de una <span class="external">etiqueta {{HTMLElement("tt")}}</span>.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.fixed()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>fixed</code> para formatear y mostrar unacadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_fixed_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_fixed_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando <code>fixed</code> para cambiar el formateado de una cadena</h3> +<p>El siguiente ejemplo usa el método <code>fixed</code> para cambiar el formateado de una cadena:</p> +<pre class="brush: js">var cadenaMundo="¡Hola Mundo!" +console.log(cadenaMundo.fixed()) +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html"><tt>¡Hola Mundo!</tt> +</pre> +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> +<ul> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.html new file mode 100644 index 0000000000..135e805cb2 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -0,0 +1,122 @@ +--- +title: String.prototype.fontcolor() +slug: Web/JavaScript/Referencia/Objetos_globales/String/fontcolor +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><code>El método </code><strong><code>fontcolor()</code></strong> crea {{HTMLElement("font")}} elemento HTML que cambia el color de la cadena.</p> + +<div class="note"> +<p><strong>Usage note:</strong> La etiqueta <font> fue eliminada en <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> y no debe ser usada. En lugar de es, es necesario aplicar propiedades <a href="/en-US/docs/Web/CSS">CSS</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontcolor(<var>color</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>color</code></dt> + <dd>A string expressing the color as a hexadecimal RGB triplet or as a string literal. String literals for color names are listed in the <a href="/en-US/docs/Web/CSS/color_value">CSS color reference</a>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Si expresas el color como hexadecimal, usa el formato rrggbb. Por ejemplo, el color hexadecimal para salmón es R=FA, G=80, B=72, así que el valor será <code>"FA8072"</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usos_fontcolor()"><code>Usos fontcolor()</code></h3> + +<p>Los siguientes ejemplos usan el método <code>fontcolor()</code> para cambiar el color de una cadena.</p> + +<pre class="brush: js">var worldString = 'Hello, world'; + +console.log(worldString.fontcolor('red') + ' en rojo'); +// '<font color="red">Hello, world</font> en rojo' + +console.log(worldString.fontcolor('FF00') + ' es rojo en hexadecimal'); +// '<font color="FF00">Hello, world</font> es rojo en hexadecimal' +</pre> + +<p>Con el objeto {{domxref("HTMLElement.style", "element.style")}} obtienes el atributo <code>style</code> y manipularlo:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.color = 'red'; +</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('ES6', '#sec-string.prototype.fontcolor', 'String.prototype.fontcolor')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</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>{{jsxref("String.prototype.fontsize()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/fontsize/index.html b/files/es/web/javascript/reference/global_objects/string/fontsize/index.html new file mode 100644 index 0000000000..212c49d638 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/fontsize/index.html @@ -0,0 +1,123 @@ +--- +title: String.prototype.fontsize() +slug: Web/JavaScript/Referencia/Objetos_globales/String/fontsize +translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><code>El método </code><strong><code>fontsize()</code></strong> crea {{HTMLElement("font")}} elemento HTML que muestra una cadena con el tamaño especificado.</p> + +<div class="note"> +<p><strong>Usage note:</strong> El elemento <font> ha sido eliminado <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> y no se debe usar. Los desarrolladores web deben usar propiedades <a href="/en-US/docs/Web/CSS">CSS</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.fontsize(<var>size</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>size</code></dt> + <dd>Un entero entre 1 y 7.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Cuando especificas el tamaño como entero, estableces el tamaño de la fuente. Cuando especificas el tamaño como cadena tal como "-2", se ajusta el tamaño de la fuente al de la etiqueta {{HTMLElement("basefont")}}.</p> + +<p>When you specify size as an integer, you set the font size of <code>str</code> to one of the 7 defined sizes. When you specify <code>size</code> as a string such as "-2", you adjust the font size of <code>str</code> relative to the size set in the {{HTMLElement("basefont")}} tag.</p> + +<h2 id="Ejemlpos">Ejemlpos</h2> + +<h3 id="Usos_fontsize()"><code>Usos fontsize()</code></h3> + +<p>The following example uses string methods to change the size of a string:</p> + +<pre class="brush: js">var worldString = 'Hello, world'; + +console.log(worldString.small()); // <small>Hello, world</small> +console.log(worldString.big()); // <big>Hello, world</big> +console.log(worldString.fontsize(7)); // <font size="7">Hello, world</fontsize> +</pre> + +<p>With the {{domxref("HTMLElement.style", "element.style")}} object you can get the element's <code>style</code> attribute and manipulate it more generically, for example:</p> + +<pre class="brush: js">document.getElementById('yourElemId').style.fontSize = '0.7em'; +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.fontsize', 'String.prototype.fontsize')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0. Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.prototype.big()")}}</li> + <li>{{jsxref("String.prototype.small()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html b/files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html new file mode 100644 index 0000000000..7e87f3d90d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html @@ -0,0 +1,130 @@ +--- +title: String.fromCharCode() +slug: Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode +tags: + - JavaScript + - Method + - String + - Unicode +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCharCode +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <strong><code>String.fromCharCode()</code></strong> método estático que devuelve una cadena creada mediante el uso de una secuencia de valores Unicode especificada.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">String.fromCharCode(<em>num1</em>,<em> ...</em>,<em> numN</em>) </pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em> </code></dt> + <dd>Secuencia de números con los valores Unicode.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Este método devuelve una cadena y no un objeto <code>String</code>.</p> + +<p>Debido a que <code>fromCharCode</code> es un método estático de <code>String</code>, usted siempre lo usará como <code>String.fromCharCode()</code>, en vez de un método de un objeto <code>String</code> creado por usted.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_fromCharCode" name="Ejemplo:_Usando_fromCharCode">Ejemplo: Usando <code>fromCharCode</code></h3> + +<p>El siguiene ejemplo devuelve la cadena "ABC".</p> + +<pre class="brush: js">String.fromCharCode(65,66,67) +</pre> + +<h2 id="Especificaciónes">Especificaciónes</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>Primera definicíon<br> + Implementada en JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.2', 'StringfromCharCode')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcharcodes', 'String.fromCharCode')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </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>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<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="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.fromCodePoint()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html b/files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html new file mode 100644 index 0000000000..39fe662b75 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html @@ -0,0 +1,204 @@ +--- +title: String.fromCodePoint() +slug: Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint +translation_of: Web/JavaScript/Reference/Global_Objects/String/fromCodePoint +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método estatico <strong><code>String.fromCodePoint()</code></strong> devuelve una cadena creada por una secuencia de puntos de codigo.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code>String.fromCodePoint(<var>num1</var>[, ...[, <var>numN</var>]])</code></pre> + +<h3 id="Parameters" name="Parameters">Parametros</h3> + +<dl> + <dt><code>num1, ..., num<em>N</em></code></dt> + <dd>Una secuencia de puntos de código.</dd> +</dl> + +<h3 id="Throws">Throws</h3> + +<dl> + <dt>{{jsxref("Global_Objects/RangeError", "RangeError")}}</dt> + <dd>A {{jsxref("Global_Objects/RangeError", "RangeError")}} is thrown if an invalid Unicode code point is given (e.g. "RangeError: NaN is not a valid code point").</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Because <code>fromCodePoint()</code> is a static method of {{jsxref("Global_Objects/String", "String")}}, you always use it as <code>String.fromCodePoint()</code>, rather than as a method of a {{jsxref("Global_Objects/String", "String")}} object you created.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_fromCharCode" name="Example:_Using_fromCharCode">Ejemplos: Usando <code>fromCodePoint()</code></h3> + +<pre class="brush: js">String.fromCodePoint(42); // "*" +String.fromCodePoint(65, 90); // "AZ" +String.fromCodePoint(0x404); // "\u0404" +String.fromCodePoint(0x2F804); // "\uD87E\uDC04" +String.fromCodePoint(194564); // "\uD87E\uDC04" +String.fromCodePoint(0x1D306, 0x61, 0x1D307) // "\uD834\uDF06a\uD834\uDF07" + +String.fromCodePoint('_'); // RangeError +String.fromCodePoint(Infinity); // RangeError +String.fromCodePoint(-1); // RangeError +String.fromCodePoint(3.14); // RangeError +String.fromCodePoint(3e-2); // RangeError +String.fromCodePoint(NaN); // RangeError +</pre> + +<pre class="brush: js">// String.fromCharCode() alone cannot get the character at such a high code point +// The following, on the other hand, can return a 4-byte character as well as the +// usual 2-byte ones (i.e., it can return a single character which actually has +// a string length of 2 instead of 1!) +console.log(String.fromCodePoint(0x2F804)); // or 194564 in decimal +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>The <code>String.fromCodePoint</code> method has been added to the ECMAScript standard in version 6 and may not be supported in all web browsers or environments yet. Use the code below for a polyfill:</p> + +<pre class="brush: js">/*! http://mths.be/fromcodepoint v0.1.0 by @mathias */ +if (!String.fromCodePoint) { + (function() { + var defineProperty = (function() { + // IE 8 only supports `Object.defineProperty` on DOM elements + try { + var object = {}; + var $defineProperty = Object.defineProperty; + var result = $defineProperty(object, object, object) && $defineProperty; + } catch(error) {} + return result; + }()); + var stringFromCharCode = String.fromCharCode; + var floor = Math.floor; + var fromCodePoint = function() { + var MAX_SIZE = 0x4000; + var codeUnits = []; + var highSurrogate; + var lowSurrogate; + var index = -1; + var length = arguments.length; + if (!length) { + return ''; + } + var result = ''; + while (++index < length) { + var codePoint = Number(arguments[index]); + if ( + !isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity` + codePoint < 0 || // not a valid Unicode code point + codePoint > 0x10FFFF || // not a valid Unicode code point + floor(codePoint) != codePoint // not an integer + ) { + throw RangeError('Invalid code point: ' + codePoint); + } + if (codePoint <= 0xFFFF) { // BMP code point + codeUnits.push(codePoint); + } else { // Astral code point; split in surrogate halves + // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + codePoint -= 0x10000; + highSurrogate = (codePoint >> 10) + 0xD800; + lowSurrogate = (codePoint % 0x400) + 0xDC00; + codeUnits.push(highSurrogate, lowSurrogate); + } + if (index + 1 == length || codeUnits.length > MAX_SIZE) { + result += stringFromCharCode.apply(null, codeUnits); + codeUnits.length = 0; + } + } + return result; + }; + if (defineProperty) { + defineProperty(String, 'fromCodePoint', { + 'value': fromCodePoint, + 'configurable': true, + 'writable': true + }); + } else { + String.fromCodePoint = fromCodePoint; + } + }()); +} +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.fromcodepoint', 'String.fromCodePoint')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<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>41</td> + <td>{{CompatGeckoDesktop("29")}}</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>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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("29")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.codePointAt()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/includes/index.html b/files/es/web/javascript/reference/global_objects/string/includes/index.html new file mode 100644 index 0000000000..094a3fd648 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/includes/index.html @@ -0,0 +1,108 @@ +--- +title: String.prototype.includes() +slug: Web/JavaScript/Referencia/Objetos_globales/String/includes +tags: + - Cadena de texto + - JavaScript + - Prototipo + - Referencia + - String + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/includes +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>includes()</code></strong> determina si una cadena de texto puede ser encontrada dentro de otra cadena de texto, devolviendo <code><strong>true</strong></code> o <strong><code>false</code></strong> según corresponda.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-includes.html", "shorter")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>str</var>.includes(<var>searchString</var>[, <var>position</var>])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code><var>searchString</var></code></dt> + <dd>Una cadena a buscar en el texto <em><code>str</code></em>.</dd> + <dt><code><var>position</var></code> {{optional_inline}}</dt> + <dd>La posición dentro de la cadena en la cual empieza la búsqueda de <code>searchString</code> (Por defecto este valor es 0).</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><strong><code>true</code></strong> si la cadena de texto contiene la cadena buscada; en caso contrario, <strong><code>false</code></strong>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Este método permite determinar si una cadena de texto se encuentra incluida dentro de la otra.</p> + +<h3 id="Sensibilidad_a_MayúsculasMinúsculas">Sensibilidad a Mayúsculas/Minúsculas</h3> + +<p>El método <code>includes()</code> es "case sensitive" (tiene en cuenta mayúsculas y minúsculas). Por ejemplo, la siguiente expresión devolverá <code>false</code>:</p> + +<pre class="brush: js notranslate">'Ballena azul'.includes('ballena'); // devuelve false +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método ha sido agregado a la especificación ECMAScript 2015 y puede no estar disponible en toda las implementaciones de JavaScript.</p> + +<p>Sin embargo, puedes usar este método como polyfill:</p> + +<pre class="brush: js notranslate">if (!String.prototype.includes) { + String.prototype.includes = function(search, start) { + 'use strict'; + + if (search instanceof RegExp) { + throw TypeError('first argument must not be a RegExp'); + } + if (start === undefined) { start = 0; } + return this.indexOf(search, start) !== -1; + }; +} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_includes">Usando <code>includes()</code></h3> + +<pre class="brush: js notranslate">const str = 'To be, or not to be, that is the question.' + +console.log(str.includes('To be')) // true +console.log(str.includes('question')) // true +console.log(str.includes('nonexistent')) // false +console.log(str.includes('To be', 1)) // false +console.log(str.includes('TO BE')) // false +console.log(str.includes('')) // 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-string.prototype.includes', 'String.prototype.includes')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("javascript.builtins.String.includes")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Array.prototype.includes()")}}</li> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.startsWith()")}}</li> + <li>{{jsxref("String.prototype.endsWith()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/index.html b/files/es/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..a6c5aea8e3 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,385 @@ +--- +title: String — Cadena de caracteres +slug: Web/JavaScript/Referencia/Objetos_globales/String +tags: + - Clase + - Class + - ECMAScript 2015 + - JavaScript + - Referencia + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>String</code></strong> se utiliza para representar y manipular una secuencia de caracteres.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Las cadenas son útiles para almacenar datos que se pueden representar en forma de texto. Algunas de las operaciones más utilizadas en cadenas son verificar su {{jsxref("String.length", "length")}}, para construirlas y concatenarlas usando <a href="/es/docs/Web/JavaScript/Reference/Operators/String_Operators">operadores de cadena + y +=</a>, verificando la existencia o ubicación de subcadenas con {{jsxref("String.prototype.indexOf()", "indexOf()")}} o extraer subcadenas con el método {{jsxref("String.prototype.substring()", "substring()")}}.</p> + +<h3 id="Crear_cadenas">Crear cadenas</h3> + +<p>Las cadenas se pueden crear como primitivas, a partir de cadena literales o como objetos, usando el constructor {{jsxref("String/String", "String()")}}:</p> + +<pre class="syntaxbox notranslate">const string1 = "Una cadena primitiva"; +const string2 = 'También una cadena primitiva'; +const string3 = `Otra cadena primitiva más`;</pre> + +<pre class="syntaxbox notranslate">const string4 = new String("Un objeto String"); +</pre> + +<p>Las <code>string</code>s primitivas y los objetos <code>string</code> se pueden usar indistintamente en la mayoría de las situaciones. Consulta "<a href="#Primitivas_string_y_objetos_string">Primitivas <code>String</code> y objetos <code>String</code></a>" a continuación.</p> + +<p>Los cadena literales se pueden especificar usando comillas simples o dobles, que se tratan de manera idéntica, o usando el carácter de comilla invertida <kbd>`</kbd>. Esta última forma especifica una <a href="/es/docs/Web/JavaScript/Reference/Template_literals">Plantilla literal</a>: con esta forma puedes interpolar expresiones.</p> + +<h3 id="Acceder_a_un_caracter">Acceder a un caracter</h3> + +<p>Hay dos formas de acceder a un caracter individual en una cadena. La primera es con el método {{jsxref("String.prototype.charAt()", "charAt()")}}:</p> + +<pre class="brush: js notranslate">return 'cat'.charAt(1) // devuelve "a" +</pre> + +<p>La otra forma (introducida en ECMAScript 5) es tratar a la cadena como un objeto similar a un arreglo, donde los caracteres individuales corresponden a un índice numérico:</p> + +<pre class="brush: js notranslate">return 'cat'[1] // devuelve "a" +</pre> + +<p>Cuando se usa la notación entre corchetes para acceder a los caracteres, no se puede intentar eliminar o asignar un valor a estas propiedades. Las propiedades involucradas no se pueden escribir ni configurar. (Ve {{jsxref("Object.defineProperty()")}} para más información).</p> + +<h3 id="Comparar_cadenas">Comparar cadenas</h3> + +<p>En C, se usa la función <code>strcmp()</code> para comparar cadenas. En JavaScript, solo usas los <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">operadores menor que y mayor que</a>:</p> + +<pre class="brush: js notranslate">let a = 'a' +let b = 'b' +if (a < b) { // true + console.log(a + ' es menor que ' + b) +} else if (a > b) { + console.log(a + ' es mayor que ' + b) +} else { + console.log(a + ' y ' + b + ' son iguales.') +} +</pre> + +<p>Puedes lograr un resultado similar usando el método {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} heredado por las instancias de <code>String</code>.</p> + +<p>Ten en cuenta que <code>a == b</code> compara las cadenas en <code><var>a</var></code> y <code><var>b</var></code> por ser igual en la forma habitual que distingue entre mayúsculas y minúsculas. Si deseas comparar sin tener en cuenta los caracteres en mayúsculas o minúsculas, usa una función similar a esta:</p> + +<pre class="notranslate">function isEqual(str1, str2) +{ + return str1.toUpperCase() === str2.toUpperCase() +} // isEqual +</pre> + +<p>En esta función se utilizan mayúsculas en lugar de minúsculas, debido a problemas con ciertas conversiones de caracteres UTF-8.</p> + +<h3 id="Primitivas_String_y_objetos_String">Primitivas <code>String</code> y objetos <code>String</code></h3> + +<p>Ten en cuenta que JavaScript distingue entre objetos <code>String</code> y valores de {{Glossary("Primitive", "primitivas string")}}. (Lo mismo ocurre con {{jsxref("Boolean", "Booleanos")}} y {{jsxref("Global_Objects/Number", "Números")}}).</p> + +<p>Las cadenas literales (denotadas por comillas simples o dobles) y cadenas devueltas de llamadas a <code>String</code> en un contexto que no es de constructor (es decir, llamado sin usar la palabra clave {{jsxref("Operators/new", "new")}}) son cadenas primitivas. JavaScript automáticamente convierte las primitivas en objetos <code>String</code>, por lo que es posible utilizar métodos del objeto <code>String</code> en cadenas primitivas. En contextos donde se va a invocar a un método en una cadena primitiva o se produce una búsqueda de propiedad, JavaScript ajustará automáticamente la cadena primitiva y llamará al método o realizará la búsqueda de la propiedad.</p> + +<pre class="brush: js notranslate">let s_prim = 'foo' +let s_obj = new String(s_prim) + +console.log(typeof s_prim) // Registra "string" +console.log(typeof s_obj) // Registra "object" +</pre> + +<p>Las primitivas de <code>String</code> y los objetos <code>String</code> también dan diferente resultado cuando se usa {{jsxref("Global_Objects/eval", "eval()")}}. Las primitivas pasadas a <code>eval</code> se tratan como código fuente; Los objetos <code>String</code> se tratan como todos los demás objetos, devuelven el objeto. Por ejemplo:</p> + +<pre class="brush: js notranslate">let s1 = '2 + 2' // crea una string primitiva +let s2 = new String('2 + 2') // crea un objeto String +console.log(eval(s1)) // devuelve el número 4 +console.log(eval(s2)) // devuelve la cadena "2 + 2" +</pre> + +<p>Por estas razones, el código se puede romper cuando encuentra objetos <code>String</code> y espera una <code>string</code> primitiva en su lugar, aunque generalmente los autores no necesitan preocuparse por la distinción.</p> + +<p>Un objeto <code>String</code> siempre se puede convertir a su contraparte primitiva con el método {{jsxref("String.prototype.valueOf()", "valueOf()")}}.</p> + +<pre class="brush: js notranslate">console.log(eval(s2.valueOf())) // devuelve el número 4 +</pre> + +<h3 id="Notación_de_escape">Notación de escape</h3> + +<p>Los caracteres especiales se pueden codificar mediante notación de escape:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Código</th> + <th scope="col">Salida</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\<var>XXX</var></code><br> + (donde <code><var>XXX</var></code> es de 1 a 3 dígitos octales; rango de <code>0</code>-<code>377</code>)</td> + <td>Punto de código Unicode/carácter ISO-8859-1 entre <code>U+0000</code> y <code>U+00FF</code></td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Comilla sencilla</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Comilla doble</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Barra inversa</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Nueva línea</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Retorno de carro</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Tabulación vertical</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tabulación</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>Retroceso</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Avance de página</td> + </tr> + <tr> + <td><code>\u<var>XXXX</var></code> (donde <code><var>XXXX</var></code> son 4 dígitos hexadecimales; rango de <code>0x0000</code>-<code>0xFFFF</code>)</td> + <td>Unidad de código UTF-16/punto de código Unicode entre <code>U+0000</code> y <code>U+FFFF</code></td> + </tr> + <tr> + <td><code>\u{<var>X</var>}</code> ... <code>\u{<var>XXXXXX</var>}</code><br> + (donde <code><var>X</var>…<var>XXXXXX</var></code> es de 1 a 6 dígitos hexadecimales; rango de <code>0x0</code>-<code>0x10FFFF</code>)</td> + <td>Unidad de código UTF-32/punto de código Unicode entre <code>U+0000</code> y <code>U+10FFFF</code></td> + </tr> + <tr> + <td><code>\x<var>XX</var></code><br> + (donde <code><var>XX</var></code> son 2 dígitos hexadecimales; rango de <code>0x00</code>-<code>0xFF</code>)</td> + <td>Punto de código Unicode/carácter ISO-8859-1 entre <code>U+0000</code> y <code>U+00FF</code></td> + </tr> + </tbody> +</table> + +<h3 id="Cadenas_literales_largas">Cadenas literales largas</h3> + +<p>A veces, tu código incluirá cadenas que son muy largas. En lugar de tener líneas que se prolongan interminablemente o que se ajustan según el capricho de tu editor, es posible que desees dividir específicamente la cadena en varias líneas en el código fuente sin afectar el contenido real de la cadena. hay dos maneras de conseguirlo.</p> + +<h4 id="Método_1">Método 1</h4> + +<p>Puedes usar el operador <a href="/es/docs/Web/JavaScript/Reference/Operators/Addition">+</a> para agregar varias cadenas juntas, así:</p> + +<pre class="brush: js notranslate">let longString = "Esta es una cadena muy larga que necesita " + + "que dividimos en varias líneas porque " + + "de lo contrario, mi código es ilegible." +</pre> + +<h4 id="Método_2">Método 2</h4> + +<p>Puedes usar el caracter de barra invertida (<code>\</code>) al final de cada línea para indicar que la cadena continúa en la siguiente línea. Asegúrate de que no haya ningún espacio ni ningún otro carácter después de la barra invertida (a excepción de un salto de línea) o como sangría; de lo contrario, no trabajará.</p> + +<p>Esa forma se ve así:</p> + +<pre class="brush: js notranslate">let longString = "Esta es una cadena muy larga que necesita \ +que dividimos en varias líneas porque \ +de lo contrario, mi código es ilegible." +</pre> + +<p>Ambos métodos anteriores dan como resultado cadenas idénticas.</p> + +<h2 id="Constructor">Constructor</h2> + +<dl> + <dt>{{jsxref("String/String", "String()")}}</dt> + <dd>Crea un nuevo objeto <code>String</code>. Realiza la conversión de tipos cuando se llama como función, en lugar de como constructor, lo cual suele ser más útil.</dd> +</dl> + +<h2 id="Métodos_estáticos">Métodos estáticos</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()", "String.fromCharCode(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt> + <dd>Devuelve una cadena creada utilizando la secuencia de valores Unicode especificada.</dd> + <dt>{{jsxref("String.fromCodePoint()", "String.fromCodePoint(<var>num1</var> [, ...[, <var>numN</var>]])")}}</dt> + <dd>Devuelve una cadena creada utilizando la secuencia de puntos de código especificada.</dd> + <dt>{{jsxref("String.raw()")}}</dt> + <dd>Devuelve una cadena creada a partir de una plantilla literal sin formato.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Refleja la <code>length</code> de la cadena. Solo lectura.</dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("String.prototype.charAt()", "String.prototype.charAt(<var>index</var>)")}}</dt> + <dd>Devuelve el caracter (exactamente una unidad de código UTF-16) en el <code><var>index</var></code> especificado.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()", "String.prototype.charCodeAt(<var>index</var>)")}}</dt> + <dd>Devuelve un número que es el valor de la unidad de código UTF-16 en el <code><var>index</var></code> dado.</dd> + <dt>{{jsxref("String.prototype.codePointAt()", "String.prototype.codePointAt(<var>pos</var>)")}}</dt> + <dd>Devuelve un número entero no negativo que es el valor del punto de código del punto de código codificado en UTF-16 que comienza en la <code><var>pos</var></code> especificada.</dd> + <dt>{{jsxref("String.prototype.concat()", "String.prototype.concat(<var>str</var>[, ...<var>strN</var>])")}}</dt> + <dd>Combina el texto de dos (o más) cadenas y devuelve una nueva cadena.</dd> + <dt>{{jsxref("String.prototype.includes()", "String.prototype.includes(<var>searchString</var> [, <var>position</var>])")}}</dt> + <dd>Determina si la cadena de la llamada contiene <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.endsWith()", "String.prototype.endsWith(<var>searchString</var>[, <var>length</var>])")}}</dt> + <dd>Determina si una cadena termina con los caracteres de la cadena <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.indexOf()", "String.prototype.indexOf(<var>searchValue</var>[, <var>fromIndex</var>])")}}</dt> + <dd>Devuelve el índice dentro del objeto {{jsxref("String")}} llamador de la primera aparición de <code><var>searchValue</var></code>, o <code>-1</code> si no lo encontró.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()", "String.prototype.lastIndexOf(<var>searchValue</var>[, <var>fromIndex</var>])")}}</dt> + <dd>Devuelve el índice dentro del objeto {{jsxref("String")}} llamador de la última aparición de <code><var>searchValue</var></code>, o <code>-1</code> si no lo encontró.</dd> + <dt>{{jsxref("String.prototype.localeCompare()", "String.prototype.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])")}}</dt> + <dd>Devuelve un número que indica si la cadena de referencia <code><var>compareString</var></code> viene antes, después o es equivalente a la cadena dada en el orden de clasificación.</dd> + <dt>{{jsxref("String.prototype.match()", "String.prototype.match(<var>regexp</var>)")}}</dt> + <dd>Se utiliza para hacer coincidir la expresión regular <code><var>regexp</var></code> con una cadena.</dd> + <dt>{{jsxref("String.prototype.matchAll()", "String.prototype.matchAll(<var>regexp</var>)")}}</dt> + <dd>Devuelve un iterador de todas las coincidencias de <code><var>regexp</var></code>.</dd> + <dt>{{jsxref("String.prototype.normalize()", "String.prototype.normalize([<var>form</var>])")}}</dt> + <dd>Devuelve la forma de normalización Unicode del valor de la cadena llamada.</dd> + <dt>{{jsxref("String.prototype.padEnd()", "String.prototype.padEnd(<var>targetLength</var>[, <var>padString</var>])")}}</dt> + <dd>Rellena la cadena actual desde el final con una cadena dada y devuelve una nueva cadena de longitud <code><var>targetLength</var></code>.</dd> + <dt>{{jsxref("String.prototype.padStart()", "String.prototype.padStart(<var>targetLength</var>[, <var>padString</var>])")}}</dt> + <dd>Rellena la cadena actual desde el principio con una determinada cadena y devuelve una nueva cadena de longitud <code><var>targetLength</var></code>.</dd> + <dt>{{jsxref("String.prototype.repeat()", "String.prototype.repeat(<var>count</var>)")}}</dt> + <dd>Devuelve una cadena que consta de los elementos del objeto repetidos <code><var>count</var></code> veces.</dd> + <dt>{{jsxref("String.prototype.replace()" , "String.prototype.replace(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt> + <dd>Se usa para reemplazar ocurrencias de <code><var>searchFor</var></code> usando <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> puede ser una cadena o expresión regular, y <code><var>replaceWith</var></code> puede ser una cadena o función.</dd> + <dt>{{jsxref("String.prototype.replaceAll()", "String.prototype.replaceAll(<var>searchFor</var>, <var>replaceWith</var>)")}}</dt> + <dd>Se utiliza para reemplazar todas las apariciones de <code><var>searchFor</var></code> usando <code><var>replaceWith</var></code>. <code><var>searchFor</var></code> puede ser una cadena o expresión regular, y <code><var>replaceWith</var></code> puede ser una cadena o función.</dd> + <dt>{{jsxref("String.prototype.search()", "String.prototype.search(<var>regexp</var>)")}}</dt> + <dd>Busca una coincidencia entre una expresión regular <code><var>regexp</var></code> y la cadena llamadora.</dd> + <dt>{{jsxref("String.prototype.slice()", "String.prototype.slice(<var>beginIndex</var>[, <var>endIndex</var>])")}}</dt> + <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd> + <dt>{{jsxref("String.prototype.split()", "String.prototype.split([<var>sep</var>[, <var>limit</var>] ])")}}</dt> + <dd>Devuelve un arreglo de cadenas pobladas al dividir la cadena llamadora en las ocurrencias de la subcadena <code><var>sep</var></code>.</dd> + <dt>{{jsxref("String.prototype.startsWith()", "String.prototype.startsWith(<var>searchString</var>[, <var>length</var>])")}}</dt> + <dd>Determina si la cadena llamadora comienza con los caracteres de la cadena <code><var>searchString</var></code>.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Devuelve los caracteres en una cadena que comienza en la ubicación especificada hasta el número especificado de caracteres.</dd> + <dt>{{jsxref("String.prototype.substring()", "String.prototype.substring(<var>indexStart</var>[, <var>indexEnd</var>])")}}</dt> + <dd>Devuelve una nueva cadena que contiene caracteres de la cadena llamadora de (o entre) el índice (o indeces) especificados.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()", "String.prototype.toLocaleLowerCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt> + <dd> + <p>Los caracteres dentro de una cadena se convierten a minúsculas respetando la configuración regional actual.</p> + + <p>Para la mayoría de los idiomas, devolverá lo mismo que {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</p> + </dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()", "String.prototype.toLocaleUpperCase( [<var>locale</var>, ...<var>locales</var>])")}}</dt> + <dd> + <p>Los caracteres dentro de una cadena se convierten a mayúsculas respetando la configuración regional actual.</p> + + <p>Para la mayoría de los idiomas, devolverá lo mismo que {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}.</p> + </dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Devuelve el valor de la cadena llamadora convertido a minúsculas.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el objeto especificado. Redefine el método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Devuelve el valor de la cadena llamadora convertido a mayúsculas.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Recorta los espacios en blanco desde el principio y el final de la cadena. Parte del estándar ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimStart()")}}</dt> + <dd>Recorta los espacios en blanco desde el principio de la cadena.</dd> + <dt>{{jsxref("String.prototype.trimEnd()")}}</dt> + <dd>Recorta los espacios en blanco del final de la cadena.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Devuelve el valor primitivo del objeto especificado. Redefine el método {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Iterator</code> que itera sobre los puntos de código de un valor de cadena, devolviendo cada punto de código como un valor de cadena.</dd> +</dl> + +<h2 id="Métodos_de_contenedor_HTML">Métodos de contenedor HTML</h2> + +<div> +<div class="blockIndicator note"> +<p><strong>Desaprobado. Evita estos métodos.</strong></p> + +<p>Son de uso limitado, ya que proporcionan solo un subconjunto de las etiquetas y atributos HTML disponibles.</p> +</div> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (hipertexto destino)</dd> + <dt>{{jsxref("String.prototype.big()")}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (enlace a URL)</dd> + <dt>{{jsxref("String.prototype.small()")}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Conversión_de_cadenas">Conversión de cadenas</h3> + +<p>Es posible usar <code>String</code> como una alternativa más confiable de {{jsxref("String.prototype.toString()", "toString()")}}, ya que funciona cuando se usa en {{jsxref( "null")}}, {{jsxref("undefined")}} y en {{jsxref("Symbol", "símbolos")}}. Por ejemplo:</p> + +<pre class="brush: js notranslate">let outputStrings = [] +for (let i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</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-string-objects', 'String')}}</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.builtins.String")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Guide/Text_formatting">Formato de texto en la Guía de JavaScript</a></li> + <li>{{jsxref("RegExp")}}</li> + <li>{{domxref("DOMString")}}</li> + <li><a href="/es/Add-ons/Code_snippets/StringView"><code>StringView</code> — una representación similar a C de cadenas basada en arreglos tipados</a></li> + <li><a href="/es/docs/Web/API/DOMString/Binary">Cadenas binarias</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/indexof/index.html b/files/es/web/javascript/reference/global_objects/string/indexof/index.html new file mode 100644 index 0000000000..14f7b01eb8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/indexof/index.html @@ -0,0 +1,104 @@ +--- +title: String.prototype.indexOf() +slug: Web/JavaScript/Referencia/Objetos_globales/String/indexOf +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/indexOf +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <code><strong>indexOf()</strong></code>devuelve el índice, dentro del objeto <code>String</code> que realiza la llamada, de la primera ocurrencia del valor especificado, comenzando la búsqueda desde <code>indiceDesde</code>; o -1 si no se encuentra dicho valor.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.indexOf(<em>valorBusqueda</em>[,<em> indiceDesde</em>])</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>valorBusqueda</code></dt> + <dd>Una cadena que representa el valor de búsqueda.</dd> +</dl> + +<dl> + <dt><code>indiceDesde</code></dt> + <dd>La localización dentro de la cadena llamada desde la que empezará la búsqueda. Puede ser un entero entre 0 y la longitud de la cadena. El valor predeterminado es 0.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer carácter es 0, y el índice del último carácter de una cadena llamada <code>nombreCadena</code> es <code>nombreCadena.length - 1</code>.</p> + +<pre class="brush: js">"Blue Whale".indexOf("Blue") // returns 0 +"Blue Whale".indexOf("Blute") // returns -1 +"Blue Whale".indexOf("Whale",0) // returns 5 +"Blue Whale".indexOf("Whale",5) // returns 5 +"Blue Whale".indexOf("",9) // returns 9 +"Blue Whale".indexOf("",10) // returns 10 +"Blue Whale".indexOf("",11) // returns 10 +</pre> + +<p>El método <code>indexOf</code> es sensible a mayúsculas. Por ejemplo, la siguiente expresión devuelve -1:</p> + +<pre class="brush: js">"Ballena Azul".indexOf("azul") +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_indexOf_y_lastIndexOf" name="Ejemplo:_Usando_indexOf_y_lastIndexOf">Ejemplo: Usando <code>indexOf</code> y <code>lastIndexOf</code></h3> + +<p>El siguiente ejemplo utiliza <code>indexOf</code> y <code>lastIndexOf</code> para localizar valores dentro de la cadena "<code>Brave new world</code>".</p> + +<pre class="brush: js">var cualquierCadena="Brave new world" + + +document.write("<P>The index of the first w from the beginning is " + + cualquierCadena.indexOf("w")) // Muestra 8 + +document.write("<P>The index of the first w from the end is " + + cualquierCadena.lastIndexOf("w")) // Muestra 10 + +document.write("<P>The index of 'new' from the beginning is " + + cualquierCadena.indexOf("new")) // Muestra 6 + +document.write("<P>The index of 'new' from the end is " + + cualquierCadena.lastIndexOf("new")) // Muestra 6 +</pre> + +<h3 id="Ejemplo:_indexOf_y_sensibilidad_a_may.C3.BAsculas" name="Ejemplo:_indexOf_y_sensibilidad_a_may.C3.BAsculas">Ejemplo: <code>indexOf</code> y sensibilidad a mayúsculas</h3> + +<p>El siguiente ejemplo define dos variables de tipo cadena. Las variables contienen la misma cadena excepto que la segunda cadena contienen letras en mayúscula. El primer método <code>writeln</code> muestra 19. Pero a que el método <code>indexOf</code> es sensible a mayúsculas, no se encuentra la cadena "<code>cheddar</code>" en <code>miCadenaMayusculas</code>, así que el segundo método <code>writeln</code> muestra -1.</p> + +<pre class="brush: js">miCadena="brie, pepper jack, cheddar" +miCadenaMayusculas="Brie, Pepper Jack, Cheddar" +document.writeln('miCadena.indexOf("cheddar") is ' + + miCadena.indexOf("cheddar")) +document.writeln('<P>miCadenaMayusculas.indexOf("cheddar") is ' + + miCadenaMayusculas.indexOf("cheddar")) +</pre> + +<h3 id="Ejemplo:_Usando_indexOf_para_contar_ocurrencias_de_una_letra_en_una_cadena" name="Ejemplo:_Usando_indexOf_para_contar_ocurrencias_de_una_letra_en_una_cadena">Ejemplo: Usando <code>indexOf</code> para contar ocurrencias de una letra en una cadena</h3> + +<p>El siguiente ejemplo establece <code>cuenta</code> como el número de ocurrencias de la letra <code>x</code> dentro de la cadena <code>miCadena</code>:</p> + +<pre class="brush: js">cuenta = 0; +posicion = miCadena.indexOf("x"); +while ( posicion != -1 ) { + cuenta++; + posicion = miCadena.indexOf("x",posicion+1); +} +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/italics/index.html b/files/es/web/javascript/reference/global_objects/string/italics/index.html new file mode 100644 index 0000000000..71897293bb --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/italics/index.html @@ -0,0 +1,49 @@ +--- +title: String.prototype.italics() +slug: Web/JavaScript/Referencia/Objetos_globales/String/italics +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/italics +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<p>{{deprecated_header}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Provoca que una cadena ponga en cursiva, como si estuviese dentro de una etiqueta {{HTMLElement("i")}}.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.italics()</pre> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Usa el método <code>italics</code> para formatear y mostrar una cadena en un documento.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>italics()</code></h3> + +<p>El siguiente ejemplo usa métodos de <code>string</code> para cambiar el formateado de una cadena:</p> + +<pre class="brush: js">var cadenaMundo="¡Hola mundo!"; + +console.log(cadenaMundo.blink()); +console.log(cadenaMundo.bold()); +console.log(cadenaMundo.italics()); +console.log(cadenaMundo.strike()); +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.strike()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/es/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..ffde251071 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,79 @@ +--- +title: String.prototype.lastIndexOf() +slug: Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf +tags: + - Cadena + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>lastIndexOf() </code></strong><code>devuelve </code>la posicion (indice) en la que se encuentra el <strong>valorBusqueda</strong>, dentro del objeto <code>String</code> que realiza la llamada, de la última ocurrencia del valor especificado; o -1 si no se halla. La búsqueda se realiza empezando por el final de la cadena que realiza la llamada, empezando en <strong><code>indiceDesde</code></strong>.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.lastIndexOf(<em>valorBusqueda</em>[,<em> indiceDesde</em>]<em>)</em></pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>valorBusqueda</code></dt> + <dd>Una cadena que representa el valor que se desea buscar.</dd> +</dl> + +<dl> + <dt><code>indiceDesde</code></dt> + <dd>La localización dentro de la cadena que realiza la llamada desde donde comenzará la búsqueda. Puede ser cualquier entero entre 0 y la longitud de la cadena. El valor predeterminado es la longitud de la cadena.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Los caracteres de una cadena se indexan de izquierda a derecha. El índice del primer carácter es 0, y el índice del último carácter es <code>nombreCadena.length - 1</code>.</p> + +<pre class="brush: js">"canal".lastIndexOf("a") // returns 3 +"canal".lastIndexOf("a",2) // returns 1 +"canal".lastIndexOf("a",0) // returns -1 +"canal".lastIndexOf("x") // returns -1 +</pre> + +<p>El método <code>lastIndexOf</code> es sensible a mayúsculas. Por ejemplo, la siguiente expresión devuelve -1:</p> + +<pre class="brush: js">"Ballena Azul, Ballena Asesina".lastIndexOf("azul") +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_indexOf_y_lastIndexOf" name="Ejemplo:_Usando_indexOf_y_lastIndexOf">Ejemplo: Usando <code>indexOf</code> y <code>lastIndexOf</code></h3> + +<p>The following example uses <code>indexOf</code> and <code>lastIndexOf</code> to locate values in the string "<code>Brave new world</code>".</p> + +<pre class="brush: js">var anyString="Brave new world" + +// Displays 8 +document.write("<P>The index of the first w from the beginning is " + + anyString.indexOf("w")) +// Displays 10 +document.write("<P>The index of the first w from the end is " + + anyString.lastIndexOf("w")) +// Displays 6 +document.write("<P>The index of 'new' from the beginning is " + + anyString.indexOf("new")) +// Displays 6 +document.write("<P>The index of 'new' from the end is " + + anyString.lastIndexOf("new")) +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.split()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> + <li>{{jsxref("Array.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/length/index.html b/files/es/web/javascript/reference/global_objects/string/length/index.html new file mode 100644 index 0000000000..9401b8898a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/length/index.html @@ -0,0 +1,94 @@ +--- +title: String.length +slug: Web/JavaScript/Referencia/Objetos_globales/String/length +tags: + - JavaScript + - Propiedad + - Prototipo + - Referencia + - String + - length +translation_of: Web/JavaScript/Reference/Global_Objects/String/length +--- +<div>{{JSRef}}</div> + +<p>La propiedad<strong> </strong><code><strong>length</strong></code> de un objeto {{jsxref("String")}} representa la longitud de una cadena, en unidades de código UTF-16.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>str</var>.length</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta propiedad devuelve el número de caracteres de una cadena. {{interwiki("wikipedia", "UTF-16")}}, el formato usado por JavaScript, usa 16-bit para representar los caracteres más comunes, pero necesita usar dos caracteres para otros menos usados, así que es posible que el valor devuelto por <code>length</code> no corresponda al número de caracteres de la cadena.</p> + +<p>ECMASCript 2016 (ed. 7) estableció una longitud máxima de <code>2^53 - 1</code> elementos. Anteriormente, ninguna longitud máxima era especificada. </p> + +<p>Para una cadena vacía, <code>length</code> es 0.</p> + +<p>La propiedad static <code>String.length</code> devuelve 1.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_Básico">Uso Básico</h3> + +<pre class="brush: js notranslate">var x = 'Mozilla'; +var empty = ''; + +console.log('Mozilla is ' + x.length + ' code units long'); +/* "Mozilla is 7 code units long" */ + +console.log('The empty string has a length of ' + empty.length); +/* "The empty string has a length of 0" */</pre> + +<h3 id="Asignando_a_length">Asignando a length</h3> + +<pre class="brush: js notranslate">var myString = "bluebells"; + +// Attempting to assign a value to a string's .length property has no observable effect. +myString.length = 4; +console.log(myString); +/* "bluebells" */ +</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>Primera definicíon. Implementado en JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.5.1', 'String.prototype.length')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-string-instances-length', 'String.prototype.length')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.String.length")}}</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a class="external" href="http://developer.teradata.com/blog/jasonstrimpel/2011/11/javascript-string-length-and-internationalizing-web-applications">JavaScript String.length and Internationalizing Web Applications</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/link/index.html b/files/es/web/javascript/reference/global_objects/string/link/index.html new file mode 100644 index 0000000000..021c659f34 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/link/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.link() +slug: Web/JavaScript/Referencia/Objetos_globales/String/link +tags: + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/link +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Crea un enlace de hipertexto HTML, {{HTMLElement("a")}}, que solicita otra URL.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.link(<em>atributoHref</em>)</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>atributoHref</code></dt> + <dd>Cualquier cadena que especifique el atributo {{htmlattrxref("href", "a")}} de la etiqueta {{HTMLElement("a")}}; debería ser una URL válida (relativa o absoluta).</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Usa el método <code>link</code> para crear un atajo HTML para un enlace de hipertexto. La cadena devuelta puede ser añadida al documento vía {{domxref("element.innerHTML")}}.</p> + +<p>Los enlaces creados con el método <code>link</code> serán elementos del array <code>links</code> del objeto <code>document</code>. Vea {{domxref("document.links")}}.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_link" name="Ejemplo:_Usando_link">Ejemplo: Usando <code>link</code></h3> + +<p>El siguiente ejemplo muestra la palabra "Netscape" como un enlace de hipertexto que devuelve al usuario a la página inicial de Netscape:</p> + +<pre>var textoActivo="MDN" +var URL="<code class="language-js"><span class="brush: js">https://developer.mozilla.org/</span></code>" + +console.log("Haga click para volver a " + textoActivo.link(URL)) +</pre> + +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> + +<pre class="brush: html">Haga click para volver a <a href="http://<code class="language-js"><span class="brush: js">developer.mozilla.org/</span></code>">MDN</a> +</pre> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.anchor()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/localecompare/index.html b/files/es/web/javascript/reference/global_objects/string/localecompare/index.html new file mode 100644 index 0000000000..2bda296c61 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/localecompare/index.html @@ -0,0 +1,159 @@ +--- +title: String.prototype.localeCompare() +slug: Web/JavaScript/Referencia/Objetos_globales/String/localeCompare +translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>localeCompare()</code></strong> devuelve un número que indica si la cadena de caracteres actual es anterior, posterior o igual a la cadena pasada como parámetro, en orden lexicográfico.</p> + +<p>Los nuevos argumentos <code>locales</code> y <code>options</code> permiten a las aplicaciones especificar el idioma y el orden de clasificación que debe usarse y personalizar el comportamiento de la función. En las implementaciones más antiguas, que ignoran los argumentos <code>locales</code> y <code>options</code>, la configuración <code>locale</code> y el orden de clasificación utilizados dependen enteramente de la implementación</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>referenceStr</var>.localeCompare(<var>compareString</var>[, <var>locales</var>[, <var>options</var>]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Comprueba la sección <a href="#Compatibilidad_con_el_navegador">Compatibilidad con el navegador</a> para ver que navegadores soportan los argumentos <code>locales</code> y <code>options</code>, and the <a href="#Checking_for_support_for_locales_and_options_arguments">Checking for support for <code>locales</code> and <code>options</code> arguments</a> for feature detection.</p> + +<dl> + <dt><code>compareString</code></dt> + <dd>La cadena con la que queremos comparar la cadena actual de caracteres.</dd> +</dl> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator', 'Parameters')}}</div> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un número <strong>negativo</strong> si la cadena de referencia ocurre antes de la cadena de comparación; <strong>positivo</strong> si la cadena de referencia ocurre después de la cadena de comparación; <strong>0</strong> si son equivalentes.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Returns an integer indicating whether the <strong>referenceStr</strong> comes before, after or is equivalent to the <strong>compareStr</strong>.</p> + +<ul> + <li>Negative when the <strong>referenceStr</strong> occurs before <strong>compareStr</strong></li> + <li>Positive when the <strong>referenceStr</strong> occurs after <strong>compareStr</strong></li> + <li>Returns 0 if they are equivalent</li> +</ul> + +<p><strong>NO CONFIAR en que los valores devueltos sean siempre -1 o 1. </strong>Los resultados de enteros negativos y positivos varían entre los navegadores (así como entre diferentes versiones de un mismo navegador) porque la especificación W3C solo exige valores negativos y positivos. Algunos navegadores pueden devolver -2 o 2 o incluso algún otro valor negativo o positivo.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_localeCompare()">Uso de <code>localeCompare()</code></h3> + +<pre class="brush: js">// La letra "a" es anterior a la "c" produciendo un valor negativo +'a'.localeCompare('c'); // -2 o -1 (u otro valor negativo) + +// Alfabeticamente la palabra "check" viene después de "against" produciendo un valor ppositivo +'check'.localeCompare('against'); // 2 o 1 (u otro valor positivo) + +// "a" y "a" son equivalentes produciendo un valor neutro de 0 +'a'.localeCompare('a'); // 0 +</pre> + +<h3 id="Ordenar_un_array">Ordenar un array</h3> + +<p><code>localeCompare</code> enables a case-insensitive sort of an array.</p> + +<pre class="brush: js">var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; +items.sort((a, b) => a.localeCompare(b)); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] +</pre> + +<h3 id="Verificar_si_el_navegador_soporta_argumentos_extendidos">Verificar si el navegador soporta argumentos extendidos</h3> + +<p>The <code>locales</code> and <code>options</code> arguments are not supported in all browsers yet. To check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a {{jsxref("RangeError")}} exception:</p> + +<pre class="brush: js">function localeCompareSupportsLocales() { + try { + 'foo'.localeCompare('bar', 'i'); + } catch (e) { + return e.name === 'RangeError'; + } + return false; +} +</pre> + +<h3 id="Uso_de_locales">Uso de <code>locales</code></h3> + +<p>The results provided by <code>localeCompare()</code> vary between languages. In order to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the <code>locales</code> argument:</p> + +<pre class="brush: js">console.log('ä'.localeCompare('z', 'de')); // a negative value: in German, ä sorts before z +console.log('ä'.localeCompare('z', 'sv')); // a positive value: in Swedish, ä sorts after z +</pre> + +<h3 id="Uso_de_options">Uso de <code>options</code></h3> + +<p>The results provided by <code>localeCompare()</code> can be customized using the <code>options</code> argument:</p> + +<pre class="brush: js">// in German, ä has a as the base letter +console.log('ä'.localeCompare('a', 'de', { sensitivity: 'base' })); // 0 + +// in Swedish, ä and a are separate base letters +console.log('ä'.localeCompare('a', 'sv', { sensitivity: 'base' })); // a positive value +</pre> + +<h2 id="Performance">Performance</h2> + +<p>When comparing large numbers of strings, such as in sorting large arrays, it is better to create an {{jsxref("Global_Objects/Collator", "Intl.Collator")}} object and use the function provided by its {{jsxref("Collator.prototype.compare", "compare")}} property.</p> + +<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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Definiciones de los parámetros <code>locale</code> y <code>option</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_el_navegador">Compatibilidad con el navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.localeCompare")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/match/index.html b/files/es/web/javascript/reference/global_objects/string/match/index.html new file mode 100644 index 0000000000..6403dbaf06 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/match/index.html @@ -0,0 +1,78 @@ +--- +title: String.prototype.match() +slug: Web/JavaScript/Referencia/Objetos_globales/String/match +tags: + - JavaScript + - Method + - Prototype + - RegExp + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/match +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>match()</code></strong> se usa para obtener todas las ocurrencias de una <em>expresión regular</em> dentro de una <em>cadena</em>.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.match(<em>regexp</em>)</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>regexp</code></dt> + <dd>Un objeto <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> expresión regular</a>. Si se pasa un objeto <code>obj</code> que no es expresión regular, se convierte implícitamente a RegExp usando <code>new RegExp(obj)</code>.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Si la expresión regular no incluye el flag <code>g</code>, devuelve el mismo resultado que {{jsxref("Regexp.exec()")}}.</p> + +<p>Si la expresión regular incluye el flag <code>g</code>, el método devuelve un {{jsxref("Array")}} que contiene todos los emparejamientos.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>Si necesita conocer si una cadena se empareja con una expresión regular <code>regexp</code>, use {{jsxref("Regexp.test()")}}.</li> + <li>Si sólo quiere el primer emparejamiento hallado, podría querer usar {{jsxref("Regexp.exec()")}} a cambio.</li> +</ul> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_match" name="Ejemplo:_Usando_match">Ejemplo: Usando <code>match</code></h3> + +<p>En el siguiente ejemplo, se usa <code>match</code> para hallar "<code>Capítulo</code>" seguido de 1 o más caracteres numéricos seguidos de un punto decimal y caracteres numéricos cero o más veces. La expresión regular incluye el flag <code>i</code> por lo que las mayúsculas serán ignoradas.</p> + +<pre class="brush: js">cadena = "Para más información, vea Capítulo 3.4.5.1"; +expresion = /(capítulo \d+(\.\d)*)/i; +hallado = cadena.match(expresion); +console.log(hallado); +</pre> + +<p>Esto devuelve un array que contiene Capítulo 3.4.5.1,Capítulo 3.4.5.1,.1</p> + +<p>"<code>Capítulo 3.4.5.1</code>" es el primer emparejamiento y el primer valor referenciado por <code>(Chapter \d+(\.\d)*)</code>.</p> + +<p>"<code>.1</code>" es el segundo valor referenciado por <code>(\.\d)</code>.</p> + +<h3 id="Ejemplo:_Usando_los_flags_global_e_ignorar_may.C3.BAsculas_con_match" name="Ejemplo:_Usando_los_flags_global_e_ignorar_may.C3.BAsculas_con_match">Ejemplo: Usando los flags global e ignorar mayúsculas con <code>match</code></h3> + +<p>El siguiente ejemplo demuestra el uso de los flags global e ignorar mayúsculas con <code>match</code>. Todas las letras de A hasta E y de a hasta e son devueltas, en su propio elemento dentro del array.</p> + +<pre class="brush: js">var cadena = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; +var expresion = /[A-E]/gi; +var array_emparejamientos = cadena.match(expresion); +console.log(array_emparejamientos); +</pre> + +<p><code>array_emparejamientos</code> será <code>{{ mediawiki.external('\'A\', \'B\', \'C\', \'D\', \'E\', \'a\', \'b\', \'c\', \'d\', \'e\'') }}</code></p> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/matchall/index.html b/files/es/web/javascript/reference/global_objects/string/matchall/index.html new file mode 100644 index 0000000000..a536720dbd --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/matchall/index.html @@ -0,0 +1,134 @@ +--- +title: String.prototype.matchAll() +slug: Web/JavaScript/Referencia/Objetos_globales/String/matchAll +tags: + - Cadena + - Expresiones Regulares + - JavaScript + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>matchAll()</code></strong> retorna un iterador de todos los resultados de ocurrencia en una <em>cadena de texto</em> contra una expresión regular, incluyendo grupos de captura.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>cadena</var>.matchAll(<var>expresionRegular</var>)</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><var>expresionRegular</var></dt> + <dd>Un objeto expresión regular. Si se pasa un objeto no-RegExp <code>obj</code>, este es implícitamente convertido a {{jsxref("RegExp")}} vía <code>new RegExp(obj)</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">iterador</a> (el cual no es reiniciable).</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Regexp.exec()_y_matchAll()">Regexp.exec() y matchAll()</h3> + +<p>Antes de la adición de <code>matchAll</code> a JavaScript, fue posible hacer llamados a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (y usar expresiones regulares con la bandera <code>/g</code>) en un ciclo para obtener las ocurrencias:</p> + +<pre class="brush: js">const regexp = RegExp('foo[a-z]*','g'); +const cadena = 'mesa football, foosball'; +let ocurrencia; + +while ((ocurrencia = regexp.exec(cadena)) !== null) { + console.log(`Encontrado ${ocurrencia[0]} inicio=${ocurrencia.index} final=${regexp.lastIndex}.`); + // salida esperada: "Encontrado football inicio=5 final=13." + // salida esperada: "Encontrado foosball inicio=15 final=23." +}</pre> + +<p>Con <code>matchAll</code> disponible, puedes evitar el ciclo <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> y <code>exec</code> con <code>/g</code>. Por el contrario, usando <code>matchAll</code>, obtienes un iterador con el cual puedes usar con constructores más convenientes <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, o {{jsxref("Array.from()")}}:</p> + +<pre class="brush: js">const regexp = RegExp('foo[a-z]*','g'); +const cadena = 'mesa football, foosball'; +const ocurrencias = cadena.matchAll(regexp); + +for (const ocurrencia of ocurrencias) { + console.log(`Encontrado ${ocurrencia[0]} inicio=${ocurrencia.index} final=${ocurrencia.index + ocurrencia[0].length}.`); +} +// salida esperada: "Encontrado football start=5 end=13." +// salida esperada: "Encontrado foosball start=15 end=23." + +// el iterador ocurrencias es agotado después de la iteración for..of +// Llama matchAll de nuevo para crear un nuevo iterador +Array.from(cadena.matchAll(regexp), m => m[0]); +// Array [ "football", "foosball" ]</pre> + +<p><code>matchAll</code> solo devuelve la primer ocurrencia si la bandera <code>/g</code> está ausente.</p> + +<pre class="brush: js">const regexp = RegExp('[a-c]',''); +const cadena = 'abc'; +Array.from(cadena.matchAll(regexp), m => m[0]); +// Array [ "a" ] +</pre> + +<p><code>matchAll</code> internamente hace un clon de la expresión regular, entonces a diferencia de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a>, <code>lastIndex</code> no cambia a medida que la cadena es escaneada.</p> + +<pre class="brush: js">const regexp = RegExp('[a-c]','g'); +regexp.lastIndex = 1; +const cadena = 'abc'; +Array.from(cadena.matchAll(regexp), m => `${regexp.lastIndex} ${m[0]}`); +// Array [ "1 b", "1 c" ]</pre> + +<h3 id="Mejor_acceso_para_capturar_grupos">Mejor acceso para capturar grupos</h3> + +<p>Otra buena razón para <code>matchAll</code> es el mejorado acceso a los grupos de captura. Los grupos de captura son ignorados cuando se usa <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code> con la bandera global <code>/g</code>:</p> + +<pre class="brush: js">var regexp = /t(e)(st(\d?))/g; +var cadena = 'test1test2'; + +cadena.match(regexp); +// Array ['test1', 'test2']</pre> + +<p>Con <code>matchAll</code> puedes acceder a ellos:</p> + +<pre class="brush: js">let array = [...str.matchAll(regexp)]; + +array[0]; +// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4] +array[1]; +// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4] +</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-string.prototype.matchall', 'String.prototype.matchAll')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.matchAll")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/normalize/index.html b/files/es/web/javascript/reference/global_objects/string/normalize/index.html new file mode 100644 index 0000000000..2794644f1c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/normalize/index.html @@ -0,0 +1,126 @@ +--- +title: String.prototype.normalize() +slug: Web/JavaScript/Referencia/Objetos_globales/String/normalize +tags: + - Cadena + - ECMAScript 2015 + - JavaScript + - Prototipo + - Referencia + - String + - Unicode + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/normalize +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>normalize()</code></strong> retorna la Forma de Normalización Unicode de la cadena dada (si el valor no es una cadena, primero será convertido a ese tipo).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.normalize([<var>form</var>])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>form</code></dt> + <dd>Uno de<code>"NFC"</code>, <code>"NFD"</code>, <code>"NFKC"</code>, o <code>"NFKD"</code>, especificando la Forma de Normalización Unicode. Si es omitida o {{jsxref("undefined")}}, se utiliza <code>"NFC"</code>. + <ul> + <li><code>NFC</code> — Forma de Normalización de Composición Canónica.</li> + <li><code>NFD</code> — Forma de Normalización de Descomposición Canónica.</li> + <li><code>NFKC</code> — Forma de Normalización de Composición de Compatibilidad.</li> + <li><code>NFKD</code> — Forma de Normalización de Descomposición de Compatibilidad.</li> + </ul> + </dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una cadena que contiene la Forma de Normalización Unicode de la cadena dada.</p> + +<h3 id="Errores_lanzados">Errores lanzados</h3> + +<dl> + <dt>{{jsxref("RangeError")}}</dt> + <dd>Un error {{jsxref("RangeError")}} es lanzado si <code>form</code> no es uno de los valores especificados arriba.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>normalize()</code> retorna la Forma de Normalización Unicode de una cadena. No afecta el valor de la cadena en sí misma.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_normalize()">Uso de <code>normalize()</code></h3> + +<pre class="brush: js">// Cadena inicial + +// U+1E9B: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA +// U+0323: COMBINACIÓN CON PUNTO ABAJO +var str = '\u1E9B\u0323'; + + +// Forma compuesta canónicamente (NFC) + +// U+1E9B: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA +// U+0323: COMBINACIÓN CON PUNTO ABAJO +str.normalize('NFC'); // '\u1E9B\u0323' +str.normalize(); // lo mismo que arriba + + +// Forma canónicamente descompuesta (NFD) + +// U+017F: LETRA S LATINA MINÚSCULA +// U+0323: COMBINACIÓN CON PUNTO ABAJO +// U+0307: COMBINACIÓN CON PUNTO ARRIBA +str.normalize('NFD'); // '\u017F\u0323\u0307' + + +// Compuesta con compatibilidad (NFKC) + +// U+1E69: LETRA S LATINA MINÚSCULA CON PUNTO ARRIBA Y ABAJO +str.normalize('NFKC'); // '\u1E69' + + +// Descompuesta con compatibilidad (NFKD) + +// U+0073: LETRA S LATINA MINÚSCULA +// U+0323: COMBINACIÓN CON PUNTO ABAJO +// U+0307: COMBINACIÓN CON PUNTO ARRIBA +str.normalize('NFKD'); // '\u0073\u0323\u0307' +</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-string.prototype.normalize', 'String.prototype.normalize')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quiere contribuir a estos datos, por favor hágalo utilizando éste repositorio <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</p> + +<p>{{Compat("javascript.builtins.String.normalize")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="http://www.unicode.org/reports/tr15/">Anexo del Estándar Unicode #15, Formas de Normalización Unicode</a></li> + <li><a href="http://en.wikipedia.org/wiki/Unicode_equivalence">Equivalencia Unicode</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/padstart/index.html b/files/es/web/javascript/reference/global_objects/string/padstart/index.html new file mode 100644 index 0000000000..57abbd8f5c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/padstart/index.html @@ -0,0 +1,100 @@ +--- +title: String.prototype.padStart() +slug: Web/JavaScript/Referencia/Objetos_globales/String/padStart +tags: + - Cadena + - Experimental + - JavaScript + - Método(2) + - Referencia +translation_of: Web/JavaScript/Reference/Global_Objects/String/padStart +--- +<div>{{JSRef}}{{SeeCompatTable}}</div> + +<p>El método <code><strong>padStart()</strong></code> rellena la cadena actual con una cadena dada (repetida eventualmente) de modo que la cadena resultante alcance una longitud dada. El relleno es aplicado desde el inicio (izquierda) de la cadena actual.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>str</var>.padStart(<var>targetLength</var> [, <var>padString</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>targetLength</code></dt> + <dd>La longitud de la cadena resultante una vez la cadena actual haya sido rellenada. Si este parámetro es más pequeño que la longitud de la cadena actual, la cadena actual será devuelta sin modificar.</dd> + <dt><code>padString</code> {{optional_inline}}</dt> + <dd>La cadena para rellenar la cadena actual. Si esta cadena es muy larga, será recortada y la parte más a la izquierda será aplicada. El valor por defecto para este parámetro es " " (U+0020).</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un {{jsxref("String")}} de la longitud específicada con la cadena de relleno aplicada desde el inicio.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">'abc'.padStart(10); // " abc" +'abc'.padStart(10, "foo"); // "foofoofabc" +'abc'.padStart(6,"123465"); // "123abc" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Este método aún no ha alcanzado el estándar ECMAScript. Actualmente es una <a href="https://github.com/tc39/proposal-string-pad-start-end">propuesta para ECMAScript</a>.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>Soporte básico</td> + <td>{{CompatChrome("52")}} </td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatNo}}</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>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.padEnd()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/raw/index.html b/files/es/web/javascript/reference/global_objects/string/raw/index.html new file mode 100644 index 0000000000..3c8f3c1d55 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/raw/index.html @@ -0,0 +1,112 @@ +--- +title: String.raw() +slug: Web/JavaScript/Referencia/Objetos_globales/String/raw +translation_of: Web/JavaScript/Reference/Global_Objects/String/raw +--- +<div>{{JSRef}}</div> + +<p>El método estatico <strong><code>String.raw()</code> </strong> es una función de <a href="/en-US/docs/Web/JavaScript/Reference/template_strings"> plantilla de literales</a>, similar al prefijo <code>r</code> en Python o al prefijo <code>@</code> en C# para strings literales (con ciertas diferencias: ver la explicación en <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">este problema</a>). Se utiliza para obtener un <em>string</em> crudo a partir de plantillas de <em>string</em> (es decir, el original, texto no interpretado).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>String.raw(<var>callSite</var>, <var>...substitutions</var>) + +String.raw`templateString` +</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>callSite</code></dt> + <dd>Plantilla bien estructurada, similar a <code>{ raw: ['foo', 'bar', 'baz'] }</code>.</dd> + <dt><code>...substitutions</code></dt> + <dd>Contiene valores de sustitución.</dd> + <dt><code>templateString</code></dt> + <dd>[opcional] Una <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">plantilla <em>string</em></a>, con sustituciones (<code>${...}</code>).</dd> +</dl> + +<h3 id="Valor_de_regreso">Valor de regreso</h3> + +<p>La forma cruda del <em>string </em>de una plantilla <em>string </em>proporcionada.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<dl> + <dt>{{jsxref("TypeError")}}</dt> + <dd>Un {{jsxref("TypeError")}} es arrojado si el primer argumento no es un objeto bien estructurado.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>En la mayoría de los casos, <code>String.raw()</code> es usado con plantillas <em>string</em>. La primera sintaxis mencionada arriba es raramente usada, porque el motor de JavaScript hará la llamada por ti con los argumentos apropiados, al igual que otras <a href="/en-US/docs/Web/JavaScript/Reference/template_strings#Tagged_template_literals">funciones de etiqueta</a>.</p> + +<p><code>String.raw()</code> es la unica función de etiqueta incorporada en las plantillas <em>string</em>; trabaja igual que la función de la plantilla por defecto y ejecuta la concatenación. Incluso puedes reimplementarlo con código normal de JavaScript.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_String.raw()">Usando <code>String.raw()</code></h3> + +<pre class="brush: js">String.raw`Hi\n${2+3}!`; +// 'Hi\n5!', the character after 'Hi' +// is not a newline character, +// '\' and 'n' are two characters. + +String.raw`Hi\u000A!`; +// 'Hi\u000A!', same here, this time we will get the +// \, u, 0, 0, 0, A, 6 characters. +// All kinds of escape characters will be ineffective +// and backslashes will be present in the output string. +// You can confirm this by checking the .length property +// of the string. + +let name = 'Bob'; +String.raw`Hi\n${name}!`; +// 'Hi\nBob!', substitutions are processed. + +// Normally you would not call String.raw() as a function, +// but to simulate `t${0}e${1}s${2}t` you can do: +String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t' +// Note that 'test', a string, is an array-like object +// The following is equivalent to +// `foo${2 + 3}bar${'Java' + 'Script'}baz` +String.raw({ + raw: ['foo', 'bar', 'baz'] +}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz' + +</pre> + +<h2 id="Especificaciónes">Especificaciónes</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-string.raw', 'String.raw')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definicion inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.raw', 'String.raw')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.raw")}}</p> + +<h2 id="Tambien_ver">Tambien ver</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a></li> + <li>{{jsxref("String")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/repeat/index.html b/files/es/web/javascript/reference/global_objects/string/repeat/index.html new file mode 100644 index 0000000000..a449bdfb27 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/repeat/index.html @@ -0,0 +1,128 @@ +--- +title: String.prototype.repeat() +slug: Web/JavaScript/Referencia/Objetos_globales/String/repeat +tags: + - ECMAScript2015 + - JavaScript + - Prototype + - Referencia + - String + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/repeat +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>repeat()</code></strong> construye y devuelve una nueva cadena que contiene el número especificado de copias de la cadena en la cual fue llamada, concatenados.</p> + +<h2 id="Sintáxis">Sintáxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.repeat(<var>count</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>count</code></dt> + <dd>Un entero entre 0 y +∞: [0, +∞), indicando el número de veces a repetir la cadena en la nueva cadenada creada que será devuelta.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Un nuevo string que contiene el número especificado de copias del string original.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<ul> + <li>{{jsxref("Errors/Negative_repetition_count", "RangeError")}}: El número de repeticiones no debe ser negativo.</li> + <li>{{jsxref("Errors/Resulting_string_too_large", "RangeError")}}: El número de repeticiones debe ser menor que infinito y no desbordar el tamaño máximo para un string.</li> +</ul> + +<dl> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">'abc'.repeat(-1); // RangeError +'abc'.repeat(0); // '' +'abc'.repeat(1); // 'abc' +'abc'.repeat(2); // 'abcabc' +'abc'.repeat(3.5); // 'abcabcabc' (count will be converted to integer) +'abc'.repeat(1/0); // RangeError + +({ toString: () => 'abc', repeat: String.prototype.repeat }).repeat(2); +// 'abcabc' (repeat() is a generic method) +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método ha sido añadido a la especificación ECMAScript 6 y tal vez aún no se encuentre disponible en todas las implementaciones de JavaScript. Sin embargo, usted puede establecer <code>String.prototype.repeat()</code> con el siguiente fragmento de código:</p> + +<pre class="brush: js">if (!String.prototype.repeat) { + String.prototype.repeat = function(count) { + 'use strict'; + if (this == null) { + throw new TypeError('can\'t convert ' + this + ' to object'); + } + var str = '' + this; + count = +count; + if (count != count) { + count = 0; + } + if (count < 0) { + throw new RangeError('repeat count must be non-negative'); + } + if (count == Infinity) { + throw new RangeError('repeat count must be less than infinity'); + } + count = Math.floor(count); + if (str.length == 0 || count == 0) { + return ''; + } + // Ensuring count is a 31-bit integer allows us to heavily optimize the + // main part. But anyway, most current (August 2014) browsers can't handle + // strings 1 << 28 chars or longer, so: + if (str.length * count >= 1 << 28) { + throw new RangeError('repeat count must not overflow maximum string size'); + } + var rpt = ''; + for (;;) { + if ((count & 1) == 1) { + rpt += str; + } + count >>>= 1; + if (count == 0) { + break; + } + str += str; + } + return rpt; + } +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.repeat', 'String.prototype.repeat')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{Compat("javascript.builtins.String.repeat")}}</div> + +<div id="compat-mobile"> </div> diff --git a/files/es/web/javascript/reference/global_objects/string/replace/index.html b/files/es/web/javascript/reference/global_objects/string/replace/index.html new file mode 100644 index 0000000000..680393ece1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/replace/index.html @@ -0,0 +1,202 @@ +--- +title: String.prototype.replace() +slug: Web/JavaScript/Referencia/Objetos_globales/String/replace +tags: + - JavaScript + - Method + - Prototype + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p><span class="seoSummary">El método <strong><code>replace()</code></strong> devuelve una nueva cadena con algunas o todas las coincidencias de un <code>patrón</code>, siendo cada una de estas coincidencias reemplazadas por <code>remplazo</code></span>. El <code>patrón</code> puede ser una cadena o una {{jsxref("RegExp")}}, y el <code>reemplazo</code> puede ser una cadena o una función que será llamada para cada coincidencia. Si el <code>patrón</code> es una cadena, sólo la primera coincidencia será reemplazada.</p> + +<p>La cadena original permanecerá inalterada.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-replace.html")}}</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval"><code class="language-html"><em>cadena</em>.replace(regexp|substr, newSubStr|function[, </code>{{ Non-standard_inline() }} <code class="language-html">flags]);</code> +</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>expresionregular</code></dt> + <dd>Un objeto {{jsxref("RegExp")}} o literal. Las coincidencias son reemplazadas por <code class="language-html">ewSubSt</code> o el valor devuelto por la función especificada.</dd> +</dl> + +<dl> + <dt><code>subcadena</code></dt> + <dd>Un objeto {{jsxref("String")}} que será reemplazado por <code>nuevaSubcadena</code>.</dd> +</dl> + +<dl> + <dt><code>nuevaSubcadena</code></dt> + <dd>El objeto {{jsxref("String")}} que reemplaza la subcadena que recibida desde el primer parámetro.</dd> +</dl> + +<dl> + <dt><code>funcion</code></dt> + <dd>Una función que será invocada para crear la nueva subcadena (para ponerla en lugar de la subcadena recibida por el primer parámetro).</dd> +</dl> + +<dl> + <dt><code>flags</code> {{ non-standard_inline() }}</dt> + <dd>Un objeto {{jsxref("String")}} que contiene cualquier combinación de flags de la clase RegExp: <code>g</code> - emparejamiento global, <code>i</code> - ignorar mayúsculas, <code>m</code> - emparejar multiples líneas. Este parámetro se usa sólo si el primer parámetro es una cadena.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Este método no cambia el objeto <code>String</code> sobre el que se realiza la llamada. Simplemente devuelve una nueva cadena.</p> + +<p>Para realizar una búsqueda global y reemplazarla, o se incluye el flag <code>g</code> en la expresión regular o si el primer parámetro es una cadena, se incluye <code>g</code> en el parámetro <code>flags</code>.</p> + +<h4 id="Especificando_una_cadena_como_un_par.C3.A1metro" name="Especificando_una_cadena_como_un_par.C3.A1metro">Especificando una cadena como un parámetro</h4> + +<p>La cadena de reemplazo puede incluir los siguientes patrones de reemplazo especiales:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Patrón</td> + <td class="header">Inserta</td> + </tr> + <tr> + <td><code>$$</code></td> + <td>Inserta una "$".</td> + </tr> + <tr> + <td><code>$&</code></td> + <td>Inserta la subcadena emparejada.</td> + </tr> + <tr> + <td><code>$`</code></td> + <td>Inserta la sección de cadena que precede a la subcadena emparejada.</td> + </tr> + <tr> + <td><code>$'</code></td> + <td>Inserta la porción de subcadena que sigue a la subcadena emparejada.</td> + </tr> + <tr> + <td style="white-space: nowrap;"><code>$<em>n</em> </code> o <code>$<em>nn</em> </code></td> + <td>Donde <code><em>n</em> </code> o <code><em>nn</em> </code> son dígitos decimales positivos menores a 100, inserta la subcadena emparejada de orden <em>n</em> del paréntesis, proporcionado por el primer argumento del objeto <code>RegExp</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Especificando_una_funci.C3.B3n_con_un_par.C3.A1metro" name="Especificando_una_funci.C3.B3n_con_un_par.C3.A1metro">Especificando una función con un parámetro</h3> + +<p>Cuando se especifica una función en el segundo parámetro, la función es invocada después de que el emparejamiento se haya realizado. (El uso de una función de este modo se llama expresión lambda.)</p> + +<p>En la función, puedes generar dinámicamente la cadena que reemplaza la subcadena emparejada. El resultado de la llamada de la función se usa como valor de reemplazo.</p> + +<p>The nested function can use the matched substrings to determine the new string (<code>newSubStr</code>) that replaces the found substring. You get the matched substrings through the parameters of your function. The first parameter of your function holds the complete matched substring. If the first argument was a <code>RegExp</code> object, then the following<em>n</em> parameters can be used for parenthetical matches, remembered submatch strings, where<em>n</em> is the number of submatch strings in the regular expression. Finally, the last two parameters are the offset within the string where the match occurred and the string itself. For example, the following <code>replace</code> method returns XXzzzz - XX , zzzz.</p> + +<pre class="brush: js">function replacer(str, p1, p2, offset, s) +{ + return str + " - " + p1 + " , " + p2; +} +var newString = "XXzzzz".replace(/(X*)(z*)/, replacer); +console.log(newString); // XXzzzz - XX , zzzz +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Using_global_and_ignore_with_replace" name="Ejemplo:_Using_global_and_ignore_with_replace">Ejemplo: Usando <code>global</code> e <code>ignore</code> con <code>replace</code></h3> + +<p>En el siguiente ejemplo, la expresión regular incluye las banderas "global" e "ignore case", las cuales permiten al método <code>replace</code> reemplazar cada aparición de la cadena 'apples' por la cadena 'oranges'.</p> + +<pre class="eval">var re = /apples/gi; +var str = "Apples are round, and apples are juicy."; +var newstr = str.replace(re, "oranges"); +print(newstr); +</pre> + +<p>In this version, a string is used as the first parameter and the global and ignore case flags are specified in the <code>flags</code> parameter.</p> + +<pre class="eval">var str = "Apples are round, and apples are juicy."; +var newstr = str.replace("apples", "oranges", "gi"); +print(newstr); +</pre> + +<p>Both of these examples print "oranges are round, and oranges are juicy."</p> + +<h3 id="Ejemplo_Definiendo_la_expresi.C3.B3n_regular_en_replace" name="Ejemplo:_Definiendo_la_expresi.C3.B3n_regular_en_replace">Ejemplo: Definiendo la expresión regular en <code>replace</code></h3> + +<p>En el siguiente ejemplo, se define la expresión regular en <code>replace</code> e incluye el flag de ignorar mayúsculas.</p> + +<pre class="eval">var cadena = "Twas the night before Xmas..."; +var nuevaCadena = cadena.replace(/xmas/i, "Christmas"); +print(nuevaCadena); +</pre> + +<p>Esto muestra "Twas the night before Christmas..."</p> + +<h3 id="Ejemplo_Conectando_palabras_en_una_cadena" name="Ejemplo:_Conectando_palabras_en_una_cadena">Ejemplo: Conectando palabras en una cadena</h3> + +<p>El siguiente código conecta las palabras dentro de la cadena. Para reemplazar el texto, el código usa <code>$1</code> y <code>$2</code> como patrones de reemplazo.</p> + +<pre class="eval">var expresion = /(\w+)\s(\w+)/; +var cadena = "John Smith"; +var nuevaCadena = cadena.replace(expresion, "$2, $1"); +print(nuevaCadena); +</pre> + +<p>Esto muestra "Smith, John".</p> + +<h3 id="Ejemplo_Using_an_inline_function_that_modifies_the_matched_characters" name="Ejemplo:_Using_an_inline_function_that_modifies_the_matched_characters">Ejemplo: Using an inline function that modifies the matched characters</h3> + +<p>In this example, all occurrences of capital letters in the string are converted to lower case, and a hyphen is inserted just before the match location. The important thing here is that additional operations are needed on the matched item before it is given back as a replacement.</p> + +<p>The replacement function accepts the matched snippet as its parameter, and uses it to transform the case and concatenate the hyphen before returning.</p> + +<pre class="brush: js">function styleHyphenFormat(propertyName) +{ + function upperToHyphenLower(match) + { + return '-' + match.toLowerCase(); + } + return propertyName.replace(/[A-Z]/, upperToHyphenLower); +} +</pre> + +<p>Given <code>styleHyphenFormat('borderTop')</code>, this returns 'border-top'.</p> + +<p>Because we want to further transform the<em>result</em> of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the <code>toLowerCase()</code> method. If we had tried to do this using the match without a function, the toLowerCase() would have no effect.</p> + +<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase()); // won't work +</pre> + +<p>This is because <code>'$&'.toLowerCase()</code> would be evaluated first as a string literal (resulting in the same <code>'$&'</code>) before using the characters as a pattern.</p> + +<h3 id="Ejemplo_Reemplazando_grandos_Fahrenheit_con_su_equivalente_Celsius" name="Ejemplo:_Reemplazando_grandos_Fahrenheit_con_su_equivalente_Celsius">Ejemplo: Reemplazando grados Fahrenheit con su equivalente Celsius</h3> + +<p>El siguiente ejemplo reemplaza los grados Fahrenheit con su enquivalente en grados Celsius. Los grados Fahrenheit deberían ser un número acabado en F. La función devuelve el número Celsius acabado en C. Por ejemplo, si el número de entrada es 212F, la función devuelve 100C. Si el número es 0F, la función devuelve -17.77777777777778C.</p> + +<p>La expresión regular <code>test</code> revisa si para un número termina en F. El número de grados Fahrenheit es accesible a la función a través de su segundo parámetro, <code>p1</code>. La función establece el número Celsius basado en los grados Fahrenheit pasados en una cadena a la función <code>f2c</code>. Entonces <code>f2c</code> devuelve el número Celsius. Esta función aproxima al flag de Perl s///e.</p> + +<pre class="brush: js">function f2c(x) +{ + function convert(str, p1, offset, s) + { + return ((p1-32) * 5/9) + "C"; + } + var s = String(x); + var test = /(\d+(?:\.\d*)?)F\b/g; + return s.replace(test, convert); +} +</pre> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> + <li>{{jsxref("RegExp.prototype.test()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/search/index.html b/files/es/web/javascript/reference/global_objects/string/search/index.html new file mode 100644 index 0000000000..23e37234d1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/search/index.html @@ -0,0 +1,153 @@ +--- +title: String.prototype.search() +slug: Web/JavaScript/Referencia/Objetos_globales/String/search +tags: + - JavaScript + - Method + - Prototype + - Reference + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/search +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <code><strong>search() </strong></code>ejecuta una búsqueda que encaje entre una expresión regular y el objeto <code>String</code> desde el que se llama.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>str</em>.search(<em>expresionregular</em>)</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt>regexp</dt> + <dd>Un objeto <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> expresión regular</a>. Si se pasa un objeto <code>obj </code>que no sea una expresión regular, se convierte implicitamente en una expresión regualar usando <code>new RegExp(obj)</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El índice de la primera coincidencia entre la expresión regular y la cadena de texto proporcionada, si no se encuentra devuelve <strong>-1</strong>.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Cuando se desee saber en qué casos un patrón se encuentra en una cadena de texto utiliza <code>search()</code> (si sólo deseas saber si existe, utiliza el método {{jsxref("RegExp.prototype.test()", "test()")}} del prototipo de <code>RegExp</code>); para más información (pero de ejecución más lenta) utiliza {{jsxref("String.prototype.match()", "match()")}} (similar al método {{jsxref("RegExp.prototype.exec()", "exec()")}} de las expresiones regulares).</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_search" name="Example:_Using_search">Utilizando <code>search()</code></h3> + +<p>El siguiente ejemplo imprime un mensaje dependiendo de cuál sea el resultado de la evaluación.</p> + +<pre class="brush: js">function testinput(re, str) { + var midstring; + if (str.search(re) != -1) { + midstring = ' contains '; + } else { + midstring = ' does not contain '; + } + console.log(str + midstring + re); +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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 para 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="Notas_específicas_de_Gecko">Notas específicas de Gecko</h2> + +<ul> + <li>Antes de {{Gecko("8.0")}}, <code>search()</code> estaba mal implementado; cuando se invocaba sin parámetros o con {{jsxref("undefined")}}, buscaría coincidencias con la cadena 'undefined' en lugar de la cadena vacía. Esto está corregido; ahora <code>'a'.search()</code> y <code>'a'.search(undefined)</code> devuelven correctamente un 0.</li> + <li>Desde Gecko 39 {{geckoRelease(39)}}, el argumento no estándar <code>flags </code>está obsoleto y muestra un aviso en la consola ({{bug(1142351)}}).</li> + <li>Desde Gecko 47 {{geckoRelease(47)}}, el argumento no estándar <code>flags</code> no es soportado en compilaciones que no sean lanzamientos y pronto serán eliminadas por completo ({{bug(1245801)}}).</li> + <li>Desde Gecko 49 {{geckoRelease(49)}}, el argumento no estándar <code>flags </code>no es soportado ({{bug(1108382)}}).</li> +</ul> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea también</h2> + +<ul> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("RegExp.prototype.exec()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/slice/index.html b/files/es/web/javascript/reference/global_objects/string/slice/index.html new file mode 100644 index 0000000000..cbfe5a716b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/slice/index.html @@ -0,0 +1,161 @@ +--- +title: String.prototype.slice() +slug: Web/JavaScript/Referencia/Objetos_globales/String/slice +tags: + - Cadena + - JavaScript + - Método(2) + - Prototipo + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/slice +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>slice()</code></strong> extrae una sección de una cadena y devuelve una cadena nueva.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval"><code class="language-html"><em>cadena</em>.slice(<em>inicioTrozo</em>[, <em>finTrozo</em>])</code> +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<dl> + <dt><code>inicioTrozo</code></dt> + <dd>El índice basado en cero en el cual empieza la extracción. Si es negativo, se trata como <code>longCadena + inicioTrozo</code> donde <code>longCadena</code> es la longitud de la cadena (por ejemplo, si <code>inicioTrozo</code> es <code>-3</code> se trata como <code>longCadena - 3</code>)</dd> +</dl> + +<dl> + <dt><code>finTrozo</code></dt> + <dd>Opcional. El índice basado en cero en el que termina la extracción. Si se omite, <code>slice</code> extrae hasta el final de la cadena. Si es negativo, se trata como <code>longCadena + finTrozo</code> donde <code>longCadena</code> es la longitud de la cadena (por ejemplo, si <code>finTrozo </code>es <code>-3</code> se trata como <code>longCadena - 3</code>).</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una nueva cadena que contiene la sección de la cadena.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>slice</code> extrae el texto de una cadena y devuelve una nueva cadena. Los cambios en el texto de una cadena no afectan a la otra cadena.</p> + +<p><code>slice</code> extrae hasta, pero sin incluir <code>finalTrozo</code>. <code>string.slice(1,4)</code> extrae del segundo carácter hasta el cuarto carácter (caracteres con índice 1, 2 y 3).</p> + +<p>Si se usa un índice negativo, finalTrozo indica el punto desde el final de la cadena.string.slice(2, -1) extrae desde tercer carácter hasta el último carácter de la cadena.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_slice_para_crear_una_nueva_cadena" name="Ejemplo:_Usando_slice_para_crear_una_nueva_cadena">Ejemplo: Uso de <code>slice()</code> para crear una nueva cadena</h3> + +<p>El siguiente ejemplo usa <code>slice()</code> para crear una nueva cadena.</p> + +<pre class="brush: js">var cadena1 = "La mañana se nos echa encima."; +var cadena2 = cadena1.slice(3, -2); +console.log(cadena2); +</pre> + +<p>Esto escribe:</p> + +<pre class="eval">mañana se nos echa encim</pre> + +<h3 id="Uso_de_slice()_con_índices_negativos">Uso de <code>slice()</code> con índices negativos</h3> + +<p>El siguiente ejemplo usa <code>slice()</code> con índices negativos.</p> + +<pre>var cad = "La mañana se nos echa encima.";<code> +cad.slice(-3); // retorna 'ma.' +cad.slice(-3, -1); // retorna 'ma' +cad.slice(0, -1); // retorna 'La mañana se nos echa encima'</code></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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> + <li>{{jsxref("Array.prototype.slice()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/small/index.html b/files/es/web/javascript/reference/global_objects/string/small/index.html new file mode 100644 index 0000000000..a8b2f302fd --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/small/index.html @@ -0,0 +1,38 @@ +--- +title: String.prototype.small() +slug: Web/JavaScript/Referencia/Objetos_globales/String/small +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/small +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<p>{{deprecated_header}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena se muestra con una fuente pequeña, como si estuviese dentro de una etiqueta {{HTMLElement("small")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.small()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>small</code> para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_tama.C3.B1o_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_tama.C3.B1o_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el tamaño de una cadena</h3> +<pre class="brush: js">var cadenaMundo="¡Hola mundo!" + +console.log(cadenaMundo.small()) +console.log(cadenaMundo.big()) +console.log(cadenaMundo.fontsize(7)) +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html"><small>¡Hola mundo!</small> +<big>¡Hola mundo!</big> +<fontsize=7>¡Hola mundo!</fontsize> +</pre> +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> +<ul> + <li>{{jsxref("String.prototype.fontsize()")}}</li> + <li>{{jsxref("String.prototype.big()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/split/index.html b/files/es/web/javascript/reference/global_objects/string/split/index.html new file mode 100644 index 0000000000..ade291da0f --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/split/index.html @@ -0,0 +1,240 @@ +--- +title: String.prototype.split() +slug: Web/JavaScript/Referencia/Objetos_globales/String/split +tags: + - JavaScript + - Method + - Prototype + - Regular Expressions + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/split +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<p>El método <strong><code>split()</code></strong> divide un objeto de tipo <code>String</code> en un array (vector) de cadenas mediante la separación de la cadena en subcadenas.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.split([<em>separador</em>][,<em>limite</em>])</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>separador</code></dt> + <dd>Especifica el carácter a usar para la separación de la cadena. El <code>separador</code> es tratado como una cadena o como una <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp"> </a>{{jsxref("Objetos_globales/RegExp", "expresión regular", "", 1)}}. Si se omite el <code>separador</code>, el array devuelto contendrá un sólo elemento con la cadena completa.</dd> +</dl> + +<dl> + <dt><code>limite</code></dt> + <dd>Opcional. Entero que especifica un límite sobre el número de divisiones a realizar. El método <code>split()</code> todavía se divide en todas las concordancias del <code>separador</code>, pero divide la matriz devuelta en la cantidad de elementos impuesta por el <code>limite</code>.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>El método <code>split()</code> devuelve el nuevo array.</p> + +<p>Cuando se encuentra, el <code>separador</code> es eliminado de la cadena y las subcadenas obtenidas se devuelven en un array. Si el <code>separador</code> no es encontrado o se omite, el array contendrá un único elemento con la cadena original completa. Si el <code>separador</code> es una cadena vacía la cadena es convertida en un array de carácteres.</p> + +<p>Si el <code>separador</code> es una expresión regular que contiene paréntesis de captura, entonces cada vez que el <code>separador</code> concuerda, los resultados (incluído cualquier resultado indefinido) de los paréntesis de captura son divididos en el array resultante. Sin embargo no todos los navegadores soportan esta característica.</p> + +<p>{{Note("Cuando la cadena está vacía, <code>split()</code> devuelve un array que contiene una cadena vacía, en lugar de un array vacío.")}}</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_split" name="Ejemplo:_Usando_split">Usando <code>split()</code></h3> + +<p>El siguiente ejemplo define una función que divide una cadena en un array de cadenas usando el separador especificado. Después de la división de la cadena, la función muestra mensajes indicando la cadena original (antes de la división), el separador usado, el número de elementos del array y los elementos individuales del array.</p> + +<pre class="brush: js">function dividirCadena(cadenaADividir,separador) { + var arrayDeCadenas = cadenaADividir.split(separador); + document.write('<p>La cadena original es: "' + cadenaADividir + '"'); + document.write('<br>El separador es: "' + separador + '"'); + document.write("<br>El array tiene " + arrayDeCadenas.length + " elementos: "); + + for (var i=0; i < arrayDeCadenas.length; i++) { + document.write(arrayDeCadenas[i] + " / "); + } +} + +var cadenaVerso = "Oh brave new world that has such people in it."; +var cadenaMeses = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"; + +var espacio = " "; +var coma = ","; + +dividirCadena(cadenaVerso, espacio); +dividirCadena(cadenaVerso); +dividirCadena(cadenaMeses, coma); +</pre> + +<p>Este ejemplo produce el siguiente resultado:</p> + +<pre>La cadena original es: "Oh brave new world that has such people in it." +El separador es: " " +El array tiene 10 elementos: Oh / brave / new / world / that / has / such / people / in / it. / + +La cadena original es: "Oh brave new world that has such people in it." +El separador es: "undefined" +El array tiene 1 elementos: Oh brave new world that has such people in it. / + +La cadena original es: "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec" +El separador es: "," +El array tiene 12 elementos: Jan / Feb / Mar / Apr / May / Jun / Jul / Aug / Sep / Oct / Nov / Dec / +</pre> + +<h3 id="Ejemplo:_Eliminar_espacios_de_una_cadena" name="Ejemplo:_Eliminar_espacios_de_una_cadena">Eliminar espacios de una cadena</h3> + +<p>En el siguiente ejemplo, <code>split</code> busca 0 o más espacios seguidos de un punto y coma seguido por 0 o más espacios y, cuando los halla, elimina los espacios de la cadena. <code>listaNombres</code> es el array devuelto como resultado de la llamada a <code>split</code>.</p> + +<pre class="brush: js">var nombres = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand "; +document.write(nombres + "<br>" + "<br>"); +var expresionRegular = /\s*;\s*/; +var listaNombres = nombres.split(expresionRegular); +document.write(listaNombres); +</pre> + +<p>Esto imprime dos líneas; la primera línea imprime la cadena original, y la segunda línea imprime el array resultante.</p> + +<pre>Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand +Harry Trump,Fred Barney,Helen Rigby,Bill Abel,Chris Hand +</pre> + +<h3 id="Ejemplo:_Devolviendo_un_n.C3.BAmero_limitado_de_divisiones" name="Ejemplo:_Devolviendo_un_n.C3.BAmero_limitado_de_divisiones">Devolviendo un número limitado de divisiones</h3> + +<p>El el siguiente ejemplo, <code>split</code> busca 0 o más espacios en una cadena y devuelve las tres primeras divisiones que encuentra.</p> + +<pre class="brush: js">var miCadena = "Hola Mundo. Cómo estás hoy?"; +var divisiones = miCadena.split(" ", 3); + +print(divisiones); +</pre> + +<p>Este script muestra lo siguiente:</p> + +<pre>Hola,Mundo.,Cómo +</pre> + +<h3 id="Paréntesis_de_captura" style="font-size: 1.71428571428571rem;">Paréntesis de captura</h3> + +<p>Si el separador contiene paréntesis de capturaI los resultados que concuerden son devueltos en el array.</p> + +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> miCadena <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'Hola 1 mundo. Oración número 2.'</span><span class="punctuation token" style="color: #999999;">;</span> +<span class="keyword token" style="color: #0077aa;">var</span> division <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> miCadena<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">split<span class="punctuation token" style="color: #999999;">(</span></span><span class="regex token" style="color: #ee9900;">/(\d)/</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span> + +console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span>division<span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span></code></pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div> + +<p>Este script muestra lo siguiente:</p> + +<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">Hola ,1, mundo. Oración número ,2,.</code></pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div> + +<h3 id="Dar_la_vuelta_a_una_cadena_usando_split()" style="font-size: 1.71428571428571rem;">Dar la vuelta a una cadena usando <code>split()</code></h3> + +<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-js" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">var</span> str <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="string token" style="color: #669900;">'asdfghjkl'</span><span class="punctuation token" style="color: #999999;">;</span> +<span class="keyword token" style="color: #0077aa;">var</span> strReverse <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> str<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">split<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">''</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">reverse<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">join<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">''</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // 'lkjhgfdsa' +</span><span class="comment token" style="color: #708090;">// split() retorna un array en el cual reverse() y join() pueden ser aplicados</span></code></pre> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div> + +<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div> + +<p><strong>Extra:</strong> usar el operador <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity_.2F_strict_equality_(.3D.3D.3D)">===</a> para verificar si la cadena anterior era un palíndromo.</p> + +<h2 id="Specifications" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">Specifications</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 3rd Edition.</td> + <td>Estándar</td> + <td>Definición inicial. Implementado en JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.14', 'String.prototype.split')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.split', 'String.prototype.split')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_navegadores" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">Compatibilidad con los navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Característica</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">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" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">Característica</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">Chrome for Android</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">IE Mobile</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">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="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.charAt()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> + <li>{{jsxref("Array.prototype.join()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/startswith/index.html b/files/es/web/javascript/reference/global_objects/string/startswith/index.html new file mode 100644 index 0000000000..c658cc80da --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/startswith/index.html @@ -0,0 +1,97 @@ +--- +title: String.prototype.startsWith() +slug: Web/JavaScript/Referencia/Objetos_globales/String/startsWith +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Prototipo + - Prototype + - Reference + - Referencia + - String + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/startsWith +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>startsWith()</code></strong> indica si una cadena de texto comienza con los caracteres de una cadena de texto concreta, devolviendo <code>true</code> o <code>false</code> según corresponda.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-startswith.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><var>str</var>.startsWith(<var>stringBuscada</var>[, <var>posicion</var>])</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>stringBuscada</var></code></dt> + <dd>Los caracteres a ser buscados al inicio de la cadena de texto.</dd> + <dt><code><var>posicion</var></code> {{optional_inline}}</dt> + <dd>La posición de <code><em>str</em></code> en la cual debe comenzar la búsqueda de <code>stringBuscada</code>. El valor por defecto es <code>0</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p><strong><code>true</code></strong> si los caracteres dados se encuentran al inicio de la cadena de texto; <strong><code>false</code></strong> en cualquier otro caso.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Este método te permite saber si una cadena de texto comienza o no con otra cadena de texto. Este método distingue entre mayúsculas y minúsculas.</p> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Este método se ha añadido a la especificación ECMAScript 2015 y podría no estar disponible aún en todas las implementaciones de JavaScript. Sin embargo, puedes utilizar un <em>polyfill</em> de <code>String.prototype.startsWith()</code> con el siguiente fragmento de código:</p> + +<pre class="brush: js notranslate">if (!String.prototype.startsWith) { + Object.defineProperty(String.prototype, 'startsWith', { + value: function(search, rawPos) { + var pos = rawPos > 0 ? rawPos|0 : 0; + return this.substring(pos, pos + search.length) === search; + } + }); +} +</pre> + +<p>Un <em>polyfill</em> más robusto (totalmente compatible con la especificación ES2015), pero con menos rendimiento y menos compacto está disponible <a href="https://github.com/mathiasbynens/String.prototype.startsWith">en GitHub, por Mathias Bynens</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_startsWith">Usando <code>startsWith()</code></h3> + +<pre class="brush: js notranslate">//startswith +var str = 'Ser, o no ser. ¡Esa es la cuestión!'; + +console.log(str.startsWith('Ser')); // true +console.log(str.startsWith('no ser')); // false +console.log(str.startsWith('Esa es la', 16)); // true +</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-string.prototype.startswith', 'String.prototype.startsWith')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{Compat("javascript.builtins.String.startsWith")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.endsWith()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.indexOf()")}}</li> + <li>{{jsxref("String.prototype.lastIndexOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/strike/index.html b/files/es/web/javascript/reference/global_objects/string/strike/index.html new file mode 100644 index 0000000000..20ba5e9c90 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/strike/index.html @@ -0,0 +1,42 @@ +--- +title: String.prototype.strike() +slug: Web/JavaScript/Referencia/Objetos_globales/String/strike +tags: + - Deprecated + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/strike +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<p>{{deprecated_header}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena se muestre como texto tachado, como si estuviese dentro de una etiqueta {{HTMLElement("strike")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.strike()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>strike</code> para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena" name="Ejemplo:_Usando_m.C3.A9todos_de_string_para_cambiar_el_formateado_de_una_cadena">Ejemplo: Usando métodos de <code>string</code> para cambiar el formateado de una cadena</h3> +<p>El siguiente ejemplo usa los métodos de <code>string</code> para cambiar el formateado de una cadena:</p> +<pre class="brush: js">var cadenaMundo="¡Hola mundo!" + +console.log(cadenaMundo.blink()) +console.log(cadenaMundo.bold()) +console.log(cadenaMundo.italics()) +console.log(cadenaMundo.strike()) +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html"><blink>¡Hola mundo!</blink> +<b>¡Hola mundo!</b> +<i>¡Hola mundo!</i> +<strike>¡Hola mundo!</strike> +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("String.prototype.blink()")}}</li> + <li>{{jsxref("String.prototype.bold()")}}</li> + <li>{{jsxref("String.prototype.italics()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/sub/index.html b/files/es/web/javascript/reference/global_objects/string/sub/index.html new file mode 100644 index 0000000000..195bca9d1e --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/sub/index.html @@ -0,0 +1,35 @@ +--- +title: String.prototype.sub() +slug: Web/JavaScript/Referencia/Objetos_globales/String/sub +tags: + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sub +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena se muestre como subíndice, como si estuviese dentro de una etiqueta {{HTMLElement("sub")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.sub()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>sub</code> junto para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena" name="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena">Ejemplo: Usando los métodos <code>sub</code> y <code>sup</code> para formatear una cadena</h3> +<p>El siguiente ejemplo usa los métodos <code>sub</code> y <code>sup</code> para formatear una cadena:</p> +<pre class="brush: js">var superText="superscript" +var subText="subscript" + +console.log("Esto es lo que un " + superText.sup() + " parece.") +console.log("Esto es lo que un " + subText.sub() + " parece.") +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html">Esto es lo que <sup>superscript</sup> parece. +Esto es lo que <sub>subscript</sub> parece. +</pre> +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> +<ul> + <li>{{jsxref("String.prototype.sup()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/substr/index.html b/files/es/web/javascript/reference/global_objects/string/substr/index.html new file mode 100644 index 0000000000..290d1292ab --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/substr/index.html @@ -0,0 +1,83 @@ +--- +title: String.prototype.substr() +slug: Web/JavaScript/Referencia/Objetos_globales/String/substr +tags: + - JavaScript + - Método(2) + - Prototipo + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substr +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<div class="warning">Advertencia: Aunque <code>String.prototype.substr(…) </code><span style="font-size: 1.125rem;">no está estrictamente obsoleto (como en "eliminado de los estándares web"), se define en el anexo B de la norma ECMA-262, cuya introducción establece:</span> + +<blockquote>... Todas las características y comportamientos del lenguaje especificados en este anexo tienen una o más características indeseables y, en ausencia de uso heredado, se eliminarían de esta especificación. ... ... Los programadores no deben usar ni asumir la existencia de estas características y comportamientos al escribir un nuevo código ECMAScript.</blockquote> +</div> + +<p> </p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>substr()</code></strong> devuelve los caracteres de una cadena que comienzan en una localización especificada y de acuerdo al número de caracteres que se especifiquen.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.substr(<em>inicio</em>[, <em>longitud</em>])</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>inicio</code></dt> + <dd>Localización en la cual se empiezan a extraer caracteres. Si se da un número negativo, se trata como <code>longCad + inicio</code> donde <code>longCad</code> es la longitud de la cadena (por ejemplo, si <code>inicio</code> es -3 se trata como <code>longCad - 3</code>).</dd> +</dl> + +<dl> + <dt><code>longitud</code></dt> + <dd>Opcional. El número de caracteres a extraer. Si este argumento es {{jsxref("undefined")}}, todos los caracteres desde <code><em>inicio</em></code> hasta el final de la cadena serán extraidos.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una nueva cadena que contiende la sección extraída de la cadena dada. Sí la longitud es 0 o un número negativo, retorna la cadena vacía.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>inicio</code> es el índice de un carácter. El índice del primer carácter es 0, y el índice del último carácter es la longitud de la cadena menos 1. <code>substr</code> comienza extrayendo caracteres a partir de <code>inicio</code> y recolecta <code>longitud</code> caracteres (a menos que se alcance primero el final de la cadena, en cuyo caso devuelve menos).</p> + +<p>Si <code>inicio</code> es positivo y es mayor o igual que la longitud de la cadena, <code>substr()</code> devuelve una cadena vacía.</p> + +<p>Si <code>inicio</code> es negativo, <code>substr()</code> lo usa como un índice de carácter desde el final de la cadena. Si <code>inicio</code> es negativo y <code>abs(inicio)</code> es mayor que la longitud de la cadena, <code>substr</code> usa 0 como índice inical. Nota: el uso descrito de valores negativos del argumento <code>inicio</code> no es soportado por Microsoft JScript <a class="external" href="http://msdn2.microsoft.com/en-us/library/0esxc5wy.aspx">. </a></p> + +<p>Si <code>longitud</code> es 0 o negativa, <code>substr</code> devuelve una cadena vacía. Si se omite <code>longitud</code>, <code>inicio</code> extrae caracteres hasta el final de la cadena.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_substr" name="Ejemplo:_Usando_substr">Ejemplo: Uso de <code>substr()</code></h3> + +<pre class="brush: js">var cadena = "abcdefghij"; + +console.log("(1,2): " + cadena.substr(1,2)); <code>// '(1, 2): bc'</code> +console.log("(-3,2): " + cadena.substr(-3,2)); <code>// '(-3, 2): hi'</code> +console.log("(-3): " + cadena.substr(-3)); // '(-3): hij' +console.log("(1): " + cadena.substr(1)); // '(1): bcdefghij' +console.log("(-20, 2): " + cadena.substr(-20,2)); // '(-20, 2): ab' +console.log("(20, 2): " + cadena.substr(20,2)); // '(20, 2): ' +</pre> + +<p>Este script muestra:</p> + +<pre class="eval">(1,2): bc +(-3,2): hi +(-3): hij +(1): bcdefghij +(-20, 2): ab +(20, 2): +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substring()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/substring/index.html b/files/es/web/javascript/reference/global_objects/string/substring/index.html new file mode 100644 index 0000000000..9918417f95 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/substring/index.html @@ -0,0 +1,92 @@ +--- +title: String.prototype.substring() +slug: Web/JavaScript/Referencia/Objetos_globales/String/substring +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/substring +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <strong><code>substring()</code></strong> método devuelve un subconjunto de un objeto <code>String</code>.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>cadena</em>.substring(<em>indiceA</em>[, <em>indiceB</em>'])</pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>indiceA</code></dt> + <dd>Un entero entre 0 y la longitud de la cadena menos 1.</dd> + <dt><code>indiceB</code></dt> + <dd>(opcional) Un entero entre 0 y la longitud de la cadena.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>substring</code> extrae caracteres desde <code>indiceA</code> hasta <code>indiceB</code> sin incluirlo. En particular:</p> + +<ul> + <li>Si <code>indiceA</code> es igual a <code>indiceB</code>, <code>substring</code> devuelve una cadena vacía.</li> + <li>Si se omite el <code>indiceB</code>, <code>substring</code> extrae caracteres hasta el final de la cadena.</li> + <li>Si el argumento es menor que 0 o es <code>NaN</code>, se trata como si fuese 0.</li> + <li>Si el argumento es mayor que <code>nombreCadena.length</code>, se trata como si fuese <code>nombreCadena.length</code>.</li> +</ul> + +<p>Si <code>indiceA</code> es mayor que <code>indiceB</code>, entonces el efecto de <code>substring</code> es como si los dos argumentos se intercambiasen; por ejemplo, <code><em>cadena</em>.substring(1, 0) == <em>cadena</em>.substring(0, 1)</code>.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_substring" name="Ejemplo:_Usando_substring">Ejemplo: Usando <code>substring</code></h3> + +<p>El siguiente ejemplo usa <code>substring</code> para mostrar caracteres de la cadena "<code>Mozilla</code>":</p> + +<pre class="brush:js">// asume una función print ya definida +var cualquierCadena = "Mozilla"; + +// Muestra "Moz" +print(cualquierCadena.substring(0,3)); +print(cualquierCadena.substring(3,0)); + +// Muestra "lla" +print(cualquierCadena.substring(4,7)); +print(cualquierCadena.substring(7,4)); + +// Muestra "Mozill" +print(cualquierCadena.substring(0,6)); +print(cualquierCadena.substring(6,0)); + +// Muestra "Mozilla" +print(cualquierCadena.substring(0,7)); +print(cualquierCadena.substring(0,10)); +</pre> + +<h3 id="Ejemplo:_Reemplazar_una_subcadena_dentro_de_una_cadena" name="Ejemplo:_Reemplazar_una_subcadena_dentro_de_una_cadena">Ejemplo: Reemplazar una subcadena dentro de una cadena</h3> + +<p>El siguiente ejemplo reemplaza una subcadena dentro de una cadena. Reemplazará tanto caracteres individuales como subcadenas. La llamada de la función al final del ejemplo cambia la cadena "<code>Bravo Nuevo Mundo</code>" por "<code>Bravo Nueva Web</code>".</p> + +<pre class="brush:js">function reemplazarCadena(cadenaVieja, cadenaNueva, cadenaCompleta) { +// Reemplaza cadenaVieja por cadenaNueva en cadenaCompleta + + for (var i = 0; i < cadenaCompleta.length; i++) { + if (cadenaCompleta.substring(i, i + cadenaVieja.length) == cadenaVieja) { + cadenaCompleta= cadenaCompleta.substring(0, i) + cadenaNueva + cadenaCompleta.substring(i + cadenaVieja.length, cadenaCompleta.length); + } + } + return cadenaCompleta; +} + +reemplazarCadena("Mundo", "Web", "Bravo Nuevo Mundo"); +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.substr()")}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/sup/index.html b/files/es/web/javascript/reference/global_objects/string/sup/index.html new file mode 100644 index 0000000000..6b8db218b6 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/sup/index.html @@ -0,0 +1,35 @@ +--- +title: String.prototype.sup() +slug: Web/JavaScript/Referencia/Objetos_globales/String/sup +tags: + - HTML wrapper methods + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/sup +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Causa que una cadena se muestre como superíndice, como si estuviese dentro de una etiqueta {{HTMLElement("sup")}}.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox"><em>cadena</em>.sup()</pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Usa el método <code>sup</code> junto para formatear y mostrar una cadena en un documento.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena" name="Ejemplo:_Usando_los_m.C3.A9todos_sub_y_sup_para_formatear_una_cadena">Ejemplo: Usando los métodos <code>sub</code> y <code>sup</code> para formatear una cadena</h3> +<p>El siguiente ejemplo usa los métodos <code>sub</code> y <code>sup</code> para formatear una cadena:</p> +<pre class="brush: js">var textoSuper="superscript" +var textoSub="subscript" + +console.log("Esto es lo que un " + textoSuper.sup() + " parece.") +console.log("Esto es lo que un " + textoSub.sub() + " parece.") +</pre> +<p>Este ejemplo produce el mismo resultado que el siguiente código HTML:</p> +<pre class="brush: html">Esto es lo que <sup>superscript</sup> parece. +Esto es lo que <sub>subscript</sub> parece. +</pre> +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> +<ul> + <li>{{jsxref("String.prototype.sub()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..5c1eae2144 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html @@ -0,0 +1,113 @@ +--- +title: String.prototype.toLocaleLowerCase() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase +tags: + - Cadena + - Internacionalizacion + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleLowerCase +--- +<div>{{JSRef}}</div> + +<div>El método <strong><code>toLocaleLowerCase()</code> </strong>retorna la cadena de texto desde la que se llama convertida en minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas.</div> + +<div> </div> + +<div>{{EmbedInteractiveExample("pages/js/string-tolocalelowercase.html")}}</div> + +<p class="hidden">Los fuentes para este ejemplo interactivo están almacenados en un repositorio GitHub. Si quieres contribuir en el proyecto de ejemplos interactivos, por favor clona https://github.com/mdn/interactive-examples y envíanos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>str</var>.toLocaleLowerCase() +<var>str</var>.toLocaleLowerCase(locale) +<var>str</var>.toLocaleLowerCase([locale, locale, ...]) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>locale</code> {{optional_inline}}</dt> + <dd>El parámetro <code>locale</code> indica la localización que se utilizará para convertir a minúsculas de acuerdo con culalquier correspondencia de mayúsculas y minúsculas. Si se proporcionan múltiples locales en un {{jsxref("Array")}}, se utiliza <a href="https://tc39.github.io/ecma402/#sec-bestavailablelocale">el mejor local disponible</a>. La localización por defecto es la localización actual configurada en el <em>host</em>.</dd> +</dl> + +<h3 id="Valor_retornado">Valor retornado</h3> + +<p>Una nueva cadena que representa la cadena desde la que se llama convertida a minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<ul> + <li>Una excepción de tipo {{jsxref("RangeError")}} ("invalid language tag: xx_yy") se lanzará si el argumento <code>locale</code> no es una etiqueta válida de lenguaje.</li> + <li>Una excepción de tipo {{jsxref("TypeError")}} ("invalid element in locales argument") se lanzará si un elemento del arreglo no es del tipo cadena.</li> +</ul> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toLocaleLowerCase()</code><strong> </strong>retorna la cadena de texto desde la que se llama convertida en minúsculas, de acuerdo con cualquier localización específica de correspondencia de mayúsculas y minúsculas. <code>toLocaleLowerCase()</code> no afecta el valor de la cadena desde la que se llama. En la mayoría de los casos, producirá el mismo resultado que {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}, pero para algunos locales, como el turco, cuyas correspondencias de mayúsculas y minúsculas no siguen las correpsondencias por defecto de Unicode, podría producir de un resultado diferente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_toLocaleLowerCase()">Utilizando <code>toLocaleLowerCase()</code></h3> + +<pre class="brush: js">'ALPHABET'.toLocaleLowerCase(); // 'alphabet' + +'\u0130'.toLocaleLowerCase('tr') === 'i'; // true +'\u0130'.toLocaleLowerCase('en-US') === 'i'; // false + +let locales = ['tr', 'TR', 'tr-TR', 'tr-u-co-search', 'tr-x-turkish']; +'\u0130'.toLocaleLowerCase(locales) === 'i'; // true +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>ES Intl 2017 added the <code>locale</code> parameter.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta pádina se gnera desde datos estructurados. Si quieres contribuir a estos datos, por favor obtén <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</p> + +<p>{{Compat("javascript.builtins.String.toLocaleLowerCase")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..7199ca3ae5 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html @@ -0,0 +1,100 @@ +--- +title: String.prototype.toLocaleUpperCase() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLocaleUpperCase +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>toLocaleUpperCase()</code></strong> devuelve el valor de la cadena que lo llama convertido en mayúsculas, de acuerdo con las asignaciones de casos específicos de la configuración regional.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox"><var>str</var>.toLocaleUpperCase() +<var>str</var>.toLocaleUpperCase(locale) +<var>str</var>.toLocaleUpperCase([locale, locale, ...]) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>locale</code> {{optional_inline}}</dt> + <dd>El parámetro <code>locale</code> indica la configuración regional que se va a utilizar para convertir en mayúsculas según las asignaciones de casos específicos de la configuración regional. Si se proporcionan varios locales en un {{jsxref ("Array")}}, se utiliza la mejor configuración regional disponible. La configuración regional predeterminada es la configuración regional actual del entorno de host.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una nueva cadena que representa la cadena de llamada convertida en mayúsculas, de acuerdo con cualquier asignación de mayúsculas de idioma específico.</p> + +<h3 id="Exceciones">Exceciones</h3> + +<ul> + <li>Un {{jsxref("RangeError")}} ("invalid language tag: xx_yy") se arroja si un argumento de configuración regional no es una etiqueta de idioma válida.</li> + <li>Un {{jsxref("TypeError")}} ("invalid element in locales argument") se lanzará si un elemento de matriz no es de tipo cadena.</li> +</ul> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toLocaleUpperCase()</code> devuelve el valor de la cadena convertida en mayúsculas según las asignaciones de casos específicos de la configuración regional. <code>toLocaleUpperCase()</code> no afecta al valor de la cadena en sí. En la mayoría de los casos, esto producirá el mismo resultado que {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}}, pero para algunas localidades, como turco, cuyas asignaciones de mayúsculas y minúsculas no siguen la mayúsculas y minúsculas en Unicode, puede haber un resultado diferente.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_toLocaleUpperCase()">Usando <code>toLocaleUpperCase()</code></h3> + +<pre class="brush: js">'alphabet'.toLocaleUpperCase(); // 'ALPHABET' + +'i\u0307'.toLocaleUpperCase('lt-LT'); // 'I' + +let locales = ['lt', 'LT', 'lt-LT', 'lt-u-co-phonebk', 'lt-x-lietuva']; +'i\u0307'.toLocaleUpperCase(locales); // 'I' +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td>ES Intl 2017 added the <code>locale</code> parameter.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.toLocaleUpperCase")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/tolowercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolowercase/index.html new file mode 100644 index 0000000000..8060f3dd1c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/tolowercase/index.html @@ -0,0 +1,40 @@ +--- +title: String.prototype.toLowerCase() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toLowerCase +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El método <strong><code>toLowerCase()</code></strong> devuelve el valor <strong>en minúsculas </strong>de la cadena que realiza la llamada.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre><code><em>cadena</em>.toLowerCase() </code></pre> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>El método <code>toLowerCase</code> devuelve el valor de la cadena convertida a minúsculas. <code>toLowerCase</code> no afecta al valor de la cadena en sí misma.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_toLowerCase" name="Ejemplo:_Usando_toLowerCase">Ejemplo: Usando <code>toLowerCase</code></h3> + +<p>El siguiente ejemplo muestra la cadena "alfabeto" en minúsculas:</p> + +<pre>var textoMayusculas="ALFABETO" +document.write(textoMayusculas.toLowerCase()) +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("String.prototype.toLocaleLowerCase()")}}</li> + <li>{{jsxref("String.prototype.toUpperCase()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/tosource/index.html b/files/es/web/javascript/reference/global_objects/string/tosource/index.html new file mode 100644 index 0000000000..104738c22d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/tosource/index.html @@ -0,0 +1,56 @@ +--- +title: String.prototype.toSource() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toSource +tags: + - Cadena + - JavaScript + - No estandar + - Prototipo + - Referencia + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/String/toSource +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <strong><code>toSource()</code></strong> devuelve una cadena que representa el código fuente del objeto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>String.toSource() +<var>str</var>.toSource() +</code></pre> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>Una cadena que representa el código fuente del objeto.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>toSource()</code> devuelve los siguientes valores:</p> + +<p>Para el objeto incorporado {{jsxref("String")}}, <code>toSource()</code> devuelve la siguiente cadena indicando que el código fuente no está disponible:</p> + +<pre class="brush: js">function String() { + [native code] +} +</pre> + +<p>Para instancias de {{jsxref("String")}} o cadenas literales, <code>toSource()</code> devuelve una cadena representando el código fuente.</p> + +<p>Este método usualmente es llamado internamente por JavaScript y no explícitamente en código.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ningún estándar. Implementado en JavaScript 1.3.</p> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si deseas contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</p> + +<p>{{Compat("javascript.builtins.String.toSource")}}</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/tostring/index.html b/files/es/web/javascript/reference/global_objects/string/tostring/index.html new file mode 100644 index 0000000000..89f53666b1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/tostring/index.html @@ -0,0 +1,28 @@ +--- +title: String.prototype.toString() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toString +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toString +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>El <strong><code>toString()</code></strong> método devuelve una cadena que representa al objeto especificado.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre><code><em>cadena</em>.toString() </code></pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El objeto <code>String</code> sobreescribe el método <code>toString</code> del objeto {{jsxref("Object")}} object; no hereda {{jsxref("Object.toString()")}}. Para objetos <code>String</code>, el método <code>toString</code> devuelve una cadena que representa al objeto.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_toString" name="Ejemplo:_Usando_toString">Ejemplo: Usando <code>toString</code></h3> +<p>El siguiente ejemplo muestra el valor cadena de un objeto String:</p> +<pre class="brush: js">cadena = new String("Hello world"); +alert(cadena.toString()) // Displays "Hello world" +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> + <li>{{jsxref("String.prototype.valueOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/touppercase/index.html b/files/es/web/javascript/reference/global_objects/string/touppercase/index.html new file mode 100644 index 0000000000..77b05b28b4 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/touppercase/index.html @@ -0,0 +1,39 @@ +--- +title: String.prototype.toUpperCase() +slug: Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/toUpperCase +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El <strong><code>toUpperCase()</code></strong> método devuelve el valor convertido en mayúsculas de la cadena que realiza la llamada.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre><code><em>cadena</em>.toUpperCase() </code></pre> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>El método <code>toUpperCase</code> devuelve el valor de la cadena convertida a mayúsculas. <code>toUpperCase</code> no afecta al valor de la cadena en sí mismo.</p> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_toUpperCase" name="Ejemplo:_Usando_toUpperCase">Ejemplo: Usando <code>toUpperCase</code></h3> + +<p>El siguiente ejemplo muestra la cadena "<code>ALPHABET</code>":</p> + +<pre class="brush: js">console.log( "alphabet".toUpperCase() ); // "ALPHABET" +</pre> + +<h3 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h3> + +<ul> + <li>{{jsxref("String.prototype.toLocaleUpperCase()")}}</li> + <li>{{jsxref("String.prototype.toLowerCase()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/trim/index.html b/files/es/web/javascript/reference/global_objects/string/trim/index.html new file mode 100644 index 0000000000..d958d713eb --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/trim/index.html @@ -0,0 +1,133 @@ +--- +title: String.prototype.trim() +slug: Web/JavaScript/Referencia/Objetos_globales/String/Trim +translation_of: Web/JavaScript/Reference/Global_Objects/String/Trim +--- +<div>{{JSRef("Global_Objects", "String")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El método <strong>trim( )</strong> elimina los espacios en blanco en ambos extremos del string. Los espacios en blanco en este contexto, son todos los caracteres sin contenido (espacio, tabulación, etc.) y todos los caracteres de nuevas lineas (LF,CR,etc.).</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>str</var>.trim()</code></pre> + +<p>Una nueva cadena que representa la cadena de llamada sin espacios en blanco de ambos extremos.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>El método <strong>trim( ) </strong>devuelve la cadena de texto despojada de los espacios en blanco en ambos extremos. El método no afecta al valor de la cadena de texto.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_trim" name="Example:_Using_trim">Ejemplo: Uso de <code>trim()</code></h3> + +<p>El siguiente ejemplo muestra la cadena de texto en minúsculas 'foo':</p> + +<pre class="brush: js">var orig = ' foo '; +console.log(orig.trim()); // 'foo' + +// Otro ejemplo de .trim() eliminando el espacio en blanco sólo de un lado. + +var orig = 'foo '; +console.log(orig.trim()); // 'foo' +</pre> + +<h2 id="Polyfill" name="Polyfill">Polyfill</h2> + +<p>Ejecutar el siguiente código antes de cualquier otro código creará un trim ( ) si este no está disponible de manera nativa.</p> + +<pre class="brush: js">if (!String.prototype.trim) { + (function() { + // Make sure we trim BOM and NBSP + var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g; + String.prototype.trim = function() { + return this.replace(rtrim, ''); + }; + })(); +} +</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('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definición inicial. Implementado en JavaScript 1.8.1.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("10.5")}}</td> + <td>{{CompatSafari("5")}}</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="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</li> + <li>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/trimend/index.html b/files/es/web/javascript/reference/global_objects/string/trimend/index.html new file mode 100644 index 0000000000..6252141adf --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/trimend/index.html @@ -0,0 +1,82 @@ +--- +title: String.prototype.trimEnd() +slug: Web/JavaScript/Referencia/Objetos_globales/String/trimEnd +tags: + - Espacios en blanco + - JavaScript + - Métodos + - Prototype + - String + - Texto + - cadenas de texto +translation_of: Web/JavaScript/Reference/Global_Objects/String/trimEnd +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>trimEnd()</code></strong> elimina los espacios en blanco al final de una cadena de carácteres. <code>trimRight()</code> es el alias de este método.</p> + +<div>{{EmbedInteractiveExample("pages/js/string-trimend.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code><var>str</var>.trimEnd(); +<var>str</var>.trimRight();</code></pre> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Una nueva cadena de texto que representa la cadena de texto llamada sin espacios en blanco de su extremo (derecho).</p> + +<h2 id="Descripción">Descripción</h2> + +<p><code>trimEnd()</code> / <code>trimRight()</code> Los metodos devuelven una cadena de texto sin espacios en blanco desde su extremo derecho. <code>trimEnd()</code> ó <code>trimRight()</code> no afectan el valor de la cadena de texto en sí.</p> + +<h3 id="Superposición">Superposición</h3> + +<p>Por coherencia de funciones como {{jsxref("String.prototype.padEnd")}} el nombre del método estandar es <code>trimEnd</code>. Sin embargo por compatibilidad web, <code>trimRight</code> permanece como un alias para <code>trimEnd</code>. En algunos motores esto significa: </p> + +<pre class="brush: js notranslate">String.prototype.trimRight.name === "trimEnd";</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Usando_trimEnd">Usando <code>trimEnd()</code></h3> + +<p>El siguiente ejemplo muestra la cadena de texto en minusculas <code>' foo'</code>:</p> + +<pre class="brush: js; highlight: [5] notranslate">var str = ' foo '; + +console.log(str.length); // 8 + +str = str.trimEnd(); +console.log(str.length); // 6 +console.log(str); // ' foo' +</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-string.prototype.trimend', 'String.prototype.trimEnd')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String.trimEnd")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("String.prototype.trim()")}}</li> + <li>{{jsxref("String.prototype.trimStart()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/string/valueof/index.html b/files/es/web/javascript/reference/global_objects/string/valueof/index.html new file mode 100644 index 0000000000..b287c4d774 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/string/valueof/index.html @@ -0,0 +1,28 @@ +--- +title: String.prototype.valueOf() +slug: Web/JavaScript/Referencia/Objetos_globales/String/valueOf +tags: + - JavaScript + - Method + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String/valueOf +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>The <strong><code>valueOf()</code></strong> método devuelve el valor primitivo de un objeto String.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre><code><em>caneda</em>.valueOf() </code></pre> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El método <code>valueOf</code> de <code>String</code> devuelve el valor primitivo de un objeto String como un tipo de dato cadena. Este valor es equivalente a String.toString.</p> +<p>Normalmente este método es llamado internamente por JavaScript y no en el código.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_valueOf" name="Ejemplo:_Usando_valueOf">Ejemplo: Usando <code>valueOf</code></h3> +<pre class="brush: js">cadena = new String("Hello world"); +alert(cadena.valueOf()) // Displays "Hello world" +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("String.prototype.toString()")}}</li> + <li>{{jsxref("Object.prototype.valueOf()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/symbol/for/index.html b/files/es/web/javascript/reference/global_objects/symbol/for/index.html new file mode 100644 index 0000000000..1111e49b7a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/for/index.html @@ -0,0 +1,153 @@ +--- +title: Symbol.for() +slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/for +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/for +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>Symbol.for(key)</strong></code> busca símbolos existentes en el runtime global del registro de <em>symbols</em> con la <code>key</code> enviada cómo argumento y devuelve el symbol si fue encontrada. Sino, un nuevo symbol es creado en el registro global de <em>symbols </em>con dicha <code>key</code> .</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>Symbol.for(key)</var>;</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>key</dt> + <dd>String, requirido. La <em>key </em>para el símbolo (y también usada para la descripción del <em>Symbol</em>).</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un <em>Symbol </em>existente para la <em>key </em>enviada si se encuentra, un nuevo <em>Symbol</em> creado para la <em>key </em>si no es encontrado.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>A diferencia de <code>Symbol()</code>, la función <code>Symbol.for()</code> crea un symbol disponible el registro global de symbols.</p> + +<p>Sin embargo, <code>Symbol.for()</code> no crea un nuevo symbol en cada llamada: primero chequea si existe un symbol para la <code>key</code> en el registro y sólo crea un nuevo symbol si la <code>key</code> no es encontrada.</p> + +<p>El registro global de symbol es una lista con la siguiente estructura (inicializada vacía):</p> + +<table class="standard-table"> + <caption>Estructura registro global de symbol</caption> + <tbody> + <tr> + <th>Field name</th> + <th>Value</th> + </tr> + <tr> + <td>[[key]]</td> + <td>Un string usado como key para identifcar al símbolo.</td> + </tr> + <tr> + <td>[[symbol]]</td> + <td>El symbol que es guardado globalmente.</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">Symbol.for('foo'); // crea un nuevo global symbol +Symbol.for('foo'); // devuelve el symbol creado + +// El mismo symbol global, pero no localmente +Symbol.for('bar') === Symbol.for('bar'); // true +Symbol('bar') === Symbol('bar'); // false + +// La key es usada en la descripción +var sym = Symbol.for('mario'); +sym.toString(); // "Symbol(mario)" +</pre> + +<p>Es una buena práctica agregar un prefijo a los symbols para evitar conflictos con otras librerias del código:</p> + +<pre class="brush: js">Symbol.for('mdn.foo'); +Symbol.for('mdn.bar'); +</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-symbol.for', 'Symbol.for')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(40) }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</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>Edge</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Symbol.keyFor()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html b/files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html new file mode 100644 index 0000000000..9149aeda00 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html @@ -0,0 +1,105 @@ +--- +title: Symbol.hasInstance +slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance +--- +<div>{{JSRef}}</div> + +<p>El bien conocido símbolo <strong><code>Symbol.hasInstance</code></strong> es usado para determinar si un constructor reconoce un objeto como su instancia. El comportamiento del operador {{jsxref("Operators/instanceof", "instanceof")}} puede ser personalizado con este símbolo.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Usted puede implementar un comportamiento personalizado para el operador <code>instanceof</code> tal que así:</p> + +<pre class="brush: js">class MyArray { + static [Symbol.hasInstance](instance) { + return Array.isArray(instance); + } +} +console.log([] instanceof MyArray); // true</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(51)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(50) }}</td> + <td>{{CompatNo}}</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>Edge</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>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(50) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/symbol/index.html b/files/es/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..ef21b5fb6c --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,364 @@ +--- +title: Symbol +slug: Web/JavaScript/Referencia/Objetos_globales/Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +<div>{{JSRef}}</div> + +<p><em><strong>Symbol</strong></em> es un tipo de datos cuyos valores son únicos e immutables. Dichos valores pueden ser utilizados como identificadores (claves) de las propiedades de los objetos. Cada valor del tipo Symbol tiene asociado un valor del tipo String o Undefined que sirve únicamente como descripción del símbolo.</p> + +<p>La función <code>Symbol</code> {{Glossary("Primitive", "primitive data type")}} es el constructor de valores del tipo <em><strong>Symbol</strong></em>. Cuando <code>Symbol </code>es llamado como función nos devuelve una nuevo valor del tipo <em><strong>Symbol.</strong></em> El constructor <code>Symbol</code> no debe ser usado con el operador <code>new</code>. Tampoco debe ser extendido mediante clases.</p> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Symbol(<em>[description]</em>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>Descripcion</code> {{optional_inline}}</dt> + <dd>Es un valor opcional de tipo String. Únicamente sirve como descripción del símbolo que puede ser útil para depurar. No permite el acceso al símbolo que describe.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Para crear un nuevo símbolo, simplemente escribimos <code>Symbol()</code>, opcionalmente con un argumento de tipo String que constituiría la descripción del símbolo:</p> + +<pre class="brush: js">var sym1 = Symbol(); +var sym2 = Symbol("foo"); +var sym3 = Symbol("foo"); +</pre> + +<p>El código anterior crea tres símbolos nuevos. Hay que destacar que <code>Symbol("foo")</code> no convierte la cadena "foo" en un símbolo, sino que crea un símbolo nuevo que tiene la misma descripción.</p> + +<pre class="brush: js">Symbol("foo") === Symbol("foo"); // false</pre> + +<p>La siguiente sintaxis con el operador {{jsxref("Operators/new", "new")}} lanzará un {{jsxref("TypeError")}}:</p> + +<pre class="brush: js">var sym = new Symbol(); // TypeError</pre> + +<p>Esto evita la creación de un objeto envolvente explícito de Symbol en lugar de un nuevo valor de tipo símbolo. Si realmente se desea crear un <code>Symbol</code> wrapper object, podemos usar la función <code>Object()</code>:</p> + +<pre class="brush: js">var sym = Symbol("foo"); +typeof sym; // "symbol" +var symObj = Object(sym); +typeof symObj; // "object" +</pre> + +<h3 id="Símbolos_compartidos_en_el_registro_global_de_símbolos">Símbolos compartidos en el registro global de símbolos</h3> + +<p>La sintaxis anteriormente descrita que usa la función <code>Symbol()</code> no creara un símbolo global disponible para toda el código base. Para crear símbolos accesibles a través de los archivos incluso a través de <em>realms</em> (cada uno de los cuales tiene su propio <em>global scope</em>) es necesario utilizar los métodos {{jsxref("Symbol.for()")}} y {{jsxref("Symbol.keyFor()")}} para crear y acceder a los símbolos desde un registro global de valores del tipo <em>Symbol</em>.</p> + +<h3 id="Encontrando_las_claves_de_tipo_símbolo_de_un_objeto">Encontrando las claves de tipo símbolo de un objeto</h3> + +<p>El método {{jsxref("Object.getOwnPropertySymbols()")}} devuelve un <em>array</em> con los símbolos que sirven como claves de las propiedades propias de un objeto. Hay que destacar que cada objeto es inicializado sin propiedades propias con claves de tipo <em>Symbol</em>, así que este <em>array</em> estará vacio a menos que se hayan creado explicitamente propiedades con clave de tipo símbolo en el objeto.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>Symbol.length</code></dt> + <dd>La propiedad <code>length</code> cuyo valor es 0 para todos los símbolos.</dd> + <dt>{{jsxref("Symbol.prototype")}}</dt> + <dd>Representa el prototipo constructor <code>Symbol</code>. Es un objeto ordinario.</dd> +</dl> + +<h3 id="Símbolos_bien_conocidos">Símbolos bien conocidos</h3> + +<p>JavaScript tiene algunos <em>símbolos incorporados</em> que representan comportamientos internos del lenguaje que no fueron expuestos a los programadores antes de ECMAScript 6. Se accede a los dichos símbolos a través de las siguientes propiedades del constructor <code>Symbol.</code></p> + +<h4 id="Símbolo_de_iteración">Símbolo de iteración</h4> + +<dl> + <dt>{{jsxref("Symbol.iterator")}}</dt> + <dd>Los objetos que implementen la interfaz <em><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iterable-interface">Iterable</a></em> deben tener una propiedad que tenga como clave este símbolo. Dicha propiedad debe ser una función que devuelva un objeto que implemente la interfaz <em><a href="http://www.ecma-international.org/ecma-262/6.0/#sec-iterator-interface">Iterator</a></em>. Usado por <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for...of</code></a>.</dd> +</dl> + +<h4 id="Símbolos_de_expresiones_regulares">Símbolos de expresiones regulares</h4> + +<dl> + <dt>{{jsxref("Symbol.match")}}</dt> + <dd>Un método que iguala a un String, también usado para determinar si un objeto puede ser usado como una expresión regular. Usado por {{jsxref("String.prototype.match()")}}.</dd> + <dt>{{jsxref("Symbol.replace")}}</dt> + <dd>Un método que reemplaza las subcadenas que coinciden con una cadena. Utilizado por {{jsxref("String.prototype.replace()")}}.</dd> + <dt>{{jsxref("Symbol.search")}}</dt> + <dd>Un método que devuelve el índice dentro de una cadena que coincide con la expresión regular. Utilizado por {{jsxref("String.prototype.search()")}}.</dd> + <dt>{{jsxref("Symbol.split")}}</dt> + <dd>Un método que separa una cadena en los índices que coincide una expresión regular. Utilizado por {{jsxref("String.prototype.split()")}}.</dd> +</dl> + +<h4 id="Otros_símbolos">Otros símbolos</h4> + +<dl> + <dt>{{jsxref("Symbol.hasInstance")}}</dt> + <dd>Un método que determina si un objeto constructor reconoce al objeto como su instancia. Utilizado por {{jsxref("Operators/instanceof", "instanceof")}}.</dd> + <dt>{{jsxref("Symbol.isConcatSpreadable")}}</dt> + <dd>Un valor booleano que indica si un objeto debe ser aplanado a sus elementos de matriz. Usado por {{jsxref("Array.prototype.concat()")}}.</dd> + <dt>{{jsxref("Symbol.unscopables")}}</dt> + <dd>An Array of string values that are property values. These are excluded from the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code> environment bindings of the associated objects.</dd> + <dt>{{jsxref("Symbol.species")}}</dt> + <dd>Una función <code>constructor</code> utilizada para crear objetos derivados.</dd> + <dt>{{jsxref("Symbol.toPrimitive")}}</dt> + <dd>Un método para convertir un objeto a su valor primitivo.</dd> + <dt>{{jsxref("Symbol.toStringTag")}}</dt> + <dd>Un método para definir la descripción por defecto de un objeto. Usado por {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Symbol.for()", "Symbol.for(key)")}}</dt> + <dd>Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with this key.</dd> + <dt>{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}</dt> + <dd>Retrieves a shared symbol key from the global symbol registry for the given symbol.</dd> +</dl> + +<h2 id="Symbol_prototype"><code>Symbol</code> prototype</h2> + +<p>All Symbols inherit from {{jsxref("Symbol.prototype")}}.</p> + +<h3 id="Propiedades_2">Propiedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Properties')}}</p> + +<h3 id="Métodos_2">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Symbol/prototype','Methods')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_operador_typeof_con_symbols">Usando el operador <code>typeof</code> con symbols</h3> + +<p>El operador {{jsxref("Operators/typeof", "typeof")}} puede ayudar a identificar los Symbol.</p> + +<pre class="brush: js">typeof Symbol() === 'symbol' +typeof Symbol('foo') === 'symbol' +typeof Symbol.iterator === 'symbol' +</pre> + +<h3 id="Symbol_type_conversions">Symbol type conversions</h3> + +<p>Some things to note when working with type conversion of symbols.</p> + +<ul> + <li>When trying to convert a symbol to a number, a {{jsxref("TypeError")}} will be thrown<br> + (e.g. <code>+sym</code> or <code>sym | 0</code>).</li> + <li>When using loose equality, <code>Object(sym) == sym</code> returns <code>true.</code></li> + <li><code>Symbol("foo") + "bar" </code>throws a {{jsxref("TypeError")}} (can't convert symbol to string). This prevents you from silently creating a new string property name from a symbol, for example.</li> + <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion">"safer" <code>String(sym)</code> conversion</a> works like a call to {{jsxref("Symbol.prototype.toString()")}} with symbols, but note that <code>new String(sym)</code> will throw.</li> +</ul> + +<h3 id="Symbols_y_el_iterador_for...in">Symbols y el iterador <code>for...in</code></h3> + +<p>Symbols are not visible in <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.</p> + +<pre class="brush: js">var obj = {}; + +obj[Symbol("a")] = "a"; +obj[Symbol.for("b")] = "b"; +obj["c"] = "c"; +obj.d = "d"; + +for (var i in obj) { + console.log(i); // logs "c" and "d" +}</pre> + +<h3 id="Symbols_y_JSON.stringify()">Symbols y <code>JSON.stringify()</code></h3> + +<p>Symbol-keyed properties will be completely ignored when using <code>JSON.stringify()</code>:</p> + +<pre class="brush: js">JSON.stringify({[Symbol("foo")]: "foo"}); +// '{}'</pre> + +<p>For more details, see {{jsxref("JSON.stringify()")}}.</p> + +<h3 id="Symbol_wrapper_objects_as_property_keys">Symbol wrapper objects as property keys</h3> + +<p>When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:</p> + +<pre class="brush: js">var sym = Symbol("foo"); +var obj = {[sym]: 1}; +obj[sym]; // 1 +obj[Object(sym)]; // still 1 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-symbol-objects', 'Symbol')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatGeckoDesktop("36.0")}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.unscopables (@@unscopables)</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.match (@@match)</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("40.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Symbol.species (@@species)</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("41.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Symbol.toPrimitive (@@toPrimitive)</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("44.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Other well-known symbols</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>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>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.iterator (@@iterator)</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{ CompatGeckoMobile("36.0") }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.unscopables (@@unscopables)</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(38)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>9</td> + </tr> + <tr> + <td>Symbol.match (@@match)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("40.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Symbol.species (@@species)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("41.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Symbol.toPrimitive (@@toPrimitive)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("44.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Other well-known symbols</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Mira_también">Mira también</h2> + +<ul> + <li><a href="/en-US/docs/Glossary/Symbol">Glossary: Symbol data type</a></li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-symbols/">"ES6 In Depth: Symbols" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/symbol/iterator/index.html b/files/es/web/javascript/reference/global_objects/symbol/iterator/index.html new file mode 100644 index 0000000000..4f9e0212cc --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/symbol/iterator/index.html @@ -0,0 +1,98 @@ +--- +title: Symbol.iterator +slug: Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator +tags: + - ECMAScript6 + - JavaScript + - Property + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol/iterator +--- +<div>{{JSRef}}</div> + +<p>El símbolo <code><strong>Symbol.iterator</strong></code> especifica al iterador por defecto de un objeto. Es utilizado por el bucle {{jsxref("Sentencias/for","for")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-iterator.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo interactivo está guardado en un repositorio en GitHub. Si quieres 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 envía un pull request.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>En cualquier situación donde se necesita iterar un objeto (por ejemplo al inicio de un bucle <code>for..of</code>), su método <code>@@iterator</code> es invocado sin argumentos, y el <strong>iterador</strong> regresado es utilizador para obtener los valores a iterar.</p> + +<p>Algunos tipos integrados cuentan con un comportamiento de iterar por defecto, mientras que otros tipos (como {{jsxref("Object")}}) no. Los tipos integrados con un método <code>@@iterator</code> son:</p> + +<ul> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> + +<p>Ver <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Protocolos de iteración</a> para más información.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Iterables_definidos_por_el_usuario">Iterables definidos por el usuario</h3> + +<p>Podemos definir nuestros propios iterables de la siguiente forma:</p> + +<pre class="brush: js notranslate">var myIterable = {} +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable] // [1, 2, 3] +</pre> + +<h3 id="Iterables_mal_formados">Iterables mal formados</h3> + +<p>Si un método iterador <code>@@iterator</code> no devuelve un objeto iterador, es un iterable mal formado. Usarlo como tal es probable que genere excepciones en tiempo de ejecución, o comportamientos inesperados.</p> + +<pre class="brush: js notranslate">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciób</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.iterator', 'Symbol.iterator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("javascript.builtins.Symbol.iterator")}}</p> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Array.@@iterator", "Array.prototype[@@iterator]()")}}</li> + <li>{{jsxref("TypedArray.@@iterator", "TypedArray.prototype[@@iterator]()")}}</li> + <li>{{jsxref("String.@@iterator", "String.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</li> + <li>{{jsxref("Set.@@iterator", "Set.prototype[@@iterator]()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/syntaxerror/index.html b/files/es/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..92bf3f4991 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,176 @@ +--- +title: SyntaxError +slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError +tags: + - Constructor + - Error + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p>El objeto <code><strong>SyntaxError</strong></code> representa un error cuando se trata de interpretar codigo sintacticamente invalido.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Un <code>SyntaxError</code> es lanzado cuando el motor de JavaScript se encuentra con partes de código que no forman parte de la sintaxtis del lenguaje al momento analizar el código.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>new SyntaxError([<var>mensaje</var>[, <var>nombreArchivo</var>[, <var>numeroLinea</var>]]])</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>mensaje</code></dt> + <dd>Opcional. Descripción legible del error.</dd> + <dt><code>nombreArchivo</code> {{non-standard_inline}}</dt> + <dd>Opcional. El nombre del archivo que contiene el código que causó la excepción.</dd> + <dt><code>numeroLinea</code> {{non-standard_inline}}</dt> + <dd>Opcional. El numero de linea del código que causó la excepción.</dd> +</dl> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("SyntaxError.prototype")}}</dt> + <dd>Permite el agregado de propiedades al objeto <code>SyntaxError</code>.</dd> +</dl> + +<h2 id="Metodos">Metodos</h2> + +<p>El objeto global <code>SyntaxError</code> no contiene metodos propios, sin embargo, hereda algunos metodos debido a la cadena de prototipos.</p> + +<h2 id="Instancias_de_SyntaxError"><code>Instancias de SyntaxError</code></h2> + +<h3 id="Propiedades_2">Propiedades</h3> + +<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype', 'Propiedades')}}</div> + +<h3 id="Metodos_2">Metodos</h3> + +<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype', 'Metodos')}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Capturando_un_SyntaxError">Capturando un <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + eval('hoo bar'); +} catch (e) { + console.log(e instanceof SyntaxError); // true + console.log(e.message); // "missing ; before statement" + console.log(e.name); // "SyntaxError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 1 + console.log(e.columnNumber); // 4 + console.log(e.stack); // "@Scratchpad/1:2:3\n" +} +</pre> + +<h3 id="Creando_un_SyntaxError">Creando un <code>SyntaxError</code></h3> + +<pre class="brush: js">try { + throw new SyntaxError('Hola', 'unArchivo.js', 10); +} catch (e) { + console.log(e instanceof SyntaxError); // true + console.log(e.message); // "Hola" + console.log(e.name); // "SyntaxError" + console.log(e.fileName); // "unArchivo.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:11:9\n" +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegarores">Compatibilidad con Navegarores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("SyntaxError.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html b/files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html new file mode 100644 index 0000000000..579f8af9bd --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html @@ -0,0 +1,110 @@ +--- +title: TypedArray.prototype.buffer +slug: Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer +tags: + - Buffer + - JavaScript + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray/buffer +--- +<div>{{JSRef}}</div> + +<p>La propiedad de acceso <strong><code>buffer</code></strong> representa el {{jsxref("ArrayBuffer")}} referenciada por un <em>TypedArray</em> en tiempo de construcción.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>typedArray</var>.buffer</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La propiedad <code>buffer</code> es una propiedad de acceso cuya función <em>set accessor</em> es <code>undefined</code>, significa que tu sólo puedes leer esta propiedad. El valor es establecido cuando <em>TypedArray</em> se construye y no puede ser cambiado. <em>TypedArray</em> es uno de los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects">TypedArray objects</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_la_propiedad_buffer">Usando la propiedad <code>buffer</code></h3> + +<pre class="brush:js">var buffer = new ArrayBuffer(8); +var uint16 = new Uint16Array(buffer); +uint16.buffer; // ArrayBuffer { byteLength: 8 } +</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('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>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>7.0</td> + <td>{{ CompatGeckoDesktop("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("2") }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</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/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/typedarray/index.html b/files/es/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..644b28c081 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,317 @@ +--- +title: TypedArray +slug: Web/JavaScript/Referencia/Objetos_globales/TypedArray +tags: + - Clase + - Class + - JavaScript + - TypedArray + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +--- +<div>{{JSRef}}</div> + +<p>Un objeto <strong><em>TypedArray</em></strong> describe una vista similar a un arreglo de un <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">búfer de datos binarios subyacente</a>. No existe una propiedad global denominada <code>TypedArray</code>, ni existe un constructor <code>TypedArray</code> directamente visible. En cambio, hay una serie de diferentes propiedades globales, cuyos valores son constructores de arreglos tipados para tipos de elementos específicos, que se enumeran a continuación. En las siguientes páginas, encontrarás propiedades y métodos comunes que se pueden utilizar con cualquier arreglo tipado que contenga elementos de cualquier tipo.</p> + +<div>{{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}}</div> + +<p 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.</p> + +<dl> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>ECMAScript 2015 define un constructor <code><var>TypedArray</var></code> que sirve como <code>[[Prototype]]</code> de todos los constructores <code><var>TypedArray</var></code>. Este constructor no está expuesto directamente: no existe una propiedad global <code>%TypedArray%</code> o <code>TypedArray</code>. Solo es accesible directamente a través de <code>Object.getPrototypeOf(Int8Array)</code> y similares. Todos los constructores de <code><var>TypedArray</var></code> heredan propiedades comunes de la función constructora <code>%TypedArray%</code>. Además, todos los prototipos de arreglos con tipo (<code><var>TypedArray.</var></code><code>prototype</code>) tienen <code>%TypedArray%.prototype</code> como su <code>[[Prototype]]</code>.</p> + +<p>El constructor <code>%TypedArray%</code> por sí solo no es particularmente útil. Llamarlo o usarlo en una expresión <code>new</code> arrojará un {{jsxref("TypeError")}}, excepto cuando se usa durante la creación de objetos en motores JS que admiten subclases. Actualmente no existen tales motores, por lo que <code>%TypedArray%</code> solo es útil para rellenar funciones o propiedades en todos los constructores <code><var>TypedArray</var></code>.</p> + +<p>Al crear una instancia de <code><var>TypedArray</var></code> (p. ej., <code>Int8Array</code>), se crea un arreglo de búfer internamente en la memoria o, si se proporciona un objeto <code>ArrayBuffer</code> como argumento del constructor, entonces se usa en su lugar. La dirección del búfer se guarda como una propiedad interna de la instancia y todos los métodos de <code>%<var>TypedArray</var>%.prototype</code>, es decir, establecer el valor y obtener valor, etc.., operan en esa dirección del arreglo de búfer.</p> + +<h3 id="Objetos_TypedArray">Objetos TypedArray</h3> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Tipo</th> + <th class="header" scope="col">Intervalo de valores</th> + <th class="header" scope="col">Tamaño en bytes</th> + <th class="header" scope="col">Descripción</th> + <th class="header" scope="col">Tipo de IDL web</th> + <th class="header" scope="col">Tipo C equivalente</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Int8Array")}}</td> + <td><code>-128</code> a <code>127</code></td> + <td>1</td> + <td>Dos enteros complementarios de 8 bits con signo</td> + <td><code>byte</code></td> + <td><code>int8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8Array")}}</td> + <td><code>0</code> a <code>255</code></td> + <td>1</td> + <td>Entero de 8-bit sin signo</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint8ClampedArray")}}</td> + <td><code>0</code> a <code>255</code></td> + <td>1</td> + <td>Entero de 8 bits sin signo (sujeto)</td> + <td><code>octet</code></td> + <td><code>uint8_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int16Array")}}</td> + <td><code>-32768</code> a <code>32767</code></td> + <td>2</td> + <td>Dos enteros complementarios de 16 bits con signo</td> + <td><code>short</code></td> + <td><code>int16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint16Array")}}</td> + <td><code>0</code> a <code>65535</code></td> + <td>2</td> + <td>Entero de 16 bits sin signo</td> + <td><code>Short sin signo</code></td> + <td><code>uint16_t</code></td> + </tr> + <tr> + <td>{{jsxref("Int32Array")}}</td> + <td><code>-2147483648</code> a <code>2147483647</code></td> + <td>4</td> + <td>dos enteros complementarios de 32 bits con signo</td> + <td><code>long</code></td> + <td><code>int32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Uint32Array")}}</td> + <td><code>0</code> a <code>4294967295</code></td> + <td>4</td> + <td>Enteros de 32 bits sin signo</td> + <td><code>long sin signo</code></td> + <td><code>uint32_t</code></td> + </tr> + <tr> + <td>{{jsxref("Float32Array")}}</td> + <td><code>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</code><span>×</span><code>10<sup>38</sup></code></td> + <td>4</td> + <td>Número de coma flotante IEEE de 32 bits (7 dígitos significativos, p. ej., <code>1.1234567</code>)</td> + <td><code>float sin restricciones</code></td> + <td><code>float</code></td> + </tr> + <tr> + <td>{{jsxref("Float64Array")}}</td> + <td><code>5.0</code><span>×</span><code>10<sup>-324</sup></code> a <code>1.8</code><span>×</span><code>10<sup>308</sup></code></td> + <td>8</td> + <td>Número de coma flotante IEEE de 64 bits (16 dígitos significativos, p. Ej., <code>1.123...15</code>)</td> + <td><code>doble sin restricciones</code></td> + <td><code>double</code></td> + </tr> + <tr> + <td>{{jsxref("BigInt64Array")}}</td> + <td><code>-2<sup>63</sup></code> a <code>2<sup>63</sup>-1</code></td> + <td>8</td> + <td>Dos enteros complementarios de 64 bits con signo</td> + <td><code>bigint</code></td> + <td><code>int64_t (long long con signo)</code></td> + </tr> + <tr> + <td>{{jsxref("BigUint64Array")}}</td> + <td><code>0</code> a <code>2<sup>64</sup>-1</code></td> + <td>8</td> + <td>Entero de 64 bits sin signo</td> + <td><code>bigint</code></td> + <td><code>uint64_t (long long sin signo)</code></td> + </tr> + </tbody> +</table> + +<h2 id="Constructor">Constructor</h2> + +<p>No se puede crear una instancia de este objeto directamente. En su lugar, crea una instancia de un arreglo de un tipo particular, tal como {{jsxref("Int8Array")}} o {{jsxref("BigInt64Array")}}. Todos estos objetos tienen una sintaxis común para sus constructores:</p> + +<pre class="syntaxbox notranslate">new <var>TypedArray</var>(); +new <var>TypedArray</var>(<var>length</var>); +new <var>TypedArray</var>(<var>typedArray</var>); +new <var>TypedArray</var>(<var>object</var>); +new <var>TypedArray</var>(<var>buffer</var> [, <var>byteOffset</var> [, <var>length</var>]]); +</pre> + +<p>Donde <var>TypedArray</var> es un constructor para uno de los tipos concretos.</p> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>length</var></code></dt> + <dd>Cuando se llama con un argumento <code><var>length</var></code>, se crea un búfer de arreglo interno en la memoria, de tamaño <code><var>length</var></code> <em>multiplicado por <code>BYTES_PER_ELEMENT</code></em> bytes, que contienen ceros.</dd> + <dt><code><var>typedArray</var></code></dt> + <dd>Cuando se llama con un argumento <code>typedArray</code>, que puede ser un objeto de cualquiera de los tipos de arreglo con tipo (como <code>Int32Array</code>), el <code><var>typedArray</var></code> se copia en un nuevo arreglo tipado. Cada valor en <code><var>typedArray</var></code> se convierte al tipo correspondiente del constructor antes de ser copiado en el nuevo arreglo. La longitud del nuevo arreglo tipado será la misma que la longitud del argumento <code><var>typedArray</var></code>.</dd> + <dt><code><var>object</var></code></dt> + <dd>Cuando se llama con un argumento <code><var>object</var></code>, se crea un nuevo arreglo tipado como si fuera el método <code><var>TypedArray</var>.from()</code>.</dd> + <dt><code><var>buffer</var></code>, <code><var>byteOffset</var></code>, <code><var>length</var></code></dt> + <dd>Cuando se llama con un <code><var>buffer</var></code> y, opcionalmente, un <code><var>byteOffset</var></code> y un <code><var>length</var></code>, se crea una nueva vista del arreglo tipado que visualiza el {{jsxref("ArrayBuffer")}} especificado. Los parámetros <code><var>byteOffset</var></code> y <code><var>length</var></code> especifican el rango de memoria que será expuesto por la vista del arreglo tipado. Si se omiten ambos, se visualiza todo el <code><var>buffer</var></code>; si solo se omite <code><var>length</var></code>, se visualiza el resto de <code><var>buffer</var></code>.</dd> +</dl> + +<h2 id="Propiedades_estáticas">Propiedades estáticas</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT")}}</dt> + <dd>Devuelve un valor numérico del tamaño del elemento para los diferentes objetos <code><var>TypedArray</var></code>.</dd> + <dt>{{jsxref("TypedArray.name")}}</dt> + <dd>Devuelve el valor de cadena del nombre del constructor (por ejemplo, <code>"Int8Array"</code>).</dd> + <dt>{{jsxref("TypedArray.@@species", "get TypedArray[@@species]")}}</dt> + <dd>La función constructora utilizada para crear objetos derivados.</dd> + <dt>{{jsxref("TypedArray.prototype")}}</dt> + <dd>Prototipo para objetos <code><var>TypedArray</var></code>.</dd> +</dl> + +<h2 id="Métodos_estáticos">Métodos estáticos</h2> + +<dl> + <dt>{{jsxref("TypedArray.from()")}}</dt> + <dd>Crea un nuevo <code><var>TypedArray</var></code> a partir de un objeto iterable o similar a un arreglo. Consulta también {{jsxref("Array.from()")}}.</dd> + <dt>{{jsxref("TypedArray.of()")}}</dt> + <dd>Crea un nuevo <code><var>TypedArray</var></code> con un número variable de argumentos. Consulta también {{jsxref("Array.of()")}}.</dd> +</dl> + +<h2 id="Propiedades_de_la_instancia">Propiedades de la instancia</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.buffer")}}</dt> + <dd>Devuelve el {{jsxref("ArrayBuffer")}} al que hace referencia el arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength")}}</dt> + <dd>Devuelve la longitud (en bytes) del arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset")}}</dt> + <dd>Devuelve el desplazamiento (en bytes) del arreglo tipado desde el inicio de su {{jsxref("ArrayBuffer")}}. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.length")}}</dt> + <dd>Devuelve el número de elementos contenidos en el arreglo tipado. Corregido en el momento de la construcción y, por lo tanto, de <strong>solo lectura.</strong></dd> +</dl> + +<h2 id="Métodos_de_instancia">Métodos de instancia</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> + <dd>Copia una secuencia de elementos de arreglo dentro del arreglo. Consulta también {{jsxref("Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice del arreglo. Consulta también {{jsxref("Array.prototype.entries()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> + <dd>Comprueba si todos los elementos del arreglo pasan la prueba proporcionada por una función. Consulta también {{jsxref("Array.prototype.every()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> + <dd>Rellena todos los elementos de un arreglo desde un índice inicial hasta un índice final con un valor estático. Consulta también {{jsxref("Array.prototype.fill()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> + <dd>Crea un nuevo arreglo con todos los elementos de este arreglo para la cual la función de filtrado proporcionada devuelve <code>true</code>. Consulta también {{jsxref("Array.prototype.filter()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> + <dd>Devuelve el valor encontrado en el arreglo, si un elemento del arreglo satisface la función de prueba proporcionada, o <code>undefined</code> si no se encuentra. Consulta también {{jsxref("Array.prototype.find()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> + <dd>Devuelve el índice encontrado en el arreglo, si un elemento del arreglo satisface la función de prueba proporcionada o <code>-1</code> si no se encuentra. Consulta también {{jsxref("Array.prototype.findIndex()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> + <dd>Llama a una función para cada elemento del arreglo. Consulta también {{jsxref("Array.prototype.forEach()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.includes()")}}</dt> + <dd>Determina si un arreglo tipado incluye un determinado elemento, devolviendo <code>true</code> o <code>false</code> según corresponda. Consulta también {{jsxref("Array.prototype.includes()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> + <dd>Devuelve el primer (mínimo) índice de un elemento dentro del arreglo igual al valor especificado, o <code>-1</code> si no se encuentra ninguno. Consulta también {{jsxref("Array.prototype.indexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> + <dd>Une todos los elementos de un arreglo en una cadena. Consulta también {{jsxref("Array.prototype.join()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> + <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice del arreglo. Consulta también {{jsxref("Array.prototype.keys()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> + <dd>Devuelve el último (mayor) índice de un elemento dentro del arreglo igual al valor especificado, o <code>-1</code> si no se encuentra ninguno. Consulta también {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> + <dd>Crea un nuevo arreglo con los resultados de llamar a una función proporcionada en cada elemento de este arreglo. Consulta también {{jsxref("Array.prototype.map()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> + <dd>Aplica una función contra un acumulador y cada valor del arreglo (de izquierda a derecha) para reducirlo a un solo valor. Consulta también {{jsxref("Array.prototype.reduce()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> + <dd>Aplica una función contra un acumulador y cada valor del arreglo (de derecha a izquierda) para reducirlo a un solo valor. Consulta también {{jsxref("Array.prototype.reduceRight()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> + <dd>Invierte el orden de los elementos de un arreglo: el primero se convierte en el último y el último en el primero. Consulta también {{jsxref("Array.prototype.reverse()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> + <dd>Almacena múltiples valores en el arreglo tipado, leyendo valores de entrada de un arreglo especificado.</dd> + <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> + <dd>Extrae una sección de un arreglo y devuelve un nuevo arreglo. Consulta también {{jsxref("Array.prototype.slice()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> + <dd>Devuelve <code>true</code> si al menos un elemento de este arreglo satisface la función de prueba proporcionada. Consulta también {{jsxref("Array.prototype.some()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> + <dd>Ordena los elementos de un arreglo en su lugar y devuelve el arreglo. Consulta también {{jsxref("Array.prototype.sort()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> + <dd>Devuelve un nuevo <code><var>TypedArray</var></code> del índice del elemento inicial y final dado.</dd> + <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores de cada índice del arreglo. Consulta también {{jsxref("Array.prototype.values()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> + <dd>Devuelve una cadena localizada que representa el arreglo y sus elementos. Consulta también {{jsxref("Array.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el arreglo y sus elementos. Consulta también {{jsxref("Array.prototype.toString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores de cada índice del arreglo.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Se_requiere_new">Se requiere <code>new</code></h3> + +<p>A partir de ECMAScript 2015, los constructores <code>TypedArray</code> se deben construir con el operador {{jsxref("Operators/new", "new")}}. Llamar a un constructor <code>TypedArray</code> como una función sin <code>new</code> arrojará un {{jsxref("TypeError")}}.</p> + +<pre class="brush: js example-bad notranslate">var dv = Int8Array([1, 2, 3]); +// TypeError: llamar a un constructor Int8Array incorporado +// sin new está prohibido</pre> + +<pre class="brush: js example-good notranslate">var dv = new Int8Array([1, 2, 3]);</pre> + +<h3 id="Acceso_a_la_propiedad">Acceso a la propiedad</h3> + +<p>Puedes hacer referencia a elementos en el arreglo utilizando la sintaxis de índice de arreglo estándar (es decir, utilizando la notación entre corchetes). Sin embargo, obtener o establecer propiedades indexadas en arreglos tipados no buscará esta propiedad en la cadena de prototipos, incluso cuando los índices estén fuera de límites. Las propiedades indexadas consultarán el {{jsxref("ArrayBuffer")}} y nunca mirarán las propiedades del objeto. Aún puedes usar propiedades con nombre, al igual que con todos los objetos.</p> + +<pre class="brush: js notranslate">// Configuración y obtención usando la sintaxis de arreglo estándar +var int16 = new Int16Array(2); +int16[0] = 42; +[parcial]console.log(0); + +// No se consultan las propiedades indexadas en los prototipos (Fx 25) +Int8Array.prototype[20] = 'foo'; +(new Int8Array(32))[20]; // 0 +// incluso cuando está fuera del límite +Int8Array.prototype[20] = 'foo'; +(new Int8Array(8))[20]; // undefined +// o con enteros negativos +Int8Array.prototype[-1] = 'foo'; +(new Int8Array(8))[-1]; // undefined + +// Sin embargo, se permiten propiedades con nombre (Fx 30) +Int8Array.prototype.foo = 'bar'; +(new Int8Array(32)).foo; // "bar"</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-typedarray-objects', 'TypedArray Objects')}}</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.builtins.TypedArray")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Typed_arrays" title="es/JavaScript arreglos tipados">Arreglos tipados JavaScript</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> + <li><a href="/es/docs/Web/API/TextDecoder">TextDecoder</a> — Ayuda que decodifica cadenas a partir de datos numéricos</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/uint8array/index.html b/files/es/web/javascript/reference/global_objects/uint8array/index.html new file mode 100644 index 0000000000..6402e356b0 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/uint8array/index.html @@ -0,0 +1,260 @@ +--- +title: Uint8Array +slug: Web/JavaScript/Referencia/Objetos_globales/Uint8Array +tags: + - Arreglo + - JavaScript + - array de enteros +translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array +--- +<div>{{JSRef}}</div> + +<p>Los <strong><code>Uint8Array</code></strong> representan un array de enteros sin signo de 8 bits. El contenido se inicializa a 0. Una vez establecido, puedes hacer referencia a un elemento usando los métodos del objeto o usando la sintaxis de array estándar (esto es, usando la notación de corchetes).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">new Uint8Array(tamaño); +new Uint8Array(typedArray); +new Uint8Array(objeto); +new Uint8Array(buffer [, byteOffset [, tamaño]]);</pre> + +<p>Para más información acerca de la sintaxis del constructor y sus parámetros, mire <em><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax">TypedArray</a></em>.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}</dt> + <dd>Retorna un número con el valor del tamaño del elemento. <code>1</code> en el caso del <code>Uint8Array</code>.</dd> + <dt>Uint8Array.length</dt> + <dd>Propiedad estática de tamaño cuyo valor es 3. Para el tamaño actual (número d elementos), mire {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.</dd> + <dt>{{jsxref("TypedArray.name", "Uint8Array.name")}}</dt> + <dd>Devuelve el nombre del constructor en un string. En el caso de <code>Uint8Array</code> devuelve: "Uint8Array".</dd> + <dt>{{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}</dt> + <dd>Prototipo para los objetos <em>TypedArray</em> .</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("TypedArray.from", "Uint8Array.from()")}}</dt> + <dd>Crea un nuevo <code>Uint8Array</code> desde un array o un objeto iterable. Véase también {{jsxref("Array.from()")}}.</dd> + <dt>{{jsxref("TypedArray.of", "Uint8Array.of()")}}</dt> + <dd>Crea un <code>Uint8Array con un número variable de argumentos</code>. Véase también {{jsxref("Array.of()")}}.</dd> +</dl> + +<h2 id="Uint8Array_prototype"><code>Uint8Array</code> prototype</h2> + +<p>Todos los objetos <code>Uint8Array</code> son heredados de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.</p> + +<h3 id="Propiedades_2">Propiedades</h3> + +<dl> + <dt><code>Uint8Array.prototype.constructor</code></dt> + <dd>Retorna la función que crea una instancia del prototype. Éste es el constructor por defecto de <code>Uint8Array</code>.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>Retorna el {{jsxref("ArrayBuffer")}} con la referencia del <code>Uint8Array. </code>Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>Retorna el tamaño (en bytes) del array <code>Uint8Array</code>. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>Retorna el offset (en bytes) del <code>Uint8Array</code> desde el inicio de su {{jsxref("ArrayBuffer")}}. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd> + <dt>{{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}</dt> + <dd>Retorna el número de elementos contenidos en el <code>Uint8Array</code>. Fijado en el tiempo de construcción y es de <strong>sólo lectura</strong>.</dd> +</dl> + +<h3 id="Métodos_2">Métodos</h3> + +<dl> + <dt>{{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}</dt> + <dd>Copia una secuencia de elementos del array dentro del array. Véase también {{jsxref("Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}</dt> + <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los pares de valores para cada índice del array. Véase también {{jsxref("Array.prototype.entries()")}}.</dd> + <dt>{{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}</dt> + <dd>Prueba si todos los elementos del array cumplen las condiciones de una función. Véase también {{jsxref("Array.prototype.every()")}}.</dd> + <dt>{{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}</dt> + <dd>Llena todos los elementos del array desde el principio hasta el final con un valor dado. Véase también {{jsxref("Array.prototype.fill()")}}.</dd> + <dt>{{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}</dt> + <dd>Crea un nuevo array con todos los elementos del array que satisfacen las condiciones de una función que devuelve verdadero. Véase también {{jsxref("Array.prototype.filter()")}}.</dd> + <dt>{{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}</dt> + <dd>Devuelve el valor encontrado en el array, si un elemento del array satisface una función dada de prueba o undefined si no es encontrada. Véase también {{jsxref("Array.prototype.find()")}}.</dd> + <dt>{{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}</dt> + <dd>Devuelve el índice encontrado en el array, si un elemento del array satisface una función dada de prueba o -1 si no es encontrada. Véase también {{jsxref("Array.prototype.findIndex()")}}.</dd> + <dt>{{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}</dt> + <dd>Llama a una función para cada elemento del array. Véase también {{jsxref("Array.prototype.forEach()")}}.</dd> + <dt>{{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}} {{experimental_inline}}</dt> + <dd>Determina si un <font face="consolas, Liberation Mono, courier, monospace">array</font> incluye un cierto elemento, retornando <code>true</code> o <code>false</code> según corresponda. Véase también {{jsxref("Array.prototype.includes()")}}.</dd> + <dt>{{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}</dt> + <dd>Devuelve el primer (menor) índice de un elemento dentro del array igual al valor especificado, o -1 si no es encontrado. Véase también {{jsxref("Array.prototype.indexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}</dt> + <dd>Une todos los elementos de un array a una cadena. Véase también {{jsxref("Array.prototype.join()")}}.</dd> + <dt>{{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}</dt> + <dd>Retorna un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array. Véase también {{jsxref("Array.prototype.keys()")}}.</dd> + <dt>{{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}</dt> + <dd>Devuelve el último (mayor) índice de un elemento dentro del array igual al valor especificado, o -1 si no fue encontrado. Véase también {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}</dt> + <dd>Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Véase también {{jsxref("Array.prototype.map()")}}.</dd> + <dt>{{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>Primera versión no-estandar de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}</dt> + <dd> + <p>Aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor. Véase también {{jsxref("Array.prototype.reduce()")}}.</p> + </dd> + <dt>{{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}</dt> + <dd>Aplica una función a un acumulador y a cada valor de un array (de derecha a izquierda) para reducirlo a un único valor. Véase también {{jsxref("Array.prototype.reduceRight()")}}.</dd> + <dt>{{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}</dt> + <dd>Inverte el orden de los elementos de un array, el primero se convierte en el último y el último en el primero. See also {{jsxref("Array.prototype.reverse()")}}.</dd> + <dt>{{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}</dt> + <dd>Almacena múltiples valores en el array, leyendo los valores de entrada de un array específico.</dd> + <dt>{{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}</dt> + <dd>Extrae una porción de un array y devuelve uno nuevo. Véase también {{jsxref("Array.prototype.slice()")}}.</dd> + <dt>{{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}</dt> + <dd>Devuelve <code>true</code> si al menos un elemento de este array satisface la función de prueba proporcionada. Véase también {{jsxref("Array.prototype.some()")}}.</dd> + <dt>{{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}</dt> + <dd>Ordena los elementos de un array localmente y devuelve el array. Véase también {{jsxref("Array.prototype.sort()")}}.</dd> + <dt>{{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}</dt> + <dd>Retorna un nuevo <code>Uint8Array</code> desde el índice de elementos iniciales y finales proporcionados.</dd> + <dt>{{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}</dt> + <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array. Véase también {{jsxref("Array.prototype.values()")}}.</dd> + <dt>{{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}</dt> + <dd>Devuelve una cadena localizada que representa el array y sus elementos. Véase también {{jsxref("Array.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}</dt> + <dd>Retorna una cadena representando el array sus elementos. Véase también {{jsxref("Array.prototype.toString()")}}.</dd> + <dt>{{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}</dt> + <dd>Retorna un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">// Desde una longitud +var uint8 = new Uint8Array(2); +uint8[0] = 42; +console.log(uint8[0]); // 42 +console.log(uint8.length); // 2 +console.log(uint8.BYTES_PER_ELEMENT); // 1 + +// Desde un array +var arr = new Uint8Array([21,31]); +console.log(arr[1]); // 31 + +// Desde otro TypedArray +var x = new Uint8Array([21, 31]); +var y = new Uint8Array(x); +console.log(y[0]); // 21 + +// Desde un ArrayBuffer +var buffer = new ArrayBuffer(8); +var z = new Uint8Array(buffer, 1, 4); +</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('Typed Array')}}</td> + <td>{{Spec2('Typed Array')}}</td> + <td>Sustituida por ECMAScript 6.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#table-49', 'TypedArray constructors')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial en un ECMA standard. Se especificó que <code>new</code> es requirerido.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>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>7.0</td> + <td>{{ CompatGeckoDesktop(2) }}</td> + <td>10</td> + <td>11.6</td> + <td>5.1</td> + </tr> + <tr> + <td><code>new</code> es requerido</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop(44) }}</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>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>4.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(2) }}</td> + <td>10</td> + <td>11.6</td> + <td>4.2</td> + </tr> + <tr> + <td><code>new</code> es requerido</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile(44) }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_de_compatibilidad">Notas de compatibilidad</h2> + +<p>A partir de ECMAScript 2015 (ES6), los constructors de <code>Uint8Array</code> requiren ser construidos con un operador {{jsxref("Operators/new", "new")}}. Llamar a un contructor de <code>Uint8Array</code> como una función sin <code>new</code>, lanzará un {{jsxref("TypeError")}} de ahora en adelante.</p> + +<pre class="brush: js example-bad">var dv = Uint8Array([1, 2, 3]); +// TypeError: calling a builtin Uint8Array constructor +// without new is forbidden</pre> + +<pre class="brush: js example-good">var dv = new Uint8Array([1, 2, 3]);</pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/undefined/index.html b/files/es/web/javascript/reference/global_objects/undefined/index.html new file mode 100644 index 0000000000..1aa7db29b8 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/undefined/index.html @@ -0,0 +1,183 @@ +--- +title: undefined +slug: Web/JavaScript/Referencia/Objetos_globales/undefined +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/undefined +--- +<div>{{jsSidebar("Objects")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>La propiedad global <strong>undefined</strong> representa el valor primitivo <code>{{Glossary("Undefined", "undefined")}}</code>. Es uno de los {{Glossary("Primitive", "valores primitivos")}} de JavaScript.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>undefined</code></pre> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p><code>undefined</code> es una propiedad del <em>objeto global</em>, es decir, una variable de alcance global. El valor inicial de <code>undefined</code> es el valor primitivo <code>{{Glossary("Undefined", "undefined")}}</code>.<span class="comment">this needs clarification, but that would require explaining primitive values</span></p> + +<p>En navegadores modernos (JavaScript 1.8.5 / Firefox 4+), <code>undefined </code>es una propiedad <em>no-configurable</em>, <em>no-grabable</em> según la especificación ECMAScript 5. Aún cuando este no sea el caso, evite sobreescribirlo.</p> + +<p>Una variable a la que no se le ha asignado valor, o no se ha declarado en absoluto (no se declara, no existe) son de tipo <code>undefined</code>. Un método o sentencia también devuelve <code>undefined</code> si la variable que se está evaluando no tiene asignado un valor. Una función devuelve <code>undefined</code> si no se ha {{jsxref("Sentencias/return", "devuelto")}} un valor.</p> + +<div class="blockIndicator note"> +<p>Ten en cuenta que si no se ha declarado una variable ni explícita ni implícitamente, no puedes compararla con <strong>undefined </strong>ya que obtendrías un <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a>, </strong> pero puedes comparar su tipo con la cadena (<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/String">String</a>) "undefined". En el ejemplo más abajo se podrá ver cómo conseguir esto usando el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/typeof">typeof</a>.</p> +</div> + +<div class="warning"> +<p>Aunque es posible usarlo como un {{Glossary("Identifier", "identificador")}} (nombre de variable) en cualquier otro ámbito que no sea el ámbito global (porque <code>undefined </code>no es una {{jsxref("Reserved_Words", "palabra reservada")}}), hacerlo es una mala idea que provocará que tú código sea difícil de mantener y depurar.</p> + +<pre class="brush: js">//NO HAGAS ESTO + +// registra "foo string" +(function(){ var undefined = 'foo'; console.log(undefined, typeof undefined); })() + +// registra "foo string" +(function(undefined){ console.log(undefined, typeof undefined); })('foo');</pre> +</div> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Ejemplos</h2> + +<h3 id="Igualdad_estricta_y_undefined">Igualdad estricta y <code>undefined</code></h3> + +<p>Puedes usar <code>undefined</code> y los operadores de igualdad y desigualdad estricta para determinar si una variable tiene un valor asignado. En el siguiente ejemplo la variable <code>x</code> no está inicializada, y la sentencia <code>if</code> se evalúa como verdadera.</p> + +<pre class="brush: js">var x; +if (x === undefined) { + // se ejecutan estas instrucciones +} +else { + // estas instrucciones no se ejecutan +}</pre> + +<div class="note"> +<p>Nota: Aquí se debe usar el operador de igualdad estricta en lugar del operador de igualdad estándar, ya que <code>x == undefined</code> también verifica si <code>x</code> es <code>null</code>, mientras que el de igualdad estricta no. <code>null</code> no es equivalente a <code>undefined</code>. Vea {{jsxref("Operadores/Comparison_Operators", "operadores de comparación")}} para más detalles.</p> +</div> + +<h3 id="Typeof_operador_y_undefined">Typeof operador y <code>undefined</code></h3> + +<p>Alternativamente se puede usar {{jsxref("Operadores/typeof","typeof")}}. Recuerda que este siempre devolverá una cadena de texto con el tipo:</p> + +<pre class="brush: js">var x; +if (typeof x === 'undefined') { + // se ejecutan estas instrucciones +} +</pre> + +<p>Una razón para usar {{jsxref("Operadores/typeof","typeof")}} es que no devuelve un error si la variable no fue declarada.</p> + +<pre class="brush: js">// x no fue declarada antes +if (typeof x === 'undefined') { // devuelve true + //se ejecutan estas instrucciones +} + +if (x === undefined) { // lanza un ReferenceError + +} +</pre> + +<p>Sin embargo, este tipo de técnica debe evitarse. JavaScript es un lenguaje de ámbito estático, por lo que determinar si una variable se encuentra declarada puede ser definido al ver si está declarada en un contexto de inclusión. La única excepción es el ámbito global, pero el ámbito global está vinculado al objeto global, por lo que comprobar la existencia de una variable en el contexto global puede realizarse comprobando la existencia de una propiedad del <em>objeto global</em> (utilizando el operador {{jsxref("Operators/in", "in")}}, por ejemplo).</p> + +<h3 id="Operador_void_y_undefined">Operador void y <code>undefined</code></h3> + +<p>El operador {{jsxref("Operadores/void", "void")}} es una tercer alternativa.</p> + +<pre class="brush: js">var x; +if (x === void 0) { + // se ejecutan estas instrucciones +} + +// y no fue declarada antes +if (y === void 0) { + // lanza un ReferenceError (a diferencia de `typeof`) +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-4.3.9', 'undefined')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.3.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-undefined', 'undefined')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-undefined', 'undefined')}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>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> diff --git a/files/es/web/javascript/reference/global_objects/unescape/index.html b/files/es/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..48418ef48a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,123 @@ +--- +title: unescape() +slug: Web/JavaScript/Referencia/Objetos_globales/unescape +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>La función deprecada <code><strong>unescape()</strong></code> calcula un nuevo string en el cual secuencia de valores hexadecimales son reemplazados con el caracter que representa. La secuencia de calculo deber{ia ser introducida por una función como {{jsxref("escape")}}. Por que <code>unescape</code> está deprecada, usar {{jsxref("decodeURI")}} or {{jsxref("decodeURIComponent")}}.</p> + +<div class="note"><strong>Note:</strong> Do not use <code>unescape</code> to decode URIs, use <code>decodeURI</code> instead.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>unescape(str)</code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>str</code></dt> + <dd>A string to be decoded.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>unescape</code> function is a property of the <em>global object</em>.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">unescape("abc123"); // "abc123" +unescape("%E4%F6%FC"); // "äöü" +unescape("%u0107"); // "ć" +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-15.1.2.5', 'unescape')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-B.2.2', 'unescape')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined in the (informative) Compatibility Annex B</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-unescape-string', 'unescape')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-unescape-string', 'unescape')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in the (normative) Annex B for Additional ECMAScript Features for Web Browsers</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also">See also</h2> + +<ul> + <li>{{jsxref("decodeURI")}}</li> + <li>{{jsxref("decodeURIComponent")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/urierror/index.html b/files/es/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..3ba028a2ab --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,136 @@ +--- +title: URIError +slug: Web/JavaScript/Referencia/Objetos_globales/URIError +tags: + - Error + - JavaScript + - Reference + - URIError +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +--- +<div>{{JSRef}}</div> + +<p>El objeto <code><strong>URIError</strong></code> representa un error cuando una función de uso URI global se usó de manera incorrecta.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><code>new URIError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>message</code></dt> + <dd>Opcional. Descripción del error legible para una persona.</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Opcional. El nombre del archivo que contien el código causante de la excepción.</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Opcional. El número de línea del código que ha causado la excepción.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Se envía <code>URIError</code> cuando las fuciones de uso del URI global pasan pro un URI con formato incorrecto.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{jsxref("URIError.prototype")}}</dt> + <dd>Permite agregar propiedades a un objeto URIError</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p>El <code>URIError</code> global no contiene métodos propios, sin embargo, sí hereda algunos métodos a través de la cadena de prototipos.</p> + +<h2 id="URIError_instancias"><code>URIError</code> instancias</h2> + +<h3 id="Propiedades">Propiedades</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Properties')}}</div> + +<h3 id="Métodos">Métodos</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError/prototype', 'Methods')}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Recoger_un_URIError">Recoger un <code>URIError</code></h3> + +<pre class="brush: js">try { + decodeURIComponent('%'); +} catch (e) { + console.log(e instanceof URIError); // true + console.log(e.message); // "malformed URI sequence" + console.log(e.name); // "URIError" + console.log(e.fileName); // "Scratchpad/1" + console.log(e.lineNumber); // 2 + console.log(e.columnNumber); // 2 + console.log(e.stack); // "@Scratchpad/2:2:3\n" +} +</pre> + +<h3 id="Creando_un_URIError">Creando un <code>URIError</code></h3> + +<pre class="brush: js">try { + throw new URIError('Hello', 'someFile.js', 10); +} catch (e) { + console.log(e instanceof URIError); // true + console.log(e.message); // "Hello" + console.log(e.name); // "URIError" + console.log(e.fileName); // "someFile.js" + console.log(e.lineNumber); // 10 + console.log(e.columnNumber); // 0 + console.log(e.stack); // "@Scratchpad/2:2:9\n" +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.6.6', 'URIError')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.6', 'URIError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-urierror', 'URIError')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de los datos estructurados. Si desea contribuir con los datos, visite <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenes una solicitud de extracción.</div> + +<p>{{Compat("javascript.builtins.URIError")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("URIError.prototype")}}</li> + <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/clear/index.html b/files/es/web/javascript/reference/global_objects/weakmap/clear/index.html new file mode 100644 index 0000000000..b5c66c7714 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/clear/index.html @@ -0,0 +1,52 @@ +--- +title: WeakMap.prototype.clear() +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear +tags: + - JavaScript + - Obsolete + - Protocols + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/clear +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>El método <code><strong>clear()</strong></code> es utilizado para suprimir todos los elementos del objeto <code>WeakMap</code>, sin embargo, ya no es parte de ECMAScript, ni de sus implementaciones.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>wm</em>.clear();</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilización_del_método_clear">Utilización del método <code>clear</code> </h3> + +<pre class="brush: js;highlight:[10] example-bad">var wm = new WeakMap(); +var obj = {}; + +wm.set(obj, 'foo'); +wm.set(window, 'bar'); + +wm.has(obj); // true +wm.has(window); // true + +wm.clear(); + +wm.has(obj) // false +wm.has(window) // false +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación actual o borrador. Este método fue parte de ECMAScript 6 como un bosquejo hasta la revisión 28 (versión de Octubre 14, 2014), sin embargo ha sido eliminado en versiones posteriores. No es parte de la última versión estándar.</p> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.WeakMap.clear")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/delete/index.html b/files/es/web/javascript/reference/global_objects/weakmap/delete/index.html new file mode 100644 index 0000000000..7f4933eb0b --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/delete/index.html @@ -0,0 +1,124 @@ +--- +title: WeakMap.prototype.delete() +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete +tags: + - ECMAScript6 + - JavaScript + - Prototype + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/delete +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>delete()</strong></code> elimina un elemento específico del objeto <code>WeakMap</code> .</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>wm</em>.delete(key);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>identificador (key)</dt> + <dd>Requerido. El identificador del elemento a eliminar en el objeto <code>WeakMap</code>.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p><code>true</code> si el elemento del objeto <code>WeakMap</code> ha sido eliminado correctamente. Y <code>false</code> si la llave a eliminar no fue encontrada en el objeto <code>WeakMap</code> o bien, si la llave no es un objeto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilización_del_método_delete">Utilización del método <code>delete</code> </h3> + +<pre class="brush: js;highlight:[4]">var wm = new WeakMap(); +wm.set(window, "foo"); + +wm.delete(window); // Devuelve true. Eliminado correctamente. + +wm.has(window); // Devuelve false. El elemento window ya no es parte de WeakMap. +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}}</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>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>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>23</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>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>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_especificas_de_Firefox">Notas especificas de Firefox</h2> + +<ul> + <li>Anterior a SpiderMonkey 38 {{geckoRelease(38)}}, este método lanzaba {{jsxref("TypeError")}} cuando el parámetro <code>key</code> no era un objeto. Esto ha sido corregido en la versión 38 y posteriormente devuelve <code>false</code> como parte del estándar de ES6 ({{bug(1127827)}}).</li> +</ul> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/get/index.html b/files/es/web/javascript/reference/global_objects/weakmap/get/index.html new file mode 100644 index 0000000000..e60e34f8f1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/get/index.html @@ -0,0 +1,80 @@ +--- +title: WeakMap.prototype.get() +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/get +tags: + - ECMAScript6 + - JavaScript + - Method + - Prototype + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/get +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>get()</strong></code> devuelve un elemento específico del objeto <code>WeakMap</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-get.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>wm</em>.get(key);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>key</dt> + <dd>Requerido. Es la llave del elemento a retornar desde el objeto WeakMap.</dd> +</dl> + +<h3 id="Valores_devueltos">Valores devueltos</h3> + +<p>El elemento asociado con la llave específica en el objeto WeakMap. Si la llave no está presente, devolverá {{jsxref("undefined")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_método_get">Usando el método <code>get</code> </h3> + +<pre class="brush: js">var wm = new WeakMap(); +wm.set(window, 'foo'); + +wm.get(window); // Devuelve "foo". +wm.get('baz'); // Devuelve undefined. +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.WeakMap.get")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakMap.set()")}}</li> + <li>{{jsxref("WeakMap.has()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/has/index.html b/files/es/web/javascript/reference/global_objects/weakmap/has/index.html new file mode 100644 index 0000000000..dd978ede16 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/has/index.html @@ -0,0 +1,83 @@ +--- +title: WeakMap.prototype.has() +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/has +tags: + - ECMAScript6 + - JavaScript + - Method + - Protocols + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/has +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>has()</strong></code> devuelve un boleano indicando ya sea, si el elemento con la llave específica existe o no en el objeto <code>WeakMap</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-has.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>wm</em>.has(key);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>identificador (key)</dt> + <dd>Requerido. La llave del elemento a comprobar en el objeto <code>WeakMap</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<dl> + <dt>Boolean</dt> + <dd>Devuelve <code>true</code> si el elemento con la llave específica existe en el objeto <code>WeakMap</code>; de no encontrarse, devolverá <code>false</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilización_del_método_has">Utilización del método <code>has</code> </h3> + +<pre class="brush: js">var wm = new WeakMap(); +wm.set(window, 'foo'); + +wm.has(window); // Devuelve true +wm.has('baz'); // Devuelve false +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.WeakMap.has")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakMap.prototype.set()")}}</li> + <li>{{jsxref("WeakMap.prototype.get()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/index.html b/files/es/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..0fed17e5ca --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,278 @@ +--- +title: WeakMap +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap +tags: + - ECMAScript 2015 + - JavaScript + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>WeakMap</code></strong> es una colección de pares clave/valor en la que las claves son objetos y los valores son valores arbitrarios.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><code>new WeakMap([iterable]) +</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>iterable</code></dt> + <dd>Iterable es un Array u otro objeto iterable cuyos elementos son pares clave-valor (Arrays de dos elementos). Cada par clave-valor será añadido al nuevo WeakMap. null es tratado como undefined.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Las claves de los WeakMaps solamente pueden ser del tipo<code> Object</code>. Los {{Glossary("Primitive", "Primitive data types")}} como claves no están permitidos (ej. un {{jsxref("Symbol")}} no pueden ser una clave de <code>WeakMap</code>).</p> + +<h3 id="¿Por_qué_WeakMap">¿Por qué <em>Weak</em>Map?</h3> + +<p>El programador de JavaScript experimentado se habrá dado cuenta que esta API podría ser implementada en JavaScript con dos arrays (uno para las claves, otro para los valores) compartidos por los cuatro métodos de la API. Dicha implementación habría tenido dos inconvenientes principales: El primero es una búsqueda O(n) (siendo n el número de claves en el mapa). El segundo es un problema de pérdida de memoria. Con mapas escritos manualmente, el array de las claves mantendría referencias a la objetos clave, impidiéndoles ser recolectados. En los WeakMap nativos, las referencias a los objetos clave son mantenidas "débilmente", lo que quiere decir que no impiden la recolección de basura en caso de que no haya otras referencias al objeto.</p> + +<p>Dado que las referencias son débiles, <code>las claves de WeakMap</code> no son enumerables (ej: no existe un método que te devuelva la lista de las claves). Si existiera, la lista dependería de la recolección de basura, introduciendo indeterminismo. Si quieres una lista de las claves, se debe usar un {{jsxref("Map")}} o mantenerla tu mismo.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>WeakMap.length</code></dt> + <dd>El valor de la propiedad <code>length</code> es 0.</dd> + <dt>{{jsxref("WeakMap.prototype")}}</dt> + <dd>Representa el prototipo para el nuevo constructor<code> WeakMap</code>. Permite añadir propiedades a todos los objetos <code>WeakMap</code>.</dd> +</dl> + +<h2 id="Instancias_de_WeakMap"><code>Instancias de WeakMap</code></h2> + +<p>Todas las instancias de <code>WeakMap</code> heredan de {{jsxref("WeakMap.prototype")}}.</p> + +<h3 id="Propiedades_2">Propiedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Properties')}}</p> + +<h3 id="Métodos">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype','Methods')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_WeakMap">Usando <code>WeakMap</code></h3> + +<pre class="brush: js notranslate">var wm1 = new WeakMap(), + wm2 = new WeakMap(), + wm3 = new WeakMap(); +var o1 = {}, + o2 = function(){}, + o3 = window; + +wm1.set(o1, 37); +wm1.set(o2, "azerty"); +wm2.set(o1, o2); // un valor puede ser cualquier cosa, incluidos objetos o funciones +wm2.set(o3, undefined); +wm2.set(wm1, wm2); // claves y valores pueden ser objetos cualesquiera. !Incluso WeakMaps! + +wm1.get(o2); // "azerty" +wm2.get(o2); // undefined, porque no hay valor para o2 en wm2 +wm2.get(o3); // undefined, porque es es el valor del conjunto +wm1.has(o2); // true +wm2.has(o2); // false +wm2.has(o3); // true (incluso si el valor es 'undefined') + +wm3.set(o1, 37); +wm3.get(o1); // 37 + +wm1.has(o1); // true +wm1.delete(o1); +wm1.has(o1); // false + +</pre> + +<h3 id="Implementando_una_clase_tipo-WeakMap_con_un_método_.clear">Implementando una clase tipo-<code>WeakMap</code> con un método .clear()</h3> + +<p>Con propósito expositivo, el siguiente ejemplo usa el nuevo costruct class de ECMAScript 2015, que actualmente no ha sido implementado de forma amplia.</p> + +<pre class="brush: js notranslate">class ClearableWeakMap { + constructor(init) { + this._wm = new WeakMap(init) + } + clear() { + this._wm = new WeakMap() + } + delete(k) { + return this._wm.delete(k) + } + get(k) { + return this._wm.get(k) + } + has(k) { + return this._wm.has(k) + } + set(k, v) { + this._wm.set(k, v) + return this + } +} +</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>{{SpecName('ES2015', '#sec-weakmap-objects', 'WeakMap')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</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 (SpiderMonkey)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>{{ CompatOpera(23) }}</td> + <td>7.1</td> + </tr> + <tr> + <td><code>new WeakMap(iterable)</code></td> + <td>38</td> + <td>{{CompatGeckoDesktop("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatOpera(25) }}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>clear()</code></td> + <td>36</td> + <td>{{CompatGeckoDesktop("20.0")}}</td> + <td>11</td> + <td>{{ CompatOpera(23) }}</td> + <td>7.1</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakMap(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WeakMap()</code> without <code>new</code> throws</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>11</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 (SpiderMonkey)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>35</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + <tr> + <td><code>new WeakMap(iterable)</code></td> + <td>38</td> + <td>{{CompatGeckoMobile("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>clear()</code></td> + <td>35</td> + <td>{{CompatGeckoMobile("20.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakMap(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Monkey-patched <code>set()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>WeakMap()</code> without <code>new</code> throws</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td></td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"></h2> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=547941">WeakMap bug en Mozilla</a></li> + <li><a href="http://fitzgeraldnick.com/weblog/53/">Ocultando los detalles de implementación con los WeakMaps de ECMAScript </a>2015</li> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakSet")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakmap/set/index.html b/files/es/web/javascript/reference/global_objects/weakmap/set/index.html new file mode 100644 index 0000000000..0dd654e6ef --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakmap/set/index.html @@ -0,0 +1,91 @@ +--- +title: WeakMap.prototype.set() +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/set +tags: + - ECMAScript6 + - JavaScript + - Method + - Protocols + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap/set +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>set()</strong></code> añade un nuevo elemento con su <code>key</code> y <code>value</code> específicos al objeto <code>WeakMap</code>.</p> + +<div>{{EmbedInteractiveExample("pages/js/weakmap-prototype-set.html")}}</div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><em>wm</em>.set(key, value);</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt>indentificador (key)</dt> + <dd>Requerido. El identificador (objeto) del elemento a añadir al objeto <code>WeakMap</code>.</dd> + <dt>valor (value)</dt> + <dd>Requerido. El valor del elemento a añadir al objeto <code>WeakMap</code>.</dd> +</dl> + +<h3 id="Valor_devuelto">Valor devuelto</h3> + +<p>El objeto <code>WeakMap</code>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilización_del_método_set">Utilización del método <code>set</code> </h3> + +<pre class="brush: js">var wm = new WeakMap(); +var obj = {}; + +// Agregando nuevos elementos a WeakMap +wm.set(obj, 'foo').set(window, 'bar'); // encadenamiento +// Actualiza el un elemento en el objeto WeakMap +wm.set(obj, 'baz'); + +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype.set', 'WeakMap.prototype.set')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.builtins.WeakMap.set")}}</p> + +<h2 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h2> + +<ul> + <li>Antes de Firefox 33 {{geckoRelease("33")}}, <code>WeakMap.prototype.set</code> devolvía <code>undefined</code> y no permitía el encadenamiento. Esto ha sido corregido ({{bug(1031632)}}). Este comportamiento puede encontrarse también en Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">fallo</a>).</li> +</ul> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("WeakMap")}}</li> + <li>{{jsxref("WeakMap.prototype.get()")}}</li> + <li>{{jsxref("WeakMap.prototype.has()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/weakset/index.html b/files/es/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..ab2af60090 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,227 @@ +--- +title: WeakSet +slug: Web/JavaScript/Referencia/Objetos_globales/WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>WeakSet</code></strong> te deja almacenar y mantener objectos debilmente en una colección.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"> new WeakSet([iterable]);</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt>iterable</dt> + <dd>Si un <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">objeto interable </a>es pasado, todos sus elementos se agregarán al nuevo <code>WeakSet</code>. null es tratado como undefined.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p> </p> + +<p>Los objetos <code>WeakSet</code> son colecciones de objetos. Un objecto en <code>WeakSet</code> solo puede ser agregado una vez; Esto quiere decir que es unico en la coleccion <code>WeakSet.</code></p> + +<p>Las principales diferencias con el objeto {{jsxref("Set")}} son:</p> + +<ul> + <li>A diferencia de <code>Sets</code>, <code>WeakSets</code> son <strong>solamente colecciones de objetos </strong>y no contienen valores arbitrarios de cualquier otro tipo.</li> + <li>El <code>WeakSet</code> es<em> débil</em>: Las referencias a objetos en la colección se mantienen débilmente.. Si ya no hay otra referencia a un objeto almacenado en el <code>WeakSet</code>, ellos pueden ser removidos por el recolector de basura. Esto también significa que no hay ninguna lista de objetos almacenados en la colección. Los <code>WeakSets</code> no son enumerables.</li> +</ul> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>WeakSet.length</code></dt> + <dd>El valor de la propiedad <code>length</code> es 0.</dd> + <dt>{{jsxref("WeakSet.prototype")}}</dt> + <dd>Representa el prototipo para el constructor <code>Set</code> . Permite la adición de propiedades a todos los objetos WeakSet</dd> +</dl> + +<h2 id="WeakSet_instances"><code>WeakSet</code> instances</h2> + +<p>Todas las instancias a <code>WeakSet</code> son heredadas de {{jsxref("WeakSet.prototype")}}.</p> + +<h3 id="Propiedades">Propiedades</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Properties')}}</p> + +<h3 id="Métodos">Métodos</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/WeakSet/prototype','Methods')}}</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_el_objetoWeakSet">Usando el objeto<code>WeakSet</code> </h3> + +<pre class="brush: js">var ws = new WeakSet(); +var obj = {}; +var foo = {}; + +ws.add(window); +ws.add(obj); + +ws.has(window); // true +ws.has(foo); // false, foo no fue agregado al conjunto + +ws.delete(window); // elimina window del conjunto +ws.has(window); // false, window fue eliminado +</pre> + +<h2 id="Especificaciónes">Especificaciónes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakset-objects', 'WeakSet')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakset-objects', 'WeakSet')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(36)}}</td> + <td>12</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatOpera(23) }}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td><code>new WeakSet(iterable)</code></td> + <td>38</td> + <td>12</td> + <td>{{ CompatGeckoDesktop(34) }}</td> + <td>{{CompatNo}}</td> + <td>25</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakSet(null)</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatVersionUnknown}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop("37")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + <tr> + <td>Obsolete clear() method removed</td> + <td>{{CompatChrome(43)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(46)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(30)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</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>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td><code>new WeakMap(iterable)</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(34) }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9</td> + </tr> + <tr> + <td>Constructor argument: <code>new WeakSet(null)</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td>Monkey-patched <code>add()</code> in Constructor</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + <tr> + <td>Obsolete clear() method removed</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Tambien_ver">Tambien ver</h2> + +<ul> + <li>{{jsxref("Map")}}</li> + <li>{{jsxref("Set")}}</li> + <li>{{jsxref("WeakMap")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/webassembly/index.html b/files/es/web/javascript/reference/global_objects/webassembly/index.html new file mode 100644 index 0000000000..80542d763d --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/webassembly/index.html @@ -0,0 +1,120 @@ +--- +title: WebAssembly +slug: Web/JavaScript/Referencia/Objetos_globales/WebAssembly +tags: + - API + - Experimental + - JavaScript + - Objeto + - Referencia + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly +--- +<div>{{JSRef}}</div> + +<p>El objeto <strong><code>WebAssembly</code></strong> de JavaScript actua como un namespace para todas las funcionalidades realcionados con <a href="/en-US/docs/WebAssembly">WebAssembly</a>.</p> + +<p>A diferencia de otros objetos globales, <code>WebAssembly</code> no tiene un constructor (no tiene una función para crear el objeto). Puedes ser comparado con el objeto {{jsxref("Math")}}, que también es un namespace, para funciones y constantes matemáticas, o también con {{jsxref("Intl")}} que es un namespace para internacionalización y otras funciones de idioma.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Los usos primarios para el objeto <code>WebAssembly</code> son:</p> + +<ul> + <li>Cargar código WebAssembly, utilizando la función {{jsxref("WebAssembly.instantiate()")}}.</li> + <li>Crear nuevas instancias de memoria y de tablas mediante los constructores {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}.</li> + <li>Facilitar el manejo de errores que ocurren dentro de un WebAssembly mediante los constructores:{{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}.</li> +</ul> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("WebAssembly.instantiate()")}}</dt> + <dd>El API primaria para compilar e instanciar código WebAssembly, ambos regresan un <code>Module</code> y el primero <code>Instance</code>.</dd> + <dt>{{jsxref("WebAssembly.instantiateStreaming()")}}</dt> + <dd>Compila e instancia un módulo WebAssembly directamente desde un flujo de origen subyacente, ambos regresan un <code>Module</code> y el primero <code>Instance</code>.</dd> + <dt>{{jsxref("WebAssembly.compile()")}}</dt> + <dd>Compila un {{jsxref("WebAssembly.Module")}} desde el código binario de un WebAssembly, manteniendo la creación de la instancia como un objeto separado.</dd> + <dt>{{jsxref("WebAssembly.compileStreaming()")}}</dt> + <dd>compila un {{jsxref("WebAssembly.Module")}} directamente desde un flujo de origen subyacente, manteniendo la creación de la instancia como un objeto sepraado.</dd> + <dt>{{jsxref("WebAssembly.validate()")}}</dt> + <dd>Valida un arreglo con tipo de código binario de un WebAssembly, regresando si los bytes son código válido WebAssembly (<code>true</code>) o de lo contrario (<code>false</code>).</dd> +</dl> + +<h2 id="Constructores">Constructores</h2> + +<dl> + <dt>{{jsxref("WebAssembly.Module()")}}</dt> + <dd>Crea un nuevo objeto WebAssembly <code>Module</code>.</dd> + <dt>{{jsxref("WebAssembly.Instance()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>Instance</code>.</dd> + <dt>{{jsxref("WebAssembly.Memory()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>Memory</code>.</dd> + <dt>{{jsxref("WebAssembly.Table()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>Table</code>.</dd> + <dt>{{jsxref("WebAssembly.CompileError()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>CompileError</code>.</dd> + <dt>{{jsxref("WebAssembly.LinkError()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>LinkError</code>.</dd> + <dt>{{jsxref("WebAssembly.RuntimeError()")}}</dt> + <dd>Crear un nuevo objeto WebAssembly <code>RuntimeError</code>.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Después de obtener algún bytecode de WebAssembly usando la sentencia fetch, nosotros compilamos e instanciamos el módulo usando la función {{jsxref("WebAssembly.instantiate()")}} , importando una función de JavaScript en el WebAssembly Module en el proceso. Esta premisa resuelve a un objeto (<code>result</code>) que contenga un objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Module">Module</a></code> compilado y un objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance">Instance</a></code> . Entonces tenemos una llamada a <a href="/en-US/docs/WebAssembly/Exported_functions">Exported WebAssembly function</a> que es exportada por <code>Instance</code>.</p> + +<pre class="brush: js">var importObject = { + imports: { + imported_func: function(arg) { + console.log(arg); + } + } +}; + +fetch('simple.wasm').then(response => + response.arrayBuffer() +).then(bytes => + WebAssembly.instantiate(bytes, importObject) +).then(result => + result.instance.exports.exported_func() +);</pre> + +<div class="note"> +<p><strong>Nota</strong>: Ver <a href="https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/index.html">index.html</a> en GitHub (<a href="https://mdn.github.io/webassembly-examples/js-api-examples/">view it live also</a>) para un ejemplo que hace uso de la función <code><a href="https://github.com/mdn/webassembly-examples/blob/master/wasm-utils.js#L1">fetchAndInstantiate()</a></code>.</p> +</div> + +<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>{{SpecName('WebAssembly JS', '#the-webassembly-object', 'WebAssembly')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Definición inicial del borrador.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad de Navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página es generado desde datos estructurados. Si deseas contribuir a esta información, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía una solicitud.</div> + +<p>{{Compat("javascript.builtins.WebAssembly")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/WebAssembly">Vista General de WebAssembly</a></li> + <li><a href="/en-US/docs/WebAssembly/Concepts">Conceptos de WebAssembly </a></li> + <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Uso de la API de JavaScript de WebAssembly </a></li> +</ul> diff --git a/files/es/web/javascript/reference/index.html b/files/es/web/javascript/reference/index.html new file mode 100644 index 0000000000..29d75a4161 --- /dev/null +++ b/files/es/web/javascript/reference/index.html @@ -0,0 +1,31 @@ +--- +title: Referencia de JavaScript +slug: Web/JavaScript/Referencia +tags: + - JavaScript +translation_of: Web/JavaScript/Reference +--- +<p>{{JsSidebar}}</p> + +<h2 id="Objetos_globales" name="Objetos_globales"><a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales">Objetos globales</a></h2> + +<div>{{page('/es/docs/Web/JavaScript/Referencia/Objetos_globales', 'Objetos_est.C3.A1ndar_(por_categor.C3.ADa)')}}</div> + +<h2 id="Sentencias" name="Sentencias"><a href="/es/docs/Web/JavaScript/Referencia/Sentencias">Sentencias</a></h2> + +<p>{{page('/es/docs/Web/JavaScript/Referencia/Sentencias', 'Statements_and_declarations_by_category')}}</p> + +<h2 id="Operadores" name="Operadores"><a href="/es/docs/Web/JavaScript/Referencia/Operadores">Expresiónes y Operadores</a></h2> + +<p>{{page('/es/docs/Web/JavaScript/Referencia/Operadores', 'Expressions_and_operators_by_category')}}</p> + +<h2 id="Gramática_léxica"><a href="/es/docs/Web/JavaScript/Reference/Gramatica_lexica">Gramática léxica</a></h2> + +<ul> + <li><a href="/es/Referencia_de_JavaScript_1.5/Comentarios/comentario" title="es/Referencia_de_JavaScript_1.5/Comentarios/comentario">comentarios en el Código</a> (<code>//</code> and <code>/* */</code>)</li> + <li><a href="/es/Referencia_de_JavaScript_1.5/Palabras_Reservadas" title="es/Referencia_de_JavaScript_1.5/Palabras_Reservadas">Palabras reservadas</a></li> +</ul> + +<h2 id="Ap.C3.A9ndice_B_-_Caracter.C3.ADsticas_Desprobadas" name="Ap.C3.A9ndice_B_-_Caracter.C3.ADsticas_Desprobadas"><a href="/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas" title="es/Referencia_de_JavaScript_1.5/Características_Desaprobadas">Apéndice - Características Desaprobadas</a></h2> + +<p><span class="comment">Original Document At: <a class="external" href="http://devedge-temp.mozilla.org/library/manuals/2000/javascript/1.5/reference/" rel="freelink">http://devedge-temp.mozilla.org/libr...1.5/reference/</a></span></p> diff --git a/files/es/web/javascript/reference/iteration_protocols/index.html b/files/es/web/javascript/reference/iteration_protocols/index.html new file mode 100644 index 0000000000..7d8d31f2cd --- /dev/null +++ b/files/es/web/javascript/reference/iteration_protocols/index.html @@ -0,0 +1,320 @@ +--- +title: Protocolos de Iteración +slug: Web/JavaScript/Referencia/Iteration_protocols +tags: + - ECMAScript6 + - Experimental + - Intermedio + - Iterable + - Iterador + - JavaScript +translation_of: Web/JavaScript/Reference/Iteration_protocols +--- +<div>{{jsSidebar("More")}}</div> + +<div>Las nuevas características de ECMAScript 6 no solo están asociadas a cambios y adiciones de sintaxis o a nuevos objetos nativos, sino también a protocolos. Dichos protocolos puede ser implementados por cualquier objeto en relación a algunas convenciones.</div> + +<div> </div> + +<div>Existen dos protocolos: El<a href="#The_.22iterable.22_protocol"> protocolo iterable</a> y el<a href="#The_.22iterator.22_protocol"> protocolo iterador</a>.</div> + +<div> </div> + +<h2 id="El_protocolo_iterable">El protocolo iterable</h2> + +<p>El protocolo <strong>iterable</strong> le permite a los objetos en JavaScript definir o personalizar su comportamiento de iteración, como por ejemplo qué valores son iterados dentro de una sentencia {{jsxref("Statements/for...of", "for..of")}}. Algunos objetos nativos, como {{jsxref("Array")}} o {{jsxref("Map")}}, tienen un comportamiento de iteración por defecto, mientras otros objetos (como por ejemplo {{jsxref("Object")}}) no.</p> + +<p>Para ser iterable, un objeto debe implementar el método <strong>@@iterator</strong>, lo cual significa que el objeto (o uno de los objetos dentro de su <a href="/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">cadena de prototipos</a>) debe tener una propiedad con un identificador {{jsxref("Symbol")}}<code style="font-style: normal;">.iterator</code>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Propiedad</th> + <th scope="col">Valor</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[Symbol.iterator]</code></td> + <td>Una función sin argumentos que retorna un objeto, de acuerdo al <a href="#The_.22iterator.22_protocol">protocolo iterador</a>.</td> + </tr> + </tbody> +</table> + +<p>Siempre que un objeto necesite ser iterado (como al comienzo de un <code>for..of</code> loop), su método <code>@@iterator</code> es llamado sin argumentos, y el <strong>iterador</strong> retornado es usado para obtener los valores a ser iterados.</p> + +<h2 id="El_protocolo_iterador">El protocolo iterador</h2> + +<p>El protocolo <strong>iterador</strong> define una forma estándar que permite producir una secuencia de valores (sean estos finitos o infinitos).</p> + +<p>Un objeto es un iterador cuando este implementa un método <code><strong>next()</strong></code> con la siguiente semántica:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Propiedad</th> + <th scope="col">Valor</th> + </tr> + <tr> + <td><code>next</code></td> + <td> + <p>Una función sin argumentos que retorna un objeto con dos propiedades:</p> + + <ul> + <li><code>done</code> (boleano) + + <ul> + <li>Su valor es <code>true</code> si el iterador está más allá del final de la secuencia iterada. En este caso <code>value</code> opcionalmente especifica el <em>valor retornado</em> por el iterador. Los valores retornados son explicados <a href="http://www.2ality.com/2013/06/iterators-generators.html#generators-as-threads">aquí</a>.</li> + <li>Su valor es <code>false</code> si el iterador pudo producir el siguiente valor en la secuencia. Esto es equivalente a no especificar la propiedad <code>done</code> en su totalidad.</li> + </ul> + </li> + <li><code>value</code> - cualquier valor de JavaScript retornado por el iterador. Puede ser omitido cuando el valor de <code>done</code> es <code>true</code>.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>Algunos iteradores son a su vez iterables:</p> + +<pre class="brush: js">var someArray = [1, 5, 7]; +var someArrayEntries = someArray.entries(); + +someArrayEntries.toString(); // "[object Array Iterator]" +someArrayEntries === someArrayEntries[Symbol.iterator](); // true +</pre> + +<h2 id="Ejemplos_de_protocolos_de_iteración">Ejemplos de protocolos de iteración</h2> + +<p>Un {{jsxref("String")}} es un ejemplo de un objeto iterable nativo:</p> + +<pre class="brush: js">var someString = "hi"; +typeof someString[Symbol.iterator]; // "function" +</pre> + +<p>Para objetos <code>String</code> su iterador por defecto retorna cada uno de sus caracteres, uno a la vez:</p> + +<pre class="brush: js">var iterator = someString[Symbol.iterator](); +iterator + ""; // "[object String Iterator]" + +iterator.next(); // { value: "h", done: false } +iterator.next(); // { value: "i", done: false } +iterator.next(); // { value: undefined, done: true }</pre> + +<p>En algunas estructuras nativas del lenguaje como en el caso del <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">operador de propagación <em>spread operator</em></a>, el mismo protocolo de iteración está presente en su parte interna:</p> + +<pre class="brush: js">[...someString] // ["h", "i"]</pre> + +<p>Podemos redefinir el comportamiento de iteración creando nuestro propio <code>@@iterator</code>:</p> + +<pre class="brush: js">// es necesario el uso de un objeto creado a partir de la función constructora String, +// ya que al usar un string primitivo el <em>auto-boxing</em> generaría una referencia temporal +// a un iterador que luego es descartado en el <em>unbox</em> + +var someString = new String("hi"); + +someString[Symbol.iterator] = function() { + return { // este es el objeto iterador que retorna un único elemento, la cadena string "bye" + next: function() { + if (this._first) { + this._first = false; + return { value: "bye", done: false }; + } else { + return { done: true }; + } + }, + _first: true + }; +}; +</pre> + +<p>Nótese que al redefinir un <code>@@iterator</code> se puede afectar el comportamiento de construcciones nativas que usan el protocolo de iteración:</p> + +<pre class="brush: js">[...someString]; // ["bye"] +someString + ""; // "hi" +</pre> + +<h2 id="Ejemplos_de_iterables">Ejemplos de iterables</h2> + +<h3 id="Iterables_nativos">Iterables nativos</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("TypedArray")}}, {{jsxref("Map")}} y {{jsxref("Set")}} son objetos iterables nativos, ya que en su objeto prototipo existe un método <code>@@</code><code>iterator.</code></p> + +<h3 id="Iterables_personalizados">Iterables personalizados</h3> + +<p>Podemos crear nuestros propios iterables de la siguiente manera:</p> + +<pre class="brush: js">var myIterable = {}; +myIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; +[...myIterable]; // [1, 2, 3] +</pre> + +<h3 id="APIs_nativas_que_aceptan_iterables">APIs nativas que aceptan iterables</h3> + +<p>Existen varios APIs que aceptan iterables, como en el caso de: {{jsxref("Map", "Map([iterable])")}}, {{jsxref("WeakMap", "WeakMap([iterable])")}}, {{jsxref("Set", "Set([iterable])")}} y {{jsxref("WeakSet", "WeakSet([iterable])")}}:</p> + +<pre class="brush: js">var myObj = {}; +new Map([[1,"a"],[2,"b"],[3,"c"]]).get(2); // "b" +new WeakMap([[{},"a"],[myObj,"b"],[{},"c"]]).get(myObj); // "b" +new Set([1, 2, 3]).has(3); // true +new Set("123").has("2"); // true +new WeakSet(function*() { + yield {}; + yield myObj; + yield {}; +}()).has(myObj); // true +</pre> + +<p>De igual manera {{jsxref("Promise.all", "Promise.all(iterable)")}}, {{jsxref("Promise.race", "Promise.race(iterable)")}}, y {{jsxref("Array.from", "Array.from()")}}.</p> + +<h3 id="Sintaxis_que_espera_un_iterable">Sintaxis que espera un iterable</h3> + +<p>Algunas declaraciones y expresiones esperan iterables, por ejemplo el bucle <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for-of</a></code>, el<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator"> operador de propagación <em>spread operator</em></a>, la expresión <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield*">Yield*</a></code>, y la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">asignación desestructurada <em>destructuring assignment</em></a>.</p> + +<pre class="brush: js">for(let value of ["a", "b", "c"]){ + console.log(value); +} +// "a" +// "b" +// "c" + +[..."abc"]; // ["a", "b", "c"] + +function* gen(){ + yield* ["a", "b", "c"]; +} + +gen().next(); // { value:"a", done:false } + +[a, b, c] = new Set(["a", "b", "c"]); +a // "a" + +</pre> + +<h3 id="Iterables_mal_definidos">Iterables mal definidos</h3> + +<p>Un método <code>@@iterator</code> iterable que no retorne un objeto iterador no está correctamente definido, por lo tanto al ejecutarlo de esta manera podría resultar en excepciones en tiempo de ejecución y otros errores:</p> + +<pre class="brush: js">var nonWellFormedIterable = {} +nonWellFormedIterable[Symbol.iterator] = () => 1 +[...nonWellFormedIterable] // TypeError: [] is not a function +</pre> + +<h2 id="Ejemplos_de_iteradores">Ejemplos de iteradores</h2> + +<h3 id="Iterador_simple">Iterador simple</h3> + +<pre class="brush: js">function makeIterator(array){ + var nextIndex = 0; + + return { + next: function(){ + return nextIndex < array.length ? + {value: array[nextIndex++], done: false} : + {done: true}; + } + }; +} + +var it = makeIterator(['yo', 'ya']); + +console.log(it.next().value); // 'yo' +console.log(it.next().value); // 'ya' +console.log(it.next().done); // true +</pre> + +<h3 id="Iterador_infinito">Iterador infinito</h3> + +<pre class="brush: js">function idMaker(){ + var index = 0; + + return { + next: function(){ + return {value: index++, done: false}; + } + }; +} + +var it = idMaker(); + +console.log(it.next().value); // '0' +console.log(it.next().value); // '1' +console.log(it.next().value); // '2' +// ... +</pre> + +<h3 id="Con_un_generador">Con un generador</h3> + +<pre class="brush: js">function* makeSimpleGenerator(array){ + var nextIndex = 0; + + while(nextIndex < array.length){ + yield array[nextIndex++]; + } +} + +var gen = makeSimpleGenerator(['yo', 'ya']); + +console.log(gen.next().value); // 'yo' +console.log(gen.next().value); // 'ya' +console.log(gen.next().done); // true + + + +function* idMaker(){ + var index = 0; + while(true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // '0' +console.log(gen.next().value); // '1' +console.log(gen.next().value); // '2' +// ... +</pre> + +<h2 id="¿Un_objeto_generador_es_un_iterador_o_un_iterable">¿Un objeto generador es un iterador o un iterable?</h2> + +<p>Un <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">objeto iterador</a> es tanto un iterador como un iterable:</p> + +<pre class="brush: js">var aGeneratorObject = function*(){ + yield 1; + yield 2; + yield 3; +}(); +typeof aGeneratorObject.next; +// "function", ya que tiene un método next, por lo tanto es un iterador +typeof aGeneratorObject[Symbol.iterator]; +// "function", ya que tiene un método @@iterator, por lo tanto es un iterable +aGeneratorObject[Symbol.iterator]() === aGeneratorObject; +// true, ya que su método @@iterator retorna a sí mismo (un iterador), por lo tanto es un iterable bien formado +[...aGeneratorObject]; +// [1, 2, 3] +</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-iteration', 'Iteration')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<p>Para información adicional acerca de generadores <em>generators</em> en ES6, puede visitar la <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">página específica</a> sobre este tema.</p> diff --git a/files/es/web/javascript/reference/lexical_grammar/index.html b/files/es/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..fd6a12d8c5 --- /dev/null +++ b/files/es/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,661 @@ +--- +title: Gramática léxica +slug: Web/JavaScript/Referencia/Gramatica_lexica +tags: + - Gramática léxica + - Guía + - JaveScript + - Literal + - Palabra clave +translation_of: Web/JavaScript/Reference/Lexical_grammar +--- +<div>{{JsSidebar("Más")}}</div> + +<p>Esta página describe la gramática léxica de JavaScript. El texto fuente de los scripts de ECMAScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son segmentos, caracteres de control, terminadores de línea, comentarios o {{Glossary("Espacio en blanco")}}. ECMAScript también define ciertas palabras clave y literales y tiene reglas para la inserción automática del punto y coma en las declaraciones finales.</p> + +<h2 id="Caracteres_de_control">Caracteres de control</h2> + +<p>Los caracteres de control no tienen representación visual, pero se utilizan para controlar la interpretación del texto.</p> + +<table class="standard-table"> + <caption>Caracteres de control de formato Unicode</caption> + <thead> + <tr> + <th>Punto de código</th> + <th>Nombre</th> + <th>Abreviatura</th> + <th>Descripción</th> + </tr> + </thead> + <thead> + <tr> + <td><code>U+200C</code></td> + <td>Separador de ancho cero</td> + <td><ZWNJ></td> + <td>Colocado entre caracteres para evitar que se conecten a ligaduras en ciertos idiomas (<a href="https://en.wikipedia.org/wiki/Zero-width_non-joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+200D</code></td> + <td>Conector de ancho cero</td> + <td><ZWJ></td> + <td>Colocado entre caracteres que normalmente no estarían conectados para hacer que los caracteres se rendericen usando su forma conectada en ciertos idiomas (<a href="https://en.wikipedia.org/wiki/Zero-width_joiner">Wikipedia</a>).</td> + </tr> + <tr> + <td><code>U+FEFF</code></td> + <td>Marca de orden de bytes</td> + <td><BOM></td> + <td>Se usa al comienzo del script para marcarlo como Unicode y el orden de bytes del texto (<a href="https://en.wikipedia.org/wiki/Marca_de_orden_de_bytes">Wikipedia</a>).</td> + </tr> + </thead> +</table> + +<h2 id="Espacio_en_blanco">Espacio en blanco</h2> + +<p>Los caracteres de {{Glossary("Espacio_en_blanco")}} mejoran la legibilidad del texto fuente y separan los fragmentos entre sí. Estos caracteres suelen ser innecesarios para la funcionalidad del código. Las <a href="https://en.wikipedia.org/wiki/Minification_%28programming%29">herramientas de minificación</a> se utilizan a menudo para eliminar espacios en blanco con el fin de reducir la cantidad de datos que se deben transferir.</p> + +<table class="standard-table"> + <caption>Caracteres de espacio en blanco</caption> + <thead> + <tr> + <th>Punto de código</th> + <th>Nombre</th> + <th>Abreviatura</th> + <th>Descripción</th> + <th>Secuencia de escape</th> + </tr> + </thead> + <tbody> + <tr> + <td>U+0009</td> + <td>Caracter de tabulación</td> + <td><HT></td> + <td>Tabulación horizontal</td> + <td>\t</td> + </tr> + <tr> + <td>U+000B</td> + <td>Tabulación de línea</td> + <td><VT></td> + <td>Tabulación vertical</td> + <td>\v</td> + </tr> + <tr> + <td>U+000C</td> + <td>Avance de Página</td> + <td><FF></td> + <td>Carácter de control de salto de página (<a href="https://en.wikipedia.org/wiki/Page_break#Form_feed">Wikipedia</a>).</td> + <td>\f</td> + </tr> + <tr> + <td>U+0020</td> + <td>Espacio</td> + <td><SP></td> + <td>Espacio normal</td> + <td></td> + </tr> + <tr> + <td>U+00A0</td> + <td>Espacio irrompible</td> + <td><NBSP></td> + <td>Espacio normal, pero ningún punto en el que una línea se pueda romper</td> + <td></td> + </tr> + <tr> + <td>Otros</td> + <td>Otros caracteres de espacio Unicode</td> + <td><USP></td> + <td><a href="https://es.wikipedia.org/wiki/Espacio_(puntuaci%C3%B3n)">Espacios Unicode en Wikipedia</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Terminadores_de_línea">Terminadores de línea</h2> + +<p>Además de los caracteres de {{Glossary("Espacio_en_blanco", "espacio en blanco")}}, los caracteres de terminación de línea se utilizan para mejorar la legibilidad del texto fuente. Sin embargo, en algunos casos, los terminadores de línea pueden influir en la ejecución del código JavaScript, ya que hay algunos lugares donde están prohibidos. Los terminadores de línea también afectan el proceso de la <a href="#Inserción_automática_de_punto_y_coma">inserción automática de punto y coma</a>. Los terminadores de línea se corresponden con la clase <strong>\s</strong> en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">expresiones regulares</a>.</p> + +<p>Solo los siguientes puntos de código Unicode se tratan como terminadores de línea en ECMAScript, otros caracteres de salto de línea se tratan como espacios en blanco (por ejemplo, <code>Next Line</code>, <code>NEL</code>, <code>U+0085</code> se consideran como espacios en blanco).</p> + +<table class="standard-table"> + <caption>Caracteres terminadores de línea</caption> + <thead> + <tr> + <th>Punto de código</th> + <th>Nombre</th> + <th>Abreviatura</th> + <th>Descripción</th> + <th>Secuencia de escape</th> + </tr> + </thead> + <thead> + </thead> + <tbody> + <tr> + <td>U+000A</td> + <td>Alimentación de linea</td> + <td><LF></td> + <td>Caracter de nueva línea en sistemas UNIX.</td> + <td>\n</td> + </tr> + <tr> + <td>U+000D</td> + <td>Retorno de carro</td> + <td><CR></td> + <td>Caracter de nueva línea en Commodore y los primeros sistemas Mac.</td> + <td>\r</td> + </tr> + <tr> + <td>U+2028</td> + <td>Separador de línea</td> + <td><LS></td> + <td><a href="https://es.wikipedia.org/wiki/Nueva_l%C3%ADnea">Wikipedia</a></td> + <td></td> + </tr> + <tr> + <td>U+2029</td> + <td>Separador de párrafos</td> + <td><PS></td> + <td><a href="https://es.wikipedia.org/wiki/Nueva_l%C3%ADnea">Wikipedia</a></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Comentarios">Comentarios</h2> + +<p>Los comentarios se utilizan para agregar consejos, notas, sugerencias o advertencias al código JavaScript. Esto puede facilitar su lectura y comprensión. También se pueden utilizar para deshabilitar el código y evitar que se ejecute; esta puede ser una valiosa herramienta de depuración.</p> + +<p>JavaScript tiene dos formas antiguas de agregar comentarios al código.</p> + +<p>La primera forma son las dobles barras inclinadas <code>//</code> comentario<strong>;</strong> esta convierte en comentario todo el texto que le sigue en la misma línea. Por ejemplo:</p> + +<pre class="brush: js notranslate">function comment() { + // Este es un comentario JavaScript de una línea + console.log('¡Hola mundo!'); +} +comment(); +</pre> + +<p>La segunda forma es el estilo <code>/* */</code>, que es mucho más flexible.</p> + +<p>Por ejemplo, lo puedes usar en una sola línea:</p> + +<pre class="brush: js notranslate">function comment() { + /* Este es un comentario JavaScript de una línea */ + console.log('¡Hola mundo!'); +} +comment();</pre> + +<p>También puedes hacer comentarios de varias líneas, como este:</p> + +<pre class="brush: js notranslate">function comment() { + /* Este comentario abarca varias líneas. Aviso + No necesitamos cerrar el comentario hasta que terminemos. */ + console.log('¡Hola mundo!'); +} +comment();</pre> + +<p>También lo puedes usar en medio de una línea, si lo deseas, aunque esto puede hacer que tu código sea más difícil de leer, por lo que se debe usar con precaución:</p> + +<pre class="brush: js notranslate">function comment(x) { + console.log('¡Hola' + x /* inserta el valor de x */ + ' !'); +} +comment('mundo');</pre> + +<p>Además, lo puedes usar para deshabilitar el código y evitar que se ejecute, envolviendo el código en un comentario, como este:</p> + +<pre class="brush: js notranslate">function comment() { + /* console.log('¡Hola mundo!'); */ +} +comment();</pre> + +<p>En este caso, la llamada a <code>console.log()</code> nunca se emite, debido a que está dentro de un comentario. De esta forma se puede desactivar cualquier número de líneas de código.</p> + +<h2 id="Comentarios_hashbang">Comentarios <code>hashbang</code></h2> + +<p>Una sintaxis de tercer comentario especializado, el <strong>comentario <code>hashbang</code></strong>, está en proceso de estandarización en ECMAScript (consulta la <a href="https://github.com/tc39/proposal-hashbang">Propuesta de gramática <code>Hashbang</code></a>).</p> + +<p>Un comentario <code>hashbang</code> se comporta exactamente como un comentario de una sola línea (<code>//</code>). En cambio, comienza con <code>#!</code> y <strong>solo son válidos al comienzo absoluto de un script o módulo</strong>. También ten en cuenta que no se permiten espacios en blanco de ningún tipo antes del <code>#!</code>. El comentario consta de todos los caracteres después de <code>#!</code> hasta el final de la primera línea; sólo se permite uno de esos comentarios.</p> + +<p>El comentario <code>hashbang</code> especifica la ruta a un intérprete de JavaScript específico que deseas utilizar para ejecutar el script. Aquí tienes un sencillo ejemplo:</p> + +<pre class="brush: js notranslate">#!/usr/bin/env node + +console.log("Hola mundo"); +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Los comentarios <code>hashbang</code> en JavaScript imitan a los <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)"><code>shebangs</code> en Unix</a> utilizados para ejecutar archivos con el intérprete apropiado.</p> +</div> + +<div class="blockIndicator warning"> +<p>Aunque <a href="https://https://es.wikipedia.org/wiki/Marca_de_orden_de_bytes">BOM</a> antes de que el comentario <code>hashbang</code> funcione en un navegador, no se recomienda utilizar BOM en un script con <code>hashbang</code>. BOM no funcionará cuando intentes ejecutar el script en Unix/Linux. Por lo tanto, usa UTF-8 sin BOM si deseas ejecutar scripts directamente desde el intérprete.</p> +</div> + +<p>¡Solo debes usar el estilo de comentario <code>#!</code> para especificar un intérprete de JavaScript. En todos los demás casos, utiliza un comentario <code>//</code> (o un comentario multilínea).</p> + +<h2 id="Palabras_clave">Palabras clave</h2> + +<h3 id="Palabras_clave_reservadas_a_partir_de_ECMAScript_2015">Palabras clave reservadas a partir de ECMAScript 2015</h3> + +<ul class="threecolumns"> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/switch", "case")}}</li> + <li>{{jsxref("Statements/try...catch", "catch")}}</li> + <li>{{jsxref("Statements/class", "class")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/debugger", "debugger")}}</li> + <li>{{jsxref("Statements/default", "default")}}</li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Statements/do...while", "do")}}</li> + <li>{{jsxref("Statements/if...else", "else")}}</li> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/class", "extends")}}</li> + <li>{{jsxref("Statements/try...catch", "finally")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> + <li>{{jsxref("Statements/import", "import")}}</li> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Operators/instanceof", "instanceof")}}</li> + <li>{{jsxref("Operators/new", "new")}}</li> + <li>{{jsxref("Statements/return", "return")}}</li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li>{{jsxref("Operators/this", "this")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/try...catch", "try")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Operators/void", "void")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/with", "with")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> + +<h3 id="Futuras_palabras_clave_reservadas">Futuras palabras clave reservadas</h3> + +<p>Las siguientes están reservadas como palabras clave futuras por la especificación ECMAScript. No tienen ninguna funcionalidad especial en la actualidad, pero es posible que lo hagan en el futuro, por lo que no se pueden utilizar como identificadores.</p> + +<p>Estas siempre están reservadas:</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>Las siguientes solo están reservadas cuando se encuentran en código de modo estricto:</p> + +<ul class="threecolumns"> + <li><code>implements</code></li> + <li><code>interface</code></li> + <li>{{jsxref("Statements/let", "let")}}</li> + <li><code>package</code></li> + <li><code>private</code></li> + <li><code>protected</code></li> + <li><code>public</code></li> + <li><code>static</code></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> + +<p>Las siguientes solo están reservadas cuando se encuentran en código de módulo:</p> + +<ul> + <li><code>await</code></li> +</ul> + +<h4 id="Futuras_palabras_clave_reservadas_en_estándares_más_antiguos">Futuras palabras clave reservadas en estándares más antiguos</h4> + +<p>Las siguientes están reservadas como palabras clave futuras según las especificaciones de ECMAScript anteriores (ECMAScript 1 a 3).</p> + +<ul class="threecolumns"> + <li><code>abstract</code></li> + <li><code>boolean</code></li> + <li><code>byte</code></li> + <li><code>char</code></li> + <li><code>double</code></li> + <li><code>final</code></li> + <li><code>float</code></li> + <li><code>goto</code></li> + <li><code>int</code></li> + <li><code>long</code></li> + <li><code>native</code></li> + <li><code>short</code></li> + <li><code>synchronized</code></li> + <li><code>throws</code></li> + <li><code>transient</code></li> + <li><code>volatile</code></li> +</ul> + +<p>Además, los literales <code>null</code>, <code>true</code> y <code>false</code> no se pueden utilizar como identificadores en ECMAScript.</p> + +<h3 id="Uso_de_palabras_reservadas">Uso de palabras reservadas</h3> + +<p>Las palabras reservadas en realidad solo se aplican a los <em>identificadores</em> (frente a los <em>nombres de identificadores</em>). Como se describe en <a href="http://es5.github.com/#A.1">es5.github.com/#A.1</a>, todos estos son <em>IdentifierName</em>s que no excluyen <em>Palabras reservadas</em>.</p> + +<pre class="brush: js notranslate">a.import +a['import'] +a = { import: 'test' }. +</pre> + +<p>Por otro lado, lo siguiente es ilegal porque es un <em>Identificador</em>, que es un <em>IdentifierName</em> sin palabras reservadas. Los identificadores se utilizan para <em>FunctionDeclaration</em>, <em>FunctionExpression</em>, <em>VariableDeclaration</em> y así sucesivamente. Los <em>IdentifierNames</em> se utilizan para <em>MemberExpression</em>, <em>CallExpression</em> y así sucesivamente.</p> + +<pre class="brush: js notranslate">function import() {} // Ilegal.</pre> + +<h3 id="Identificadores_con_significado_especial">Identificadores con significado especial</h3> + +<p>Algunos identificadores tienen un significado especial en algunos contextos sin ser palabras clave de ningún tipo. Estos incluyen:</p> + +<ul class="threecolumns"> + <li>{{jsxref("Functions/arguments", "arguments")}}</li> + <li>{{jsxref("Functions/get", "get")}}</li> + <li>{{jsxref("Functions/set", "set")}}</li> +</ul> + +<h2 id="Literales">Literales</h2> + +<h3 id="null_literal"><code>null</code> literal</h3> + +<p>Consulta también {{jsxref("null")}} para obtener más información.</p> + +<pre class="brush: js notranslate">null</pre> + +<h3 id="Booleanos_literales">Booleanos literales</h3> + +<p>Consulta también {{jsxref("Boolean", "Booleano")}} para obtener más información.</p> + +<pre class="brush: js notranslate">true +false</pre> + +<h3 id="Literales_numéricos">Literales numéricos</h3> + +<p>Los tipos {{jsxref("Number")}} y {{jsxref("BigInt")}} usan literales numéricos.</p> + +<h4 id="Decimal">Decimal</h4> + +<pre class="brush: js notranslate">1234567890 +42 + +// Precaución al usar con un cero a la izquierda: +0888 // 888 procesado como decimal +0777 // procesado como octal, 511 en decimal +</pre> + +<p>Ten en cuenta que los decimales literales pueden comenzar con un cero (<code>0</code>) seguido de otro dígito decimal, pero si todos los dígitos después del <code>0</code> inicial son menores que 8, el número se interpreta como un número octal. Esto no arrojará JavaScript, consulta <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=957513">error 957513</a>. Consulta también la página sobre {{jsxref("parseInt", "parseInt()")}}</p> + +<h5 id="Exponencial">Exponencial</h5> + +<p>El literal exponencial decimal se especifica mediante el siguiente formato: <code>beN</code>; donde <code>b</code> es un número base (entero o flotante), seguido del caracter <code>e</code> (que sirve como separador o <em>indicador de exponente</em>) y <code>N</code>, que es un número <em>exponente</em> o <em>potencia</em>: un entero con signo (según las especificaciones ECMA-262 de 2019):</p> + +<pre class="brush: js notranslate">0e-5 // => 0 +0e+5 // => 0 +5e1 // => 50 +175e-2 // => 1.75 +1e3 // => 1000 +1e-3 // => 0.001 +</pre> + +<h4 id="Binario">Binario</h4> + +<p>La sintaxis de números binarios utiliza un cero inicial seguido de una letra "B" latina en minúscula o mayúscula (<code>0b</code> o <code>0B</code>). Debido a que esta sintaxis es nueva en ECMAScript 2015, consulta la tabla de compatibilidad del navegador a continuación. Si los dígitos después de <code>0b</code> no son 0 o 1, se muestra el siguiente {{jsxref("SyntaxError")}}: "Faltan dígitos binarios después de 0b".</p> + +<pre class="brush: js notranslate">var FLT_SIGNBIT = 0b10000000000000000000000000000000; // 2147483648 +var FLT_EXPONENT = 0b01111111100000000000000000000000; // 2139095040 +var FLT_MANTISSA = 0B00000000011111111111111111111111; // 8388607</pre> + +<h4 id="Octal">Octal</h4> + +<p>La sintaxis de números octales utiliza un cero inicial seguido de una letra "O" latina en minúscula o mayúscula (<code>0o</code> o <code>0O</code>). Debido a que esta sintaxis es nueva en ECMAScript 2015, consulta la tabla de compatibilidad del navegador a continuación. Si los dígitos después del <code>0o</code> están fuera del rango (01234567), se lanza el siguiente {{jsxref("SyntaxError")}}: "Dígitos octales faltantes después del 0o".</p> + +<pre class="brush: js notranslate">var n = 0O755; // 493 +var m = 0o644; // 420 + +// También es posible con solo un cero inicial (ve la nota sobre los decimales arriba) +0755 +0644 +</pre> + +<h4 id="Hexadecimal">Hexadecimal</h4> + +<p>La sintaxis de números hexadecimales utiliza un cero inicial seguido de una letra "X" latina en minúscula o mayúscula (<code>0x</code> o <code>0X</code>). Si los dígitos después de 0x están fuera del rango (0123456789ABCDEF), se lanza el siguiente {{jsxref("SyntaxError")}}: "El identificador comienza inmediatamente después del literal numérico".</p> + +<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h4 id="BigInt_literal">BigInt literal</h4> + +<p>El tipo {{jsxref("BigInt")}} es una primitiva numérica en JavaScript que puede representar números enteros con precisión arbitraria. Los BigInt literales se crean agregando <code>n</code> al final de un número entero.</p> + +<pre class="brush: js notranslate">123456789123456789n // 123456789123456789 +0o777777777777n // 68719476735 +0x123456789ABCDEFn // 81985529216486895 +0b11101001010101010101n // 955733 +</pre> + +<p>Ten en cuenta que los números octales heredados con solo un cero a la izquierda no funcionarán para <code>BigInt</code>:</p> + +<pre class="brush: js example-bad notranslate">// 0755n +// SyntaxError: sintaxis de BigInt no válida</pre> + +<p>Para números <code>BigInt</code> octales, siempre utiliza cero seguido de la letra "o" (mayúscula o minúscula):</p> + +<pre class="brush: js example-good notranslate">0o755n</pre> + +<p>Para obtener más información sobre <code>BigInt</code>, consulta también <a href="/es/docs/Web/JavaScript/Data_structures#BigInt_type">estructuras de datos JavaScript</a>.</p> + +<h4 id="Separadores_numéricos">Separadores numéricos</h4> + +<p>Para mejorar la legibilidad de literales numéricos, se pueden usar guiones bajos (<code>_</code>, <code>U+005F</code>) como separadores:</p> + +<pre class="brush: js notranslate">// separadores en números decimales +1_000_000_000_000 +1_050.95 + +// separadores en números binarios +0b1010_0001_1000_0101 + +// separadores en números octales +0o2_2_5_6 + +// separadores en números hexadecimales +0xA0_B0_C0 + +// separadores en BigInts +1_000_000_000_000_000_000_000n +</pre> + +<p>Ten en cuenta estas limitaciones:</p> + +<pre class="brush: js example-bad notranslate"> // No se permite más de un guión bajo en una fila +100__000; // SyntaxError + +// No permitido al final de literales numéricos +100_; // SyntaxError + +// No se puede usar después de 0 +0_1; // SyntaxError +</pre> + +<h3 id="Objetos_literales">Objetos literales</h3> + +<p>Consulta también {{jsxref("Object")}} e <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">Iniciador de objeto</a> para obtener más información.</p> + +<pre class="brush: js notranslate">var o = { a: 'foo', b: 'bar', c: 42 }; + +// notación abreviada. Nueva en ES2015 +var a = 'foo', b = 'bar', c = 42; +var o = {a, b, c}; + +// en vez de +var o = { a: a, b: b, c: c }; +</pre> + +<h3 id="Arreglos_literales">Arreglos literales</h3> + +<p>Consulta también {{jsxref("Array")}} para obtener más información.</p> + +<pre class="brush: js notranslate">[1954, 1974, 1990, 2014]</pre> + +<h3 id="Cadenas_literales">Cadenas literales</h3> + +<p>Una cadena literal es cero o más puntos de código Unicode entre comillas simples o dobles. Los puntos de código Unicode también se pueden representar mediante una secuencia de escape. Literalmente todos los puntos de código pueden aparecer en una cadena literal, excepto estos puntos de código de cierre de cita:</p> + +<ul> + <li>U+005C \ (backslash),</li> + <li>U+000D <CR>,</li> + <li>y U+000A <LF>.</li> +</ul> + +<p>Antes de la <a href="https://github.com/tc39/proposal-json-superset">propuesta para hacer que todo el texto JSON sea ECMA-262 válido</a>, U+2028 <LS> y U+2029 <PS>, tampoco se permitió que aparecieran sin escape en las cadenas literales.</p> + +<p>Cualquier punto de código puede aparecer en forma de secuencia de escape. Las cadenas literales se evalúan como valores de cadena de ECMAScript. Al generar estos valores de cadena, los puntos de código Unicode están codificados en UTF-16.</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<h4 id="Secuencias_de_escape_hexadecimales">Secuencias de escape hexadecimales</h4> + +<p>Las secuencias de escape hexadecimales constan de <code>\x</code> seguido de exactamente dos dígitos hexadecimales que representan una unidad de código o un punto de código en el rango de 0x0000 a 0x00FF.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="Secuencias_de_escape_Unicode">Secuencias de escape Unicode</h4> + +<p>Una secuencia de escape Unicode consta exactamente de cuatro dígitos hexadecimales después de <code>\u</code>. Representa una unidad de código en la codificación UTF-16. Para los puntos de código U+0000 a U+FFFF, la unidad de código es igual al punto de código. Los puntos de código U+10000 a U+10FFFF requieren dos secuencias de escape que representan las dos unidades de código (un par sustituto) utilizadas para codificar el carácter; el par sustituto es distinto del punto de código.</p> + +<p>Consulta también {{jsxref("String.fromCharCode()")}} y {{jsxref("String.prototype.charCodeAt()")}}.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©" (U+A9)</pre> + +<h4 id="Puntos_de_escape_de_código_Unicode">Puntos de escape de código Unicode</h4> + +<p>Un punto de código de escape Unicode consta de <code>\u{</code>, seguido de un punto de código en base hexadecimal, seguido de <code>}</code>. El valor de los dígitos hexadecimales debe estar en el rango 0 y 0x10FFFF inclusive. Los puntos de código en el rango U+10000 a U+10FFFF no necesitan representarse como un par sustituto. Se agregaron puntos de código de escape a JavaScript en ECMAScript 2015 (ES6).</p> + +<p>Consulta también {{jsxref("String.fromCodePoint()")}} y {{jsxref("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' // CJK COMPATIBILIDAD IDEOGRÁFICA-2F804 (U+2F804) + +// el mismo caracter representado como un par suplente +'\uD87E\uDC04'</pre> + +<h3 id="Expresión_regular_literal">Expresión regular literal</h3> + +<p>Consulta también {{jsxref("RegExp")}} para obtener más información.</p> + +<pre class="brush: js notranslate">/ab+c/g + +// Una expresión regular literal "vacía" +// El grupo de no captura vacío es necesario +// para evitar la ambigüedad con comentarios de una sola línea. +/(?:)/</pre> + +<h3 id="Plantillas_literales">Plantillas literales</h3> + +<p>Consulta también <a href="/es/docs/Web/JavaScript/Reference/template_strings">cadenas de plantilla</a> para obtener más información.</p> + +<pre class="brush: js notranslate">`string text` + +`string text line 1 + string text line 2` + +`string text ${expression} string text` + +tag `string text ${expression} string text`</pre> + +<h2 id="Inserción_automática_de_punto_y_coma">Inserción automática de punto y coma</h2> + +<p>Algunas <a href="/es/docs/Web/JavaScript/Reference/Statements">declaraciones JavaScript</a> se deben terminar con punto y coma y, por lo tanto, se ven afectadas por la inserción automática del punto y coma (IAPC):</p> + +<ul> + <li>Declaración vacía</li> + <li><code>let</code>, <code>const</code>, declaración de variable</li> + <li><code>import</code>, <code>export</code>, declaración de módulo</li> + <li>Declaración de expresión</li> + <li><code>debugger</code></li> + <li><code>continue</code>, <code>break</code>, <code>throw</code></li> + <li><code>return</code></li> +</ul> + +<p>La especificación ECMAScript menciona <a href="https://tc39.github.io/ecma262/#sec-rules-of-automatic-semicolon-insertion">tres reglas de inserción de punto y coma</a>.</p> + +<p>1. Se inserta un punto y coma antes, cuando se encuentra un <a href="#Line_terminators">terminador de línea</a> o "}" que no está permitido por la gramática.</p> + +<pre class="brush: js notranslate">{ 1 2 } 3 + +// La IAPC lo transforma en + +{ 1 2 ;} 3;</pre> + +<p>2. Se inserta un punto y coma al final, cuando se detecta el final del flujo de entrada de símbolos y el analizador no puede procesar el único flujo de entrada como un programa completo.</p> + +<p>Aquí <code>++</code> no se trata como un <a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">operador sufijo</a> que se aplica a la variable <code>b</code>, porque se produce un terminador de línea entre <code>b</code> y <code>++</code>.</p> + +<pre class="brush: js notranslate">a = b +++c + +// IAPC lo transforma en + +a = b; +++c; +</pre> + +<p>3. Se inserta un punto y coma al final, cuando una declaración con producción restringida en la gramática va seguida de un terminador de línea. Estas declaraciones con reglas "no LineTerminator aquí" son:</p> + +<ul> + <li>PostfixExpressions (<code>++</code> y <code>--</code>)</li> + <li><code>continue</code></li> + <li><code>break</code></li> + <li><code>return</code></li> + <li><code>yield</code>, <code>yield*</code></li> + <li><code>module</code></li> +</ul> + +<pre class="brush: js notranslate">return +a + b + +// La IAPC lo transforma en + +return; +a + b; +</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-ecmascript-language-lexical-grammar', 'Gramática léxica')}}</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.grammar")}}</p> + +<h3 id="Progreso_de_la_implementación">Progreso de la implementación</h3> + +<p>La siguiente tabla proporciona un estado de implementación diario para esta función, porque esta función aún no ha alcanzado la estabilidad entre navegadores. Los datos se generan al ejecutar las pruebas de funciones 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 en la última versión del motor JavaScript de cada navegador.</p> + +<div>{{EmbedTest262ReportResultsTable("hashbang")}}</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binary-and-octal-numbers/">Jeff Walden: números binarios y octales</a></li> + <li><a href="http://mathiasbynens.be/notes/javascript-escapes">Mathias Bynens: caracteres de secuencias de escape JavaScript</a></li> + <li>{{jsxref("Boolean", "Booleanos")}}</li> + <li>{{jsxref("Number", "Números")}}</li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li> +</ul> 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..888845158a --- /dev/null +++ b/files/es/web/javascript/reference/operators/addition/index.html @@ -0,0 +1,77 @@ +--- +title: Adición (+) +slug: Web/JavaScript/Referencia/Operadores/Adición +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de adición (<code>+</code>) produce la suma de operandos numéricos o la concatenación de (cadenas) string.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> + +<div></div> + +<p class="hidden">La fuente para este ejemplo interactivo está almacenado en un repositorio Github. Si te gustaría contribuir al proyecto de ejemplos interactivos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una pull-request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Adición_numérica">Adición numérica</h3> + +<pre class="brush: js notranslate">// Número + Número -> adición +1 + 2 // 3 + +// Booleano + Número -> adición +true + 1 // 2 + +// Booleano + Booleano -> adición +false + false // 0 +</pre> + +<h3 id="Concatenación_de_cadenas_String">Concatenación de (cadenas) String</h3> + +<pre class="brush: js notranslate">// String + String -> concatenación +'fut' + 'bol' // "futbol" + +// Número + String -> concatenación +5 + 'oh' // "5oh" + +// String + Booleano -> concatenación +'fut' + false // "futfalse"</pre> + +<h2 id="Especificación">Especificación</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Explorador">Compatibilidad de Explorador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si quieres contribuir a estos datos, por favor revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envía un pull request.</div> + +<p>{{Compat("javascript.operators.addition")}}</p> + +<h2 id="También_revisa">También revisa</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/assignment/index.html b/files/es/web/javascript/reference/operators/assignment/index.html new file mode 100644 index 0000000000..1fa4b79ac4 --- /dev/null +++ b/files/es/web/javascript/reference/operators/assignment/index.html @@ -0,0 +1,62 @@ +--- +title: Asignacion (=) +slug: Web/JavaScript/Referencia/Operadores/Asignacion +tags: + - JS + - JavaScript + - Operador de Asignacion + - Operadores JavaScript + - Referências +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de asignación (=) se utiliza para asignar un valor a una variable. La operación de asignación evalúa el valor asignado. Es posible encadenar el operador de asignación para asignar un solo valor a múltiples variables</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<div></div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Asignación">Asignación</h3> + +<pre class="brush: js notranslate">// Asumimos las siguientes variables +// x = 5 +// n = 10 +// z = 25 + +x = n // La variable x contiene el valor 10 +x = n = z // x = n (es decir 10) y z pisa el valor total remplazandolo por 25</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + + + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/async_function/index.html b/files/es/web/javascript/reference/operators/async_function/index.html new file mode 100644 index 0000000000..12e76e6ce5 --- /dev/null +++ b/files/es/web/javascript/reference/operators/async_function/index.html @@ -0,0 +1,102 @@ +--- +title: Expresión de función asíncrona +slug: Web/JavaScript/Referencia/Operadores/async_function +tags: + - Expresión Primaria + - JavaScript + - Operador + - función +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La palabra clave <strong><code>async function</code></strong> puede ser utilizada para definir funciones <code>async</code> dento de expresiones.</p> + +<p>También se pueden definir funciones asíncronas utilizando un<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" title="The async function keyword can be used to define async functions inside expressions."> enunciado de función asíncrona</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">async function [nombre]([<var>param1</var>[, <var>param2</var>[, ..., <var>paramN</var>]]]) { + <var>enunciados</var> +}</pre> + +<p>A partir de ES2015 (ES6), también se pueden emplear <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones flecha.</a></p> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>name</var></code></dt> + <dd>El nombre de la función. Puede ser omitida, en cuy caso la función es <em>anónima</em>. El nombre es sólo local al cuerpo de la función The name is only local to the function body.</dd> + <dt><code><var>paramN</var></code></dt> + <dd>El nombre de un argumento a ser pasado a la función.</dd> + <dt><code><var>statements</var></code></dt> + <dd>Los enunciados que componen el cuerpo de la función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Una expresión <code>async function</code> es miuy similar, y casi tiene la misma sintaxis que, una {{jsxref('Statements/async_function', 'async function statement')}}. La principal diferencia entre una expresión <code>async function</code> y un enunciado <code>async function</code> es el <em>nombre de la función</em>, que puede ser omitido en una expresión <code>async function</code> para crear funciones <em>anonymous</em>. Una expresión <code>async function</code> puede ser utilizada como un {{Glossary("IIFE")}} (Expresión de función inmediatamente invocada, Immediately Invoked Function Expression) que se ejecuta tan rápido como es definida. Ver el capítulo sobre <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a> para tener más información.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3> + +<pre class="brush: js">function resuelve2SegundosDespues(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +}; + + +const agregar= async function(x) { // Expresión de una función asíncrona asignada a una variable + let a = await resuelve2SegundosDespues(20); + let b = await resuelve2SegundosDespues(30); + return x + a + b; +}; + +agregar(10).then(v => { + console.log(v); // imprime 60 después de 4 segundos. +}); + + +(async function(x) { // expresión de una función asíncrona utilizada como una IIFE + let p_a = resuelve2SegundosDespues(20); + let p_b = resuelve2SegundosDespues(30); + return x + await p_a + await p_b; +})(10).then(v => { + console.log(v); // imprime 60 después de 2 segundos. +}); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2> + +<div> + + +<p>{{Compat("javascript.operators.async_function_expression")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>Objeto {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Operators/await", "await")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/await/index.html b/files/es/web/javascript/reference/operators/await/index.html new file mode 100644 index 0000000000..d1a84251f1 --- /dev/null +++ b/files/es/web/javascript/reference/operators/await/index.html @@ -0,0 +1,102 @@ +--- +title: await +slug: Web/JavaScript/Referencia/Operadores/await +translation_of: Web/JavaScript/Reference/Operators/await +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>El operador <code>await</code> es usado para esperar a una {{jsxref("Promise")}}. Sólo puede ser usado dentro de una función {{jsxref("Statements/async_function", "async function")}}.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">[<em>rv</em>] = await <em>expression</em>;</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Una {{jsxref("Promise")}} o cualquier otro valor por el cual haya que esperar.</dd> + <dt><code>rv</code></dt> + <dd> + <p>Regresa el valor terminado de la promesa o solamente un valor si no es una<code>Promise</code>.</p> + </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La expresión <code>await</code> provoca que la ejecución de una función <code>async</code> sea pausada hasta que una <code>Promise</code> sea terminada o rechazada, y regresa a la ejecución de la función <code>async</code> después del término. Al regreso de la ejecución, el valor de la expresión <code>await</code> es la regresada por una promesa terminada.</p> + +<p>Si la <code>Promise</code> es rechazada, el valor de la expresión <code>await</code> tendrá el valor de rechazo.</p> + +<p>Si el valor de la expresión seguida del operador <code>await</code> no es una promesa, será convertido a una <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve">resolved Promise</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Si una <code>Promise</code> se pasa a una expresión <code>await</code>, espera a que la <code>Promise</code> se resuelva y devuelve el valor resuelto.</p> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + +async function f1() { + var x = await resolveAfter2Seconds(10); + console.log(x); // 10 +} +f1(); +</pre> + +<p>Si el valor no es una <code>Promise</code>, convierte el valor a una <code>Promise</code> resuelta, y espera por dicho valor.</p> + +<pre class="brush: js">async function f2() { + var y = await 20; + console.log(y); // 20 +} +f2();</pre> + +<p>Si la <code>Promise</code> es rechazada, se lanza una excepción con dicho el valor.</p> + +<pre class="brush: js">async function f3() { + try { + var z = await Promise.reject(30); + } catch(e) { + console.log(e); // 30 + } +} +f3();</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async functions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Initial definition in ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página es generada a partir de información estructurada. Si quisieras contribuir a esta información, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos un pull request.</div> + +<p>{{Compat("javascript.operators.await")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "async function expression")}}</li> + <li>{{jsxref("AsyncFunction")}} object</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/class/index.html b/files/es/web/javascript/reference/operators/class/index.html new file mode 100644 index 0000000000..e654359035 --- /dev/null +++ b/files/es/web/javascript/reference/operators/class/index.html @@ -0,0 +1,157 @@ +--- +title: expresión class +slug: Web/JavaScript/Referencia/Operadores/class +tags: + - Classes + - ECMAScript6 + - Expression + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La <strong>expresión class</strong> es una forma de definir una clase en ECMAScript 2015 (ES6). Similar a las <a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">funciones</a>, las expresiones de clase pueden ser nombradas o no. Si se nombran, el nombre de la clase es local sólo en el cuerpo de la clase. Las clases en JavaScript utilizan herencia basada en prototipos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">var MyClass = class <em>[className]</em> [extends] { + // class body +};</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Una expresión de clase tiene una sintaxis similar a la <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración de una clase</a>. Sin embargo, con las expresiones de clases, está permitido omitir el nombre de la clase ("identificador de enlace"), cosa que no se puede hacer con las declaraciones de clases. Además, las expresiones de clases permiten redefinir/redeclarar clases y <strong>no lanzar</strong> ningún tipo de error como las <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaraciones de clases</a>. La propiedad <code>constructor</code> es opcional. Y el <em>typeof </em>de las clases generadas con esta palabra clave siempre será "function".</p> + +<p>Tal y como en la declaración de clases, el cuerpo de la expresión de clase se ejecuta en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p> + +<pre class="brush: js">'use strict'; +var Foo = class {}; // la propiedad constructor es opcional +var Foo = class {}; // Se permite repetir declaraciones + +typeof Foo; // devuelve "function" +typeof class {}; // devuelve "function" + +Foo instanceof Object; // true +Foo instanceof Function; // true +class Foo {}; // Lanza TypeError, no permite volver a declararla +</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Una_clase_sencilla">Una clase sencilla</h3> + +<p>Esta es una sencilla expresión de clase anónima a la que se puede hacer referencia utilizando la variable "Foo".</p> + +<pre class="brush: js">var Foo = class { + constructor() {} + bar() { + return "Hello World!"; + } +}; + +var instance = new Foo(); +instance.bar(); // "Hello World!" +Foo.name; // "Foo" +</pre> + +<h3 id="Expresiones_de_clase_con_nombre">Expresiones de clase con nombre</h3> + +<p>Si se quiere hacer referencia a la clase actual dentro del cuerpo de la clase, se puede crear una expresión de clase con nombre. Este nombre sólo será visible en el mismo contexto de la expresión de clase.</p> + +<pre class="brush: js">var Foo = class NamedFoo { + constructor() {} + whoIsThere() { + return NamedFoo.name; + } +} +var bar = new Foo(); +bar.whoIsThere(); // "NamedFoo" +NamedFoo.name; // ReferenceError: NamedFoo no está definido +Foo.name; // "NamedFoo" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoDesktop(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome para Android</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(42.0)}}</td> + <td>{{CompatGeckoMobile(45)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(42.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores/function">expresión <code>function</code></a></li> + <li><code><a href="/es/docs/Web/JavaScript/Referencia/Sentencias/class">declaración class</a></code></li> + <li><a href="/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/comma_operator/index.html b/files/es/web/javascript/reference/operators/comma_operator/index.html new file mode 100644 index 0000000000..a62701b3e1 --- /dev/null +++ b/files/es/web/javascript/reference/operators/comma_operator/index.html @@ -0,0 +1,132 @@ +--- +title: Operador Coma +slug: Web/JavaScript/Referencia/Operadores/operador_coma +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador coma evalua cada uno de sus operandos (de izquierda a derecha) y retorna el valor del último operando.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>expr1</em>, <em>expr2, expr3...</em></pre> + +<h2 id="Parámetros">Parámetros</h2> + +<dl> + <dt><code>expr1</code>, <code>expr2, expr3...</code></dt> + <dd>Cualquier expresión.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Puede usar el operador coma cuando deseé mútiples expresiones en una localización que requiere una sola expresión. El uso más común de este operador es proveer múltiples parámetros en un búcle for</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Si a es un array de dos dimensiones con 10 elementos en un lado, el siguiente código usa el operador coma para incrementar dos variables a la vez. Note que la coma en la sentencia var <strong>no </strong>es el operador coma, porque no existe adentro de una expresión.Más bien, es un carácter especial en sentencias var para combinar a múltiples de ellas en una sola. Sin embargo, esa coma se comporta casi igual que el operador coma. El código imprime los valores de los elementos diagonales en el array:</p> + +<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) + document.writeln("a[" + i + "][" + j + "] = " + a[i][j]);</pre> + +<h3 id="Procesar_y_luego_retornar">Procesar y luego retornar:</h3> + +<p>Otro ejemplo de lo que se puede hacer con el operador coma es procesar antes de retornar. Como se mencionó, solo el último elemento será retornado pero todos los otros también van a ser evaluados. Así, se puede hacer:</p> + +<pre class="brush: js">function myFunc () { + var x = 0; + + return (x += 1, x); // the same as return ++x; +}</pre> + +<h2 id="Específicaciones">Específicaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/conditional_operator/index.html b/files/es/web/javascript/reference/operators/conditional_operator/index.html new file mode 100644 index 0000000000..6b48295902 --- /dev/null +++ b/files/es/web/javascript/reference/operators/conditional_operator/index.html @@ -0,0 +1,171 @@ +--- +title: Operador condicional (ternario) +slug: Web/JavaScript/Referencia/Operadores/Conditional_Operator +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>El<strong> operador condicional </strong>(<strong>ternario</strong>) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/if...else">if</a>.</div> + +<div> </div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>condición </em>? <em>expr1</em> : <em>expr2</em> </pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>condición</code></dt> + <dd>Una expresión que se evalúa como true o false.</dd> + <dt> + <div class="syntaxbox"><code>expr1</code>, <code>expr2</code></div> + </dt> + <dd>Expresión con valores de algún tipo.</dd> + <dt> + <h2 id="Descripción">Descripción</h2> + </dt> +</dl> + +<p>Si la <code>condición</code> es <code>true</code>, el operador retorna el valor de la <code>expr1</code>; de lo contrario, devuelve el valor de <code>expr2</code>. Por ejemplo, para mostrar un mensaje diferente en función del valor de la variable <em><code>isMember,</code></em> se puede usar esta declaración:</p> + +<pre class="brush: js">"La Cuota es de: " + (isMember ? "$2.00" : "$10.00") +</pre> + +<p>También puedes asignar variables dependiendo del resultado de la condición ternaria:</p> + +<pre class="brush: js">var elvisLives = Math.PI > 4 ? "Sip" : "Nop";</pre> + +<p>También es posible realizar evaluaciones ternarias múltiples (Nota: El operador condicional es asociativo):</p> + +<pre class="brush: js">var firstCheck = false, + secondCheck = false, + access = firstCheck ? "Acceso Denegado" : secondCheck ? "Acceso Denegado" : "Acceso Permitido"; + +console.log( access ); // muestra "Acceso Permitido"</pre> + +<p>También puede usar operaciones ternarias en espacio vacío con el propósito de realizar diferentes operaciones:</p> + +<pre class="brush: js">var stop = false, age = 16; + +age > 18 ? location.assign("continue.html") : stop = true; +</pre> + +<p>También puede realizar más de una operación por caso, separándolas con una coma:</p> + +<pre class="brush: js">var stop = false, age = 23; + +age > 18 ? ( + alert("OK, puedes continuar."), + location.assign("continue.html") +) : ( + stop = true, + alert("Disculpa, eres menor de edad!") +); +</pre> + +<p>También puede realizar más de una operación durante la asignación de un valor. En este caso, <strong><em>el último valor separado por una coma del paréntesis </em>será el valor asignado</strong>.</p> + +<pre class="brush: js">var age = 16; + +var url = age > 18 ? ( + alert("OK, puedes continuar."), + // alert devuelve "undefined", pero será ignorado porque + // no es el último valor separado por comas del paréntesis + "continue.html" // el valor a ser asignado si age > 18 +) : ( + alert("Eres menor de edad!"), + alert("Disculpa :-("), + // etc. etc. + "stop.html" // el valor a ser asignado si !(age > 18) +); + +location.assign(url); // "stop.html"</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-conditional-operator', 'Conditional Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.12', 'The conditional operator')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial implementada en JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if statement</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/decrement/index.html b/files/es/web/javascript/reference/operators/decrement/index.html new file mode 100644 index 0000000000..01fa5f0ee2 --- /dev/null +++ b/files/es/web/javascript/reference/operators/decrement/index.html @@ -0,0 +1,83 @@ +--- +title: Decremento(--) +slug: Web/JavaScript/Referencia/Operadores/Decremento +tags: + - Decremento + - JavaScript + - JavaScript basico + - Operadores +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de decremento (--) disminuye (o resta de a uno) su operando y retorna un valor.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> + +<div></div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operadores:</strong> <var>x</var>-- o --<var>x</var> +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Si usamos la forma de sufijo, operador después del operando (por ejemplo, <code>x--</code>), el operador de disminución disminuye y devuelve el valor antes de disminuir.</p> + +<p>Si se usamos la forma de prefijo, operador antes del operando (por ejemplo, <code>--x</code>), el operador de disminución disminuye y devuelve el valor después de disminuir.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_Sufijo">Usando Sufijo </h3> + +<pre class="brush: js notranslate">let x = 3; +y = x--; + +// y = 3 +// x = 2 +</pre> + +<h3 id="Usando_Prefijo">Usando Prefijo</h3> + +<pre class="brush: js notranslate">let a = 2; +b = --a; + +// a = 1 +// b = 1 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.operators.decrement")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/delete/index.html b/files/es/web/javascript/reference/operators/delete/index.html new file mode 100644 index 0000000000..99ec3e73dd --- /dev/null +++ b/files/es/web/javascript/reference/operators/delete/index.html @@ -0,0 +1,242 @@ +--- +title: operador delete +slug: Web/JavaScript/Referencia/Operadores/delete +translation_of: Web/JavaScript/Reference/Operators/delete +--- +<div> +<div>{{jsSidebar("Operators")}}</div> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El operador <code>delete</code> elimina una propiedad de un objeto.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">delete expresión </pre> + +<p>donde la <em>expresión</em> debe evaluar una referencia de la propiedad, por ejemplo:</p> + +<pre class="syntaxbox">delete <em>objeto.propiedad</em> +delete <em>objeto</em>['<em>propiedad</em>'] +</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<dl> + <dt><code>objeto</code></dt> + <dd>El nombre de un objeto, o una expresión que evalua a un objeto.</dd> + <dt><code>propiedad</code></dt> + <dd>La propiedad a eliminar.</dd> +</dl> + +<h3 id="Returns" name="Returns">Retorno</h3> + +<p>En <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">modo estricto</a> arroja una excepción si la propiedad no es configurable (retorna <code>false</code> en modo no estricto). Retorna <code>true</code> en cualquier otro caso.</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Al contrario de lo que se podría pensar, el operador <code>delete</code> no tiene nada que ver con liberar memoria (sólo lo hace de manera indirecta eliminando referencias. Más detalles en la página de<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Gestion_de_Memoria"> gestión de memoria</a>).</p> + +<p>Si la operación <code>delete</code> funciona correctamente, eliminará la propiedad del objeto por completo. Sin embargo, si existe otra propiedad con el mismo nombre en la cadena del <code>prototype </code>del objeto, éste heredará la propiedad del <code>prototype</code>.</p> + +<p><code>delete</code> sólo es efectivo en propiedades de objetos. No tiene ningún efecto en variables o en nombres de funciones.<br> + Aunque a veces son mal identificados como variables globales, las asignaciones que no especifican al objeto (ejemplo: x = 5), son en realidad propiedades que se asignan al objeto global.</p> + +<p><code>delete</code> no puede eliminar ciertas propiedades de los objetos predefinidos (como Object, Array, Math etc). Estos están descritos en ECMAScript 5 y más tarde como no configurables.</p> + +<h3 id="Temporal_dead_zone">Temporal dead zone</h3> + +<p>The "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone"</a> (TDZ), specified in ECMAScript 6 for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a> declarations, also applies to the <code>delete</code> operator. Thus, code like the following will throw a {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">function foo() { + delete x; + let x; +} + +function bar() { + delete y; + const y; +}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">x = 42; // crea la propiedad x en el objeto global +var y = 43; // crea la propiedad y en el objeto global, y la marca como no configurable +myobj = { + h: 4, + k: 5 +}; + +// x es una propiedad del objeto global y puede ser eliminada +delete x; // retorna true + +// y no es configurable, por lo tanto no puede ser eliminada +delete y; // retorna false + +// delete no afecta a ciertas propiedades predefinidas +delete Math.PI; // retorna false + +// las propiedades definidas por el usuario pueden eliminarse +delete myobj.h; // retorna true + +// myobj es una propiedad del objeto global, no una variable, +// por lo tanto puede eliminarse +delete myobj; // retorna true + +function f() { + var z = 44; + + // delete no afecta a nombres de variables locales + delete z; // retorna false +} +</pre> + +<p>Si el objeto hereda una propiedad de un prototype, y no tiene la propiedad en sí, la propiedad no puede ser eliminada por referencia al objeto. Aun así, puedes eliminarla directamente en el prototype.</p> + +<p>If the object inherits a property from a prototype, and doesn't have the property itself, the property can't be deleted by referencing the object. You can, however, delete it directly on the prototype.</p> + +<pre class="brush: js">function Foo(){} +Foo.prototype.bar = 42; +var foo = new Foo(); + +// retorna true, pero sin ningún efecto, +// ya que bar es una propiedad heredada +delete foo.bar; + +// logs 42, propiedad aún heredada +console.log(foo.bar); + +// elimina la propiedad en el prototype +delete Foo.prototype.bar; + +// logs "undefined", propiedad no heredada +console.log(foo.bar); </pre> + +<h3 id="Deleting_array_elements" name="Deleting_array_elements">Eliminando elementos de un array</h3> + +<p>Cuando eliminas un elemento de un array, la longitud del array no se ve afectada. Esta se mantiene incluso si eliminas el último elemento del array.</p> + +<p>Cuando el operador <code>delete</code> elimina un elemento de un array, este elemento ya no está en el array. En el siguiente ejemplo, <code>trees[3]</code> es eliminado mediante <code>delete</code>.</p> + +<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; +delete trees[3]; +if (3 in trees) { + // esto no se ejecuta +}</pre> + +<p>Si quieres que exista un elemento de un array pero que tengo un valor no definido, utiliza el valor <code>undefined</code> en vez del operador <code>delete</code>. En el siguiente ejemplo, <code>trees[3]</code> es asignado con el valor <code>undefined</code>, pero el elemento del array aún existe:</p> + +<pre class="brush: js">var trees = ["redwood","bay","cedar","oak","maple"]; +trees[3] = undefined; +if (3 in trees) { + // esto se ejecuta +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Standard</td> + <td>Definición inicial. Implementado en JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegador">Compatibilidad de navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(36)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Temporal dead zone</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(36)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Cross-browser_issues">Cross-browser issues</h3> + +<p>Although ECMAScript makes iteration order of objects implementation-dependent, it may appear that all major browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype). However, in the case of Internet Explorer, when one uses <code>delete</code> on a property, some confusing behavior results, preventing other browsers from using simple objects like object literals as ordered associative arrays. In Explorer, while the property <em>value</em> is indeed set to undefined, if one later adds back a property with the same name, the property will be iterated in its <em>old</em> position--not at the end of the iteration sequence as one might expect after having deleted the property and then added it back.</p> + +<p>So, if you want to simulate an ordered associative array in a cross-browser environment, you are forced to either use two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="http://perfectionkills.com/understanding-delete/">Análisis en profundidad sobre delete</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/destructuring_assignment/index.html b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..b56e3d3b52 --- /dev/null +++ b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,442 @@ +--- +title: La desestructuración +slug: Web/JavaScript/Referencia/Operadores/Destructuring_assignment +tags: + - Característica del lenguaje + - Desestructuración + - Desestructurar arreglos y objetos anidados + - ECMAScript 2015 + - ES6 + - JavaScript + - Objetos anidados y desestructuración de array + - Operador +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div>{{jsSidebar("Operators", "Operadores")}}</div> + +<p>La sintaxis de <strong>desestructuración</strong> es una expresión de JavaScript que permite desempacar valores de arreglos o propiedades de objetos en distintas variables.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush:js notranslate">let a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({ a, b } = { a: 10, b: 20 }); +console.log(a); // 10 +console.log(b); // 20 + + +// Propuesta de etapa 4 (terminada) +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Las expresiones de objetos y arreglos literales proporcionan una manera fácil de crear paquetes de datos <em>ad hoc</em>.</p> + +<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];</pre> + +<p>La desestructuración utiliza una sintaxis similar, pero en el lado izquierdo de la asignación para definir qué valores desempacar de la variable origen.</p> + +<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5]; +const [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +</pre> + +<p>Esta capacidad es similar a las características presentes en lenguajes como Perl y Python.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Desestructuración_de_arreglos">Desestructuración de arreglos</h3> + +<h4 id="Asignación_básica_de_variables">Asignación básica de variables</h4> + +<pre class="brush: js notranslate">const foo = ['one', 'two', 'three']; + +const [red, yellow, green] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // "three" +</pre> + +<h4 id="Asignación_separada_de_la_declaración">Asignación separada de la declaración</h4> + +<p>A una variable se le puede asignar su valor mediante una desestructuración separada de la declaración de la variable.</p> + +<pre class="brush:js notranslate">let a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h4 id="Valores_predeterminados">Valores predeterminados</h4> + +<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del arreglo sea <code>undefined</code>.</p> + +<pre class="brush: js notranslate">let a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +</pre> + +<h4 id="Intercambio_de_variables">Intercambio de variables</h4> + +<p>Los valores de dos variables se pueden intercambiar en una expresión de desestructuración.</p> + +<p>Sin desestructurar la asignación, intercambiar dos valores requiere una variable temporal (o, en algunos lenguajes de bajo nivel, el algoritmo del <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">truco XOR-swap</a>).</p> + +<pre class="brush:js notranslate">let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 + +const arr = [1,2,3]; +[arr[2], arr[1]] = [arr[1], arr[2]]; +console.log(arr); // [1,3,2] + +</pre> + +<h4 id="Analizar_un_arreglo_devuelto_por_una_función">Analizar un arreglo devuelto por una función</h4> + +<p>Siempre ha sido posible devolver un arreglo desde una función. La desestructuración puede hacer que trabajar con un valor de retorno de arreglo sea más conciso.</p> + +<p>En este ejemplo, <code>f()</code> devuelve los valores <code>[1, 2]</code> como su salida, que se puede procesar en una sola línea con desestructuración.</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2]; +} + +let a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +</pre> + +<h4 id="Ignorar_algunos_valores_devueltos">Ignorar algunos valores devueltos</h4> + +<p>Puedes ignorar los valores de retorno que no te interesan:</p> + +<pre class="brush:js notranslate">function f() { + return [1, 2, 3]; +} + +const [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 + +const [c] = f(); +console.log(c); // 1 +</pre> + +<p>También puedes ignorar todos los valores devueltos:</p> + +<pre class="brush:js notranslate">[,,] = f(); +</pre> + +<h4 id="Asignar_el_resto_de_un_arreglo_a_una_variable">Asignar el resto de un arreglo a una variable</h4> + +<p>Al desestructurar un arreglo, puedes desempacar y asignar la parte restante a una variable usando el patrón <code>rest</code>o:</p> + +<pre class="brush: js notranslate">const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3]</pre> + +<p>Ten en cuenta que se lanzará un {{jsxref("SyntaxError")}} si se usa una coma final en el lado derecho con un elemento <code>rest</code>o:</p> + +<pre class="brush: js example-bad notranslate">const [a, ...b,] = [1, 2, 3]; + +// SyntaxError: el elemento rest no puede tener una coma al final +// Siempre considera usar el operador rest como último elemento +</pre> + +<h4 id="Desempacar_valores_coincidentes_con_una_expresión_regular">Desempacar valores coincidentes con una expresión regular</h4> + +<p>Cuando el método de expresión regular {{jsxref("Global_Objects/RegExp/exec", "exec()", "", 1)}} encuentra una coincidencia, devuelve un arreglo que contiene primero toda la parte coincidente de la cadena y luego las partes de la cadena que coinciden con cada grupo entre paréntesis en la expresión regular. La desestructuración te permite desempacar fácilmente las partes de este arreglo, ignorando la coincidencia completa si no es necesaria.</p> + +<pre class="brush:js notranslate">function parseProtocol(url) { + const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); + // ["https://developer.mozilla.org/es/Web/JavaScript", + "https", "developer.mozilla.org", "es/Web/JavaScript"] + + const [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/es/Web/JavaScript')); +// "https" +</pre> + +<h3 id="Desestructuración_de_objetos">Desestructuración de objetos</h3> + +<h4 id="Asignación_básica">Asignación básica</h4> + +<pre class="brush: js notranslate">const user = { + id: 42, + is_verified: true +}; + +const {id, is_verified} = user; + +console.log(id); // 42 +console.log(is_verified); // true +</pre> + +<h4 id="Asignación_sin_declaración">Asignación sin declaración</h4> + +<p>A una variable se le puede asignar su valor con desestructuración separada de su declaración.</p> + +<pre class="brush:js notranslate">let a, b; + +({a, b} = {a: 1, b: 2});</pre> + +<div class="note"> +<p><strong>Notas</strong>: los paréntesis <code>(...)</code> alrededor de la declaración de asignación son obligatorios cuando se usa la desestructuración de un objeto literal sin una declaración.</p> + +<p><code>{a, b} = {a: 1, b: 2}</code> no es una sintaxis independiente válida, debido a que <code>{a, b}</code> en el lado izquierdo se considera un bloque y no un objeto literal.</p> + +<p>Sin embargo, <code>({a, b} = {a: 1, b: 2})</code> es válido, al igual que <code>const {a, b} = {a: 1, b: 2}</code></p> + +<p>tu expresión <code>( ... )</code> debe estar precedida por un punto y coma o se puede usar para ejecutar una función en la línea anterior.</p> +</div> + +<h4 id="Asignar_a_nuevos_nombres_de_variable">Asignar a nuevos nombres de variable</h4> + +<p>Una propiedad se puede desempacar de un objeto y asignar a una variable con un nombre diferente al de la propiedad del objeto.</p> + +<pre class="brush: js notranslate">const o = {p: 42, q: true}; +const {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true</pre> + +<p>Aquí, por ejemplo, <code>const {p: foo} = o</code> toma del objeto <code>o</code> la propiedad llamada <code>p</code> y la asigna a una variable local llamada <code>foo</code>.</p> + +<h4 id="Valores_predeterminados_2">Valores predeterminados</h4> + +<p>A una variable se le puede asignar un valor predeterminado, en el caso de que el valor desempacado del objeto sea <code>undefined</code>.</p> + +<pre class="brush: js notranslate">const {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5</pre> + +<h4 id="Asignar_nombres_a_nuevas_variables_y_proporcionar_valores_predeterminados">Asignar nombres a nuevas variables y proporcionar valores predeterminados</h4> + +<p>Una propiedad puede ser ambas</p> + +<ul> + <li>Desempacada de un objeto y asignada a una variable con un nombre diferente.</li> + <li>Se le asigna un valor predeterminado en caso de que el valor desempacado sea <code>undefined</code>.</li> +</ul> + +<pre class="brush: js notranslate">const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +</pre> + +<h4 id="Desempacar_campos_de_objetos_pasados_como_parámetro_de_función">Desempacar campos de objetos pasados como parámetro de función</h4> + +<pre class="brush:js notranslate">const user = { + id: 42, + displayName: 'jdoe', + fullName: { + firstName: 'John', + lastName: 'Doe' + } +}; + +function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}) { + return `${displayName} es ${name}`; +} + +console.log(userId(user)); // 42 +console.log(whois(user)); // "jdoe es John"</pre> + +<p>Esto desempaca el <code>id</code>, <code>displayName</code> y <code>firstName</code> del objeto <code>user</code> y los imprime.</p> + +<h4 id="Establecer_el_valor_predeterminado_de_un_parámetro_de_función">Establecer el valor predeterminado de un parámetro de función</h4> + +<pre class="brush: js notranslate">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { + console.log(size, coords, radius); + // haz un dibujo de gráfico +} + +drawChart({ + coords: {x: 18, y: 30}, + radius: 30 +});</pre> + +<div class="note"> +<p>En la firma de la función para <strong><code>drawChart</code></strong> anterior, el lado izquierdo desestructurado se asigna a un objeto literal vacío en el lado derecho: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code>. También podrías haber escrito la función sin la asignación del lado derecho. Sin embargo, si omites la asignación del lado derecho, la función buscará al menos un argumento para ser proporcionado cuando se invoca, mientras que en su forma actual, simplemente puedes llamar a <code><strong>drawChart()</strong></code> sin proporcionar ningún parámetro. El diseño actual es útil si deseas poder llamar a la función sin proporcionar ningún parámetro, el otro puede ser útil cuando deseas asegurarte de que se pase un objeto a la función.</p> +</div> + +<h4 id="Desestructuración_de_arreglos_y_objetos_anidados">Desestructuración de arreglos y objetos anidados</h4> + +<pre class="brush:js notranslate">const metadata = { + title: 'Scratchpad', + translations: [ + { + locale: 'de', + localization_tags: [], + last_edit: '2020-08-29T08:43:37', + url: '/de/docs/Tools/Scratchpad', + title: 'JavaScript-Umgebung' + } + ], + url: '/es/docs/Tools/Scratchpad' +}; + +let { + title: englishTitle, // renombrar + translations: [ + { + title: localeTitle, // renombrar + }, + ], +} = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h4 id="Iteración_for...of_y_desestructuración">Iteración "<code>for...of</code>" y desestructuración</h4> + +<pre class="brush: js notranslate">const people = [ + { + name: 'Mike Smith', + family: { + mother: 'Jane Smith', + father: 'Harry Smith', + sister: 'Samantha Smith' + }, + age: 35 + }, + { + name: 'Tom Jones', + family: { + mother: 'Norah Jones', + father: 'Richard Jones', + brother: 'Howard Jones' + }, + age: 25 + } +]; + +for (const {name: n, family: {father: f}} of people) { + console.log('Nombre: ' + n + ', Padre: ' + f); +} + +// "Nombre: Mike Smith, Padre: Harry Smith" +// "Nombre: Tom Jones, Padre: Richard Jones" +</pre> + +<h4 id="Nombres_de_propiedades_de_objetos_calculados_y_desestructuración">Nombres de propiedades de objetos calculados y desestructuración</h4> + +<p>Los nombres de propiedad calculados, como en un {{jsxref("Operators/Object_initializer", "Objeto literal", "#Computed_property_names", 1)}}, se pueden usar con la desestructuración.</p> + +<pre class="brush: js notranslate">let key = 'z'; +let {[key]: foo} = {z: 'bar'}; + +console.log(foo); // "bar" +</pre> + +<h4 id="Rest_en_la_desestructuración_de_objetos"><code>Rest</code> en la desestructuración de objetos</h4> + +<p>La propuesta <a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Propiedades <code>rest</code>/propagación para ECMAScript</a> (etapa 4) agrega la sintaxis {{jsxref("Functions/rest_parameters", "rest", "", 1)}} para desestructurar. Las propiedades de <code>rest</code> recopilan las claves de propiedades enumerables restantes que aún no han sido seleccionadas por el patrón de desestructuración.</p> + +<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 }</pre> + +<h4 id="Identificador_de_JavaScript_no_válido_como_nombre_de_propiedad">Identificador de JavaScript no válido como nombre de propiedad</h4> + +<p>La desestructuración se puede utilizar con nombres de propiedad que no son {{Glossary("Identifier", "identificadores")}} válidos en JavaScript proporcionando un identificador alternativo que sea válido.</p> + +<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true" +</pre> + +<h4 id="Desestructuración_combinada_de_arreglos_y_objetos">Desestructuración combinada de arreglos y objetos</h4> + +<p>La desestructuración de arreglos y objetos se puede combinar. Supongamos que deseas manipular el tercer elemento del siguiente arreglo <code>props</code>, y luego deseas la propiedad <code>name</code> en el objeto, puedes hacer lo siguiente:</p> + +<pre class="brush: js notranslate">const props = [ + { id: 1, name: 'Fizz'}, + { id: 2, name: 'Buzz'}, + { id: 3, name: 'FizzBuzz'} +]; + +const [,, { name }] = props; + +console.log(name); // "FizzBuzz" +</pre> + +<h4 id="Se_busca_la_cadena_de_prototipos_al_desestructurar_el_objeto.">Se busca la cadena de prototipos al desestructurar el objeto.</h4> + +<p>Al deconstruir un objeto, si no se accede a una propiedad en sí misma, continuará buscando a lo largo de la cadena de prototipos.</p> + +<pre class="brush: js notranslate">let obj = {self: '123'}; +obj.__proto__.prot = '456'; +const {self, prot} = obj; +// self "123" +// prot "456" (Acceso a la cadena de prototipos)</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Desestructuración de asignación')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.operators.destructuring")}}</p> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Operators/Assignment_Operators", "Operadores de asignación", "", 1)}}</li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 en profundidad: Desestructuración" en hacks.mozilla.org</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/division/index.html b/files/es/web/javascript/reference/operators/division/index.html new file mode 100644 index 0000000000..d29816e37a --- /dev/null +++ b/files/es/web/javascript/reference/operators/division/index.html @@ -0,0 +1,77 @@ +--- +title: Division (/) +slug: Web/JavaScript/Referencia/Operadores/Division +tags: + - JS + - JavaScript + - Operador de Division + - Operadores + - Referências +translation_of: Web/JavaScript/Reference/Operators/Division +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de división (<code>/</code>) produce el cociente de sus operandos donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> + +<div></div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>x</var> / <var>y</var> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Division_basica">Division basica</h3> + +<pre class="brush: js notranslate">1 / 2 // 0.5 + +Math.floor(3 / 2) // 1 + +1.0 / 2.0 // 0.5 +</pre> + +<h3 id="Division_por_cero">Division por cero</h3> + +<pre class="brush: js notranslate">2.0 / 0 // Retorna Infinity + +2.0 / 0.0 // Retorna Infinity, Dado que 0.0 === 0 + +2.0 / -0.0 // Retorna -Infinity</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + + + +<p>{{Compat("javascript.operators.division")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/equality/index.html b/files/es/web/javascript/reference/operators/equality/index.html new file mode 100644 index 0000000000..c60efcaada --- /dev/null +++ b/files/es/web/javascript/reference/operators/equality/index.html @@ -0,0 +1,129 @@ +--- +title: Comparación (==) +slug: Web/JavaScript/Referencia/Operadores/Comparacion +tags: + - JS + - JavaScript + - Operador de comparacion + - Operadores + - Referências +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de comparacion (<code>==</code>) comprueba si sus dos operandos son iguales y devuelve un resultado booleano. A diferencia del operador de igualdad estricta (<code>===</code>), es que este convierte y compara operandos que son de diferentes tipos.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Los operadores de igualdad (<code>==</code>y <code>!=</code>) Utilizan el algoritmo de comparación de igualdad abstracta para comparar dos operandos. Esto se puede resumir a grandes rasgos como:</p> + +<ul> + <li>Si los operandos ambos son objetos, devuelve <code>true </code>solo si ambos operandos hacen referencia al mismo objeto.</li> + <li>Si un operando es <code>null</code>y el otro <code>undefined</code>, devuelve verdadero(<code>true</code>).</li> + <li>Si los operandos son de diferente tipos, intenta convertirlos al mismo tipo antes de comparar: + <ul> + <li>Al comparar un número con una cadena, convierte la cadena en un valor numérico.</li> + <li>Si uno de los operandos es booleano, convierte el operando booleano en 1 si es verdadero y en 0 en el caso de falso.</li> + <li>Si uno de los operandos es un objeto y el otro es un número o una cadena, convierte el objeto en una primitiva utilizando los métodos <code>valueOf()</code>y <code>toString()</code> del objeto.</li> + </ul> + </li> + <li>Si los operandos tienen el mismo tipo, se comparan de la siguiente manera: + <ul> + <li><code>String</code>: devuelve verdadero solo si ambos operandos tienen los mismos caracteres y en el mismo orden.</li> + <li><code>Number</code>: devuelve verdadero solo si ambos operandos tienen el mismo valor. <code>+0</code> y <code>-0</code> se tratan como el mismo valor. Si alguno de los operandos es <code>NaN</code>, devuelve falso.</li> + <li><code>Boolean</code>: retorna verdadero solo si ambos operandos son verdaderos o falsos.</li> + </ul> + </li> +</ul> + +<p>La diferencia más notable entre este operador y el operador de igualdad estricta (<code>===</code>) es que el operador de igualdad estricta no realiza la conversión de tipos. </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Comparación_sin_conversión_de_tipo">Comparación sin conversión de tipo</h3> + +<pre class="brush: js notranslate">1 == 1; // true +"Hola" == "Hola"; // true</pre> + +<h3 id="Comparación_con_conversión_de_tipos">Comparación con conversión de tipos</h3> + +<pre class="brush: js notranslate">"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true, Operador Logico NOT +0 == !!undefined; // true, Operador Logico NOT +null == undefined; // true + +const number1 = new Number(3); +const number2 = new Number(3); +number1 == 3; // true +number1 == number2; // false</pre> + +<h3 id="Comparación_de_objetos">Comparación de objetos</h3> + +<pre class="brush: js notranslate">const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 == object2 // false +object2 == object2 // true</pre> + +<h3 id="Comparar_String_y_objetos_String">Comparar String y objetos String</h3> + +<p>Tenga en cuenta que las cadenas construidas con <code>new String() </code>son objetos. Si compara uno de estos con un String literal, el objeto String se convertirá en un <code>String</code> literal y se comparará el contenido. Sin embargo, si ambos operandos son objetos de tipo String, entonces se comparan como objetos y deben hacer referencia al mismo objeto para que la comparación sea exitosa:</p> + +<pre class="brush: js notranslate">const string1 = "Hola"; +const string2 = String("Hola"); +const string3 = new String("Hola"); +const string4 = new String("Hola"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true</pre> + +<h3 id="Comparación_de_fechas_y_cadenas">Comparación de fechas y cadenas</h3> + +<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // Por ejemplo: "Sun Dec 17 1995 03:24:00 GMT-0800 (Hora estándar del Pacífico)" +console.log(d == s); //true</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + + + +<p>{{Compat("javascript.operators.equality")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strict equality operator</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strict inequality operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/function/index.html b/files/es/web/javascript/reference/operators/function/index.html new file mode 100644 index 0000000000..d5739239b2 --- /dev/null +++ b/files/es/web/javascript/reference/operators/function/index.html @@ -0,0 +1,73 @@ +--- +title: function +slug: Web/JavaScript/Referencia/Operadores/function +tags: + - Function + - JavaScript + - Operator + - Primary Expressions +translation_of: Web/JavaScript/Reference/Operators/function +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>El operador <code>function</code> define una función dentro de una expresión.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">function [<em>name</em>]([<em>param1</em>, <em>param2</em>, ..., <em>paramN</em>]) { + <em>statements</em> +} +</pre> + +<h2 id="Parameters" name="Parameters">Parámetros</h2> + +<dl> + <dt><code>name</code></dt> + <dd>El nombre de la función. Puede ser omitido, en cuyo caso la función es <em>anonymous</em>. El nombre sólo es local para el cuerpo de la función.</dd> +</dl> + +<dl> + <dt><code>paramN</code></dt> + <dd>El nombre de un argumento que será pasado a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Las declaraciones que conforman el cuerpo de la función.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>La expresión de una función es muy similar y tiene casi la misma sintaxis que la declaración de una función (véase {{jsxref("Sentencias/function", "function")}} para más detalles). Véase <a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a> para ver más información sobre las diferencias entre declaraciones de funciones y expresiones de funciones.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<p>El siguiente ejemplo define una función sin nombre y se le asigna a la variable x. La función devuelve como resultado el cuadrado de su argumento:</p> + +<pre class="brush: js">var x = function(y) { + return y * y; +}; +</pre> + +<h3 id="Expresión_de_función_nombrada">Expresión de función nombrada</h3> + +<p>Si quiere referirse a la función actual dentro del cuerpo de la función, debe crear una expresión de función nombrada. Luego, este nombre será local solo para el cuerpo de la función (alcance). Esto también evita usar la propiedad no estándar {{jsxref("Funciones/arguments/callee", "arguments.callee")}}.</p> + +<pre class="brush: js">var math = { + 'factorial': function factorial(n) { + if (n <= 1) + return 1; + return n * factorial(n - 1); + } +}; +</pre> + +<h2 id="See_also" name="See_also">Consulte también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> + <li>{{jsxref("Function")}}</li> + <li>Sentencias {{jsxref("Sentencias/function", "function")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/function_star_/index.html b/files/es/web/javascript/reference/operators/function_star_/index.html new file mode 100644 index 0000000000..9c38872b7e --- /dev/null +++ b/files/es/web/javascript/reference/operators/function_star_/index.html @@ -0,0 +1,91 @@ +--- +title: expresión function* +slug: Web/JavaScript/Referencia/Operadores/function* +tags: + - ECMAScript 2015 + - Expresión Primaria + - Function + - Iterator + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/function* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La palabra clave <strong><code>function*</code></strong> puede ser utilizada para definir una función generadora en una expresión.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-functionasteriskexpression.html")}}</div> + +<p class="hidden">El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio GitHub. Si le gustaría contribuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">function* [<em>nombre</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { + <em>sentencias</em> +}</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>nombre</code></dt> + <dd>Nombre de la función. Puede ser omitido, en cuyo caso la funcipón es <em>anínima</em>. El nombre sólo es local al cuerpo de la función.</dd> + <dt><code>paramN</code></dt> + <dd>Nombre de un parámetro a ser pasado a la función. Una función puede tener hasta 255 argumentos.</dd> + <dt><code>sentencias</code></dt> + <dd>Sentencias que componen el cuerpo de la función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Una expresión <code>function*</code> es muy similar y tiene casi la misma sintaxis que una {{jsxref('Statements/function*', 'function* statement')}}. La principal diferencia entre una expresión <code>function*</code> y una sentencia <code>function*</code> es el <em>nombre de la función</em>, que en expresiones <code>function*</code> puede ser omitido para creaar funciones generadoras <em>anónimas</em>. Para más información vea también el capítulo acerca de <a href="/en-US/docs/Web/JavaScript/Reference/Functions">funciones</a>.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo define una función generadora sin nombre y la asigna a <code>x</code>. La función produce el cuadrado de su argumento:</p> + +<pre class="brush: js">var x = function*(y) { + yield y * y; +}; +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición Inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada desde datos estructurados. Si usted desea contribuir a esos datos, por favor revise <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíenos un pull request.</div> + +<p>{{Compat("javascript.operators.function_star")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Statements/function*", "Sentencia function*")}}</li> + <li>Objeto {{jsxref("GeneratorFunction")}}</li> + <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">El protocolo iterable</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>Objeto {{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "Sentencia function")}}</li> + <li>{{jsxref("Operators/function", "Expresión function")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Funciones y alcance de funciones")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/grouping/index.html b/files/es/web/javascript/reference/operators/grouping/index.html new file mode 100644 index 0000000000..ec78e8518f --- /dev/null +++ b/files/es/web/javascript/reference/operators/grouping/index.html @@ -0,0 +1,128 @@ +--- +title: Operador de agrupación +slug: Web/JavaScript/Referencia/Operadores/Grouping +tags: + - Expresiones primarias + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de agrupación <code>( )</code> controla la precedencia de las expresiones a evaluar.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"> ( )</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>El operador de agrupación consiste en un par de paréntesis alrededor de la expresión (o sub-expresión) que sobrescribe el comportamiento por defecto de la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, lo que causa que expresiones con menor precedencia puedan ser evaluadas antes que expresiones con una mayor precedencia.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Sobrescribir la precedencia de operadores aritméticos por defecto para que se evalúe primero la adición y luego la multiplicación.</p> + +<pre class="brush:js">var a = 1; +var b = 2; +var c = 3; + +// precedencia por defecto +a + b * c // 7 +// es evaluada por defecto como: +a + (b * c) // 7 + +// ahora se sobrescribe la precedencia +// para que la adición se evalúe antes que la multiplicación +(a + b) * c // 9 + +// que es equivalente a: +a * c + b * c // 9 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>ECMAScript 1st Edition.</td> + <td>Estándar</td> + <td>Definición inicial. Implementado en JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.1.6', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-grouping-operator', 'The Grouping Operator')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Precedencia de operadores</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Operators/typeof", "typeof")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/in/index.html b/files/es/web/javascript/reference/operators/in/index.html new file mode 100644 index 0000000000..051056a25f --- /dev/null +++ b/files/es/web/javascript/reference/operators/in/index.html @@ -0,0 +1,139 @@ +--- +title: in +slug: Web/JavaScript/Referencia/Operadores/in +tags: + - JavaScript + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/in +--- +<div>{{jsSidebar("Operators")}}</div> + +<div>El <strong>operador <code>in</code></strong> devuelve <code>true</code> si la propiedad especificada está en el objeto especificado o su prototipo.</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre><code><em>prop</em> in <em>object</em></code></pre> + +<h3 id="Parámetros" name="Parámetros">Parámetros</h3> + +<dl> + <dt><code>prop</code></dt> + <dd>Una cadena o expresión númerica que representa el nombre de una propiedad o el índice de un array (lo que no sea un símbolo se forzará a string).</dd> +</dl> + +<dl> + <dt><code>object</code></dt> + <dd>El objeto (o su cadena de prototipo) sobre el que comprobar si contiene la propiedad con el nombre especificado.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Los siguientes ejemplos muestran algunos de los usos del operador <code>in</code>.</p> + +<pre class="brush:js">// Arrays +var arboles = new Array("secoya", "pino", "cedro", "roble", "arce"); +0 in arboles // devuelve true +3 in arboles // devuelve true +6 in arboles // devuelve false +"pino" in arboles // devuelve false (debe especificar el número de índice, + // no el valor del índice) +"length" in arboles // devuelve true (length es una propiedad de Array) + +// Objetos predefinidos +"PI" in Math // devuelve true + +// Objetos personalizados +var micoche = {marca: "Honda", modelo: "Accord", año: 1998}; +"marca" in micoche // devuelve true +"modelo" in micoche // devuelve true +</pre> + +<p>Debe especificar un objeto en el lado derecho del operador <code>in</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code> , pero no puede especificar una cadena literal.</p> + +<pre class="brush:js">var color1 = new String("verde"); +"length" in color1 // devuelve true + +var color2 = "coral"; +"length" in color2 // genera un error (color2 no es un objeto String) +</pre> + +<h3 id="Using_in_with_deleted_or_undefined_properties" name="Using_in_with_deleted_or_undefined_properties">Usando <code>in</code> con propiedades eliminadas o no definidas</h3> + +<p>Si se elimina una propiedad con el operador {{jsxref("Operadores/delete", "delete")}}, el operador <code>in</code> devuelve <code>false</code> para esa propiedad.</p> + +<pre class="brush:js">var micoche= {marca: "Honda", modelo: "Accord", año: 1998}; +delete micoche.marca; +"marca" in micoche; // devuelve false + +var arboles = new Array("secoya", "pino", "cedro", "roble", "arce"); +delete arboles[3]; +3 in arboles; // devuelve false +</pre> + +<p>Si se cambia una propiedad a {{jsxref("Objetos_globales/undefined", "undefined")}} pero no se elimina, el operador <code>in</code> devuelve true para esa propiedad.</p> + +<pre class="brush:js">var micoche = {marca: "Honda", modelo: "Accord", año: 1998}; +micoche.marca = undefined; +"marca" in micoche; // devuelve true +</pre> + +<pre class="brush:js">var arboles = new Array("secayo", "pino", "cedro", "roble", "arce"); +arboles[3] = undefined; +3 in arboles; // devuelve true +</pre> + +<h3 id="Inherited_properties" name="Inherited_properties">Propiedades heredadas</h3> + +<p>El operador <code>in</code> devuelve <code>true</code> para propiedades en la cadena del prototipo.</p> + +<pre class="brush:js">"toString" in {}; // devuelve true +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-relational-operators', 'Relational Operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-11.8.7', 'The in Operator')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.4.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + + + +<p>{{Compat("javascript.operators.in")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code></li> + <li><code><a href="/es-ES/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code></li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Reflect.has()")}}</li> + <li><a href="/en-US/docs/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/index.html b/files/es/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..dca4964faa --- /dev/null +++ b/files/es/web/javascript/reference/operators/index.html @@ -0,0 +1,280 @@ +--- +title: Expresiones y operadores +slug: Web/JavaScript/Referencia/Operadores +tags: + - Descripción + - JavaScript + - Operadores + - Operators + - Referencia +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators", "Operadores")}}</div> + +<p class="summary">Este capítulo documenta todos los operadores, expresiones y palabras clave del lenguaje JavaScript.</p> + +<h2 id="Expresiones_y_operadores_por_categoría">Expresiones y operadores por categoría</h2> + +<p>Para obtener una lista alfabética, consulta la barra lateral de la izquierda.</p> + +<h3 id="Expresiones_primarias">Expresiones primarias</h3> + +<p>Palabras clave básicas y expresiones generales en JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>La palabra clave <code>this</code> se refiere a una propiedad especial de un contexto de ejecución.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>La palabra clave <code>function</code> define una expresión de función.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>La palabra clave <code>class</code> define una expresión de clase.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>La palabra clave <code>function*</code> define una expresión de función generadora.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pausar y reanudar una función generadora.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegar a otra función generadora u objeto iterable.</dd> + <dt>{{jsxref("Operators/async_function", "async function")}}</dt> + <dd>La <code>async function</code> define una expresión de función asíncrona.</dd> + <dt>{{jsxref("Operators/await", "await")}}</dt> + <dd>Pausa y reanuda una función asíncrona y espera la resolución/rechazo de la promesa.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Iniciador de arreglo/sintaxis literal.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Iniciador de objeto/sintaxis literal.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Sintaxis de expresión regular literal.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Operador de agrupación.</dd> +</dl> + +<h3 id="Expresiones_del_lado_izquierdo">Expresiones del lado izquierdo</h3> + +<p>Los valores de la izquierda son el destino de una asignación.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Propiedad accessors", "", 1)}}</dt> + <dd>Los operadores miembro proporcionan acceso a una propiedad o método de un objeto<br> + (<code>object.property</code> y <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>El operador <code>new</code> crea una instancia auxiliado por un constructor.</dd> + <dt>{{jsxref("Operators/new%2Etarget", "new.target")}}</dt> + <dd>En los constructores, <code>new.target</code> se refiere al constructor que fue invocado por {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>La palabra clave <code>super</code> llama al constructor padre.</dd> + <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt> + <dd>La sintaxis de extensión permite expandir una expresión en lugares donde se esperan múltiples argumentos (para llamadas a funciones) o múltiples elementos (para arreglos literales).</dd> +</dl> + +<h3 id="Incremento_y_decremento">Incremento y decremento</h3> + +<p>Operadores de incremento sufijo/prefijo y decremento sufijo/prefijo.</p> + +<dl> + <dt>{{jsxref("Operators/Increment", "A++")}}</dt> + <dd>Operador de incremento sufijo.</dd> + <dt>{{jsxref("Operators/Decrement", "A--")}}</dt> + <dd>Operador de incremento sufijo.</dd> + <dt>{{jsxref("Operators/Increment", "A++")}}</dt> + <dd>Operador de incremento prefijo.</dd> + <dt>{{jsxref("Operators/Decrement", "--A")}}</dt> + <dd>Operador de decremento prefijo.</dd> +</dl> + +<h3 id="Operadores_unarios">Operadores unarios</h3> + +<p>Una operación unaria es una operación con un solo operando.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>El operador <code>delete</code> elimina una propiedad de un objeto.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>El operador <code>void</code> descarta el valor de retorno de una expresión.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>El operador <code>typeof</code> determina el tipo de un objeto dado.</dd> + <dt>{{jsxref("Operators/Unary_plus", "+")}}</dt> + <dd>El operador unario <code>más</code> convierte su operando al tipo <code>Number</code>.</dd> + <dt>{{jsxref("Operators/Unary_negation", "-")}}</dt> + <dd>El operador unario de negación convierte su operando al tipo <code>Number</code> y luego lo niega.</dd> + <dt>{{jsxref("Operators/Bitwise_NOT", "~")}}</dt> + <dd>Operador <code>NOT</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Logical_NOT", "!")}}</dt> + <dd>Operador <code>NOT</code> lógico.</dd> +</dl> + +<h3 id="Operadores_aritméticos">Operadores aritméticos</h3> + +<p>Los operadores aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y devuelven un solo valor numérico.</p> + +<dl> + <dt>{{jsxref("Operators/Addition", "+")}}</dt> + <dd>Operador de adición o suma.</dd> + <dt>{{jsxref("Operators/Subtraction", "-")}}</dt> + <dd>Operador de sustracción o resta.</dd> + <dt>{{jsxref("Operators/Division", "/")}}</dt> + <dd>Operador de división.</dd> + <dt>{{jsxref("Operators/Multiplication", "*")}}</dt> + <dd>Operador de multiplicación.</dd> + <dt>{{jsxref("Operators/Remainder", "%")}}</dt> + <dd>Operador de residuo.</dd> + <dt>{{jsxref("Operators/Exponentiation", "**")}}</dt> + <dd>Operador de exponenciación.</dd> +</dl> + +<h3 id="Operadores_relacionales">Operadores relacionales</h3> + +<p>Un operador de comparación compara sus operandos y devuelve un valor <code>Boolean</code> basado en si la comparación es verdadera o no.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>El operador <code>in</code> determina si un objeto tiene una determinada propiedad.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>El operador <code>instanceof</code> determina si un objeto es una instancia de otro objeto.</dd> + <dt>{{jsxref("Operators/Less_than", "<")}}</dt> + <dd>Operador menor que.</dd> + <dt>{{jsxref("Operators/Greater_than", ">")}}</dt> + <dd>Operador mayor que.</dd> + <dt>{{jsxref("Operators/Less_than_or_equal", "<=")}}</dt> + <dd>Operador menor o igual a.</dd> + <dt>{{jsxref("Operators/Greater_than_or_equal", ">=")}}</dt> + <dd>Operador mayor o igual a.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota: =></strong> no es un operador, sino la notación para {{jsxref("Functions/Arrow_functions", "Funciones de flecha")}}.</p> +</div> + +<h3 id="Operadores_de_igualdad">Operadores de igualdad</h3> + +<p>El resultado de evaluar un operador de igualdad siempre es de tipo <code>Boolean</code> basado en si la comparación es verdadera.</p> + +<dl> + <dt>{{jsxref("Operators/Equality", "==")}}</dt> + <dd>Operador de igualdad.</dd> + <dt>{{jsxref("Operators/Inequality", "!=")}}</dt> + <dd>Operador de desigualdad.</dd> + <dt>{{jsxref("Operators/Strict_equality", "===")}}</dt> + <dd>Operador de igualdad estricta.</dd> + <dt>{{jsxref("Operators/Strict_inequality", "!==")}}</dt> + <dd>Operador de desigualdad estricta.</dd> +</dl> + +<h3 id="Operadores_de_desplazamiento_de_bits">Operadores de desplazamiento de bits</h3> + +<p>Operaciones para cambiar todos los bits del operando.</p> + +<dl> + <dt>{{jsxref("Operators/Left_shift", "<<")}}</dt> + <dd>Operador de desplazamiento bit a bit a la izquierda.</dd> + <dt>{{jsxref("Operators/Right_shift", ">>")}}</dt> + <dd>Operador de desplazamiento bit a bit a la derecha.</dd> + <dt>{{jsxref("Operators/Unsigned_right_shift", ">>>")}}</dt> + <dd>Operador de desplazamiento bit a bit a la derecha sin signo.</dd> +</dl> + +<h3 id="Operadores_binarios_bit_a_bit">Operadores binarios bit a bit</h3> + +<p>Los operadores bit a bit tratan a sus operandos como un conjunto de 32 bits (ceros y unos) y devuelven valores numéricos estándar de JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_AND", "&")}}</dt> + <dd><code>AND</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Bitwise_OR", "|")}}</dt> + <dd><code>OR</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Bitwise_XOR", "^")}}</dt> + <dd><code>XOR</code> bit a bit.</dd> +</dl> + +<h3 id="Operadores_lógicos_binarios">Operadores lógicos binarios</h3> + +<p>Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un valor booleano.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_AND", "&&")}}</dt> + <dd><code>AND</code> lógico.</dd> + <dt>{{jsxref("Operators/Logical_OR", "||")}}</dt> + <dd><code>OR</code> lógico.</dd> +</dl> + +<h3 id="Operador_condicional_ternario">Operador condicional (ternario)</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>El operador condicional devuelve uno de dos valores según el valor lógico de la condición.</p> + </dd> +</dl> + +<h3 id="Operadores_de_asignación">Operadores de asignación</h3> + +<p>Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment", "=")}}</dt> + <dd>Operador de asignación.</dd> + <dt>{{jsxref("Operators/Multiplication_assignment", "*=")}}</dt> + <dd>Asignación de multiplicación.</dd> + <dt>{{jsxref("Operators/Division_assignment", "/=")}}</dt> + <dd>Asignación de división.</dd> + <dt>{{jsxref("Operators/Remainder_assignment", "%=")}}</dt> + <dd>Asignación de residuo.</dd> + <dt>{{jsxref("Operators/Addition_assignment", "+=")}}</dt> + <dd>Asignación de suma.</dd> + <dt>{{jsxref("Operators/Subtraction_assignment", "-=")}}</dt> + <dd>Asignación de sustracción</dd> + <dt>{{jsxref("Operators/Left_shift_assignment", "<<=")}}</dt> + <dd>Asignación de desplazamiento a la izquierda.</dd> + <dt>{{jsxref("Operators/Right_shift_assignment", ">>=")}}</dt> + <dd>Asignación de desplazamiento a la derecha.</dd> + <dt>{{jsxref("Operators/Unsigned_right_shift_assignment", ">>>=")}}</dt> + <dd>Asignación de desplazamiento a la derecha sin signo.</dd> + <dt>{{jsxref("Operators/Bitwise_AND_assignment", "&=")}}</dt> + <dd>Asignación de <code>AND</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Bitwise_XOR_assignment", "^=")}}</dt> + <dd>Asignación de <code>XOR</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Bitwise_OR_assignment", "|=")}}</dt> + <dd>Asignación de <code>OR</code> bit a bit.</dd> + <dt>{{jsxref("Operators/Logical_AND_assignment", "&&=")}}</dt> + <dd>Asignación de <code>AND</code> lógico.</dd> + <dt>{{jsxref("Operators/Logical_OR_assignment", "||=")}}</dt> + <dd>Asignación de <code>OR</code> lógico.</dd> + <dt>{{jsxref("Operators/Logical_nullish_assignment", "??=")}}</dt> + <dd>Asignación de anulación lógica.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>La desestructuración te permite asignar las propiedades de un arreglo u objeto a variables utilizando una sintaxis que se parece a los arreglos u objetos literales.</p> + </dd> +</dl> + +<h3 id="Operador_coma">Operador coma</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>El operador <code>coma</code> permite evaluar múltiples expresiones en una sola declaración y devuelve el resultado de la última expresión.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Operators/Operator_Precedence", "Operator de precedencia")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/instanceof/index.html b/files/es/web/javascript/reference/operators/instanceof/index.html new file mode 100644 index 0000000000..3b9a45162d --- /dev/null +++ b/files/es/web/javascript/reference/operators/instanceof/index.html @@ -0,0 +1,88 @@ +--- +title: instanceof +slug: Web/JavaScript/Referencia/Operadores/instanceof +tags: + - JavaScript + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El operador <strong><code>instanceof</code></strong> verifica si un objeto en su cadena de prototipos contiene la propiedad <code>prototype</code> de un constructor.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>objeto</em> instanceof <em>constructor</em></pre> + +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> + +<dl> + <dt><code>objeto</code></dt> + <dd>Objeto a verificar.</dd> +</dl> + +<dl> + <dt><code>constructor</code></dt> + <dd>Función contra la que se hará la verificación.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Utilice <code>instanceof</code> cuando necesite confirmar el tipo de un objeto en tiempo de ejecución. Por ejemplo, cuando controle excepciones, puede recurrir a diferentes códigos de manipulación de excepciones dependiendo del tipo de excepción tomada.</p> + +<p>Debe especificar un objeto en el lado derecho del operador <code>instanceof</code>. Por ejemplo, puede especificar una cadena creada con el constructor <code>String</code>, pero no puede especificar un literal de cadena.</p> + +<pre>color1=new String("verde") +color1 instanceof String // devuelve verdadero (true) +color2="coral" +color2 instanceof String // devuelve falso (color2 no es un objeto String) +</pre> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>También vea los ejemplos de {{jsxref("Sentencias/throw", "throw")}}.</p> + +<h4 id="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date" name="Ejemplo:_Determinando_si_elDia_es_un_objeto_Date">Ejemplo: Determinando si <code>elDia</code> es un objeto <code>Date</code></h4> + +<p>El siguiente código utiliza <code>instanceof</code> para determinar si <code>elDia</code> es un objeto <code>Date</code>. Debido a que <code>elDia</code> es un objeto <code>Date</code>, las instrucciones de la sentencia if se ejecutan.</p> + +<pre>elDia = new Date(1995, 12, 17) +if (elDia instanceof Date) { + // instrucciones a ejecutar +} +</pre> + +<h4 id="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object" name="Ejemplo:_Demostrando_que_String_y_Date_son_del_tipo_Object">Ejemplo: Demostrando que <code>String</code> y <code>Date</code> son del tipo <code>Object</code></h4> + +<p>El siguiente código utiliza <code>instanceof</code> para demostrar que los objetos <code>String</code> y <code>Date</code> son también del tipo <code>Object</code> (éstos se derivan de <code>Object</code>).</p> + +<pre>miCadena = new String() +miFecha = new Date() + +miCadena instanceof String // devuelve true +miCadena instanceof Object // devuelve true +miCadena instanceof Date // devuelve false + +miFecha instanceof Date // devuelve true +miFecha instanceof Object // devuelve true +miFecha instanceof String // devuelve false +</pre> + +<h4 id="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object" name="Ejemplo:_Demostrando_que_miCoche_es_del_tipo_Coche_y_del_tipo_Object">Ejemplo: Demostrando que <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code></h4> + +<p>El siguiente código crea un objeto del tipo <code>Coche</code> y una instancia de ese tipo de objeto, <code>miCoche</code>. El operador <code>instanceof</code> demuestra que el objeto <code>miCoche</code> es del tipo <code>Coche</code> y del tipo <code>Object</code>.</p> + +<pre>function Coche(fabricante, modelo, ejercicio) { + this.fabricante = fabricante + this.modelo = modelo + this.ejercicio= ejercicio +} +miCoche = new Coche("Honda", "Accord", 1998) +a = miCoche instanceof Coche // devuelve verdadero (true) +b = miCoche instanceof Object // devuelve verdadero (true) +</pre> + +<div class="noinclude"> </div> diff --git a/files/es/web/javascript/reference/operators/new.target/index.html b/files/es/web/javascript/reference/operators/new.target/index.html new file mode 100644 index 0000000000..0faa0f0878 --- /dev/null +++ b/files/es/web/javascript/reference/operators/new.target/index.html @@ -0,0 +1,139 @@ +--- +title: new.target +slug: Web/JavaScript/Referencia/Operadores/new.target +tags: + - Clases + - ECMAScript6 + - JavaScript + - Referencia +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>La propiedad<strong> <code>new.target</code></strong> te permite detectar si una función o constructor fue llamado usando el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>. En constructores y funciones instanciadas con el operador <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a>, <code>new.target</code> devuelve una referencia al constructor o función. En llamadas a funciones normales, <code>new.target</code> es {{jsxref("undefined")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">new.target</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sintaxis <code>new.target</code> consiste en el keyword <code>"new</code>", un punto, y el nombre de propiedad <code>"target"</code>. Normalmente "<code>new."</code> sirve como contexto para el acceso a la propiedad, pero aquí, <code>"new."</code> no es realmente un objeto. En llamadas a constructores, sin embargo, <code>new.target</code> hace referencia al constructor invocado por new por lo que "<code>new.</code>" se convierte en un contexto virtual.</p> + +<p>La propiedad <code>new.target</code> es una meta propiedad que está disponible para todas las funciones. En <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a>, <code>new.target</code> se refiere al <code>new.target</code> de la función que la contiene.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="new.target_en_llamadas_a_funciones">new.target en llamadas a funciones</h3> + +<p>En llamadas a funciones normales (en contraposición a llamadas a constructores), <code>new.target</code> es {{jsxref("undefined")}}. Esto te permite detectar si la función fue llamada con <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a> como constructor.</p> + +<pre class="brush: js">function Foo() { + if (!new.target) throw 'Foo() debe ser llamado con new'; + console.log('Foo instanciado con new'); +} + +Foo(); // Lanza "Foo() debe ser llamado con new" +new Foo(); // escribe en el log "Foo instanciado con new" +</pre> + +<h3 id="new.target_en_constructores">new.target en constructores</h3> + +<p>En constructores de clase, <code>new.target</code> hace referencia al constructor que fue directamente invocado por <code>new</code>. Este también es el caso si el constructor está en una clase padre y fue delegado desdes el constructor hijo.</p> + +<pre class="brush: js">class A { + constructor() { + console.log(new.target.name); + } +} + +class B extends A { constructor() { super(); } } + +var a = new A(); // escribe en el log "A" +var b = new B(); // escribe en el log "B" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estatus</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoDesktop(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + <td>{{CompatGeckoMobile(41)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(46.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones">Funciones</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes">Clases</a></li> + <li><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/new">new</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/new/index.html b/files/es/web/javascript/reference/operators/new/index.html new file mode 100644 index 0000000000..4635b12402 --- /dev/null +++ b/files/es/web/javascript/reference/operators/new/index.html @@ -0,0 +1,179 @@ +--- +title: Operador new +slug: Web/JavaScript/Referencia/Operadores/new +tags: + - Expresiones del lado izquierdo + - JavaScript + - Left-hand-side expressions + - Operador + - Operator + - Referencia +translation_of: Web/JavaScript/Reference/Operators/new +--- +<div>{{jsSidebar("Operators", "Operadores")}}</div> + +<p><span class="seoSummary">El <strong>operador <code>new</code></strong> permite a los desarrolladores crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados que tiene un función constructora.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">new <var>constructor</var>[([<var>arguments</var>])]</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code><var>constructor</var></code></dt> + <dd>Una clase o función que especifica el tipo de instancia del objeto.</dd> +</dl> + +<dl> + <dt><code><var>arguments</var></code></dt> + <dd>Una lista de valores con los que se llamará al <code><var>constructor</var></code>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La palabra clave <strong><code>new</code></strong> hace lo siguiente:</p> + +<ol> + <li>Crea un objeto JavaScript simple y en blanco;</li> + <li>Vincula (establece el constructor de) este objeto a otro objeto;</li> + <li>Pasa el objeto recién creado del <em>Paso 1</em> como el contexto <code>this</code>;</li> + <li>Devuelve <code>this</code> si la función no devuelve un objeto.</li> +</ol> + +<p>La creación de un objeto definido por el usuario requiere dos pasos:</p> + +<ol> + <li>Defina el tipo de objeto escribiendo una función.</li> + <li>Crea una instancia del objeto con <code>new</code>.</li> +</ol> + +<p>Para definir un tipo de objeto, crea una función para el tipo de objeto que especifique su nombre y propiedades. Un objeto puede tener una propiedad que en sí misma es otro objeto. Ve los siguientes ejemplos.</p> + +<p>Cuando se ejecuta el código <code>new <em>Foo</em>(...)</code>, sucede lo siguiente:</p> + +<ol> + <li>Se crea un nuevo objeto, heredado de <code><em>Foo</em>.prototype</code>.</li> + <li>La función constructora <code><em>Foo</em></code> se llama con los argumentos especificados y con {{JSxRef("Operators/this", "this")}} vinculado al objeto recién creado. <code>new <em>Foo</em></code> es equivalente a <code>new <em>Foo</em>()</code>, es decir, si no se especifica una lista de argumentos, <code><em>Foo</em></code> se llama sin argumentos.</li> + <li>El objeto (no nulo, <code>false</code>, 3.1415 u otros tipos primitivos) devuelto por la función constructora se convierte en el resultado de toda la expresión <code>new</code>. Si la función constructora no devuelve explícitamente un objeto, en su lugar se utiliza el objeto creado en el paso 1. (Normalmente, los constructores no devuelven un valor, pero pueden elegir hacerlo si quieren redefinir el proceso normal de creación de objetos).</li> +</ol> + +<p>Siempre puedes agregar una propiedad a un objeto definido previamente. Por ejemplo, la instrucción <code>car1.color = "black"</code> agrega una propiedad <code>color</code> a <code>car1</code> y le asigna un valor de "<code>black</code>". Sin embargo, esto no afecta a ningún otro objeto. Para agregar la nueva propiedad a todos los objetos del mismo tipo, debes agregar la propiedad a la definición del tipo de objeto <code>Car</code>.</p> + +<p>Puedes agregar una propiedad compartida a un tipo de objeto definido previamente mediante la propiedad {{JSxRef("Global_Objects/Function/prototype", "Function.prototype")}}. Esto define una propiedad que comparten todos los objetos creados con esa función, en lugar de solo una instancia del tipo de objeto. El siguiente código agrega una propiedad de color con el valor <code>"color original"</code> a todos los objetos de tipo <code>Car</code>, y luego redefine ese valor con la cadena "<code>black</code>" solo en la instancia <code>car1</code> del objeto. Para obtener más información, consulta {{JSxRef("Global_Objects/Function/prototype", "prototype")}}.</p> + +<pre class="brush: js notranslate">function Car() {} +car1 = new Car(); +car2 = new Car(); + +console.log(car1.color); // undefined + +Car.prototype.color = 'color original'; +console.log(car1.color); // 'color original' + +car1.color = 'black'; +console.log(car1.color); // 'black' + +console.log(Object.getPrototypeOf(car1).color); // 'color original' +console.log(Object.getPrototypeOf(car2).color); // 'color original' +console.log(car1.color); // 'black' +console.log(car2.color); // 'color original' +</pre> + +<div class="note"> +<p>Si no escribiste el operador <code>new</code>, <strong>la función <code>constructor</code> se invocará como cualquier función normal</strong>, <em>sin crear un objeto.</em> En este caso, el valor de <code>this</code> también es diferente.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Tipo_de_objeto_e_instancia_de_objeto">Tipo de objeto e instancia de objeto</h3> + +<p>Supongamos que deseas crear un tipo de objeto para <code>cars</code>. Quieres que este tipo de objeto se llame <code>Car</code>, y quieres que tenga propiedades para marca, modelo y año (<code>make</code>, <code>model</code> y <code>year</code> en inglés respectivamente). Para ello, podrías escribir la siguiente función:</p> + +<pre class="brush: js notranslate">function Car(make, model, year) { + this.make = make; + this.model = model; + this.year = year; +} +</pre> + +<p>Ahora puedes crear un objeto llamado <code>myCar</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var myCar = new Car('Eagle', 'Talon TSi', 1993); +</pre> + +<p>Esta declaración crea <code>myCar</code> y le asigna los valores especificados para sus propiedades. Entonces el valor de <code>myCar.make</code> es la cadena "Eagle", <code>myCar.year</code> es el entero 1993, y así sucesivamente.</p> + +<p>Puedes crear cualquier número de objetos <code>car</code> mediante llamadas a <code>new</code>. Por ejemplo:</p> + +<pre class="brush: js notranslate">var kensCar = new Car('Nissan', '300ZX', 1992); +</pre> + +<h3 id="Propiedad_del_objeto_que_en_sí_mismo_es_otro_objeto">Propiedad del objeto que en sí mismo es otro objeto</h3> + +<p>Supongamos que defines un objeto llamado <code>Person</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +</pre> + +<p>Y luego creas una instancia de dos nuevos objetos <code>Person</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McNally', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Luego, puedes reescribir la definición de <code>Car</code> para incluir una propiedad para <code>owner</code> (propietario en español) que tome un objeto <code>Person</code>, de la siguiente manera:</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; +} +</pre> + +<p>Para crear instancias de los nuevos objetos, utiliza lo siguiente:</p> + +<pre class="brush: js notranslate">var car1 = new Car('Eagle', 'Talon TSi', 1993, rand); +var car2 = new Car('Nissan', '300ZX', 1992, ken); +</pre> + +<p>En lugar de pasar una cadena literal o un valor entero al crear los nuevos objetos, las declaraciones anteriores pasan los objetos <code>rand</code> y <code>ken</code> como parámetros para los propietarios. Para conocer el nombre del propietario de <code>car2</code>, puedes acceder a la siguiente propiedad:</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-new-operator', 'El operador new')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.operators.new")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Function", "Funciones")}}</li> + <li>{{jsxref("Reflect.construct()")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/operator_precedence/index.html b/files/es/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..2ff0464afd --- /dev/null +++ b/files/es/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,297 @@ +--- +title: Precedencia de operadores +slug: Web/JavaScript/Referencia/Operadores/Operator_Precedence +tags: + - JavaScript + - Operator + - operator details + - operator precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Summary" name="Summary">Sumario</h2> + +<p>La precedencia de operadores determina el orden en el cual los operadores son evaluados. Los operadores con mayor precedencia son evaluados primero.</p> + +<p>Ejemplo:</p> + +<pre class="brush: js">3 + 4 * 5 // retorna 23 +</pre> + +<p>El operador de multiplicación ("*") tiene una precedencia mas alta que el operador de suma ("+") y por eso sera evaluado primero.</p> + +<h2 id="Associativity" name="Associativity">Asociatividad</h2> + +<p>La asociatividad determina el orden en el cual los operadores con el mismo nivel de precedencia son procesados. Por ejemplo:</p> + +<pre class="brush: js">a OP b OP c +</pre> + +<p>La asociatividad de izquierda a derecha significa que esa expresión es procesada como <code>(a OP b) OP c, </code>mientras que la asociatividad de derecha a izquierda significa que es procesada como a<code> OP (b OP c). </code>Los operadores de asignación tienen asociatividad de derecha a izquierda, por lo que puedes escribir:</p> + +<pre class="brush: js">a = b = 5; +</pre> + +<p>para asignar 5 a las dos variables. Esto es porque el operador de asignación retorna el valor que asignó. Primero <code>b</code> es inicializada a 5. Despues <code>a</code> es inicializada al valor de <code>b</code>.</p> + +<h2 id="Table" name="Table">Tabla</h2> + +<p>La siguiente tabla esta ordenada de la precedencia más alta (0) a la más baja (18).</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Precedencia</th> + <th>Tipo de operador</th> + <th>Asociatividad</th> + <th>Operador</th> + </tr> + <tr> + <td>0</td> + <td>grouping</td> + <td>n/a</td> + <td><code>(</code>…<code>)</code></td> + </tr> + <tr> + <td rowspan="3">1</td> + <td rowspan="2"><a href="/en-US/docs/JavaScript/Reference/Operators/Member_Operators" title="JavaScript/Reference/Operators/Member_Operators">member</a></td> + <td rowspan="2">left-to-right</td> + <td>…<code>.<var>…</var></code></td> + </tr> + <tr> + <td>…<code>[<var>…</var>]</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td> + <td>n/a</td> + <td><code>new</code> … <code>(<var>…</var>)</code></td> + </tr> + <tr> + <td rowspan="2">2</td> + <td><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">function call</a></td> + <td>left-to-right</td> + <td>…<code>(<var>…</var>)</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a></td> + <td>right-to-left</td> + <td><code>new</code> …</td> + </tr> + <tr> + <td rowspan="2">3</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">increment</a></td> + <td>n/a</td> + <td>…<code>++</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">decrement</a></td> + <td>n/a</td> + <td>…<code>--</code></td> + </tr> + <tr> + <td rowspan="7">4</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-not</a></td> + <td>right-to-left</td> + <td><code>!</code>…</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise not</a></td> + <td>right-to-left</td> + <td><code>~</code>…</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary +</a></td> + <td>right-to-left</td> + <td><code>+</code>…</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">unary negation</a></td> + <td>right-to-left</td> + <td><code>-</code>…</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + <td>right-to-left</td> + <td><code>typeof</code> …</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + <td>right-to-left</td> + <td><code>void</code> …</td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + <td>right-to-left</td> + <td><code>delete</code> …</td> + </tr> + <tr> + <td rowspan="3">5</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">multiplication</a></td> + <td>left-to-right</td> + <td><code>*</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">division</a></td> + <td>left-to-right</td> + <td><code>/</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">modulus</a></td> + <td>left-to-right</td> + <td><code>%</code></td> + </tr> + <tr> + <td rowspan="2">6</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">addition</a></td> + <td>left-to-right</td> + <td><code>+</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators" title="JavaScript/Reference/Operators/Arithmetic_Operators">subtraction</a></td> + <td>left-to-right</td> + <td><code>-</code></td> + </tr> + <tr> + <td rowspan="3">7</td> + <td rowspan="3"><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise shift</a></td> + <td rowspan="3">left-to-right</td> + <td><code><<</code></td> + </tr> + <tr> + <td><code>>></code></td> + </tr> + <tr> + <td><code>>>></code></td> + </tr> + <tr> + <td rowspan="6">8</td> + <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">relational</a></td> + <td rowspan="4">left-to-right</td> + <td><code><</code></td> + </tr> + <tr> + <td><code><=</code></td> + </tr> + <tr> + <td><code>></code></td> + </tr> + <tr> + <td><code>>=</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + <td>left-to-right</td> + <td><code>in</code></td> + </tr> + <tr> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + <td>left-to-right</td> + <td><code>instanceof</code></td> + </tr> + <tr> + <td rowspan="4">9</td> + <td rowspan="4"><a href="/en-US/docs/JavaScript/Reference/Operators/Comparison_Operators" title="JavaScript/Reference/Operators/Comparison_Operators">equality</a></td> + <td rowspan="4">left-to-right</td> + <td><code>==</code></td> + </tr> + <tr> + <td><code>!=</code></td> + </tr> + <tr> + <td><code>===</code></td> + </tr> + <tr> + <td><code>!==</code></td> + </tr> + <tr> + <td>10</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-and</a></td> + <td>left-to-right</td> + <td><code>&</code></td> + </tr> + <tr> + <td>11</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-xor</a></td> + <td>left-to-right</td> + <td><code>^</code></td> + </tr> + <tr> + <td>12</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">bitwise-or</a></td> + <td>left-to-right</td> + <td><code>|</code></td> + </tr> + <tr> + <td>13</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-and</a></td> + <td>left-to-right</td> + <td><code>&&</code></td> + </tr> + <tr> + <td>14</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Logical_Operators" title="JavaScript/Reference/Operators/Logical_Operators">logical-or</a></td> + <td>left-to-right</td> + <td><code>||</code></td> + </tr> + <tr> + <td>15</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">conditional</a></td> + <td>right-to-left</td> + <td>… <code>?</code> … <code>:</code> …</td> + </tr> + <tr> + <td rowspan="12">16</td> + <td rowspan="12"><a href="/en-US/docs/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">assignment</a></td> + <td rowspan="12">right-to-left</td> + <td><code>=</code></td> + </tr> + <tr> + <td><code>+=</code></td> + </tr> + <tr> + <td><code>-=</code></td> + </tr> + <tr> + <td><code>*=</code></td> + </tr> + <tr> + <td><code>/=</code></td> + </tr> + <tr> + <td><code>%=</code></td> + </tr> + <tr> + <td><code><<=</code></td> + </tr> + <tr> + <td><code>>>=</code></td> + </tr> + <tr> + <td><code>>>>=</code></td> + </tr> + <tr> + <td><code>&=</code></td> + </tr> + <tr> + <td><code>^=</code></td> + </tr> + <tr> + <td><code>|=</code></td> + </tr> + <tr> + <td>17</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td>right-to-left</td> + <td><code>yield</code>…</td> + </tr> + <tr> + <td>18</td> + <td><a href="/en-US/docs/JavaScript/Reference/Operators/Special/Comma_Operator" title="JavaScript/Reference/Operators/Special_Operators/Comma_Operator">comma</a></td> + <td>left-to-right</td> + <td><code>,</code></td> + </tr> + </tbody> +</table> + +<p></p> diff --git a/files/es/web/javascript/reference/operators/optional_chaining/index.html b/files/es/web/javascript/reference/operators/optional_chaining/index.html new file mode 100644 index 0000000000..06ccb5a999 --- /dev/null +++ b/files/es/web/javascript/reference/operators/optional_chaining/index.html @@ -0,0 +1,187 @@ +--- +title: Encadenamiento opcional +slug: Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional +translation_of: Web/JavaScript/Reference/Operators/Optional_chaining +--- +<div>{{JSSidebar("Operators")}}</div> + +<p>El operador de <strong>encadenamiento opcional</strong> <strong><code>?.</code></strong> permite leer el valor de una propiedad ubicada dentro de una cadena de objetos conectados sin tener que validar expresamente que cada referencia en la cadena sea válida. <span class="seoSummary">El operador <code>?.</code> funciona de manera similar a el operador de encadenamiento <code>.</code>, excepto que en lugar de causar un error si una referencia es <a href="/en-US/docs/Glossary/nullish">casi-nula</a> ({{JSxRef("null")}} o {{JSxRef("undefined")}}), la expresión hace una evaluación de circuito corto con un valor de retorno de <code>undefined</code>.</span> Cuando se usa con llamadas a funciones, devuelve <code>undefined</code> si la función dada no existe.</p> + +<p>Esto da como resultado expresiones más cortas y simples cuando se accede a propiedades encadenadas dónde existe la posibilidad de que falte una referencia. También puede ser útil al explorar el contenido de un objeto cuando no hay una garantía conocida de qué propiedades se requieren.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-optionalchainingoperator.html", "taller")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><var>obj</var>?.<var>prop</var> +<var>obj</var>?.[<var>expr</var>] +<em>arr</em>?.[<var>index</var>] +<var>func</var>?.(<var>args</var>) +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>El operador de encadenamiento opcional proporciona una forma de simplificar el acceso a los valores a través de objetos conectados cuando es posible que una referencia o función sea <code>undefined</code> o <code>null</code>.</p> + +<p>Por ejemplo, considere un objeto <code>obj</code> que tiene una estructura anidada. Sin encadenamiento opcional, buscar una subpropiedad profundamente anidada requiere validar las referencias intermedias, como:</p> + +<pre class="brush: js">let nestedProp = obj.first && obj.first.second; +</pre> + +<p>Se confirma que el valor de <code>obj.first</code> no es <code>null</code> (y no es <code>undefined</code>) antes de acceder al valor de <code>obj.first.second</code>. Esto evita el error que ocurriría si simplemente accediera a <code>obj.first.second</code> directamente sin probar <code>obj.first</code>.</p> + +<p>Sin embargo, con el operador de encadenamiento opcional (<code>?.</code>), No tiene que probar explícitamente, ni realizar una evaluación de circuito corto basada en el estado de <code>obj.first</code> antes de intentar acceder a <code>obj.first.second</code>:</p> + +<pre class="brush: js">let nestedProp = obj.first?.second; +</pre> + +<p>Al usar el operador <code>?.</code> en lugar de solo el <code>.</code>, JavaScript sabe verificar implícitamente para asegurarse de que <code>obj.first</code> no es <code>null</code> o <code>undefined</code> antes de intentar acceder <code>obj.first.second</code>. Si <code>obj.first</code> es <code>null</code> o <code>undefined</code>, la expresión hace una evaluación de circuito corto automáticamente y retorna <code>undefined</code>.</p> + +<p>Esto es equivalente a lo siguiente, excepto que la variable temporal es de hecho no creada:</p> + +<pre class="brush: js">let temp = obj.first; +let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second); +</pre> + +<h3 id="Encadenamiento_opcional_con_llamadas_a_funciones">Encadenamiento opcional con llamadas a funciones</h3> + +<p>Puede usar el encadenamiento opcional cuando intente llamar a un método que puede no existir. Esto puede ser útil, por ejemplo, cuando se usa una API en la que un método podría no estar disponible, ya sea debido a la antigüedad de la implementación o debido a una característica que no está disponible en el dispositivo del usuario.</p> + +<p>El uso de encadenamiento opcional con llamadas a funciones hace que la expresión regrese automáticamente <code>undefined</code> en lugar de lanzar una excepción si no se encuentra el método:</p> + +<pre class="brush: js">let result = someInterface.customMethod?.();</pre> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Si hay una propiedad con ese nombre y que no es una función, usar <code>?.</code> aún levantará una excepción {{JSxRef("TypeError")}} (<code>x.y</code><code> is not a function</code>).</p> +</div> + +<h4 id="Manejo_de_callbacks_opcionales_o_manejadores_de_eventos">Manejo de callbacks opcionales o manejadores de eventos</h4> + +<p>Si utiliza callbacks o métodos de recuperación de un objeto con<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring"> una asignación de desestructuración</a>, es posible que tenga valores inexistentes que no puede llamar como funciones a menos que haya probado su existencia. Usando <code>?.</code>, Puede evitar esta prueba adicional:</p> + +<pre class="brush: js">// Escrito a partir de ES2019 +function doSomething(onContent, onError) { + try { + // ... hacer algo con los datos + } + catch (err) { + if (onError) { // Probando si onError realmente existe + onError(err.message); + } + } +} +</pre> + +<pre class="brush: js">// Usando encadenamiento opcional con llamado de funciones +function doSomething(onContent, onError) { + try { + // ... hacer algo con los datos + } + catch (err) { + onError?.(err.message); // Sin excepción si onError esta undefined + } +} +</pre> + +<h3 id="Encadenamiento_opcional_con_expresiones">Encadenamiento opcional con expresiones</h3> + +<p>También puede usar el operador de encadenamiento opcional al acceder a propiedades con una expresión usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Bracket_notation">la notación de corchetes</a>:</p> + +<pre class="brush: js">let nestedProp = obj?.['prop' + 'Name']; +</pre> + +<h3 id="El_encadenamiento_opcional_no_es_válido_al_lado_izquierdo_de_una_asignación">El encadenamiento opcional no es válido al lado izquierdo de una asignación</h3> + +<pre class="brush: js"><code>let object = {}; +object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment</code></pre> + +<h3 id="Acceso_a_elementos_de_un_arreglo_con_encadenamiento_opcional">Acceso a elementos de un arreglo con encadenamiento opcional</h3> + +<pre class="brush: js">let arrayItem = arr?.[42];</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico">Ejemplo básico</h3> + +<p>Este ejemplo busca el valor de la propiedad <code>name</code> para el miembro <code>bar</code> en un mapa cuando no existe dicho miembro. El resultado es por lo tanto es <code>undefined</code>.</p> + +<pre class="brush: js">let myMap = new Map(); +myMap.set("foo", {name: "baz", desc: "inga"}); + +let nameBar = myMap.get("bar")?.name;</pre> + +<h3 id="Evaluación_de_circuito_corto">Evaluación de circuito corto</h3> + +<p>Cuando se usa el encadenamiento opcional con expresiones, si el operando izquierdo es <code>null</code> o <code>undefined</code>, la expresión no se evaluará. Por ejemplo:</p> + +<pre class="brush: js">let potentiallyNullObj = null; +let x = 0; +let prop = potentiallyNullObj?.[x++]; + +console.log(x); // 0 como x no se incrementó +</pre> + +<h3 id="Apilando_el_operador_de_encadenamiento_opcional">Apilando el operador de encadenamiento opcional</h3> + +<p>Con estructuras anidadas, es posible usar encadenamiento opcional varias veces:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { + age: 82, + location: "Paradise Falls" // "detailed address" es desconocida + } +}; +let customerCity = customer.details?.address?.city; + +// … esto también funciona con la función opcional de encadenamiento +let duration = vacations.trip?.getTime?.(); +</pre> + +<h3 id="Combinando_con_el_operador_de_fusión_nulo">Combinando con el operador de fusión nulo</h3> + +<p>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "operador de fusión nulo", '', 1)}} se puede usar después del encadenamiento opcional para generar un valor predeterminado cuando no se encontró ninguno:</p> + +<pre class="brush: js">let customer = { + name: "Carl", + details: { age: 82 } +}; +const customerCity = customer?.city ?? "Unknown city"; +console.log(customerCity); // Unknown city</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-OptionalExpression', 'optional expression')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("javascript.operators.optional_chaining")}}</p> +</div> + +<h3 id="Progreso_de_implementación">Progreso de implementación</h3> + +<p>La siguiente tabla proporciona un estado de implementación diaria para esta característica, porque esta característica aún no ha alcanzado la estabilidad entre navegadores. Los datos se generan ejecutando las pruebas de características relevantes en <a href="https://github.com/tc39/test262">Test262</a>, el conjunto de pruebas estándar de JavaScript, en la compilación nocturna o la última versión del motor de JavaScript de cada navegador.</p> + +<div>{{EmbedTest262ReportResultsTable("optional-chaining")}}</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>El {{JSxRef("Operators/Nullish_Coalescing_Operator", "Nullish Coalescing Operator", '', 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/pipeline_operator/index.html b/files/es/web/javascript/reference/operators/pipeline_operator/index.html new file mode 100644 index 0000000000..cb671264cc --- /dev/null +++ b/files/es/web/javascript/reference/operators/pipeline_operator/index.html @@ -0,0 +1,78 @@ +--- +title: Operador Pipeline +slug: Web/JavaScript/Referencia/Operadores/Pipeline_operator +tags: + - Encadenamiento + - Experimental + - JavaScript + - Operador + - Pipeline +translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator +--- +<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> + +<p>El operador experimental pipeline <code>|></code> (actualmente en su fase1) conduce el valor de una expresión dentro de una función. Esto permite la creación de llamadas de función en cadena de un modo más legible. El resultado es una simplificación sintáctica en la cual la llamada a una función con un único parámetro puede ser escrita del siguiente modo:</p> + +<pre class="brush: js">let url = "%21" |> decodeURI;</pre> + +<p>La llamada equivalente en sintaxis tradicional tiene este aspecto:</p> + +<pre class="brush: js">let url = decodeURI("%21"); +</pre> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><em>expression</em> |> <em>function</em> +</pre> + +<p>El valor especificado en la <code>expression</code> se pasa dentro de la <code>function</code> como su único parámetro.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Encadenando_llamadas_a_funciones">Encadenando llamadas a funciones</h3> + +<p>El operador pipeline puede mejorar la legibilidad cuando se encadenan varias funciones entre si.</p> + +<pre class="brush: js">const double = (n) => n * 2; +const increment = (n) => n + 1; + +// sin operador pipeline +double(increment(double(double(5)))); // 42 + +// con operador pipeline +5 |> double |> double |> increment |> double; // 42 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Borrador del operador Pipeline</a></td> + <td>Fase 1</td> + <td>Todavía no forma parte de la especificación ECMAScript</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div> +<div class="hidden">La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si quieres contribuir a estos datos, por favor consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y mándanos una pull request.</div> + +<p>{{Compat("javascript.operators.pipeline")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://github.com/tc39/proposal-pipeline-operator">Github - Proposal-pipeline-operator</a></li> + <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/property_accessors/index.html b/files/es/web/javascript/reference/operators/property_accessors/index.html new file mode 100644 index 0000000000..565a8b7f92 --- /dev/null +++ b/files/es/web/javascript/reference/operators/property_accessors/index.html @@ -0,0 +1,85 @@ +--- +title: Miembros +slug: Web/JavaScript/Referencia/Operadores/Miembros +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators/Property_Accessors +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Los operadores de miembros proporcionan acceso a las propiedades y métodos de un objeto.</p> + +<p>Un objeto es en realidad un<em> arreglo asociativo</em> (por ejemplo<em> map</em> ,<em>dictionary</em> ,<em>hash</em> ,<em>lookup table</em> ). Las <em>claves</em> en este arreglo son los nombres de las propiedades y los métodos (propiedades que hacen referencia a funciones). Hay dos modos de acceder a estas propiedades: notación por punto y notación por corchete (es decir, operador de subscripción).</p> + +<p>Nota: La especificación <a href="/es/docs/Glossary/ECMAScript">ECMAScript</a> etiqueta estos operadores como "property accessors" en vez de "operadores de miembro" (member operators).</p> + +<h3 id="Notaci.C3.B3n_por_punto" name="Notaci.C3.B3n_por_punto">Notación por punto</h3> + +<pre class="brush: js">get = objeto.propiedad; +objeto.propiedad = set; +</pre> + +<p><code>propiedad</code> debe ser un identificador válido de JavaScript, esto es, una secuencia alfanumérica de caracteres, incluyendo también el guión bajo ("<code>_</code>") y el signo dolar ("<code>$</code>"), que no puede comenzar por un número. Por ejemplo, <code>objeto.$1</code> es válido, mientras que <code>objeto.1</code> no lo es.</p> + +<p>Ejemplo:</p> + +<pre class="brush: js">document.createElement('pre'); +</pre> + +<p>Aquí, el método llamado "createElement" se recupera de <code>document</code> y se le llama.</p> + +<h3 id="Notaci.C3.B3n_por_corchetes" name="Notaci.C3.B3n_por_corchetes">Notación por corchetes</h3> + +<pre class="brush: js">get = objeto[nombre_propiedad]; +objeto[nombre_propiedad] = set; +</pre> + +<p><code>nombre_propiedad</code> es una cadena. La cadena no tiene que ser un identificador válido; puede tener cualquier valor, por ejemplo "1foo", "!bar!", o incluso " " (un espacio).</p> + +<p>Ejemplo:</p> + +<pre class="brush: js">document['createElement']('pre'); +</pre> + +<p>Esto hace exactamente lo mismo que el ejemplo anterior.</p> + +<h3 id="Nombres_de_propiedades" name="Nombres_de_propiedades">Nombres de propiedades</h3> + +<p>Los nombres de propiedades deben ser cadenas. Esto significa que no pueden usarse objetos distintos a cadenas como claves en un objeto. Cualquier objeto que no sea una cadena, incluyendo números, se convierte al tipo cadena a través de su método {{jsxref("Object.toString")}}.</p> + +<p>Ejemplos:</p> + +<pre class="brush: js">var objeto = {}; +objeto['1'] = 'valor'; +alert(objeto[1]); +</pre> + +<p>Ésto tendrá como resultado "valor", ya que 1 se convertirá por tipo a '1'.</p> + +<pre class="brush: js">var foo = {propiedad_unica: 1}, bar = {propiedad_unica: 2}, objeto = {}; +objeto[foo] = 'valor'; +alert(objeto[bar]); +</pre> + +<p>Ésto también tiene como resultado "valor", ya que tanto foo como bar se convierten a la misma cadena. En el motor de JavaScript <a href="/es/docs/Mozilla/SpiderMonkey">SpiderMonkey</a>, esta cadena sería "{{ mediawiki.external('objeto Object') }}".</p> + +<h3 id="Enlace_a_m.C3.A9todos" name="Enlace_a_m.C3.A9todos">Enlace a métodos</h3> + +<p>Un método no está enlazado al objeto del que es método. Específicamente, <code>this</code> no está establecido en un método, es decir, <code>this</code> no se refiere necesariamente a un objeto conteniendo el método. <code>this</code>, en cambio, se "pasa" mediante la llamada de función.</p> + +<p>Vea <a href="/es/docs/Web/JavaScript/Referencia/Operadores/this#Funciones_enlazadas">enlace a métodos</a>.</p> + +<h3 id="Nota_sobre_eval" name="Nota_sobre_eval">Nota sobre <code>eval</code></h3> + +<p>Los principiantes en JavaScript a menudo tienen el error de usar {{jsxref("eval")}} cuando la notación por corchetes puede usarse a cambio. Por ejemplo, la siguiente sintaxis se ve a menudo en muchos scripts.</p> + +<pre class="brush: js">x = eval('document.nombre_formulario.' + cadenaControlFormulario + '.value'); +</pre> + +<p><code>eval</code> es lenta y se debería evitar en la medida de lo posible. Es mejor usar la notación por corchetes a cambio:</p> + +<pre class="brush: js">x = document.nombre_formulario[cadenaControlFormulario].value; +</pre> diff --git a/files/es/web/javascript/reference/operators/remainder/index.html b/files/es/web/javascript/reference/operators/remainder/index.html new file mode 100644 index 0000000000..1a6a7c56da --- /dev/null +++ b/files/es/web/javascript/reference/operators/remainder/index.html @@ -0,0 +1,82 @@ +--- +title: Resto (%) +slug: Web/JavaScript/Referencia/Operadores/Resto +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador resto (<code>%</code>) devuelve el resto de la división entre dos operandos. Siempre toma el signo del dividendo.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> + +<div></div> + +<p class="hidden">El código fuente para este ejemplo interactivo se encuentra en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivas, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y realiza un pull request.</p> + +<p>Tener en cuenta que en la mayoría de los lenguajes de programación, el operador de resto es ‘%’, pero en otros (como <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python, Perl</a>) es el operador módulo. Ambos son iguales para valores positivos, pero cuando el divisor y el dividendo son de signos distintos, se obtienen distintos resultados. Para obtener el módulo en JavaScript, en lugar de <code>a % n</code>, usa <code>((a % n ) + n ) % n</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Resto_con_dividendo_positivo">Resto con dividendo positivo</h3> + +<pre class="brush: js notranslate"> 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +</pre> + +<h3 id="Resto_con_dividendo_negativo">Resto con dividendo negativo</h3> + +<pre class="brush: js notranslate">-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0</pre> + +<h3 id="Resto_con_NaN">Resto con NaN</h3> + +<pre class="brush: js notranslate">NaN % 2 // NaN</pre> + +<h3 id="Resto_con_Infinity">Resto con Infinity</h3> + +<pre class="brush: js notranslate">Infinity % 2 // NaN +Infinity % 0 // NaN +Infinity % Infinity // NaN +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.operators.remainder")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/spread_syntax/index.html b/files/es/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..5a17cd05a2 --- /dev/null +++ b/files/es/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,242 @@ +--- +title: Sintáxis Spread +slug: Web/JavaScript/Referencia/Operadores/Sintaxis_Spread +tags: + - ECMAScript6 + - Iteradores + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>La sintaxis extendida o spread</strong> <strong>syntax</strong> permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_Array">Array literales</a>) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales">literales Tipo Objeto</a>) son esperados.</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<div></div> + +<p class="hidden">La fuente para este ejemplo interactivo está almacenada en el repositorio de GitHub. Si quieres contribuir al proyecto interactivo de ejemplos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de descarga (pull).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Para llamadas de funciones:</p> + +<pre class="syntaxbox notranslate">myFunction(...iterableObj); +</pre> + +<p>Para arreglos literales o cadenas de caracteres:</p> + +<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> + +<p>Para objetos literales (nuevo en ECMAScript 2018):</p> + +<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Spread_en_llamadas_de_función">Spread en llamadas de función</h3> + +<h4 id="Reemplaza_apply">Reemplaza "apply"</h4> + +<p>Es frecuente usar {{jsxref( "Function.prototype.apply")}} en casos donde quieres usar los elementos de un arreglo como argumentos de una función.</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Con la sintaxis expandida (spread syntax), el código anterior puede ser escrito como:</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Cualquier argumento en la lista de argumentos puede usar la sintáxis expandida y esto puede ser usado varias veces.</p> + +<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_para_new">"Apply" para "new"</h4> + +<p>Cuando se llama un constructor con <code>new</code>, no es posible usar <strong>directamente</strong> un arreglo y <code>apply</code> (<code>apply</code> hace un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). Sin embargo, un arreglo puede ser fácilmente usado con un new gracias a la sintáxis expandida:</p> + +<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>Para usar <strong>new </strong>con un arreglo de parámetros sin la sintáxis expandida, podrías tener que hacerlo <strong>indirectamente </strong>a través de una aplicación parcial:</p> + +<pre class="brush: js notranslate">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Expandir_Array_literales">Expandir Array literales</h3> + +<h4 id="Un_literal_Array_más_poderoso">Un literal Array más poderoso</h4> + +<p>Sin <code><strong>sintaxis expandida (spread syntax)</strong></code>, para crear un nuevo arreglo usando un arreglo existente como parte de él,no es suficiente la sintaxis de Array literal y en su lugar se debe usar código imperativo con una combinación de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis expandida, esto se vuelve mucho mas práctico:</p> + +<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Así como para expandir listas de argumentos, <code>...</code> puede ser usado en cualquier parte dentro del Array literal, y múltiples veces.</p> + +<h4 id="Copiar_un_arreglo">Copiar un arreglo</h4> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +var arr2 = [...arr]; // like arr.slice() +arr2.push(4); + +// arr2 becomes [1, 2, 3, 4] +// arr remains unaffected +</pre> + +<p><strong>Nota:</strong> La sintaxis expandida efectivamente va a un nivel de profundidad mientras copia un arreglo. Por lo tanto, esto no permite copiar arreglos multidimensionales como se muestra en los siguientes ejemplos (es lo mismo con {{jsxref("Object.assign()")}} y sintaxis spread).</p> + +<pre class="brush: js notranslate">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Now array a is affected as well: [[], [2], [3]] +</pre> + +<h4 id="Una_forma_mejor_para_concatenar_arreglos">Una forma mejor para concatenar arreglos</h4> + +<p>{{jsxref("Array.concat")}} es usada a menudo para concatenar un arreglo al final de un arreglo ya existente. Sin la sintaxis spread se realiza:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>Con la sintaxis spread se transforma en:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; +</pre> + +<p>{{jsxref("Array.unshift")}} es a menudo usada para insertar un arreglo de valores al inicio de un arreglo existente. Sin la sintáxis spread, esto es hecho como:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Prepend all items from arr2 onto arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> + +<p>Con la sintaxis spread se convierte en [Observa, sin embargo, que esto crea un nuevo arreglo <code>arr1</code>. Diferente a {{jsxref("Array.unshift")}}, esto no modifica el arreglo original en sitio <code>arr1</code>]:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</h3> + +<p>La propuesta <a href="https://github.com/tc39/proposal-object-rest-spread">Propiedades Rest/Spread para ECMAScript</a> (etapa 4) agrega propiedades spread a los <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">literales Tipo Objeto</a>. Esto copia sus propiedades enumerables desde un objeto provisto dentro de un nuevo objeto.</p> + +<p>Shallow-cloning (excluyendo prototype) o la combinación de objetos es ahora posible usando una sintaxis más corta que {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Observa que {{jsxref("Object.assign()")}} desencadena <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mientras que la sintaxis spread no lo hace.</p> + +<p>Observa que tú no puedes reemplazar o replicar la función {{jsxref("Object.assign()")}}:</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>En el ejemplo de arriba, el operador spread no trabaja como uno podría esperar: este dispersa un <em>arreglo</em> de argumentos en el literal Tipo Objeto, debido al parámetro rest.</p> + +<h3 id="Sólo_para_iterables">Sólo para iterables</h3> + +<p>La sintaxis Spread (otra que en el caso de las propiedades spread) puede ser aplicada sólo a los objetos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterables</a>:</p> + +<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Spread_con_muchos_valores">Spread con muchos valores</h3> + +<p>Cuando se usa la sintaxis spread para llamados de funciones, tenga en cuenta la posibilidad de exceder el límite de longitud de argumentos del motor de JavaScript. Vea <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> para más detalles.</p> + +<h2 id="Sintaxis_Rest_parámetros">Sintaxis Rest (parámetros)</h2> + +<p>La sintaxis Rest luce exactamente como la sintaxis spread, pero esto es usado por la desestructuración de arreglos y objetos. De cierta forma, la sintaxis rest es la opuesta a la sintaxis spread: spread 'expande' un arreglo en sus elementos, mientras rest agrupa múltiples elementos y los 'condensa' en un único elemento. Consulta <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">parámetros rest.</a></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definido en <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir con esta información, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud (pull).</div> + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (también ‘<code>...</code>’)</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/strict_equality/index.html b/files/es/web/javascript/reference/operators/strict_equality/index.html new file mode 100644 index 0000000000..0d09b1de71 --- /dev/null +++ b/files/es/web/javascript/reference/operators/strict_equality/index.html @@ -0,0 +1,101 @@ +--- +title: Igualdad Estricta (===) +slug: Web/JavaScript/Referencia/Operadores/Strict_equality +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de estricta igualdad (<code>===</code>) revisa si dos operandos son iguales y produce un resultado Booleano. A diferencia del operador de igualdad regular (==), el operador de estricta igualdad siempre considera que los operandos de distinto tipo de valor son diferentes y nunca similares.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Los operadores de estricta igualdad (<code>===</code> y <code>!==</code>) usan el <a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">Algoritmo Estricto Comparativo de Igualdad </a> para comparar dos operandos:</p> + +<ul> + <li>Si los operandos son de diferente tipo de valor, produce <code>false</code>.</li> + <li> Si ambos operandos son objetos, produce <code>true</code> solo si se refiere al mismo objeto.</li> + <li>Si ambos operandos son de tipo <code>null</code> o ambos operandos son <code>undefined</code>, produce <code>true</code>.</li> + <li>Si cualquier operando es de tipo <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">NaN</span></font>, produce <code>false</code>.</li> + <li>En otros casos, compara los valores de ambos operandos: + <ul> + <li>Los números deben tener el mismo valor numérico, aunque <code>+0</code> y <code>-0</code> son considerados como del mismo valor.</li> + <li>Los strings deben tener los mismos caracteres en el mismo orden.</li> + <li>Los booleanos deben ambos ser <code>true</code> o ambos ser <code>false</code>.</li> + </ul> + </li> +</ul> + +<p>La diferencia más notable entre este operador y el operador de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Equality">igualdad</a> regular (<code>==</code>) es que si los operandos son de distinto tipo de valor, el operador <code>==</code> intenta convertir los valores a un mismo tipo de dato antes de compararlos.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Comparando_operandos_del_mismo_tipo">Comparando operandos del mismo tipo</h3> + +<pre class="brush: js notranslate">console.log("hello" === "hello"); // true +console.log("hello" === "hola"); // false + +console.log(3 === 3); // true +console.log(3 === 4); // false + +console.log(true === true); // true +console.log(true === false); // false + +console.log(null === null); // true</pre> + +<h3 id="Comparando_operandos_de_distinto_tipo">Comparando operandos de distinto tipo</h3> + +<pre class="brush: js notranslate">console.log("3" === 3); // false + +console.log(true === 1); // false + +console.log(null === undefined); // false</pre> + +<h3 id="Comparando_objetos">Comparando objetos</h3> + +<pre class="brush: js notranslate">const object1 = { + name: "hello" +} + +const object2 = { + name: "hello" +} + +console.log(object1 === object2); // false +console.log(object1 === object1); // true</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2> + + + +<p>{{Compat("javascript.operators.strict_equality")}}</p> + +<h2 id="También_revisa">También revisa</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Equality">Operador de igualdad</a></li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Inequality">Operador de desigualdad</a></li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Operador de estricta desigualdad</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/subtraction/index.html b/files/es/web/javascript/reference/operators/subtraction/index.html new file mode 100644 index 0000000000..21bfd3a1ac --- /dev/null +++ b/files/es/web/javascript/reference/operators/subtraction/index.html @@ -0,0 +1,65 @@ +--- +title: Sustracción (-) +slug: Web/JavaScript/Referencia/Operadores/Sustracción +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Subtraction +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de sustracción (<code>-</code>) sustrae dos operandos, produciendo su diferencia.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> + +<div></div> + + + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> - <var>y</var> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Sustracción_con_números">Sustracción con números</h3> + +<pre class="brush: js notranslate">5 - 3 // 2 +3 - 5 // -2</pre> + +<h3 id="Sustracción_de_no_numéricos">Sustracción de no numéricos</h3> + +<pre class="brush: js notranslate">'foo' - 3 // NaN</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_exploradores">Compatibilidad entre exploradores</h2> + + + +<p>{{Compat("javascript.operators.subtraction")}}</p> + +<h2 id="También_revisa">También revisa</h2> + +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Addition">Addition operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Division">Division operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Increment">Increment operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unary negation operator</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/super/index.html b/files/es/web/javascript/reference/operators/super/index.html new file mode 100644 index 0000000000..ff2ac5ae0e --- /dev/null +++ b/files/es/web/javascript/reference/operators/super/index.html @@ -0,0 +1,178 @@ +--- +title: super +slug: Web/JavaScript/Referencia/Operadores/super +tags: + - Clases + - ECMAScript 2015 + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/super +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>La palabra clave <strong>super</strong> es usada para acceder y llamar funciones del padre de un objeto.</p> + +<p>Las expresiones <code>super.prop</code> y <code>super[expr]</code> son válidas en cualquier <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definición de método</a> tanto para <a href="/es/docs/Web/JavaScript/Reference/Classes">clases</a> como para <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">objetos literales</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">// llama al método constructor del objeto padre. +super([arguments]); + +// llama cualquier otro método del objeto padre. +super.functionOnParent([arguments]); +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Cuando es usado en un constructor, la palabra clave <code>super</code> aparece sola lo cual invoca el constructor del objeto padre. En este caso debe usarse antes de que la palabra clave <code>this</code> sea usada. La palabra clave <code>super</code> también puede utilizarse para llamar otras funciones del objeto padre.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Usando_super_en_clases">Usando <code>super</code> en clases</h3> + +<p>Este fragmento de código se toma del <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">ejemplo de clases</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">demo en vivo</a>). Aquí se llama a <code>super()</code> para evitar la duplicación de las partes del constructor que son comunes entre <code>Rectangle</code> y <code>Square</code>.</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.name = 'Rectangle'; + this.height = height; + this.width = width; + } + sayName() { + console.log('Hi, I am a ', this.name + '.'); + } + get area() { + return this.height * this.width; + } + set area(value) { + this.height = this.width = Math.sqrt(value); + } +} + +class Square extends Rectangle { + constructor(length) { + this.height; // ReferenceError, super necesita ser llamado primero! + + // Aquí, llama al constructor de la clase padre con las longitudes + // previstas para el ancho y la altura de Rectangle + super(length, length); + + // Nota: En las clases derivadas, se debe llamar a super() antes de + // poder usar 'this'. Salir de esto provocará un error de referencia. + this.name = 'Square'; + } +}</pre> + +<h3 id="Super-llamando_a_métodos_estáticos">Super-llamando a métodos estáticos</h3> + +<p>También puede llamar a super en métodos estáticos.</p> + +<pre class="brush: js">class Rectangle { + constructor() {} + static logNbSides() { + return 'I have 4 sides'; + } +} + +class Square extends Rectangle { + constructor() {} + static logDescription() { + return super.logNbSides() + ' which are all equal'; + } +} +Square.logDescription(); // 'Tengo 4 lados que son todos iguales' +</pre> + +<h3 id="Eliminar_propiedades_super_generará_un_error">Eliminar propiedades <code>super</code> generará un error</h3> + +<p>No puede usar el <a href="/es/docs/Web/JavaScript/Reference/Operators/delete">operador de eliminación</a> y <code>super.prop</code> o <code>super[expr]</code> para eliminar la propiedad de una clase principal, lanzará {{jsxref("ReferenceError")}}.</p> + +<pre class="brush: js">class Base { + constructor() {} + foo() {} +} +class Derived extends Base { + constructor() {} + delete() { + delete super.foo; // esto es malo + } +} + +new Derived().delete(); // ReferenceError: eliminación no válida que implica 'super'. </pre> + +<h3 id="super.prop_no_puede_sobrescribir_las_propiedades_no_modificables"><code>super.prop</code> no puede sobrescribir las propiedades no modificables</h3> + +<p>Al definir propiedades que no se pueden escribir, p. Ej. {{jsxref("Object.defineProperty")}}, <code>super</code> no puede sobrescribir el valor de la propiedad.</p> + +<pre class="brush: js">class X { + constructor() { + Object.defineProperty(this, 'prop', { + configurable: true, + writable: false, + value: 1 + }); + } + f() { + super.prop = 2; + } +} + +var x = new X(); +x.f(); // TypeError: "prop" es de solo lectura +console.log(x.prop); // 1 +</pre> + +<h3 id="Usando_super.prop_en_objetos_literales">Usando <code>super.prop</code> en objetos literales</h3> + +<p>Super también se puede usar en el <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">inicializador de objetos / notación literal</a>. En este ejemplo, dos objetos definen un método. En el segundo objeto, <code>super</code> llama al primer método del objeto. Esto funciona con la ayuda de {{jsxref("Object.setPrototypeOf()")}} con el que podemos establecer el prototipo de <code>obj2</code> en <code>obj1</code>, de modo que <code>super</code> pueda encontrar el <code>method1</code> en <code>obj1</code>.</p> + +<pre class="brush: js">var obj1 = { + method1() { + console.log('method 1'); + } +} + +var obj2 = { + method2() { + super.method1(); + } +} + +Object.setPrototypeOf(obj2, obj1); +obj2.method2(); // logs "method 1" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.operators.super")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Classes">Clases</a></li> +</ul> diff --git a/files/es/web/javascript/reference/operators/this/index.html b/files/es/web/javascript/reference/operators/this/index.html new file mode 100644 index 0000000000..74ed62bb60 --- /dev/null +++ b/files/es/web/javascript/reference/operators/this/index.html @@ -0,0 +1,239 @@ +--- +title: this +slug: Web/JavaScript/Referencia/Operadores/this +translation_of: Web/JavaScript/Reference/Operators/this +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Introducción">Introducción</h2> + +<p>La palabra clave <strong><code>this</code></strong> de una función se comporta un poco diferente en Javascript en comparación con otros lenguajes. Además tiene algunas diferencias entre el <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="en-US/docs/JavaScript/Strict mode">modo estricto</a> y el modo no estricto.</p> + +<p>En general, el valor de <code>this</code> está determinado por cómo se invoca a la función. No puede ser establecida mediante una asignación en tiempo de ejecución, y puede ser diferente cada vez que la función es invocada. ES5 introdujo el método {{jsxref("Function.bind()", "bind()")}} para <a href="#Funciones_enlazadas" title="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Special/this#Bound_functions">establecer el valor de la función <code>this</code> independientemente de como es llamada</a>, y ES2015 introdujo las <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones flecha</a> que no proporcionan su propio "binding" de <code>this</code> (se mantiene el valor de <code>this</code> del contexto léxico que envuelve a la función)</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">this</pre> + +<h3 id="Valor">Valor</h3> + +<p>El objeto contexto de JavaScript en el cual se está ejecutando el código actual.</p> + +<h2 id="Contexto_global">Contexto global</h2> + +<p>En el contexto de ejecución global (fuera de cualquier función), <strong><code>this</code></strong> se refiere al objeto global, ya sea en modo estricto o no.</p> + +<pre class="brush:js">console.log(this.document === document); // true + +// En los navegadores web, el objeto window también es un objeto global: +console.log(this === window); // true + +this.a = 37; +console.log(window.a); // 37 +</pre> + +<div class="blockIndicator note"> +<p><font><font>Nota: Puedes obtener el objeto global usando la propieda global <code>globalThis</code>, no importa el contexto donde se ejecute esta propiedad, siempre hará referencia al objeto global. </font></font></p> +</div> + +<h2 id="Contexto_de_la_función">Contexto de la función</h2> + +<p><span class="hps" style="line-height: 1.5;">Dentro de una</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">función</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">depende de cómo</span><span style="line-height: 1.5;"> la función es l</span><span class="hps" style="line-height: 1.5;">lamada</span><span id="result_box" lang="es" style="line-height: 1.5;">.</span></p> + +<h3 id="Llamada_simple">Llamada simple</h3> + +<pre class="brush:js">function f1(){ + return this; +} + +f1() === window; // objeto global +</pre> + +<div><span class="hps" style="line-height: 1.5;">En</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">este caso</span><span style="line-height: 1.5;">,</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">el valor de <strong>this</strong></span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">no está establecido</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">la llamada</span><span style="line-height: 1.5;">.</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">Dado que el código</span><span style="line-height: 1.5;"> </span><span class="alt-edited hps" style="line-height: 1.5;">no está</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">en modo estricto</span><span style="line-height: 1.5;">, </span><span class="hps" style="line-height: 1.5;">el valor de this</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">debe ser siempre</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">un objeto</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por lo que</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">por defecto es el</span><span style="line-height: 1.5;"> </span><span class="hps" style="line-height: 1.5;">objeto global</span><span style="line-height: 1.5;">.</span></div> + +<div></div> + +<div> +<pre class="brush:js" style="font-size: 14px;">function f2(){ + "use strict"; // consultar modo estricto + return this; +} + +f2() === undefined;</pre> +</div> + +<div><span style="line-height: 1.5;">En modo estricto, el valor de <strong>this</strong> se mantiene en lo que está establecida al entrar en el contexto de ejecución. Si no está definido, permanece undefined. También se puede ajustar a cualquier valor, tales como <strong>null</strong> o <strong>42</strong> o "<strong>Yo no soy this</strong>".</span></div> + +<div></div> + +<div class="note"> +<p><strong>Nota:</strong> En el segundo ejemplo, <strong><code>this</code></strong> debería ser {{jsxref("undefined")}}, porque <code>f2</code> fue llamado sin proporcionar ninguna base (ej. <code>window.f2()</code>). Esta característica no fue implementada en algunos navegadores cuando se comenzó a dar soporte al <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Modo_estricto" title="Strict mode">modo estricto</a>. Como resultado, retorna incorrectamente el objeto window.</p> +</div> + +<div><span>Como un método de un objeto</span></div> + +<p>Cuando una función es llamada como un método de un objeto, el <strong><code>this</code></strong> cambia por el metodo del objeto llamado.</p> + +<p>En el siguiente ejemplo, cuando <strong><code>o.f()</code></strong> es invocado, dentro de la función <strong><code>this</code></strong> es ligado al objeto <strong><code>o</code></strong>.</p> + +<pre class="brush:js">var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // logs 37 +</pre> + +<p>Note que el comportamiento no es del todo afectado por cómo o dónde la función fue definida. En el ejemplo anterior, nosotros definimos la función en línea como el elemento <code>f</code> durante la definición de <code>o</code>. Sin embargo, podriamos haber definido con la misma facilidad la primera función y luego adjuntarlo a <code>o.f</code>. Hacerlo da como resultado el mismo comportamiento.</p> + +<pre class="brush:js">var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // logs 37 +</pre> + +<p>Esto demuestra que sólo importa que la función fue invocada del elemento <code>f</code> de <code>o</code>.</p> + +<p>Asimismo, el enlace <code>this</code> sólo se ve afectado por la referencia del miembro más inmediata. En el siguiente ejemplo, cuando invocamos a la función, lo llamamos como metodo <code>g</code> del objeto <code>o.b</code>. Esta vez durante la ejecución, <code>this </code>dentro de la función se referirá a <code>o.b</code>. <span id="result_box" lang="es"><span class="hps">El hecho de que</span> <span class="hps">el objeto</span> <span class="hps">es en sí mismo</span> <span class="alt-edited hps">un elemento</span> <span class="hps">de </span></span><code>o</code><span id="result_box" lang="es"> <span class="hps">no tiene ninguna</span> <span class="hps">consecuencia</span><span>,</span> <span class="hps">la referencia más</span> <span class="hps">inmediata es</span> <span class="hps">todo lo que importa</span><span>.</span></span></p> + +<pre class="brush:js">o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // logs 42 +</pre> + +<h4 id="..._en_la_cadena_de_prototipo">... en la cadena de prototipo</h4> + +<p>El mismo concepto es válido para los métodos definidos en alguna parte de la cadena de prototipo del objeto. Si el método esta sobre una cadena de prototipo del objeto, <code>this</code> se referirá al objeto donde está el método de donde fue llamado. Como si ese método estuviera dentro del objeto. </p> + +<pre class="brush:js">var o = {f:function(){ return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +</pre> + +<p>En este ejemplo, el objeto asignado a la variable <code>p</code> no tiene su propia propiedad <code>f</code>, esto lo hereda de su prototipo. Pero no importa que la búsqueda de <code>f</code> eventualmente encuentre un elemento con ese nombre en <code>o</code>; la búsqueda comenzó como una referencia a <code>p.f</code>, asi <code>this </code>dentro de la funcion toma el valor del objeto referido como <code>p</code>. Es decir, desde que <code>f</code> es llamado como método de <code>p</code>, su <code>this</code> refiere a <code>p</code>. Esto es una interesante característica de la herencia de prototipo de JavaScript.</p> + +<h4 id="..._o_como_un_getter_o_setter">... o como un getter o setter</h4> + +<p>Nuevamente, el mismo concepto es válido cuando una función es invocada de un getter o un setter. Una función usado como getter o setter tiene su enlace <code>this</code> al objeto desde el cual la propiedad esta siendo establecida u obtenida.</p> + +<pre class="brush:js">function modulus(){ + return Math.sqrt(this.re * this.re + this.im * this.im); +} + +var o = { + re: 1, + im: -1, + get phase(){ + return Math.atan2(this.im, this.re); + } +}; + +Object.defineProperty(o, 'modulus', {get: modulus, enumerable:true, configurable:true}); + +console.log(o.phase, o.modulus); // logs -0.78 1.4142 +</pre> + +<h3 id="Como_un_constructor">Como un constructor</h3> + +<p>Cuando una función es usada como un constructor (con la palabra clave {{jsxref("Operadores/new", "new")}}), su <code>this</code> es enlazado al nuevo objeto en construcción, a menos que la ejecución de los resultados del constructor en el motor JavaScript encuentren una instrucción de retorno donde el valor de retorno sea un objeto.</p> + +<pre class="brush:js">/* + * Los constructores trabajan algo asi: + * + * function MyConstructor(){ + * // El cuerpo del código de la función actual va aquí. Crear las propiedades en |this| como + * // se desee mediante la asignación a los mismos. E.g., + * this.fum = "nom"; + * // etcetera... + * + * // Si la función tiene una sentencia de retorno este retorna un objeto, + * // este objeto será el resultado de la expresión |new|. Por otro lado, el + * // resultado de la expresión es el objeto actualmente enlazado a |this| + * // (i.e., el caso más común suele verse). + * } + */ + +function C(){ + this.a = 37; +} + +var o = new C(); +console.log(o.a); // logs 37 + + +function C2(){ + this.a = 37; + return {a:38}; +} + +o = new C2(); +console.log(o.a); // logs 38 +</pre> + +<p>En el último ejemplo (<code>C2</code>), debido a que un objeto fue devuelto durante la construcción, el nuevo objeto que fue enlazado a <code>this</code> simplemente se descarta.( Esto esencialmente hace de la declaración "<code>this.a = 37;</code>" codigo muerto. No esta exactamente muerto,porque es ejecutado pero se puede eliminar sin efectos externos.)</p> + +<h3 id="call_y_apply"><code>call</code> y <code>apply</code></h3> + +<p>Cuando una función usa la plabra clave <code>this</code> en su cuerpo, su valor puede ser enlazado a un objeto particular durante la ejecución del método {{jsxref("Function.call()", "call()")}} or {{jsxref("Function.apply()", "apply()")}} que todas las funciones hereden de <code>Function.prototype</code>.</p> + +<pre class="brush:js">function add(c, d){ + return this.a + this.b + c + d; +} + +var o = {a:1, b:3}; + +// El primer parámetro es el objeto a usar como 'this', parámetros posteriores se pasan como argumentos +// en la llamada a la función +add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16 + +//El primer parámetro es el objeto a usar como 'this''this', la segunda es una matriz cuyos elementos +// se utilizan como argumentos en la llamada a la función +add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34 +</pre> + +<h3 id="Funciones_enlazadas">Funciones enlazadas</h3> + +<p>ECMAScript 5 introduce {{jsxref("Function.prototype.bind()")}}. Llamando a <code>f.bind(someObject)</code> crea una nueva función con el mismo cuerpo y alcance de <code>f</code>, pero donde <code>this</code> se produce en la función original, en la nueva función esto esta permanentemente ligado al primer argumento de <code>bind</code>, independientemente de cómo la función está siendo utilizada.</p> + +<pre class="brush:js">function f(){ + return this.a; +} + +var g = f.bind({a:"azerty"}); +console.log(g()); // azerty + +var o = {a:37, f:f, g:g}; +console.log(o.f(), o.g()); // 37, azerty +</pre> + +<h3 id="Como_un_controlador_de_eventos_DOM">Como un controlador de eventos DOM</h3> + +<p>Cuando una función es usada como un controlador de eventos, su <code>this</code> es cambiado desde el elemento del evento disparado (algunos navegadores no siguen esta convención para los listeners agregados dinámicamente con otros métodos <code>addEventListener</code>).</p> + +<pre class="brush:js">// Cuando se llama como un listener, convierte en azul el elemento +// relacionado +function bluify(e){ + console.log(this === e.currentTarget); // Siempre true + console.log(this === e.target); // true cuando currentTarget y target son el mismo objeto + this.style.backgroundColor = '#A5D9F3'; +} + +// Consigue una lista de cada elemento en un documento +var elements = document.getElementsByTagName('*'); + +// Añade bluify como un click listener asi cuando se hace click sobre el elemento, +// este cambia a azul +for(var i=0 ; i<elements.length ; i++){ + elements[i].addEventListener('click', bluify, false); +}</pre> diff --git a/files/es/web/javascript/reference/operators/typeof/index.html b/files/es/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..088791f228 --- /dev/null +++ b/files/es/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,76 @@ +--- +title: typeof +slug: Web/JavaScript/Referencia/Operadores/typeof +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +<div><span class="diff_add">{{jsSidebar("Operators")}}</span></div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El operador <code>typeof</code> se usa en cualquiera de los siguientes modos:</p> + +<ol> + <li><code>typeof <em>operando</em> </code></li> + <li><code>typeof (<em>operando</em>)</code></li> +</ol> + +<p>El operador <code>typeof</code> devuelve una cadena que indica el tipo del operando sin evaluarlo. <code>operando</code> es la cadena, variable, palabra clave u objeto para el que se devolverá su tipo. Los paréntesis son opcionales.</p> + +<p>Suponga que define las siguientes variables:</p> + +<pre class="brush: js">var miFuncion = new Function("5+2") +var forma = "redonda" +var tamano = 1 +var hoy = new Date() +</pre> + +<p>El operador <code>typeof</code> devuelve los siguientes resultados para estas variables</p> + +<pre class="brush: js">typeof miFuncion === 'function' +typeof forma === 'string' +typeof tamano === 'number' +typeof hoy === 'object' +typeof noExiste === 'undefined' +</pre> + +<p>Para las palabras clave <code>true</code> y <code>null</code>, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js">typeof true === 'boolean' +typeof null === 'object' +</pre> + +<p>Para un número o una cadena, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js">typeof 62 === 'number' +typeof 'Hola mundo' === 'string' +</pre> + +<p>Para valores de propiedades, el operador <code>typeof</code> devuelve el tipo del valor que contiene la propiedad:</p> + +<pre class="brush: js">typeof document.lastModified === 'string' +typeof window.length === 'number' +typeof Math.LN2 === 'number' +</pre> + +<p>Para métodos y funciones, el operador <code>typeof</code> devuelve los resultados siguientes:</p> + +<pre class="brush: js">typeof blur === 'function' +typeof eval === 'function' +typeof parseInt === 'function' +typeof shape.split === 'function' +</pre> + +<p>Para objetos predefinidos, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js">typeof Date === 'function' +typeof Function === 'function' +typeof Math === 'object' +typeof Object === 'function' +typeof String === 'function' +</pre> + +<p> </p> diff --git a/files/es/web/javascript/reference/operators/void/index.html b/files/es/web/javascript/reference/operators/void/index.html new file mode 100644 index 0000000000..0bf8048b21 --- /dev/null +++ b/files/es/web/javascript/reference/operators/void/index.html @@ -0,0 +1,36 @@ +--- +title: void +slug: Web/JavaScript/Referencia/Operadores/void +tags: + - JavaScript + - Operator + - Unary +translation_of: Web/JavaScript/Reference/Operators/void +--- +<div>{{jsSidebar("Operators")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>El operador <code>void</code> se usa en cualquiera de los siguientes modos:</p> + +<ol> + <li><code>void (<em>expresion</em> )</code></li> + <li><code>void <em>expresion</em> </code></li> +</ol> + +<p>El operador <code>void</code> especifica una expresión que se evalúa sin devolver un valor. <code>expresion</code> es una expresión JavaScript para evaluar. El paréntesis rodeando la expresión es opcional, pero usarlos es una buena práctica al programar.</p> + +<p>Puede usar el operador <code>void</code> para especificar una expresión como un enlace de hipertexto. La expresión se evalúa pero no se carga en lugar del documento actual.</p> + +<p>El siguiente código crea un enlace de hipertexto que no hace nada cuando el usuario hace click en él. Cuando el usuario hace click en el enlace, void(0) se evalúa como 0, pero eso no tiene ningún efecto en JavaScript.</p> + +<pre class="brush: html"><a href="javascript:void(0)">Haga click aquí para no hacer nada</a> +</pre> + +<p>El siguiente código crea un enlace de hipertexto que envía un formulario cuando el usuario hace click en él.</p> + +<pre class="brush: html"><a href="javascript:void(document.forms["miFormulario"].submit())"> +Haga click aquí para enviar</a> +</pre> + +<div class="noinclude"></div> diff --git a/files/es/web/javascript/reference/operators/yield/index.html b/files/es/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..7237b6d689 --- /dev/null +++ b/files/es/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,130 @@ +--- +title: yield +slug: Web/JavaScript/Referencia/Operadores/yield +tags: + - Característica del lenguaje + - ECMAScript 2015 + - Generadores + - Iterador + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/yield +--- +<div>{{jsSidebar("Operadores")}}</div> + +<p>La palabra clave <code>yield</code> se usa para pausar y reanudar una función generadora ({{jsxref("Statements/function*", "function*")}} o {{jsxref("Statements/Legacy_generator_function", "función generadora heredada")}}).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-yield.html", "taller")}}</div> + +<div class="hidden">La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si deseas contribuir al proyecto de ejemplos interactivos, clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de extracción.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">[<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</pre> + +<dl> + <dt><code><var>expression</var></code> {{optional_inline}}</dt> + <dd>Define el valor que se devolverá desde la función generadora a través del {{jsxref("Iteration_protocols", "protocolo iterador", "#El_protocolo_iterador")}}. Si se omite, devuelve <code>undefined</code> en su lugar.</dd> + <dt><code><var>rv</var></code> {{optional_inline}}</dt> + <dd> + <p>Recupera el valor opcional pasado al método <code>next()</code> del generador para reanudar su ejecución.</p> + </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La palabra clave <code>yield</code> detiene la ejecución de la función del generador y el valor de la expresión que sigue a la palabra clave <code>yield</code> se devuelve al llamador del generador. Se puede considerar como una versión basada en un generador de la palabra clave <code>return</code>.</p> + +<p><code>yield</code> solo se puede llamar directamente desde la función generadora que la contiene. No se puede llamar desde funciones anidadas o retrollamadas.</p> + +<p>La palabra clave <code>yield</code> hace que la llamada al método <code>next()</code> del generador devuelva un objeto <code>IteratorResult</code> con dos propiedades: <code>value</code> y <code>done</code>. La propiedad <code>value</code> es el resultado de evaluar la expresión <code>yield</code>, y <code>done</code> es <code>false</code>, lo cual indica que la función generadora no se ha completado completamente.</p> + +<p>Una vez en pausa en una expresión <code>yield</code>, la ejecución del código del generador permanece en pausa hasta que se llama al método <code>next()</code> del generador. Cada vez que se llama al método <code>next()</code> del generador, el generador reanuda la ejecución y se ejecuta hasta que alcanza uno de los siguientes:</p> + +<ul> + <li>Un <code>yield</code>, el cual hace que el generador vuelva a pausar y devuelva el nuevo valor del generador. La próxima vez que se llame a <code>next()</code>, la ejecución se reanudará con la instrucción inmediatamente después de <code>yield</code>.</li> + <li>{{jsxref("Statements/throw", "throw")}} se usa para lanzar una excepción desde el generador. Esta detiene la ejecución del generador por completo y la ejecución se reanuda en el llamador (como suele ser el caso cuando se lanza una excepción).</li> + <li>Se alcanza el final de la función generadora. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es {{jsxref("undefined")}} y <code>done</code> es <code>true</code>.</li> + <li>Se alcanza una instrucción {{jsxref("Statements/return", "return")}}. En este caso, la ejecución del generador finaliza y se devuelve un <code>IteratorResult</code> al llamador en el que el <code>value</code> es el valor especificado por la instrucción <code>return</code> y <code>done</code> es <code>true</code>.</li> +</ul> + +<p>Si se pasa un valor opcional al método <code>next()</code> del generador, ese valor se convierte en el valor devuelto por la operación <code>yield</code> actual del generador.</p> + +<p>Entre la ruta del código del generador, sus operadores <code>yield</code> y la capacidad de especificar un nuevo valor inicial pasándolo a {{jsxref("Generator.prototype.next()")}}, los generadores ofrecen enorme poder y control.</p> + +<div class="blockIndicator warning"> +<p>Desafortunadamente, <code>next()</code> es asimétrico, pero eso no se puede evitar: siempre envía un valor al <code>yield</code> actualmente suspendido, pero devuelve el operando del siguiente <code>yield</code>.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_yield">Usar <code>yield</code></h3> + +<p>El siguiente código es la declaración de una función generadora de ejemplo.</p> + +<pre class="brush: js notranslate">function* countAppleSales () { + let saleList = [3, 7, 5] + for (let i = 0; i < saleList.length; i++) { + yield saleList[i] + } +}</pre> + +<p>Una vez que se define una función generadora, se puede usar construyendo un iterador como el siguiente.</p> + +<pre class="brush: js notranslate">let appleStore = countAppleSales() // Generator { } +console.log(appleStore.next()) // { value: 3, done: false } +console.log(appleStore.next()) // { value: 7, done: false } +console.log(appleStore.next()) // { value: 5, done: false } +console.log(appleStore.next()) // { value: undefined, done: true }</pre> + +<p>También puedes enviar un valor con <code>next(value)</code> al generador. '<code>step</code>' se evalúa como un valor de retorno en esta sintaxis [<var>rv</var>] = <strong>yield</strong> [<var>expression</var>]</p> + +<pre class="brush: js notranslate">function* counter(value) { + let step; + + while (true) { + step = yield ++value; + + if (step) { + value += step; + } + } +} + +const generatorFunc = counter(0); +console.log(generatorFunc.next().value); // 1 +console.log(generatorFunc.next().value); // 2 +console.log(generatorFunc.next().value); // 3 +console.log(generatorFunc.next(10).value); // 14 +console.log(generatorFunc.next().value); // 15 +console.log(generatorFunc.next(10).value); // 26</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#prod-YieldExpression', 'Yield')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si deseas contribuir con los datos, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud de extracción.</div> + +<p>{{Compat("javascript.operators.yield")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">El protocolo <code>Iterator</code></a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/operators/yield_star_/index.html b/files/es/web/javascript/reference/operators/yield_star_/index.html new file mode 100644 index 0000000000..e2167b8c41 --- /dev/null +++ b/files/es/web/javascript/reference/operators/yield_star_/index.html @@ -0,0 +1,199 @@ +--- +title: yield* +slug: Web/JavaScript/Referencia/Operadores/yield* +tags: + - ECMAScript6 + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><code>La expresión </code><strong><code>yield*</code></strong><strong> </strong>es usada para delegar a otro {{jsxref("Statements/function*", "generator")}} u objeto iterable.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"> yield* [[expression]];</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>La expresión que retorna un objeto iterable</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La expresión <code>yield*</code> itera sobre el operador realizando yield de cada valor retornado por este.</p> + +<p>El valor de la expresion <code>yield*</code> es el valor retornado por el iterador en si mismo cuando es finalizado (ej., cuando <code>done</code> es true).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Delegando_a_otro_generator">Delegando a otro generator</h3> + +<p>En el siguiente código, los valores declarados con yield en <code>g1()</code> son devueltos por las llamadas a <code>next() al igual que en</code> <code>g2()</code>.</p> + +<pre class="brush: js">function* g1() { + yield 2; + yield 3; + yield 4; +} + +function* g2() { + yield 1; + yield* g1(); + yield 5; +} + +var iterator = g2(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: 4, done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Otros_objetos_iterables">Otros objetos iterables</h3> + +<p>Además de los objetos generator, <code>yield*</code> también se puede usar <code>yield sobre otros tipos de iterables</code>, ej. arrays, strings u objetos arguments.</p> + +<pre class="brush: js">function* g3() { + yield* [1, 2]; + yield* "34"; + yield* Array.from(arguments); +} + +var iterator = g3(5, 6); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: "3", done: false } +console.log(iterator.next()); // { value: "4", done: false } +console.log(iterator.next()); // { value: 5, done: false } +console.log(iterator.next()); // { value: 6, done: false } +console.log(iterator.next()); // { value: undefined, done: true } +</pre> + +<h3 id="El_valor_de_la_expresión_yield*">El valor de la expresión <code>yield*</code></h3> + +<p><code>yield*</code> es una expresión, no una declaración, por lo que se evalua como un valor.</p> + +<pre class="brush: js">function* g4() { + yield* [1, 2, 3]; + return "foo"; +} + +var result; + +function* g5() { + result = yield* g4(); +} + +var iterator = g5(); + +console.log(iterator.next()); // { value: 1, done: false } +console.log(iterator.next()); // { value: 2, done: false } +console.log(iterator.next()); // { value: 3, done: false } +console.log(iterator.next()); // { value: undefined, done: true }, + // g4() returned { value: "foo", done: true } at this point + +console.log(result); // "foo" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES6', '#', 'Yield')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inical.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#', 'Yield')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h2> + +<ul> + <li>Iniciando con Gecko 33 {{geckoRelease(33)}}, el análisis del yield expression ha sido actualizado para cumplir con la última especificación ES6 ({{bug(981599)}}): + <ul> + <li>Ahora está implementada la restricción de salto de línea. No está permitido el salto de línea entre "yield" y "*". Código como el siguiente lanzará una {{jsxref("SyntaxError")}}: + <pre class="brush: js">function* foo() { + yield + *[]; +}</pre> + </li> + </ul> + </li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Iteration_protocols">Protocolos de iteración</a></li> + <li>{{jsxref("Statements/function*", "function*")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Operators/yield", "yield")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/async_function/index.html b/files/es/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..573c10fad8 --- /dev/null +++ b/files/es/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,173 @@ +--- +title: Función async +slug: Web/JavaScript/Referencia/Sentencias/funcion_asincrona +tags: + - Declaración + - Ejemplo + - JavaScript + - función +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración de función <code><strong>async</strong></code> define una <em>función asíncrona</em>, la cual devuelve un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</p> + +<div class="noinclude"> +<p>Es posible definir también funciones asíncronas a través de una {{jsxref("Operators/async_function", "expresión de función async", "", 1)}}.</p> +</div> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>name</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de un argumento que se debe pasar a la función.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Las declaraciones que conforman el cuerpo de la función.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un objeto {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}, que representa una función asíncrona que ejecuta el código contenido dentro de la función.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Cuando se llama a una función <code>async</code>, esta devuelve un elemento {{jsxref("Promise")}}. Cuando la función <code>async</code> devuelve un valor, <code>Promise</code> se resolverá con el valor devuelto. Si la función <code>async</code> genera una excepción o algún valor, <code>Promise</code> se rechazará con el valor generado.</p> + +<p>Una función <code>async</code> puede contener una expresión {{jsxref("Operators/await", "await")}}, la cual pausa la ejecución de la función asíncrona y espera la resolución de la <code>Promise</code> pasada y, a continuación, reanuda la ejecución de la función <code>async</code> y devuelve el valor resuelto.</p> + +<div class="note"> +<p>La finalidad de las funciones <code>async</code>/<code>await</code> es simplificar el comportamiento del uso síncrono de promesas y realizar algún comportamiento específico en un grupo de <code>Promises</code>. Del mismo modo que las <code>Promises</code> son semejantes a las devoluciones de llamadas estructuradas, <code>async</code>/<code>await</code> se asemejan a una combinación de generadores y promesas.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_sencillo">Ejemplo sencillo</h3> + +<pre class="brush: js">function resolveAfter2Seconds(x) { + return new Promise(resolve => { + setTimeout(() => { + resolve(x); + }, 2000); + }); +} + + +async function add1(x) { + const a = await resolveAfter2Seconds(20); + const b = await resolveAfter2Seconds(30); + return x + a + b; +} + +add1(10).then(v => { + console.log(v); // prints 60 after 4 seconds. +}); + + +async function add2(x) { + const p_a = resolveAfter2Seconds(20); + const p_b = resolveAfter2Seconds(30); + return x + await p_a + await p_b; +} + +add2(10).then(v => { + console.log(v); // prints 60 after 2 seconds. +}); +</pre> + +<div class="warning"> +<h4 id="No_se_deben_confundir_await_y_Promise.all">No se deben confundir <code>await</code> y <code>Promise.all</code></h4> + +<p>En <code>add1</code>, la ejecución se suspende durante dos segundos correspondientes al primer operador <code>await</code>, y luego durante otros dos segundos correspondientes al segundo <code>await</code>. El segundo temporizador no se crea hasta que el primero no se haya disparado ya. En <code>add2</code>, ambos temporizadores se crean y, acto seguido, ambos reciben <code>await</code>. Esto provoca la resolución en dos segundos y no cuatro, ya que los temporizadores se ejecutaron de manera simultánea. Sin embargo, ambas llamadas <code>await</code> aún pueden ejecutarse en series, no en paralelo: esto <strong>no</strong> constituye ninguna aplicación automática de <code>Promise.all</code>. Si se desea aplicar <code>await</code> a dos o más promesas en paralelo, es preciso utilizar <code>Promise.all</code>.</p> +</div> + +<h3 id="Reescritura_de_una_cadena_de_promesas_con_una_función_async">Reescritura de una cadena de promesas con una función <code>async</code></h3> + +<p>Una API que devuelva una {{jsxref("Promise")}} tendrá como resultado una cadena de promesas, y dividirá la función en muchas partes. Estudie este código:</p> + +<pre class="brush: js">function getProcessedData(url) { + return downloadData(url) // returns a promise + .catch(e => { + return downloadFallbackData(url) // returns a promise + }) + .then(v => { + return processDataInWorker(v); // returns a promise + }); +} +</pre> + +<p>Es posible reescribirlo utilizando un solo operador <code>async</code> de esta manera:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url); + } catch(e) { + v = await downloadFallbackData(url); + } + return processDataInWorker(v); +} +</pre> + +<p>Observe que, en el ejemplo anterior, no hay ninguna instrucción <code>await</code> dentro de la instrucción <code>return</code>, porque el valor de retorno de una <code>async function</code> queda implícitamente dentro de un {{jsxref("Promise.resolve")}}.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'Función async')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definición inicial en ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'Función async')}}</td> + <td>{{Spec2('ES8')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div> + + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "Expresión de función async")}}</li> + <li>Objeto {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">«Decorar funciones async de JavaScript» en innolitics.com</a> (en inglés)</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/block/index.html b/files/es/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..36b2054d60 --- /dev/null +++ b/files/es/web/javascript/reference/statements/block/index.html @@ -0,0 +1,89 @@ +--- +title: block +slug: Web/JavaScript/Referencia/Sentencias/block +tags: + - JavaScript + - Referencia + - Referência(2) + - Statement +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Una sentencia block se utiliza para agrupar cero o más sentencias. Este grupo block se delimita por un par de llaves.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">{<em> sentencia_1</em><em>; sentencia_2</em>; ...<em> sentencia_n</em>; } +</pre> + +<dl> + <dt><code>sentencia_1</code>, <code>sentencia_2</code>, <code>sentencia_n</code></dt> + <dd>Sentencias agrupadas dentro de una sentencia block.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Esta sentencia se utiliza comúnmente para controlar sentencias de flujo (es decir <code>if</code>, <code>for</code>, <code>while</code>). Por ejemplo:</p> + +<pre class="brush: js">while (x < 10) { + x++; +} +</pre> + +<p><font><font>Las variables declaradas con </font></font><code>var</code> <strong><font><font>no</font></font></strong><font><font> tienen alcance de bloque(</font></font>block scope<font><font>)</font></font>. Las variables introducidas dentro de un grupo block tienen el alcance de la función que lo contiene o del script, y los efectos de su asignación persisten más allá del grupo block en sí mismo. En otras palabras, las sentencias block no incluyen ningún alcance. Aunque los grupos block "en solitario" (standalone) son una sintaxis válida, usted no querrá utilizar grupos block en solitario en JavaScript, ya que ellos no hacen lo que parecen, si piensa que funcionan de manera similar a los bloques en C o Java. Por ejemplo:</p> + +<pre class="brush: js">var x = 1; +{ + var x = 2; +} +alert(x); // resultado 2 +</pre> + +<p>Este obtiene el resultado 2 ya que la sentencia <code>var x</code> dentro del grupo block tiene el mismo alcance que la sentencia <code>var x</code> antes del mismo. En C o Java, el código equivalente tendría como resultado 1.</p> + +<h4 id="Con_let_y_const"><font><font>Con </font></font><code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a> </code><font><font>y </font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/const">const</a></h4> + +<p>Por el contrario, las variables declaradas con <code>let</code> y <code>const</code> tienen alcance de bloque.</p> + +<pre><code>let x = 1; +{ + let x = 2; +} +console.log(x); // logs 1</code> +</pre> + +<p><font><font>El alcance </font></font><code>x = 2</code><font><font> es limitado solamente al bloque en el que está definido.</font></font></p> + +<p><font><font>Lo mismo para </font></font><code>const</code><font><font>:</font></font></p> + +<pre><code>const c = 1; +{ + const c = 2; +} +console.log(c); // logs 1 </code>y no lanza SyntaxError... +</pre> + +<p>Tenga en cuenta que la variable <code>const c = 2 con alcance de bloque, </code><strong><em>no</em> lanza</strong> un <code>SyntaxError: </code>El identificador 'c' ya ha sido declarado. Esto es porque <strong>se puede declarar de forma única</strong> dentro del bloque, sin interferir con la otra que tiene un alcance global.</p> + +<h4 id="Con_function"><font><font>Con </font></font><code>function</code></h4> + +<p>La <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function">declaración de una función</a> también tiene un alcance limitado dentro del bloque donde se produce la declaración:</p> + +<pre class="brush: js">nacion('frances'); // TypeError: nacion no es una función +{ + function nacion(nacionalidad) { + console.log('Yo soy ' + nacionalidad); + } +nacion('español'); // correcto. logs Yo soy español +}</pre> + +<p> </p> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/while", "while")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/break/index.html b/files/es/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..aff2a58733 --- /dev/null +++ b/files/es/web/javascript/reference/statements/break/index.html @@ -0,0 +1,41 @@ +--- +title: break +slug: Web/JavaScript/Referencia/Sentencias/break +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Termina el bucle actual, sentecia switch o label y transfiere el control del programa a la siguiente sentencia a la sentecia de terminación de éstos elementos.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">break [<em>etiqueta</em>];</pre> +<dl> + <dt> + <code>etiqueta</code></dt> + <dd> + Identificador asociado con la etiqueta de la sentencia.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>La sentencia <code>break</code> incluye una etiqueta opcional que permite al programa salir de una sentencia etiquetada. La sentencia <code>break</code> necesita estar anidada dentro de la sentencia etiquetada. La sentencia etiquetada puede ser cualquier tipo de sentencia; no tiene que ser una sentencia de bucle.</p> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<h4 id="Ejemplo:_Usando_break" name="Ejemplo:_Usando_break">Ejemplo: Usando <code>break</code></h4> +<p>La siguiente función tiene una sentencia que termina el bucle {{jsxref("Sentencias/while", "while")}} cuando <code>i</code> es 3, y entonces devuelve el valor 3 * <code>x</code>.</p> +<pre class="brush: js">function comprobarBreak(x) { + var i = 0; + while (i < 6) { + if (i == 3) + break; + i++; + } + return i * x; +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> + <li>{{jsxref("Sentencias/label", "label")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/class/index.html b/files/es/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..c37b9ba43b --- /dev/null +++ b/files/es/web/javascript/reference/statements/class/index.html @@ -0,0 +1,148 @@ +--- +title: class +slug: Web/JavaScript/Referencia/Sentencias/class +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La<strong> declaración class</strong> crea una nueva clase con el nombre proporcionado utilizando la herencia basada en prototipos</p> + +<div class="noinclude"> +<p>También se puede definir una clase usando una {{jsxref("Operators/class", "expresión de clase", "", 1)}}. Pero a diferencia de las expresiones de clases, la declaración de clases no permite que una clase existente sea declarada de nuevo y en caso de hacerse, lanzará un error de tipo.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // Contenido de la clase +} +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>De la misma manera que con las expresiones de clase, el contenido de una clase se ejecuta en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">modo estricto</a>.</p> + +<p>Las declaraciones de clases no están {{Glossary("Hoisting", "izadas")}} (al contrario que las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">declaraciones de funciones</a>).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Declaración_sencilla_de_una_clase">Declaración sencilla de una clase</h3> + +<p>En el siguiente ejemplo, primero definimos la clase <code>Polygon</code>, luego extendemos de ella para crear la clase <code>Square</code>. Notar que <code>super()</code>, utilizado en el constructor, sólo puede ser llamado dentro del constructor y debe ser llamado antes de que la palabra clave <code>this</code> pueda ser usada.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('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> + <tr> + <td>Array subclassing</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</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> + <tr> + <td>Array subclassing</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(43.0)}}</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/function"><code>declaración de funciones</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>expresión de clases</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Clases</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/const/index.html b/files/es/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..c55350fbd4 --- /dev/null +++ b/files/es/web/javascript/reference/statements/const/index.html @@ -0,0 +1,127 @@ +--- +title: const +slug: Web/JavaScript/Referencia/Sentencias/const +tags: + - ECMAScript6 + - Experimental + - Expérimental(2) + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Las variables constantes presentan un <strong>ámbito de bloque </strong><font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font> tal y como lo hacen las variables definidas usando la instrucción <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/let">let</a>, con la particularidad de que el valor de una constante no puede cambiarse a través de la reasignación. Las constantes <u>no se pueden redeclarar</u>.</p> + +<div class="warning"> +<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments" rel="noopener">ámbito léxico</a></font></font> terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con <code>var.</code></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">const <em>varname1 = <em>value1 [</em>, <em>varname2</em> = <em>value2 [</em>, <em>varname3</em> = <em>value3 [</em>, ... [</em>, <em>varnameN</em> = <em>valueN]]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>Nombre de la constante. Puede ser un identificador legal.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd>Valor de la constante. Puede ser cualquier expresión legal.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta declaración crea una constante cuyo alcance puede ser <strong>global o local para el bloque en el que se declara</strong>. Es necesario <strong>inicializar</strong> la constante, es decir, se debe especificar su valor en la misma sentencia en la que se declara, lo que tiene sentido, dado que no se puede cambiar posteriormente.</p> + +<p>La declaración de una constante crea una referencia de sólo lectura. No significa que el valor que tiene sea inmutable, sino que el identificador de variable no puede ser reasignado, por lo tanto, en el caso de que la asignación a la constante sea un objeto, el objeto sí que puede ser alterado.</p> + +<p>Una constante <strong>no puede compartir su nombre</strong> con una función o variable en el mismo ámbito.</p> + +<p><font><font>Todas las consideraciones acerca de la " <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/let#muerta">zona muerta temporal</a> " se aplican tanto a </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code><font><font>y</font></font><code>const</code><font><font>.</font></font></p> + +<div class="warning"> +<p><code>const</code> <s>es </s><u>fue</u> una <strong>extensión especifica de Mozilla</strong>, no <s>es</s> <u>era</u> soportado en IE, pero <s>tiene</s> <u>tenia</u> soporte parcial por Opera desde la versión 9.0 y por Safari.</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo produce una salida <code>"a es 7."</code></p> + +<pre class="brush: js">const a = 7; +document.writeln("a es " + a + "."); +</pre> + +<p>Las siguientes instrucciones demuestra como se comporta <code>const</code></p> + +<div class="warning"> +<p>Las instrucciones deberán ser ordenadas correctamente para conseguir la salida esperada a los ejemplos</p> +</div> + +<pre class="brush: js">// NOTA: Las constantes pueden ser declaradas en mayusculas o minusculaas, +//pero por convencion para distinguirlas del resto de variables se escribe todo en mayusculas + +// definimos MY_FAV como constante y le damos un valor de 7 +const MY_FAV = 7; + +// lanzara un error: Unkeught TypeError: Asignación a variable constante. +MY_FAV = 20; + +// imprimira 7 +console.log('my favorite number is: ' + MY_FAV); + +// lanzara un error: SyntaxError: tratando de redeclarar una constante. El identificador 'MY_FAV' ya ha sido declarado +const MY_FAV = 20; + +// el nombre MY_FAV esta reservado para la constante anterior, también fallara y lanzara un SyntaxError por la redeclaración +var MY_FAV = 20; + +// el nombre MY_FAV esta reservado para la variable anterior, esto también lanzara un SyntaxError por la redeclaración +let MY_FAV = 20; + +// es importante tener en cuenta como funciona el alcance de bloque +if (MY_FAV === 7) { + // esto esta bien y crea una variable MY_FAV de alcance/ambito de bloque + // (funciona igual de bien con let para declarar un alcance de bloque/ambito de variable no-constante) + const MY_FAV = 20; + + // MY_FAV ahora es 20 + console.log('my favorite number is ' + MY_FAV); + + // aquín también lanzara un SyntaxError por la redeclaración + var MY_FAV = 20; +} + +// MY_FAV todavia es 7 +console.log('my favorite number is ' + MY_FAV); + +// lanza error, falta el inicializador en la declaracion de const +const FOO; + +// const tambien funciona en objetos +const MY_OBJECT = {'key': 'value'}; + +// Intentando sobrescribir el objeto nos lanza un error +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// Sin embargo, los object keys no estan protegidas, +// por lo que la siguiente sentencia se ejecutara sin problema +MY_OBJECT.key = 'otherValue'; // Use Object.freeze() para hacer un objeto inmutable + +// Lo mismo se aplica a los arrays +const MY_ARRAY = []; +// es posible empujar elementos en el array +MY_ARRAY.push('A'); // ["A"] +// Sin embargo, asignar un nuevo array a la variable lanza error +MY_ARRAY = ['B']</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/var", "var")}}</li> + <li>{{jsxref("Sentencias/let", "let")}}</li> + <li><a href="/en/JavaScript/Guide/Values,_Variables,_and_Literals#Constants" title="en/JavaScript/Guide/Values, Variables, and Literals#Constants">Constants in JavaScript Guide</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/continue/index.html b/files/es/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..5371b4cdd7 --- /dev/null +++ b/files/es/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,66 @@ +--- +title: continue +slug: Web/JavaScript/Referencia/Sentencias/continue +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Termina la ejecución de las sentencias de la iteración actual del bucle actual o la etiqueta y continua la ejecución del bucle con la próxima iteración.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">continue [ <em>etiqueta</em> ];</pre> +<dl> + <dt> + <code>label</code></dt> + <dd> + Identificador asociado con la etiqueta de la sentencia.</dd> +</dl> +<h3 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h3> +<p>En contraste con la sentencia {{jsxref("Sentencias/break", "break")}}, <code>continue</code> no termina la ejecución del bucle por completo; en cambio,</p> +<ul> + <li>En un bucle {{jsxref("Sentencias/while", "while")}}, salta de regreso a la condición.</li> +</ul> +<ul> + <li>En un bucle {{jsxref("Sentencias/for", "for")}}, salta a la expresión actualizada.</li> +</ul> +<p>La sentencia <code>continue</code> puede incluir una etiqueta opcional que permite al programa saltar a la siguiente iteración del bucle etiquetado en vez del bucle actual. En este caso, la sentencia <code>continue</code> necesita estar anidada dentro de esta sentecia etiquetada.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_continue_con_while" name="Ejemplo:_Usando_continue_con_while">Ejemplo: Usando <code>continue</code> con <code>while</code></h3> +<p>El siguiente ejemplo muestra un bucle {{jsxref("Sentencias/while", "while")}} que tiene una sentencia <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es 3. Así, <code>n</code> toma los valores 1, 3, 7 y 12.</p> +<pre class="brush: js">i = 0; +n = 0; +while (i < 5) { + i++; + if (i == 3) + continue; + n += i; +} +</pre> +<h3 id="Ejemplo:_Usando_continue_con_una_etiqueta" name="Ejemplo:_Usando_continue_con_una_etiqueta">Ejemplo: Usando <code>continue</code> con una etiqueta</h3> +<p>En el siguiente ejemplo, una sentencia etiquetada <code>checkiandj</code> contiene una sentencia etiquetada <code>checkj</code>. Si se encuentra <code>continue</code>, el programa continua hasta encima de la sentencia <code>checkj</code>. Cada vez que se encuentra <code>continue</code>, <code>checkj</code> se reitera hasta que su condición devuelve false. Cuando se devuelve false, el recordatorio de la sentencia <code>checkiandj</code> se completa.</p> +<p>Si <code>continue</code> tuviese una etiqueta <code>checkiandj</code>, el programa continuaría hasta encima de la sentencia <code>checkiandj</code>.</p> +<pre>checkiandj: +while (i < 4) { + document.write(i + "<br>"); + i += 1; + + checkj: + while (j > 4) { + document.write(j + "<br>"); + j -= 1; + if ((j % 2) == 0) + continue checkj; + document.write(j + " is odd.<br>"); + } + document.write("i = " + i + "<br>"); + document.write("j = " + j + "<br>"); +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/label", "label")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/debugger/index.html b/files/es/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..bb36e356c0 --- /dev/null +++ b/files/es/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,125 @@ +--- +title: debugger +slug: Web/JavaScript/Referencia/Sentencias/debugger +tags: + - JavaScript + - Sentencia +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La sentencia <strong>debugger</strong> invoca cualquier funcionalidad de depuración disponible, tiene la misma función que un breakpoint. Si la funcionalidad de depuración no está disponible, esta sentencia no tiene efecto alguno.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente ejemplo muestra un bloque de código donde ha sido insertada una sentencia debugger, para invocar el depurador (si existe) cuando la función es ejecutada.</p> + +<pre class="brush:js">function codigoPotencialmenteDefectuoso() { + debugger; + // realizar paso a paso o examinar código que contiene + // potenciales errores +}</pre> + +<p>Cuando el depurador es invocado, la ejecución se detiene en la sentencia debugger. Es como un punto de interrupción en el script.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Solo mencionada como palabra reservada</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</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 para 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="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Debugging_JavaScript">Debugging JavaScript</a></li> + <li><a href="/en-US/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/do...while/index.html b/files/es/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..628c1458cd --- /dev/null +++ b/files/es/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,49 @@ +--- +title: do...while +slug: Web/JavaScript/Referencia/Sentencias/do...while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La sentencia (hacer mientras) crea un bucle que ejecuta una sentencia especificada, hasta que la condición de comprobación se evalúa como falsa. La condición se evalúa después de ejecutar la sentencia, dando como resultado que la sentencia especificada se ejecute al menos una vez.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">do + <em>sentencia</em> +while (<em>condición</em>); +</pre> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentencia que se ejecuta al menos una vez y es reejecutada cada vez que la condición se evalúa a verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utilice la sentencia {{jsxref("Statements/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentencias.</dd> +</dl> + +<dl> + <dt><code>condición</code></dt> + <dd>Una expresión se evalúa después de cada pase del bucle. Si <code>condición</code> se evalúa como verdadera, la <code>sentencia</code> se re-ejecuta. Cuando <code>condición</code> se evalúa como falsa, el control pasa a la siguiente sentencia hacer mientras.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_Usando_do...while" name="Ejemplo:_Usando_do...while">Usando <code>hacer mientras</code></h3> + +<p>En el siguiente ejemplo, el bucle hacer mientras itera al menos una vez y se reitera hasta que <code>i</code> ya no sea menor que 5.</p> + +<pre class="brush: js">do { + i += 1; + document.write(i); +} while (i < 5); +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/while", "while")}}</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/empty/index.html b/files/es/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..627fd889c7 --- /dev/null +++ b/files/es/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,141 @@ +--- +title: empty +slug: Web/JavaScript/Referencia/Sentencias/Empty +tags: + - JavaScript + - Sentencia + - Vacía +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Un <strong>empty statement</strong> o sentencia vacía es usada para no proveer una sentencia, incluso si la sintaxis JavaScript esperase una.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sentencia vacía es un punto y coma (;) que indica que no se ejecutará ninguna sentencia, incluso si la sintaxis JavaScript requiere una. El comportamiento opuesto, donde se desean ejecutar varias sentencias pero JavaScript solo permite una sola, es posible usando una <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/block">sentencia de bloque</a>; la cual combina varias declaraciones en una.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>La sentencia vacía es comúnmente usada en bucles. Por ejemplo, un bucle for sin bloque de sentencias:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Asignar el valor 0 a todos los elementos del array +for (i = 0; i < arr.length; arr[i++] = 0) /* sentencia vacía */ ; + +console.log(arr); +// [0, 0, 0] +</pre> + +<p><strong>Nota:</strong> Es una buena práctica comentar el uso intencional de la sentencia vacía, ya que no es fácilmente distinguible de un punto y coma normal. Un ejemplo de uso probablemente no intencional:</p> + +<pre class="brush: js">if (condicion); // Esta condición no ejerce ningún control! + borrarTodo() // Por lo cual esta sentencia será ejecutada siempre!!! +</pre> + +<p>Otro ejemplo de uso:</p> + +<pre class="brush: js">var a = 1, b = 1; +if((a == 0) || (b = 0)); // Asigna a '<code>b'</code> el valor cero si '<code>a'</code> no es cero. +console.log(b); // 0</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-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>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="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Sentencias/block", "Sentencia de bloque")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/export/index.html b/files/es/web/javascript/reference/statements/export/index.html new file mode 100644 index 0000000000..6016afd0ba --- /dev/null +++ b/files/es/web/javascript/reference/statements/export/index.html @@ -0,0 +1,175 @@ +--- +title: export +slug: Web/JavaScript/Referencia/Sentencias/export +tags: + - ECMAScript 2015 + - JavaScript + - Módulos + - Sentencia + - export +translation_of: Web/JavaScript/Reference/Statements/export +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <strong><code>export</code></strong> se utiliza al crear módulos de JavaScript para exportar funciones, objetos o tipos de dato primitivos del módulo para que puedan ser utilizados por otros programas con la sentencia {{jsxref("Statements/import", "import")}}.</p> + +<p>Los módulos exportados están en {{jsxref("Strict_mode","strict mode")}} tanto si se declaran así como si no. La sentencia export no puede ser utilizada en scripts embebidos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; +export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; +export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // también var +export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // también var, const +export function FunctionName(){...} +export class ClassName {...} + +export default <em>expression</em>; +export default function (…) { … } // también class, function* +export default function name1(…) { … } // también class, function* +export { <var>name1</var> as default, … }; + +export * from …; +export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; +export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; +export { default } from …; +</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>Identificador a ser exportado (es posible importarlo a través de {{jsxref("Statements/import", "import")}} en otro script).</dd> +</dl> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>Existen dos tipos diferentes de exportación , <strong>nombrada</strong> y <strong>por defecto</strong>. Se pueden tener varias exportaciones nombradas por módulo pero sólo una exportación por defecto. Cada tipo corresponde a una de las sintaxis siguientes:</p> + +<ul> + <li>Exports con nombre: + <pre class="brush: js">// exporta la función previamente declarada +export { myFunction }; + +// exporta una constante +export const foo = Math.sqrt(2);</pre> + </li> + <li>Exports por defecto (function): + <pre class="brush: js">export default function() {} </pre> + </li> + <li>Exports por defecto (class): + <pre class="brush: js">export default class {} </pre> + </li> +</ul> + +<p>Los export con nombre son útiles cuando se necesitan exportar múltiples valores. Durante el import, es obligatorio usar el mismo nombre que el correspondiente objeto.</p> + +<p>Pero un export por defecto puede ser importado con cualquier nombre, por ejemplo:</p> + +<pre class="brush: js">export default k = 12; // en el archivo test.js + +import m from './test' // notese que tenemos la libertad de usar import m en lugar de import k, porque k era el export por defecto + +console.log(m); // escribirá 12</pre> + +<p>Sólo puede haber un export por defecto.</p> + +<p>La siguiente sintaxis no exporta un export por defecto del módulo importado:</p> + +<pre class="brush: js">export * from …;</pre> + +<p>Si necesita exportar por defecto, escriba lo siguiente en su lugar:</p> + +<pre class="brush: js">import mod from 'mod'; +export default mod;</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Syntax" name="Syntax">Usando exports con nombre</h3> + +<p>En el módulo, podremos usar el siguiente código:</p> + +<pre class="brush: js">// module "my-module.js" +function cube(x) { + return x * x * x; +} +const foo = Math.PI + Math.SQRT2; +var graph = { + options:{ + color:'white', + thickness:'2px' + }, + draw: function(){ + console.log('From graph draw function'); + } +} +export { cube, foo, graph };</pre> + +<p>De esta forma, en otro script, podemos tener:</p> + +<pre class="brush: js">//You should use this script in html with the type module , +//eg ''<script type="module" src="demo.js"></script>", +//open the page in a httpserver,otherwise there will be a CORS policy error. +//script demo.js + +import { cube, foo, graph } from 'my-module'; +graph.options = { + color:'blue', + thickness:'3px' +}; +graph.draw(); +console.log(cube(3)); // 27 +console.log(foo); // 4.555806215962888 +</pre> + +<h3 id="Usando_el_export_por_defecto">Usando el export por defecto</h3> + +<p>Si queremos exportar un sólo valor o tener uno por defecto para nuestro módulo, podemos usar un export por defecto:</p> + +<pre class="brush: js">// module "my-module.js" +export default function cube(x) { + return x * x * x; +} +</pre> + +<p>De esta forma la importación de un export default será sumamemte sencilla:</p> + +<pre class="brush: js">import cube from 'my-module'; +console.log(cube(3)); // 27</pre> + +<p>Tenga en cuenta que no es posible usar <code>var</code>, <code>let</code> o <code>const</code> con <code>export default</code>.</p> + +<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-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatiblidad_en_navegadores">Compatiblidad en navegadores</h2> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Vea también" name="Vea también">Vea también</h2> + +<ul> + <li>{{jsxref("Sentencias/import", "import")}}</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, publicación del blog de Hacks por Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, publicación del blog de Hacks por Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Libro de Axel Rauschmayer: "Exploring JS: Modules"</a></li> +</ul> + +<p> </p> diff --git a/files/es/web/javascript/reference/statements/for-await...of/index.html b/files/es/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..49349d7199 --- /dev/null +++ b/files/es/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,144 @@ +--- +title: for await...of +slug: Web/JavaScript/Referencia/Sentencias/for-await...of +tags: + - Iteración + - JavaScript + - Referencia + - Sentencia + - asincrónico + - await + - iterar +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>sentencia</strong> <strong><code>for await...of</code> </strong>crea un bucle iterando tanto sobre objetos iterables asincrónicos como sincrónicos, incluyendo: built-in {{jsxref("String")}}, {{jsxref("Array")}}, objetos <code>Array</code>-like (por ej., {{jsxref("Functions/arguments", "arguments")}} o {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, y async/sync iterables definidos por el usuario. Invoca un hook de iteración personalizada con sentencias a ser ejecutadas por el valor de cada propiedad diferente del objeto.</p> + +<p class="hidden">El código fuente de 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 envíanos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">for await (<em>variable</em> of <em>iterable</em>) { + <em>sentencia +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>En cada iteración, el valor de una propiedad diferente es asignado a <em>variable</em>. <em>variable</em> puede ser declarada con <code>const</code>, <code>let</code>, o <code>var</code>.</dd> + <dt><code>iterable</code></dt> + <dd>Objeto sobre cuyas propiedades se itera.</dd> +</dl> + +<h3 id="Iterando_sobre_iterables_asincrónicos">Iterando sobre iterables asincrónicos</h3> + +<p>También puedes iterar sobre un objeto que explícitamente implementa el protocolo async iterable:</p> + +<pre class="brush:js">var asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="Iterando_sobre_funciones_generadoras_asincrónicas">Iterando sobre funciones generadoras asincrónicas</h3> + +<p>Debido a que las funciones generadoras asincrónicas implementan el protocolo async iterator, las mismas pueden ser iteradas utilizando <code>for await... of</code></p> + +<pre class="brush: js">async function* asyncGenerator() { + var i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>Para un ejemplo más concreto de iteración sobre una función generadora utilizando <code>for await... of</code>, considera iterar sobre datos provistos por una API. Este ejemplo primero crea un iterador asincrónico para un stream de datos, luego lo utiliza para obtener el tamaño de la respuesta desde la API.</p> + +<pre class="brush: js">async function* streamAsyncIterator(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// Obtiene datos desde url y calcula el tamaño de la respuesta utilizando la función generadora asincrónica. +async function getResponseSize(url) { + const response = await fetch(url); + // Almacenará el tamaño de la respuesta en bytes. + let responseSize = 0; + // El buble for-await-of. Itera asincrónicamente sobre cada parte de la respuesta. + for await (const chunk of streamAsyncIterator(response.body)) { + // Incrementando el tamaño total. + responseSize += chunk.length; + } + + console.log(`Tamaño de la respuesta: ${responseSize} bytes`); + // salida esperada: "Tamaño de la respuesta: 1071472" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<div class="hidden">La tabla de compatiblidad de esta página es generada a partir de datos estructurados. Si te gustaría contribuir a estos datos, por favor clona <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.statements.for_await_of")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Statements/for...of")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/for...in/index.html b/files/es/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..0680d69dea --- /dev/null +++ b/files/es/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,150 @@ +--- +title: for...in +slug: Web/JavaScript/Referencia/Sentencias/for...in +tags: + - Característica del lenguaje + - Declaración + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La instrucción {{JSxRef("Sentencias/for...in", "for-in")}} itera sobre todas las {{JSxRef("../Enumerability_and_ownership_of_properties", "propiedades enumerables")}} de un objeto que está codificado por cadenas (ignorando los codificados por {{JSxRef("Objetos_globales/Symbol", "Símbolos")}}, incluidas las propiedades enumerables heredadas.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> + +<p 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.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>objeto</var>) + instrucción</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Asigna un nombre de propiedad diferente a la <em>variable</em> en cada iteración.</dd> + <dt><code>objeto</code></dt> + <dd>Objeto cuyas propiedades enumerables que no son símbolos se iteran.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Un bucle <code>for...in</code> solo itera sobre propiedades enumerables que no son símbolo. Los objetos creados a partir de constructores integrados como <code>Array</code> y <code>Object</code> han heredado propiedades no enumerables de <code>Object.prototype</code> y <code>String.prototype</code>, como el método {{JSxRef("String.indexOf", "indexOf()")}} de {{JSxRef("String")}} o el método {{JSxRef("Object.toString", "toString()")}} de {{JSxRef("Object")}}. El bucle iterará sobre todas las propiedades enumerables del objeto en sí y aquellas que el objeto hereda de su cadena de prototipos (las propiedades de los prototipos más cercanos tienen prioridad sobre las de los prototipos más alejados del objeto en su cadena de prototipos).</p> + +<h3 id="Propiedades_deleted_added_o_modified">Propiedades <code>deleted</code>, <code>added</code> o <code>modified</code></h3> + +<p>Un bucle <code>for...in</code> itera sobre las propiedades de un objeto en un orden arbitrario (consulta el operador {{JSxRef("Operadores/delete", "delete")}} para obtener más información sobre por qué no puede depender del aparente orden de la iteración, al menos en una configuración entre navegadores).</p> + +<p>Si una propiedad se modifica en una iteración y luego se visita en un momento posterior, su valor en el bucle es su valor en ese momento posterior. Una propiedad que se elimina antes de haber sido visitada no se visitará más tarde. Las propiedades agregadas al objeto sobre el que se está produciendo la iteración se pueden visitar u omitir de la iteración.</p> + +<p>En general, es mejor no agregar, modificar o eliminar propiedades del objeto durante la iteración, aparte de la propiedad que se está visitando actualmente. No hay garantía de si se visitará una propiedad agregada, si se visitará una propiedad modificada (distinta de la actual) antes o después de que se modifique, o si se visitará una propiedad eliminada antes de eliminarla.</p> + +<h3 id="Iteración_en_arreglos_y_for...in">Iteración en arreglos y <code>for</code>...<code>in</code></h3> + +<div class="note"> +<p><strong>Nota</strong>: <code>for...in</code> no se debe usar para iterar sobre un {{JSxRef("Array")}} donde el orden del índice es importante.</p> +</div> + +<p>Los índices del arreglo son solo propiedades enumerables con nombres enteros y, por lo demás, son idénticos a las propiedades generales del objeto. No hay garantía de que <code>for...in</code> devuelva los índices en un orden en particular. La instrucción de bucle <code>for...in</code> devolverá todas las propiedades enumerables, incluidas aquellas con nombres no enteros y aquellas que se heredan.</p> + +<p>Debido a que el orden de iteración depende de la implementación, es posible que la iteración sobre un arreglo no visite los elementos en un orden coherente. Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} con un índice numérico (o {{JSxRef("Array.prototype.forEach()")}} o el bucle {{JSxRef("Sentencias/for...of", "for...of")}}) cuando se itera sobre arreglos donde el orden de acceso es importante.</p> + +<h3 id="Iterar_solo_sobre_propiedades_directas">Iterar solo sobre propiedades directas</h3> + +<p>Si solo deseas considerar las propiedades adjuntas al objeto en sí mismo, y no sus prototipos, usa {{JSxRef("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} o realiza una {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} verificación ({{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}} también se puede utilizar). Alternativamente, si sabes que no habrá ninguna interferencia de código externo, puedes extender los prototipos incorporados con un método de verificación.</p> + +<h2 id="¿Por_qué_usar_for...in">¿Por qué usar <code>for</code>...<code>in</code>?</h2> + +<p>Dado que <code>for...in</code> está construido para iterar propiedades de objeto, no se recomienda su uso con arreglos y opciones como <code>Array.prototype.forEach()</code> y existe <code>for...of</code>, ¿cuál podría ser el uso de <code>for...in</code>?</p> + +<p>Es posible que se utilice de forma más práctica con fines de depuración, ya que es una forma fácil de comprobar las propiedades de un objeto (mediante la salida a la consola o de otro modo). Aunque los arreglos suelen ser más prácticos para almacenar datos, en situaciones en las que se prefiere un par clave-valor para trabajar con datos (con propiedades que actúan como la "clave"), puede haber casos en los que desees comprobar si alguna de esas claves cumple un valor particular.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizar_for...in">Utilizar <code>for</code>...<code>in</code></h3> + +<p>El siguiente bucle <code>for...in</code> itera sobre todas las propiedades enumerables que no son símbolos del objeto y registra una cadena de los nombres de propiedad y sus valores.</p> + +<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Produce: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<h3 id="Iterar_propiedades_directas">Iterar propiedades directas</h3> + +<p>La siguiente función ilustra el uso de {{JSxRef("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} — las propiedades heredadas no se muestran.</p> + +<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3}; + +function ColoredTriangle() { + this.color = 'red'; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (const prop in obj) { + if (obj.hasOwnProperty(prop)) { + console.log(`obj.${prop} = ${obj[prop]}`); + } +} + +// Produce: +// "obj.color = red" +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'declaración for...in')}}</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.statements.for_in")}}</p> + +<h3 id="Compatibilidad_expresiones_iniciadoras_en_modo_estricto">Compatibilidad: expresiones iniciadoras en modo estricto</h3> + +<p>Antes de Firefox 40, era posible utilizar una expresión iniciadora (<code>i=0</code>) en un bucle <code>for...in</code>:</p> + +<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Este comportamiento no estándar ahora se ignora en la versión 40 y posteriores, y presentará un {{JSxRef("SyntaxError")}} ("{{JSxRef("errors/Invalid_for-in_initializer", "iniciador for...in no válido", "las declaraciones de encabezado del bucle for-in posiblemente no tengan iniciadores")}} en {{JSxRef("Strict_mode", "modo estricto")}} ({{bug(748550)}} y {{bug(1164741)}}").</p> + +<p>Otros motores como v8 (Chrome), Chakra (IE/Edge) y JSC (WebKit/Safari) están investigando si eliminar también el comportamiento no estándar.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("Sentencias/for...of", "for...of")}} — una declaración similar que itera sobre la propiedad <code>values</code></li> + <li>{{JSxRef("Sentencias/for_each...in", "for each...in")}} — una declaración similar pero obsoleta que itera sobre los valores de las propiedades de un objeto, en lugar de los nombres de las propiedades en sí</li> + <li>{{JSxRef("Sentencias/for", "for")}}</li> + <li>{{JSxRef("../Guide/Iterators_and_Generators", "Expresiones generadoras")}} (usa la sintaxis <code>for...in</code>)</li> + <li>{{JSxRef("../Enumerability_and_ownership_of_properties", "Enumerabilidad y posesión de propiedades")}}</li> + <li>{{JSxRef("Object.getOwnPropertyNames()")}}</li> + <li>{{JSxRef("Object.prototype.hasOwnProperty()")}}</li> + <li>{{JSxRef("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/for...of/index.html b/files/es/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..572308b41a --- /dev/null +++ b/files/es/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,319 @@ +--- +title: for...of +slug: Web/JavaScript/Referencia/Sentencias/for...of +tags: + - ECMAScript6 + - JavaScript + - Referencia + - Sentencia +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">La sentencia </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">sentencia <code>for...of</code></strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> ejecuta un bloque de código para cada elemento de un </span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/iterable" style="font-size: 1rem; letter-spacing: -0.00278rem;">objeto iterable</a>,<span style="font-size: 1rem; letter-spacing: -0.00278rem;"> como lo son: {{jsxref("String")}}, {{jsxref("Array")}}, objetos similares a array (por ejemplo, {{jsxref("Functions/arguments", "arguments")}} or </span><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/NodeList" style="font-size: 1rem; letter-spacing: -0.00278rem;" title="NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()."><code>NodeList</code></a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}} e iterables definidos por el usuario.</span></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>En cada iteración el elemento (propiedad enumerable) correspondiente es asignado a <em>variable</em>. </dd> + <dt><code>iterable</code></dt> + <dd>Objeto cuyas propiedades enumerables son iteradas. </dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Iterando_un_jsxrefArray">Iterando un {{jsxref("Array")}}</h3> + +<pre class="brush: js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 1; + console.log(value); +} +// 11 +// 21 +// 31 +</pre> + +<p>Es posible usar <code>const</code> en lugar de <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>si no se va a modificar la variable dentro del bloque.</p> + +<pre class="brush: js">let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30</pre> + +<h3 id="Iterando_un_jsxrefString">Iterando un {{jsxref("String")}}</h3> + +<pre class="brush: js">let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o"</pre> + +<h3 id="Iterando_un_jsxrefTypedArray">Iterando un {{jsxref("TypedArray")}}</h3> + +<pre class="brush: js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255</pre> + +<h3 id="Iterando_un_jsxrefMap">Iterando un {{jsxref("Map")}}</h3> + +<pre class="brush: js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// ['a', 1] +// ['b', 2] +// ['c', 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_un_jsxrefSet">Iterando un {{jsxref("Set")}}</h3> + +<pre class="brush: js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_un_objeto_arguments">Iterando un objeto <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></h3> + +<pre class="brush: js">(function() { + for (let argument of arguments) { + console.log(argument); + } +})(1, 2, 3); + +// 1 +// 2 +// 3</pre> + +<h3 id="Iterando_una_colección_del_DOM">Iterando una colección del DOM</h3> + +<p>Iterando colecciones del DOM como un {{domxref("NodeList")}}: el siguiente ejemplo añade la clase "read" a los párrafos (<code><p></code>) que son descendientes directos de un (<code><article></code>):</p> + +<pre class="brush: js">// Nota: Esto solo funcionará en plataformas que tengan +// implementado NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +}</pre> + +<h3 id="Clausurando_iteraciones">Clausurando iteraciones</h3> + +<p>En los bucles <code>for...of</code>, se puede causar que la iteración termine de un modo brusco usando: <code>break</code>, <code>continue<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_1">[4]</a></code>, <code>throw</code> or <code>return<a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_closing_2">[5]</a></code>. En estos casos la iteración se cierra.</p> + +<pre><code>function* foo(){ + yield 1; + yield 2; + yield 3; +}; + +for (let o of foo()) { + console.log(o); + break; // closes iterator, triggers return +}</code></pre> + +<h3 id="Iterando_generadores">Iterando generadores</h3> + +<p>También es posible iterar las nuevas funciones <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">generator</a></strong>:</p> + +<pre class="brush: js">function* fibonacci() { // una función generador + let [prev, curr] = [0, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // interrumpir la secuencia en 1000 + if (n >= 1000) { + break; + } +}</pre> + +<div class="note"> +<h4 id="No_se_deben_reutilizar_los_generadores"><a id="#re-use" name="#re-use">No se deben reutilizar los generadores</a></h4> + +<p>Los generadores no deben ser reutilizados, incluso si el bucle <strong><code>for...of</code></strong> se ha terminado antes de tiempo con la sentencia <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/break">break</a>. Una vez abandonado el bucle, el generador está cerrado y tratar de iterar sobre él de nuevo no dará más resultados. Firefox no ha implementado aún este comportamiento y el generador puede ser reutilizado en contra de lo escrito en el estándar ES6 (<a href="https://www.ecma-international.org/ecma-262/6.0/#sec-13.7.5.13">13.7.5.13, step 5m</a>), pero esto cambiará una vez que el bug {{Bug(1147371)}} haya sido corregido.</p> +</div> + +<pre class="brush: js example-bad">var gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (let o of gen) { + console.log(o); + break; // Finaliza la iteración +} + +// El generador no debe ser reutilizado, lo siguiente no tiene sentido +for (let o of gen) { + console.log(o); // Nunca será llamado +}</pre> + +<h3 id="Iterando_otros_objetos_iterables">Iterando otros objetos iterables</h3> + +<p>Es posible, además, iterar un objeto que explicitamente implemente el protocolo <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a>:</p> + +<pre class="brush: js">var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2</pre> + +<h3 id="Diferencia_entre_for...of_y_for...in">Diferencia entre <code>for...of</code> y <code>for...in</code></h3> + +<p>El bucle <code><strong><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="en-US/docs/JavaScript/Reference/Statements/for...in">for...in</a></strong> iterará sobre <strong>todas las propiedades de un objeto</strong>.</code> Más tecnicamente, iterará sobre cualquier propiedad en el objeto que haya sido internamente definida con su propiedad <code>[[Enumerable]] </code>configurada como <code>true</code>. </p> + +<p>La sintaxis de <strong><code>for...of</code> </strong>es específica para las <strong>colecciones</strong>, y no para todos los objetos. Esta Iterará sobre cualquiera de los elementos de una colección que tengan la propiedad <code>[Symbol.iterator]</code>.</p> + +<p>El siguiente ejemplo muestra las diferencias entre un bucle<strong> <code>for...of</code></strong> y un bucle <strong>f<code>or...in</code></strong>. </p> + +<pre class="brush: js">let arr = [3, 5, 7]; +arr.foo = "hola"; + +for (let i in arr) { + console.log(i); // logs "0", "1", "2", "foo" +} + +for (let i of arr) { + console.log(i); // logs "3", "5", "7" +}</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">Cometario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></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>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome(38)}} <a href="##Chrome_note_1">[1]</a><br> + {{CompatChrome(51)}} <a href="##Chrome_note_3">[3]</a></td> + <td>{{CompatGeckoDesktop("13")}} <a href="##Gecko_note_2">[2]</a> <a href="##Chrome_note_4">[4]</a></td> + <td>12</td> + <td>25</td> + <td>7.1</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>5.1</td> + <td>{{CompatChrome(38)}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Chrome_note_1">[1]</a></td> + <td>{{CompatGeckoMobile("13")}} <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/for...of$edit#Gecko_note_2">[2]</a></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p><a id="#Chrome_note_1" name="#Chrome_note_1">[1]</a> Desde Chrome 29 a Chrome 37 esta funcionalidad estuvo disponible al activar la opción chrome://flags/#enable-javascript-harmony: “JavaScript experimental”.</p> + +<p><a id="#Gecko_note_2" name="#Gecko_note_2">[2]</a> Antes de Firefox 51, el uso de <code>for...of usando</code> {{jsxref("const")}}<code> resultaba en un</code> {{jsxref("SyntaxError")}} ("missing = in const declaration"). El problema ha sido resuelto ({{bug(1101653)}}).</p> + +<p><a id="#Chrome_note_3" name="#Chrome_note_3">[3]</a> Chrome 51 añadió soporte para iterar objetos.</p> + +<p><a id="#Chrome_note_4" name="#Chrome_note_4">[4]</a> Firefox aún permite el uso de un generador después de haber interrumpido el bucle {{Bug(1147371)}}. Como se vio más arriba, <a href="##re-use">no se deben reutilizar los generadores</a>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/for/index.html b/files/es/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..875236ba2b --- /dev/null +++ b/files/es/web/javascript/reference/statements/for/index.html @@ -0,0 +1,57 @@ +--- +title: for +slug: Web/JavaScript/Referencia/Sentencias/for +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Crea un bucle que consiste en tres expresiones opcionales, encerradas en paréntesis y separadas por puntos y comas, seguidas de una sentencia ejecutada en un bucle.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">for ([<em>expresion-inicial</em>]; [<em>condicion</em>]; [<em>expresion-final</em>])<em>sentencia</em> +</pre> +<dl> + <dt> + <code>expresion-inicial</code></dt> + <dd> + Una expresión (incluyendo las expresiones de asignación) o la declaración de variable. Típicamente se utiliza para usarse como variable contador. Esta expresión puede opcionalmente declarar nuevas variables con la palabra clave <code>var</code>. Estas variables no son locales del bucle, es decir, están en el mismo alcance en el que está el bucle <code>for</code>. El resultado de esta expresión es descartado.</dd> +</dl> +<dl> + <dt> + <code>condicion</code></dt> + <dd> + Una expresión para ser evaluada antes de cada iteración del bucle. Si esta expresión se evalúa como verdadera, se ejecuta <code>sentencia</code>. Esta comprobación condicional es opcional. Si se omite, la condición siempre se evalúa como verdadera. Si la expresión se evalúa como falsa, la ejecución salta a la primera expresión que sigue al constructor de <code>for</code>.</dd> +</dl> +<dl> + <dt> + <code>expresion-final</code></dt> + <dd> + Una expresión para ser evaluada al final de cada iteración del bucle. Esto ocurre antes de la siguiente evaluación de la <code>condicion</code>. Generalmente se usa para actualizar o incrementar la variable contador.</dd> +</dl> +<dl> + <dt> + <code>sentencia</code></dt> + <dd> + Una sentencia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro del bucle, utilice una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar aquellas sentecias.</dd> +</dl> +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> +<h4 id="Ejemplo:_Usando_for" name="Ejemplo:_Usando_for">Ejemplo: Usando <code>for</code></h4> +<p>La siguiente sentencia <code>for</code> comienza mediante la declaración de la variable <code>i</code> y se inicializa a <code>0</code>. Comprueba que <code>i</code> es menor que nueve, realiza las dos sentencias con éxito e incrementa <code>i</code> en 1 después de cada pase del bucle.</p> +<pre class="eval">for (var i = 0; i < 9; i++) { + n += i; + mifuncion(n); +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> + <li>{{jsxref("Sentencias/empty", "empty")}}</li> + <li>{{jsxref("Sentencias/while", "while")}}</li> + <li>{{jsxref("Sentencias/do...while", "do...while")}}</li> + <li>{{jsxref("Sentencias/for...in", "for...in")}}</li> + <li>{{jsxref("Sentencias/for...of", "for...of")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/function/index.html b/files/es/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..36b02935d9 --- /dev/null +++ b/files/es/web/javascript/reference/statements/function/index.html @@ -0,0 +1,52 @@ +--- +title: function +slug: Web/JavaScript/Referencia/Sentencias/function +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Declara una función con los parámetros especificados.</p> +<p>Puede también definir funciones usando el constructor {{jsxref("Function")}} y el {{jsxref("Operadors/function", "function")}} (expresión function).</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="syntaxbox">function <em>nombre</em>([<em>parametro1</em>] [,<em>parametro2</em>] [..., <em>parametroN</em>]) {<em>sentencias</em>} +</pre> +<dl> + <dt> + <code>nombre</code></dt> + <dd> + El nombre de la función.</dd> +</dl> +<dl> + <dt> + <code>parametroN</code></dt> + <dd> + El nombre de un argumento que se pasa a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> +<dl> + <dt> + <code>sentencias</code></dt> + <dd> + Las sentencias que comprenden el cuerpo de la función.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Para devolver un valor, la función debe tener una sentencia {{jsxref("Sentencias/return", "return")}} que especifica el valor a devolver.</p> +<p>Una función creada con la sentencia <code>function</code> es un objeto <code>Function</code> y tiene todas las propiedades, métodos, y comportamiento de los objetos <code>Function</code>. Vea {{jsxref("Function")}} para información detallada sobre funciones.</p> +<p>Una función puede también ser declarada dentro de una expresión. En este caso la función es normalmente anónima. Vea {{jsxref("Operadores/function", "function expression")}} para más información acerca de <code>function</code> (expresión function).</p> +<p>Las funciones pueden declararse condicionalmente. Es decir, una definición de una función puede estar anidada dentro de una sentecia <code>if</code>. Técnicamente, tales declaraciones no son en realidad declaraciones de funciones; son expresiones function (expresiones de función).</p> +<h2 id="Ejemplo" name="Ejemplo">Ejemplo</h2> +<h3 id="Ejemplo:_Usando_function" name="Ejemplo:_Usando_function">Ejemplo: Usando <code>function</code></h3> +<p>El siguiente código declara una función que devuelve la cantidad total de ventas, cuando se da el número de unidades vendidas de productos <code>a</code>, <code>b</code>, y <code>c</code>.</p> +<pre class="brush: js">function calcular_ventas(unidades_a, unidades_b, unidades_c) { + return unidades_a*79 + unidades_b * 129 + unidades_c * 699; +} +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> + <li>{{jsxref("Function")}}</li> + <li>Operadores{{jsxref("Operadores/function", "function")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/function_star_/index.html b/files/es/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..79ff51b7f2 --- /dev/null +++ b/files/es/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,224 @@ +--- +title: function* +slug: Web/JavaScript/Referencia/Sentencias/function* +tags: + - Declaración + - Experimental + - Expérimental(2) + - Iterador + - función +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <code><strong>function*</strong></code> (la palabra clave <code>function</code> seguida de un asterisco) define una <em>función generadora</em>, que devuelve un objeto {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<div class="noinclude"> +<p>También puedes definir funciones generadoras usando el constructor {{jsxref("GeneratorFunction")}} y una {{jsxref("Operators/function*", "function* expression")}}.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">function* <em>nombre</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>instrucciones</em> +} +</pre> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>El nombre de los argumentos que se le van a pasar a la función. Una función puede tener hasta 255 argumentos.</dd> +</dl> + +<dl> + <dt><code>instrucciones</code></dt> + <dd>Las instrucciones que componen el cuerpo de la función.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Los generadores son funciones de las que se puede salir y volver a entrar. Su contexto (asociación de variables) será conservado entre las reentradas.</p> + +<p>La llamada a una función generadora no ejecuta su cuerpo inmediatamente; se devuelve un objeto <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">iterador</a> para la función en su lugar. Cuando el metodo <code>next()</code> del iterador es llamado , el cuerpo de la función generadora es ejecutado hasta la primera expresión {{jsxref("Operators/yield", "yield")}}, la cual especifica el valor que será retornado por el iterador o con, {{jsxref("Operators/yield*", "yield*")}}, delega a otra función generadora. El método <code>next()</code> retorna un objeto con una propiedad <em>value</em> que contiene el valor bajo el operador yield y una propiedad <em>done </em>que indica, con un booleano, si la función generadora ha hecho yield al último valor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_simple">Ejemplo simple</h3> + +<pre class="brush: js">function* idMaker(){ + var index = 0; + while(index < 3) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // undefined +// ...</pre> + +<h3 id="Ejemplo_con_yield*">Ejemplo con yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i){ + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificaciones</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<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>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoDesktop("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>26</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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>{{CompatChrome(39.0)}}</td> + <td>{{CompatGeckoMobile("26.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>yield*</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("27.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>IteratorResult</code> object instead of throwing</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("29.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_de_Firefox">Notas específicas de Firefox</h3> + +<h4 id="Generadores_e_iteradores_en_versiones_de_Firefox_anteriores_a_26">Generadores e iteradores en versiones de Firefox anteriores a 26</h4> + +<p>Las versiones anteriores de FireFox implementan así mismo una versión anterior de la propuesta de generadores. En la versión anterior, los generadores eran definidos utilizando la declaración <code>function</code> de una manera regular (Sin asterisco). Véase <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Legacy generator function </a>para mayor información.</p> + +<h4 id="IteratorResult_object_returned_instead_of_throwing"><code>IteratorResult</code> object returned instead of throwing</h4> + +<p>Starting with Gecko 29 {{geckoRelease(29)}}, the completed generator function no longer throws a {{jsxref("TypeError")}} "generator has already finished". Instead, it returns an <code>IteratorResult</code> object like <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}} object</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/The_Iterator_protocol">The Iterator protocol</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://www.youtube.com/watch?v=ZrgEZykBHVo&list=PLuoyIZT5fPlG44bPq50Wgh0INxykdrYX7&index=1">Hemanth.HM: The New gen of *gen(){}</a></li> + <li><a href="http://taskjs.org/">Task.js</a></li> + </ul> + </li> +</ul> diff --git a/files/es/web/javascript/reference/statements/if...else/index.html b/files/es/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..3bac571218 --- /dev/null +++ b/files/es/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,109 @@ +--- +title: if...else +slug: Web/JavaScript/Referencia/Sentencias/if...else +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>Ejecuta una sentencia si una condición específicada es evaluada como verdadera. Si la condición es evaluada como falsa, otra sentencia puede ser ejecutada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="eval">if (<em>condición</em>) <em>sentencia1</em> [else <em>sentencia2</em>] +</pre> + +<dl> + <dt><code>condición</code></dt> + <dd>Una expresión que puede ser evaluada como verdadera o falsa.</dd> +</dl> + +<dl> + <dt><code>sentencia1</code></dt> + <dd>Sentencia que se ejecutará si <code>condición</code> es evaluada como verdadera. Puede ser cualquier sentencia, incluyendo otras sentenccias <code>if</code> anidadas. Para ejecutar múltiples sentencias, use una sentencia {{jsxref("Sentencias/block", "block")}} ({ ... }) para agruparlas.</dd> +</dl> + +<dl> + <dt><code>sentencia2</code></dt> + <dd>Sentencia que se ejecutará si <code>condición</code> se evalúa como falsa, y exista una cláusula <code>else</code>. Puede ser cualquier sentencia, incluyendo sentencias block y otras sentencias <code>if</code> anidadas.</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Multiples sentencias <code>if...else</code> pueden ser anidadas para crear una cláusula <code>else if</code>:</p> + +<pre>if (<em>condición1</em>) + <em>sentencia1</em> +else if (<em>condición2</em>) + <em>sentencia2</em> +else if (<em>condición3</em>) + <em>sentencia3</em> +... +else + <em>sentenciaN</em> +</pre> + +<p>Para entender como esto funciona, así es como se vería si el anidamiento hubiera sido indentado correctamente:</p> + +<pre>if (<em>condición1</em>) + <em>sentencia1</em> +else + if (<em>condición2</em>) + <em>sentencia2</em> + else + if (<em>condición3</em>) + ... +</pre> + +<p>Para ejecutar varias sentencias en una cláusula, use una sentencia block (<code>{ ... }</code>) para agruparlas. Generalmente, es una buena práctica usar siempre sentencias block, especialmente en código que incluya sentencias if anidadas:</p> + +<pre class="brush: js">if (condición) { + sentencia1 +} else { + sentencia2 +} +</pre> + +<p>No confundir los valores primitivos <code>true</code> y <code>false</code> con los valores true y false del objeto {{jsxref("Boolean")}}. Cualquier valor diferente de <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, o la cadena vacía (<code>""</code>), y cualquier objecto, incluso un objeto Boolean cuyo valor es false, se evalúa como verdadero en una sentencia condicional. Por ejemplo:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // Esta condición se evalúa como verdadera +</pre> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example:_Using_if...else" name="Example:_Using_if...else">Ejemplo: Uso de <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char == from_char) { + result = result + to_char; + x++; +} else + result = result + clear_char; +</pre> + +<h3 id="Example:_Assignment_within_the_conditional_expression" name="Example:_Assignment_within_the_conditional_expression">Ejemplo: Asignación en una expresión condicional</h3> + +<p>Es aconsejable no usar asignaciones simples en una expresión condicional, porque la asignación puede ser confundida con igualdad (operador relacional) cuando se lee el código. Por ejemplo, no use el siguiente código:</p> + +<pre class="brush: js">if (x = y) { + /* sentencia */ +} +</pre> + +<p>Si realmente necesita una asignación dentro de una exprsión condicional, una práctica común es poner paréntesis adicionales alrededor del la asignación, por ejemplo:</p> + +<pre class="brush: js">if ((x = y)) { + /* sentencia */ +} +</pre> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/block", "block")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/import.meta/index.html b/files/es/web/javascript/reference/statements/import.meta/index.html new file mode 100644 index 0000000000..8c09e97475 --- /dev/null +++ b/files/es/web/javascript/reference/statements/import.meta/index.html @@ -0,0 +1,93 @@ +--- +title: import.meta +slug: Web/JavaScript/Referencia/Sentencias/import.meta +translation_of: Web/JavaScript/Reference/Statements/import.meta +--- +<div>{{JSSidebar("Statements")}}</div> + +<p>El objeto<strong> <code>import.meta</code></strong> expone el contenido especifico de la metadata al módulo JavaScript. Este contiene informacion sobre el módulo, como por ejemplo, la URL del mismo.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">import.meta</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>La sintasis consiste de la palabra clave {{JSxRef("Statements/import","import")}},un punto, y un identificador <code>meta</code>. Normalmente, la parte a la izquierda del punto es el objeto sobre el cual la accion es realizada, pero aqui <code>import</code> no es realmente un objeto.</p> + +<p>El objeto <code>import.meta</code> es creado por la implementacion ECMAScript , con un prototipo {{JSxRef("null")}} . El objeto es extensible y sus propiedades son grabables, editables y enumerables.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_import.meta">Usando import.meta</h3> + +<p>Dado un módulo <code>my-module.js</code></p> + +<pre class="brush: html"><script type="module" src="my-module.js"></script> +</pre> + +<p>puedes acceder a la meta información sobre el módulo usando el objeto <code>import.meta</code>.</p> + +<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre> + +<p>Este retorna un objeto con una propiedad <code>url</code> indicando la URL base del módulo.Esta será la URL de la que el script fue obtenido, por scripts externos, o la URL base del documento que contiene el documento, por scripts inline.</p> + +<p>Nota que este incluirá parametros de la consulta y/o el hash (ej: seguido del <code>?</code> or <code>#</code>).</p> + +<p>Por ejemplo, con el siguiente HTML:</p> + +<pre class="brush: html"><script type="module"> +import './index.mjs?someURLInfo=5'; +</script></pre> + +<p>..El siguiente archivo JavaScript registrará el parámetro <code>someURLInfo</code>:</p> + +<pre class="brush: js">// index.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>Lo mismo aplica cuando un archivo importa otro:</p> + +<pre class="brush: js">// index.mjs +import './index2.mjs?someURLInfo=5'; + +// index2.mjs +new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre> + +<p>Nota que mientras Node.js pasa en la consulta los parámetros (o el hash ) como en el último ejemplo, a partir de Node 14.1.0, una URL con parametros en la consulta fallará cuando se carguen en el formato <code>node --experimental-modules index.mjs?someURLInfo=5</code> (es tratado como un archivo en lugar de una URL en este contexto).</p> + +<p>Tal argumento específico del archivo podria ser complementario al usado en toda la aplicacion <code>location.href</code> (con consultas strings o hash añadidas despues de la ruta HTML) (o en Node.js, mediante <code>process.argv</code>).</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificaciones</th> + </tr> + <tr> + <td><code><a href="https://tc39.es/proposal-import-meta/#prod-ImportMeta">import.meta</a></code> proposal</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.statements.import_meta")}}</p> + +<h3 id="Implementation_Progress">Implementation Progress</h3> + +<p>La siguiente tabla provee el estatus de implementación diaria para esta caracteristica, porque esta caracteristica aun no ha alcanzado la estabilidad entre navegadores. La información es generada corriendo los test relevantes de la caracteristica en <a href="https://github.com/tc39/test262">Test262</a>, la suite estandar de test de JavaScript, en el build nocturno, o en el último release de cada motor de los browser de JavaScript.</p> + +<div>{{EmbedTest262ReportResultsTable("import.meta")}}</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{JSxRef("Statements/import", "import")}}</li> + <li>{{JSxRef("Statements/export", "export")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/import/index.html b/files/es/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..7d2c261d0e --- /dev/null +++ b/files/es/web/javascript/reference/statements/import/index.html @@ -0,0 +1,177 @@ +--- +title: import +slug: Web/JavaScript/Referencia/Sentencias/import +tags: + - ECMAScript 2015 + - JavaScript + - Módulos + - Sentencia + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Sentencias")}}</div> + +<p>La sentencia <code><strong>import</strong></code> se usa para importar funciones que han sido exportadas desde un módulo externo.</p> + +<div class="note"> +<p>Por el momento, esta característica sólo está <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">comenzando a ser implementada</a> de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y <a href="http://babeljs.io/">Babel</a>, y en empaquetadores como <a href="https://github.com/rollup/rollup">Rollup</a> y <a href="https://webpack.js.org/">Webpack</a>.</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>";</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Nombre que se referirá al export por defecto del módulo.</dd> + <dt><code>module-name</code></dt> + <dd>El módulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo <code><strong>.js</strong></code> que contiene el módulo, excluyendo la extensión <code><strong>.js</strong></code>. Algunos empaquetadores pueden permitir o requerir el uso de la extensión; comprueba tu entorno. Sólo se permiten Strings con comillas simples o dobles.</dd> + <dt><code>name</code></dt> + <dd>Nombre del objeto del módulo que se utilizará como nombre de dominio al hacer referencia a los imports.</dd> + <dt><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>export, exportN</span></dt> +</dl> + +<dl> + <dd>Nombre de los exports a ser importados.</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Nombre del objeto que recibirá la propiedad importada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El parámetro <code>name</code> es el nombre del objeto que recibirá los miembros exportados. El parámetro <code>member</code> especifica miembros individuales, mientras el parámetro <code>name</code> importa todos ellos. <font face="Courier New, Andale Mono, monospace">name</font> puede también ser una función si el módulo exporta un sólo parámetro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.</p> + +<h3 id="Importa_el_contenido_de_todo_un_módulo.">Importa el contenido de todo un módulo.</h3> + +<p>Esto inserta <code>myModule</code> en el ámbito actual, que contiene todos los elementos exportados en el archivo ubicado en <code>/modules/my-module.js</code>.</p> + +<pre class="brush: js">import * as myModule from '/modules/my-module.js';</pre> + +<p>Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembre exportado llamado <code>doAllTheAmazingThings()</code>, habría que invocarlo de la siguiente manera:</p> + +<pre class="brush: js">myModule.doAllTheAmazingThings();</pre> + +<h3 id="Importa_un_solo_miembro_de_un_módulo.">Importa un solo miembro de un módulo.</h3> + +<p>Dado un objeto o valor llamado <code>myExport</code> que ha sido exportado del módulo <code>my-module</code> ya sea implícitamente (porque todo el módulo ha sido exportado) o explícitamente (usando la sentencia {{jsxref("Sentencias/export", "export")}} ), esto inserta <code>myExport</code> en el ámbito actual.</p> + +<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre> + +<h3 id="Importa_multiples_miembros_de_un_módulo.">Importa multiples miembros de un módulo.</h3> + +<p>Esto inserta <code>foo</code> y <code>bar</code> en el ámbito actual.</p> + +<pre class="brush: js">import {foo, bar} from "my-module.js";</pre> + +<h3 id="Importa_un_miembre_con_un_alias_mas_conveniente">Importa un miembre con un alias mas conveniente</h3> + +<p>Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta <code>shortName</code> en el ámbito actual.</p> + +<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName} + from '/modules/my-module.js';</pre> + +<h3 id="Renombra_multiples_miembros_durante_la_importación">Renombra multiples miembros durante la importación</h3> + +<p>Importa múltiples miembros exportados de un módulo con un alias conveniente.</p> + +<pre class="brush: js">import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +} from '/modules/my-module.js';</pre> + +<h3 id="Importa_un_módulo_entero_para_efectos_secundarios_sólamente">Importa un módulo entero para efectos secundarios sólamente</h3> + +<p>Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor.</p> + +<pre class="brush: js">import '/modules/my-module.js';</pre> + +<h3 id="Importación_de_elementos_por_defecto">Importación de elementos por defecto</h3> + +<p>Es posible tener una exportación por defecto (tanto si se trata de un objeto, función, clase, etc.). Recíprocamente, es posible usa la instrucción <code>import</code> para importar esos elementos establecidos como por defecto.</p> + +<p>La versión más sencilla de importar un elemento por defecto es:</p> + +<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre> + +<p>También es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importación de espacios de nombres o importaciones con nombre. En esos casos, la importación por defecto se deberá realizar en primer lugar. Por ejemplo:</p> + +<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js'; +// myModule used as a namespace</pre> + +<p>o</p> + +<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js'; +// specific, named imports</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Importar un archivo secundario para asistir en un procesamiento de una petición JSON AJAX.</p> + +<h3 id="El_módulo_file.js">El módulo: file.js</h3> + +<pre class="brush: js">function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +}</pre> + +<h3 id="El_programa_principal_main.js">El programa principal: main.js</h3> + +<pre class="brush: js">import { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inical</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/export", "export")}}</li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/index.html b/files/es/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..bbf0ce42e8 --- /dev/null +++ b/files/es/web/javascript/reference/statements/index.html @@ -0,0 +1,141 @@ +--- +title: Sentencias +slug: Web/JavaScript/Referencia/Sentencias +tags: + - JavaScript + - Referencia + - sentencias +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Las aplicaciones JavaScript se componen de sentencias con una sintaxis propia. Una sentencia puede estar formada por múltiples líneas. Puede haber varias sentencias en una sola línea si separamos cada una de las sentencias por un punto y coma. No es una palabra clave, sino un grupo de palabras clave.</p> + +<h2 id="Sentencias_y_declaraciones_por_categoría">Sentencias y declaraciones por categoría</h2> + +<p>Puedes encontrarlas por orden alfabético en la columna de la izquierda .</p> + +<h3 id="Control_de_flujo">Control de flujo</h3> + +<dl> + <dt>{{jsxref("Sentencias/block", "Block")}}</dt> + <dd>Un bloque de sentencias se utiliza para agrupar cero o mas sentencias. El bloque se delimita por un par de llaves.</dd> + <dt>{{jsxref("Sentencias/break", "break")}}</dt> + <dd>Finaliza la sentencia actual loop, switch, o label y transfiere el control del programa a la siguiente sentencia de la sentencia finalizada.</dd> + <dt>{{jsxref("Sentencias/continue", "continue")}}</dt> + <dd>Finaliza la ejecucion de las sentencias dentro de la iteracion actual del actual bucle, y continua la ejecucion del bucle con la siguiente iteracion.</dd> + <dt>{{jsxref("Sentencias/Empty", "Empty")}}</dt> + <dd>Una sentencia vacía se utiliza para proveer una "no sentencia", aunque la sintaxis de JavaScript esperaba una.</dd> + <dt>{{jsxref("Sentencias/if...else", "if...else")}}</dt> + <dd>Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada.</dd> + <dt>{{jsxref("Sentencias/switch", "switch")}}</dt> + <dd>Evalua una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case.</dd> + <dt>{{jsxref("Sentencias/throw", "throw")}}</dt> + <dd>Lanza una excepción definida por el usuario.</dd> + <dt>{{jsxref("Sentencias/try...catch", "try...catch")}}</dt> + <dd>Marca un bloque de sentencias para ser probadas (try) y especifica una respuesta, en caso de que se lance una excepción.</dd> +</dl> + +<h3 id="Declaraciones">Declaraciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/var", "var")}}</dt> + <dd>Declara una variable, opcionalmente inicializándola a un valor.</dd> + <dt>{{jsxref("Sentencias/let", "let")}}</dt> + <dd>Declara una variable local de ambito de bloque, opcionalmente inicializándola a un valor.</dd> + <dt>{{jsxref("Sentencias/const", "const")}}</dt> + <dd>Declara una constante de solo lectura.</dd> +</dl> + +<h3 id="Funciones">Funciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/function", "function")}}</dt> + <dd>Declara una función con los parámetros especificados.</dd> + <dt>{{jsxref("Sentencias/function*", "function*")}}</dt> + <dd>Los generadores de funciones permiten escribir {{jsxref("Iteration_protocols", "iteradores")}} con mas facilidad.</dd> + <dt>{{experimental_inline}} {{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Declara una función asíncrona con los parámetros especificados.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Especifica el valor a ser retornado por una función.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Declara una clase.</dd> +</dl> + +<h3 id="Iteraciones">Iteraciones</h3> + +<dl> + <dt>{{jsxref("Sentencias/do...while", "do...while")}}</dt> + <dd>Crea un bucle que ejecuta una instrucción especificada hasta que la condición de prueba se evalúa como falsa. La condición se evalúa después de ejecutar la instrucción, lo que da como resultado que la instrucción especificada se ejecute al menos una vez.</dd> + <dt>{{jsxref("Sentencias/for", "for")}}</dt> + <dd>Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop.</dd> + <dt>{{deprecated_inline()}} {{non-standard_inline()}}{{jsxref("Sentencias/for_each...in", "for each...in")}}</dt> + <dd>Itera una variable especificada sobre todos los valores de las propiedades del objeto. Para cada propiedad distinta, se ejecuta una instrucción especificada.</dd> + <dt>{{jsxref("Sentencias/for...in", "for...in")}}</dt> + <dd>Itera sobre las propiedades enumerables de un objeto, en orden albitrario. Para cada propiedad distinta, las instrucciones pueden ser ejecutadas.</dd> + <dt>{{jsxref("Sentencias/for...of", "for...of")}}</dt> + <dd>Iterates over iterable objects (including {{jsxref("Array", "array")}}, array-like objects, <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Iterators_and_Generators" title="Iterators and generators">iterators and generators</a>), invoking a custom iteration hook with statements to be executed for the value of each distinct property.</dd> + <dt>{{jsxref("Sentencias/while", "while")}}</dt> + <dd>Crea un bucle que ejecuta la instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la instrucción.</dd> +</dl> + +<h3 id="Otros">Otros</h3> + +<dl> + <dt>{{jsxref("Sentencias/debugger", "debugger")}}</dt> + <dd>Invoca cualquier funcionalidad de depuración disponible. Si no hay funcionalidad de depuración disponible, esta isntrucción no tiene efecto.</dd> + <dt>{{jsxref("Sentencias/export", "export")}}</dt> + <dd>Usada para permitir a un script firmada proveer propiedades, funciones y objetos a otros scripts firmada o sin firmar. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6</dd> + <dt>{{jsxref("Sentencias/import", "import")}}</dt> + <dd>Usada para permitir a un escript importar propiedades, funciones y objetos desde otro script firmado que ha exportado su información. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6.</dd> + <dt>{{jsxref("Sentencias/label", "label")}}</dt> + <dd>Provee una instrucción con un identificador que puedes referir usando una instrucción <code>break</code> o <code>continue</code> .</dd> +</dl> + +<dl> + <dt>{{deprecated_inline()}} {{jsxref("Sentencias/with", "with")}}</dt> + <dd>Extiende la cadena de alcance para una instrucción.</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Nuevo: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Operadores">Operadores</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/label/index.html b/files/es/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..03f3108e0e --- /dev/null +++ b/files/es/web/javascript/reference/statements/label/index.html @@ -0,0 +1,35 @@ +--- +title: label +slug: Web/JavaScript/Referencia/Sentencias/label +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div> + {{jsSidebar("Statements")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Proporciona una sentencia con un identificador al que se puede referir al usar las sentencias {{jsxref("Sentencias/break", "break")}} o {{jsxref("Sentencias/continue", "continue")}}.</p> +<p>Por ejemplo, puede usar una etiqueta para identificar un bucle, y entonces usar las sentencias <code>break</code> o <code>continue</code> para indicar si un programa debería interrumpir el bucle o continuar su ejecución.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<pre class="eval"><i>etiqueta</i> :<i>sentencia</i> +</pre> +<dl> + <dt> + <code>etiqueta</code></dt> + <dd> + Cualquier identificador JavaScript que no sea una palabra reservada.</dd> +</dl> +<dl> + <dt> + <code>sentencia</code></dt> + <dd> + Sentencias. <code>break</code> puede ser usado con cualquier sentencia etiquetada, y <code>continue</code> puede usarse con bucles etiquetados de sentencias.</dd> +</dl> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<p>Para un ejemplo de una sentencia label usando <code>break</code>, vea <code>break</code>. Para un ejemplo de una sentencia label usando <code>continue</code>, vea <code>continue</code>.</p> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/let/index.html b/files/es/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..8c450b37d4 --- /dev/null +++ b/files/es/web/javascript/reference/statements/let/index.html @@ -0,0 +1,393 @@ +--- +title: let +slug: Web/JavaScript/Referencia/Sentencias/let +tags: + - Característica del lenguaje + - Declaración de variable + - ECMAScript 2015 + - JavaScript + - Variables + - let + - sentencias +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La instrucción <strong><code>let</code></strong> declara una variable de alcance local con ámbito de bloque<font><font>(</font></font><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/block">block </a>scope<font><font>)</font></font>, la cual, opcionalmente, puede ser inicializada con algún valor.</p> + +<div class="warning"> +<p class="p1">La palabra reservada <strong><code><span class="s1">let </span></code></strong>en Mozilla Firefox 44 y anteriores, está solo disponible para bloques de código en HTML que esten envueltos en una etiqueta <code><span class="s1"><script type="application/javascript;version=1.7"></span></code> (o de una version mayor). Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque. Es necesario tomar en cuenta que esta es una característica <s>no estándar</s> <u>que ya se ha hecho actualmente estándar</u>, <s>esto</s> <u>pero</u> puede crear conflictos con otros navegadores<u>, ya que fue una característica no estándar.</u></p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox notranslate">let var1 [= valor1] [, var2 [= valor2]] [, ..., varN [= valorN]];</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>Los nombres de la variable o las variables a declarar. Cada una de ellas debe ser un identificador legal de JavaScript</dd> + <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code></dt> + <dd>Por cada una de las variables declaradas puedes, opcionalmente, especificar su valor inicial como una expresión legal JavaScript.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><strong><code>let</code> </strong>te permite declarar variables limitando su alcance (<em>scope</em>) al bloque, declaración, o expresión donde se está usando.a diferencia de la palabra clave <code>var</code> la cual define una variable global o local en una función sin importar el ámbito del bloque. La otra diferencia entre <code>var</code> y <code>let</code> <span class="VIiyi" lang="es"><span class="ChMk0b JLqJ4b"><span>es que este último se inicializa a un valor sólo cuando un analizador lo evalúa (ver abajo).</span></span></span></p> + +<p>Al igual que <code>const</code>, <code>let </code>no crea propiedades del objeto se declara globalmente (en el alcance más alto).</p> + +<h3 id="Alcance_scope_a_nivel_de_bloque_con_let">Alcance (<em>scope</em>) a nivel de bloque con <code>let</code></h3> + +<p>Usar la palabra reservada <code>let</code> para definir variables dentro de un bloque.</p> + +<pre class="brush:js notranslate">if (x > y) { + let gamma = 12.7 + y; + i = gamma * x; +} +</pre> + +<p>Es posible usar definiciones <code>let</code> para asociar código en extensiones con un pseudo-espacio-de-nombre (pseudo-namespace). (Ver <a href="/en-US/docs/Security_best_practices_in_extensions" title="en-US/docs/Security_best_practices_in_extensions">Mejores prácticas de seguridad en extensiones</a>.)</p> + +<pre class="brush:js notranslate">let Cc = Components.classes, Ci = Components.interfaces; +</pre> + +<p><code>let</code> puede ser útil para escribir código más limpio cuando usamos funciones internas.</p> + +<pre class="brush:js notranslate">var list = document.getElementById("list"); + +for (var i = 1; i <= 5; i++) { + var item = document.createElement("LI"); + item.appendChild(document.createTextNode("Item " + i)); + + let j = i; + item.onclick = function (ev) { + console.log("Item " + j + " is clicked."); + }; + list.appendChild(item); +} +</pre> + +<p>El ejemplo anterior trabaja como se espera porque las cinco instancias de la función (anónima) interna hacen referencia a cinco diferentes instancias de la variable <code>j</code>. Nótese que esto no funcionaría como se espera si reemplazamos <code>let</code> con <code>var</code> o si removemos la variable <code>j</code> y simplemente usamos la variable <code>i</code> dentro de la función interna.</p> + +<h4 id="Reglas_de_alcance">Reglas de alcance</h4> + +<p>Variables declaradas por <code>let</code> tienen por alcance el bloque en el que se han definido, así mismo, como en cualquier bloque interno. De esta manera, <code>let</code> trabaja muy parecido a <code>var</code>. La más notable diferencia es que el alcance de una variable <code>var</code> es la función contenedora:</p> + +<pre class="brush:js notranslate">function varTest() { + var x = 31; + if (true) { + var x = 71; // ¡misma variable! + console.log(x); // 71 + } + console.log(x); // 71 +} + +function letTest() { + let x = 31; + if (true) { + let x = 71; // variable diferente + console.log(x); // 71 + } + console.log(x); // 31 +} +// llamamos a las funciones +varTest(); +letTest(); +</pre> + +<p>En el nivel superior de un programa y funciones, <code>let</code> , a diferencia de <code>var</code>, <strong>no crea</strong> una propiedad en el objeto global, por ejemplo:</p> + +<pre class="brush:js notranslate">var x = 'global'; +let y = 'global'; +console.log(this.x); // "global" +console.log(this.y); // undefined +</pre> + +<p>La salida de este código desplegaría "global" una vez.</p> + +<h3 id="Zona_muerta_temporal_y_errores_con_let">Zona muerta temporal y errores con <code>let<a id="muerta" name="muerta"></a></code></h3> + +<p>La <strong>redeclaración</strong> de la misma variable bajo un mismo <font><font><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a> </font></font>terminaría en un error de tipo <code><a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/SyntaxError" title="SyntaxError">SyntaxError</a></code>. Esto también es <strong>extensible</strong> si usamos <code>var</code> dentro del <font><font>ámbito léxico</font></font>. Esto nos salvaguarda de redeclarar una variable accidentalmente y que no era posible solo con <code>var.</code></p> + +<pre class="brush: js notranslate">if (x) { + let foo; + let foo; // Terminamos con un SyntaxError. +} +if (x) { + let foo; + var foo; // Terminamos con un SyntaxError. +} +</pre> + +<p>En ECMAScript 2015, <code>let</code> <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/var#Description">no eleva</a> la variable a la parte superior del bloque. Si se hace una referencia a la variable declarada con <code>let</code> (<code>let foo</code>) antes de su declaración, terminaríamos con un error de tipo <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/ReferenceError" title="TypeError">ReferenceError</a> </code>(al contrario de la variable declarada con <code>var</code>, que tendrá el valor <code>undefined</code>), esto porque la variables vive en una "zona muerta temporal" desde el inicio del bloque hasta que la declaración ha sido procesada.</p> + +<pre class="notranslate"><code>function do_something() { + console.log(bar); // undefined + console.log(foo); // ReferenceError: foo </code>no está definido<code> + var bar = 1; + let foo = 2; +}</code></pre> + +<p>Es posible encontrar errores en bloques de control <a href="/en-US/docs/JavaScript/Reference/Statements/switch" title="switch"><code>switch</code></a> debido a que solamente existe un block subyacente.</p> + +<pre class="brush: js notranslate">switch (x) { + case 0: + let foo; + break; + + case 1: + let foo; // Terminamos con un error de tipo SyntaxError. + // esto debido a la redeclaracion + break; +}</pre> + +<h3 id="Otro_ejemplo_de_zona_muerta_temporal_combinada_con_ámbito_léxico"><font><font>Otro ejemplo de zona muerta temporal combinada con <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-lexical-environments">ámbito léxico</a></font></font></h3> + +<p>Debido al alcance léxico, el identificador <code>num</code> dentro de la expresión (<code>num + 55</code>) se evalúa como <code>num</code> del bloque <code>if</code>, y no como la variable <code>num</code> con el valor 33 que esta por encima</p> + +<p>En esa misma línea, el <code>num </code>del bloque <code>if</code> ya se ha creado en el ámbito léxico, pero aún no ha alcanzado (y <strong>terminado</strong>) su inicialización (que es parte de la propia declaración): todavía está en la zona muerta temporal.</p> + +<pre class="notranslate"><code>function prueba(){ + var num = 33; + if (true) { + let num = (num + 55);</code>//ReferenceError: no se puede acceder a la declaración léxica `num'antes de la inicialización <code> + } +} +prueba();</code> +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="let_vs_var"><code>let</code> vs <code>var</code></h3> + +<p>Cuando usamos <code>let</code> dentro de un bloque, podemos limitar el alcance de la variable a dicho bloque. Notemos la diferencia con <code>var</code>, cuyo alcance reside dentro de la función donde ha sido declarada la variable.</p> + +<pre class="brush: js notranslate">var a = 5; +var b = 10; + +if (a === 5) { + let a = 4; // El alcance es dentro del bloque if + var b = 1; // El alcance es global + + console.log(a); // 4 + console.log(b); // 1 +} + +console.log(a); // 5 +console.log(b); // 1</pre> + +<h3 id="let_en_bucles"><code>let</code> en bucles</h3> + +<p>Es posible usar la palabra reservada <code>let</code> para enlazar variables con alcance local dentro del alcance de un bucle en lugar de usar una variable global (definida usando <code>var</code>) para dicho propósito.</p> + +<pre class="brush: js notranslate">for (let i = 0; i<10; i++) { + console.log(i); // 0, 1, 2, 3, 4 ... 9 +} + +console.log(i); // ReferenceError: i is not defined +</pre> + +<h2 id="Extensiones_let_no-estandar">Extensiones <code>let</code> no-estandar</h2> + +<h3 id="Bloques_let">Bloques<code> let</code></h3> + +<div class="warning"> +<p>La <strong>sintaxis del bloque y expresion</strong> <code>let</code> es no-estandar y sera deshechado en un futuro. ¡No deben ser usados! ver <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023609" rel="noopener" title="FIXED: Remove SpiderMonkey support for let expressions">error 1023609</a> y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1167029" rel="noopener" title="FIXED: Remove SpiderMonkey support for let blocks">error 1167029</a> para mas detalles.</p> +</div> + +<p>Un <strong>bloque <code>let</code></strong> provee una manera de asociar valores con variables dentro del alcance de un bloque sin afectar el valor de variables con nombre similar fuera del bloque.</p> + +<h4 id="Sintaxis_2">Sintaxis</h4> + +<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) {declaración};</pre> + +<h4 id="Descripción_2">Descripción</h4> + +<p>El bloque <code>let</code> provee alcance local para las variables. Funciona enlazando cero o más variables en el alcance léxico de un solo bloque de código; de otra manera, es exactamente lo mismo que una declaración de bloque. Hay que notar particularmente que el alcance de una variable declarada dentro de un bloque <code>let</code> usando var es equivalente a declarar esa variable fuera del bloque <code>let</code>; dicha variable aún tiene alcance dentro de la función. Al usar la sintaxis de bloque <code>let</code>, los paréntesis siguientes a <code>let</code> son requeridos. Una falla al incluir dichos paréntesis resultará en un error de sintaxis.</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<pre class="brush:js notranslate">var x = 5; +var y = 0; + +let (x = x+10, y = 12) { + console.log(x+y); // 27 +} + +console.log(x + y); // 5 +</pre> + +<p>Las reglas para el bloque de código son las mismas que para cualquier otro bloque de código en JavaScript. Es posible tener sus propias variables locales usando declaraciones <code>let</code> en dicho bloque.</p> + +<h4 id="Reglas_de_alcance_2">Reglas de alcance</h4> + +<p>El alcance de las variables definidas usando <code>let</code> es el mismo bloque <code>let</code>, así como cualquier bloque interno contenido dentro de el bloque, a menos que esos bloques internos definan variables con el mismo nombre.</p> + +<h3 id="expresiones_let">expresiones <code>let</code></h3> + +<div class="warning"> +<p><code>Soporte de <strong>expresiones</strong> let</code> ha sido removido en Gecko 41 ({{bug(1023609)}}).</p> +</div> + +<p>Una <strong>expresion <code>let</code></strong> permite establecer variables con alcance dentro de una expresión.</p> + +<h4 id="Sintaxis_3">Sintaxis</h4> + +<pre class="syntaxbox notranslate">let (var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]) expression;</pre> + +<h4 id="Ejemplo_2">Ejemplo</h4> + +<p>Podemos usar <code>let</code> para establecer variables que tienen como alcance solo una expresión:</p> + +<pre class="brush: js notranslate">var a = 5; +let(a = 6) console.log(a); // 6 +console.log(a); // 5</pre> + +<h4 id="Reglas_de_alcance_3">Reglas de alcance</h4> + +<p>Dada la expresión <code>let</code> siguiente:</p> + +<pre class="eval notranslate">let (<var>decls</var>) <var>expr</var> +</pre> + +<p>Existe un bloque implícito creado alrededor de expr.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición initial. No especifica expresiones ni declaraciones let.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> + +<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> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</td> + <td>11</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Zona muerta temporal</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Expresión<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}-{{ CompatGeckoDesktop("40") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Bloque<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }} [1]</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>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown}}</td> + <td> + <p class="p1">{{CompatChrome(41.0)}}</p> + </td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Zona muerta temporal</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("35") }} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Expresión<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }}-{{ CompatGeckoMobile("40") }}[1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Bloque<code> let</code> {{non-standard_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.8.1") }} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_específicas_a_Firefox">Notas específicas a Firefox</h3> + +<ul> + <li>[1]: Solo disponible para bloques de codigo HTML dentro de una etiqueta <code><script> type="application/javascript;version=1.7"></code> (o de una versión mayor). Es necesario tomar en cuenta que esta es una característica no estándar, esto puede crear conflictos con otros navegadores. Las etiquetas <a href="https://developer.mozilla.org/en-US/docs/XUL">XUL</a> tienen acceso a esas características sin necesidad de dicho bloque. Ver<span style="line-height: 1.5;">{{bug(932513)}}.</span></li> + <li>Conformidad con ES2015 para <code>let</code> en SpIderMonkey es monitoreado en {{bug(950547)}} y extensiones no-standar seran eliminadas en el futuro {{bug(1023609)}}.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/return/index.html b/files/es/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..6497e97632 --- /dev/null +++ b/files/es/web/javascript/reference/statements/return/index.html @@ -0,0 +1,73 @@ +--- +title: return +slug: Web/JavaScript/Referencia/Sentencias/return +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p><span id="result_box" lang="es"><span>La</span> <span>sentencia <code>return</code></span> <span class="alt-edited">finaliza la</span> <span>ejecución de la función</span> <span>y especifica</span> <span>un valor</span> <span>para ser devuelto</span> <span class="alt-edited">a quien llama a la</span> <span>función.</span></span></p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">return [[ <em>expresion</em> ]];</pre> + +<dl> + <dt><span class="short_text" id="result_box" lang="es"><span>expresion</span></span></dt> + <dd>La expresión a retornar. Si se omite, <code>undefined</code> es retornado en su lugar.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Cuando una instrucción de retorno se llama en una función, se detiene la ejecución de esta. Si se especifica un valor dado, este se devuelve a quien llama a la función. Si se omite la expresión, <code>undefined</code> se devuelve en su lugar. Todas las siguientes sentencias de retorno rompen la ejecución de la función:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">return</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> <span class="keyword token">true</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> <span class="keyword token">false</span><span class="punctuation token">;</span> +<span class="keyword token">return</span> x<span class="punctuation token">;</span> +<span class="keyword token">return</span> x <span class="operator token">+</span> y <span class="operator token">/</span> <span class="number token">3</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Sintaxis" name="Sintaxis"><br> + La inserción automática Punto y coma</h2> + +<p>La instrucción de retorno se ve afectada por la inserción automática de punto y coma (ASI). No se permite el terminador de línea entre la palabra clave de retorno y la expresión.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">return</span> +a <span class="operator token">+</span> b<span class="punctuation token">;</span></code></pre> + +<dl> +</dl> + +<p><br> + se transforma por ASI en:</p> + +<pre class="line-numbers language-html"><code class="language-html">return; +a + b;</code></pre> + +<p><br> + La consola le advertirá "código inalcanzable después de la declaración de retorno".</p> + +<div class="note"> +<p>A partir de Gecko 40 {{geckoRelease(40)}}, una advertencia es mostrada en la consola si se encuentra código inalcanzable despues de una instrucción return.</p> +</div> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Usando_return" name="Ejemplo:_Usando_return">Ejemplo: Usando <code>return</code></h3> + +<p>La siguiente función devuelve el cuadrado de su argumento, <code>x</code>, donde <code>x</code> es un número.</p> + +<pre class="brush: js">function cuadrado(x) { + return x * x; +} +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Funciones">Funciones</a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/switch/index.html b/files/es/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..c550477f2c --- /dev/null +++ b/files/es/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,245 @@ +--- +title: switch +slug: Web/JavaScript/Referencia/Sentencias/switch +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>declaración</strong> <code><strong>switch</strong></code> evalúa una <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Expressions_and_Operators">expresión</a>, comparando el valor de esa expresión con una instancia <code><strong>case</strong></code>, y ejecuta <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias">declaraciones</a> asociadas a ese <code>case</code>, así como las declaraciones en los <code>case</code> que siguen.</p> + +<h2 id="Syntaxis">Syntaxis</h2> + +<pre class="syntaxbox notranslate">switch (expresión) { + case valor1: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor1 + [break;] + case valor2: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con el valor2 + [break;] + ... + case valorN: + //Declaraciones ejecutadas cuando el resultado de expresión coincide con valorN + [break;] + default: + //Declaraciones ejecutadas cuando ninguno de los valores coincide con el valor de la expresión + [break;] +}</pre> + +<dl> + <dt><code>expresión</code></dt> + <dd>Es una expresión que es comparada con el valor de cada instancia <code>case</code>.</dd> + <dt><code>case valorN</code></dt> + <dd>Una instancia <code>case valorN</code> es usada para ser comparada con la <code>expresión</code>. Si la <code>expresión</code> coincide con el <code>valorN</code>, las declaraciones dentro de la instancia <code>case</code> se ejecutan hasta que se encuentre el final de la declaración <code>switch</code> o hasta encontrar una interrupción <code>break</code>.</dd> +</dl> + +<dl> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">default</span></font></dt> + <dd>Una instancia <code>default</code>, cuando es declarada, es ejecutada si el valor de la <code>expresión</code> no coincide con cualquiera de las otras instancias <code>case valorN</code>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Si ocurre una coincidencia, el programa ejecuta las declaraciones asociadas correspondientes. Si la expresión coincide con múltiples entradas, la primera será la seleccionada, incluso si las mayúsculas son tenidas en cuenta.</p> + +<p>El programa primero busca la primer instacia <code>case</code> cuya expresión se evalúa con el mismo valor de la expresión de entrada (usando <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparación estricta</a>, <code>===)</code> y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas. Si no se encuentra una cláusula de <code>case</code> coincidente, el programa busca la cláusula <code>default</code> opcional, y si se encuentra, transfiere el control a esa instancia, ejecutando las declaraciones asociadas. Si no se encuentra una instancia <code>default</code> el programa continúa la ejecución en la instrucción siguiente al final del <code>switch</code>. Por convención, la instancia <code>default</code> es la última cláusula, pero no tiene que ser así.</p> + +<p>La declaración <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> es opcional y está asociada con cada etiqueta de <code>case</code> y asegura que el programa salga del <code>switch</code> una vez que se ejecute la instrucción coincidente y continúe la ejecución en la instrucción siguiente. Si se omite el <code>break</code> el programa continúa la ejecución en la siguiente instrucción en la declaración de <code>switch</code> .</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_switch">Usando <code>switch</code></h3> + +<p>En el siguiente ejemplo, si <code>expresión</code> se resuelve a "Platanos", el algoritmo compara el valor con el <code>case</code> "Platanos" y ejecuta la declaración asociada. Cuando se encuentra un <code>break</code>, el programa sale del condicional <code>switch</code> y ejecuta la declaración que lo procede. Si se omite el <code>break</code>, el <code>case</code> "Cerezas" también es ejecutado.</p> + +<pre class="notranslate"><code>switch (expr) { + case 'Naranjas': + console.log('El kilogramo de naranjas cuesta $0.59.'); + break; + case 'Manzanas': + console.log('El kilogramo de manzanas cuesta $0.32.'); + break; + case 'Platanos': + console.log('El kilogramo de platanos cuesta $0.48.'); + break; + case 'Cerezas': + console.log('El kilogramo de cerezas cuesta $3.00.'); + break; + case 'Mangos': + case 'Papayas': + console.log('El kilogramo de mangos y papayas cuesta $2.79.'); + break; + default: + console.log('Lo lamentamos, por el momento no disponemos de ' + expr + '.'); +} + +console.log("¿Hay algo más que te quisiera consultar?");</code></pre> + +<h3 id="¿Qué_pasa_si_olvido_un_break">¿Qué pasa si olvido un break?</h3> + +<p>Si olvidas un <code>break</code>, el script se ejecutará desde donde se cumple la condición y ejecutará el siguiente <code>case</code> independientemente si esta condición se cumple o no. Ver el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">var foo = 0; +switch (foo) { + case -1: + console.log('1 negativo'); + break; + case 0: // foo es 0, por lo tanto se cumple la condición y se ejecutara el siguiente bloque + console.log(0) + // NOTA: el "break" olvidado debería estar aquí + case 1: // No hay sentencia "break" en el 'case 0:', por lo tanto este caso también será ejecutado + console.log(1); + break; // Al encontrar un "break", no será ejecutado el 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +} +</pre> + +<h3 id="¿Puedo_usar_un_<default>_entre_condiciones">¿Puedo usar un <default> entre condiciones?</h3> + +<p>Sí, ¡es posible! JavaScript retornará a la instancia <code>default</code> en caso de no encontrar una coincidencia:</p> + +<pre class="notranslate"><code>var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // al encontrar este 'break' no se continuará con el siguiente 'default:' + default: + console.log('default') + // fall-through + case 1: + console.log('1'); +}</code></pre> + +<p>Al estar el <code>case 1:</code> a continuación de <code>default</code>, y al no haber un <code>break </code>de por medio, veremos que la declaración del <code>case 1:</code> será ejecutada, apareciendo el resultado <code>1</code> en el <em>log de consola.</em></p> + +<h3 id="Metodos_para_casos_con_múltiple_criterio">Metodos para casos con múltiple criterio</h3> + +<p>La fuente de esta técnica esta aquí:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Switch statement multiple cases in JavaScript (Stack Overflow)</a></p> + +<h4 id="Operación_única_con_múltiples_casos">Operación única con múltiples casos</h4> + +<p>Este método toma ventaja del hecho de que, si no hay un <code>break</code> debajo de una declaración <code>case</code>, continuará la ejecución hasta el siguiente <code>case</code>, ignorando si en dicho caso se cumple o no el criterio indicado. Comprobar en la sección <em>¿Qué pasa si olvido un <code>break</code>?</em></p> + +<p>Este es un ejemplo de operación única con sentencia <code>switch</code> secuencial, donde cuatro valores diferentes se comportan exactamente de la misma manera:</p> + +<pre class="brush: js notranslate">var Animal = 'Jirafa'; +switch (Animal) { + case 'Vaca': + case 'Jirafa': + case 'Perro': + case 'Cerdo': + console.log('Este animal subirá al Arca de Noé.'); + break; + case 'Dinosaurio': + default: + console.log('Este animal no lo hará.'); +}</pre> + +<h4 id="Operaciones_encadenadas_con_múltiples_casos">Operaciones encadenadas con múltiples casos</h4> + +<p>Este es un ejemplo de una sentencia <code>switch</code> secuencial con múltiples operaciones, donde, dependiendo del valor entero dado, se pueden recibir diferentes resultados. Esto demuestra que el algoritmo correrá en el orden en que se coloquen las declaraciones <code>case</code>, y que no tiene que ser numéricamente secuencial. En JavaScript, también es posible combinar definiciones con valores <em><code>"string"</code> </em>dentro de estas declaraciones <code>case</code>.</p> + +<pre class="brush: js notranslate">var foo = 1; +var output = 'Salida: '; +switch (foo) { + case 10: + output += '¿Y '; + case 1: + output += 'Cuál '; + output += 'Es '; + case 2: + output += 'Tu '; + case 3: + output += 'Nombre'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Por favor, selecciona un valor del 1 al 6.'); +}</pre> + +<p>La salida (output) de este ejemplo:</p> + +<table class="standard-table" style="height: 270px; width: 522px;"> + <tbody> + <tr> + <th scope="col">Value</th> + <th scope="col">Log text</th> + </tr> + <tr> + <td>foo es NaN o no es 1, 2, 3, 4, 5 ni 10</td> + <td>Por favor, selecciona un valor del 1 al 6.</td> + </tr> + <tr> + <td>10</td> + <td>Salida: ¿Y Cuál Es Tu Nombre?</td> + </tr> + <tr> + <td>1</td> + <td>Salida: Cuál Es Tu Nombre?</td> + </tr> + <tr> + <td>2</td> + <td>Salida: Tu Nombre?</td> + </tr> + <tr> + <td>3</td> + <td>Salida: Nombre?</td> + </tr> + <tr> + <td>4</td> + <td>Salida: ?</td> + </tr> + <tr> + <td>5</td> + <td>Salida: !</td> + </tr> + </tbody> +</table> + +<h3 id="Variables_centradas_en_bloques_sin_un_estamento_de_switch">Variables centradas en bloques sin un estamento de switch</h3> + +<p>Con ECMAScript 2015 (ES6) </p> + +<h2 id="Compatibilidad_en_Navegadores">Compatibilidad en Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a></li> +</ul> diff --git a/files/es/web/javascript/reference/statements/throw/index.html b/files/es/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..d3e52f83ac --- /dev/null +++ b/files/es/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,153 @@ +--- +title: throw +slug: Web/JavaScript/Referencia/Sentencias/throw +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Lanza una excepcion definida por el usuario.</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">throw <em>expresion</em>;</pre> + +<dl> + <dt><code>expresion</code></dt> + <dd>Expresión a lanzar.</dd> +</dl> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Utilice la sentencia <code>throw</code> para lanzar una excepción. Cuando lanza una excepción, <code>expresion</code> especifica el valor de la excepción. Cada uno de los siguientes ejemplos lanza una excepción:</p> + +<pre class="brush: js">throw "Error2"; // genera una excepción con un valor cadena +throw 42; // genera una excepción con un valor 42 +throw true; // genera una excepción con un valor true</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo:_Lanzar_un_objeto" name="Ejemplo:_Lanzar_un_objeto">Ejemplo: Lanzar un objeto</h3> + +<p>Puede especificar un objeto cuando lanza una excepción. Puede entonces referenciar las propiedades del objeto en el bloque <code>catch</code>. El siguiente ejemplo crea un objeto <code>miExcepcionUsuario</code> del tipo <code>ExceptionUsuario</code> y la utiliza usándola en una sentencia <code>throw</code>.</p> + +<pre class="brush: js">function ExceptionUsuario(mensaje) { + this.mensaje = mensaje; + this.nombre = "ExceptionUsuario"; +} + +function getNombreMes(mes) { + mes = mes - 1; // Ajustar el número de mes al índice del arreglo (1 = Ene, 12 = Dic) + var meses = new Array("Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", + "Ago", "Sep", "Oct", "Nov", "Dic"); + if (meses[mes] != null) { + return meses[mes]; + } else { + miExcepcionUsuario = new ExceptionUsuario("NumeroMesNoValido"); + throw miExcepcionUsuario; + } +} + +try { + // sentencias para try + nombreMes = getNombreMes(miMes); +} catch (excepcion) { + nombreMes = "desconocido"; + registrarMisErrores(excepcion.mensaje, excepcion.nombre); // pasa el objeto exception al manejador de errores +} +</pre> + +<h3 id="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto" name="Ejemplo:_Otro_ejemplo_sobre_lanzar_un_objeto">Ejemplo: Otro ejemplo sobre lanzar un objeto</h3> + +<p>El siguiente ejemplo comprueba una cadena de entrada para un código postal de EE.UU. Si el código postal utiliza un formato no válido, la sentencia throw lanza una excepción creando un objeto de tipo <code>ExcepcionFormatoCodigoPostal</code>.</p> + +<pre class="brush: js">/* + * Creates a ZipCode object. + * + * Accepted formats for a zip code are: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * If the argument passed to the ZipCode constructor does not + * conform to one of these patterns, an exception is thrown. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // zip code value will be the first match in the string + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ExcepcionFormatoCodigoPostal(zip); + } +} + +function ExcepcionFormatoCodigoPostal(valor) { + this.valor = valor; + this.mensaje = "no conforme con el formato esperado de código postal"; + this.toString = function() { + return this.valor + this.mensaje + }; +} + +/* + * Esto podría estar en un script que valida los datos de una dirección de EE.UU. + */ + +var CODIGOPOSTAL_NOVALIDO = -1; +var CODIGOPOSTAL_DESCONOCIDO_ERROR = -2; + +function verificarCodigoPostal(codigo) { + try { + codigo = new CodigoPostal(codigo); + } catch (excepcion) { + if (excepcion instanceof ExcepcionFormatoCodigoPostal) { + return CODIGOPOSTAL_NOVALIDO; + } else { + return CODIGOPOSTAL_DESCONOCIDO_ERROR; + } + } + return codigo; +} + +a = verificarCodigoPostal(95060); // devuelve 95060 +b = verificarCodigoPostal(9560;) // devuelve -1 +c = verificarCodigoPostal("a"); // devuelve -1 +d = verificarCodigoPostal("95060"); // devuelve 95060 +e = verificarCodigoPostal("95060 1234"); // devuelve 95060 1234 +</pre> + +<h3 id="Ejemplo:_Relanzar_una_excepci.C3.B3n" name="Ejemplo:_Relanzar_una_excepci.C3.B3n">Ejemplo: Relanzar una excepción</h3> + +<p>Puede usar <code>throw</code> para volver a lanzar una excepción después de cogerla. El siguiente ejemplo coge una excepción con un valor numérico y la vuelve a lanzar si el valor es superior a 50. La excepción relanzada propaga hacia arriba la función adjunta o a un nivel superior para que el usuario pueda verla.</p> + +<pre class="eval">try { + throw n; // lanza una excepción con un valor numérico +} catch (excepcion) { + if (excepcion <= 50) { + // sentencias para manejar la excepción 1-50 + } else { + // no se puede manejar esta excepción, así que se vuelve a lanzar + throw excepcion; + } +} +</pre> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/try...catch", "try...catch")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/try...catch/index.html b/files/es/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..d429db6163 --- /dev/null +++ b/files/es/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,254 @@ +--- +title: try...catch +slug: Web/JavaScript/Referencia/Sentencias/try...catch +tags: + - Error + - Excepción + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>La declaración <strong><code>try...catch</code></strong> señala un bloque de instrucciones a intentar (<strong><code>try</code></strong>), y especifica una respuesta si se produce una excepción (<strong><code>catch</code></strong>).</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // non-standard + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}] +</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Las sentencias que serán ejecutadas.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd>Sentencias que se ejecutan si una excepción es lanzada en el bloque <code>try</code>.</dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Identificador que contiene un objeto de excepcion asociado a la cláusula <code>catch</code>.</dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Una expresión condicional.</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Sentencias que se ejecutan después de que se completa la declaración <code>try</code> . Estas sentencias se ejecutan independientemente de si una excepcion fue lanzada o capturada.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La sentencia <code>try</code> consiste en un bloque <code>try</code> que contiene una o más sentencias. Las llaves <code>{}</code> se deben utilizar siempre<code>,</code> incluso para una bloques de una sola sentencia. Al menos un bloque <code>catch</code> o un bloque <code>finally</code> debe estar presente. Esto nos da tres formas posibles para la sentencia <code>try</code>:</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>Un bloque <code>catch</code> contiene sentencias que especifican que hacer si una excepción es lanzada en el bloque <code>try</code>. Si cualquier sentencia dentro del bloque <code>try</code> (o en una funcion llamada desde dentro del bloque <code>try</code>) lanza una excepción, el control cambia inmediatamente al bloque <code>catch</code> . Si no se lanza ninguna excepcion en el bloque <code>try</code>, el bloque <code>catch</code> se omite.</p> + +<p>La bloque <code>finally</code> se ejecuta despues del bloque <code>try</code> y el/los bloque(s) <code>catch</code> hayan finalizado su ejecución. Éste bloque siempre se ejecuta, independientemente de si una excepción fue lanzada o capturada.</p> + +<p>Puede anidar una o más sentencias <code>try</code>. Si una sentencia <code>try</code> interna no tiene una bloque <code>catch</code>, se ejecuta el bloque <code>catch</code> de la sentencia <code>try</code> que la encierra.</p> + +<p>Usted también puede usar la declaración <code>try</code> para manejar excepciones de JavaScript. Consulte la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a> para obtener mayor información sobre excepciones de JavaScript.<br> + </p> + +<h3 id="Bloque_catch_incondicional">Bloque catch incondicional</h3> + +<p>Cuando solo se utiliza un bloque <code>catch</code>, el bloque <code>catch</code> es ejecutado cuando cualquier excepción es lanzada. Por ejemplo, cuando la excepción ocurre en el siguiente código, el control se transfiere a la cláusula <code>catch</code>.</p> + +<pre class="brush: js">try { + throw "myException"; // genera una excepción +} +catch (e) { + // sentencias para manejar cualquier excepción + logMyErrors(e); // pasa el objeto de la excepción al manejador de errores +} +</pre> + +<p>El bloque <code>catch</code> especifíca un identificador ( <code>e</code> en el ejemplo anterior) que contiene el valor de la excepción. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch</code></p> + +<h3 id="Bloques_catch_condicionales">Bloques catch condicionales</h3> + +<p>Tambien se pueden crear "bloques <code>catch</code> condicionales", combinando bloques <code>try...catch</code> con estructuras <code>if...else if...else</code> como estas:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="function token">myroutine</span><span class="punctuation token">();<code class="language-js"><span class="comment token"> </span></code></span><span class="comment token">// puede lanzar tres tipos de excepciones</span><span class="punctuation token"><code class="language-js"> +</code>}</span> <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">e</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">TypeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones TypeError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">RangeError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones RangeError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="keyword token">if</span> <span class="punctuation token">(</span>e <span class="keyword token">instanceof</span> <span class="class-name token">EvalError</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar excepciones EvalError</span> + <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> + <span class="comment token">// sentencias para manejar cualquier excepción no especificada</span> + <span class="function token">logMyErrors</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// </span><span class="punctuation token">pasa el objeto de la excepción al manejador de errores</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="The_exception_identifier" name="The_exception_identifier">El identificador de excepciones</h3> + +<p>Cuando una excepción es lanzada en el bloque <code>try</code>, <code><em>exception_var</em></code> (por ejemplo, la <code>e</code> en <code>catch (e)</code>) guarda el valor de la excepción. Se puede usar éste identificador para obtener información acerca de la excepción que fue lanzada. Este valor está solo disponible en el {{Glossary("Scope", "scope")}} de el bloque<code> catch.</code></p> + +<pre class="brush: js">function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +}</pre> + +<h3 id="The_finally_clause" name="The_finally_clause">La cláusula <code>finally</code></h3> + +<p>La cláusula <code>finally</code> contiene sentencias a ejecutarse después de que las cláusulas <code>try</code> y <code>catch</code> se ejecuten, pero antes de las sentencias que le siguen al bloque <code>try..catch..finally</code>. Note que la cláusula <code>finally</code> se ejecuta sin importar si una excepción es o no lanzada. Si una excepción es lanzada, las instrucciones en la cláusula <code>finally</code> se ejecutan incluso si ninguna cláusula <code>catch</code> maneja la excepción.</p> + +<p>Usted puede usar la cláusula finally para hacer que su script falle plácidamente cuando una excepción ocurra; por ejemplo, para hacer una limpieza general, usted puede necesitar liberar un recurso que su script haya retenido.</p> + +<p>Puede parecer extraño tener una cláusula relacionada a una excepción que se ejecuta sin importar si hay una excepción o no, pero esta concepción en realidad sirve a un propósito. El punto importante no es que la cláusula <code>finally</code> siempre se ejecuta, si no más bien que el codigo ordinario que le sigue a <code>try..catch</code> no.</p> + +<p>Por ejemplo, si otra excepción ocurre dentro de un bloque <code>catch</code> de una declaración <code>try</code>, cualquier codigo restante en el mismo bloque exterior <code>try</code> que encierra ese <code>try..catch</code> (o en el flujo principal, si no es un bloque <code>try</code> exterior) , no será ejecutado, dado que el control es inmediatamente transferido al bloque <code>catch</code> del <code>try</code> exterior (o el generador de error interno, si no es en un bloque <code>try</code>).</p> + +<p>Por lo tanto, cualquier rutina de limpieza hecha en esa sección encerrada (o la principal) antes de que exista, será saltada. Sin embargo, si la declaración <code>try</code> tiene un bloque <code>finally</code>, entonces el código de ese bloque <code>finally</code> será ejecutado primero para permitir tal limpieza, y ENTONCES el bloque <code>catch</code> de la otra declaración <code>try</code> (o el generador de error) tomará el control para manejar la segunda excepción.</p> + +<p>Ahora, si esa rutina de limpieza debiera ser hecha ya sea que el código del <code>try..catch</code> tenga éxito o no, entonces si el bloque <code>finally</code> se ejecutase solo después de una excepción, el mismo código de limpieza tendría que estar presente dentro y fuera del bloque <code>finally</code>, y por lo tanto no hay razón para no tener el bloque <code>finally</code> solo, y dejarlo ejecutarse sin importar si hay excepciones o no.</p> + +<p>El siguiente ejemplo abre un archivo y despues ejecuta sentencias que usan el archivo (JavaScript del lado del servidor permite acceder a archivos). Si una excepción es lanzada mientras el archivo está abierto, la cláusula <code>finally</code> cierra el archivo antes de que el script falle. El código en <code>finally</code> también se ejecuta después de un retorno explícito de los bloques <code>try</code> o <code>catch</code>.</p> + +<pre class="brush: js">openMyFile() +try { + // retiene un recurso + writeMyFile(theData); +} +finally { + closeMyFile(); // siempre cierra el recurso +} +</pre> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<h3 id="The_finally_clause" name="The_finally_clause">Bloques try anidados</h3> + +<p>Primero, veamos que pasa con esto:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "finally"</span> +<span class="comment token">// "outer" "oops"</span></code></pre> + +<p>Ahora, si nosotros ya capturamos la excepción en una declaración try interna agregando un bloque catch.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span></code></pre> + +<p>Y ahora vamos a relanzar el error.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> ex<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span> +<span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span> +<span class="comment token">// "outer" "oops"</span></code></pre> + +<p>Cualquier excepción dad será capturada solo una vez por el bloque catch más cercano a menos que sea relanzado. Por supuesto cualquier nueva excepción que se origine en el bloque 'interno' (porque el código en el bloque catch puede hacer algo que lanze un error), será capturado por el bloque 'externo'.</p> + +<h3 id="Retornando_de_un_bloque_finally">Retornando de un bloque finally</h3> + +<p>Si el bloque <code>finally</code> retorna un valor, este valor se convierte en el valor de retorno de toda la producción <code>try-catch-finally</code>, a pesar de cualquier sentencia <code>return</code> en los bloques <code>try</code> y <code>catch</code>. Esto incluye excepciones lanzadas dentro del bloque catch.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">try</span> <span class="punctuation token">{</span> + <span class="keyword token">throw</span> <span class="keyword token">new</span> <span class="class-name token">Error</span><span class="punctuation token">(</span><span class="string token">'oops'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'inner'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">throw</span> ex<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">finally</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'finally'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">return</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + <span class="keyword token">catch</span> <span class="punctuation token">(</span><span class="class-name token">ex</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">error</span><span class="punctuation token">(</span><span class="string token">'outer'</span><span class="punctuation token">,</span> ex<span class="punctuation token">.</span>message<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Output:</span> +<span class="comment token">// "inner" "oops"</span> +<span class="comment token">// "finally"</span></code></pre> + +<p>El "oops" externo no es lanzado debido al retorno en el bloque finally. Lo mismo aplicaría para cualquier valor retornado del bloque catch.</p> + +<p>Vea los ejemplos para {{jsxref("Sentencias/throw", "throw")}}.</p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea también</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Sentencias/throw", "throw")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/var/index.html b/files/es/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..006e40a270 --- /dev/null +++ b/files/es/web/javascript/reference/statements/var/index.html @@ -0,0 +1,163 @@ +--- +title: var +slug: Web/JavaScript/Referencia/Sentencias/var +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La sentencia <strong><code>var</code></strong> declara una variable, opcionalmente inicializándola con un valor.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox"><code><strong>var</strong> <em>nombreDeVariable1 [= valor1] [, nombreDeVariable2 [= valor2] ... [, nombreDeVariableN [=valorN]]]; </em></code></pre> + +<dl> + <dt><code>nombreDeVariableN</code></dt> + <dd>Representa el nombre que el programador da a la variable. Puede ser cualquier identificador legal.</dd> +</dl> + +<dl> + <dt><code>valorN</code></dt> + <dd>Valor inicial de la variable. Puede ser cualquier expresión legal. El valor predeterminado es <em>undefined</em> (en español, <em>indefinida</em>).</dd> +</dl> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Las declaraciones de variables, donde sea que ocurran, son procesadas antes de que cualquier otro código sea ejecutado. El ámbito de una variable declarada con la palabra reservada <strong><code>var</code></strong> es su <em>contexto de ejecución</em> en curso<em>,</em> que puede ser la función que la contiene o, para las variables declaradas afuera de cualquier función, un ámbito global. Si re-declaras una variable Javascript, esta no perderá su valor.</p> + +<p>Asignar un valor a una variable no declarada implica crearla como variable global (se convierte en una propiedad del objeto global) cuando la asignación es ejecutada. Las diferencias entre una variable declarada y otra sin declarar son:</p> + +<p>1. Las variables declaradas se limitan al contexto de ejecución en el cual son declaradas. Las variables no declaradas siempre son globales.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict')</span> + <span class="keyword token">var</span> z <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="function token">x</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "1" </span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError": z no está definida afuera de x</span></code></pre> + +<p>2. Las variables declaradas son creadas antes de ejecutar cualquier otro código. Las variables sin declarar no existen hasta que el código que las asigna es ejecutado.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError".</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Nunca se ejecuta.</span></code></pre> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a<span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "undefined" o "" dependiendo del navegador.</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'trabajando...'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "</span><span class="string token">trabajando</span><span class="comment token">...".</span></code></pre> + +<p>3. Las variables declaradas son una propiedad no-configurable de su contexto de ejecución (de función o global). Las variables sin declarar son configurables (p. ej. pueden borrarse).</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> +b <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> + +<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>a<span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('use strict'), de lo contrario falla silenciosamente.</span> +<span class="keyword token">delete</span> <span class="keyword token">this</span><span class="punctuation token">.</span>b<span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>a<span class="punctuation token">,</span> b<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError". </span> +<span class="comment token">// La propiedad 'b' se eliminó y ya no existe.</span></code></pre> + +<p>Debido a esas tres diferencias, fallar al declarar variables muy probablemente llevará a resultados inesperados. Por tanto <strong>se recomienda siempre declarar las variables, sin importar si están en una función o un ámbito global</strong>. Y en el modo estricto (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>) de ECMAScript 5, asignar valor a una variable sin declarar lanzará un error.</p> + +<h3 id="Elevación_de_variables">Elevación de variables</h3> + +<p>Como la declaración de variables (y todas las declaraciones en general) se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es equivalente a declararla al inicio del mismo. Esto también significa que una variable puede parecer usarse antes de ser declarada. Este comportamiento es llamado <em>hoisting </em>(del inglés "elevación"), ya que la declaración de una variable parecer haber sido movida a la cima de la función o código global.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js">bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> bla<span class="punctuation token">;</span> +<span class="comment token">// ...</span> + +<span class="comment token">// Es entendido implicitamente como:</span> + +<span class="keyword token">var</span> bla<span class="punctuation token">;</span> +bla <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span></code></pre> + +<p>Por esa razón, se recomienda siempre declarar variables al inicio de su ámbito (la cima del código global y la cima del código de función) para que sea claro cuáles variables pertenecen al ámbito de función (local) y cuáles son resueltas en la cadena de ámbito.</p> + +<p>Es importante señalar que <strong>la elevación afectará la declaración</strong> de variables, pero <strong>no su inicialización</strong>. El valor será asignado precisamente cuando la sentencia de asignación sea alcanzada:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span> + <span class="keyword token">var</span> bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span> +<span class="punctuation token">}</span> + +<span class="comment token">// Se entiende implícitamente como: </span> +<span class="keyword token">function</span> <span class="function token">haz_algo</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> bar<span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// undefined (valor indefinido)</span> + bar <span class="operator token">=</span> <span class="number token">111</span><span class="punctuation token">;</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>bar<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 111</span> +<span class="punctuation token">}</span></code></pre> + +<p> </p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Declarando_e_inicializando_dos_variables">Declarando e inicializando dos variables</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> b <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Asignando_dos_variables_con_un_solo_valor_de_cadena">Asignando dos variables con un solo valor de cadena</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> b <span class="operator token">=</span> a<span class="punctuation token">;</span> + +<span class="comment token">// Equivalente a:</span> + +<span class="keyword token">var</span> a<span class="punctuation token">,</span> b <span class="operator token">=</span> a <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span></code></pre> + +<p>Sé consciente del orden:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> y<span class="punctuation token">,</span> y <span class="operator token">=</span> <span class="string token">'A'</span><span class="punctuation token">;</span> +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x <span class="operator token">+</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprimirá "undefinedA"</span></code></pre> + +<p>Aquí, '<code>x</code>' & '<code>y</code>' son declaradas antes de ejecutarse cualquier código, y la asignación ocurre después. Al momento de evaluar "<code>x = y</code>", '<code>y</code>' existe así que ningún error "<code>ReferenceError</code>" es lanzado y su valor es '<code>undefined</code>', de modo que '<code>x</code>' también tiene asignada el valor '<code>undefined</code>'. Después, a 'y' se le asigna el valor 'A'. Consecuentemente, luego de la primera línea, '<code>x</code>' es exactamente igual a <code>'undefined</code>' & '<code>y</code>' es igual a <code>'A'</code>, de ahí el resultado.</p> + +<h3 id="Initialización_de_muchas_variables">Initialización de muchas variables</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> x <span class="operator token">=</span> y <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> <span class="comment token">// 'x' es declarada localmente, ¡'y' no lo es!</span> +<span class="punctuation token">}</span> +<span class="function token">f</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Lanza un error de tipo "ReferenceError" en modo estricto ('y' no está definida). De lo contrario se imprimiría "0, 1".</span> +<span class="comment token">// En modo no-estricto:</span> +<span class="comment token">// 'x' es la variable global como se esperaría</span> +<span class="comment token">// 'y' sin embargo, se sale de la función</span></code></pre> + +<h3 id="Globales_implícitas_y_ámbito_externo_a_una_función">Globales implícitas y ámbito externo a una función</h3> + +<p>Las variables que parecen ser globales implícitas pueden ser referencias a variables en un ámbito externo a la función:</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> x <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="comment token">// 'x' es declarada globalmente, luego se le asigna el valor 0</span>. + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "undefined", pues 'z' aún no existe</span>. + +<span class="keyword token">function</span> <span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Cuando 'a()' es invocada,</span> + <span class="keyword token">var</span> y <span class="operator token">=</span> <span class="number token">2</span><span class="punctuation token">;</span> <span class="comment token">// 'y' es declarada localmente en la function 'a()', después se le asigna el valor 2</span>. + + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "0, 2</span>". + + <span class="keyword token">function</span> <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="comment token">// Cuando 'b()' es invocada,</span> + x <span class="operator token">=</span> <span class="number token">3</span><span class="punctuation token">;</span> <span class="comment token">// Asigna el valor 3 a la global 'x' ya existente, no crea una nueva variable global.</span> + y <span class="operator token">=</span> <span class="number token">4</span><span class="punctuation token">;</span> <span class="comment token">// Asigna 4 a la externa existente 'y', no crea una nueva variable global.</span> + z <span class="operator token">=</span> <span class="number token">5</span><span class="punctuation token">;</span> <span class="comment token">// Crea una nueva variable global 'z' y le asigna un valor de 5. </span> + <span class="punctuation token">}</span> <span class="comment token">// (Lanza un error de tipo "ReferenceError" en modo estricto.)</span> + + <span class="function token">b</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Invocar 'b()' crea 'z' como variable global.</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> y<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "3, 4, 5</span>". +<span class="punctuation token">}</span> + +<span class="function token">a</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Invocar 'a()' también llama a 'b</span>()'. +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>x<span class="punctuation token">,</span> z<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime "3, 5</span>", porque 'z' ya es una global. +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">typeof</span> y<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Imprime 'undefined' porque 'y' es local en la función 'a()'</span></code></pre> diff --git a/files/es/web/javascript/reference/statements/while/index.html b/files/es/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..8eab047884 --- /dev/null +++ b/files/es/web/javascript/reference/statements/while/index.html @@ -0,0 +1,58 @@ +--- +title: while +slug: Web/JavaScript/Referencia/Sentencias/while +tags: + - JavaScript + - Statement +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Crea un bucle que ejecuta una sentencia especificada mientras cierta condición se evalúe como verdadera. Dicha condición es evaluada antes de ejecutar la sentencia</p> + +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> + +<pre class="eval">while (<em>condicion</em>) + <em>sentencia</em> +</pre> + +<dl> + <dt><code>condicion</code></dt> + <dd>Una expresión que se evalúa antes de cada paso del bucle. Si esta condición se evalúa como verdadera, se ejecuta <code>sentencia</code>. Cuando la condición se evalúa como false, la ejecución continúa con la <code>sentencia </code>posterior al bucle <code>while</code>.</dd> +</dl> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentecia que se ejecuta mientras la condición se evalúa como verdadera. Para ejecutar múltiples sentencias dentro de un bucle, utiliza una sentencia {{jsxref("Sentencias/block", "block")}} (<code>{ ... }</code>) para agrupar esas sentencias.</dd> +</dl> + +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> + +<p>El siguiente bucle <code>while</code> itera mientras <code>n</code> es menor que tres.</p> + +<pre class="brush: js">n = 0; +x = 0; +while (n < 3) { + n ++; + x += n; +} +</pre> + +<p>Cada interación, el bucle incrementa <code>n</code> y la añade a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p> + +<ul> + <li>Después del primer pase: <code>n</code> = 1 y <code>x</code> = 1</li> + <li>Después del segundo pase: <code>n</code> = 2 y <code>x</code> = 3</li> + <li>Después del tercer pase: <code>n</code> = 3 y <code>x</code> = 6</li> +</ul> + +<p>Después de completar el tercer pase, la condición <code>n</code> < 3 no será verdadera más tiempo, por lo que el bucle terminará.</p> + +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> + +<ul> + <li>{{jsxref("Sentencias/do...while", "do...while")}}</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/statements/with/index.html b/files/es/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..d5dc78d600 --- /dev/null +++ b/files/es/web/javascript/reference/statements/with/index.html @@ -0,0 +1,166 @@ +--- +title: with +slug: Web/JavaScript/Referencia/Sentencias/with +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">El uso de la declaración no es recomendado, ya que puede ser el origen de los errores de confusión y problemas de compatibilidad. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p>La <strong>sentencia with</strong> extiende el alcance de una cadena con la declaración.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">with (expresión) { + <em>declaración</em> +} +</pre> + +<dl> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">expresión</font></dt> + <dd>Añade la expresión dada a la declaración. Los parentesis alrededor de la expresión son necesarios.</dd> + <dt><code>declaración</code></dt> + <dd>Se puede ejecutar cualquier declaración. Para ejecutar varias declaraciónes, utilizar una declaración de bloque ({ ... }) para agrupar esas declaraciónes.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a {{jsxref("ReferenceError")}} is thrown.</p> + +<div class="note">Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.</div> + +<h3 id="Performance_pro_contra">Performance pro & contra</h3> + +<p><strong>Pro:</strong> The <code>with</code> statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</p> + +<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p> + +<h3 id="Ambiguity_contra">Ambiguity contra</h3> + +<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> + +<pre class="brush: js">function f(x, o) { + with (o) + print(x); +}</pre> + +<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> + +<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:</p> + +<div> +<pre class="brush:js">function f(foo, values) { + with (foo) { + console.log(values) + } +} +</pre> + +<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p> +</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_with">Using <code>with</code></h3> + +<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p> + +<pre class="brush:js">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Now forbidden in strict mode.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<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="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> +</ul> diff --git a/files/es/web/javascript/reference/strict_mode/index.html b/files/es/web/javascript/reference/strict_mode/index.html new file mode 100644 index 0000000000..d6a596b3e5 --- /dev/null +++ b/files/es/web/javascript/reference/strict_mode/index.html @@ -0,0 +1,368 @@ +--- +title: Modo Estricto +slug: Web/JavaScript/Referencia/Modo_estricto +tags: + - ECMAScript5 + - Guía + - JavaScript + - Modo estricto +translation_of: Web/JavaScript/Reference/Strict_mode +--- +<div>{{JsSidebar("More", "Más")}}</div> + +<div class="callout-box">A veces, verás que llaman {{Glossary("Sloppy_mode", "sloppy mode — modo poco riguroso")}} al modo no estricto predeterminado. Este no es un término oficial, pero tenlo en cuenta, por si acaso.</div> + +<p>El modo estricto de <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript 5</a> es una forma de elegir una variante <em>restringida</em> de <em>JavaScript</em>, así implícitamente se deja de lado el modo poco riguroso. El modo estricto no es sólo un subconjunto: <em>intencionalmente</em> tiene diferencia semántica del código normal. Los navegadores que no admiten el modo estricto ejecutarán el código con un comportamiento diferente a los que sí lo soportan, por lo tanto no confíes en el modo estricto sin antes hacer pruebas de sus características más relevantes. Los modos estricto y no estricto pueden coexistir, por lo tanto el código se puede transformar a modo estricto incrementalmente.</p> + +<p>El modo estricto tiene varios cambios en la semántica normal de JavaScript:</p> + +<ol> + <li>Elimina algunos errores silenciosos de JavaScript cambiándolos para que lancen errores.</li> + <li>Corrige errores que hacen difícil para los motores de JavaScript realizar optimizaciones: a veces, el código en modo estricto puede correr más rápido que un código idéntico pero no estricto.</li> + <li>Prohíbe cierta sintaxis que probablemente sea definida en futuras versiones de ECMAScript.</li> +</ol> + +<p>Ve <a href="/es/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">transición a modo estricto</a>, si deseas cambiar tu código para trabajar en la variante estricta de JavaScript.</p> + +<h2 id="Invocar_el_modo_estricto">Invocar el modo estricto</h2> + +<p>El modo estricto se aplica a un <em>script completo</em> o a <em>funciones individuales</em>. No se aplica a bloques entre corchetes <code>{}</code>; intentar aplicarlo en tales contextos no hace nada. Código <code>eval</code>, código <code>Function</code>, atributos de controladores de eventos, cadenas pasadas a <a href="/es/docs/Web/API/WindowTimers.setTimeout" title="es/DOM/window.setTimeout"><code>setTimeout</code></a>, y similares son scripts enteros, de modo que invocar modo estricto en tales contextos funciona como se espera.</p> + +<h3 id="Modo_estricto_para_scripts">Modo estricto para scripts</h3> + +<p>Para invocar el modo estricto en todo un script, escribe <em>exactamente</em> <code>"use strict";</code> (o <code>'use strict';</code>) antes de cualquier otra expresión.</p> + +<pre class="brush: js notranslate">// Sintaxis del modo estricto para todo el script +'use strict'; +var v = "¡Hola! ¡Estoy en modo estricto para script!"; +</pre> + +<p>Esta sintaxis tiene un problema que <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=579119">ya ha afectado</a> a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627531">cierta página bien conocida</a>: no es posible concatenar ciegamente scripts conflictivos entre sí. Si concatena un script en modo estricto con otro que no es, la concatenación de ambos producirá código en modo estricto. Lo contrario también es cierto: código en modo no estricto mas código estricto produce código que no es estricto. Concatenar scripts no produce problemas si todos están en modo estricto (o si todos están en modo no estricto). El problema es mezclar scripts en modo estricto con scripts en modo no estricto. Por eso se recomienda habilitar el modo estricto a nivel de función solamente (al menos durante el periodo de transición de un programa).</p> + +<p>Otra opción es envolver el contenido completo del script en una función y tener esa función externa en modo estricto. Así se elimina el problema de la concatenación, pero entonces tienes que hacerte cargo de exportar explícitamente las variables globales fuera del ámbito de la función.</p> + +<h3 id="Modo_estricto_para_funciones">Modo estricto para funciones</h3> + +<p>De igual forma, para invocar el modo estricto para una función, escribe <em>exactamente</em> <code>"use strict";</code> (o <code>'use strict';</code>) en el cuerpo de la función antes de cualquier otra expresión.</p> + +<pre class="brush: js notranslate">function strict() { + // Sintaxis del modo estricto a nivel de función + 'use strict'; + function nested() { return "¡Y yo también!"; } + return "¡Hola! ¡Soy una función en modo estricto! " + nested(); +} +function notStrict() { return "Yo no soy estricto."; } +</pre> + +<h3 id="Modo_estricto_para_módulos">Modo estricto para módulos</h3> + +<p>ECMAScript 2015 introdujo módulos y por tanto una tercera manera de entrar en el modo estricto. Todo el contenido de los módulos de JavaScript se encuentra automáticamente en modo estricto, sin necesidad de una declaración para iniciarlo.</p> + +<pre class="brush: js notranslate">function strict() { + // debido a que este es un módulo, soy estricto por omisión +} +export default strict; +</pre> + +<h2 id="Cambios_en_modo_estricto">Cambios en modo estricto</h2> + +<p>El modo estricto cambia la sintaxis y el comportamiento en tiempo de ejecución. Los cambios generalmente caen dentro de estas categorías: cambios que convierten equivocaciones en errores (como errores de sintaxis o en tiempo de ejecución), cambios que simplifican cómo se calcula el nombre de una variable particular, cambios que simplifican el uso de <code>eval</code> y <code>arguments</code>, cambios que hacen más fácil escribir JavaScript "seguro", y cambios que anticipan la evolución futura de ECMAScript.</p> + +<h3 id="Convertir_equivocaciones_en_errores">Convertir equivocaciones en errores</h3> + +<p>El modo estricto cambia algunos errores de sintaxis tolerados en modo no estricto y los convierte en errores. JavaScript fue diseñado de modo que fuera fácil para programadores novatos, y puede haber operaciones semánticas que deberían ser errores pero son tratadas como libres de error. A veces esto sirve para solucionar el problema en el momento, pero puede crear problemas más graves en el futuro. El modo estricto trata las equivocaciones como errores, para que se puedan descubrir y subsanar inmediatamente.</p> + +<p>En primer lugar, el modo estricto hace imposible crear variables globales por accidente. En JavaScript no estricto, si se escribe mal una variable en una asignación, se creará una nueva propiedad en el objeto global y el código continuará "trabajando" como si nada (aunque es posible que el código así escrito falle en el futuro, en concreto, en JavaScript moderno). En modo estricto, cualquier asignación que produzca variables globales por accidente lanzará un error:</p> + +<pre class="brush: js notranslate">'use strict'; + // Asumiendo que exista una variable global llamada mistypedVariable +mistypeVariable = 17; // esta línea lanza un ReferenceError debido a + // una errata en el nombre de la variable +</pre> + +<p>En segundo lugar, el modo estricto lanza una excepción en asignaciones que de otro modo fallarían silenciosamente. Por ejemplo, <code>NaN</code> es una variable global que no puede ser asignada. En un código normal, asignar a <code>NaN</code> no tiene efecto; el programador no recibe ningún mensaje de error. En cambio, en modo estricto, si se intenta asignar un valor a <code>NaN</code>, el programador recibirá una excepción. Cualquier asignación que falle silenciosamente en código normal (asignaciones a una propiedad de no escritura, asignaciones a una propiedad captadora, asignaciones a una nueva propiedad o a un objecto {{jsxref("Global_Objects/Object/preventExtensions", "no extensible")}}) lanzará una excepción en modo estricto:</p> + +<pre class="brush: js notranslate">'use strict'; + +// Asignación a una no-escritura global +var undefined = 5; // lanza un TypeError +var Infinity = 5; // lanza un TypeError + +// Asignación a una propiedad de no-escritura +var obj1 = {}; +Object.defineProperty(obj1, "x", { value: 42, writable: false }); +obj1.x = 9; // lanza un TypeError + +// Asignación a una propiedad de tipo getter +var obj2 = { get x() { return 17; } }; +obj2.x = 5; // lanza un TypeError + +// Asignación a una nueva propiedad en un objeto no extensible +var fixed = {}; +Object.preventExtensions(fixed); +fixed.newProp = "ohai"; // lanza un TypeError +</pre> + +<p>En tercer lugar, el modo estricto lanza una excepción al intentar eliminar propiedades no eliminables (mientra que en código normal el intento no tendría ningún efecto):</p> + +<pre class="brush: js notranslate">'use strict'; +delete Object.prototype; // lanza un TypeError +</pre> + +<p>En cuarto lugar, la versión de modo estricto anterior a Gecko 34 requiere que todas las propiedades nombradas en un objeto sean únicas. En código normal se pueden duplicar nombres, siendo el último el que determina el valor de la propiedad. Pero como el último es el único que hace algo, la duplicidad da origen a errores si el código se modifica para cambiar el valor de la propiedad. Duplicar nombres de propiedades es un error de sintaxis en modo estricto.</p> + +<div class="note"> +<p>Este ya no es el caso en ECMAScript 2015 (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1041128">error 1041128</a>).</p> +</div> + +<pre class="brush: js notranslate">'use strict'; +var o = { p: 1, p: 2 }; // !!! error de sintaxis +</pre> + +<p>En quinto lugar, el modo estricto requiere que los nombres de los parámetros de una función sean únicos. En código normal, el último argumento repetido oculta argumentos anteriores con el mismo nombre. Estos argumentos permanecen disponibles a través de <code>arguments[i]</code>, de modo que no son completamente inaccesibles. Aun así, esta ocultación tiene poco sentido y es probablemente indeseable (pues puede ocultar, por ejemplo, un error al teclear una letra). Por lo tanto, en modo estricto, duplicar nombres de argumentos es un error de sintaxis:</p> + +<pre class="brush: js notranslate">function sum(a, a, c) { // !!! error de sintaxis + 'use strict'; + return a + a + c; // incorrecto si este código se ejecutó +} +</pre> + +<p>En sexto lugar, en modo estricto ECMAScript 5 se prohíbe la notación octal. La notación octal no es parte de ECMAScript 5, pero está soportada en todos los navegadores al poner como prefijo un cero al número: <code>0644 == 420</code> y <code>"\045" === "%"</code>. En ECMAScript 2015, el número octal es compatible con el prefijo de un número con "<code>0o</code>". Es decir:</p> + +<pre class="brush: js notranslate">var a = 0o10; // ES2015: Octal</pre> + +<p>Los programadores novatos a veces creen que un prefijo cero inicial no tiene un significado semántico, por lo que lo usan como dispositivo de alineación, ¡pero esto cambia el significado del número! Una sintaxis de cero a la izquierda para los octales rara vez es útil y se puede usar por error, por lo que el modo estricto lo convierte en un error de sintaxis:</p> + +<pre class="brush: js notranslate">'use strict'; +var sum = 015 + // !!! error de sintaxis + 197 + + 142; + +var sumWithOctal = 0o10 + 8; +console.log(sumWithOctal); // 16 +</pre> + +<p>Séptimo, el modo estricto en ECMAScript 2015 prohíbe establecer propiedades en valores {{Glossary("Primitive", "primitivos")}}. La sintaxis octal rara vez es útil y se puede usar equivocadamente, de modo que en modo estricto, utilizar notación octal lanza un {{jsxref("TypeError")}}:</p> + +<pre class="brush: js notranslate">(function() { +'use strict'; + +false.true = ''; // TypeError +(14).sailing = 'home'; // TypeError +'with'.you = 'far away'; // TypeError + +})();</pre> + +<h3 id="Simplificación_en_el_uso_de_variables">Simplificación en el uso de variables</h3> + +<p>El modo estricto simplifica el modo en que el nombre de una variable es asignado a un variable particular en el código. Muchas optimizaciones del compilador se basan en la habilidad para decir el lugar específico en que una variable está almacenada, lo cual es crítico para una optimización completa del código JavaScript. Algunas veces JavaScript hace que esta asignación básica del nombre de una variable y su valor no suceda hasta que no se está en tiempo de ejecución. El modo estricto elimina muchos de los casos en los que esto pasa, de modo que el compilador puede optimizar mejor el código que es estricto.</p> + +<p>Primero, el modo estricto prohíbe el uso de <code>with</code>. El problema con <code>with</code> es que cualquier nombre dentro del bloque pude ser asignado a una propiedad del objecto pasado como argumento, o a una variable en su ámbito circundante (o incluso global), en tiempo de ejecución: es imposible saber de antemano cuál será. El modo estricto hace que el uso de <code>with</code> sea un error de sintaxis, de modo que no hay oportunidad de que una variable dentro de un <code>with</code> se refiera a una dirección desconocida en tiempo de ejecución:</p> + +<pre class="brush: js notranslate">'use strict'; +var x = 17; +with (obj) { // !!! error de sintaxis + // Si este no estuviera un modo estricto, ¿sería var x?, o + // ¿sería obj.x en su lugar? Es imposible en general + // decirlo sin ejecutar el código, por lo que el nombre no + // se puede optimizar. + x; +} +</pre> + +<p>En vez de usar <code>with</code>, existe la simple alternativa de asignar el objecto a una variable de nombre más corto, y después acceder a la propiedad correspondiente de esa variable.</p> + +<p>Segundo, el uso de <code>eval</code> en modo estricto no introduce nuevas variables en el ámbito circundante. En código normal, <code>eval("var x;")</code> introduce una variable <code>x</code> dentro de la función circundante o el ámbito global. Esto significa que, en general, en una función que contiene una llamada a <code>eval</code> en cada nombre que no se refiera a un argumento o a una variable local, se debe asignar a una definición en particular en tiempo de ejecución (debido a que <code>eval</code> puedo haber introducido una nueva variable que podría ocultar una variable externa). En modo estricto, <code>eval</code> crea variables solo para el código que se está evaluando, por lo que <code>eval</code> no puede afectar si un nombre se refiere a una variable externa o a alguna variable local:</p> + +<pre class="brush: js notranslate">var x = 17; +var evalX = eval("'use strict'; var x = 42; x"); +console.assert(x === 17); +console.assert(evalX === 42); +</pre> + +<p>En el ejemplo anterior, si la función <code>eval</code> es invocada por una expresión de la forma <code>eval(...)</code> en código de modo estricto, el código será evaluado en modo estricto. El código puede explícitamente invocar el modo estricto, pero no es necesario.</p> + +<pre class="brush: js notranslate">function strict1(str) { + 'use strict'; + return eval(str); // str será tratado como código de modo estricto +} +function strict2(f, str) { + 'use strict'; + return f(str); // no eval(...): str es estricto si y solo + // si invoca el modo estricto +} +function nonstrict(str) { + return eval(str); // str es estricto si y solo + // si invoca el modo estricto +} + +strict1("'¡Código en modo estricto!'"); +strict1("'use strict'; '¡Código en modo estricto!'"); +estricto2(eval, "'Código no estricto'"); +strict2(eval, "'use strict'; '¡Código en modo estricto!'"); +nonstrict("'Código no estricto'"); +nonstrict("'use strict'; '¡Código en modo estricto!'"); +</pre> + +<p>Así los nombres en modo estricto usando <code>eval</code> se comportan idénticamente a los nombres en modo estricto no siendo evaluados como resultado de <code>eval</code>.</p> + +<p>Tercero, el modo estricto prohíbe eliminar nombres planos. De este modo, <code>delete name</code> produce un error de sintaxis.</p> + +<pre class="brush: js notranslate">'use strict'; + +var x; +delete x; // !!! error de sintaxis + +eval("var y; delete y;"); // !!! error de sintaxis</pre> + +<h3 id="Haciendo_eval_y_arguments_más_simples">Haciendo <code>eval</code> y <code>arguments</code> más simples</h3> + +<p>El modo estricto hace que el uso de <code>arguments</code> y <code>eval</code> sea más intuitivo. Ambos envuelven un considerable misticismo en código normal: <code>eval</code> al añadir o remover los enlaces y cambiar los valores de dichos enlaces, y <code>arguments</code> al poder sustituir los nombres de los argumentos por propiedades indexadas. El modo estricto ofrece un gran paso al tratar a <code>eval</code> y a <code>arguments</code> como palabras clave, aunque soluciones finales no estarán disponibles hasta futuras ediciones de ECMAScript.</p> + +<p>Primero, las palabras <code>eval</code> y <code>arguments</code> no se pueden ligar o asignar en la sintaxis del lenguaje. Cualquier intento producirá un error de sintaxis:</p> + +<pre class="brush: js notranslate">'use strict'; +eval = 17; +arguments++; +++eval; +var obj = { set p(arguments) { } }; +var eval; +try { } catch (arguments) { } +function x(eval) { } +function arguments() { } +var y = function eval() { }; +var f = new Function("arguments", "'use strict'; return 17;"); +</pre> + +<p>Segundo, el modo estricto no permite usar alias en elementos del objecto <code>arguments</code> creados dentro de la función. En una función en código normal cuyo primer parámetro sea <code>args</code>, si se cambia el valor de <code>args</code> también se cambiará de <code>arguments[0]</code>, y viceversa (a menos que no se proporcionen parámetros o se elimine <code>arguments[0]</code>). El objecto <code>arguments</code> para el modo estricto almacena los parámetros originales cuando la función es invocada. <code>arguments[i]</code> no guarda el valor del correspondiente nombre del parámetro, ni tampoco un parámetro con nombre guarda el valor correspondiente de <code>arguments[i]</code>.</p> + +<pre class="brush: js notranslate">function f(a) { + 'use strict'; + a = 42; + return [a, arguments[0]]; +} +var pair = f(17); +console.assert(pair[0] === 42); +console.assert(pair[1] === 17); +</pre> + +<p>Tercero, <code>arguments.callee</code> no está soportado. En código normal, <code> arguments.callee</code> se refiere a la función envolvente. Este caso de uso es débil: ¡simplemente nombra la función envolvente!. Además <code>arguments.callee</code> merma el desempeño de funciones en línea pues debe ser posible proveer la referencia de la función que llamó a la función original cada vez que se usa <code>arguments.callee</code>. <code>arguments.callee</code> en modo estricto es una propiedad no eliminable y lanza una excepción cuando se le asigna un valor o se intenta regresar su valor.</p> + +<pre class="brush: js notranslate">'use strict'; +var f = function() { return arguments.callee; }; +f(); // lanza un TypeError +</pre> + +<h3 id="sect1"></h3> + +<p>El modo estricto hace más fácil el escribir código "seguro" en JavaScript. Algunos sitios web ofrecen ahora medios para que los usuarios codifiquen en JavaScript para que el código corra en el sitio en <em>beneficio de otros usuarios</em>. JavaScript en los navegadores puede acceder a la información privada del usuario, por lo que dicho JavaScript se debe transformar parcialmente antes de ejecutarse, para censurar el acceso a funciones prohibidas. La flexibilidad de JavaScript hace que efectivamente sea imposible hacer esto sin muchas comprobaciones en tiempo de ejecución. La flexibilidad de JavaScript hace casi imposible hacer esto sin hacer revisiones en tiempo de ejecución. Unos pocos ajustes del modo estricto, además de requerir que el JavaScript enviado por el usuario sea código de modo estricto y que se invoque de cierta manera, reducen sustancialmente la necesidad de esas comprobaciones en tiempo de ejecución.</p> + +<p>Primero, el valor <code>this</code> pasado a una función en modo estricto no forzosamente debe ser un objeto (es decir, "empaquetado"). Para una función normal, <code>this</code> siempre es un objeto: o el objeto proporcionado si se llama con un <code>this</code> con valor de objeto; el valor, empaquetado, si se llama con un booleano, una cadena o un número <code>this</code>; o el objeto global si se llama con un <code>undefined</code> o <code>null</code> <code>this</code>. (Usar {{jsxref("Global_Objects/Function/call", "call")}}, {{jsxref("Global_Objects/Function/apply", "apply")}}, o {{jsxref("Global_Objects/Function/bind", "bind")}} para especificar un valor del <code>this</code> particular). Este empaquetado automático al pasar valores a una función tiene un costo en el rendimiento; no solo eso, si no que al exponer el objeto global en los navegadores es un riesgo de seguridad, debido a que el objeto global provee acceso a una funcionalidad que el código de JavaScript "seguro" debe restringir. Así, en una función en modo estricto , el valor de <code>this</code> no está empaquetado dentro de un objecto, y si no se especifica, <code>this</code> toma el valor de <code>undefined</code>.</p> + +<pre class="brush: js notranslate">'use strict'; +function fun() { return this; } +console.assert(fun() === undefined); +console.assert(fun.call(2) === 2); +console.assert(fun.apply(null) === null); +console.assert(fun.call(undefined) === undefined); +console.assert(fun.bind(true)() === true); +</pre> + +<p>Esto significa, entre otras cosas, que en los navegadores no es posible hacer referencia al objeto <code>window</code> a través de <code>this</code> dentro de una función en modo estricto.</p> + +<p>Segundo, en modo estricto ya no es posible "recorrer" la pila de JavaScript a través de extensiones de ECMAScript. En código normal con estas extensiones, cuando una función llamada <code>fun</code> está en medio de su ejecución, <code>fun.caller</code> es la función que más recientemente llamó a <code>fun</code>, y <code>fun.arguments</code> son los parámetros para esa invocación de <code>fun</code>. Ambas extensiones son problemáticas para JavaScript "seguro", debido a que permiten acceder a funciones "privilegiadas" y sus (potencialmente inseguros) argumentos. Si <code>fun</code> está en modo estricto, tanto <code>fun.caller</code> como <code>fun.arguments</code> son propiedades no eliminables que lanzan una excepción cuando se establecen o recuperan:</p> + +<pre class="brush: js notranslate">function restricted() { + 'use strict'; + restricted.caller; // lanza un TypeError + restricted.arguments; // lanza un TypeError +} +function privilegedInvoker() { + return restricted(); +} +privilegedInvoker(); +</pre> + +<p>Tercero, en funciones de modo estricto, el objeto <code>arguments</code> no provee acceso a las variables usadas al llamar a la función. En algunas implementaciones antiguas de ECMAScript, <code>arguments.caller</code> era un objeto cuyas propiedades apuntaban a las variables en la función. Esto es una <a href="http://stuff.mit.edu/iap/2008/facebook/">amenaza de seguridad</a> por que rompe la habilidad de ocultar valores privilegiados a través de la abstracción de la función; además, frena algunas optimizaciones. Por estas razones los navegadores modernos no la implementan. Por su funcionalidad a lo largo de los años, <code>arguments.caller</code> en una función de modo estricto es una propiedad que lanza una excepción cuando se usa.</p> + +<pre class="brush: js notranslate">'use strict'; +function fun(a, b) { + 'use strict'; + var v = 12; + return arguments.caller; // lanza un TypeError +} +fun(1, 2); // no expone v (o a o b) +</pre> + +<h3 id="Preparando_el_camino_para_futuras_versiones_de_ECMAScript">Preparando el camino para futuras versiones de ECMAScript</h3> + +<p>Las futuras versiones de ECMAScript introducirán nuevos cambios, y el modo estricto en ECMAScript 5 aplica algunos de esos cambios para hacer una transición más suave. Será más fácil hacer cambios si las bases de esos cambios son prohibidas en modo estricto.</p> + +<p>Primero, en modo estricto una lista de identificadores se convierte en palabras reservadas. Estas palabras son <code>implements</code>, <code>interface</code>, <code>let</code>, <code>package</code>, <code>private</code>, <code>protected</code>, <code>public</code>, <code>static</code>, y <code>yield</code>. De modo que en modo estricto, no se pueden usar estas palabras para nombrar variables o argumentos.</p> + +<pre class="brush: js notranslate">function package(protected) { // !!! + 'use strict'; + var implements; // !!! + + interface: // !!! + while (true) { + break interface; // !!! + } + + function private() { } // !!! +} +function fun(static) { 'use strict'; } // !!! + +</pre> + +<p><em>Dos advertencias específicas de Mozilla</em>: Primero, si tu código esta escrito en JavaScript 1.7 o mayor (por ejemplo en código chrome o cuando se usa bien <code><script type=""></code>) y el código esta en modo estricto, <code>let</code> y <code>yield</code> tienen la funcionalidad <span id="result_box" lang="es">que han tenido desde que esas palabras clave se introdujeron por primera vez</span>. Pero el código en modo estricto en la web, cargado con <code><script src=""></code> o <code><script>...</script></code>, no podrá usar <code>let</code>/<code>yield</code> como identificadores. <em>Segundo, mientras que ES5 incondicionalmente reserva las palabras <code>class</code>, <code>enum</code>, <code>export</code>, <code>extends</code>, <code>import</code> y <code>super</code>, Mozilla Firefox 5 solo las reserva en modo estricto</em>.</p> + +<p>En segundo lugar, <a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">el modo estricto prohíbe las declaraciones de función, no en el nivel superior de un script o función</a>. En el modo normal de los navegadores, las declaraciones de función se permiten "en todas partes". <em>¡Esto no es parte de ES5 (ni siquiera de ES3)!</em> Es una extensión con semántica incompatible en diferentes navegadores. Ten en cuenta que en ES2015 se permiten declaraciones de función fuera del nivel superior.</p> + +<pre class="brush: js notranslate">'use strict'; +if (true) { + function f() { } // !!! error de sintaxis + f(); +} + +for (var i = 0; i < 5; i++) { + function f2() { } // !!! error de sintaxis + f2(); +} + +function baz() { // legal + function eit() { } // también legal +} +</pre> + +<p>Esta prohibición no es el modo estricto propiamente dicho porque tales declaraciones de función son una extensión de ES5 básico. Pero es la recomendación del comité ECMAScript y los navegadores la implementarán.</p> + +<h2 id="Modo_estricto_en_navegadores">Modo estricto en navegadores</h2> + +<p>La mayoría de los navegadores ya implementan el modo estricto. Sin embargo, no dependas ciegamente de él, ya que todavía hay numerosas <a class="external" href="http://caniuse.com/use-strict" rel="external" title="caniuse.com disponibilidad de modo estricto">Versiones del navegador utilizadas en la naturaleza que solo tienen soporte parcial para el modo estricto</a> o no lo admiten en absoluto (por ejemplo, Internet Explorer por debajo de la versión 10). <em>El modo estricto cambia la semántica</em>. Depender de esos cambios provocará equivocaciones y errores en los navegadores que no implementan el modo estricto. Ten cuidado al usar el modo estricto y respalda la dependencia del modo estricto con pruebas de funciones que comprueben si se implementan las partes relevantes del modo estricto. Finalmente, asegúrate de <em>probar tu código en navegadores que admitan y no admitan el modo estricto</em>. Si realizas tus pruebas solo en navegadores que no admiten el modo estricto, es muy probable que tengas problemas en los navegadores que sí lo hacen, y viceversa.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-strict-mode-code', 'Código en modo estricto')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/" title="http://whereswalden.com/2010/09/08/new-es5-strict-mode-support-now-with-poison-pills/">¿Dónde está Walden? » Nuevo soporte de modo estricto ES5: ¡ahora con píldoras venenosas!</a></li> + <li><a class="external" href="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/" title="http://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/">¿Dónde está Walden? » Nuevo requisito del modo estricto de ES5: se prohíben las declaraciones de función que no estén en el nivel superior de un programa o función</a></li> + <li><a class="external" href="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/" title="http://whereswalden.com/2011/01/10/new-es5-strict-mode-support-new-vars-created-by-strict-mode-eval-code-are-local-to-that-code-only/">¿Dónde está Walden? » Nueva compatibilidad con el modo estricto de ES5: las nuevas variables creadas por el código de evaluación del modo estricto son locales solo para ese código</a></li> + <li><a href="http://qnimate.com/javascript-strict-mode-in-nutshell/">Tutorial de "uso estricto" de JavaScript para principiantes.</a></li> + <li><a class="external" href="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/" title="http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/">John Resig — Modo estricto ECMAScript 5, JSON y más</a></li> + <li><a class="external" href="http://dmitrysoshnikov.com/ecmascript/es5-chapter-2-strict-mode/">ECMA-262-5 en detalle. Capitulo 2. Modo estricto.</a></li> + <li><a class="external" href="http://kangax.github.io/compat-table/es5/#Strict_mode">Tabla de compatibilidad del modo estricto</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">Transición al modo estricto</a></li> +</ul> diff --git a/files/es/web/javascript/reference/template_literals/index.html b/files/es/web/javascript/reference/template_literals/index.html new file mode 100644 index 0000000000..708c879383 --- /dev/null +++ b/files/es/web/javascript/reference/template_literals/index.html @@ -0,0 +1,314 @@ +--- +title: Plantillas literales (plantillas de cadenas) +slug: Web/JavaScript/Referencia/template_strings +tags: + - ECMAScript 2015 + - Experimental + - Expérimental(2) + - JavaScript +translation_of: Web/JavaScript/Reference/Template_literals +--- +<div>{{JsSidebar("More")}}</div> + +<p>Las plantillas literales son cadenas literales que habilitan el uso de expresiones incrustadas. Con ellas, es posible utilizar cadenas de caracteres de más de una línea, y funcionalidades de interpolación de cadenas de caracteres.</p> + +<p>En ediciones anteriores de la especificación ES2015, solían llamarse "plantillas de cadenas de caracteres".</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox notranslate">`texto de cadena de caracteres` + +`línea 1 de la cadena de caracteres + línea 2 de la cadena de caracteres` + +`texto de cadena de caracteres ${expresión} texto adicional` + +<em>etiqueta</em>`texto de cadena de caracteres ${expresión} texto adicional` +</pre> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Las plantillas literales se delimitan con el caracter de comillas o tildes invertidas (` `) (<a href="http://en.wikipedia.org/wiki/Grave_accent">grave accent</a>), en lugar de las comillas sencillas o dobles.</p> + +<p>Las plantillas de cadena de caracteres pueden contener marcadores, identificados por el signo de dólar y envueltos en llaves (<code>${expresión}</code>). Las expresiones contenidas en los marcadores, junto con el texto entre ellas, son enviados como argumentos a una función.</p> + +<p>La función por defecto sencillamente concatena las partes para formar una única cadena de caracteres. Si hay una expresión antes de la plantilla literal (aquí indicada mediante <em><code>etiqueta</code></em>), se le conoce como "plantilla etiquetada". En este caso, la expresión de etiqueta (típicamente una función) es llamada con la plantilla literal como parámetro, que luego puede ser manipulada antes de ser devuelta.</p> + +<p>En caso de querer escapar una comilla o tilde invertida en una plantilla literal, se debe poner una barra invertida (<code>\</code>) antes de la comilla o tilde invertida.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="template-string token"><span class="string token">`\``</span></span> <span class="operator token">===</span> <span class="string token">'`'</span> <span class="comment token">// --> true (cierto)</span></code></pre> + +<h3 id="Cadenas_de_más_de_una_línea">Cadenas de más de una línea</h3> + +<p>Los caracteres de fin de línea encontrados forman parte de la plantilla literal.</p> + +<p>Utilizando cadenas de caracteres normales, sería necesario utilizar la siguiente sintaxes para producir cadenas de más de una línea:</p> + +<pre class="brush: js notranslate">console.log('línea 1 de cadena de texto\n' + +'\línea 2 de cadena de texto'); +// "línea 1 de cadena de texto +// línea 2 de cadena de texto" +</pre> + +<p>Utilizando plantillas literales, se puede obtener el mismo resultado de la siguiente forma:</p> + +<pre class="brush: js notranslate">console.log(`línea 1 de la cadena de texto +línea 2 de la cadena de texto`); +// "línea 1 de la cadena de texto +// línea 2 de la cadena de texto"</pre> + +<h3 id="Interpolación_de_expresiones">Interpolación de expresiones</h3> + +<p>Para insertar expresiones dentro de cadenas de caracteres normales, se utilizaría la siguiente sintaxis:</p> + +<pre class="brush: js notranslate">let a = 5; +let b = 10; +console.log('Quince es ' + (a + b) + ' y\nno ' + (2 * a + b) + '.'); +// "Quince es 15 y +// no 20."</pre> + +<p>Ahora, con las plantillas literales, se pueden utilizar sus nuevas capacidades (es decir, insertar expresiones con <code>${ }</code> e incluir caracteres de fin de linea literales dentro de la cadena) para simplificar la sintaxis:</p> + +<pre class="brush: js notranslate">let a = 5; +let b = 10; +console.log(`Quince es ${a + b} y +no ${2 * a + b}.`); +// "Quince es 15 y +// no 20."</pre> + +<h3 id="Anidamiento_de_plantillas">Anidamiento de plantillas</h3> + +<p>En ciertos casos, anidar una plantilla es la forma más fácil, e incluso más legible, de tener cadenas configurables. Dentro de una plantilla con tildes invertidas, es sencillo permitir tildes invertidas interiores simplemente usándolas dentro de un marcador de posición <code>${ }</code> dentro de la plantilla.</p> + +<p>Por ejemplo, si la condición a es <code>true</code> (cierta): entonces <code>return</code> (devuelva) este literal con plantilla.</p> + +<p>En ES5:</p> + +<pre class="brush: js notranslate"><code class="language-js">let classes <span class="operator token">=</span> <span class="string token">'header'</span> +classes <span class="operator token">+</span><span class="operator token">=</span> <span class="punctuation token">(</span><span class="function token">isLargeScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">?</span> + <span class="string token">''</span> <span class="punctuation token">:</span> item<span class="punctuation token">.</span>isCollapsed <span class="operator token">?</span> + <span class="string token">' icon-expander'</span> <span class="punctuation token">:</span> <span class="string token">' icon-collapser'</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>En ES2015 con plantillas literales y sin anidamiento:</p> + +<pre class="brush: js notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : + (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;</code></pre> + +<p>En ES5 con plantillas literales anidadas:</p> + +<pre class="brush: js notranslate"><code>const classes = `header ${ isLargeScreen() ? '' : + `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;</code></pre> + +<h3 id="Plantillas_etiquetadas">Plantillas etiquetadas</h3> + +<p>Una forma más avanzada de plantillas literales son las plantillas <em>etiquetadas</em>.</p> + +<p>Con ellas es posible modificar la salida de las plantillas utilizando una función. El primer argumento contiene un array con una o más cadenas de caracteres. El segundo y subsiguientes argumentos se asocian con las expresiones de la plantilla.</p> + +<p>La función de etiqueta puede ejecutar cualesquiera operaciones deseadas con estos argumentos, y luego devolver la cadena manipulada. (También puede devolver algo totalmente distinto, como se muestra en uno de los siguientes ejemplos.)</p> + +<p>El nombre de la función utilizada con la etiqueta no es nada especial, se puede utilizar cualquier nombre de función en su lugar.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">let persona <span class="operator token">=</span> <span class="string token">'Mike'</span><span class="punctuation token">;</span> +let edad <span class="operator token">=</span> <span class="number token">28</span><span class="punctuation token">;</span> + +<span class="keyword token">function</span> <span class="function token">myTag</span><span class="punctuation token">(</span>strings<span class="punctuation token">,</span> expPersona<span class="punctuation token">,</span> expEdad<span class="punctuation token">)</span> +<span class="punctuation token">{</span> + let str0 <span class="operator token">=</span> strings<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// "Ese "</span> + let str1 <span class="operator token">=</span> strings<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> <span class="comment token">// " es un "</span> + + <span class="comment token">// Tecnicamente, hay una cadena de + // caracteres después de la expresión + // final (en nuestro ejemplo) pero + // está vacia (""), asi que se ignora.</span> + <span class="comment token">// let str2 = strings[2];</span> + + let strEdad<span class="punctuation token">;</span> + <span class="keyword token">if</span> <span class="punctuation token">(expEdad</span> <span class="operator token">></span> <span class="number token">99</span><span class="punctuation token">)</span> +<span class="punctuation token"> {</span> + strEdad <span class="operator token">=</span> <span class="string token">'viejo'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="keyword token">else</span> + <span class="punctuation token">{</span> + strEdad <span class="operator token">=</span> <span class="string token">'joven'</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + <span class="comment token">// Podemos incluso retornar una cadena de + // caracteres utilizando una plantilla literal.</span> + <span class="keyword token">return</span> <span class="template-string token"><span class="string token">`</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>str0<span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${expPersona</span><span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>str1<span class="interpolation-punctuation punctuation token">}</span></span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span>strEdad<span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="keyword token">var</span> salida <span class="operator token">=</span> myTag<span class="template-string token"><span class="string token">`Ese </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> persona <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token"> es un </span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span> edad <span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">`</span></span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>salida<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Ese Mike es un joven</span></code> +</pre> + +<p>Las funciones de etiqueta incluso pueden devolver valores que no sean cadenas de caracteres:</p> + +<pre class="brush: js notranslate">function plantilla(cadenas, ...claves) { + return (function(...valores) { + let diccio = valores[valores.length - 1] || {}; + let resultado = [cadenas[0]]; + claves.forEach(function(clave, i) { + let valor = Number.isInteger(clave) ? valores[clave] : diccio[clave]; + resultado.push(valor, cadenas[i + 1]); + }); + return resultado.join(''); + }); +} + +let t1Closure = plantilla`¡${0}${1}${2}${2}${3}!`; +//let t1Closure = plantilla(["¡","","","","","","!"],0,1,2,3); +t1Closure('H', 'U', 'R', 'A'); // "¡HURRA!" + +let t2Closure = plantilla`${0} ${'foo'}!`; +//let t2Closure = plantilla(["¡",""," ","!"],0,"foo"); +t2Closure('Hola', {foo: 'Mundo'}); // "¡Hola Mundo!" + +let t3Closure = plantilla`Me llamo ${'nombre'}. Tengo casi ${'edad'} años.`; +//let t3Closure = plantilla(["Me llamo ", ". Tengo casi ", " años."], "nombre", "edad"); +t3Closure('foo', {nombre: 'MDN', edad: 30}); //"Me llamo MDN. Tengo casi 30 años." +t3Closure({nombre: 'MDN', edad: 30}); //"Me llamo MDN. Tengo casi 30 años."</pre> + +<h3 id="Cadenas_en_crudo_raw">Cadenas en crudo (<em>raw</em>)</h3> + +<p>La propiedad especial <code>raw</code>, disponible en el primer argumento de la función de etiqueta, permite acceso a las cadenas de caracteres tal como fueron ingresadas, sin procesar <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_String">secuencias de escape</a>.</p> + +<pre class="brush: js notranslate">function etiqueta(cadenas) { + console.log(cadenas.raw[0]); +} + +etiqueta`texto de cadena de caracteres 1 \n texto de cadena de caracteres 2`; +// muestra "texto de cadena de caracteres 1 \n texto de cadena de caracteres 2" , +// incluyendo los caracteres '\' y 'n'</pre> + +<p>Adicionalmente, el método {{jsxref("String.raw()")}} permite crear cadenas de caracteres en crudo tal como serían generadas por la función por defecto de plantilla, concatenando sus partes.</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">let cadena <span class="operator token">=</span> String<span class="punctuation token">.</span>raw<span class="template-string token"><span class="string token">`¡Hola\n</span><span class="interpolation token"><span class="interpolation-punctuation punctuation token">${</span><span class="number token">2</span><span class="operator token">+</span><span class="number token">3</span><span class="interpolation-punctuation punctuation token">}</span></span><span class="string token">!`</span></span><span class="punctuation token">;</span> +<span class="comment token">// "¡Hola\n5!"</span> + +cadena<span class="punctuation token">.</span>length<span class="punctuation token">;</span> +<span class="comment token">// 9 + +</span>Array.from(cadena).join(','); +// "</code>¡,<code class="language-js">H,o,l,a,\,n,5,!"</code> +</pre> + +<h3 id="Plantillas_etiquetadas_y_secuencias_de_escape">Plantillas etiquetadas y secuencias de escape</h3> + +<h4 id="Comportamiento_en_ES2016">Comportamiento en ES2016</h4> + +<p>Comenzando con ECMAScript 2016, las plantillas etiquetadas se comportan de acuerdo con las normas de las siguientes secuencias de escape:</p> + +<ul> + <li>Secuencias de escape de formato Unicode comenzando con "<code>\u</code>", como <code>\u00A9</code></li> + <li>Secuencias de escape de formato Unicode de punto de código, indicadas con "<code>\u{}</code>", como <code>\u{2F804}</code></li> + <li>Secuencias de escape de numeros hexadecimales comenzando con "<code>\x</code>", como <code>\xA9</code></li> + <li>Secuencias de escape de octales literales comenzando con "<code>\0o</code>" seguidas de uno o más dígitos, como <code>\0o251</code></li> +</ul> + +<p>Esto significa que una plantilla etiquetada como la siguiente podría causar problemas, dado que, de acuerdo con la gramática de ECMAScript, un analizador buscará secuencias de escape de formato Unicode válidas pero encontrará sintaxis equivocado:</p> + +<pre class="brush: js notranslate">latex`\unicode` +// En ECMAScript 2016 y versiones anteriores, lanza +// SyntaxError: malformed Unicode character escape sequence</pre> + +<h3 id="Revision_de_secuencias_de_escape_no_permitidas_en_ES2018">Revision de secuencias de escape no permitidas en ES2018</h3> + +<p>Las plantillas etiquetadas deberías permitir la inserción de lenguages (como los <a href="https://en.wikipedia.org/wiki/Domain-specific_language">DSL</a>, o <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>), en donde otras secuencias de escape se ven comúnmente. La propuesta para ECMAScript <a href="https://tc39.es/proposal-template-literal-revision/">Template Literal Revision</a> (Revisión de Plantilla Literal) (Cuarta Etapa, en camino a ser integrada al estándar de ECMAScript 2018) elimina la restricción de las secuencias de escape en ECMAScript para las plantillas etiquetadas.</p> + +<p>Aún así, las secuencias de escape no permitidas deben ser representadas en la representación "cocinada" de la cadena. Aparecerán como elementos <a href="https://developer.mozilla.org/es/docs/Glossary/undefined">no definidos</a> en el array llamado "cocinado" en el siguiente ejemplo.</p> + +<pre class="brush: js notranslate">function latex(str) { + return { "cocinado": str[0], "en crudo": str.raw[0] } +} + +latex`\unicode` + +// { cocinado: undefined, en crudo: "\\unicode" }</pre> + +<p>Cabe destacar que la restricción para secuencias de escape solo ha sido eliminada para plantillas <em>etiquetadas</em>. Aún permanece para plantillas literales sin etiqueta:</p> + +<pre class="brush: js example-bad notranslate">let bad = `bad escape sequence: \unicode`;</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Status</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-template-literals', 'Template Literals')}}<br> + {{SpecName('ES6', '#sec-tagged-templates', 'Tagged Templates')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</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(41)}}</td> + <td>{{CompatGeckoDesktop("34")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(29)}}</td> + <td>{{CompatSafari(9.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funcionalidad</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><span style="font-size: 12px; line-height: 18px;">Soporte básico</span></td> + <td>{{CompatAndroid(67)}}</td> + <td> + <p class="p1">{{CompatChrome(71)}}</p> + </td> + <td>{{CompatGeckoMobile("63")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(46)}}</td> + <td>{{CompatSafari(9)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("String.raw()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="https://gist.github.com/WebReflection/8f227532143e63649804">Template-like strings in ES3 compatible syntax</a></li> +</ul> |