diff options
Diffstat (limited to 'files/es/web/javascript')
522 files changed, 81192 insertions, 0 deletions
diff --git a/files/es/web/javascript/acerca_de_javascript/index.html b/files/es/web/javascript/acerca_de_javascript/index.html new file mode 100644 index 0000000000..a66f16e061 --- /dev/null +++ b/files/es/web/javascript/acerca_de_javascript/index.html @@ -0,0 +1,59 @@ +--- +title: Acerca de JavaScript +slug: Web/JavaScript/Acerca_de_JavaScript +tags: + - JavaScript +translation_of: Web/JavaScript/About_JavaScript +--- +<div>{{JsSidebar}}</div> + +<h2 id="¿Qué_es_JavaScript">¿Qué es JavaScript?</h2> + +<p><strong>JavaScript</strong><sup>®</sup> (a menudo abreviado como <strong>JS</strong>) es un lenguaje ligero, interpretado y orientado a objetos con <a href="https://en.wikipedia.org/wiki/First-class_function" title="https://en.wikipedia.org/wiki/First-class_function">funciones de primera clase</a>, y mejor conocido como el lenguaje de programación para las páginas Web, pero {{Interwiki("wikipedia", "JavaScript#Otras_características", "también se utiliza en muchos entornos que no son de navegador")}}. Es un lenguaje de scripts que es dinámico, multiparadigma, {{Interwiki("wikipedia", "Programación_basada_en_prototipos", "basado en prototipos")}} y admite estilos de programación orientados a objetos, imperativos y funcionales.</p> + +<p>JavaScript se ejecuta en el lado del cliente de la web, y se puede utilizar para estilizar/programar cómo se comportan las páginas web cuando ocurre un evento. JavaScript es un potente lenguaje de scripts y fácil de aprender, ampliamente utilizado para controlar el comportamiento de las páginas web.</p> + +<p>Contrariamente a la creencia popular, <strong>JavaScript <em>no</em> es "Java interpretado"</strong>. En pocas palabras, JavaScript es un lenguaje de scripts dinámico que admite {{JSxRef("../Guide/Details_of_the_Object_Model", "construcción de objetos basada en prototipos", "#Lenguajes_basados_en_clases_vs._basados_en_prototipos")}}. Intencionalmente, la sintaxis básica es similar a Java y C++ para reducir la cantidad de conceptos nuevos necesarios para aprender el lenguaje. Construcciones del lenguaje, como las declaraciones <code>if</code>, los bucles <code>for</code> y <code>while</code>, y <code>switch</code> y los bloques <code>try...catch</code> funcionan igual que en esos lenguajes (o casi).</p> + +<p>JavaScript puede funcionar como un {{JSxRef("../Introduction_to_Object-Oriented_JavaScript", "lenguaje orientado a objetos")}} y {{Interwiki("wikipedia", "Programación_por_procedimientos", "procedimental")}}. Los objetos se crean mediante programación en JavaScript, adjuntando métodos y propiedades a objetos que de otro modo <strong>en tiempo de ejecución</strong> estarían vacíos, a diferencia de las definiciones de clases sintácticas comunes en lenguajes compilados como C++ y Java. Una vez que se ha construido un objeto, se puede utilizar como plano (o prototipo) para crear objetos similares.</p> + +<p>Las capacidades dinámicas de JavaScript incluyen la construcción de objetos en tiempo de ejecución, listas de parámetros variables, variables de función, creación dinámica de scripts (a través de {{JSxRef("Objetos_globales/eval", "eval")}}, introspección de objetos (a través de <code>for...in</code>) y recuperación de código fuente (los programas JavaScript pueden descompilar los cuerpos de las funciones en su texto fuente).</p> + +<p>Para una explicación más profunda de la programación de JavaScript, sigue los enlaces {{anch("Recursos_de_JavaScript", "recursos de JavaScript")}} a continuación.</p> + +<h2 id="¿Qué_implementaciones_de_JavaScript_están_disponibles">¿Qué implementaciones de JavaScript están disponibles?</h2> + +<p>El proyecto Mozilla proporciona dos implementaciones de JavaScript. El primer JavaScript <strong>fue creado</strong> por Brendan Eich en Netscape, y a partir de entonces se ha actualizado para cumplir con ECMA-262 Edición 5 y versiones posteriores. Este motor, cuyo nombre en código es {{web.link("/es/docs/Mozilla/Projects/SpiderMonkey", "SpiderMonkey")}}, está implementado en C/C++. El motor {{web.link("/es/docs/Rhino", "Rhino")}}, creado principalmente por Norris Boyd (también en Netscape) es una implementación de JavaScript escrita en Java. Al igual que SpiderMonkey, Rhino también es compatible con ECMA-262 Edition 5.</p> + +<p>Con el transcurso del tiempo, y tras varias importantes optimizaciones del entorno de ejecución como TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) e IonMonkey se agregaron al motor de JavaScript SpiderMonkey. El trabajo siempre está en curso para mejorar el rendimiento de ejecución de JavaScript.</p> + +<p>Más allá de las implementaciones anteriores, existen otros motores JavaScript populares como:—</p> + +<ul> + <li><a class="external" href="https://code.google.com/p/v8/" title="https://code.google.com/p/v8/">V8</a> de Google , que se utiliza en el navegador Google Chrome y las versiones recientes del navegador Opera. Este también es el motor que utiliza <a href="http://nodejs.org">Node.js</a>.</li> + <li><a class="external" href="https://www.webkit.org/projects/javascript/index.html" title="https://www.webkit.org/projects/javascript/index.html">JavaScriptCore</a> (SquirrelFish/Nitro) utilizado en algunos navegadores WebKit como Apple Safari.</li> + <li><a class="external" href="http://my.opera.com/ODIN/blog/carakan-faq" title="http://my.opera.com/ODIN/blog/carakan-faq">Carakan</a> en versiones antiguas de Opera.</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29" title="http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29">Motor Chakra</a> utilizado en Internet Explorer (aunque el lenguaje que implementa formalmente se llama "JScript" para evitar problemas de marcas registradas).</li> +</ul> + +<p>Cada uno de los motores de JavaScript de Mozilla expone una API pública que los desarrolladores de aplicaciones pueden utilizar para integrar JavaScript en su software. Hasta ahora, el entorno de alojamiento más común para JavaScript son los navegadores web. Los navegadores web suelen utilizar la API pública para crear <strong>objetos del anfitrión</strong> responsables de reflejar el <a class="external" href="http://www.w3.org/DOM/">DOM</a> en JavaScript.</p> + +<p>Otra aplicación común para JavaScript es como lenguaje de programación de lado del servidor (Web). Un servidor web JavaScript expondría objetos del anfitrión que representan una solicitud HTTP y objetos de respuesta, que luego podría manipular un programa JavaScript para generar páginas web dinámicamente. <a href="http://nodejs.org">Node.js</a> es un ejemplo popular de esto.</p> + +<h2 id="Recursos_de_JavaScript">Recursos de JavaScript</h2> + +<dl> + <dt>{{web.link("/es/docs/Mozilla/Projects/SpiderMonkey", "SpiderMonkey")}}</dt> + <dd>Información específica sobre la implementación de JavaScript de Mozilla en el motor C/C++ (también conocido como SpiderMonkey), incluye cómo integrarlo en aplicaciones.</dd> +</dl> + +<dl> + <dt>{{web.link("/es/docs/Rhino", "Rhino")}}</dt> + <dd>Información específica para la implementación de JavaScript escrita en Java (también conocido como Rhino).</dd> + <dt>{{JSxRef("../Language_Resources", "Recursos del lenguaje")}}</dt> + <dd>Punteros a estándares JavaScript publicados.</dd> + <dt>{{JSxRef("../A_re-introduction_to_JavaScript", "Una reintroducción a JavaScript")}}</dt> + <dd>{{JSxRef("../Guide", "Guía de JavaScript")}} y {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</dd> +</dl> + +<p><strong>JavaScript<sup>®</sup></strong> es una marca comercial o una marca comercial registrada de Oracle en EE. UU. y otros países.</p> diff --git a/files/es/web/javascript/closures/index.html b/files/es/web/javascript/closures/index.html new file mode 100644 index 0000000000..f6575e0fde --- /dev/null +++ b/files/es/web/javascript/closures/index.html @@ -0,0 +1,320 @@ +--- +title: Closures +slug: Web/JavaScript/Closures +tags: + - Closures + - Guia(2) + - Guía + - JavaScript +translation_of: Web/JavaScript/Closures +--- +<div>{{jsSidebar("Intermediate")}}</div> + +<p>Una clausura o <em>closure</em> es una función que guarda referencias del estado adyacente (<strong>ámbito léxico</strong>). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En JavaScript, las clausuras se crean cada vez que una función es creada.</p> + +<h2 id="Ámbito_léxico">Ámbito léxico</h2> + +<p>Consideremos el siguiente ejemplo:</p> + +<div style="width: auto; overflow: hidden;"> +<pre class="brush: js">function iniciar() { + var nombre = "Mozilla"; // La variable nombre es una variable local creada por iniciar. + function mostrarNombre() { // La función mostrarNombre es una función interna, una clausura. + alert(nombre); // Usa una variable declarada en la función externa. + } + mostrarNombre(); +} +iniciar(); </pre> +</div> + +<p>La función <code>iniciar()</code> crea una variable local llamada <code>nombre</code> y una función interna llamada <code>mostrarNombre()</code>. Por ser una función interna, esta última solo está disponible dentro del cuerpo de <code>iniciar()</code>. Notemos a su vez que <code>mostrarNombre()</code> no tiene ninguna variable propia; pero, dado que las funciones internas tienen acceso a las variables de las funciones externas, <code>mostrarNombre()</code> puede acceder a la variable <code>nombre</code> declarada en la función <code>iniciar()</code>.</p> + +<p>Ejecuta el código usando <a href="http://jsfiddle.net/xAFs9/3/">este enlace de JSFiddle</a> y observa que la sentencia <code>alert()</code>, dentro de <code>mostrarNombre()</code>, muestra con éxito el valor de la variable <code>nombre</code>, la cual fue declarada en la función externa. Este es un ejemplo de <em>ámbito léxico</em>, el cual describe cómo un analizador sintáctico resuelve los nombres de las variables cuando hay funciones anidadas. La palabra <em>léxico</em> hace referencia al hecho de que el ámbito léxico se basa en el lugar donde una variable fue declarada para determinar dónde esta variable estará disponible. Las funciones anidadas tienen acceso a las variables declaradas en su ámbito exterior.</p> + +<h2 id="Clausuras">Clausuras</h2> + +<p>Considera el siguiente ejemplo:</p> + +<pre class="brush: js">function creaFunc() { + var nombre = "Mozilla"; + function muestraNombre() { + alert(nombre); + } + return muestraNombre; +} + +var miFunc = creaFunc(); +miFunc(); </pre> + +<p>Si se ejecuta este código tendrá exactamente el mismo efecto que el ejemplo anterior: se mostrará el texto "Mozilla" en un cuadro de alerta de Javascript. Lo que lo hace diferente (e interesante) es que la función externa nos ha devuelto la función interna <code>muestraNombre</code><code>() </code>antes de ejecutarla.</p> + +<p>Puede parecer poco intuitivo que este código funcione. Normalmente, las variables locales dentro de una función sólo existen mientras dura la ejecución de dicha función. Una vez que <code>creaFunc()</code> haya terminado de ejecutarse, es razonable suponer que no se pueda ya acceder a la variable <code>nombre</code>. Dado que el código funciona como se esperaba, esto obviamente no es el caso.</p> + +<p>La solución a este rompecabezas es que <code>miFunc</code> se ha convertido en un <em>closure</em>. Un <em>closure</em> es un tipo especial de objeto que combina dos cosas: una función, y el entorno en que se creó esa función. El entorno está formado por las variables locales que estaban dentro del alcance en el momento que se creó el closure. En este caso, <code>miFunc</code> es un closure que incorpora tanto la función <code>muestraNombre</code> como el string "Mozilla" que existían cuando se creó el closure.</p> + +<p>Este es un ejemplo un poco más interesante: una función <code>creaSumador</code>:</p> + +<pre class="brush: js">function creaSumador(x) { + return function(y) { + return x + y; + }; +} + +var suma5 = creaSumador(5); +var suma10 = creaSumador(10); + +console.log(suma5(2)); // muestra 7 +console.log(suma10(2)); // muestra 12 </pre> + +<p>En este ejemplo, hemos definido una función <code>creaSumador</code><code>(x)</code> que toma un argumento único <code>x</code> y devuelve una nueva función. Esa nueva función toma un único argumento <code>y</code>, devolviendo la suma de <code>x</code> + <code>y</code>.</p> + +<p>En esencia, <code>creaSumador</code><code> </code>es una fábrica de función: crea funciones que pueden sumar un valor específico a su argumento. En el ejemplo anterior utilizamos nuestra fábrica de función para crear dos nuevas funciones: una que agrega 5 a su argumento y otra que agrega 10.</p> + +<p><code>suma5</code> y <code>suma10</code> son ambos closures. Comparten la misma definición de cuerpo de función, pero almacenan diferentes entornos. En el entorno <code>suma5</code>, <code>x</code> es 5. En lo que respecta a <code>suma10</code>, <code>x</code> es 10.</p> + +<h2 id="Closures_prácticos">Closures prácticos</h2> + +<p>Hasta aquí hemos visto teoría, pero ¿son los closures realmente útiles? Vamos a considerar sus implicaciones prácticas. Un closure permite asociar algunos datos (el entorno) con una función que opera sobre esos datos. Esto tiene evidentes paralelismos con la programación orientada a objetos, en la que los objetos nos permiten asociar algunos datos (las propiedades del objeto) con uno o más métodos.</p> + +<p>En consecuencia, puede utilizar un closure en cualquier lugar en el que normalmente pondría un objeto con un solo método.</p> + +<p>En la web hay situaciones habituales en las que aplicarlos. Gran parte del código JavaScript para web está basado en eventos: definimos un comportamiento y lo conectamos a un evento que es activado por el usuario (como un click o pulsación de una tecla). Nuestro código generalmente se adjunta como una devolución de llamada (callback): que es una función que se ejecuta en respuesta al evento.</p> + +<p>Aquí está un ejemplo práctico: Supongamos que queremos añadir algunos botones a una página para ajustar el tamaño del texto. Una manera de hacer esto es especificar el tamaño de fuente del elemento <code>body</code> en píxeles y, a continuación, ajustar el tamaño de los demás elementos de la página (como los encabezados) utilizando la unidad relativa <code>em</code>:</p> + +<pre class="brush: css">body { + font-family: Helvetica, Arial, sans-serif; + font-size: 12px; +} + +h1 { + font-size: 1.5em; +} +h2 { + font-size: 1.2em; +} </pre> + +<p>Nuestros botones interactivos de tamaño de texto pueden cambiar la propiedad <code>font-size</code> del elemento <code>body</code>, y los ajustes serán aplicados por los otros elementos de la página gracias a las unidades relativas.</p> + +<p>Aquí está el código JavaScript:</p> + +<pre class="brush: js">function makeSizer(size) { + return function() { + document.body.style.fontSize = size + 'px'; + }; +} + +var size12 = makeSizer(12); +var size14 = makeSizer(14); +var size16 = makeSizer(16); +</pre> + +<p><code>size12</code>, <code>size14</code> y <code>size16</code> ahora son funciones que cambian el tamaño del texto de <code>body</code> a 12, 14 y 16 pixels, respectivamente. Podemos conectarlos a botones (en este caso enlaces) de la siguiente forma:</p> + +<pre class="brush: js">document.getElementById('size-12').onclick = size12; +document.getElementById('size-14').onclick = size14; +document.getElementById('size-16').onclick = size16; +</pre> + +<pre class="brush: html"><a href="#" id="size-12">12</a> +<a href="#" id="size-14">14</a> +<a href="#" id="size-16">16</a> +</pre> + +<h2 id="Emulando_métodos_privados_con_closures">Emulando métodos privados con closures</h2> + +<p>Lenguajes como Java ofrecen la posibilidad de declarar métodos privados, es decir, que sólo pueden ser llamados por otros métodos en la misma clase.</p> + +<p>JavaScript no proporciona una forma nativa de hacer esto, pero es posible emular métodos privados utilizando closures. Los métodos privados no son sólo útiles para restringir el acceso al código: también proporcionan una poderosa manera de administrar tu espacio de nombres global, evitando que los métodos no esenciales embrollen la interfaz pública de tu código.</p> + +<p>Aquí vemos cómo definir algunas funciones públicas que pueden acceder a variables y funciones privadas utilizando closures. A esto se le conoce también como el <a class="external" href="http://www.google.com/search?q=javascript+patron+modulo" title="javascript patron modulo">patrón módulo</a>:</p> + +<pre class="brush: js">var Counter = (function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +})(); + +alert(Counter.value()); /* Muestra 0 */ +Counter.increment(); +Counter.increment(); +alert(Counter.value()); /* Muestra 2 */ +Counter.decrement(); +alert(Counter.value()); /* Muestra 1 */ </pre> + +<p>Hay mucho aquí. En los ejemplos anteriores cada closure ha tenido su propio entorno; aquí creamos un único entorno compartido por tres funciones: <code>Counter.increment</code>, <code>Counter.decrement</code> y <code>Counter.value</code>.</p> + +<p>El entorno compartido se crea en el cuerpo de una función anónima, que se ejecuta en el momento que se define. El entorno contiene dos elementos privados: una variable llamada <code>privateCounter</code> y una función llamada <code>changeBy</code>. No se puede acceder a ninguno de estos elementos privados directamente desde fuera de la función anónima. Se accede a ellos por las tres funciones públicas que se devuelven desde el contenedor anónimo.</p> + +<p>Esas tres funciones públicas son closures que comparten el mismo entorno. Gracias al ámbito léxico de Javascript, cada uno de ellas tienen acceso a la variable <code>privateCounter</code> y a la función <code>changeBy.</code></p> + +<p>En este caso hemos definido una función anónima que crea un contador, y luego la llamamos inmediatamente y asignamos el resultado a la variable <code>Counter</code>. Pero podríamos almacenar esta función en una variable independiente y utilizarlo para crear varios contadores:</p> + +<pre class="brush: js">var makeCounter = function() { + var privateCounter = 0; + function changeBy(val) { + privateCounter += val; + } + return { + increment: function() { + changeBy(1); + }, + decrement: function() { + changeBy(-1); + }, + value: function() { + return privateCounter; + } + } +}; + +var Counter1 = makeCounter(); +var Counter2 = makeCounter(); +alert(Counter1.value()); /* Muestra 0 */ +Counter1.increment(); +Counter1.increment(); +alert(Counter1.value()); /* Muestra 2 */ +Counter1.decrement(); +alert(Counter1.value()); /* Muestra 1 */ +alert(Counter2.value()); /* Muestra 0 */ </pre> + +<p>Ten en cuenta que cada uno de los dos contadores mantiene su independencia del otro. Su entorno durante la llamada de la función <code>makeCounter()</code> es diferente cada vez. La variable del closure llamada <code>privateCounter </code>contiene una instancia diferente cada vez.</p> + +<p>Utilizar closures de este modo proporciona una serie de beneficios que se asocian normalmente con la programación orientada a objectos, en particular la encapsulación y la ocultación de datos.</p> + +<h2 id="Creando_closures_en_loops_Un_error_común">Creando closures en loops: Un error común</h2> + +<p>Antes de la introducción de la palabra clave <a href="/en-US/docs/JavaScript/Reference/Statements/let" title="let"><code>let</code></a> en JavaScript 1.7, un problema común con closures ocurría cuando se creaban dentro de un bucle 'loop'. Veamos el siguiente ejemplo:</p> + +<pre class="brush: html"><p id="help">Helpful notes will appear here</p> +<p>E-mail: <input type="text" id="email" name="email"></p> +<p>Name: <input type="text" id="name" name="name"></p> +<p>Age: <input type="text" id="age" name="age"></p> +</pre> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Dirección de correo electrónico'}, + {'id': 'name', 'help': 'Nombre completo'}, + {'id': 'age', 'help': 'Edad (debes tener más de 16 años)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = function() { + showHelp(item.help); + } + } +} + +setupHelp(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv">Ver en el JSFiddle</a></p> + +<p>El array <code>helpText</code> define tres avisos de ayuda, cada uno asociado con el ID de un campo de entrada en el documento. El bucle recorre estas definiciones, enlazando un evento onfocus a cada uno que muestra el método de ayuda asociada.</p> + +<p>Si pruebas este código, verás que no funciona como esperabas. Independientemente del campo en el que se haga foco, siempre se mostrará el mensaje de ayuda relativo a la edad.</p> + +<p>La razón de esto es que las funciones asignadas a onfocus son closures; que constan de la definición de la función y del entorno abarcado desde el ámbito de la función <code>setupHelp</code>. Se han creado tres closures, pero todos comparten el mismo entorno. En el momento en que se ejecutan las funciones callback de onfocus, el bucle ya ha finalizado y la variable <code>item</code> (compartida por los tres closures) ha quedado apuntando a la última entrada en la lista de <code>helpText.</code></p> + +<p>En este caso, una solución es utilizar más closures: concretamente añadiendo una fábrica de función como se ha descrito anteriormente:</p> + +<pre class="brush: js">function showHelp(help) { + document.getElementById('help').innerHTML = help; +} + +function makeHelpCallback(help) { + return function() { + showHelp(help); + }; +} + +function setupHelp() { + var helpText = [ + {'id': 'email', 'help': 'Dirección de correo electrónico'}, + {'id': 'name', 'help': 'Nombre completo'}, + {'id': 'age', 'help': 'Edad (debes tener más de 16 años)'} + ]; + + for (var i = 0; i < helpText.length; i++) { + var item = helpText[i]; + document.getElementById(item.id).onfocus = makeHelpCallback(item.help); + } +} + +setupHelp(); +</pre> + +<p><a href="https://jsfiddle.net/v7gjv/1">Ver en el JSFiddle</a></p> + +<p>Esto funciona como se esperaba. En lugar de los tres callbacks compartiendo el mismo entorno, la función <code>makeHelpCallback</code> crea un nuevo entorno para cada uno en el que <code>help</code> se refiere a la cadena correspondiente del array <code>helpText</code>.</p> + +<h2 id="Consideraciones_de_rendimiento">Consideraciones de rendimiento</h2> + +<p>No es aconsejable crear innecesariamente funciones dentro de otras funciones si no se necesitan los closures para una tarea particular ya que afectará negativamente el rendimiento del script tanto en consumo de memoria como en velocidad de procesamiento.</p> + +<p>Por ejemplo, cuando se crea un nuevo objeto/clase, los métodos normalmente deberían asociarse al prototipo del objeto en vez de definirse en el constructor del objeto. La razón es que con este último sistema, cada vez que se llama al constructor (cada vez que se crea un objeto) se tienen que reasignar los métodos.</p> + +<p>Veamos el siguente caso, que no es práctico pero sí demostrativo:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); + this.getName = function() { + return this.name; + }; + + this.getMessage = function() { + return this.message; + }; +} +</pre> + +<p>El código anterior no aprovecha los beneficios de los closures. Podríamos modificarlo de la siguiente manera:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype = { + getName: function() { + return this.name; + }, + getMessage: function() { + return this.message; + } +}; +</pre> + +<p>Sin embargo, no se recomienda redefinir el prototipo, así que el siguiente ejemplo es aún mejor que el anterior, porque lo que hace es añadir funcionalidad al prototipo existente:</p> + +<pre class="brush: js">function MyObject(name, message) { + this.name = name.toString(); + this.message = message.toString(); +} +MyObject.prototype.getName = function() { + return this.name; +}; +MyObject.prototype.getMessage = function() { + return this.message; +}; +</pre> + +<p>En los dos ejemplos anteriores, todos los objetos comparten el prototipo heredado y no se van a definir los métodos cada vez que se crean de objetos. Ver <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model" title="en-US/docs/JavaScript/Guide/Details of the Object Model">Detalles del Modelo de Objetos</a> para más información.</p> diff --git a/files/es/web/javascript/data_structures/index.html b/files/es/web/javascript/data_structures/index.html new file mode 100644 index 0000000000..5c26acb53e --- /dev/null +++ b/files/es/web/javascript/data_structures/index.html @@ -0,0 +1,452 @@ +--- +title: Tipos de datos y estructuras en JavaScript +slug: Web/JavaScript/Data_structures +tags: + - JavaScript + - Novato + - Principiante + - Tipado +translation_of: Web/JavaScript/Data_structures +--- +<div>{{jsSidebar("More", "Más")}}</div> + +<p>Todos los lenguajes de programación tienen estructuras de datos integradas, pero estas a menudo difieren de un lenguaje a otro. Este artículo intenta enumerar las estructuras de datos integradas disponibles en JavaScript y las propiedades que tienen. Estas se pueden utilizar para construir otras estructuras de datos. Siempre que es posible, se hacen comparaciones con otros lenguajes.</p> + +<h2 id="Tipado_dinámico">Tipado dinámico</h2> + +<p>JavaScript es un lenguaje <em>débilmente tipado</em> y <em>dinámico</em>. Las variables en JavaScript no están asociadas directamente con ningún tipo de valor en particular, y a cualquier variable se le puede asignar (y reasignar) valores de todos los tipos:</p> + +<pre class="brush: js notranslate">let foo = 42; // foo ahora es un número +foo = 'bar'; // foo ahora es un string +foo = true; // foo ahora es un booleano +</pre> + +<h2 id="Estructuras_y_tipos_de_datos">Estructuras y tipos de datos</h2> + +<p>El último estándar ECMAScript define nueve tipos:</p> + +<ul> + <li>Seis <strong>tipos de datos</strong> {{Glossary("Primitive", "primitivos")}}, controlados por el {{jsxref("Operators/typeof", "operador typeof")}} + + <ul> + <li>{{Glossary("Undefined")}}: <code>typeof instance === "undefined"</code></li> + <li>{{Glossary("Boolean")}}: <code>typeof instance === "boolean"</code></li> + <li>{{Glossary("Number")}}: <code>typeof instance === "number"</code></li> + <li>{{Glossary("String")}}: <code>typeof instance === "string"</code></li> + <li>{{Glossary("BigInt")}}: <code>typeof instance === "bigint"</code></li> + <li>{{Glossary("Symbol")}}: <code>typeof instance === "symbol"</code></li> + </ul> + </li> + <li>{{Glossary("Null")}}: <code>typeof instance === "object"</code>. Tipo {{Glossary("Primitive", "primitivo")}} especial que tiene un uso adicional para su valor: si el objeto no se hereda, se muestra <code>null</code>;</li> + <li>{{Glossary("Object")}}: <code>typeof instance === "object"</code>. Tipo estructural especial que no es de datos pero para cualquier instancia de objeto <a href="/es/docs/Learn/JavaScript/Objects#The_Constructor">construido</a> que también se utiliza como estructuras de datos: new {{jsxref("Object")}}, new {{jsxref("Array")}}, new {{jsxref("Map")}}, new {{jsxref("Set")}}, new {{jsxref("WeakMap")}}, new {{jsxref("WeakSet")}}, new {{jsxref("Date")}} y casi todo lo hecho con la <a href="/es/docs/Web/JavaScript/Reference/Operators/new">palabra clave <code>new</code></a>;</li> + <li>{{Glossary("Function")}}<span>: una estructura sin datos, aunque también responde al operador <code>typeof</code>: </span><code>typeof instance === "function"</code>. Esta simplemente es una forma abreviada para funciones, aunque cada constructor de funciones se deriva del constructor <code>Object</code>.</li> +</ul> + +<p>Ten en cuenta que el único propósito valioso del uso del operador <code>typeof</code> es verificar el tipo de dato. Si deseamos verificar cualquier Tipo Estructural derivado de <code>Object</code>, no tiene sentido usar <code>typeof</code> para eso, ya que siempre recibiremos "<code>object</code>". La forma correcta de comprobar qué tipo de Objeto estamos usando es la palabra clave {{jsxref("Operators/instanceof", "instanceof")}}. Pero incluso en ese caso, puede haber conceptos erróneos.</p> + +<h2 id="Valores_primitivos">Valores primitivos</h2> + +<p>Todos los tipos, excepto los objetos, definen valores inmutables (es decir, valores que no se pueden cambiar). Por ejemplo (y a diferencia de C), las cadenas son inmutables. Nos referimos a los valores de estos tipos como "<em>valores primitivos</em>".</p> + +<h3 id="Tipo_Boolean">Tipo <code>Boolean</code></h3> + +<p><code>Boolean</code> representa una entidad lógica y puede tener dos valores: <code>true</code> y <code>false</code>. Consulta {{Glossary("Boolean")}} y {{jsxref("Boolean")}} para obtener más detalles.</p> + +<h3 id="Tipo_Null">Tipo <code>Null</code></h3> + +<p>El tipo <code>Null</code> tiene exactamente un valor: <code>null</code>. Consulta {{jsxref("null")}} y {{Glossary("Null")}} para obtener más detalles.</p> + +<h3 id="Tipo_Undefined">Tipo <code>Undefined</code></h3> + +<p>Una variable a la que no se le ha asignado un valor tiene el valor <code>undefined</code>. Consulta {{jsxref("undefined")}} y {{Glossary("Undefined")}} para obtener más detalles.</p> + +<h3 id="Tipo_Number">Tipo <code>Number</code></h3> + +<p>ECMAScript tiene dos tipos numéricos integrados: <strong><code>Number</code></strong> y <strong><code>BigInt</code></strong> (ve más abajo).</p> + +<p>El tipo <code>Number</code> es un <a href="https://es.wikipedia.org/wiki/Formato_en_coma_flotante_de_doble_precisión">valor en formato binario de 64 bits de doble precisión IEEE 754</a> (números entre -(2<sup>53</sup> - 1) y 2<sup>53</sup> - 1). Además de representar números de punto flotante, el tipo <code>Number</code> tiene tres valores simbólicos: <code>+Infinity</code>, <code>-Infinity</code> y {{jsxref("NaN")}} ("<strong>N</strong>ot a <strong>N</strong>umber" o No es un número).</p> + +<p>Para verificar el valor disponible más grande o el valor más pequeño disponible dentro de {{jsxref("Infinity", "±Infinity")}}, puedes usar las constantes {{jsxref("Number.MAX_VALUE")}} o {{jsxref("Number.MIN_VALUE")}}.</p> + +<div class="blockIndicator note"> +<p><strong>A partir de ECMAScript 2015</strong>, también puedes comprobar si un número está en el rango de números de punto flotante de doble precisión mediante {{jsxref("Number.isSafeInteger()")}} así como {{jsxref("Number.MAX_SAFE_INTEGER")}} y {{jsxref("Number.MIN_SAFE_INTEGER")}}.</p> + +<p>Más allá de este rango, los enteros en JavaScript ya no son seguros y serán una aproximación de punto flotante de doble precisión del valor.</p> +</div> + +<p>El tipo <code>number</code> solo tiene un entero con dos representaciones: <code>0</code> se representa como <code>-0</code> y <code>+0</code>. (<code>0</code> es un alias de <code>+0</code>).</p> + +<p>En la praxis, esto casi no tiene impacto. Por ejemplo, <code>+0 === -0</code> es <code>true</code>. Sin embargo, puedes notar esto cuando divides entre cero:</p> + +<pre class="brush: js notranslate">> 42 / +0 +Infinity +> 42 / -0 +-Infinity +</pre> + +<p>Aunque un <code>number</code> a menudo representa solo su valor, JavaScript proporciona {{jsxref("Operators/Bitwise_Operators", "operadores binarios (bitwise)")}}.</p> + +<div class="blockIndicator note"> +<p><strong>Precaución</strong>: Aunque los operadores bit a bit se <em>pueden</em> usar para representar múltiples valores Booleanos dentro de un solo número usando el <a class="external" href="https://es.wikipedia.org/wiki/Máscara_(informática)">enmascaramiento de bits</a>, esto generalmente se considera una mala práctica. JavaScript ofrece otros medios para representar un conjunto de valores booleanos (como un arreglo de valores booleanos o un objeto con valores booleanos asignados a propiedades con nombre). El enmascaramiento de bits también tiende a hacer que el código sea más difícil de leer, comprender y mantener.</p> +</div> + +<p>Posiblemente sea necesario utilizar estas técnicas en entornos muy restringidos, como cuando se intenta hacer frente a las limitaciones del almacenamiento local, o en casos extremos (como cuando cada bit de la red cuenta). Esta técnica solo se debe considerar cuando sea la última medida que se pueda tomar para optimizar el tamaño.</p> + +<h3 id="Tipo_BigInt">Tipo <code>BigInt</code></h3> + +<p>El tipo {{jsxref("BigInt")}} es un primitivo numérico en JavaScript que puede representar números enteros con precisión arbitraria. Con <code>BigInt</code>s, puedes almacenar y operar de forma segura en números enteros grandes incluso más allá del límite seguro de enteros para <code>Number</code>s.</p> + +<p>Un <code>BigInt</code> se crea agregando <code>n</code> al final de un número entero o llamando al constructor.</p> + +<p>Puedes obtener el valor más seguro que se puede incrementar con <code>Number</code>s utilizando la constante {{jsxref("Number.MAX_SAFE_INTEGER")}}. Con la introducción de <code>BigInt</code>s, puedes operar con números más allá de {{jsxref("Number.MAX_SAFE_INTEGER")}}.</p> + +<p>Este ejemplo demuestra, dónde, incrementando el {{jsxref("Number.MAX_SAFE_INTEGER")}} devuelve el resultado esperado:</p> + +<pre class="brush: js notranslate">> const x = 2n ** 53n; +9007199254740992n +> const y = x + 1n; +9007199254740993n +</pre> + +<p>Puedes utilizar los operadores <code>+</code>, <code>*</code>, <code>-</code>, <code>**</code> y <code>%</code> con <code>BigInt</code>s, igual que con <code>Number</code>s. Un <code>BigInt</code> no es estrictamente igual a un <code>Number</code>, pero lo es en términos generales.</p> + +<p>Un <code>BigInt</code> se comporta como un <code>Number</code> en los casos en que se convierte a <code>Boolean</code>: <code>if</code>, <code>||</code>, <code>&&</code>, <code>Boolean</code>, <code>!</code>.</p> + +<p>Los <code>BigInt</code> no se pueden utilizar indistintamente con los <code>Number</code>. En su lugar, se lanzará un {{jsxref("TypeError")}}.</p> + +<h3 id="Tipo_String">Tipo <code>String</code></h3> + +<p>El tipo {{jsxref("String")}} de JavaScript se utiliza para representar datos textuales. Es un conjunto de "elementos" de valores enteros sin signo de 16 bits. Cada elemento del <code>String</code> ocupa una posición en la cadena. El primer elemento está en el índice <code>0</code>, el siguiente en el índice <code>1</code>, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene.</p> + +<p>A diferencia de algunos lenguajes de programación (tal como C), las cadenas de JavaScript son inmutables. Esto significa que una vez que se crea una cadena, no es posible modificarla.</p> + +<p>Sin embargo, todavía es posible crear otra cadena basada en una operación en la cadena original. Por ejemplo:</p> + +<ul> + <li>Una subcadena de la original seleccionando letras individuales o usando {{jsxref("String.substr()")}}.</li> + <li>Una concatenación de dos cadenas usando el operador de concatenación (<code>+</code>) o {{jsxref("String.concat()")}}.</li> +</ul> + +<h4 id="¡Ten_cuidado_de_no_convertir_a_cadenas_tu_código!">¡Ten cuidado de no "convertir a cadenas" tu código!</h4> + +<p>Puede resultar tentador utilizar cadenas para representar datos complejos. Hacer esto viene con beneficios a corto plazo:</p> + +<ul> + <li>Es fácil construir cadenas complejas con concatenación.</li> + <li>Las cadenas son fáciles de depurar (lo que ves impreso siempre es lo que está en la cadena).</li> + <li>Las cadenas son el denominador común de muchas APIs (<a href="/es/docs/Web/API/HTMLInputElement" title="HTMLInputElement">campos de entrada —<code>input</code>s—</a>, <a href="/es/docs/Storage" title="Storage">valores de almacenamiento local</a>, respuestas <a href="/es/docs/Web/API/XMLHttpRequest" title="Usa objetos XMLHttpRequest (XHR) para interactuar con servidores. Puedes recuperar datos de una URL sin tener que actualizar la página completa. Esto permite que una página web actualice solo parte de su contenido sin interrumpir lo que el usuario está haciendo."><code>XMLHttpRequest</code></a> cuando se usa <code>responseText</code>, etc.) y puede resultar tentador trabajar solo con cadenas.</li> +</ul> + +<p>Con las convenciones, es posible representar cualquier estructura de datos en una cadena. Esto no la convierte en una buena idea. Por ejemplo, con un separador, se podría emular una lista (mientras que un arreglo de JavaScript sería más adecuado). Desafortunadamente, cuando el separador se usa en uno de los elementos de la "lista", la lista se rompe. Se puede elegir un caracter de escape, etc. Todo esto requiere convenciones y crea una innecesaria carga de mantenimiento.</p> + +<p>Utiliza cadenas para datos textuales. Cuando quieras representar datos complejos, <em>procesa</em> las cadenas y usa la abstracción adecuada.</p> + +<h3 id="Tipo_Symbol">Tipo <code>Symbol</code></h3> + +<p>Un símbolo es un valor primitivo <strong>único</strong> e <strong>inmutable</strong> y se puede utilizar como clave de una propiedad de objeto (ve más abajo). En algunos lenguajes de programación, los símbolos se denominan "átomos".</p> + +<p>Para obtener más detalles, consulta {{Glossary("Symbol")}} y el contenedor de objetos {{jsxref("Symbol")}} en JavaScript.</p> + +<h2 id="Objetos">Objetos</h2> + +<p>En ciencias de la computación, un objeto es un valor en la memoria al que posiblemente hace referencia un {{Glossary("Identifier", "identificador")}}.</p> + +<h3 id="Propiedades">Propiedades</h3> + +<p>En JavaScript, los objetos se pueden ver como una colección de propiedades. Con la <a href="/es/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Object_literals">sintaxis de objeto literal</a>, se inicia un conjunto limitado de propiedades; luego se pueden agregar y eliminar propiedades. Los valores de propiedad pueden ser valores de cualquier tipo, incluidos otros objetos, lo que permite construir estructuras de datos complejas. Las propiedades se identifican mediante valores <em>clave</em>. Un valor <em>clave</em> es un valor de cadena o un símbolo.</p> + +<p>Hay dos tipos de propiedades de objeto que tienen ciertos atributos: la propiedad <em>data</em> y la propiedad <em>accessor</em>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Cada propiedad tiene <em>atributos correspondientes</em>. Los atributos, internamente los utiliza el motor JavaScript, por lo que no puedes acceder a ellos directamente. Es por eso que los atributos se enumeran entre corchetes dobles, en lugar de simples.</p> + +<p>Consulta {{jsxref("Object.defineProperty()")}} para obtener más información.</p> +</div> + +<h4 id="Propiedad_Data">Propiedad <code>Data</code></h4> + +<p>Asocia una clave con un valor y tiene los siguientes atributos:</p> + +<table class="standard-table"> + <caption>Atributos de una propiedad <code>data</code></caption> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descripción</th> + <th scope="col">Valor predeterminado</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Value]]</td> + <td>Cualquier tipo de JavaScript</td> + <td>El valor recuperado por un captador de acceso <code>get</code> a la propiedad.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Writable]]</td> + <td><code>Boolean</code></td> + <td>Si es <code>false</code>, el [[Value]] de la propiedad no se puede cambiar.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td><code>Boolean</code></td> + <td> + <p>Si es <code>true</code>, la propiedad se enumerará en bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>.<br> + Consulta también <a href="/es/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerabilidad y posesión de propiedades</a>.</p> + </td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td><code>Boolean</code></td> + <td>Si es <code>false</code>, la propiedad no se puede eliminar, no se puede cambiar a una propiedad de acceso descriptor y los atributos que no sean [[Value]] y [[Writable]] no se pueden cambiar.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Atributos obsoletos (a partir de ECMAScript 3, renombrado en ECMAScript 5)</caption> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Read-only</code></td> + <td><code>Boolean</code></td> + <td>Estado inverso del atributo ES5 [[Writable]].</td> + </tr> + <tr> + <td><code>DontEnum</code></td> + <td><code>Boolean</code></td> + <td>Estado inverso del atributo ES5 [[Enumerable]].</td> + </tr> + <tr> + <td><code>DontDelete</code></td> + <td><code>Boolean</code></td> + <td>Estado inverso del atributo ES5 [[Configurable]].</td> + </tr> + </tbody> +</table> + +<h4 id="Propiedad_Accessor">Propiedad <code>Accessor</code></h4> + +<p>Asocia una clave con una de las dos funciones de acceso (<code>get</code> y <code>set</code>) para recuperar o almacenar un valor y tiene los siguientes atributos:</p> + +<table class="standard-table"> + <caption>Atributos de una propiedad <code>accessor</code></caption> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descripción</th> + <th scope="col">Valor predeterminado</th> + </tr> + </thead> + <tbody> + <tr> + <td>[[Get]]</td> + <td>Objeto <code>Function</code> o <code>undefined</code></td> + <td>La función se llama con una lista de argumentos vacía y recupera el valor de la propiedad cada vez que se realiza un acceso al valor.<br> + Consulta también <a href="/es/docs/Web/JavaScript/Reference/Operators/get"><code>get</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Set]]</td> + <td>Objeto <code>Function</code> o <code>undefined</code></td> + <td>La función se llama con un argumento que contiene el valor asignado y se ejecuta siempre que se intenta cambiar una propiedad específica.<br> + Consulta también <a href="/es/docs/Web/JavaScript/Reference/Operators/set"><code>set</code></a>.</td> + <td><code>undefined</code></td> + </tr> + <tr> + <td>[[Enumerable]]</td> + <td><code>Boolean</code></td> + <td>Si es <code>true</code>, la propiedad se enumerará en bucles <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a>.</td> + <td><code>false</code></td> + </tr> + <tr> + <td>[[Configurable]]</td> + <td><code>Boolean</code></td> + <td>Si es <code>false</code>, la propiedad no se puede eliminar y no se puede cambiar a una propiedad de datos.</td> + <td><code>false</code></td> + </tr> + </tbody> +</table> + +<h3 id="Objetos_y_funciones_normales">Objetos y funciones "normales"</h3> + +<p>Un objeto JavaScript es una asociación entre <em>claves</em> y <em>valores</em>. Las claves son cadenas (o {{jsxref("Symbol")}}s), y los <em>valores</em> pueden ser cualquier cosa. Esto hace que los objetos se ajusten naturalmente a <a class="external" href="http://en.wikipedia.org/wiki/Hash_table"><code>hashmaps</code></a>.</p> + +<p>Las funciones son objetos regulares con la capacidad adicional de ser <em>invocables</em>.</p> + +<h3 id="Fechas">Fechas</h3> + +<p>Al representar fechas, la mejor opción es utilizar la utilidad <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code> incorporada</a> en JavaScript.</p> + +<h3 id="Colecciones_indexadas_arreglos_y_arreglos_tipados">Colecciones indexadas: arreglos y arreglos tipados</h3> + +<p><a href="/es/docs/JavaScript/Reference/Global_Objects/Array" title="Array">Los arreglos</a> son objetos regulares para los que existe una relación particular entre las propiedades de clave entera y la Propiedad <code>length</code>.</p> + +<p>Además, los arreglos heredan de <code>Array.prototype</code>, que les proporciona un puñado de convenientes métodos para manipular arreglos. Por ejemplo, <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf" title="es/JavaScript/Reference/Global_Objects/Array/indexOf"><code>indexOf</code></a> (buscando un valor en el arreglo) o <a href="/es/docs/JavaScript/Reference/Global_Objects/Array/push" title="es/JavaScript/Reference/Global_Objects/Array/push"><code>push</code></a> (agrega un elemento al arreglo), y así sucesivamente. Esto hace que el <code>Array</code> sea un candidato perfecto para representar listas o conjuntos.</p> + +<p>Los <a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos tipados</a> son nuevos en JavaScript con ECMAScript 2015 y presentan una vista similar a un arreglo de un búfer de datos binarios subyacente. La siguiente tabla ayuda a determinar los tipos de datos equivalentes en C:</p> + +<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> + +<h3 id="Colecciones_con_clave_mapas_conjuntos_WeakMaps_WeakSets">Colecciones con clave: mapas, conjuntos, <code>WeakMaps</code>, <code>WeakSets</code></h3> + +<p>Estas estructuras de datos, introducidas en ECMAScript Edition 6, toman referencias a objetos como claves. {{jsxref("Set")}} y {{jsxref("WeakSet")}} representan un conjunto de objetos, mientras que {{jsxref("Map")}} y {{jsxref("WeakMap")}} se asocian un valor a un objeto.</p> + +<p>La diferencia entre <code>Map</code>s y <code>WeakMap</code>s es que en el primero, las claves de objeto se pueden enumerar. Esto permite la optimización de la recolección de basura en el último caso.</p> + +<p>Se podrían implementar <code>Map</code>s y <code>Set</code>s en ECMAScript 5 puro. Sin embargo, dado que los objetos no se pueden comparar (en el sentido de <code><</code> "menor que", por ejemplo), el rendimiento de búsqueda sería necesariamente lineal. Las implementaciones nativas de ellos (incluidos los <code>WeakMap</code>s) pueden tener un rendimiento de búsqueda que es aproximadamente logarítmico al tiempo constante.</p> + +<p>Por lo general, para vincular datos a un nodo DOM, se pueden establecer propiedades directamente en el objeto o usar atributos <code>data-*</code>. Esto tiene la desventaja de que los datos están disponibles para cualquier script que se ejecute en el mismo contexto. Los <code>Map</code>s y <code>WeakMap</code>s facilitan la vinculación <em>privada</em> de datos a un objeto.</p> + +<h3 id="Datos_estructurados_JSON">Datos estructurados: JSON</h3> + +<p>JSON (<strong>J</strong>ava <strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation) es un formato ligero de intercambio de datos, derivado de JavaScript, pero utilizado por muchos lenguajes de programación. JSON crea estructuras de datos universales.</p> + +<p>Consulta {{Glossary("JSON")}} y {{jsxref("JSON")}} para obtener más detalles.</p> + +<h3 id="Más_objetos_en_la_biblioteca_estándar">Más objetos en la biblioteca estándar</h3> + +<p>JavaScript tiene una biblioteca estándar de objetos integrados.</p> + +<p>Échale un vistazo a la <a href="/es/docs/Web/JavaScript/Reference/Global_Objects">referencia</a> para conocer más objetos.</p> + +<h2 id="Determinación_de_tipos_usando_el_operador_typeof">Determinación de tipos usando el operador <code>typeof</code></h2> + +<p>El operador <code>typeof</code> te puede ayudar a encontrar el tipo de tu variable.</p> + +<p>Lee la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/typeof">página de referencia</a> para obtener más detalles y casos extremos.</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-ecmascript-data-types-and-values', 'Tipos Data y Values ECMAScript')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a class="link-https" href="https://github.com/nzakas/computer-science-in-javascript/">Colección de estructura de datos común y algoritmos comunes en JavaScript de Nicholas Zakas.</a></li> + <li><a href="https://github.com/monmohan/DataStructures_In_Javascript" title="https://github.com/monmohan/DataStructures_In_Javascript">Estructuras de datos implementadas en JavaScript</a></li> +</ul> diff --git a/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html b/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html new file mode 100644 index 0000000000..b61a56c1e5 --- /dev/null +++ b/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html @@ -0,0 +1,87 @@ +--- +title: Descripción de las tecnologías JavaScript +slug: Web/JavaScript/Descripción_de_las_tecnologías_JavaScript +translation_of: Web/JavaScript/JavaScript_technologies_overview +--- +<div>{{JsSidebar("Introductory")}}</div> + +<h2 id="Introducción">Introducción</h2> + +<p>Mientras que HTML define la estructura y el contenido de una página web y el CSS define el formato y la apariencia, JavaScript agrega interactividad a una página web y crea aplicaciones web enriquecidas.</p> + +<p>Sin embargo, el término paraguas "JavaScript", tal como se entiende en un contexto de navegador web, contiene varios elementos muy diferentes. Uno de ellos es el lenguaje principal (ECMAScript), otro es la colección de las APIs Web, incluyendo el DOM (Document Object Model).</p> + +<h2 id="JavaScript_el_núcleo_del_lenguaje_ECMAScript">JavaScript, el núcleo del lenguaje (ECMAScript)</h2> + +<p>EL núcleo del lenguaje JavaScript está estandarizado por el Comité ECMA TC39 como un lenguaje llamado <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. La última versión de la especificación es <a href="http://www.ecma-international.org/ecma-262/6.0/">ECMAScript 6.0</a>.</p> + +<p>Éste núcleo del lenguaje es también usado en ambientes No-Navegadores, por ejemplo en <a href="http://nodejs.org/">node.js</a>.</p> + +<h3 id="Qué_considera_ECMAScript_scope">Qué considera ECMAScript scope?</h3> + +<p>Entre otras cosas, ECMAScript define:</p> + +<ul> + <li>Sintaxis (reglas de análisis, palabras clave, flujos de control, inicialización literal de objetos...).</li> + <li>Mecanismos de control de errores (throw, try/catch, habilidad para crear tipos de Errores definidos por el usuario).</li> + <li>Tipos (boolean, number, string, function, object...).</li> + <li>Los objetos globales. En un navegador, estos objetos globales son los objetos de la ventana, pero ECMAScript solo define APIs no especificas para navegadores, ej. <code>parseInt</code>, <code>parseFloat</code>, <code>decodeURI</code>, <code>encodeURI</code>...</li> + <li>Mecanismo de herencia basada en prototipos.</li> + <li>Objetos y funciones incorporadas (<code>JSON</code>, <code>Math</code>, <code>Array.prototype</code> methods, Object introspection methods...)</li> + <li>Modo estricto.</li> +</ul> + +<h3 id="Navegadores_soportados">Navegadores soportados</h3> + +<p>A partir de Octubre del 2016, la gran mayoria de los navegadores soportan <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a> y <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 2015 aka ES6</a>, pero versiones antiguas (aún en uso) implementan ECMAScript 5 solamente.</p> + +<h3 id="Futuro">Futuro</h3> + +<p>La 6ta edición principal de ECMAScript fue oficialmente aprobada y publicada como un estándar el 17 de Junio del 2015 por la ECMA General Assembly. Desde entonces las ediciones de ECMAScript son publicadas anualmente.</p> + +<h3 id="Internacionalización_de_la_API">Internacionalización de la API</h3> + +<p>La <a href="http://ecma-international.org/ecma-402/1.0/">ECMAScript Internationalization API Specification</a> es una adición para la especificación del lenguaje ECMAScript, también estandarizada por Ecma TC39. La internacionalización de la API provee intercalación --collation-- (comparación de string), formateo de números, y fomateo de fechas/tiempo para aplicaciones JavaScript, permitiendo que las aplicaciones elijan el idioma y adapten la funcionalidad a sus necesidades. El estandar inicial fue aprobado en Diciembre del 2012; el estado de la implementación en navegadores es rastreado en la documentación de la <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Intl"><code>Intl</code> object</a>. Las especificaciones de la internacionalización son actualmente ratificadas cada año y los navegadores constantemente mejoran su implementación.</p> + +<h2 id="DOM_APIs">DOM APIs</h2> + +<h3 id="WebIDL">WebIDL</h3> + +<p>Las especificaciones de la <a href="http://www.w3.org/TR/WebIDL/">WebIDL</a> proporcionan el vínculo de las tecnologías DOM y ECMAScript.</p> + +<h3 id="El_núcleo_del_DOM">El núcleo del DOM</h3> + +<p>El Document Object Model (DOM) es una <strong>convención multiplataforma e independiente</strong> del lenguaje para representar e interactuar con objetos en documentos HTML, XHTML y XML. Los objetos en el <strong>árbol DOM</strong> se pueden abordar y manipular mediante el uso de métodos en los objetos de otras tecnologías. El {{Glossary("W3C")}} estandariza el Modelo de Objetos del Documento Central, que define interfaces independientes del lenguaje que abstraen documentos HTML y XML como objetos, y también define mecanismos para manipular esta abstracción. Entre las cosas definidas por el DOM, podemos encontrar:</p> + +<ul> + <li>La estructura del documento, un modelo de árbol, y la arquitectura de eventos DOM en el nucleo del DOM: <code>Node</code>, <code>Element</code>, <code>DocumentFragment</code>, <code>Document</code>, <code>DOMImplementation</code>, <code>Event</code>, <code>EventTarget</code>, …</li> + <li>Una definición menos rigurosa de la arquitectura de eventos DOM, así como eventos específicos en eventos DOM.</li> + <li>Otras cosas como DOM Traversal y el DOM Range.</li> +</ul> + +<p>Desde el punto de vista ECMAScript, los objetos definidos en la especificación DOM se denominan "objetos host".</p> + +<h3 id="HTML_DOM">HTML DOM</h3> + +<p>HTML, el lenguaje de marcado de la Web, se especifica en términos del DOM. Por encima de los conceptos abstractos definidos en DOM Core, HTML también define el significado de los elementos. El DOM HTML incluye cosas como el <code>className</code> propiedad en elementos HTML o API como {{domxref ("document.body")}}.</p> + +<p><span class="tlid-translation translation" lang="es"><span title="">La especificación HTML también define restricciones en los documentos;</span> <span title="">por ejemplo, requiere que todos los elementos secundarios de un elemento</span></span> <code>ul</code> <span class="tlid-translation translation" lang="es"><span title="">que representa una lista desordenada, sean elementos</span></span> <code>li</code>, <span class="tlid-translation translation" lang="es"><span title="">ya que representan elementos de la lista.</span> <span title="">En general, también prohíbe el uso de elementos y atributos que no están definidos en un estándar.</span></span></p> + +<p>¿Busca <a href="/en-US/docs/DOM/document"><code>Document</code> object</a>, <a href="/en-US/docs/DOM/window"><code>Window</code> object</a>, <span class="tlid-translation translation" lang="es"><span title="">y los otros elementos DOM?</span></span> ? Lee la documentación <a href="/en-US/docs/Web/API/Document_Object_Model">DOM documentation</a>.</p> + +<h2 id="Otras_API_notables"><span class="tlid-translation translation" lang="es"><span title="">Otras API notables</span></span></h2> + +<ul> + <li>Las funciones <code>setTimeout</code> <code>ysetInterval</code> <span class="tlid-translation translation" lang="es"><span title="">se especificaron por primera vez en la interfaz de</span></span> <code><a href="http://www.whatwg.org/html/#window">Window</a></code> <span class="tlid-translation translation" lang="es"><span title="">en HTML Standard.</span></span></li> + <li><a href="https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html">XMLHttpRequest</a> <span class="tlid-translation translation" lang="es"><span title="">hace posible enviar solicitudes HTTP asincrónicas.</span></span></li> + <li>EL <a href="http://dev.w3.org/csswg/cssom/">Modelo de Objetos CSS</a> <span class="tlid-translation translation" lang="es"><span title="">esume las reglas CSS como objetos.</span></span></li> + <li><a href="http://www.whatwg.org/specs/web-workers/current-work/">WebWorkers </a>permite el cálculo paralelo.</li> + <li><a href="http://www.whatwg.org/C/#network">WebSockets</a> <span class="tlid-translation translation" lang="es"><span title="">permite la comunicación bidireccional de bajo nivel.</span></span></li> + <li><a href="http://www.whatwg.org/html/#2dcontext">Canvas 2D Context</a> <span class="tlid-translation translation" lang="es"><span title="">es una API de dibujo para</span></span> {{htmlelement("canvas")}}.</li> +</ul> + +<h3 id="Soporte_del_navegador">Soporte del navegador</h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Como todos los desarrolladores web han experimentado</span></span>, <a href="http://ejohn.org/blog/the-dom-is-a-mess/">el DOM es un desastre</a>. <span class="tlid-translation translation" lang="es"><span title="">La uniformidad del soporte del navegador varía mucho de una característica a otra, principalmente porque muchas características DOM importantes tienen especificaciones muy poco claras (si las hay), y diferentes navegadores web agregan características incompatibles para casos de uso superpuestos (como el modelo de evento de Internet Explorer).</span> <span title="">A partir de junio de 2011, el W3C y particularmente el WHATWG están definiendo características antiguas en detalle para mejorar la interoperabilidad, y los navegadores a su vez pueden mejorar sus implementaciones basadas en estas especificaciones.</span></span></p> + +<p><span class="tlid-translation translation" lang="es"><span title="">Un enfoque común, aunque quizás no el más confiable, para la compatibilidad entre navegadores es usar bibliotecas de JavaScript, que resumen las funciones DOM y mantienen sus API funcionando igual en diferentes navegadores.</span> <span title="">Algunos de los frameworks más utilizados son</span></span> <a href="http://jquery.com/">jQuery</a>, <a href="http://www.prototypejs.org/">prototype</a>, y <a href="http://developer.yahoo.com/yui/">YUI</a>.</p> diff --git a/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html b/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html new file mode 100644 index 0000000000..fbe97185f6 --- /dev/null +++ b/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html @@ -0,0 +1,333 @@ +--- +title: Enumerabilidad y posesión de propiedades +slug: Web/JavaScript/enumeracion_y_propietario_de_propiedades +tags: + - Enumerabilidad + - Enumeración + - Guía + - JavaScript + - Propiedades +translation_of: Web/JavaScript/Enumerability_and_ownership_of_properties +--- +<div>{{JsSidebar("Más")}}</div> + +<p>Las propiedades enumerables son aquellas propiedades cuyo indicador enumerable interno se establece en <code>true</code>, que es el valor predeterminado para las propiedades creadas mediante una asignación simple o mediante un iniciador de propiedad (propiedades definidas mediante {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty")}} y tal valor enumerable predeterminado a <code>false</code>). Se muestran numerosas propiedades en bucles {{jsref("Statements/for...in", "for...in")}} a menos que la clave de la propiedad sea {{jsxref("Global_Objects/Symbol", "Symbol")}}. La posesión de las propiedades está determinada por si la propiedad pertenece directamente al objeto y no a su cadena prototipo. Las propiedades de un objeto también se pueden recuperar en total. Hay varios medios incorporados para detectar, iterar/enumerar y recuperar propiedades de objetos, y el gráfico que se muestra a continuación está disponible. A continuación, se muestra un código de muestra que demuestra cómo obtener las categorías faltantes.</p> + +<div style="overflow: auto; width: 100%;"> +<table> + <caption>Propiedad, enumerabilidad y posesión — métodos integrados de detección, recuperación e iteración</caption> + <tbody> + <tr> + <th>Funcionalidad</th> + <th>Propia del Objeto</th> + <th>Propia del Objeto y su cadena prototipo</th> + <th>Solo en cadena prototipo</th> + </tr> + <tr> + <td>Detección</td> + <td> + <table> + <thead> + <tr> + <th scope="col">Enumerable</th> + <th scope="col">No enumerable</th> + <th scope="col">Enumerable y no enumerable</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</p> + + <p>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}}</p> + </td> + <td> + <p>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}} — filtrado para excluir enumerables mediante {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</p> + </td> + <td>{{jsxref("Global_Objects/Object/hasOwnProperty", "hasOwnProperty")}}</td> + </tr> + </tbody> + </table> + </td> + <td> + <table> + <thead> + <tr> + <th scope="col">Enumerable</th> + <th scope="col">No enumerable</th> + <th scope="col">Enumerable y no enumerable</th> + </tr> + </thead> + <tbody> + <tr> + <td>No disponible sin código adicional</td> + <td>No disponible sin código adicional</td> + <td>{{jsxref("Operators/in", "in")}}</td> + </tr> + </tbody> + </table> + </td> + <td>No disponible sin código adicional</td> + </tr> + <tr> + <td>Recuperación</td> + <td> + <table> + <thead> + <tr> + <th scope="col">Enumerable</th> + <th scope="col">No enumerable</th> + <th scope="col">Enumerable y no enumerable</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{jsxref("Global_Objects/Object/keys", "Object.keys")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p> + </td> + <td>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}, {{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}} — filtrado para excluir enumerables usando {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</td> + <td> + <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p> + </td> + </tr> + </tbody> + </table> + </td> + <td>No disponible sin código adicional</td> + <td>No disponible sin código adicional</td> + </tr> + <tr> + <td>Iterable</td> + <td> + <table> + <thead> + <tr> + <th scope="col">Enumerable</th> + <th scope="col">No enumerable</th> + <th scope="col">Enumerable y no enumerable</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{jsxref("Global_Objects/Object/keys", "Object.keys")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p> + </td> + <td>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}, {{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}} — filtrado para excluir enumerables usando {{jsxref("Global_Objects/Object/propertyIsEnumerable", "propertyIsEnumerable")}}</td> + <td> + <p>{{jsxref("Global_Objects/Object/getOwnPropertyNames", "getOwnPropertyNames")}}</p> + + <p>{{jsxref("Global_Objects/Object/getOwnPropertySymbols", "getOwnPropertySymbols")}}</p> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table> + <thead> + <tr> + <th scope="col">Enumerable</th> + <th scope="col">No enumerable</th> + <th scope="col">Enumerable y no enumerable</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{jsxref("Statements/for...in", "for..in")}}</p> + + <p>(no incluye símbolos)</p> + </td> + <td>No disponible sin código adicional</td> + <td>No disponible sin código adicional</td> + </tr> + </tbody> + </table> + </td> + <td>No disponible sin código adicional</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Obtención_de_propiedades_por_enumerabilidadposesión">Obtención de propiedades por enumerabilidad/posesión</h2> + +<p>Ten en cuenta que este no es el algoritmo más eficiente para todos los casos, pero es útil para una demostración rápida.</p> + +<ul> + <li>La detección puede ocurrir por <code>SimplePropertyRetriever.theGetMethodYouWant(obj).indexOf(prop) > -1</code></li> + <li>La iteración puede ocurrir por <code>SimplePropertyRetriever.theGetMethodYouWant(obj).forEach(function (value, prop) {});</code> (o usa <code>filter()</code>, <code>map()</code>, etc.)</li> +</ul> + +<pre class="brush: js notranslate">var SimplePropertyRetriever = { + getOwnEnumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerable); + // O podrías usar for..in filtrado con hasOwnProperty o simplemente esto: return Object.keys(obj); + }, + getOwnNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._notEnumerable); + }, + getOwnEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, false, this._enumerableAndNotEnumerable); + // O simplemente usa: return Object.getOwnPropertyNames(obj); + }, + getPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerable); + }, + getPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._notEnumerable); + }, + getPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, false, true, this._enumerableAndNotEnumerable); + }, + getOwnAndPrototypeEnumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerable); + // O podrías usar "for..in" sin filtrar + }, + getOwnAndPrototypeNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._notEnumerable); + }, + getOwnAndPrototypeEnumerablesAndNonenumerables: function(obj) { + return this._getPropertyNames(obj, true, true, this._enumerableAndNotEnumerable); + }, + // Retrollamada del supervisor de propiedad estática privada + _enumerable: function(obj, prop) { + return obj.propertyIsEnumerable(prop); + }, + _notEnumerable: function(obj, prop) { + return !obj.propertyIsEnumerable(prop); + }, + _enumerableAndNotEnumerable: function(obj, prop) { + return true; + }, + // Inspirado en http://stackoverflow.com/a/8024294/271577 + _getPropertyNames: function getAllPropertyNames(obj, iterateSelfBool, iteratePrototypeBool, includePropCb) { + var props = []; + + do { + if (iterateSelfBool) { + Object.getOwnPropertyNames(obj).forEach(function(prop) { + if (props.indexOf(prop) === -1 && includePropCb(obj, prop)) { + props.push(prop); + } + }); + } + if (!iteratePrototypeBool) { + break; + } + iterateSelfBool = true; + } while (obj = Object.getPrototypeOf(obj)); + + return props; + } +};</pre> + +<h2 id="Tabla_de_detección">Tabla de detección</h2> + +<div style="overflow: auto; width: 100%;"> +<table> + <thead> + <tr> + <th scope="row"></th> + <th scope="col"><code>in</code></th> + <th scope="col"><code>for..in</code></th> + <th scope="col"><code>obj.hasOwnProperty</code></th> + <th scope="col"><code>obj.propertyIsEnumerable</code></th> + <th scope="col"><code>Object.keys</code></th> + <th scope="col"><code>Object.getOwnPropertyNames</code></th> + <th scope="col"><code>Object.getOwnPropertyDescriptors</code></th> + <th scope="col"><code>Reflect.ownKeys()</code></th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Enumerable</th> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + <td>true</td> + </tr> + <tr> + <th scope="row">No enumerable</th> + <td>true</td> + <td>false</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>true</td> + <td>true</td> + <td>true</td> + </tr> + <tr> + <th scope="row">Símbolos clave</th> + <td>true</td> + <td>false</td> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>true</td> + <td>true</td> + </tr> + <tr> + <th scope="row">Enumerable heredado</th> + <td>true</td> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th scope="row">Heredado no enumerable</th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + <tr> + <th scope="row">Símbolos clave heredados</th> + <td>true</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + <td>false</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Operators/in", "in")}}</li> + <li>{{jsxref("Statements/for...in", "for..in")}}</li> + <li>{{jsxref("Object.hasOwnProperty()")}}</li> + <li>{{jsxref("Object.propertyIsEnumerable()")}}</li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.keys()")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptors()")}}</li> +</ul> diff --git a/files/es/web/javascript/equality_comparisons_and_sameness/index.html b/files/es/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..f4928d5611 --- /dev/null +++ b/files/es/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,487 @@ +--- +title: Comparadores de igualdad e identidad +slug: Web/JavaScript/Equality_comparisons_and_sameness +tags: + - Comparación + - Identidad + - Intermedio + - JavaScript + - SameValue + - SameValueZero + - igualdad +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +--- +<div>{{jsSidebar("Intermediate")}}</div> + +<div class="summary"> +<p>Existen cuatro algoritmos de igualdad en ES2015:</p> + +<ul> + <li>Comparación de Igualdad Abstracta (<code>==</code>)</li> + <li>Comparación de Igualdad Estricta (<code>===</code>): utilizada por <code>Array.prototype.indexOf</code>, <code>Array.prototype.lastIndexOf</code>, y <code>case</code>-matching</li> + <li>SameValueZero: utilizado por los constructores de <code>%TypedArray%</code> y <code>ArrayBuffer</code>, así como por las operaciones <code>Map</code> y <code>Set</code>, y también por <code>String.prototype.includes</code> y <code>Array.prototype.includes</code> desde ES2016</li> + <li>SameValue: utilizado en el resto de los casos</li> +</ul> + +<p>JavaScript proporciona tres operaciones distintas para comparar la igualdad de dos elementos:</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">===</a> - Igualdad estricta (o "triple igual" o "identidad")</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">==</a> - igualdad débil o relajada ("doble igual")</li> + <li>{{jsxref("Object.is")}} proporciona SameValue (nuevo en ES2015).</li> +</ul> + +<p>Elegir una u otra operación depende del tipo de comparación que se esté buscando realizar.</p> +</div> + +<p>Explicándolo de manera concisa, un doble igual lleva a cabo una conversión de tipo (cast) cuando se comparan dos cosas; el triple igual hace lo mismo pero sin realizar ninguna conversión de tipo (cast) (simplemente devuelve falso si los tipos de los elementos a comparar son diferentes); Y Object.is funciona de la misma manera que el triple igual pero hace una gestión especial de NaN, -0 y +0 de tal manera que los dos últimos no son iguales mientras que Object.is(NaN, NaN) nos devolverá <code>true</code>. (Si comparamos NaN con NaN de manera ordinaria , por ejemplo usando el doble igual o el triple igual, nos devolverá <code>false</code>, ya que la especificación IEEE 754 así lo dice). Hay que darse cuenta de que la distinción entre todas estas posibilidades tiene que ver con como se manejan los tipos primitivos; ninguna de ellas compara si los parámetros son similares en relación a su estructura. Para comparar dos objectos no primitivos , x e y, que tengan la misma estructura pero que sean objetos diferentes entre ellos, todos los casos anteriormente descritos devolverán false.</p> + + + +<h2 id="Igualdad_Estricta_usando">Igualdad Estricta usando <code>===</code></h2> + + + +<p>El operador igualdad estricta compara la igualdad de dos valores. Ninguno de estos valores se convierte de manera implícita antes de ser comparado. Si los valores tienen tipos diferentes son considerados diferentes. Por el contrario, si los valores tienen el mismo tipo y no son números, son considerados iguales si tienen el mismo valor. Finalmente, si ambos valores son números, son considerados iguales si ambos no son NaN y tienen el mismo valor, o si uno es +0 y otro -0.</p> + + + +<pre class="brush: js">var num = 0; +var obj = new String("0"); +var str = "0"; +var b = false; + +console.log(num === num); // true +console.log(obj === obj); // true +console.log(str === str); // true + +console.log(num === obj); // false +console.log(num === str); // false +console.log(obj === str); // false +console.log(null === undefined); // false +console.log(obj === null); // false +console.log(obj === undefined); // false +</pre> + + + +<p>La igualdad estricta es casi siempre el operador igualdad más adecuado. Para todos los valores, excepto para los números, utiliza la semántica obvia: un valor sólo es igual así mismo. Para número usa una semántica ligeramente diferente para paliar dos casos límites diferentes. El primero es que usando número en coma flotante el cero puede ser positivo o negativo. Esto es útil para representar ciertas soluciones matemáticas, pero en la mayoría de las situaciones no nos importa esa diferencia entre +0 y -0. La igualdad estricta los trata como un únicomvalor. El segundo caso tiene que ver con que los número en coma flotante incluyen el concepto NaN (Not a Number) como un posible valor para representar la solución a ciertos problemas matemáticos mal definidos, por ejemplo la adición de un infinito negativo a un infinito positivo. La igualdad estricta trata NaN como desigual con cualquier otro valore -- incluyendo a sí mismo. (El único caso en el que x !== x es verdades en cuando x is NaN).</p> + +<h2 id="Igualdad_débil_usando">Igualdad débil usando ==</h2> + +<p>El operador igualdad débil compara la igualdad de dos valores después de convertir ambos valores a un tipo de datos común. Tras la conversión , la comparación que se lleva a cabo funciona exactamente como ===. La igual débil es una igualdad simétrica: A == B tiene una semática idéntica a B == A para cualquier valor que tengan A y B ( excepto por el orden de las .conversiones de tipo aplicadas)</p> + + + +<p>Para los operandos de varios tipos funciona de la siguiente manera:</p> + + + +<table class="standard-table"> + <thead> + <tr> + <th scope="row"></th> + <th colspan="7" scope="col" style="text-align: center;">Operando B</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row"></th> + <td></td> + <td style="text-align: center;">Undefined</td> + <td style="text-align: center;">Null</td> + <td style="text-align: center;">Number</td> + <td style="text-align: center;">String</td> + <td style="text-align: center;">Boolean</td> + <td style="text-align: center;">Object</td> + </tr> + <tr> + <th colspan="1" rowspan="6" scope="row">Operando A</th> + <td>Undefined</td> + <td style="text-align: center;"><code>true</code></td> + <td style="text-align: center;"><code>true</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + </tr> + <tr> + <td>Null</td> + <td style="text-align: center;"><code>true</code></td> + <td style="text-align: center;"><code>true</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + </tr> + <tr> + <td>Number</td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>A === B</code></td> + <td style="text-align: center;"><code>A === ToNumber(B)</code></td> + <td style="text-align: center;"><code>A === ToNumber(B)</code></td> + <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> + </tr> + <tr> + <td>String</td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>ToNumber(A) === B</code></td> + <td style="text-align: center;"><code>A === B</code></td> + <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> + <td style="text-align: center;"><code>A == ToPrimitive(B)</code></td> + </tr> + <tr> + <td>Boolean</td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>ToNumber(A) === B</code></td> + <td style="text-align: center;"><code>ToNumber(A) === ToNumber(B)</code></td> + <td style="text-align: center;"><code>A === B</code></td> + <td style="text-align: center;"><code>ToNumber(A) == ToPrimitive(B)</code></td> + </tr> + <tr> + <td>Object</td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>false</code></td> + <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> + <td style="text-align: center;"><code>ToPrimitive(A) == B</code></td> + <td style="text-align: center;"><code>ToPrimitive(A) == ToNumber(B)</code></td> + <td style="text-align: center;"><code>A === B</code></td> + </tr> + </tbody> +</table> + +<p>En la tabla previa, <code>ToNumber(A)</code> intenta convertir su argumento a número antes de realizar la compración. Su comportamiento es equivalente a <code>+A</code> (el operador unario +). <code>ToPrimitive(A)</code> intenta convertir su objeto argumento a un valor de tipo primitivo realizando varias secuencias de invocaciones <code>A.toString</code> y <code>A.valueOf</code> en <code>A</code>.</p> + +<p>Tradicionalmente, y de acuerdo con la especificación ECMAScript, todos los objetos son débilmente desiguales comparándolos con <code>undefined</code> y<code> null</code>. Pero algunos nevegadores permiten que una cantidad muy limitada de <code>clases</code> de objetos (especifícamente , el objeto <code>documento.all</code> para todas las páginas), en algunos contextos, puedan actuar como si <em>emularan</em> el valor <code>undefined</code>. En ese contexto se evalúa como verdadero las igualdades débiles null == A y undefined == A, sí y sólo sí, A es un objecto que emula <code>undefined</code>. En cualquier otro caso la igual débil no será verdadera con <code>undefined</code> o <code>null</code>.</p> + + + +<pre class="brush: js">var num = 0; +var obj = new String("0"); +var str = "0"; +var b = false; + +console.log(num == num); // true +console.log(obj == obj); // true +console.log(str == str); // true + +console.log(num == obj); // true +console.log(num == str); // true +console.log(obj == str); // true +console.log(null == undefined); // true + +// both false, except in rare cases +console.log(obj == null); +console.log(obj == undefined); +</pre> + + + +<p>Algunos desarrolladores consideran que nunca es una buena idea usar este tipo de igualdad, la igualdad débil. El resultado cuando se usa la igualdad estricta es más fácil de predecir y , como no hay coerción de tipos durante la evaluación, es con casi total seguridad más rápida.</p> + + + +<h2 id="Igualdad_Same-value">Igualdad Same-value</h2> + + + +<p>La igualdad Same-value se encarga de un último caso de uso: determinar si dos valores son <em>funcionalmente idénticos</em> en todos los contextos. (Este caso de uso es un caso de ejemplo del <a href="http://en.wikipedia.org/wiki/Liskov_substitution_principle" title="http://en.wikipedia.org/wiki/Liskov_substitution_principle">Liskov substitution principle</a>.) Un ejemplo de esto ocurre cuando se intenta hacer mutable una propiedad inmutable.</p> + + + +<pre class="brush: js">// Add an immutable NEGATIVE_ZERO property to the Number constructor. +Object.defineProperty(Number, "NEGATIVE_ZERO", + { value: -0, writable: false, configurable: false, enumerable: false }); + +function attemptMutation(v) +{ + Object.defineProperty(Number, "NEGATIVE_ZERO", { value: v }); +} +</pre> + + + +<p><code>Object.defineProperty</code> que lanzará una excepción cuando se intente cambiar una propiedad inmutable la cambiará, pero no hará nada si al solicitar el cambio actual . Si v es -0, no ha sido solicitado ningún cambio y no se lanzará ningún error. Pero si v es +0, <code>Number</code> . NEGATIVE_ZERO no tendrá más su valor inmutalbe. Internamente, al redefinir una propiedad inmutbale, el nuevo valor se compara con el valor actual usando la igualdad same-value.</p> + + + +<p>El método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> nos proporciona la igualdad same-value.</p> + + + +<h2 id="Igualdad_Same-value-zero">Igualdad Same-value-zero</h2> + +<p>Similar a la igualdad same-value, pero +0 y -0 son considerados iguales.</p> + + + +<h2 id="Igualdad_abstracta_igualdad_estricta_e_igualdad_same_value_en_la_especificación.">Igualdad abstracta, igualdad estricta e igualdad same value en la especificación.</h2> + + + +<p>En la especificación ES5, la comparación<code> </code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>== </code></a><code>queda descrita en</code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code> </code></a><a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Section 11.9.3, The Abstract Equality Algorithm</a>. La comparación <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>=== </code></a>en <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, The Strict Equality Algorithm</a>. (Búscala y leela, son breves y fáciles de leer. Nota: lee el algoritmo de la igualdad estricta primero.) ES5 también describe, en <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Section 9.12, The SameValue Algorithm </a>para uso interno del motor JS. Es, en su mayoría igual que el algoritmo de igualdad estricto, excepto porque 11.9..6.4 y 9.12.4 difieren en cómo tratar los <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Numbers. </code></a><code>ES2015 simplemente propone exponer este algoritmo mediante el uso de </code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>.</p> + +<p>Podemos ver con el igual doble y el triple que, con la excepción de hacer con antelación una comprobación de tipo en 11.9.6.1, el algorimto de igualdad estricta es un subconjunto del algorimot de igualdad abstracta porque 11.9.6.2-7 se corresponde con 11.9.3.1a-f.</p> + + + +<h2 id="¿_Un_modelo_para_comprender_las_comparacions_de_igualdad">¿ Un modelo para comprender las comparacions de igualdad?</h2> + + + +<p>Antes de ES2015, podíamos haber dicho sobre el igual doble y el igual triple que uno es una versión mejoradad del otro. Por ejemplo, alguien podría decir que el igual doble es una versión extendida del igual triple ya que el primero hace todo lo que hace el segundo pero añadiendo la conversión de operadores. Por ejemplo 6 == "6". (De manera alternativa alguien podría decir que el igual doble es la base y que el igual triple es una versión mejorada, ya que requiere que los dos operadores sean del mismo tipo y, por lo tanto, añade una restricción adicional. Qué afirmación es mejor para entender el modelo depende en tu punto de vista).</p> + +<p>Sin embargo. esta manera de pensar sobre los operadores de igualdad proporcionados de manera nativa no es un modelo en el que podamos encuadrar la versión ES2015<code> de </code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is. Object.is </code></a>no es simplemente más débil que el doble igual o más estricto que el triple igual, ni tampoco ocupa un lugar intermedio (por ejemplo siendo a la vez más estricto que el igual doble y más débil que el igual triple). Podemos ver en la tabla inferior que esto se debe a la manera en la que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>maneja <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Fíjate que si <code>Object.is(Nan, Nan)</code> evaluara a falso podríamos decir que que se encuadra dentro de la escala débil /estricta como algo más estricto que el triple igual, como un operador que distigue entre +0 y -0. Sin embargo en el manejo de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN </code></a>esto no es cierto. Simplemente debemos considerar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>en términos de sus características específicas y no en relación a su debilidad o rigidez dentro del especto de los operadores de igualdad.</p> + + + +<table class="standard-table"> + <caption>Comparadores de Igualdad</caption> + <thead> + <tr> + <th scope="col" style="text-align: center;">x</th> + <th scope="col" style="text-align: center;">y</th> + <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>undefined</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>true</code></td> + <td><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>"foo"</code></td> + <td><code>"foo"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>{ foo: "bar" }</code></td> + <td><code>x</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>+0</code></td> + <td><code>-0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"0"</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"17"</code></td> + <td><code>17</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>[1,2]</code></td> + <td><code>"1,2"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("foo")</code></td> + <td><code>"foo"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>undefined</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>{ foo: "bar" }</code></td> + <td><code>{ foo: "bar" }</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("foo")</code></td> + <td><code>new String("foo")</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"foo"</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>NaN</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + </tbody> +</table> + + + +<h2 id="Cuando_usar_Object.is_o_el_igual_triple">Cuando usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> o el igual triple</h2> + +<p>Además de como trata <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, generalmente, la única vez en la que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> posee un comportamiento especial hacia los ceros puede resultar de interés para usar ciertos esquemas de meta-programación, sobre todo en relación a los descriptores de porpiedades cuando es deseable que nuestro trabajo replique algunas de las características de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. Si en tu situación no requiere de esto, lo mejor es evitar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is </code></a>y usar <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===. </code></a>Incluso si entre tus requisitos está poseer que la comparación entre dos valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code>sea verdadera, generalmente es más fácil hacer un caso especial para ello (usando el método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN </code></a>que está disponible en versiones previas de ECMAScript) que calcular cómo la operaciones van afectar a los posibles signos de los valores cero en tu comparación.</p> + + + +<p>Aquí podemos ver una lista exhaustiva de los método y operadores nativos que pueden distinguir entre -0 y +0 en tu código:</p> + + + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (unary negation)</code></a></dt> +</dl> + +<dl> + <dd> + <p>Obviamente negar 0 genera -0. <code>Pero al abstracción de una expresión puede causar que un valor -0 se cuele sin darte cuenta</code> Consideremos el siguiente ejemplo:</p> + + <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre> + + <p>Si o<code>bj.velocity</code> is <code>0</code> (o se calcula como <code>0</code>), se inserta<code>-0 </code>en ese lugar y este valor se propaga a<code> </code><code>stoppingForce</code>.</p> + </dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt> +</dl> + +<dl> + <dd>Se puede introducir un -0 dentro de una expresión como valor de retorno en estos método, incluso cuando -0 no sea uno de los parámetros. Por ejemplo usando <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> para elevar <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> a cualquier potencia negativa, los exponentes impares se evaluarán como -0. Consulta la documentación para más detalles sobre cada uno de los métodos.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt> +</dl> + +<dl> + <dd><code>Es posible obtener, en algunos casos, -0 como valor de retorno de estos métodos cuando -0 sea uno de los parámetros Por ejemplo </code>Math.min(-0,+0) devuelve -0. Consulta la documentación para más detalles sobre cada uno de los métodos.</dd> +</dl> + +<dl> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><<</a></code></dt> + <dt><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">>></a></code></dt> + <dd>Cada uno de estos operadores usa el algoritmo ToInt32 de manera interna. Como sólo hay un representacion de 0 para el intero de 32-bit interno. -0 no sobrevivirá a la operación inversa. Por ejemplo Object.is(~~(-0), -0) y Object.is(-0 << 2 >> 2, -0) devolverán false.</dd> +</dl> + +<p>Confiar en <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> cuando no hay que tener en cuenta el signo de los ceros puede ser peligroso. Por supuesto para el caso contrario hará exactamente lo deseado.</p> + +<h2 id="Ver_además">Ver además</h2> + +<ul> + <li><a href="http://dorey.github.io/JavaScript-Equality-Table/">JS Comparison Table</a></li> +</ul> diff --git a/files/es/web/javascript/eventloop/index.html b/files/es/web/javascript/eventloop/index.html new file mode 100644 index 0000000000..b8b82ee16d --- /dev/null +++ b/files/es/web/javascript/eventloop/index.html @@ -0,0 +1,110 @@ +--- +title: Modelo de concurrencia y loop de eventos +slug: Web/JavaScript/EventLoop +tags: + - Avanzado + - JavaScript +translation_of: Web/JavaScript/EventLoop +--- +<div>{{JsSidebar("Advanced")}}</div> + +<div>JavaScript poseé un modelo de concurrencia basado en un "loop de eventos". Este modelo es bastante diferente al modelo de otros lenguajes como C o Java.</div> + +<div> </div> + +<h2 id="Conceptos_de_un_programa_en_ejecución">Conceptos de un programa en ejecución</h2> + +<p>Las siguientes secciones explican un modelo teórico. Los motores modernos de JavaScript implementan y optimizan fuertemente la semántica descrita a continuación.</p> + +<h3 id="Representación_visual">Representación visual</h3> + +<p style="text-align: center;"><img alt="Stack, heap, queue" src="/files/4617/default.svg" style="height: 270px; width: 294px;"></p> + +<h3 id="Pila_(Stack)">Pila (Stack)</h3> + +<p>Las llamadas a función forman una pila de <em>frames.</em> Un frame encapsula información como el contexto y las variables locales de una función.</p> + +<pre class="brush: js">function f(b){ + var a = 12; + return a+b+35; +} + +function g(x){ + var m = 4; + return f(m*x); +} + +g(21); +</pre> + +<p>Cuando se llama a <code>g</code>, un primer frame es creado, el cual contiene <code>g</code> argumentos y variables locales. Cuando <code>g</code> llama a <code>f</code>, un segundo frame es creado y colocado encima del primero, con <code>f</code> argumentos y variables locales. Cuando <code>f</code> termina de ejecutarse, el último frame (en este caso <code>f</code>) es sacado de la pila (déjando solo el frame de <code>g</code>). Cuando <code>g</code> termina de ejecutarse, la pila está vacía.</p> + +<h3 id="Montículo_(Heap)">Montículo (Heap)</h3> + +<p>Los objetos son colocados en un montículo, el cual, como su nombre lo dice, denota una gran región de memoria, mayormente sin estructura u orden.</p> + +<h3 id="Cola_(Queue)">Cola (Queue)</h3> + +<p>Un programa en ejecución en JavaScript contiene una cola de mensajes, la cual es una lista de mensajes a ser procesados. Cada mensaje se asocia con una función. Cuando la pila está vacía, un mensaje es sacado de la cola y procesado. Procesar un mensaje consiste en llamar a la función asociada al mensaje (y por ende crear una frame en la pila). El mensaje procesado termina cuando la pila está vacía de nuevo.</p> + +<h2 id="Loop_de_eventos">Loop de eventos</h2> + +<p>El <code>loop de eventos</code> obtiene su nombre por la forma en que es usualmente implementado, la cual generalmente se parece a:</p> + +<pre class="brush: js">while(queue.waitForMessage()){ + queue.processNextMessage(); +}</pre> + +<p><code>queue.waitForMessage</code> espera de manera síncrona a que llegue un mensaje si no hay ninguno actualmente.</p> + +<h3 id="Ejecutar-hasta-completar">"Ejecutar-hasta-completar"</h3> + +<p>Cada mensaje es procesado completamente antes que cualquier otro mensaje sea procesado. Esto ofrece algunas propiedades convenientes al momento de pensar en un programa, incluido el hecho de que cada vez que una función se ejecuta, ésta no puede ser terminada y se ejecutará totalmente antes de que cualquier otro código se ejecute (y de este modo pueda modificar la información que la función manipula). Esto es diferente de C, por ejemplo, donde si una función se ejecuta en un hilo, esta puede ser detenida en cualquier punto para ejecutar código en otro hilo.</p> + +<p>Una desventaja de este modelo es que, si un mensaje toma mucho tiempo en completarse, la aplicación es incapaz de procesar las interacciones de usuario, tales como clicks o scrolling. El navegador mitiga esta desventaja con el mensaje "un script esta tomando mucho tiempo en ejecutarse". Una buena práctica es hacer que el procesamiento del mensaje sea corto y, si es posible, dividir une mensaje en varios más.</p> + +<h3 id="Añadiendo_mensajes">Añadiendo mensajes</h3> + +<p>En los navegadores web, los mensajes son añadidos cada vez que un evento ocurre y hay un escuchador de eventos asociado a él. Si no hay un escuchador, el evento se pierde. De este modo, al hacer click en un elemento con un manejador de eventos tipo click, se añadirá un mensaje. Lo mismo sucede en otros tipos de eventos.</p> + +<p>Al llamar <code><a href="/en-US/docs/Web/API/WindowTimers.setTimeout" title="/en-US/docs/window.setTimeout">setTimeout</a></code> se añadirá un mensaje a la cola después de el tiempo especificado como segundo parámetro. Si no hay ningún otro mensaje en la cola, el mensaje es procesado en el momento; sin embargo, si hay mensajes en la cola, el mensaje de <code>setTimeout </code>tendrá que esperar a que los otros mensajes sean procesados. Por esta razón el segundo parámetro indica el tiempo mínimo tiempo esperado y no es una garantía.</p> + +<h3 id="Cero_retraso">Cero retraso</h3> + +<p>Cero retraso no significa que una llamada a una función (call back) se disparará después de cero milisegundos. Al llamar {{domxref("WindowTimers.setTimeout", "setTimeout")}} con un retraso de 0 (cero) milisegundos, no se ejecuta la llamada de la función después de el intervado dado. La ejecución depende del número de tareas en espera en la cola. En el ejemplo de abajo el mensaje "this is just a message" será escrito en la terminal antes de que el mensaje de la llamada a la función sea procesado, esto es por que el retraso es el tiempo mínimo requerido para que el programa procese la petición, pero no es un tiempo garantizado.</p> + +<pre class="brush: js">(function () { + + console.log('this is the start'); + + setTimeout(function cb() { + console.log('this is a msg from call back'); + }); + + console.log('this is just a message'); + + setTimeout(function cb1() { + console.log('this is a msg from call back1'); + }, 0); + + console.log('this is the end'); + +})(); + +// "this is the start" +// "this is just a message" +// "this is the end" +// cabe notar que la función retorna en este punto (undefined) +// "this is a msg from call back" +// "this is a msg from call back1" +</pre> + +<h3 id="Varios_programas_comunicandose_al_mismo_tiempo">Varios programas comunicandose al mismo tiempo</h3> + +<p>Un web worker o cross-origin <code>iframe</code> tiene su propia pila, montículo y cola de mensajes. Dos programas diferentes solo se pueden comunicar enviando mensajes a través del método <code><a href="/en-US/docs/DOM/window.postMessage" title="/en-US/docs/DOM/window.postMessage">postMessage</a></code>. Este método añade un mensaje al otro programa si éste último escucha eventos de tipo <code>message</code>.</p> + +<h2 id="Nunca_se_interrumpe">Nunca se interrumpe</h2> + +<p>Una propiedad muy interesante del modelo de loop de eventos es que JavaScript, a diferencia de otros lenguajes, nunca interrumpe otros programas en ejecución. Manejar operaciones de I/O (entrada/salida) es normalmente hecho a través de eventos y llamadas a función, de modo que cuando la aplicación, por ejemplo, está esperando por el retorno de una consulta <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" title="/en-US/docs/IndexedDB">IndexedDB</a> o una petición <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest">XHR</a>, ésta puede continuar procesando otras cosas como interacciones con el usuario (e.g. clicks).</p> + +<p>Excepciones a esta regla existe en versiones anteriores del lenguaje, tales como <code>alert</code> o XHR síncrono, pero es considerada una buena práctica evitar su uso. Finalmente, hay que estar conscientes que hay <a href="http://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311">excepciones</a> a las excepciones (pero son usualmente errores de implementación mas que otra cosa).</p> diff --git a/files/es/web/javascript/gestion_de_memoria/index.html b/files/es/web/javascript/gestion_de_memoria/index.html new file mode 100644 index 0000000000..3e2a47287f --- /dev/null +++ b/files/es/web/javascript/gestion_de_memoria/index.html @@ -0,0 +1,204 @@ +--- +title: Gestión de Memoria +slug: Web/JavaScript/Gestion_de_Memoria +tags: + - Advanced + - JavaScript + - Performance + - Reference + - Referencia + - Rendimiento + - memoria +translation_of: Web/JavaScript/Memory_Management +--- +<div>{{JsSidebar("Advanced")}}</div> + +<h2 id="Introducción">Introducción</h2> + +<p>Los lenguajes de bajo nivel, como C, tienen primitivos de bajo nivel como <code>malloc() </code>y <code>free() </code>para la gestión de memoria. Por otro lado, para los valores en JavaScript se reserva memoria cuando"cosas" (objetos, strings, etc.) son creados y "automáticamente" liberados cuando ya no son utilizados. El proceso anterior es conocido como <em>Recolección de basura (garbage collection). </em>Su forma "automática" es fuente de confusión, y da la impresión a los desarrolladores de JavaScript (y de otros lenguajes de alto nivel) de poder ignorar el proceso de gestión de memoria. Esto es erróneo. </p> + +<h2 id="Ciclo_de_vida_de_memoria">Ciclo de vida de memoria</h2> + +<p>Sin importar el lenguaje de programación, el ciclo de memoria es casi siempre parecido al siguiente:</p> + +<ol> + <li>Reservar la memoria necesaria</li> + <li>Utilizarla (lectura, escritura)</li> + <li>Liberar la memoria una vez ya no es necesaria.</li> +</ol> + +<p>El primer y el segundo paso son explícitos en todos los lenguajes. El último paso es explícito en lenguajes de bajo nivel, pero es mayormente implícito en lenguajes de alto nivel como JavaScript</p> + +<h3 id="Reserva_de_memoria_en_JavaScript">Reserva de memoria en JavaScript</h3> + +<h4 id="Inicialización_de_valores">Inicialización de valores</h4> + +<p>Para no agobiar al programador con reservas de memoria, JavaScript las realiza al mismo tiempo que la declaración de los valores.</p> + +<pre class="brush: js">var n = 123; // reserva memoria para un número +var s = "azerty"; // reserva memoria para un string + +var o = { + a: 1, + b: null +}; // reserva memoria para un objeto y los valores que + // contiene + +// (similar a objeto) reserva memoria para el arreglo y +// los valores que contiene +var a = [1, null, "abra"]; + +function f(a){ + return a + 2; +} // reserva memoria para una funcion (la cual es un objeto) + +// las expresiones de función tambien reservan memoria para un objeto +someElement.addEventListener('click', function(){ + someElement.style.backgroundColor = 'blue'; +}, false); +</pre> + +<h4 id="Reserva_de_memoria_al_llamar_una_función">Reserva de memoria al llamar una función</h4> + +<p>En ocasiones al llamar a una función se reserva memoria para un objeto.</p> + +<pre class="brush: js">var d = new Date(); +// reserva memoria para un elemento del DOM +var e = document.createElement('div'); +</pre> + +<p>Algunos métodos reservan memoria para nuevos valores u objetos:</p> + +<pre class="brush: js">var s = "azerty"; +var s2 = s.substr(0, 3); // s2 es un nuevo string +// Como los strings son valores inmutables, +// JavaScript puede NO reservar memoria para este, +// y solo almacenar el rango [0, 3]. + +var a = ["ouais ouais", "nan nan"]; +var a2 = ["generation", "nan nan"]; +var a3 = a.concat(a2); +// nuevo arreglo con 4 elementos resultado de +// concatenar los elementos de a y a2 +</pre> + +<h3 id="Usando_valores">Usando valores</h3> + +<p>Usar un valor es simplemente leerlo o escribirlo en memoria reservada. Esto puede ocurrir al leer o escribir el valor de una variable o de una propiedad de un objeto, inclusive pasando un argumento a una función.</p> + +<h3 id="Liberar_la_memoria_cuando_ya_no_es_necesaria">Liberar la memoria cuando ya no es necesaria</h3> + +<p>En este punto ocurren la mayoria de los inconvenientes con la gestión de memoria. Lo más díficil es encontrar el cuándo la "memoria ya no es necesaria". En algunas ocasiones, es necesario que el desarrollador determine en qué parte de un programa esa parte de memoria ya no es necesaria y la libere.</p> + +<p>Los lenguajes de alto nivel incluyen una herramienta de software conocida como "recolector de basura" <em>(garbage collector), </em>cuya función es rastrear las reservas de memoria y su utilización, para así encontrar cuándo cierta parte de la memoria ya no es necesaria, y en su momento liberarla automáticamente. Este proceso es sólo una aproximación al problema general de saber cuándo una parte de la memoria ya no es necesaria, ya que éste es <a href="http://es.wikipedia.org/wiki/Problema_indecidible">indecidible</a> (no puede ser resuelto por un algoritmo).</p> + +<h2 id="Recolección_de_basura_(Garbage_collection)">Recolección de basura (Garbage collection)</h2> + +<p>Como antes se mencionaba el problema general de encontrar automáticamente cuando la memoria "ya no es necesaria" es indecidible. Como consecuencia, las recolecciones de basura implementan sólo una restricción a la solución del problema general. En esta sección se explicarán las nociones necesarias para entender los principales algoritmos de recolección de basura y sus limitaciones.</p> + +<h3 id="Referencias">Referencias</h3> + +<p>La noción principal de los algoritmos de recolección se basan en la noción de <em>referencia</em>. Dentro del contexto de gestión de memoria, se dice que un objeto hace referencia a otro si el primero tiene acceso al segundo (ya sea de forma implícita o explícita). Por ejemplo, un objeto de JavaScript guarda una referencia a su <a href="http://es.wikipedia.org/wiki/JavaScript#Protot.C3.ADpico">prototipo</a> (referencia implícita) y a cualquiera de los valores de sus propiedades (referencia explícita)</p> + +<p>Hay que mencionar que en este contexto la noción de "objeto" se refiere a algo más amplio que los objetos normales de JavaScript y que también incluye al ámbito de la función (o ámbito de léxico global).</p> + +<h3 id="Recolección_de_basura_a_través_de_conteo_de_referencias">Recolección de basura a través de conteo de referencias</h3> + +<p>Éste es el algoritmo de recolección más simple. Este algoritmo reduce la definición de "un objejo ya no es necesario" a "un objeto ya no tiene ningún otro objeto que lo referencíe". Un objeto es considerado recolectable si existen cero referencias hacia él.</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<pre class="brush: js">var o = { + a: { + b:2 + } +}; +// Se crean dos objetos. Uno es referenciado por el otro como +// una de sus propiedades. +// El otro es referenciado al ser asignado a la variable "o" +// Ninguno puede ser recolectado. + + +var o2 = o; // la variable "o2" es lo segundo en tener una + // referencia al objeto. +o = 1; // ahora el objeto solo tiene una referencia mediante + // la variable "o2" + +var oa = o2.a; // referencia a la propiedad "a" del objeto. + // ahora el objeto posee dos referencias, una como propiedad + // la otra como la variable "oa" + +o2 = "yo"; // el objeto original "o" ahora ya no tiene + // referencias a él. Podría ser recolectado. + // Sin embargo lo que había en la propiedad "a" aún + // esta refernciado en la variable "oa"; + // no puede ser recolectado aún + +oa = null; // lo que estaba en la propiedad "a" del objeto original "o" + // ahora ya no tiene ninguna referencia.Puede ser recolectado. +</pre> + +<h4 id="Limitación_ciclos">Limitación : ciclos</h4> + +<p>Existe una limitación cuando se trata de ciclos. En el siguiente ejemplo dos objetos son creados y se referencían entre ellos -por lo que se crea un ciclo. Ellos no saldrán del ámbito de la función después del llamado de la función, con lo que serían efectivamente "ya no son necesarios" y por lo cual ser liberados. Sin embargo, el algoritmo de conteo de referencias considera que ya que cada uno de los dos objetos está referenciado por lo menos una vez, ninguno podra ser recolectado. Este simple algoritmo tiene la limitación de que si un grupo de objetos se referencian a sí mismos (y forman un ciclo), nunca pasarán a "ya no ser necesitados" y no podrán ser recolectados nunca.</p> + +<pre class="brush: js">function f(){ + var o = {}; + var o2 = {}; + o.a = o2; // o referencía o2 + o2.a = o; // o2 referencía o + + return "azerty"; +} + +f(); +// Dos objetos son creados y se referencían uno al otro creando un ciclo +// Estan atrapados en el scope de la funcion después de la llamada +// por lo que son inútiles fuera de la función y podrían ser recolectados. +// Sin embargo, el algoritmo de conteo de referencias considera que como +// ambos objetos estan referenciados (aunque sean a si mismos) ambos +// siguen en uso y por lo tanto no pueden ser recolectados. + +</pre> + +<h4 id="Ejemplo_real_aplicado">Ejemplo real aplicado</h4> + +<p>Internet Explorer 6 y 7 son conocidos por tener recolectores de basura por conteo de referencias para los objetos del DOM. Los Ciclos son un error común que pueden generar <em>fugas de memoria</em> (<em><a href="http://es.wikipedia.org/wiki/Fuga_de_memoria">memory leaks) (art. en inglés)</a>:</em></p> + +<pre class="brush: js">var div; +window.onload = function(){ + div = document.getElementById("miDiv"); + div<span style="font-size: 1rem;">.referenciaCircular = div;</span> + div.muchosDatos = new Array(10000).join("*"); +}; +</pre> + +<p>En el ejemplo anterior, el elemento del DOM "miDiv" posée una referencia circular a sí mismo en la propiedad "referenciaCircular". Si la propiedad no es explícitamente removida o asignada con el valor <em>null</em>, un algoritmo de conteo de referencias siempre va a dejar por lo menos una referencia intacta y va a mantener el elemento del DOM activo en memoria incluso cuando es removido del DOM. Si el objeto del DOM contiene una gran cantidad de datos (ejemplificado en la propiedad "muchosDatos"), la memoria consumida por estos datos nunca será liberada.</p> + +<h3 id="Algoritmo_Mark-and-sweep_(Marcado_y_barrido)">Algoritmo Mark-and-sweep (Marcado y barrido)</h3> + +<p>Este algoritmo reduce la definición de "un objeto ya no es necesitado" a "un objeto es inalcanzable"</p> + +<p>Este algoritmo asume la noción de un grupo de objetos llamados <em>objetos raíz</em> (en JavaScript la raíz es el objeto global). Periódicamente el recolector empieza por estas raíces, encuentra todos los objetos que están referenciados por estas raíces, y luego todos los objetos referenciados de estos, etc. Empezando por las raíces, el recolector de esta forma encontrará todos los objetos que son <em>alcanzables</em> y recolectará los objetos inalcanzables.</p> + +<p>Este algoritmo es mejor que el anterior ya que "un objeto tiene cero referencias" equivale al "objeto es inalcanzable". Esto no sucedía asi en el algoritmo anterior cuando se trataba de un ciclo.</p> + +<p>Desde el 2012, todos los navegadores incluyen un recolector de basura basado en mark-and-sweep. Todas las mejoras realizadas en el campo de Recolección de basura en JavaScript (recolección generacional/incremental/concurrida/paralela) en los ultimos años son mejoras a la implementación del algoritmo, pero no mejoras sobre el algoritmo de recolección ni a la reducción de la definicion de cuando"un objeto ya no es necesario".</p> + +<h4 id="Los_ciclos_son_problema_del_pasado">Los ciclos son problema del pasado</h4> + +<p>En el primer ejemplo, después de que la llamada a una función termina, los dos objetos ya no son referenciados por nada alcanzable desde el objeto global. De esta forma serán identificados como inalcanzables por el recolector de basura.</p> + +<p>Lo mismo ocurre en el segundo ejemplo. Una vez que el elemento div y sus métodos se hacen inalcanzable desde los objetos raíz, ambos pueden ser recolectados a pesar de que estén referenciados los unos de los otros.</p> + +<h4 id="Limitación_los_objetos_necesarios_se_hacen_inalcanzables_de_forma_explícita.">Limitación: los objetos necesarios se hacen inalcanzables de forma explícita.</h4> + +<p>Aunque esto está marcado como una limitación, se puede encontrar muy poco en la práctica. Ésta es la razón por la cuál la recolección de basura es poco tomada en cuenta.</p> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a class="external" href="http://www.ibm.com/developerworks/web/library/wa-memleak/">IBM article on "Memory leak patterns in JavaScript" (2007) (art. en inglés)</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/magazine/ff728624.aspx">Kangax article on how to register event handler and avoid memory leaks (2010) (art. en inglés)</a></li> + <li><a href="https://developer.mozilla.org/es/docs/Mozilla/Performance" title="https://developer.mozilla.org/en-US/docs/Mozilla/Performance">Performance (art. en inglés) </a></li> +</ul> diff --git a/files/es/web/javascript/guide/bucles_e_iteración/index.html b/files/es/web/javascript/guide/bucles_e_iteración/index.html new file mode 100644 index 0000000000..07b7c12e31 --- /dev/null +++ b/files/es/web/javascript/guide/bucles_e_iteración/index.html @@ -0,0 +1,334 @@ +--- +title: Bucles e iteración +slug: Web/JavaScript/Guide/Bucles_e_iteración +tags: + - Bucle + - Guia(2) + - Guía + - Iteración + - JavaScript + - Sintaxis +translation_of: Web/JavaScript/Guide/Loops_and_iteration +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div> + +<p class="summary">Los bucles ofrecen una forma rápida y sencilla de hacer algo repetidamente. Este capítulo de la {{JSxRef("../Guide", "Guía de JavaScript")}} presenta las diferentes declaraciones de iteración disponibles para JavaScript.</p> + +<p>Puedes pensar en un bucle como una versión computarizada del juego en la que le dices a alguien que dé <em>X</em> pasos en una dirección y luego <em>Y</em> pasos en otra. Por ejemplo, la idea "Ve cinco pasos hacia el este" se podría expresar de esta manera como un bucle:</p> + +<pre class="brush: js notranslate">for (let step = 0; step < 5; step++) { + // Se ejecuta 5 veces, con valores del paso 0 al 4. + console.log('Camina un paso hacia el este'); +} +</pre> + +<p>Hay muchos diferentes tipos de bucles, pero esencialmente, todos hacen lo mismo: repiten una acción varias veces. (¡Ten en cuenta que es posible que ese número sea cero!).</p> + +<p>Los diversos mecanismos de bucle ofrecen diferentes formas de determinar los puntos de inicio y terminación del bucle. Hay varias situaciones que son fácilmente atendidas por un tipo de bucle que por otros.</p> + +<p>Las declaraciones para bucles proporcionadas en JavaScript son:</p> + +<ul> + <li>{{anch("Declaracion_for", "Declaración for")}}</li> + <li>{{anch("Declaracion_do...while", "Declaración do...while")}}</li> + <li>{{anch("Declaracion_while", "Declaración while")}}</li> + <li>{{anch("Declaracion_labeled", "Declaración labeled")}}</li> + <li>{{anch("Declaracion_break", "Declaración break")}}</li> + <li>{{anch("Declaracion_continue", "Declaración continue")}}</li> + <li>{{anch("Declaracion_for...in", "Declaración for...in")}}</li> + <li>{{anch("Declaracion_for...of", "Declaración for...of")}}</li> +</ul> + +<h2 id="Declaración_for">Declaración <code>for</code></h2> + +<p>Un ciclo {{JSxRef("Sentencias/for", "for")}} se repite hasta que una condición especificada se evalúe como <code>false</code>. El bucle <code>for</code> de JavaScript es similar al bucle <code>for</code> de Java y C.</p> + +<p>Una declaración <code>for</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">for ([expresiónInicial]; [expresiónCondicional]; [expresiónDeActualización]) + instrucción +</pre> + +<p>Cuando se ejecuta un bucle <code>for</code>, ocurre lo siguiente:</p> + +<ol> + <li>Se ejecuta la expresión de iniciación <code>expresiónInicial</code>, si existe. Esta expresión normalmente inicia uno o más contadores de bucle, pero la sintaxis permite una expresión de cualquier grado de complejidad. Esta expresión también puede declarar variables.</li> + <li>Se evalúa la expresión <code>expresiónCondicional</code>. Si el valor de <code>expresiónCondicional</code> es verdadero, se ejecutan las instrucciones del bucle. Si el valor de <code>condición</code> es falso, el bucle <code>for</code> termina. (Si la expresión <code>condición</code> se omite por completo, se supone que la condición es verdadera).</li> + <li>Se ejecuta la <code>instrucción</code>. Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</li> + <li>Si está presente, se ejecuta la expresión de actualización <code>expresiónDeActualización</code>.</li> + <li>El control regresa al paso 2.</li> +</ol> + +<h3 id="Ejemplo"><strong>Ejemplo</strong></h3> + +<p>En el siguiente ejemplo, la función contiene una instrucción <code>for</code> que cuenta el número de opciones seleccionadas en una lista de desplazamiento (el elemento {{HTMLElement("select")}} de HTML representa un control que proporciona un menú de opciones que permite múltiples selecciones). La instrucción <code>for</code> declara la variable <code>i</code> y la inicia a <code>0</code>. Comprueba que <code>i</code> es menor que el número de opciones en el elemento <code><select></code>, realiza la siguiente instrucción <code>if</code> e incrementa <code>i</code> después de cada pasada por el bucle.</p> + +<pre class="brush: html notranslate"><form name="selectForm"> + <p> + <label for="musicTypes">Elija algunos tipos de música, luego haga clic en el botón de abajo:</label> + <select id="musicTypes" name="musicTypes" multiple="multiple"> + <option selected="selected">R&B</option> + <option>Jazz</option> + <option>Blues</option> + <option>New Age</option> + <option>Classical</option> + <option>Opera</option> + </select> + </p> + <p><input id="btn" type="button" value="¿Cuántos están seleccionados?" /></p> +</form> + +<script> +function howMany(selectObject) { + let numberSelected = 0; + for (let i = 0; i < selectObject.options.length; i++) { + if (selectObject.options[i].selected) { + numberSelected++; + } + } + return numberSelected; +} + +let btn = document.getElementById('btn'); +btn.addEventListener('click', function() { + alert('Número de opciones seleccionadas: ' + howMany(document.selectForm.musicTypes)); +}); +</script> + +</pre> + +<h2 id="Declaración_do...while">Declaración <code>do...while</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/do...while", "do...while")}} se repite hasta que una condición especificada se evalúe como falsa.</p> + +<p>Una declaración <code>do...while</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">do + <em>expresión</em> +while (condición); +</pre> + +<p><em><code>exposición</code></em> siempre se ejecuta una vez antes de que se verifique la condición. (Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones).</p> + +<p>Si <code>condición</code> es <code>true</code>, la declaración se ejecuta de nuevo. Al final de cada ejecución, se comprueba la condición. Cuando la condición es <code>false</code>, la ejecución se detiene y el control pasa a la declaración que sigue a <code>do...while</code>.</p> + +<h3 id="Ejemplo_2"><strong>Ejemplo</strong></h3> + +<p>En el siguiente ejemplo, el bucle <code>do</code> itera al menos una vez y se repite hasta que <code><em>i</em></code> ya no sea menor que <code>5</code>.</p> + +<p>let i = 0; do { i += 1; console.log(i); } while (i < 5);</p> + +<h2 id="Declaración_while">Declaración <code>while</code></h2> + +<p>Una declaración {{JSxRef("Sentencias/while", "while")}} ejecuta sus instrucciones siempre que una condición especificada se evalúe como <code>true</code>. Una instrucción <code>while</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">while (<em>condición</em>) + <em>expresión</em> +</pre> + +<p>Si la <em><code>condición</code></em> se vuelve <code>false</code>, la <code>instrucción</code> dentro del bucle se deja de ejecutar y el control pasa a la instrucción que sigue al bucle.</p> + +<p>La prueba de condición ocurre <em>antes</em> de que se ejecute la <code>expresión</code> en el bucle. Si la condición devuelve <code>true</code>, se ejecuta la <code>expresión</code> y la <em><code>condición</code></em> se prueba de nuevo. Si la condición devuelve <code>false</code>, la ejecución se detiene y el control se pasa a la instrucción que sigue a <code>while</code>.</p> + +<p>Para ejecutar varias instrucciones, usa una declaración de bloque (<code>{ ... }</code>) para agrupar esas declaraciones.</p> + +<h3 id="Ejemplo_1"><strong>Ejemplo 1</strong></h3> + +<p>El siguiente ciclo del <code>while</code> se repite siempre que <em><code>n</code></em> sea menor que <code>3</code>:</p> + +<pre class="brush: js notranslate">let n = 0; +let x = 0; +while (n < 3) { + n++; + x += n; +} +</pre> + +<p>Con cada iteración, el bucle incrementa <code>n</code> y agrega ese valor a <code>x</code>. Por lo tanto, <code>x</code> y <code>n</code> toman los siguientes valores:</p> + +<ul> + <li>Después de la primera pasada: <code>n</code> = <code>1</code> y <code>x</code> = <code>1</code></li> + <li>Después de la segunda pasada: <code>n</code> = <code>2</code> y <code>x</code> = <code>3</code></li> + <li>Después de la tercera pasada: <code>n</code> = <code>3</code> y <code>x</code> = <code>6</code></li> +</ul> + +<p>Después de completar la tercera pasada, la condición <code>n < 3</code> ya no es <code>true</code>, por lo que el bucle termina.<strong>Ejemplo 2</strong></p> + +<p>Evita los bucles infinitos. Asegúrate de que la condición en un bucle eventualmente se convierta en <code>false</code>; de lo contrario, el bucle nunca terminará. Las declaraciones en el siguiente bucle <code>while</code> se ejecutan indefinidamente porque la condición nunca se vuelve <code>false</code>:</p> + +<pre class="example-bad brush: js notranslate">// ¡Los bucles infinitos son malos! +while (true) { + console.log('¡Hola, mundo!'); +}</pre> + +<h2 id="Declaración_labeled">Declaración <code>labeled</code></h2> + +<p>Una {{JSxRef("Sentencias/label", "label")}} proporciona una instrucción con un identificador que te permite hacer referencia a ella en otra parte de tu programa. Por ejemplo, puedes usar una etiqueta para identificar un bucle y luego usar las declaraciones <code>break</code> o <code>continue</code> para indicar si un programa debe interrumpir el bucle o continuar su ejecución.La sintaxis de la instrucción etiquetada es similar a la siguiente:label : instrucción</p> + +<p>El valor de <code><em>label</em></code> puede ser cualquier identificador de JavaScript que no sea una palabra reservada. La <code><em>declaración</em></code> que identifica a una etiqueta puede ser cualquier enunciado.</p> + +<p><strong>Ejemplo</strong></p> + +<p>En este ejemplo, la etiqueta <code>markLoop</code> identifica un bucle <code>while</code>.</p> + +<p>markLoop: while (theMark === true) { doSomething(); }</p> + +<p>Declaración <code>break</code></p> + +<p>Usa la instrucción {{JSxRef("Sentencias/break", "break")}} para terminar un bucle, <code>switch</code> o junto con una declaración etiquetada.</p> + +<ul> + <li>Cuando usas <code>break</code> sin una etiqueta, inmediatamente termina el <code>while</code>, <code>do-while</code>, <code>for</code> o <code>switch</code> y transfiere el control a la siguiente declaración.</li> + <li>Cuando usas <code>break</code> con una etiqueta, termina la declaración etiquetada especificada.</li> +</ul> + +<p>La sintaxis de la instrucción <code>break</code> se ve así:</p> + +<pre class="syntaxbox notranslate">break; +break [<em>label</em>]; +</pre> + +<ol> + <li>La primera forma de la sintaxis termina el bucle envolvente más interno o el <code>switch.</code></li> + <li>La segunda forma de la sintaxis termina la instrucción etiquetada específica.</li> +</ol> + +<h3 id="Ejemplo_1_2"><strong>Ejemplo</strong> <strong>1</strong></h3> + +<p>El siguiente ejemplo recorre en iteración los elementos de un arreglo hasta que encuentra el índice de un elemento cuyo valor es <code>theValue</code>:</p> + +<pre class="brush: js notranslate">for (let i = 0; i < a.length; i++) { + if (a[i] === theValue) { + break; + } +}</pre> + +<h3 id="Ejemplo_2_romper_una_etiqueta"><strong>Ejemplo 2:</strong> romper una etiqueta</h3> + +<pre class="brush: js notranslate">let x = 0; +let z = 0; +labelCancelLoops: while (true) { + console.log('Bucles externos: ' + x); + x += 1; + z = 1; + while (true) { + console.log('Bucles internos: ' + z); + z += 1; + if (z === 10 && x === 10) { + break labelCancelLoops; + } else if (z === 10) { + break; + } + } +} +</pre> + +<h2 id="Declaración_continue">Declaración <code>continue</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/continue", "continue")}} se puede usar para reiniciar un <code>while</code>, <code>do-while</code>, <code>for</code>, o declaración <code>label</code>.</p> + +<ul> + <li>Cuando utilizas <code>continue</code> sin una etiqueta, finaliza la iteración actual del <code>while</code>, <code>do-while</code> o <code>for</code> y continúa la ejecución del bucle con la siguiente iteración. A diferencia de la instrucción <code>break</code>, <code>continue</code> no termina la ejecución del bucle por completo. En un bucle <code>while</code>, vuelve a la condición. En un bucle <code>for</code>, salta a la <code>expresión-incremento</code>.</li> + <li>Cuando usas <code>continue</code> con una etiqueta, se aplica a la declaración de bucle identificada con esa etiqueta.</li> +</ul> + +<p>La sintaxis de la instrucción <code>continue</code> se parece a la siguiente:</p> + +<pre class="syntaxbox notranslate">continue [<em>label</em>]; +</pre> + +<h3 id="Ejemplo_1_3"><strong>Ejemplo 1</strong></h3> + +<p>El siguiente ejemplo muestra un bucle <code>while</code> con una instrucción <code>continue</code> que se ejecuta cuando el valor de <code>i</code> es <code>3</code>. Por lo tanto, <code>n</code> toma los valores <code>1</code>, <code>3</code>, <code>7</code> y <code>12</code>.</p> + +<pre class="brush: js notranslate">let i = 0; +let n = 0; +while (i < 5) { + i++; + if (i === 3) { + continue; + } + n += i; + console.log(n); +} +//1,3,7,12 + + +let i = 0; +let n = 0; +while (i < 5) { + i++; + if (i === 3) { + // continue; + } + n += i; + console.log(n); +} +// 1,3,6,10,15 +</pre> + +<h3 id="Ejemplo_2_2"><strong>Ejemplo 2</strong></h3> + +<p>Una declaración etiquetada <em><code>checkiandj</code></em> contiene una declaración etiquetada <em><code>checkj</code></em>. Si se encuentra <code>continue</code>, el programa termina la iteración actual de <em><code>checkj</code></em> y comienza la siguiente iteración. Cada vez que se encuentra <code>continue</code>, <em><code>checkj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el resto de la instrucción <em><code>checkiandj</code></em> se completa y <em><code>checkiandj</code></em> reitera hasta que su condición devuelve <code>false</code>. Cuando se devuelve <code>false</code>, el programa continúa en la declaración que sigue a <em><code>checkiandj</code></em>.</p> + +<p>Si <code>continue</code> tuviera una etiqueta de <em><code>checkiandj</code></em>, el programa continuaría en la parte superior de la declaración <em><code>checkiandj</code></em>.</p> + +<p>let i = 0; let j = 10; checkiandj: while (i < 4) { console.log(i); i += 1; checkj: while (j > 4) { console.log(j); j -= 1; if ((j % 2) === 0) { continue checkj; } console.log(j + 'es impar.'); } console.log('i = ' + i); console.log('j = ' + j); }</p> + +<h2 id="Declaración_for...in">Declaración <code>for...in</code></h2> + +<p>La instrucción {{JSxRef("Sentencias/for...in", "for...in")}} itera una variable especificada sobre todas las propiedades enumerables de un objeto. Para cada propiedad distinta, JavaScript ejecuta las instrucciones especificadas. Una declaración <code>for...in</code> tiene el siguiente aspecto:</p> + +<pre class="syntaxbox notranslate">for (variable in objeto) + instrucción +</pre> + +<h3 id="Ejemplo_3"><strong>Ejemplo</strong></h3> + +<p>La siguiente función toma como argumento un objeto y el nombre del objeto. Luego itera sobre todas las propiedades del objeto y devuelve una cadena que enumera los nombres de las propiedades y sus valores.</p> + +<pre class="brush: js notranslate">function dump_props(obj, obj_name) { + let result = ''; + for (let i in obj) { + result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; + } + result += '<hr>'; + return result; +} +</pre> + +<p>Para un objeto <code>car</code> con propiedades <code>make</code> y <code>model</code>, <code>result</code> sería:</p> + +<pre class="brush: js notranslate">car.make = Ford +car.model = Mustang +</pre> + +<h3 id="Arrays"><strong>Arrays</strong></h3> + +<p>Aunque puede ser tentador usar esto como una forma de iterar sobre los elementos {{JSxRef("Array")}}, la instrucción <code>for...in</code> devolverá el nombre de sus propiedades definidas por el usuario además de los índices numéricos.</p> + +<p>Por lo tanto, es mejor usar un bucle {{JSxRef("Sentencias/for", "for")}} tradicional con un índice numérico cuando se itera sobre arreglos, porque la instrucción <code>for...in</code> itera sobre las propiedades definidas por el usuario además de los elementos del arreglo, si modificas el objeto <code>Array</code> (tal como agregar propiedades o métodos personalizados).</p> + +<h2 id="Declaración_for...of">Declaración <code>for...of</code></h2> + +<p>La declaración {{JSxRef("Sentencias/for...of", "for...of")}} crea un bucle que se repite sobre {{JSxRef("../Guide/iterable", "objetos iterables")}} (incluidos {{JSxRef("Array")}}, {{JSxRef("Map")}}, {{JSxRef("Set")}}, objetos {{JSxRef("Funciones/arguments", "arguments")}} y así sucesivamente), invocando un gancho de iteración personalizado con declaraciones que se ejecutarán para el valor de cada distinta propiedad.</p> + +<pre class="syntaxbox notranslate">para (<em>variable</em> of <em>objeto</em>) + <em>expresión</em> +</pre> + +<p>El siguiente ejemplo muestra la diferencia entre un bucle for<code>...in</code> y un bucle {{JSxRef("Sentencias/for...in", "for...in")}}. Mientras que <code>for...in</code> itera sobre los nombres de propiedad, <code>for...of</code> itera sobre los valores de propiedad:</p> + +<pre class="brush:js notranslate">const 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> + +<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p> diff --git a/files/es/web/javascript/guide/colecciones_indexadas/index.html b/files/es/web/javascript/guide/colecciones_indexadas/index.html new file mode 100644 index 0000000000..baf55a84d5 --- /dev/null +++ b/files/es/web/javascript/guide/colecciones_indexadas/index.html @@ -0,0 +1,603 @@ +--- +title: Colecciones indexadas +slug: Web/JavaScript/Guide/colecciones_indexadas +tags: + - Array + - Arreglo + - Guía + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Indexed_collections +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</div> + +<p class="summary">Este capítulo presenta colecciones de datos ordenados por un valor de índice. Esto incluye arreglos y construcciones similares a arreglos tal como objetos {{jsxref("Array")}} y objetos {{jsxref("TypedArray")}}.</p> + +<h2 id="El_objeto_Array">El objeto <code>Array</code></h2> + +<p>Un <em><dfn>array</dfn></em> es una lista ordenada de valores a los que te refieres con un nombre y un índice.</p> + +<p>Por ejemplo, considera un arreglo llamado <code>emp</code>, que contiene los nombres de los empleados indexados por su id de empleado numérico. De tal modo que <code>emp[0]</code> sería el empleado número cero, <code>emp[1]</code> el empleado número uno, y así sucesivamente.</p> + +<p>JavaScript no tiene un tipo de dato <code>array</code> explícito. Sin embargo, puedes utilizar el objeto <code>Array</code> predefinido y sus métodos para trabajar con arreglos en tus aplicaciones. El objeto <code>Array</code> tiene métodos para manipular arreglos de varias formas, tal como unirlos, invertirlos y ordenarlos. Tiene una propiedad para determinar la longitud del arreglo y otras propiedades para usar con expresiones regulares.</p> + +<h3 id="Crear_un_arreglo">Crear un arreglo</h3> + +<p>Las siguientes declaraciones crean arreglos equivalentes:</p> + +<pre class="brush: js notranslate">let arr = new Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) +let arr = Array(<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>) +let arr = [<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +</pre> + +<p><code><var>element0</var>, <var>element1</var>, ..., <var>elementN</var></code> es una lista de valores para los elementos del arreglo. Cuando se especifican estos valores, el arreglo se inicia con ellos como elementos del arreglo. La propiedad <code>length</code> del arreglo se establece en el número de argumentos.</p> + +<p>La sintaxis de corchetes se denomina "arreglo literal" o "iniciador de arreglo". Es más corto que otras formas de creación de arreglos, por lo que generalmente se prefiere. Consulta <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#Arreglos_literales">Arreglos literales</a> para obtener más detalles.</p> + +<p>Para crear un arreglo con una longitud distinta de cero, pero sin ningún elemento, se puede utilizar cualquiera de las siguientes:</p> + +<pre class="brush: js notranslate">// Esta... +let arr = new Array(<var>arrayLength</var>) + +// ...da como resultado el mismo arreglo que este +let arr = Array(<var>arrayLength</var>) + + +// Esto tiene exactamente el mismo efecto +let arr = [] +arr.length = <var>arrayLength</var> +</pre> + +<div class="note"> +<p><strong>Nota</strong>: En el código anterior, <code><var>arrayLength</var></code> debe ser un <code>Número</code>. De lo contrario, se creará un arreglo con un solo elemento (el valor proporcionado). Llamar a <code>arr.length</code> devolverá <code><var>arrayLength</var></code>, pero el arreglo no contiene ningún elemento. Un bucle {{jsxref("Statements/for...in", "for...in")}} no encontrarás ninguna propiedad en el arreglo.</p> +</div> + +<p>Además de una variable recién definida como se muestra arriba, los arreglos también se pueden asignar como una propiedad a un objeto nuevo o existente:</p> + +<pre class="brush: js notranslate">let obj = {} +// ... +obj.prop = [element0, element1, ..., elementN] + +// O +let obj = {prop: [element0, element1, ...., elementN]} +</pre> + +<p>Si deseas iniciar un arreglo con un solo elemento, y el elemento resulta ser un <code>Número</code>, debes usar la sintaxis de corchetes. Cuando se pasa un solo valor <code>Number</code> al constructor o función <code>Array()</code>, se interpreta como un <code>arrayLength</code>, no como un solo elemento.</p> + +<pre class="brush: js notranslate">let arr = [42] // Crea un arreglo con un solo elemento: + // el número 42. + +let arr = Array(42) // Crea un arreglo sin elementos + // y arr.length establecidos en 42. + // + // Esto es equivalente a: +let arr = [] +arr.length = 42 +</pre> + +<p>Llamar a <code>Array(<var>N</var>)</code> da como resultado un <code>RangeError</code>, si <code><var>N</var></code> no es un número entero cuya porción fraccionaria no es cero. El siguiente ejemplo ilustra este comportamiento.</p> + +<pre class="brush: js notranslate">let arr = Array(9.3) // RangeError: Longitud de arreglo no válida +</pre> + +<p>Si tu código necesita crear arreglos con elementos únicos de un tipo de dato arbitrario, es más seguro utilizar arreglos literales. Alternativamente, crea un arreglo vacío primero antes de agregarle el único elemento.</p> + +<p>En ES2015, puedes utilizar el método estático {{jsxref("Array.of")}} para crear arreglos con un solo elemento.</p> + +<pre class="brush: js notranslate">let wisenArray = Array.of(9.3) // wisenArray contiene solo un elemento 9.3</pre> + +<h3 id="Refiriéndose_a_elementos_del_arreglo">Refiriéndose a elementos del arreglo</h3> + +<p>Dado que los elementos también son propiedades, puedes acceder a ellos usando la <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">propiedad <code>accessors</code></a>. Supongamos que defines el siguiente arreglo:</p> + +<pre class="brush: js notranslate">let myArray = ['Wind', 'Rain', 'Fire'] +</pre> + +<p>Puedes referirte al primer elemento del arreglo como <code>myArray[0]</code>, al segundo elemento del arreglo como <code>myArray[1]</code>, etc<span class="st">…</span> El índice de los elementos comienza en cero.</p> + +<div class="note"> +<p><strong>Nota</strong>: También puedes utilizar la <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">propiedad <code>accessors</code></a> para acceder a otras propiedades del arreglo, como con un objeto.</p> + +<pre class="brush: js notranslate">let arr = ['one', 'two', 'three'] +arr[2] // three +arr['length'] // 3 +</pre> +</div> + +<h3 id="Llenar_un_arreglo">Llenar un arreglo</h3> + +<p>Puedes llenar un arreglo asignando valores a sus elementos. Por ejemplo:</p> + +<pre class="brush: js notranslate">let emp = [] +emp[0] = 'Casey Jones' +emp[1] = 'Phil Lesh' +emp[2] = 'August West' +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Si proporcionas un valor no entero al operador <code>array</code> en el código anterior, se creará una propiedad en el objeto que representa al arreglo, en lugar de un elemento del arreglo.</p> + +<pre class="brush: js notranslate">let arr = [] +arr[3.4] = 'Oranges' +console.log(arr.length) // 0 +console.log(arr.hasOwnProperty(3.4)) // true +</pre> +</div> + +<p>También puedes rellenar un arreglo cuando lo creas:</p> + +<pre class="brush: js notranslate">let myArray = new Array('Hello', myVar, 3.14159) +// OR +let myArray = ['Mango', 'Apple', 'Orange'] +</pre> + +<h3 id="Entendiendo_length">Entendiendo <code>length</code></h3> + +<p>A nivel de implementación, los arreglos de JavaScript almacenan sus elementos como propiedades de objeto estándar, utilizando el índice del arreglo como nombre de propiedad.</p> + +<p>La propiedad <code>length</code> es especial. Siempre devuelve el índice del último elemento más uno. (En el siguiente ejemplo, <code>'Dusty'</code> está indexado en <code>30</code>, por lo que <code>cats.length</code> devuelve <code>30 + 1</code>).</p> + +<p>Recuerda, los índices del Array JavaScript están basados en 0: comienzan en <code>0</code>, no en <code>1</code>. Esto significa que la propiedad <code>length</code> será uno más que el índice más alto almacenado en el arreglo:</p> + +<pre class="brush: js notranslate">let cats = [] +cats[30] = ['Dusty'] +console.log(cats.length) // 31 +</pre> + +<p>También puedes asignar la propiedad <code>length</code>.</p> + +<p>Escribir un valor que sea más corto que el número de elementos almacenados trunca el arreglo. Escribir <code>0</code> lo vacía por completo:</p> + +<pre class="brush: js notranslate">let cats = ['Dusty', 'Misty', 'Twiggy'] +console.log(cats.length) // 3 + +cats.length = 2 +console.log(cats) // logs "Dusty, Misty" - Twiggy se ha eliminado + +cats.length = 0 +console.log(cats) // logs []; el arreglo cats está vacío + +cats.length = 3 +console.log(cats) // logs [ <3 elementos vacíos> ] +</pre> + +<h3 id="Iterando_sobre_arreglos">Iterando sobre arreglos</h3> + +<p>Una operación común es iterar sobre los valores de un arreglo, procesando cada uno de alguna manera. La forma más sencilla de hacerlo es la siguiente:</p> + +<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue'] +for (let i = 0; i < colors.length; i++) { + console.log(colors[i]) +} +</pre> + +<p>Si sabes que ninguno de los elementos de tu arreglo se evalúa como <code>false</code> en un contexto booleano, si tu arreglo consta solo de nodos <a href="/es/docs/DOM" title="/es/docs/DOM">DOM</a>, por ejemplo, puedes usar un lenguaje eficiente:</p> + +<pre class="brush: js notranslate">let divs = document.getElementsByTagName('div') +for (let i = 0, div; div = divs[i]; i++) { + /* Procesar div de alguna manera */ +} +</pre> + +<p>Esto evita la sobrecarga de verificar la longitud del arreglo y garantiza que la variable <code><var>div</var></code> se reasigne al elemento actual cada vez que se realiza el bucle para mayor comodidad.</p> + +<p>El método {{jsxref("Array.forEach", "forEach()")}} proporciona otra forma de iterar sobre un arreglo:</p> + +<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue'] +colors.forEach(function(color) { + console.log(color) +}) +// red +// green +// blue +</pre> + +<p>Alternativamente, puedes acortar el código para el parámetro <code>forEach</code> con las funciones de flecha ES2015:</p> + +<pre class="brush: js notranslate">let colors = ['red', 'green', 'blue'] +colors.forEach(color => console.log(color)) +// red +// green +// blue +</pre> + +<p>La función pasada a <code>forEach</code> se ejecuta una vez por cada elemento del arreglo, con el elemento de arreglo pasado como argumento de la función. Los valores no asignados no se iteran en un bucle <code>forEach</code>.</p> + +<p>Ten en cuenta que los elementos de un arreglo que se omiten cuando se define el arreglo no se enumeran cuando lo itera <code>forEach</code>, pero <em>se enumeran</em> cuando <code>undefined</code> se ha asignado manualmente al elemento:</p> + +<pre class="brush: js notranslate">let array = ['first', 'second', , 'fourth'] + +array.forEach(function(element) { + console.log(element) +}) +// first +// second +// fourth + +if (array[2] === undefined) { + console.log('array[2] is undefined') // true +} + +array = ['first', 'second', undefined, 'fourth'] + +array.forEach(function(element) { + console.log(element) +}) +// first +// second +// undefined +// fourth +</pre> + +<p>Dado que los elementos de JavaScript se guardan como propiedades de objeto estándar, no es recomendable iterar a través de arreglos de JavaScript usando bucles {{jsxref("Statements/for...in", "for...in")}}, porque se enumerarán los elementos normales y todas las propiedades enumerables.</p> + +<h3 id="Métodos_de_array">Métodos de array</h3> + +<p>El objeto {{jsxref("Array")}} tiene los siguientes métodos:</p> + +<p>{{jsxref("Array.concat", "concat()")}} une dos o más arreglos y devuelve un nuevo arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3') +myArray = myArray.concat('a', 'b', 'c') +// myArray is now ["1", "2", "3", "a", "b", "c"] +</pre> + +<p>{{jsxref("Array.join", "join(delimiter = ',')")}} une todos los elementos de un arreglo en una cadena.</p> + +<pre class="brush: js notranslate">let myArray = new Array('Viento', 'Lluvia', 'Fuego') +let list = myArray.join('-') // la lista es "Viento - Lluvia - Fuego" +</pre> + +<p>{{jsxref("Array.push", "push()")}} agrega uno o más elementos al final de un arreglo y devuelve la <code>longitud</code> resultante del arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('1', '2') +myArray.push('3') // myArray ahora es ["1", "2", "3"] +</pre> + +<p>{{jsxref("Array.pop", "pop()")}} elimina el último elemento de un arreglo y devuelve ese elemento.</p> + +<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3') +let last = myArray.pop() +// myArray ahora es ["1", "2"], last = "3" +</pre> + +<p>{{jsxref("Array.shift", "shift()")}} elimina el primer elemento de un arreglo y devuelve ese elemento.</p> + +<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3') +let first = myArray.shift() +// myArray ahora es ["2", "3"], first es "1" +</pre> + +<p>{{jsxref("Array.unshift", "unshift()")}} agrega uno o más elementos al frente de un arreglo y devuelve la nueva longitud del arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3') +myArray.unshift('4', '5') +// myArray se convierte en ["4", "5", "1", "2", "3"] +</pre> + +<p>{{jsxref("Array.slice", "slice(start_index, upto_index)")}} extrae una sección de un arreglo y devuelve un nuevo arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('a', 'b', 'c', 'd', 'e') +myArray = myArray.slice(1, 4) // comienza en el índice 1 y extrae todos los elementos + // hasta el índice 3, devuelve ["b", "c", "d"] +</pre> + +<p>{{jsxref("Array.splice", "splice(index, count_to_remove, addElement1, addElement2, ...)")}} elimina elementos de un arreglo y (opcionalmente) los reemplaza. Devuelve los elementos que se eliminaron del arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('1', '2', '3', '4', '5') +myArray.splice(1, 3, 'a', 'b', 'c', 'd') +// myArray ahora es ["1", "a", "b", "c", "d", "5"] +// Este código comenzó en el índice uno (o donde estaba el "2"), +// eliminó 3 elementos allí, y luego insertó todos los consecutivos +// elementos en su lugar. +</pre> + +<p>{{jsxref("Array.reverse", "reverse()")}} transpone los elementos de un arreglo, en su lugar: el primer elemento del arreglo se convierte en el último y el último en el primero. Devuelve una referencia al arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array ('1', '2', '3') +myArray.reverse() +// transpone el arreglo para que myArray = ["3", "2", "1"] +</pre> + +<p>{{jsxref("Array.sort", "sort()")}} ordena los elementos de un arreglo en su lugar y devuelve una referencia al arreglo.</p> + +<pre class="brush: js notranslate">let myArray = new Array('Viento', 'Lluvia', 'Fuego') +myArray.sort() +// ordena el arreglo para que myArray = ["Fuego", "Lluvia", "Viento"] +</pre> + +<p><code>sort()</code> también puede tomar una función retrollamada para determinar cómo se comparan los elementos del arreglo.</p> + +<p>El método <code>sort</code> (y otros a continuación) que reciben una retrollamada se conocen como <em>métodos iterativos</em>, porque iteran sobre todo el arreglo de alguna manera. Cada uno toma un segundo argumento opcional llamado <code><var>thisObject</var></code>. Si se proporciona, <code><var>thisObject</var></code> se convierte en el valor de la palabra clave <code>this</code> dentro del cuerpo de la función retrollamada. Si no se proporciona, como en otros casos en los que se invoca una función fuera de un contexto de objeto explícito, <code>this</code> se referirá al objeto global (<a href="/es/docs/Web/API/Window" title="La interfaz <code>Window</code> representa una ventana que contiene un documento DOM; la propiedad <code>document</code> apunta al documento DOM cargado en esa ventana."><code>window</code></a>) cuando se usa la función de flecha como retrollamada, o <code>undefined</code> cuando se usa una función normal como retrollamada.</p> + +<p>La función retrollamada se invoca con dos argumentos, que son elementos del arreglo.</p> + +<p>La siguiente función compara dos valores y devuelve uno de tres valores:</p> + +<p>Por ejemplo, lo siguiente se ordenará por la última letra de una cadena:</p> + +<pre class="brush: js notranslate">let sortFn = function(a, b) { + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; +} +myArray.sort(sortFn) +// ordena el arreglo para que myArray = ["Viento", "Fuego", "Lluvia"]</pre> + +<ul> + <li>si <code><var>a</var></code> es menor que <code><var>b</var></code> por el sistema de clasificación, devuelve <code>-1</code> ( o cualquier número negativo)</li> + <li>si <code><var>a</var></code> es mayor que <code><var>b</var></code> por el sistema de clasificación, devuelve <code>1</code> (o cualquier número positivo)</li> + <li>si <code><var>a</var></code> y <code><var>b</var></code> se consideran equivalentes, devuelve <code>0</code>.</li> +</ul> + +<p>{{jsxref("Array.indexOf", "indexOf (searchElement[, fromIndex])")}} busca en el arreglo <code><var>searchElement</var></code> y devuelve el índice de la primera coincidencia.</p> + +<pre class="brush: js notranslate">let a = ['a', 'b', 'a', 'b', 'a'] +console.log(a.indexOf('b')) // registros 1 + +// Ahora inténtalo de nuevo, comenzando después de la última coincidencia +console.log(a.indexOf('b', 2)) // registra 3 +console.log(a.indexOf('z')) // logs -1, porque no se encontró 'z' +</pre> + +<p>{{jsxref("Array.lastIndexOf", "lastIndexOf(searchElement [, fromIndex])")}} funciona como <code>indexOf</code>, pero comienza al final y busca hacia atrás.</p> + +<pre class="brush: js notranslate">leta = ['a', 'b', 'c', 'd', 'a', 'b'] +console.log(a.lastIndexOf('b')) // registra 5 + +// Ahora inténtalo de nuevo, comenzando desde antes de la última coincidencia +console.log(a.lastIndexOf('b', 4)) // registra 1 +console.log(a.lastIndexOf('z')) // registra -1 +</pre> + +<p>{{jsxref("Array.forEach", "forEach(callback[, thisObject])")}} ejecuta <code><var>callback</var></code> en cada elemento del arreglo y devuelve <code>undefined</code>.</p> + +<pre class="brush: js notranslate">leta = ['a', 'b', 'c'] +a.forEach(function(elemento) { console.log(elemento) }) +// registra cada elemento por turno +</pre> + +<p>{{jsxref("Array.map", "map(callback [, thisObject])")}} devuelve un nuevo arreglo del valor de retorno de ejecutar <code><var>callback</var></code> en cada elemento del arreglo.</p> + +<pre class="brush: js notranslate">let a1 = ['a', 'b', 'c'] +let a2 = a1.map(function(item) { return item.toUpperCase() }) +console.log(a2) // registra ['A', 'B', 'C'] +</pre> + +<p>{{jsxref("Array.filter", "filter(callback [, thisObject])")}} devuelve un nuevo arreglo que contiene los elementos para los cuales <code><var>callback</var></code> devolvió <code>true</code>.</p> + +<pre class="brush: js notranslate">let a1 = ['a', 10, 'b', 20, 'c', 30] +let a2 = a1.filter(function(item) { return typeof item === 'number'; }) +console.log(a2) // registra [10, 20, 30] +</pre> + +<p>{{jsxref("Array.every", "every(callback [, thisObject])")}} devuelve <code>true</code> si <code><var>callback</var></code> devuelve <code>true</code> para cada elemento del arreglo.</p> + +<pre class="brush: js notranslate">function isNumber(value) { + return typeof value === 'number' +} +let a1 = [1, 2, 3] +console.log(a1.every(isNumber)) // registra true +let a2 = [1, '2', 3] +console.log(a2.every(isNumber)) // registra false +</pre> + +<p>{{jsxref("Array.some", "some(callback[, thisObject])")}} devuelve <code>true</code> si <code><var>callback</var></code> devuelve <code>true</code> para al menos un elemento del arreglo.</p> + +<pre class="brush: js notranslate">function isNumber(value) { + return typeof value === 'number' +} +let a1 = [1, 2, 3] +console.log(a1.some(isNumber)) // registra true +let a2 = [1, '2', 3] +console.log(a2.some(isNumber)) // registra true +let a3 = ['1', '2', '3'] +console.log(a3.some(isNumber)) // registra false +</pre> + +<p>{{jsxref("Array.reduce", "reduce(callback[, initialValue])")}} aplica <code><var>callback</var>(<var>acumulador</var>, <var>currentValue</var>[, <var>currentIndex</var>[,<var>array</var>]])</code> para cada valor en el arreglo con el fin de reducir la lista de elementos a un solo valor. La función <code>reduce</code> devuelve el valor final devuelto por la función <code><var>callback</var></code>. </p> + +<p>Si se especifica <code><var>initialValue</var></code>, entonces <code><var>callback</var></code> se llama con <code><var>initialValue</var></code> como primer valor de parámetro y el valor del primer elemento del arreglo como segundo valor de parámetro. </p> + +<p>Si <code><var>initialValue</var></code> <em>no</em> es especificado, entonces <code><var>callback</var></code> los primeros dos valores de parámetro deberán ser el primer y segundo elemento del arreglo. En <em>cada</em> llamada subsiguiente, el valor del primer parámetro será el valor de <code><var>callback</var></code> devuelto en la llamada anterior, y el valor del segundo parámetro será el siguiente valor en el arreglo.</p> + +<p>Si <code><var>callback</var></code> necesita acceso al índice del elemento que se está procesando, al acceder al arreglo completo, están disponibles como parámetros opcionales.</p> + +<pre class="brush: js notranslate">leta = [10, 20, 30] +let total = a.reduce(function(accumulator, currentValue) { return accumulator + currentValue }, 0) +console.log(total) // Imprime 60 +</pre> + +<p>{{jsxref("Array.reduceRight", "reduceRight(callback[, initialValue])")}} funciona como <code>reduce()</code>, pero comienza con el último elemento.</p> + +<p><code>reduce</code> y <code>reduceRight</code> son los menos obvios de los métodos de arreglo iterativos. Se deben utilizar para algoritmos que combinan dos valores de forma recursiva para reducir una secuencia a un solo valor.</p> + +<h3 id="Arreglos_multidimensionales">Arreglos multidimensionales</h3> + +<p>Los arreglos se pueden anidar, lo cual significa que un arreglo puede contener otro arreglo como elemento. Usando esta característica de los arreglos de JavaScript, se pueden crear arreglos multidimensionales.</p> + +<p>El siguiente código crea un arreglo bidimensional.</p> + +<pre class="brush: js notranslate">let a = new Array(4) +for (let i = 0; i < 4; i++) { + a[i] = new Array(4) + for (let j = 0; j < 4; j++) { + a[i][j] = '[' + i + ', ' + j + ']' + } +} +</pre> + +<p>Este ejemplo crea un arreglo con las siguientes filas:</p> + +<pre class="notranslate">Row 0: [0, 0] [0, 1] [0, 2] [0, 3] +Row 1: [1, 0] [1, 1] [1, 2] [1, 3] +Row 2: [2, 0] [2, 1] [2, 2] [2, 3] +Row 3: [3, 0] [3, 1] [3, 2] [3, 3] +</pre> + +<h3 id="Usar_arreglos_para_almacenar_otras_propiedades">Usar arreglos para almacenar otras propiedades</h3> + +<p>Los arreglos también se pueden utilizar como objetos para almacenar información relacionada.</p> + +<pre class="brush: js notranslate"><code>const arr = [1, 2, 3]; +arr.property = "value"; +console.log(arr.property); // Registra "value"</code> +</pre> + +<h3 id="Arreglos_y_expresiones_regulares">Arreglos y expresiones regulares</h3> + +<p>Cuando un arreglo es el resultado de una coincidencia entre una expresión regular y una cadena, el arreglo devuelve propiedades y elementos que proporcionan información sobre la coincidencia. Un arreglo es el valor de retorno de {{jsxref("Global_Objects/RegExp/exec", "RegExp.exec()")}}, {{jsxref("Global_Objects/String/match", "String.match()")}} y {{jsxref("Global_Objects/String/split", "String.split()")}}. Para obtener información sobre el uso de arreglos con expresiones regulares, consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones regulares</a>.</p> + +<h3 id="Trabajar_con_objetos_tipo_array">Trabajar con objetos tipo array</h3> + +<p>Algunos objetos JavaScript, como <a href="/es/docs/Web/API/NodeList" title="Los objetos <code>NodeList</code> son colecciones de nodos, generalmente devueltos por propiedades como ↑Node.childNodes↓ y métodos como ↑document.querySelectorAll()↓."><code>NodeList</code></a> devueltos por <a href="/es/docs/Web/API/Document/getElementsByTagName" title="devuelve una <code>HTMLCollection</code> de elementos con el nombre de etiqueta dado."><code>document.getElementsByTagName()</code></a> o un objeto {{jsxref("Functions/arguments", "arguments")}} disponible dentro del cuerpo de una función, se ven y se comportan como arreglos en la superficie pero no comparten todos sus métodos. El objeto <code>arguments</code> proporciona un atributo {{jsxref("Global_Objects/Function/length", "length")}} pero no implementa el método {{jsxref("Array.forEach", "forEach()")}}, por ejemplo.</p> + +<p>Los métodos de arreglo no se pueden llamar directamente en objetos similares a un arreglo.</p> + +<pre class="brush: js example-bad notranslate"><code>function printArguments() { + arguments.forEach(function(item) {// <span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox-stackTrace reps-custom-format">TypeError: <span class="objectBox objectBox-string">arguments.forEach no es una función</span></span></span></span></span> + console.log(item); + }); +}</code> +</pre> + +<p>Pero puedes llamarlos indirectamente usando {{jsxref("Global_Objects/Function/call", "Function.prototype.call()")}}.</p> + +<pre class="brush: js example-good notranslate"><code>function printArguments() { + Array.prototype.forEach.call(arguments, function(item) { + console.log(item); + }); +}</code> +</pre> + +<p>Los métodos de prototipos de arreglos también se pueden utilizar en cadenas, ya que proporcionan acceso secuencial a sus caracteres de forma similar a los arreglos:</p> + +<pre class="brush: js notranslate">Array.prototype.forEach.call('a string', function(chr) { + console.log(chr) +}) +</pre> + +<h2 id="Arrays_tipados">Arrays tipados</h2> + +<p><a href="/es/docs/Web/JavaScript/Typed_arrays">Los arreglos tipados en JavaScript</a> son objetos similares a arreglos y proporcionan un mecanismo para acceder a datos binarios sin procesar. Como ya sabes, los objetos {{jsxref("Array")}} crecen y se encogen dinámicamente y pueden tener cualquier valor de JavaScript. Los motores de JavaScript realizan optimizaciones para que estos arreglos sean rápidos. Sin embargo, a medida que las aplicaciones web se vuelven cada vez más poderosas, agregando características como manipulación de audio y video, acceso a datos sin procesar usando <a href="/es/docs/WebSockets">WebSockets</a>, y así sucesivamente, ha quedado claro que hay momentos en los que sería útil para que el código JavaScript pueda manipular rápida y fácilmente datos binarios sin procesar en arreglos tipados.</p> + +<h3 id="Búferes_y_vistas_arquitectura_de_los_arreglos_con_tipo">Búferes y vistas: arquitectura de los arreglos con tipo</h3> + +<p>Para lograr la máxima flexibilidad y eficiencia, los arreglos de JavaScript dividen la implementación en <strong>búferes</strong> y <strong>vistas</strong>. Un búfer (implementado por el objeto {{jsxref("ArrayBuffer")}} es un objeto que representa una porción de datos; no tiene un formato del que hablar y no ofrece ningún mecanismo para acceder a su contenido. Para acceder a la memoria contenida en un búfer, necesitas usar una vista. Una vista proporciona un <strong>contexto </strong>, es decir, un tipo de datos, un desplazamiento inicial y un número de elementos, que convierte los datos en un arreglo con tipo real.</p> + +<p><img alt="Arreglos tipados en un <code>ArrayBuffer</code>" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> + +<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3> + +<p>{{jsxref("ArrayBuffer")}} es un tipo de dato que se utiliza para representar un búfer de datos binarios genérico de longitud fija. No puedes manipular directamente el contenido de un <code>ArrayBuffer</code>; en su lugar, creas una vista de arreglo con tipo o un {{jsxref("DataView")}} que representa el búfer en un formato específico, y lo usa para leer y escribir el contenido del búfer.</p> + +<h3 id="Vistas_de_arreglos_tipados">Vistas de arreglos tipados</h3> + +<p>Las vistas de arreglos tipados tienen nombres autodescriptivos y proporcionan vistas para todos los tipos numéricos habituales como <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> y así sucesivamente. Hay una vista de arreglo con tipo especial, {jsxref("Uint8ClampedArray")}}, que fija los valores entre <code>0</code> y <code>255</code>. Esto es útil para <a href="/es/docs/Web/API/ImageData">procesamiento de datos de Canvas</a>, por ejemplo.</p> + +<table class="standard-table"> + <thead> + <tr> + <th class="header" scope="col">Tipo</th> + <th class="header" scope="col">Rango 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>octeto</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>octeto</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, por ejemplo,<code>1.123 ... 15</code>)</td> + <td><code>double 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> + +<p>Para obtener más información, consulta <a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos tipados en JavaScript</a> y la documentación de referencia para los diferentes objetos {{jsxref("TypedArray")}}.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Keyed_Collections")}}</p> diff --git a/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html b/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html new file mode 100644 index 0000000000..d685818029 --- /dev/null +++ b/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html @@ -0,0 +1,456 @@ +--- +title: Control de flujo y manejo de errores +slug: Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores +tags: + - Control de flujo + - Guía + - JavaScript + - Lógica + - Manejo de errores + - Novato + - Principiantes + - Promesas + - declaraciones + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Control_flow_and_error_handling +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> + +<p class="seoSummary">JavaScript admite un compacto conjunto de declaraciones, específicamente declaraciones de control de flujo, que puedes utilizar para incorporar una gran cantidad de interactividad en tu aplicación. Este capítulo proporciona una descripción de estas declaraciones.</p> + +<p>La {{JSxRef("Sentencias", "referencia de JavaScript")}} contiene detalles exhaustivos sobre las declaraciones de este capítulo. El carácter de punto y coma (<code>;</code>) se utiliza para separar declaraciones en código JavaScript.</p> + +<p>Todas las expresiones e instrucciones de JavaScript también son una declaración. Consulta {{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}} para obtener información completa sobre las expresiones.</p> + +<h2 id="Declaración_de_bloque">Declaración de bloque</h2> + +<p>La declaración más básica es una <dfn>declaración de bloque</dfn>, que se utiliza para agrupar instrucciones. El bloque está delimitado por un par de llaves:</p> + +<pre class="syntaxbox notranslate">{ + <var>statement_1</var>; + <var>statement_2</var>; + ⋮ + <var>statement_n</var>; +} +</pre> + +<h3 id="Ejemplo"><strong>Ejemplo</strong></h3> + +<p>Las declaraciones de bloque se utilizan comúnmente con declaraciones de control de flujo (<code>if</code>, <code>for</code>, <code>while</code>).</p> + +<pre class="brush: js notranslate">while (x < 10) { + x++; +} +</pre> + +<p>Aquí, <code>{ x++; }</code> es la declaración de bloque.</p> + +<div class="blockIndicator note"> +<p><strong>Importante</strong>: JavaScript anterior a ECMAScript2015 (6<sup>a</sup> edición) <strong>no</strong> tiene ámbito de bloque. En JavaScript más antiguo, las variables introducidas dentro de un bloque tienen como ámbito la función o script que las contiene, y los efectos de establecerlas persisten más allá del bloque en sí mismo. En otras palabras, las <em>declaraciones de bloque no definen un ámbito</em>.</p> + +<p>Los bloques "independientes" en JavaScript pueden producir resultados completamente diferentes de los que producirían en C o Java. Por ejemplo:</p> + +<pre class="brush: js notranslate">var x = 1; +{ + var x = 2; +} +console.log(x); // muestra 2 +</pre> + +<p>Esto muestra <code>2</code> porque la instrucción <code>var x</code> dentro del bloque está en el mismo ámbito que la instrucción <code>var x</code> anterior del bloque. (En C o Java, el código equivalente habría generado <code>1</code>).</p> + +<p><strong>A partir de ECMAScript2015</strong>, las declaraciones de variables <code>let</code> y <code>const</code> tienen un ámbito de bloque. Consulta las páginas de referencia de {{JSxRef("Sentencias/let", "let")}} y {{JSxRef("Sentencias/const", "const")}} para obtener más información.</p> +</div> + +<h2 id="Expresiones_condicionales">Expresiones condicionales</h2> + +<p>Una expresión condicional es un conjunto de instrucciones que se ejecutarán si una condición especificada es verdadera. JavaScript admite dos expresiones condicionales: <code>if...else</code> y <code>switch</code>.</p> + +<h3 id="Expresión_if...else">Expresión <code>if...else</code></h3> + +<p>Utiliza la expresión <code>if</code> para ejecutar una instrucción si una condición lógica es <code>true</code>. Utiliza la cláusula opcional <code>else</code> para ejecutar una instrucción si la condición es <code>false</code>.</p> + +<p>Una declaración <code>if</code> se ve así:</p> + +<pre class="syntaxbox notranslate">if (<var>condition</var>) { + <var>statement_1</var>; +} else { + <var>statement_2</var>; +}</pre> + +<p>Aquí, la <code><var>condition</var></code> puede ser cualquier expresión que se evalúe como <code>true</code> o <code>false</code>. (Consulta {{JSxRef("Objetos_globales/Boolean", "Boolean", "#Description")}} para obtener una explicación de lo que se evalúa como <code>true</code> y <code>false</code>).</p> + +<p>Si <code><var>condition</var></code> se evalúa como <code>true</code>, se ejecuta <code><var>statement_1</var></code>. De lo contrario, se ejecuta <code><var>statement_2</var></code>. <code><var>statement_1</var></code> y <code><var>statement_2</var></code> pueden ser cualquier declaración, incluidas otras declaraciones <code>if</code> anidadas.</p> + +<p>También puedes componer las declaraciones usando <code>else if</code> para que se prueben varias condiciones en secuencia, de la siguiente manera:</p> + +<pre class="syntaxbox notranslate">if (<var>condition_1</var>) { + <var>statement_1</var>; +} else if (<var>condition_2</var>) { + <var>statement_2</var>; +} else if (<var>condition_n</var>) { + <var>statement_n</var>; +} else { + <var>statement_last</var>; +} +</pre> + +<p>En el caso de múltiples condiciones, solo se ejecutará la primera condición lógica que se evalúe como <code>true</code>. Para ejecutar múltiples declaraciones, agrúpalas dentro de una declaración de bloque (<code>{ … }</code>).</p> + +<h4 id="Mejores_prácticas">Mejores prácticas</h4> + +<p>En general, es una buena práctica usar siempre declaraciones de bloque, <em>especialmente</em> al anidar declaraciones <code>if</code>:</p> + +<pre class="syntaxbox notranslate">if (<var>condition</var>) { + <var>statement_1_runs_if_condition_is_true</var>; + <var>statement_2_runs_if_condition_is_true</var>; +} else { + <var>statement_3_runs_if_condition_is_false</var>; + <var>statement_4_runs_if_condition_is_false</var>; +} +</pre> + +<p>No es aconsejable utilizar asignaciones simples en una expresión condicional, porque la asignación se puede confundir con la igualdad al mirar el código.</p> + +<p>Por ejemplo, <em>no</em> escribas un código como este:</p> + +<pre class="example-bad brush: js notranslate">// Propenso a ser mal interpretado como "x == y" +if (x = y) { + /* expresiones aquí */ +} +</pre> + +<p>Si necesitas usar una tarea en una expresión condicional, una práctica común es poner paréntesis adicionales alrededor de la asignación, así:</p> + +<pre class="example-good brush: js notranslate">if ((x = y)) { + /* expresiones aquí */ +} +</pre> + +<h4 id="Valores_falsos">Valores falsos</h4> + +<p>Los siguientes valores se evalúan como <code>false</code> (también conocidos como valores {{Glossary("Falsy")}}:</p> + +<ul> + <li><code>false</code></li> + <li><code>undefined</code></li> + <li><code>null</code></li> + <li><code>0</code></li> + <li><code>NaN</code></li> + <li>la cadena vacía (<code>""</code>)</li> +</ul> + +<p>Todos los demás valores, incluidos todos los objetos, se evalúan como <code>true</code> cuando se pasan a una declaración condicional.</p> + +<div class="blockIndicator note"> +<p><strong>Precaución</strong>: ¡No confundas los valores booleanos primitivos <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto {{JSxRef("Boolean")}}!.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js notranslate">var b = new Boolean(false); +if (b) // esta condición se evalúa como verdadera +if (b == true) // esta condición se evalúa como false +</pre> +</div> + +<h4 id="Ejemplo_2"><strong>Ejemplo</strong></h4> + +<p>En el siguiente ejemplo, la función <code>checkData</code> devuelve <code>true</code> si el número de caracteres en un objeto <code>Text</code> es tres. De lo contrario, muestra una alerta y devuelve <code>false</code>.</p> + +<pre class="brush: js notranslate">function checkData() { + if (document.form1.threeChar.value.length == 3) { + return true; + } else { + alert( + 'Introduce exactamente tres caracteres. ' + + `${document.form1.threeChar.value} no es válido.`); + return false; + } +} +</pre> + +<h3 id="Declaración_switch">Declaración <code>switch</code></h3> + +<p>Una instrucción <code>switch</code> permite que un programa evalúe una expresión e intente hacer coincidir el valor de la expresión con una etiqueta <code>case</code>. Si la encuentra, el programa ejecuta la declaración asociada.</p> + +<p>Una instrucción <code>switch</code> se ve así:</p> + +<pre class="syntaxbox notranslate">switch (<var>expression</var>) { + case <var>label_1</var>: + <var>statements_1</var> + [break;] + case <var>label_2</var>: + <var>statements_2</var> + [break;] + … + default: + <var>statements_def</var> + [break;] +} +</pre> + +<p>JavaScript evalúa la instrucción <code>switch</code> anterior de la siguiente manera:</p> + +<ul> + <li>El programa primero busca una cláusula <code>case</code> con una etiqueta que coincida con el valor de expresión y luego transfiere el control a esa cláusula, ejecutando las declaraciones asociadas.</li> + <li>Si no se encuentra una etiqueta coincidente, el programa busca la cláusula opcional <code>default</code>: + <ul> + <li>Si se encuentra una cláusula <code>default</code>, el programa transfiere el control a esa cláusula, ejecutando las declaraciones asociadas.</li> + <li>Si no se encuentra una cláusula <code>default</code>, el programa reanuda la ejecución en la declaración que sigue al final de <code>switch</code>.</li> + <li>(Por convención, la cláusula <code>default</code> está escrita como la última cláusula, pero no es necesario que sea así).</li> + </ul> + </li> +</ul> + +<h4 id="Declaraciones_break">Declaraciones <code>break</code></h4> + +<p>La declaración opcional <code>break</code> asociada con cada cláusula <code>case</code> asegura que el programa salga de <code>switch</code> una vez que se ejecuta la instrucción coincidente, y luego continúa la ejecución en la declaración que sigue a <code>switch</code>. Si se omite <code>break</code>, el programa continúa la ejecución dentro de la instrucción <code>switch</code> (y evaluará el siguiente <code>case</code>, y así sucesivamente).</p> + +<h5 id="Ejemplo_3"><strong>Ejemplo</strong></h5> + +<p>En el siguiente ejemplo, si <code><var>fruittype</var></code> se evalúa como '<code>Bananas</code>', el programa hace coincidir el valor con el caso '<code>Bananas</code>' y ejecuta la declaración asociada. Cuando se encuentra <code>break</code>, el programa sale del <code>switch</code> y continúa la ejecución de la instrucción que sigue a <code>switch</code>. Si se omitiera <code>break</code>, también se ejecutará la instrucción para <code>case 'Cherries'</code>.</p> + +<pre class="brush: js notranslate">switch (<var>fruittype</var>) { + case 'Oranges': + console.log('Las naranjas cuestan $0.59 la libra.'); + break; + case 'Apples': + console.log('Las manzanas cuestan $0.32 la libra.'); + break; + case 'Bananas': + console.log('Los plátanos cuestan $0.48 la libra.'); + break; + case 'Cherries': + console.log('Las cerezas cuestan $3.00 la libra.'); + break; + case 'Mangoes': + console.log('Los mangos cuestan $0.56 la libra.'); + break; + case 'Papayas': + console.log('Los mangos y las papayas cuestan $2.79 la libra.'); + break; + default: + console.log(`Lo sentimos, no tenemos ${fruittype}.`); +} +console.log("¿Hay algo más que quieras?");</pre> + +<h2 id="Expresiones_de_manejo_de_excepciones">Expresiones de manejo de excepciones</h2> + +<p>Puedes lanzar excepciones usando la instrucción <code>throw</code> y manejarlas usando las declaraciones <code>try...catch</code>.</p> + +<ul> + <li>{{anch("Expresion_throw", "Expresión throw")}}</li> + <li>{{anch("Declaracion_try...catch", "Declaración try...catch")}}</li> +</ul> + +<h3 id="Tipos_de_excepciones">Tipos de excepciones</h3> + +<p>Casi cualquier objeto se puede lanzar en JavaScript. Sin embargo, no todos los objetos lanzados son iguales. Si bien es común lanzar números o cadenas como errores, con frecuencia es más efectivo usar uno de los tipos de excepción creados específicamente para este propósito:</p> + +<ul> + <li>{{JSxRef("Objetos_globales/Error", "excepciones ECMAScript", "#Tipos_Error")}}</li> + <li>La interfaz {{web.link("/es/docs/Web/API/DOMException", "DOMException")}} representa un evento anormal (llamado excepción) que ocurre como resultado de llamar a un método o acceder a una propiedad de una API web y la interfaz {{web.link("/es/docs/Web/API/DOMError", "DOMError ")}} describe un objeto de error que contiene un nombre de error.</li> +</ul> + +<h3 id="Expresión_throw">Expresión <code>throw</code></h3> + +<p>Utiliza la expresión <code>throw</code> para lanzar una excepción. Una expresión <code>throw</code> especifica el valor que se lanzará:</p> + +<pre class="syntaxbox notranslate">throw <var>expression</var>; +</pre> + +<p>Puedes lanzar cualquier expresión, no solo expresiones de un tipo específico. El siguiente código arroja varias excepciones de distintos tipos:</p> + +<pre class="brush: js notranslate">throw 'Error2'; // tipo String +throw 42; // tipo Number +throw true; // tipo Boolean +throw {toString: function() { return "¡Soy un objeto!"; } }; +</pre> + +<div class="note"> +<p><strong>Nota</strong> Puedes especificar un objeto cuando lanzas una excepción. A continuación, puedes hacer referencia a las propiedades del objeto en el bloque <code>catch</code>.</p> +</div> + +<pre class="brush: js notranslate">// Crea un objeto tipo de UserException +function UserException(message) { + this.message = message; + this.name = 'UserException'; +} + +// Hacer que la excepción se convierta en una bonita cadena cuando se usa como cadena +// (por ejemplo, por la consola de errores) +UserException.prototype.toString = function() { + return `${this.name}: "${this.message}"`; +} + +// Crea una instancia del tipo de objeto y tírala +throw new UserException('Valor muy alto');</pre> + +<h3 id="Declaración_try...catch">Declaración <code>try...catch</code></h3> + +<p>La declaración <code>try...catch</code> marca un bloque de expresiones para probar y especifica una o más respuestas en caso de que se produzca una excepción. Si se lanza una excepción, la declaración <code>try...catch</code> la detecta.</p> + +<p>La declaración <code>try...catch</code> consta de un bloque <code>try</code>, que contiene una o más declaraciones, y un bloque <code>catch</code>, que contiene declaraciones que especifican qué hacer si se lanza una excepción en el bloque <code>try</code>.</p> + +<p>En otras palabras, deseas que el bloque <code>try</code> tenga éxito, pero si no es así, deseas que el control pase al bloque <code>catch</code>. Si alguna instrucción dentro del bloque <code>try</code> (o en una función llamada desde dentro del bloque <code>try</code>) arroja una excepción, el control <em>inmediatamente</em> cambia al bloque <code>catch</code>. Si no se lanza ninguna excepción en el bloque <code>try</code>, se omite el bloque <code>catch</code>. El bloque <code>finalmente</code> se ejecuta después de que se ejecutan los bloques <code>try</code> y <code>catch</code>, pero antes de las declaraciones que siguen a la declaración <code>try...catch</code>.</p> + +<p>El siguiente ejemplo usa una instrucción <code>try...catch</code>. El ejemplo llama a una función que recupera el nombre de un mes de un arreglo en función del valor pasado a la función. Si el valor no corresponde a un número de mes (<code>1</code>-<code>12</code>), se lanza una excepción con el valor "<code>InvalidMonthNo</code>" y las declaraciones en el bloque <code>catch</code> establezca la variable <code><var>monthName</var></code> en '<code>unknown</code>'.</p> + +<pre class="brush: js notranslate">function getMonthName(mo) { + mo = mo - 1; // Ajusta el número de mes para el índice del arreglo (1 = Ene, 12 = Dic) + let months = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', + 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']; + if (months[mo]) { + return months[mo]; + } else { + throw 'InvalidMonthNo'; // aquí se usa la palabra clave throw + } +} + +try { // declaraciones para try + monthName = getMonthName(myMonth); // la función podría lanzar una excepción +} +catch (e) { + monthName = 'unknown'; + logMyErrors(e); // pasar el objeto exception al controlador de errores (es decir, su propia función) +} +</pre> + +<h4 id="El_bloque_catch">El bloque <code>catch</code></h4> + +<p>Puedes usar un bloque <code>catch</code> para manejar todas las excepciones que se puedan generar en el bloque <code>try</code>.</p> + +<pre class="syntaxbox notranslate">catch (<var>catchID</var>) { + <var>instrucciones</var> +} +</pre> + +<p>El bloque <code>catch</code> especifica un identificador (<code><var>catchID</var></code> en la sintaxis anterior) que contiene el valor especificado por la expresión <code>throw</code>. Puedes usar este identificador para obtener información sobre la excepción que se lanzó.</p> + +<p>JavaScript crea este identificador cuando se ingresa al bloque <code>catch</code>. El identificador dura solo la duración del bloque <code>catch</code>. Una vez que el bloque <code>catch</code> termina de ejecutarse, el identificador ya no existe.</p> + +<p>Por ejemplo, el siguiente código lanza una excepción. Cuando ocurre la excepción, el control se transfiere al bloque <code>catch</code>.</p> + +<pre class="brush: js notranslate">try { + throw 'myException'; // genera una excepción +} +catch (err) { + // declaraciones para manejar cualquier excepción + logMyErrors(err); // pasa el objeto exception al controlador de errores +} +</pre> + +<div class="blockIndicator note"> +<p><strong>Mejores prácticas:</strong> Cuando se registran errores en la consola dentro de un bloque <code>catch</code>, se usa <code>console.error()</code> en lugar de <code>console.log()</code> aconsejado para la depuración. Formatea el mensaje como un error y lo agrega a la lista de mensajes de error generados por la página.</p> +</div> + +<h4 id="El_bloque_finally">El bloque <code>finally</code></h4> + +<p>El bloque <code>finally</code> contiene instrucciones que se ejecutarán <em>después</em> que se ejecuten los bloques <code>try</code> y <code>catch</code>. Además, el bloque <code>finally</code> ejecuta <em>antes</em> el código que sigue a la declaración <code>try...catch...finally</code>.</p> + +<p>También es importante notar que el bloque <code>finally</code> se ejecutará <em>independientemente de que</em> se produzca una excepción. Sin embargo, si se lanza una excepción, las declaraciones en el bloque <code>finally</code> se ejecutan incluso si ningún bloque <code>catch</code> maneje la excepción que se lanzó.</p> + +<p>Puedes usar el bloque <code>finally</code> para hacer que tu script falle correctamente cuando ocurra una excepción. Por ejemplo, es posible que debas liberar un recurso que tu script haya inmovilizado.</p> + +<p>El siguiente ejemplo abre un archivo y luego ejecuta declaraciones que usan el archivo. (JavaScript de lado del servidor te permite acceder a los archivos). Si se lanza una excepción mientras el archivo está abierto, el bloque <code>finally</code> cierra el archivo antes de que falle el script. Usar <code>finally</code> aquí <em>asegura</em> que el archivo nunca se deje abierto, incluso si ocurre un error.</p> + +<pre class="brush: js notranslate">openMyFile(); +try { + writeMyFile(theData); // Esto puede arrojar un error +} catch(e) { + handleError(e); // Si ocurrió un error, manéjalo +} finally { + closeMyFile(); // Siempre cierra el recurso +} +</pre> + +<p>Si el bloque <code>finally</code> devuelve un valor, este valor se convierte en el valor de retorno de toda la producción de <code>try…catch…finally</code>, independientemente de las declaraciones <code>return</code> en los bloques <code>try</code> y <code>catch</code>:</p> + +<pre class="brush: js notranslate">function f() { + try { + console.log(0); + throw 'bogus'; + } catch(e) { + console.log(1); + return true; // esta declaración de retorno está suspendida + // hasta que el bloque finally se haya completado + console.log(2); // no alcanzable + } finally { + console.log(3); + return false; // sobrescribe el "return" anterior + console.log(4); // no alcanzable + } + // "return false" se ejecuta ahora + console.log(5); // inalcanzable +} +console.log(f()); // 0, 1, 3, false +</pre> + +<p>La sobrescritura de los valores devueltos por el bloque <code>finally</code> también se aplica a las excepciones lanzadas o relanzadas dentro del bloque <code>catch</code>:</p> + +<pre class="brush: js notranslate">function f() { + try { + throw 'bogus'; + } catch(e) { + console.log('captura "falso" interno'); + throw e; // esta instrucción throw se suspende hasta + // que el bloque finally se haya completado + } finally { + return false; // sobrescribe el "throw" anterior + } + // "return false" se ejecuta ahora +} + +try { + console.log(f()); +} catch(e) { + // ¡esto nunca se alcanza! + // mientras se ejecuta f(), el bloque `finally` devuelve false, + // que sobrescribe el `throw` dentro del `catch` anterior + console.log('"falso" externo capturado'); +} + +// Produce +// "falso" interno capturado +// false</pre> + +<h4 id="Declaraciones_try...catch_anidadas">Declaraciones <code>try...catch</code> anidadas</h4> + +<p>Puedes anidar una o más declaraciones <code>try...catch</code>.</p> + +<p>Si un bloque <code>try</code> interno <em>no</em> tiene un bloque <code>catch</code> correspondiente:</p> + +<ol> + <li><em>debe</em> contener un bloque <code>finally</code>, y</li> + <li>el bloque <code>catch</code> adjunto de la declaración <code>try...catch</code> se comprueba para una coincidencia.</li> +</ol> + +<p>Para obtener más información, consulta {{JSxRef("Sentencias/try...catch", "bloques try anidados", "#Nested_try-blocks")}} en la una página de referencia {{JSxRef("Sentencias/try...catch", "try...catch")}}.</p> + +<h3 id="Utilizar_objetos_Error">Utilizar objetos <code>Error</code></h3> + +<p>Dependiendo del tipo de error, es posible que puedas utilizar las propiedades <code>name</code> y <code>message</code> para obtener un mensaje más refinado.</p> + +<p>La propiedad <code>name</code> proporciona la clase general de <code>Error</code> (tal como <code>DOMException</code> o <code>Error</code>), mientras que <code>message</code> generalmente proporciona un mensaje más conciso que el que se obtendría al convertir el objeto error en una cadena.</p> + +<p>Si estás lanzando tus propias excepciones, para aprovechar estas propiedades (por ejemplo, si tu bloque <code>catch</code> no discrimina entre tus propias excepciones y las del sistema), puedes usar el constructor <code>Error</code>.</p> + +<p>Por ejemplo:</p> + +<pre class="brush: js notranslate">function doSomethingErrorProne() { + if (ourCodeMakesAMistake()) { + throw (new Error('El mensaje')); + } else { + doSomethingToGetAJavascriptError(); + } +} +⋮ +try { + doSomethingErrorProne(); +} catch (e) { // AHORA, en realidad usamos `console.error()` + console.error(e.name); // registra 'Error' + console.error(e.message); // registra 'The message' o un mensaje de error de JavaScript +} +</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Grammar_and_types", "Web/JavaScript/Guide/Loops_and_iteration")}}</div> diff --git a/files/es/web/javascript/guide/details_of_the_object_model/index.html b/files/es/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..12b25fb5a9 --- /dev/null +++ b/files/es/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,797 @@ +--- +title: Detalles del modelo de objetos +slug: Web/JavaScript/Guide/Details_of_the_Object_Model +tags: + - Guía + - Intermedio + - JavaScript + - Objeto + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> + +<p class="summary">JavaScript es un lenguaje orientado a objetos basado en prototipos en lugar de clases. Debido a esta diferencia, puede ser menos evidente cómo JavaScript te permite crear jerarquías de objetos y herencia de propiedades y sus valores. Este capítulo intenta clarificar estos puntos.</p> + +<p>Este capítulo asume que tienes alguna familiaridad con JavaScript y que has usado funciones de JavaScript para crear objetos sencillos.</p> + +<h2 id="Lenguajes_basados_en_clases_vs._basados_en_prototipos">Lenguajes basados en clases vs. basados en prototipos</h2> + +<p>Los lenguajes orientados a objetos basados en clases, como Java y C++, se basan en el concepto de dos entidades distintas: clases e instancias.</p> + +<ul> + <li>Una <em>clase</em> define todas las propiedades (considerando como propiedades los métodos y campos de Java, o los miembros de C++) que caracterizan un determinado conjunto de objetos. Una clase es una entidad abstracta, más que cualquier miembro en particular del conjunto de objetos que describe. Por ejemplo, la clase <span style="font-size: 14px; line-height: 1.5em;"> </span><code style="font-size: 14px;">Empleado</code><span style="font-size: 14px; line-height: 1.5em;"> puede representar al conjunto de todos los empleados.</span></li> + <li>Una <em>instancia</em>, por otro lado, es la instanciación de una clase; es decir, uno de sus miembros. Por ejemplo, <code>Victoria</code> podría ser una instancia de la clase <code>Empleado</code>, representando a un individuo en particular como un empleado. Una instancia tiene exactamente las mismas propiedades de su clase padre (ni más, ni menos).</li> +</ul> + +<p>Un lenguaje basado en prototipos, como JavaScript, no hace esta distinción: simplemente tiene objetos. Un lenguaje basado en prototipos toma el concepto de <em>objeto prototípico</em>, un objeto que se utiliza como una plantilla a partir de la cual se obtiene el conjunto inicial de propiedades de un nuevo objeto. Cualquier objeto puede especificar sus propias propiedades, ya sea cuando es creado o en tiempo de ejecución. Adicionalmente, cualquier objeto puede ser utilizado como el <em>prototipo</em> de otro objeto, permitiendo al segundo objeto compartir las propiedades del primero.</p> + +<h3 id="Definición_de_una_clase">Definición de una clase</h3> + +<p>En los lenguajes basados en clases defines una clase en una <em>definición de clase</em> separada. En esa definición puedes especificar métodos especiales, llamados <em>constructores</em>, para crear instancias de la clase. Un método constructor puede especificar valores iniciales para las propiedades de la instancia y realizar otro procesamiento de inicialización apropiado en el momento de la creación. Se utiliza el operador <code>new</code> junto al constructor para crear instancias de clases.</p> + +<p>JavaScript sigue un modelo similar, pero sin tener la definición de clase separada del constructor. En su lugar, se define una función constructor para crear objetos con un conjunto inicial de propiedades y valores. Cualquier función JavaScript puede utilizarse como constructor. Se utiliza el operador <code>new</code> con una función constructor para crear un nuevo objeto.</p> + + + +<div class="blockIndicator note"> +<p>Nota que ECMAScript 2015 introduce la <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">declaración de clases</a>:</p> + +<blockquote> +<p>Las Clases en JavaScript, introducidas en ECMAScript 2015, son básicamente un retoque sintáctico sobre la herencia basada en prototipos de JavaScript. La sintaxis <em>class</em> no introduce un nuevo modelo de herencia orientado a objetos en Javascript.</p> +</blockquote> +</div> + + + +<h3 id="Subclases_y_herencia">Subclases y herencia</h3> + +<p>En un lenguaje basado en clases, creas una jerarquía de clases a través de la definición de clases. En una definición de clase, puedes especificar que la nueva clase es una <em>subclase</em> de una clase existente. Esta subclase hereda todas las propiedades de la superclase y - además -puede añadir nuevas propiedades o modificar las heredadas. Por ejemplo, supongamos que la clase <code>Employee</code> tiene sólo las propiedades <code>name</code> y <code>dept</code>, y que <code>Manager</code> es una subclase de <code>Employee</code> que añade la propiedad <code>reports</code>. En este caso, una instancia de la clase <code>Manager</code> tendría las tres propiedades: <code>name</code>, <code>dept</code>, y <code>reports</code>.</p> + +<p>JavaScript implementa la herencia permitiendo asociar un objeto prototípico con cualquier función <em>constructor</em>. De esta forma puedes crear una relación entre <code>Employee</code> y <code>Manager</code>, pero usando una terminología diferente. En primer lugar, se define la función <em>constructor </em>para <code>Employee, </code>especificando las propiedades <code>name</code> y <code>dept</code>. Luego, se define la función <em>constructor</em> para <code>Manager</code>, especificando la propiedad <code>reports</code>. Por último, se asigna un nuevo objeto derivado de <code>Employee.prototype</code> como el <code>prototype</code> para la función <em>constructor</em> de <code>Manager</code>. De esta forma, cuando se crea un nuevo <code>Manager</code>, este hereda las propiedades <code>name</code> y <code>dept</code> del objeto <code>Employee</code>.</p> + +<h3 id="Añadir_y_quitar_propiedades">Añadir y quitar propiedades</h3> + +<p>En lenguajes basados en clases típicamente se crea una clase en tiempo de compilación y luego se crean instancias de la clase, ya sea en tiempo de compilación o en tiempo de ejecución. No se puede cambiar el número o el tipo de propiedades de una clase una vez que ha sido definida. En JavaScript, sin embargo, en tiempo de ejecución se pueden añadir y quitar propiedades a un objeto. Si se añade una propiedad a un objeto que está siendo utilizado como el prototipo de otros objetos, los objetos para los que es un prototipo también tienen la nueva propiedad añadida.</p> + +<h3 id="Resumen_de_las_diferencias">Resumen de las diferencias</h3> + +<p>La siguiente tabla muestra un pequeño resumen de algunas de estas diferencias. El resto de este capítulo describe los detalles del uso de los constructores JavaScript y los prototipos para crear una jerarquía de objetos, y compara esta forma de herencia no basada en clases con la basada en clases que utiliza Java.</p> + +<table class="fullwidth-table"> + <caption>Tabla 8.1 Comparación de los sistemas de objetos basados en clases (Java) y basados en prototipos (JavaScript)</caption> + <thead> + <tr> + <th scope="col"><strong>Categoría</strong></th> + <th scope="col"><strong>Basado en clases (Java)</strong></th> + <th scope="col"><strong>Basado en prototipos (JavaScript)</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Clase vs. Instancia</strong></td> + <td>La clase y su instancia son entidades distintas.</td> + <td>Todos los objetos pueden heredar de otro objeto.</td> + </tr> + <tr> + <td><strong>Definición</strong></td> + <td>Define una clase con una definición <em>class</em>; se instancia una clase con métodos constructores.</td> + <td>Define y crea un conjunto de objetos con funciones constructoras.</td> + </tr> + <tr> + <td><strong>Creación de objeto</strong></td> + <td>Se crea un objeto con el operador <code>new</code>.</td> + <td>Se crea un objeto con el operador <code>new</code>.</td> + </tr> + <tr> + <td><strong>Construcción de jerarquía de objetos</strong></td> + <td>Se construye una jerarquía de objetos utilizando definiciones de clases para definir subclases de clases existentes.</td> + <td> + <p>Se construye una jerarquía de objetos mediante la asignación de un objeto como el prototipo asociado a una función constructora.</p> + </td> + </tr> + <tr> + <td><strong>Herencia</strong></td> + <td>Se heredan propiedades siguiendo la cadena de clases.</td> + <td>Se heredan propiedades siguiendo la cadena de prototipos.</td> + </tr> + <tr> + <td><strong>Extensión de propiedades</strong></td> + <td>La definición de una clase especifica <em>todas</em> las propiedades de todas las instancias de esa clase. No se puede añadir propiedades dinámicamente en tiempo de ejecución.</td> + <td> + <p>El conjunto <em>inicial</em> de propiedades lo determina la función constructor o el prototipo. Se pueden añadir y quitar propiedades dinámicamente a objetos específicos o a un conjunto de objetos.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="El_ejemplo_employee">El ejemplo employee</h2> + +<p>El resto de este capitulo utiliza la jerarquía <code>employee</code> que se muestra en la siguiente figura.</p> + +<div class="twocolumns"> + + + + + + + + +<p><img alt="" class="internal" src="/@api/deki/files/4452/=figure8.1.png" style="height: 194px; width: 281px;"></p> + +<p><small><strong>Figura 8.1: Una jerarquía de objetos sencilla</strong></small></p> + + + + + + + + + + + + + + + +<p>Este ejemplo utiliza los siguientes objetos:</p> + +<ul> + <li><code>Employee</code> tiene las propiedades <code>name</code> (cuyo valor por defecto es un string vacío) y <code>dept</code> (cuyo valor por defecto es "general").</li> + <li><code>Manager</code> está basado en <code>Employee</code>. Añade la propiedad<code> reports</code> (cuyo valor por defecto es un array vacío, en la que se pretende almacenar un array de objetos <code>Employee</code> como su valor).</li> + <li><code>WorkerBee</code> también está basado en <code>Employee</code>. Añade la propiedad <code>projects</code> (cuyo valor por defecto es un array vacío en el que se pretende almacenar un array de strings como su valor).</li> + <li><code>SalesPerson</code> está basado en <code>WorkerBee</code>. Añade la propiedad <code>quota</code> (cuyo valor por defecto es 100). También reemplaza la propiedad <code>dept</code> con el valor "sales", indicando que todas las salespersons están en el mismo departamento.</li> + <li><code>Engineer</code> se basa en <code>WorkerBee</code>. Añade la propiedad <code>machine</code> (cuyo valor por defecto es un string vacío) y también reemplaza la propiedad <code>dept</code> con el valor "engineering".</li> +</ul> + + +</div> + + + +<ul> +</ul> + +<h2 id="Creación_de_la_jerarquía">Creación de la jerarquía</h2> + +<p>Hay varias formas de definir funciones constructor para implementar la jerarquía Employee. Elegir una u otra forma depende sobre todo de lo que quieras y puedas ser capaz de hacer con tu aplicación.</p> + +<p>Esta sección muestra como utilizar definiciones muy sencillas (y comparativamente inflexibles) para mostrar como hacer funcionar la herencia. En estas definiciones no puedes especificar valores de propiedades cuando creas un objeto. El nuevo objeto que se crea simplemente obtiene valores por defecto, que puedes cambiar posteriormente. La figura 8.2 muestra la jerarquía con estas definiciones sencillas.</p> + +<p>En una aplicación real probablemente definirías constructores que proporcionen valores a las propiedades en el momento de la creación del objeto (para más información ver <a href="#More_flexible_constructors">Constructores más flexibles</a>). Por ahora, estas definiciones sencillas nos sirven para mostrar como funciona la herencia.</p> + +<p><img alt="figure8.2.png" class="default internal" src="/@api/deki/files/4390/=figure8.2.png"><br> + <small><strong>Figura 8.2: Definiciones de los objetos de la jerarquía Employee</strong></small></p> + +<p>Las siguientes definiciones de <code>Employee</code> en Java y en Javascript son similares, la única diferencia es que en Java necesitas especificar el tipo para cada propiedad, no así en Javascript (esto es debido a que Java es un <a href="https://es.wikipedia.org/wiki/Tipado_fuerte">lenguaje fuertemente tipado</a>, mientras que Javascript es un lenguaje débilmente tipado). </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +function Employee () { + this.name = ""; + this.dept = "general"; +} +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class Employee { + public String name; + public String dept; + public Employee () { + this.name = ""; + this.dept = "general"; + } + +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Las definiciones de <code>Manager</code> y <code>WorkerBee</code> ilustran la diferencia a la hora de especificar el siguiente objeto en la jerarquía de herencia. En JavaScript se añade una instancia prototípica como el valor de la propiedad <code>prototype</code> de la función constructora, así sobre escribe <code>prototype.constructor</code> con la función constructora. Puede hacerse en cualquier momento una vez definido el constructor. En Java se especifica la superclase en la definición de la clase. No se puede cambiar la superclase fuera de la definición de la clase.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +function Manager () { + this.reports = []; +} +Manager.prototype = new Employee; + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class Manager extends Employee { + public Employee[] reports; + public Manager () { + this.reports = new Employee[0]; + } +} + +public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this.projects = new String[0]; + } + +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Las definiciones de <code>Engineer</code> y <code>SalesPerson</code> crean objetos que descienden de <code>WorkerBee</code> y por tanto de <code>Employee</code>. Un objeto de éste tipo tiene todas las propiedades de los objetos por encima de él en la cadena. Además, estas definiciones reemplazan los valores heredados de la propiedad <code>dept</code> con nuevos valores específicos para estos objetos.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +function SalesPerson () { + this.dept = "sales"; + this.quota = 100; +} +SalesPerson.prototype = new WorkerBee; + +function Engineer () { + this.dept = "engineering"; + this.machine = ""; +} +Engineer.prototype = new WorkerBee; +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class SalesPerson extends WorkerBee { + public double quota; + public SalesPerson () { + this.dept = "sales"; + this.quota = 100.0; + } +} + +public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + this.dept = "engineering"; + this.machine = ""; + } +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Usando estas definiciones puedes crear instancias de estos objetos, que adquieren valores por defecto para sus propiedades. La figura 8.3 revela el uso de estas definiciones JavaScript para crear nuevos objetos y muestra los valores de las propiedades de estos nuevos objetos.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El termino <em><em>instancia</em></em> tiene un significado técnico específico en lenguajes basados en clases, donde una instancia es un ejemplar individual de una clase y es fundamentalmente diferente a la clase. En JavaScript, "instancia" no tiene este mismo significado ya que JavaScript no hace diferencia entre clases e instancias. Sin embargo, al hablar de JavaScript, "instancia" puede ser usado informalmente para indicar que un objeto ha sido creado usando una función constructora particular. En este ejemplo, puedes decir que <code><code>jane</code></code> es una instancia de <code><code>Engineer</code></code>. De la misma manera, aunque los términos <em><em>parent</em>, <em>child</em>, <em>ancestor</em></em>, y <em><em>descendant</em></em> no tienen un significado formal en JavaScript; puedes usarlos informalmente para referirte a objetos que están por encima o por debajo de la cadena de prototipos.</p> +</div> + + + +<h3 id="Creando_objetos_con_definiciones_simples">Creando objetos con definiciones simples</h3> + +<p>La jerarquía de objetos que se muestra en la figura se corresponde con el código escrito en el lado derecho.</p> + +<p><img alt="figure8.3.png" class="default internal" id="figure8.3" src="/@api/deki/files/4403/=figure8.3.png"><br> + <a id="8.3" name="8.3"><small><strong>Figura 8.3: Creación de objetos mediante definiciones simples</strong></small></a></p> + +<p><strong>Objetos individuales = Jim, Sally, Mark, Fred, Jane, etc.<br> + "Instancias" creadas con <code><em>constructor</em></code></strong></p> + +<h2 id="Propiedades_de_objetos">Propiedades de objetos</h2> + +<p>Esta sección describe cómo heredan los objetos sus propiedades de otros objetos en la cadena de prototipos y qué ocurre cuando se añade una propiedad en tiempo de ejecución.</p> + +<h3 id="Herencia_de_propiedades">Herencia de propiedades</h3> + +<p>Supongamos que creas el objeto <code>mark</code> como un <code>WorkerBee</code> (como se muestra en la <a href="#8.3">Figura 8.3</a>) con la siguiente sentencia:</p> + +<pre class="brush: js notranslate">var mark = new WorkerBee; +</pre> + +<p>Cuando el intérprete de JavaScript encuentra el operador <code>new</code>, crea un nuevo objeto genérico y establece implícitamente el valor de la propiedad interna [[Prototype]] con el valor de <code>WorkerBee.prototype</code> y pasa este nuevo objeto como <code>this</code> a la función constructora de WorkerBee. La propiedad interna [[Prototype]] (que puede observarse como <code>__proto__</code>, la propiedad cuyo nombe tiene dos guiones al principio y al final) determina la cadena de prototipo usada para devolver los valores de la propiedades cuando se accede a ellas. Una vez que estas propiedades tienen sus valores, JavaScript devuelve el nuevo objeto y la sentencia de asignación asigna el nuevo objeto ya inicializado a la variable <code>mark</code>.</p> + +<p>Este proceso no asigna explícitamente valores al objeto <code>mark</code> (valores <em>locales</em>) para las propiedades que <code>mark</code> hereda de la cadena de prototipos. Cuando solicitas valor de una propiedad, JavaScript primero comprueba si existe un valor para esa propiedad en el objeto. Si existe, se devuelve ese valor; sino, JavaScript comprueba la cadena de prototipos (usando la propiedad <code>__proto__</code>). Si un objeto en la cadena de prototipos tiene un valor para esa propiedad, se devuelve ese valor. Si no existe en ningún objeto de la cadena de prototipos un valor para esa propiedad, JavaScript dice que el objeto no tiene esa propiedad. En el caso de nuestro objeto <code>mark</code>, éste tiene las siguientes propiedades y valores:</p> + +<pre class="brush: js notranslate">mark.name = ""; +mark.dept = "general"; +mark.projects = []; +</pre> + +<p>El objeto <code>mark</code> hereda valores para las propiedades <code>name</code> y <code>dept</code> su objeto prototipico que enlaza en <code>mark.__proto__</code>. Se le asigna un valor local la propiedad <code>projects</code> a través del constructor <code>WorkerBee</code>. De esta forma se heredan propiedades y sus valores en JavaScript. En la sección <a href="#Property_inheritance_revisited">Property inheritance revisited</a> se discuten algunos detalles de este proceso.</p> + +<p>Debido a que estos constructores no permiten especificar valores específicos de instancia, esta información es genérica. Los valores de las propiedades son los valores por omisión, compartidos por todos los objetos nuevos creados a partir de <code>WorkerBee</code>. Por supuesto se pueden cambiar después los valores de estas propiedades. Por ejemplo podríamos dar valores con información específica a <code>mark</code> de la siguiente forma:</p> + +<pre class="brush: js notranslate">mark.name = "Doe, Mark"; +mark.dept = "admin"; +mark.projects = ["navigator"];</pre> + +<h3 id="Añadir_propiedades">Añadir propiedades</h3> + +<p>En JavaScript puedes añadir propiedades a los objetos en tiempo de ejecución. No estás limitado a utilizar solo las propiedades que proporciona la función constructora. Para añadir una propiedad que es especifica para un objeto determinado, se le asigna un valor a la propiedad del objeto de la siguiente forma:</p> + +<pre class="brush: js notranslate">mark.bonus = 3000; +</pre> + +<p>Ahora el objeto <code>mark</code> tiene una propiedad <code>bonus</code>, pero ningún otro objeto creado con la función <em>constructor</em> <code>WorkerBee</code> tiene esta propiedad.</p> + +<p>Si añades una nueva propiedad a un objeto que se esta utilizando como el prototipo de una función <em>constructor</em>, dicha propiedad se añade a todos los objetos que heredan propiedades de dicho prototipo. Por ejemplo, puedes añadir una propiedad <code>specialty</code> a todos los empleados con la siguientes sentencia:</p> + +<pre class="brush: js notranslate">Employee.prototype.specialty = "none"; +</pre> + +<p>Tan pronto JavaScript ejecuta esta sentencia, el objeto <code>mark</code> también tienen la propiedad <code>specialty</code> con el valor <code>"none"</code>. La siguiente figura muestra el efecto de añadir esta propiedad al prototipo <code>Employee</code> y después reemplazarlo por el prototipo <code>Engineer</code>.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/4422/=figure8.4.png" style="height: 519px; width: 833px;"><br> + <small><strong>Figura 8.4: Añadir propiedades</strong></small></p> + +<h2 id="Constructores_más_flexibles">Constructores más flexibles</h2> + +<p>Las funciones constructor que se han mostrado hasta ahora no permiten especificar valores a las propiedades cuando se crea una instancia. Al igual que en Java, se pueden proporcionar argumentos a los constructores para inicializar los valores de las propiedades de las instancias. La siguiente figura muestra una forma de hacerlo.</p> + +<p><img alt="" class="internal" id="figure8.5" src="/@api/deki/files/4423/=figure8.5.png" style="height: 481px; width: 1012px;"><br> + <a id="8.5" name="8.5"><small><strong>Figura 8.5: Especificación de propiedades en un construcción, toma 1</strong></small></a></p> + +<p>La siguiente tabla muestra las definiciones Java y JavaScript para estos objetos.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; +} +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class Employee { + public String name; + public String dept; + public Employee () { + this("", "general"); + } + public Employee (String name) { + this(name, "general"); + } + public Employee (String name, String dept) { + this.name = name; + this.dept = dept; + } +} +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> +function WorkerBee (projs) { + this.projects = projs || []; +} +WorkerBee.prototype = new Employee; +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class WorkerBee extends Employee { + public String[] projects; + public WorkerBee () { + this(new String[0]); + } + public WorkerBee (String[] projs) { + projects = projs; + } +} + +</pre> + </td> + </tr> + <tr> + <td> + <pre class="brush: js notranslate"> + +function Engineer (mach) { + this.dept = "engineering"; + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +</pre> + </td> + <td> + <pre class="brush: java notranslate"> +public class Engineer extends WorkerBee { + public String machine; + public Engineer () { + dept = "engineering"; + machine = ""; + } + public Engineer (String mach) { + dept = "engineering"; + machine = mach; + } +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Estas definiciones JavaScript realizan un uso idiomático especial para asignar valores por defecto:</p> + +<pre class="brush: js notranslate">this.name = name || ""; +</pre> + +<p>El operador lógico OR de JavaScript (<code>||</code>) evalúa su primer argumento. Si dicho argumento se convierte a true, el operador lo devuelve. Si no, el operador devuelve el valor del segundo argumento. Por tanto, esta linea de código comprueba si <code>name</code> tiene un valor útil para la propiedad <code>name</code>, en cuyo caso asigna a <code>this.name</code> este valor. En caso contrario asigna a <code>this.name</code> el string vacío. Este capitulo emplea este uso idiomático por abreviación. Sin embargo puede resultar chocante a primera vista.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Esto puede no resultar según lo esperado si la función <em>constructor</em> es llamada con argumentos que se convierten a <code>false</code> (como <code>0</code> (cero) y una cadena vacía (<code><code>""</code></code>). En este caso el valor por defecto resulta elegido en lugar del valor proporcionado en la llamada al constructor.</p> +</div> + +<p>Con estas definiciones, cuando creas una instancia de un objeto, puedes especificar valores para las propiedades definidas localmente. Tal como se muestra en <a href="#8.5">Figura 8.5</a>, puedes utilizar la siguiente sentencia para crear un nuevo <code>Engineer</code>:</p> + +<pre class="brush: js notranslate">var jane = new Engineer("belau"); +</pre> + +<p>Ahora las propiedades de <code>jane</code> son:</p> + +<pre class="brush: js notranslate">jane.name == ""; +jane.dept == "engineering"; +jane.projects == []; +jane.machine == "belau" +</pre> + +<p>Nota que con estas definiciones no puedes dar un valor inicial a las propiedades heredadas como <code>name</code>. Si quieres especificar un valor inicial para las propiedades heredadas en JavaScript tienes que que añadir más código a la función constructora.</p> + +<p>Hasta ahora, la función constructora ha creado un objeto genérico y ha especificado propiedades y valores locales para el nuevo objeto. Puedes hacer que el constructor añada más propiedades llamando directamente a la función <em>constructor</em> de un objeto que esté más arriba en la cadena de prototipos. La siguiente figura muestra estas definiciones.</p> + + + +<p><img alt="" class="internal" src="/@api/deki/files/4430/=figure8.6.png" style="height: 534px; width: 1063px;"><br> + <small><strong>Figura 8.6 Especificación de propiedades en un constructor, toma 2</strong></small></p> + +<p>Veamos los detalles de una de estas definiciones. Aquí tenemos la nueva definición del <em>constructor</em> <code>Engineer</code>:</p> + +<pre class="brush: js notranslate">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + +<p>Supongamos que se crea un nuevo <code>Engineer</code> de esta forma:</p> + +<pre class="brush: js notranslate">var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +</pre> + +<p>JavaScript sigue los siguientes pasos:</p> + +<ol> + <li>El operador <code>new</code> crea un nuevo objeto genérico y le asigna su propiedad <code>__proto__</code> a <code>Engineer.prototype</code>.</li> + <li>El operador <code>new</code> pasa el nuevo objeto al <em>constructor</em> <code>Engineer</code> como el valor de la palabra reservada <code>this</code>.</li> + <li>El <em>constructor</em> crea una nueva propiedad llamada <code>base</code> para ese objeto y le asigna el valor del constructor <code>WorkerBee</code>. Esto hace que el constructor <code>WorkerBee</code> pase a ser un método del objeto <code>Engineer</code>. El nombre de esta propiedad (<code>base</code>) no es especial. Puede usarse cualquier nombre de propiedad, si bien <code>base</code> evoca el uso que se le va a dar.</li> + <li> + <p>El constructor llama al método <code>base</code>, pasándole como argumentos dos de los argumentos que se le han pasado al constructor (<code>"Doe, Jane"</code> y <code>["navigator", "javascript"]</code>) y también el string <code>"engineering"</code>. Usar explícitamente <code>"engineering"</code> en el constructor indica que todos los objetos <code>Engineer</code> tienen el mismo valor para la propiedad heredada <code>dept</code>, y este valor reemplaza el valor heredado de <code>Employee</code>.</p> + </li> + <li>Como <code>base</code> es un método de <code>Engineer</code>, en la llamada a <code>base</code>, JavaScript liga la palabra <code>this</code> al objeto creado en el paso 1. De esta forma, la función <code>WorkerBee</code> a su vez pasa los argumentos <code>"Doe, Jane"</code> y <code>"engineering"</code> a la función constructor <code>Employee</code>. Cuando retorna la llamada de la función constructor <code>Employee</code>, la función <code>WorkerBee</code> utiliza el resto de argumentos para asignarle un valor a la propiedad <code>projects</code>.</li> + <li>Cuando la llamada al método <code>base</code> retorna, el constructor <code>Engineer</code> inicializa la propiedad <code>machine</code> del objeto con el valor<code>"belau"</code>.</li> + <li>Una vez creado, JavaScript asigna el nuevo objeto a la variable <code>jane</code>.</li> +</ol> + +<p>Podrías pensar que al haber llamado al constructor <code>WorkerBee</code> desde el constructor <code>Engineer</code> ya dejas establecida la herencia para los objetos <code>Engineer</code>. Pero no es así. Al llamar al constructor <code>WorkerBee</code> se garantiza que un objeto <code>Engineer</code> comience con las propiedades especificadas en todas las funciones del constructor que se llaman. Pero si luego se añaden propiedades a los prototipos de <code>Employee</code> o de <code>WorkerBee</code>, estas propiedades no se heredan por los objetos <code>Engineer</code>. Por ejemplo, veamos las siguientes sentencias:</p> + +<pre class="brush: js notranslate">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> + +<p>El objeto <code>jane</code> no hereda la propiedad <code>specialty</code> añadida al prototipo de <code>Employee</code>. Sigue siendo necesario dar valor al prototipo de <code>Employee</code> para que la herencia buscada se establezca. Veamos las siguientes sentencias:</p> + +<pre class="brush: js notranslate">function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; +var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau"); +Employee.prototype.specialty = "none"; +</pre> + +<p>Ahora el valor de la propiedad <code>specialty </code>del objeto<code> j</code><code>ane</code> si es "none".</p> + +<p>Otra forma de llamar al constructor es mediante el uso de los métodos <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/call" title="en-US/docs/JavaScript/Reference/Global Objects/Function/call"><code>call()</code></a> / <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/apply" title="en-US/docs/JavaScript/Reference/Global Objects/Function/apply"><code>apply()</code></a>:</p> + +<table> + <tbody> + <tr> + <td> + <pre class="brush: js notranslate"> +function Engineer (name, projs, mach) { + this.base = WorkerBee; + this.base(name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + </td> + <td> + <pre class="brush: js notranslate"> +function Engineer (name, projs, mach) { + WorkerBee.call(this, name, "engineering", projs); + this.machine = mach || ""; +} +</pre> + </td> + </tr> + </tbody> +</table> + +<p>Usar el método Javascript <code>call()</code> da como resultado una implementación más limpia ya que <code>base</code> ya no es necesaria. Mediante <code>call()</code> se llama a la función constructor <code>WorkerBee</code> como un método, pasándole explícitamente <code>this</code>. El efecto es el mismo que el producido al llamar al constructor a través de la propiedad <code>base</code>: en la llamada a <code>WorkerBee,</code> <code>this </code>está ligado al objeto que se está creando en <code>Engineer.</code></p> + +<h2 id="Herencia_de_propiedades_revisada">Herencia de propiedades revisada</h2> + +<p>Las secciones precedentes describieron como los constructores y prototipos de JavaScript jerarquías y herencia. En esta sección se discuten algunas sutilezas que no fueron necesariamente evidentes en las discusiones anteriores. </p> + +<h3 id="Valores_locales_frente_a_valores_heredados">Valores locales frente a valores heredados</h3> + +<p>Cuando accedes a una propiedad de un objeto, JavaScript realiza estos pasos, tal como se describió más arriba en este capítulo:</p> + +<ol> + <li>Comprueba si el valor existe localmente. Si existe, se devuelve ese valor.</li> + <li>Si no existe un valor local, comprueba la cadena de prototipos (usando la propiedad <code>__proto__</code>).</li> + <li>Si algún objeto en la cadena de prototipos tiene un valor para la propiedad especificada, devuelve ese valor.</li> + <li>Si no encuentra la propiedad en la cadena de prototipos, el objeto no tiene la propiedad.</li> +</ol> + +<p>El resultado de estos pasos depende de cómo se definan las cosas en el camino. El ejemplo original tenía estas definiciones:</p> + +<pre class="brush: js notranslate">function Employee () { + this.name = ""; + this.dept = "general"; +} + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; +</pre> + +<p>Con estas definiciones, supongamos que se crea <code>amy</code> como una instancia de <code>WorkerBee</code> con la siguiente sentencia:</p> + +<pre class="brush: js notranslate">var amy = new WorkerBee; +</pre> + +<p>El objeto <code>amy</code> tiene una propiedad local, <code>projects</code>. Los valores de las propiedades <code>name</code> y <code>dept</code> no son locales para <code>amy</code> y por eso se obtienen de la propiedad <code>__proto__</code> del objeto. Por ello, <code>amy</code> tiene estos valores en sus propiedades:</p> + +<pre class="brush: js notranslate">amy.name == ""; +amy.dept == "general"; +amy.projects == []; +</pre> + +<p>Ahora supongamos que cambias el valor de la propiedad <code>name</code> en el prototipo asociado a <code>Employee</code>:</p> + +<pre class="brush: js notranslate">Employee.prototype.name = "Unknown" +</pre> + +<p>A primera vista, esperarías que el nuevo valor se propague hacia abajo a todas las instancias de <code>Employee</code>. Pero no es esto lo que ocurre.</p> + +<p>Cuando se crea una instancia del objeto <code>Employee</code>, ésta obtiene un valor local para la propiedad <code>name</code> (la cadena vacía). Esto significa que cuando se da valor al prototipo de <code>WorkerBee</code> mediante la creación de un nuevo objeto <code>Employee</code>, <code>WorkerBee.prototype</code> tiene un valor local para la propiedad <code>name</code>. Por tanto, cuando JavaScript busca la propiedad <code>name</code> del objeto <code>amy</code> (una instancia de <code>WorkerBee</code>), JavaScript encuentra el valor local de esa propiedad en <code>WorkerBee.prototype</code>. Por tanto no busca más arriba en la cadena hasta <code>Employee.prototype</code>.</p> + +<p>Si quieres cambiar el valor de una propiedad de un objeto en tiempo de ejecución y conseguir que el nuevo valor sea heredado por todos los descendientes del objeto, no puedes definir la propiedad en la función constructor del objeto. En su lugar, la tienes que añadir al prototipo asociado al constructor. Por ejemplo, supongamos que cambiamos el código anterior por este otro:</p> + +<pre class="brush: js notranslate">function Employee () { + this.dept = "general"; +} +Employee.prototype.name = ""; + +function WorkerBee () { + this.projects = []; +} +WorkerBee.prototype = new Employee; + +var amy = new WorkerBee; + +Employee.prototype.name = "Unknown"; +</pre> + +<p>En este caso, la propiedad <code>name</code> de <code>amy</code> si pasa a ser "Unknown" tras la ultima sentencia.</p> + +<p>Tal como muestran estos ejemplos, si quieres tener valores por defecto para propiedades de objetos, y se necesitas cambiar los valores por defecto en tiempo de ejecución, tienes que asignar las propiedades al prototipo del constructor, y no asignarlas dentro de la función <em>constructor</em>.</p> + +<h3 id="Determinar_las_relaciones_entre_instancias">Determinar las relaciones entre instancias</h3> + +<p>La búsqueda de propiedades en la cadena de prototipos comienza en las propiedades locales del objeto y si no se encuentran localmente, se busca a través de la propiedad <code>__proto__</code> del objeto. La búsqueda continúa recursivamente, conociéndose como "búsqueda en la cadena de prototipos".</p> + +<p>La propiedad especial <code>__proto__</code> de un objeto recibe su valor en el momento en el que es creado; se le asigna el valor de la propiedad <code>prototype</code> de la función <em>constructor</em> usada para crear el objeto. Así, la expresión <code>new Foo()</code> crea un objeto con <code>__proto__ == <code class="moz-txt-verticalline">Foo.prototype</code></code>. Por tanto, los cambios que se realicen en las propiedades de <code class="moz-txt-verticalline">Foo.prototype</code> alteraran la búsqueda de propiedades de todos los objetos que se crearon mediante<code> new Foo()</code>.</p> + +<p>Todo objeto tiene una propiedad <code>__proto__</code> (salvo <code>Object</code>); toda función tiene una propiedad <code>prototype</code>. Es así como los objetos pueden relacionarse mediante 'herencia de prototipos' con otros objetos. Puedes comprobar la herencia comparando el valor de la propiedad <code>__proto__</code> con el valor de <code>prototype</code> de una función <em>constructor</em>. JavaScript proporciona un atajo: el operador <code>instanceof</code> que compara un objeto con una función <em>constructor</em> y devuelve true si el objeto hereda del prototipo de la función. Por ejemplo,</p> + +<pre class="brush: js notranslate">var f = new Foo(); +var isTrue = (f instanceof Foo);</pre> + +<p>Para ver un ejemplo más detallado, supongamos que tenemos el conjunto de definiciones mostrado en <a href="#Inheriting_properties">heredando propiedades</a>. Creamos un objeto <code>Engineer</code> somo sigue:</p> + +<pre class="brush: js notranslate">var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji"); +</pre> + +<p>En este objeto, las siguientes sentencias son todas true:</p> + +<pre class="brush: js notranslate">chris.__proto__ == Engineer.prototype; +chris.__proto__.__proto__ == WorkerBee.prototype; +chris.__proto__.__proto__.__proto__ == Employee.prototype; +chris.__proto__.__proto__.__proto__.__proto__ == Object.prototype; +chris.__proto__.__proto__.__proto__.__proto__.__proto__ == null; +</pre> + +<p>Por tanto podría escribirse una función <code>instanceOf</code> así:</p> + +<pre class="brush: js notranslate">function instanceOf(object, constructor) { + while (object != null) { + if (object == constructor.prototype) + return true; + if (typeof object == 'xml') { + return constructor.prototype == XML.prototype; + } + object = object.__proto__; + } + return false; +} +</pre> + +<div class="note"><strong>Nota:</strong> La implementación anterior compara el tipo del objeto con "xml" para soslayar un pequeño problema sobre como se representan los objetos XML en las versiones recientes de JavaScript. Ver {{ bug(634150) }} para entender los detalles.</div> + +<p>Usando esta función <code>instanceOf</code> estas expresiones son todas <code>true</code>:</p> + +<pre class="brush: js notranslate">instanceOf (chris, Engineer) +instanceOf (chris, WorkerBee) +instanceOf (chris, Employee) +instanceOf (chris, Object) +</pre> + +<p>Pero la siguiente expresión es <code>false</code>:</p> + +<pre class="brush: js notranslate">instanceOf (chris, SalesPerson)</pre> + +<h3 id="Información_global_en_los_constructores">Información global en los constructores</h3> + +<p>Cuando creas constructores tienes que tener especial cuidado si se asigna información global en el constructor. Por ejemplo, supongamos que quieres tener un ID único que se asigne automáticamente a cada nuevo empleado. Podrías utilizar la siguiente definición para <code>Employee</code>:</p> + +<pre class="brush: js notranslate">var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} +</pre> + +<p>Con esta definición, cuando cread un nuevo <code>Employee</code>, el constructor le asigna el siguiente ID y luego incrementa el contador global ID. Por tanto, tras ejecutar el siguiente código, <code>victoria.id</code> es 1 y <code>harry.id</code> es 2:</p> + +<pre class="brush: js notranslate">var victoria = new Employee("Pigbert, Victoria", "pubs") +var harry = new Employee("Tschopik, Harry", "sales") +</pre> + +<p>A primera vista puede parecer razonable. Sin embargo, <code>idCounter</code> se incrementa cada vez que se crea un nuevo objeto <code>Employee</code>, cualquiera que sea su propósito. Si creas la jerarquía completa de <code>Employee</code> mostrada en este capítulo, el constructor <code>Employee</code> es llamado cada vez que se asigna valor a un prototipo. Supongamos que tienes el siguiente código:</p> + +<pre class="brush: js notranslate">var idCounter = 1; + +function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + this.id = idCounter++; +} + +function Manager (name, dept, reports) {...} +Manager.prototype = new Employee; + +function WorkerBee (name, dept, projs) {...} +WorkerBee.prototype = new Employee; + +function Engineer (name, projs, mach) {...} +Engineer.prototype = new WorkerBee; + +function SalesPerson (name, projs, quota) {...} +SalesPerson.prototype = new WorkerBee; + +var mac = new Engineer("Wood, Mac"); +</pre> + +<p>Supongamos además que las definiciones que se omiten tienen la propiedad <code>base</code> y se llama al constructor que tienen encima en la cadena de prototipos. En este caso, cuando se llega a crear el objeto <code>mac</code>, <code>mac.id</code> es 5.</p> + +<p>Dependiendo de la aplicación, puede o no importar que el contador se haya incrementado esas veces extra. En caso de que importe, una solución es utilizar este constructor:</p> + +<pre class="brush: js notranslate">function Employee (name, dept) { + this.name = name || ""; + this.dept = dept || "general"; + if (name) + this.id = idCounter++; +} +</pre> + +<p>Cuando se crea una instancia de <code>Employee</code> para usarla como prototipo, no se especifican argumentos para el constructor. Mediante esta definición del constructor, cuando no se proporcionan argumentos, el constructor no asigna un valor al id y no actualiza el contador. Por tanto, para que se asigne a un <code>Employee</code> un id, hay que especificar un <code>name</code> al employee. En este caso <code>mac.id</code> seria 1.</p> + +<h3 id="Sin_herencia_múltiple">Sin herencia múltiple</h3> + +<p>Algunos lenguajes orientados a objetos tienen herencia múltiple. Es decir, un objeto puede heredar las propiedades y valores de varios objetos padre distintos. JavaScript no proporciona herencia múltiple.</p> + +<p>La herencia de valores de propiedades se produce en tiempo de ejecución por JavaScript buscando en la cadena de prototipos de un objeto para encontrar un valor. Debido a que un objeto tiene un solo prototipo asociado, JavaScript no puede heredar dinámicamente de más de una cadena de prototipos.</p> + +<p>En JavaScript se puede hacer que desde una función constructor llame a una o más funciones <em>constructor</em>. Esto da la ilusión de herencia múltiple. Considera, por ejemplo, las siguientes definiciones:</p> + +<pre class="brush: js notranslate">function Hobbyist (hobby) { + this.hobby = hobby || "scuba"; +} + +function Engineer (name, projs, mach, hobby) { + this.base1 = WorkerBee; + this.base1(name, "engineering", projs); + this.base2 = Hobbyist; + this.base2(hobby); + this.machine = mach || ""; +} +Engineer.prototype = new WorkerBee; + +var dennis = new Engineer("Doe, Dennis", ["collabra"], "hugo") +</pre> + +<p>Consideremos, además, la definición de <code>WorkerBee</code> que se usó antes en este capítulo. En este caso, el objeto <code>dennis</code> tiene estas propiedades:</p> + +<pre class="brush: js notranslate">dennis.name == "Doe, Dennis" +dennis.dept == "engineering" +dennis.projects == ["collabra"] +dennis.machine == "hugo" +dennis.hobby == "scuba" +</pre> + +<p>Por tanto <code>dennis</code> obtiene la propiedad <code>hobby</code> del constructor<code> Hobbyist</code> . Sin embargo, si luego añades una propiedad al prototipo del constructor de <code>Hobbyist</code>:</p> + +<pre class="brush: js notranslate">Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"] +</pre> + +<p>El objeto <code>dennis</code> no hereda esta nueva propiedad porque no está en su cadena de prototipos.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}</div> diff --git a/files/es/web/javascript/guide/expressions_and_operators/index.html b/files/es/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..ca585f3ad6 --- /dev/null +++ b/files/es/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,924 @@ +--- +title: Expresiones y operadores +slug: Web/JavaScript/Guide/Expressions_and_Operators +tags: + - Expresiones + - Guía + - JavaScript + - Operadores + - Principiante + - '|10n_prioridad' +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +--- +<div>{{jsSidebar("JavaScript Guide", "Guía JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> + +<p class="summary">Este capítulo describe las expresiones y los operadores de JavaScript, incluyendo los de asignación, comparación, aritméticos, bit a bit, lógicos, ternarios, de cadena y otros.</p> + +<p>También se encuentra disponible una lista completa y detallada de operadores y expresiones en la {{JSxRef("Operadores", "referencia")}}.</p> + +<h2 id="Operadores">Operadores</h2> + +<p>JavaScript tiene los siguientes tipos de operadores. Esta sección describe los operadores y contiene información sobre la precedencia de los mismos.</p> + +<ul> + <li>{{anch("Asignacion", "Operadores de asignación")}}</li> + <li>{{anch("Comparacion", "Operadores de comparación")}}</li> + <li>{{anch("Aritmeticos", "Operadores aritméticos")}}</li> + <li>{{anch("Bit_a_bit", "Operadores bit a bit")}}</li> + <li>{{anch("Logico", "Operadores lógicos")}}</li> + <li>{{anch("Cadena", "Operadores de cadena")}}</li> + <li>{{anch("Condicional", "Operador condicional (ternario)")}}</li> + <li>{{anch("Coma", "Operador coma")}}</li> + <li>{{anch("Unario", "Operadores unarios")}}</li> + <li>{{anch("Relational", "Operadores relacionales")}}</li> +</ul> + +<p>JavaScript tiene ambos operadores <em>binarios</em> y <em>unarios</em>, y un operador ternario especial, el operador condicional. Un operador binario requiere dos operandos, uno antes del operando y otro después del operador:</p> + +<pre class="syntaxbox notranslate"><em>operando1</em> <em>operador</em> <em>operando2</em> +</pre> + +<p>Por ejemplo, <code>3+4</code> o <code>x*y</code>.</p> + +<p>Un operador unario requiere un solo operando, ya sea antes o después del operador:</p> + +<pre class="syntaxbox notranslate"><em>operador</em> <em>operando</em> +</pre> + +<p>o</p> + +<pre class="syntaxbox notranslate"><em>operando</em> <em>operador</em> +</pre> + +<p>Por ejemplo, <code>x++</code> o <code>++x</code>.</p> + +<h3 id="Operadores_de_asignación"><a id="Asignacion" name="Asignacion">Operadores de asignación</a></h3> + +<p>Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador de asignación simple es igual (<code>=</code>), que asigna el valor de su operando derecho a su operando izquierdo. Es decir, <code>x = y</code> asigna el valor de <code>y</code> a <code>x</code>.</p> + +<p>También hay operadores de asignación compuestos que son una abreviatura de las operaciones enumeradas en la siguiente tabla:</p> + +<table class="standard-table"> + <caption>Operadores de asignación compuestos</caption> + <thead> + <tr> + <th>Nombre</th> + <th>Operador abreviado</th> + <th>Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Operadores/Assignment", "Asignación")}}</td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Addition_assignment", "Asignación de adición")}}</td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Subtraction_assignment", "Asignación de resta")}}</td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Multiplication_assignment", "Asignación de multiplicación")}}</td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Division_assignment", "Asignación de división")}}</td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Remainder_assignment", "Asignación de residuo")}}</td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Exponentiation_assignment", "Asignación de exponenciación")}}</td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Left_shift_assignment", "Asignación de desplazamiento a la izquierda")}}</td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Right_shift_assignment", "Asignación de desplazamiento a la derecha")}}</td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Unsigned_right_shift_assignment", "Asignación de desplazamiento a la derecha sin signo")}}</td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_AND_assignment", "Asignación AND bit a bit")}}</td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_XOR_assignment", "Asignación XOR bit a bit")}}</td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_OR_assignment", "Asignación OR bit a bit")}}</td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Logical_AND_assignment", "Asignación AND lógico")}}</td> + <td><code>x &&= y</code></td> + <td><code>x && (x = y)</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Logical_OR_assignment", "Asignación OR lógico")}}</td> + <td><code>x ||= y</code></td> + <td><code>x || (x = y)</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Logical_nullish_assignment", "Asignación de anulación lógica")}}</td> + <td><code>x ??= y</code></td> + <td><code>x ?? (x = y)</code></td> + </tr> + </tbody> +</table> + +<h4 id="Valor_de_retorno_y_encadenamiento">Valor de retorno y encadenamiento</h4> + +<p>Como la mayoría de las expresiones, asignaciones como <code>x = y</code> tienen un valor de retorno. Se puede recuperar p. ej. asignando la expresión o registrándola:</p> + +<pre class="brush: bash notranslate">const z = (x = y); // O de forma equivalente: const z = x = y; + +console.log(z); // Registra el valor de retorno de la asignación x = y. +console.log(x = y); // O registra el valor de retorno directamente. +</pre> + +<p>El valor de retorno coincide con la expresión a la derecha del signo <code>=</code> en la columna "Significado" de la tabla anterior. Eso significa que <code>(x = y)</code> devuelve <code>y</code>, <code>(x += y)</code> devuelve la suma resultante <code>x + y</code>, <code>(x **= y)</code> devuelve la potencia resultante <code>x ** y</code>, y así sucesivamente.</p> + +<p>En el caso de asignaciones lógicas, <code>(x &&= y)</code>, <code>(x || = y)</code> y <code>(x ??= y)</code>, el valor de retorno es el de la operación lógica sin la asignación, entonces <code>x && y</code>, <code>x || y</code> y <code>x ?? y</code>, respectivamente.</p> + +<p>Ten en cuenta que los valores de retorno siempre se basan en los valores de los operandos <em>antes</em> de la operación.</p> + +<p>Al encadenar estas expresiones, cada asignación se evalúa de <strong>derecha a izquierda</strong>. Considera estos ejemplos:</p> + +<ul> + <li><code>w = z = x = y</code> es equivalente a <code>w = (z = (x = y))</code> o <code>x = y; z = y; w = y</code></li> + <li><code>z += x *= y</code> es equivalente e <code>z += (x *= y)</code> o <code>tmp = x * y; x *= y; z += tmp</code> (salvo que sin <code>tmp</code>).</li> +</ul> + +<h4 id="Desestructuración">Desestructuración</h4> + +<p>Para asignaciones más complejas, la sintaxis de {{JSxRef("Operadores/Destructuring_assignment", "asignación de desestructuración")}} es una expresión de JavaScript que hace posible extraer datos de arreglos u objetos usando una sintaxis que refleja la construcción de arreglos y objetos literales.</p> + +<pre class="brush: js notranslate">var foo = ['one', 'two', 'three']; + +// sin desestructurar +var one = foo[0]; +var two = foo[1]; +var three = foo[2]; + +// con desestructuración +var [one, two, three] = foo;</pre> + +<h3 id="Operadores_de_comparación"><a id="Comparacion" name="Comparacion">Operadores de comparación</a></h3> + +<p><a id="Comparacion" name="Comparacion"> </a></p> + +<p><a id="Comparacion" name="Comparacion">Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera (<code>true</code>) o falsa (<code>false</code>). Los operandos pueden ser valores numéricos, de cadena, lógicos u objetos. Las cadenas se comparan según el orden lexicográfico estándar, utilizando valores Unicode. En la mayoría de los casos, si los dos operandos no son del mismo tipo, JavaScript intenta convertirlos a un tipo apropiado para la comparación. Este comportamiento generalmente resulta en comparar los operandos numéricamente. Las únicas excepciones a la conversión de tipos dentro de las comparaciones involucran a los operadores <code>===</code> y <code>!==</code>, que realizan comparaciones estrictas de igualdad y desigualdad. Estos operadores no intentan convertir los operandos a tipos compatibles antes de verificar la igualdad. La siguiente tabla describe los operadores de comparación en términos de este código de ejemplo:</a></p> + +<pre class="brush: js notranslate"><a id="Comparacion" name="Comparacion"> +var var1 = 3; +var var2 = 4; +</a></pre> + +<table class="standard-table"> + <caption><a id="Comparacion" name="Comparacion">Operadores de comparación</a></caption> + <thead> + <tr> + <th scope="col"><a id="Comparacion" name="Comparacion">Operador</a></th> + <th scope="col"><a id="Comparacion" name="Comparacion">Descripción</a></th> + <th scope="col"><a id="Comparacion" name="Comparacion">Ejemplos que devuelven <code>true</code></a></th> + </tr> + </thead> + <tbody> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Igual", "#Igualdad")}} (<code>==</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son iguales.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>3 == var1</code> </a> + <p><a id="Comparacion" name="Comparacion"><code>"3" == var1</code></a></p> + <a id="Comparacion" name="Comparacion"> <code>3 == '3'</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "No es igual", "#Desigualdad")}} (<code>!=</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos <em>no</em> son iguales.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var1 != 4<br> + var2 != "3"</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Estrictamente igual", "#Identidad")}} (<code>===</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son iguales y del mismo tipo. Consulta también {{JSxRef("Object.is")}} y {{JSxRef("../Equality_comparisons_and_sameness", "similitud en JS")}}.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>3 === var1</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Desigualdad estricta", "#No_Identidad")}} (<code>!==</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si los operandos son del mismo tipo pero no iguales, o son de diferente tipo.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var1 !== "3"<br> + 3 !== '3'</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("/Operadores/Comparison_Operators", "Mayor que", "#Mayor_que_el_operador")}} (<code>></code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es mayor que el operando derecho.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var2 > var1<br> + "12" > 2</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Mayor o igual que", "#Operador_mayor_que_o_igual")}} (<code>>=</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es mayor o igual que el operando derecho.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var2 >= var1<br> + var1 >= 3</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Menor que", "#Operador_menor_que")}} (<code><</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es menor que el operando derecho.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var1 < var2<br> + "2" < 12</code></a></td> + </tr> + <tr> + <td><a id="Comparacion" name="Comparacion">{{JSxRef("Operadores/Comparison_Operators", "Menor o igual", "#Operador_menor_que_o_igual")}} (<code><=</code>)</a></td> + <td><a id="Comparacion" name="Comparacion">Devuelve <code>true</code> si el operando izquierdo es menor o igual que el operando derecho.</a></td> + <td><a id="Comparacion" name="Comparacion"><code>var1 <= var2<br> + var2 <= 5</code></a></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><a id="Comparacion" name="Comparacion"><strong>Nota</strong>: (<strong>=></strong>) no es un operador, sino la notación para {{JSxRef("Funciones/Arrow_functions", "Funciones flecha")}}.</a></p> +</div> + +<h3 id="Operadores_aritméticos"><a id="Comparacion" name="Comparacion"></a><a id="Aritmeticos" name="Aritmeticos">Operadores aritméticos</a></h3> + +<p>Un operador aritmético toma valores numéricos (ya sean literales o variables) como sus operandos y devuelve un solo valor numérico. Los operadores aritméticos estándar son suma (<code>+</code>), resta (<code>-</code>), multiplicación (<code>*</code>) y división (<code>/</code>). Estos operadores funcionan como lo hacen en la mayoría de los otros lenguajes de programación cuando se usan con números de punto flotante (en particular, ten en cuenta que la división entre cero produce {{JSxRef("Infinity")}}). Por ejemplo:</p> + +<pre class="brush: js notranslate">1 / 2; // 0.5 +1 / 2 == 1.0 / 2.0; // Esto es true +</pre> + +<p>Además de las operaciones aritméticas estándar (<code>+</code>, <code>-</code>, <code>*</code>, <code>/</code>), JavaScript proporciona los operadores aritméticos enumerados en la siguiente tabla:</p> + +<table class="fullwidth-table"> + <caption>Operadores aritméticos</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Operadores/Remainder", "Residuo")}} (<code>%</code>)</td> + <td>Operador binario. Devuelve el resto entero de dividir los dos operandos.</td> + <td>12 % 5 devuelve 2.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Increment", "Incremento")}} (<code>++</code>)</td> + <td>Operador unario. Agrega uno a su operando. Si se usa como operador prefijo (<code>++x</code>), devuelve el valor de su operando después de agregar uno; si se usa como operador sufijo (<code>x++</code>), devuelve el valor de su operando antes de agregar uno.</td> + <td>Si <code>x</code> es 3, <code>++x</code> establece <code>x</code> en 4 y devuelve 4, mientras que <code>x++</code> devuelve 3 y , solo entonces, establece <code>x</code> en 4.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Decrement", "Decremento")}} (<code>--</code>)</td> + <td>Operador unario. Resta uno de su operando. El valor de retorno es análogo al del operador de incremento.</td> + <td>Si <code>x</code> es 3, entonces <code>--x</code> establece <code>x</code> en 2 y devuelve 2, mientras que <code>x--</code> devuelve 3 y, solo entonces, establece <code>x</code> en 2.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Unary_negation", "Negación unaria")}} (<code>-</code>)</td> + <td>Operador unario. Devuelve la negación de su operando.</td> + <td>Si <code>x</code> es 3, entonces <code>-x</code> devuelve -3.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Unary_plus", "Positivo unario")}} (<code>+</code>)</td> + <td>Operador unario. Intenta convertir el operando en un número, si aún no lo es.</td> + <td><code>+"3"</code> devuelve <code>3</code>.<br> + <code>+true</code> devuelve <code>1.</code></td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Exponentiation", "Operador de exponenciación")}} (<code>**</code>)</td> + <td>Calcula la <code>base</code> a la potencia de <code>exponente</code>, es decir, <code>base<sup>exponente</sup></code></td> + <td><code>2 ** 3</code> returns <code>8</code>.<br> + <code>10 ** -1</code> returns <code>0.1</code>.</td> + </tr> + </tbody> +</table> + +<h3 id="Operadores_bit_a_bit"><a id="Bit_a_bit" name="Bit_a_bit">Operadores bit a bit</a></h3> + +<p>Un operador bit a bit trata a sus operandos como un conjunto de 32 bits (ceros y unos), en lugar de números decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores bit a bit realizan sus operaciones en tales representaciones binarias, pero devuelven valores numéricos estándar de JavaScript.</p> + +<p>La siguiente tabla resume los operadores bit a bit de JavaScript.</p> + +<table class="standard-table"> + <caption>Operadores bit a bit</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Uso</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Operadores/Bitwise_AND", "AND a nivel de bits")}}</td> + <td><code>a & b</code></td> + <td>Devuelve un uno en cada posición del bit para los que los bits correspondientes de ambos operandos son unos.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_OR", "OR a nivel de bits")}}</td> + <td><code>a | b</code></td> + <td>Devuelve un cero en cada posición de bit para el cual los bits correspondientes de ambos operandos son ceros.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_XOR", "XOR a nivel de bits")}}</td> + <td><code>a ^ b</code></td> + <td>Devuelve un cero en cada posición de bit para la que los bits correspondientes son iguales.<br> + [Devuelve uno en cada posición de bit para la que los bits correspondientes son diferentes].</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Bitwise_NOT", "NOT a nivel de bits")}}</td> + <td><code>~ a</code></td> + <td>Invierte los bits de su operando.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Left_shift", "Desplazamiento a la izquierda")}}</td> + <td><code>a << b</code></td> + <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits hacia la izquierda, desplazándose en ceros desde la derecha.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Right_shift", "Desplazamiento a la derecha de propagación de signo")}}</td> + <td><code>a >> b</code></td> + <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits a la derecha, descartando los bits desplazados.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Unsigned_right_shift", "Desplazamiento a la derecha de relleno cero")}}</td> + <td><code>a >>> b</code></td> + <td>Desplaza <code>a</code> en representación binaria <code>b</code> bits hacia la derecha, descartando los bits desplazados y desplazándose en ceros desde la izquierda.</td> + </tr> + </tbody> +</table> + +<h4 id="Operadores_logicos_bit_a_bit" name="Operadores_logicos_bit_a_bit">Operadores lógicos bit a bit</h4> + +<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p> + +<ul> + <li>Los operandos se convierten en enteros de treinta y dos bits y se expresan mediante una serie de bits (ceros y unos). A los números con más de 32 bits se les descartan los bits más significativos. Por ejemplo, el siguiente número entero con más de 32 bits se convertirá en un número entero de 32 bits: + <pre class="brush: bash notranslate">Antes: 1110<code> </code>0110<code> </code>1111<code> </code>1010<code> </code>0000<code> </code>0000<code> </code>0000<code> </code>0110<code> </code>0000<code> </code>0000<code> </code>0001 +Después: 1010<code> </code>0000<code> </code>0000<code> </code>0000<code> </code>0110<code> </code>0000<code> </code>0000<code> </code>0001</pre> + </li> + <li>Cada bit en el primer operando se empareja con el bit correspondiente en el segundo operando: primer bit al primer bit, segundo bit al segundo bit, y así sucesivamente.</li> + <li>El operador se aplica a cada par de bits y el resultado se construye bit a bit.</li> +</ul> + +<p>Por ejemplo, la representación binaria de nueve es 1001 y la representación binaria de quince es 1111. Entonces, cuando los operadores bit a bit se aplican a estos valores, los resultados son los siguientes:</p> + +<table class="standard-table"> + <caption>Ejemplos de operadores bit a bit</caption> + <thead> + <tr> + <th scope="col">Expresión</th> + <th scope="col">Resultado</th> + <th scope="col">Descripción binaria</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>15 & 9</code></td> + <td><code>9</code></td> + <td><code>1111 & 1001 = 1001</code></td> + </tr> + <tr> + <td><code>15 | 9</code></td> + <td><code>15</code></td> + <td><code>1111 | 1001 = 1111</code></td> + </tr> + <tr> + <td><code>15 ^ 9</code></td> + <td><code>6</code></td> + <td><code>1111 ^ 1001 = 0110</code></td> + </tr> + <tr> + <td><code>~15</code></td> + <td><code>-16</code></td> + <td><code>~ 0000 0000 ... 0000 1111 = 1111 1111 ... 1111 0000</code></td> + </tr> + <tr> + <td><code>~9</code></td> + <td><code>-10</code></td> + <td><code>~ 0000 0000 ... 0000 1001 = 1111 1111 ... 1111 0110</code></td> + </tr> + </tbody> +</table> + +<p>Ten en cuenta que los 32 bits se invierten utilizando el operador <code>NOT</code> a nivel de bits y que los valores con el bit más significativo (más a la izquierda) establecido en 1 representan números negativos (representación en complemento a dos). <code>~x</code> evalúa al mismo valor que evalúa <code>-x - 1</code>.</p> + +<h4 id="Operadores_de_desplazamiento_de_bits" name="Operadores_de_desplazamiento_de_bits">Operadores de desplazamiento de bits</h4> + +<p>Los operadores de desplazamiento bit a bit toman dos operandos: el primero es una cantidad que se va a desplazar y el segundo especifica el número de posiciones de bit por las que se va a desplazar el primer operando. La dirección de la operación de desplazamiento es controlada por el operador utilizado.</p> + +<p>Los operadores de desplazamiento convierten sus operandos en enteros de treinta y dos bits y devuelven un resultado del mismo tipo que el operando izquierdo.</p> + +<p>Los operadores de desplazamiento se enumeran en la siguiente tabla.</p> + +<table class="fullwidth-table"> + <caption>Operadores de desplazamiento de bits</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Descripción</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Operadores/Left_shift", "Desplazamiento a la izquierda")}}<br> + (<code><<</code>)</td> + <td>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits desplazados en exceso hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</td> + <td><code>9<<2</code> produce 36, porque 1001 desplazado 2 bits a la izquierda se convierte en 100100, que es 36.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Right_shift", "Desplazamiento a la derecha de propagación de signo")}} (<code>>></code>)</td> + <td>Este operador desplaza el primer operando el número especificado de bits a la derecha. Los bits desplazados en exceso hacia la derecha se descartan. Las copias del bit más a la izquierda se desplazan desde la izquierda.</td> + <td><code>9>>2</code> produce 2, porque 1001 desplazado 2 bits a la derecha se convierte en 10, que es 2. Del mismo modo, <code>-9>>2</code> produce -3, porque el signo se conserva.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Unsigned_right_shift", "Desplazamiento a la derecha de relleno cero")}} (<code>>>></code>)</td> + <td>Este operador desplaza el primer operando el número especificado de bits a la derecha. Los bits desplazados en exceso hacia la derecha se descartan. Los bits cero se desplazan desde la izquierda.</td> + <td><code>19>>>2</code> produce 4, porque 10011 desplazado 2 bits a la derecha se convierte en 100, que es 4. Para números no negativos, el desplazamiento a la derecha de relleno con ceros y el desplazamiento a la derecha de propagación del signo producen el mismo resultado.</td> + </tr> + </tbody> +</table> + +<h3 id="Operadores_lógicos"><a id="Logico" name="Logico">Operadores lógicos</a></h3> + +<p>Los operadores lógicos se utilizan normalmente con valores booleanos (lógicos); cuando lo son, devuelven un valor booleano. Sin embargo, los operadores <code>&&</code> y <code>||</code> en realidad devuelven el valor de uno de los operandos especificados, por lo que si estos operadores se utilizan con valores no booleanos, pueden devolver un valor no booleano. Los operadores lógicos se describen en la siguiente tabla.</p> + +<table class="fullwidth-table"> + <caption>Operadores lógicos</caption> + <thead> + <tr> + <th scope="col">Operador</th> + <th scope="col">Uso</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Operadores/Logical_AND", "AND Lógico")}} (<code>&&</code>)</td> + <td><code>expr1 && expr2</code></td> + <td>Devuelve <code>expr1</code> si se puede convertir a <code>false</code>; de lo contrario, devuelve <code>expr2</code>. Por lo tanto, cuando se usa con valores booleanos, <code>&&</code> devuelve <code>true</code> si ambos operandos son <code>true</code>; de lo contrario, devuelve <code>false</code>.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Logical_OR", "OR lógico")}} (<code>||</code>)</td> + <td><code>expr1 || expr2</code></td> + <td>Devuelve <code>expr1</code> si se puede convertir a <code>true</code>; de lo contrario, devuelve <code>expr2</code>. Por lo tanto, cuando se usa con valores booleanos, <code>||</code> devuelve <code>true</code> si alguno de los operandos es <code>true</code>; si ambos son falsos, devuelve <code>false</code>.</td> + </tr> + <tr> + <td>{{JSxRef("Operadores/Logical_NOT", "NOT lógico")}} (<code>!</code>)</td> + <td><code>!expr</code></td> + <td>Devuelve <code>false</code> si su único operando se puede convertir a <code>true</code>; de lo contrario, devuelve <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Ejemplos de expresiones que se pueden convertir a <code>false</code> son aquellos que se evalúan como <code>null</code>, 0, <code>NaN</code>, la cadena vacía ("") o <code>undefined</code>.</p> + +<p>El siguiente código muestra ejemplos del operador <code>&&</code> (<code>AND</code> lógico).</p> + +<pre class="brush: js notranslate">var a1 = true && true; // t && t devuelve true +var a2 = true && false; // t && f devuelve false +var a3 = false && true; // f && t devuelve false +var a4 = false && (3 == 4); // f && f devuelve false +var a5 = 'Cat' && 'Dog'; // t && t devuelve Dog +var a6 = false && 'Cat'; // f && t devuelve false +var a7 = 'Cat' && false; // t && f devuelve false +</pre> + +<p>El siguiente código muestra ejemplos del operador || (<code>OR</code> lógico).</p> + +<pre class="brush: js notranslate">var o1 = true || true; // t || t devuelve true +var o2 = false || true; // f || t devuelve true +var o3 = true || false; // t || f devuelve true +var o4 = false || (3 == 4); // f || f devuelve false +var o5 = 'Cat' || 'Dog'; // t || t devuelve Cat +var o6 = false || 'Cat'; // f || t devuelve Cat +var o7 = 'Cat' || false; // t || f devuelve Cat +</pre> + +<p>El siguiente código muestra ejemplos de el operador ! (<code>NOT</code> lógico).</p> + +<pre class="brush: js notranslate">var n1 = !true; // !t devuelve false +var n2 = !false; // !f devuelve true +var n3 = !'Cat'; // !t devuelve false +</pre> + +<h4 id="Evaluacion_de_cortocircuito" name="Evaluacion_de_cortocircuito">Evaluación de cortocircuito</h4> + +<p>Debido a que las expresiones lógicas se evalúan de izquierda a derecha, se prueban para una posible evaluación de "cortocircuito" utilizando las siguientes reglas:</p> + +<ul> + <li><code>false</code> && <em>anything</em> se evalúa en cortocircuito como <code>false</code>.</li> + <li><code>true</code> || <em>anything</em> se evalúa en cortocircuito como <code>true</code>.</li> +</ul> + +<p>Las reglas de la lógica garantizan que estas evaluaciones sean siempre correctas. Ten en cuenta que la parte <em>anything</em> de las expresiones anteriores no se evalúa, por lo que los efectos secundarios de hacerlo no surten efecto.</p> + +<p>Ten en cuenta que para el segundo caso, en el código moderno puedes usar el nuevo {{JSxRef("Operadores/Nullish_coalescing_operator", "operador de fusión nulo")}} (<code>??</code>) que funciona como <code>||</code>, pero solo devuelve la segunda expresión, cuando la primera es "{{Glossary("Nullish", "nullish")}}", es decir, {{JSxRef("Objetos_globales/null", "null")}}, el valor nulo representa la ausencia intencional de cualquier valor de objeto. Es uno de los valores primitivos de JavaScript y se trata como falso para las operaciones booleanas. o {{JSxRef("Objetos_globales/undefined", "undefined")}} la propiedad global undefined representa el valor "<code>undefined</code>" primitivo. Es uno de los tipos primitivos de JavaScript. Por tanto, es la mejor alternativa para proporcionar valores predeterminados, cuando valores como <code>''</code> o <code>0</code> también son valores válidos para la primera expresión.</p> + +<h3 id="Operadores_de_cadena"><a id="Cadena" name="Cadena">Operadores de cadena</a></h3> + +<p>Además de los operadores de comparación, que se pueden usar en valores de cadena, el operador de concatenación (+) concatena dos valores de cadena, devolviendo otra cadena que es la unión de los dos operandos de cadena.</p> + +<p>Por ejemplo,</p> + +<pre class="brush: js notranslate">console.log('mi ' + 'cadena'); // la consola registra la cadena "mi cadena".</pre> + +<p>El operador de asignación abreviada <code>+=</code> también se puede utilizar para concatenar cadenas.</p> + +<p>Por ejemplo,</p> + +<pre class="brush: js notranslate">var mystring = 'alpha'; +mystring += 'bet'; // se evalúa como "alphabet" y asigna este valor a mystring.</pre> + +<h3 id="Operador_condicional_ternario"><a id="Condicional" name="Condicional">Operador condicional (ternario)</a></h3> + +<p>El {{JSxRef("Operadores/Conditional_Operator", "operador condicional")}} es el único operador de JavaScript que toma tres operandos. El operador puede tener uno de dos valores según una condición. La sintaxis es:</p> + +<pre class="syntaxbox notranslate"><em>condition</em> ? <em>val1</em> : <em>val2</em> +</pre> + +<p>Si <code>condition</code> es <code>true</code>, el operador tiene el valor de <code>val1</code>. De lo contrario, tiene el valor de <code>val2</code>. Puedes utilizar el operador condicional en cualquier lugar donde normalmente utilizas un operador estándar.</p> + +<p>Por ejemplo,</p> + +<pre class="brush: js notranslate">var status = (age >= 18) ? 'adult' : 'minor'; +</pre> + +<p>Esta declaración asigna el valor "<code>adult</code>" a la variable <code>status</code> si <code>age</code> es de dieciocho años o más. De lo contrario, asigna el valor "<code>minor</code>" a <code>status</code>.</p> + +<h3 id="Operador_coma" name="Operador_coma"><a id="Coma" name="Coma">Operador coma</a></h3> + +<p>El {{JSxRef("Operadores/Comma_Operator", "operador coma")}} (<code>,</code>) simplemente evalúa ambos operandos y devuelve el valor del último operando. Este operador se utiliza principalmente dentro de un bucle <code>for</code>, para permitir que se actualicen múltiples variables cada vez a través del bucle. Se considera de mal estilo usarlo en otros lugares, cuando no es necesario. A menudo, en su lugar pueden y se deben utilizar dos declaraciones independientes.</p> + +<p>Por ejemplo, si <code>a</code> es un arreglo bidimensional con 10 elementos en un lado, el siguiente código usa el operador <code>coma</code> para actualizar dos variables a la vez. El código imprime los valores de los elementos diagonales en el arreglo:</p> + +<pre class="brush: js notranslate">var x = [0,1,2,3,4,5,6,7,8,9] +var a = [x, x, x, x, x]; + +for (var i = 0, j = 9; i <= j; i++, j--) +// ^ + console.log('a[' + i + '][' + j + ']= ' + a[i][j]); +</pre> + +<h3 id="Operadores_unarios"><a id="Unario" name="Unario">Operadores unarios</a></h3> + +<p>Una operación unaria es una operación con un solo operando.</p> + +<h4 id="delete" name="delete"><code>delete</code></h4> + +<p>El operador {{JSxRef("Operadores/delete", "delete")}} elimina la propiedad de un objeto. La sintaxis es:</p> + +<pre class="brush: js notranslate">delete object.property; +delete object[propertyKey]; +delete objectName[index]; +delete property; // legal solo dentro de una declaración with +</pre> + +<p>donde <code>object</code> es el nombre de un objeto, <code>property</code> es una propiedad existente y <code>propertyKey</code> es una cadena o símbolo que hace referencia a una propiedad existente.</p> + +<p>La cuarta forma es legal solo dentro de una declaración {{JSxRef("Sentencias/with", "with")}}, para eliminar una propiedad de un objeto, y también para las propiedades del objeto global.</p> + +<p>Si el operador <code>delete</code> tiene éxito, elimina la propiedad del objeto. Intentar acceder a él después dará como resultado <code>undefined</code>. El operador <code>delete</code> devuelve <code>true</code> si la operación es posible; devuelve <code>false</code> si la operación no es posible.</p> + +<pre class="brush: js notranslate">x = 42; // implícitamente crea window.x +var y = 43; +var myobj = {h: 4}; // crea un objeto con la propiedad h + +delete x; // devuelve true (se puede eliminar si se crea implícitamente) +delete y; // devuelve false (no se puede borrar si se declara con var) +delete Math.PI; // devuelve false (no se pueden eliminar propiedades no configurables) +delete myobj.h; // devuelve true (puede eliminar propiedades definidas por el usuario) +</pre> + +<h5 id="Eliminar_elementos_de_un_arreglo">Eliminar elementos de un arreglo</h5> + +<p>Dado que los arreglos solo son objetos, técnicamente es posible <code>delete</code> elementos de ellos. Sin embargo, esto se considera una mala práctica, trata de evitarlo. Cuando eliminas una propiedad de arreglo, la longitud del arreglo no se ve afectada y otros elementos no se vuelven a indexar. Para lograr ese comportamiento, es mucho mejor simplemente sobrescribir el elemento con el valor <code>undefined</code>. Para manipular realmente el arreglo, usa los diversos métodos de arreglo, como {{JSxRef("Objetos_globales/Array/splice", "splice")}}.</p> + +<h4 id="typeof" name="typeof"><code>typeof</code></h4> + +<p>El {{JSxRef("Operadores/typeof", "operador typeof")}} se utiliza de cualquiera de las siguientes formas:</p> + +<pre class="syntaxbox notranslate">typeof operand +typeof (operand) +</pre> + +<p>El operador <code>typeof</code> devuelve una cadena que indica el tipo de operando no evaluado. <code>operando</code> es la cadena, variable, palabra clave u objeto para el que se devolverá el tipo. Los paréntesis son opcionales.</p> + +<p>Supón que defines las siguientes variables:</p> + +<pre class="brush: js notranslate">var myFun = new Function('5 + 2'); +var shape = 'round'; +var size = 1; +var foo = ['Apple', 'Mango', 'Orange']; +var today = new Date(); +</pre> + +<p>El operador <code>typeof</code> devuelve los siguientes resultados para estas variables:</p> + +<pre class="brush: js notranslate">typeof myFun; // devuelve "function" +typeof shape; // devuelve "string" +typeof size; // devuelve "number" +typeof foo; // devuelve "object" +typeof today; // devuelve "object" +typeof doesntExist; // devuelve "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 notranslate">typeof true; // devuelve "boolean" +typeof null; // devuelve "object" +</pre> + +<p>Para un número o cadena, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js notranslate">typeof 62; // devuelve "number" +typeof 'Hola mundo'; // devuelve "string" +</pre> + +<p>Para los valores de propiedad, el operador <code>typeof</code> devuelve el tipo de valor que contiene la propiedad:</p> + +<pre class="brush: js notranslate">typeof document.lastModified; // devuelve "string" +typeof window.length; // devuelve "number" +typeof Math.LN2; // devuelve "number" +</pre> + +<p>Para métodos y funciones, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js notranslate">typeof blur; // devuelve "function" +typeof eval; // devuelve "function" +typeof parseInt; // devuelve "function" +typeof shape.split; // devuelve "function" +</pre> + +<p>Para objetos predefinidos, el operador <code>typeof</code> devuelve los siguientes resultados:</p> + +<pre class="brush: js notranslate">typeof Date; // devuelve "function" +typeof Function; // devuelve "function" +typeof Math; // devuelve "object" +typeof Option; // devuelve "function" +typeof String; // devuelve "function" +</pre> + +<h4 id="void" name="void"><code>void</code></h4> + +<p>El {{JSxRef("Operadores/void", "operador void")}} se utiliza de cualquiera de las siguientes formas:</p> + +<pre class="syntaxbox notranslate">void (expression) +void expression +</pre> + +<p>El operador <code>void</code> especifica una expresión que se evaluará sin devolver un valor. <code>expression</code> es una expresión de JavaScript para evaluar. Los paréntesis que rodean la expresión son opcionales, pero es un buen estilo usarlos.</p> + +<h3 id="Operadores_relacionales"><a id="Relacional" name="Relacional">Operadores relacionales</a></h3> + +<p>Un operador relacional compara sus operandos y devuelve un valor <code>Boolean</code> basado en si la comparación es verdadera.</p> + +<h4 id="in"><code>in</code></h4> + +<p>El {{JSxRef("Operadores/in", "operador in")}} devuelve <code>true</code> si la propiedad especificada está en el objeto especificado. La sintaxis es:</p> + +<pre class="brush: js notranslate">propNameOrNumber in objectName +</pre> + +<p>donde <code>propNameOrNumber</code> es una expresión de cadena, numérica o de símbolo que representa un nombre de propiedad o índice de arreglo, y <code>objectName</code> es el nombre de un objeto.</p> + +<p>Los siguientes ejemplos muestran algunos usos del operador <code>in</code>.</p> + +<pre class="brush: js notranslate">// Arreglos +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +0 in trees; // devuelve true +3 in trees; // devuelve true +6 in trees; // devuelve false +'bay' in trees; // devuelve false (debes especificar el número del índice, + // no el valor en ese índice) +'length' en trees; // devuelve true (la longitud es una propiedad de Array) + +// objetos integrados +'PI' in Math; // devuelve true +var myString = new String('coral'); +'length' in myString; // devuelve true + +// Objetos personalizados +var mycar = { make: 'Honda', model: 'Accord', year: 1998 }; +'make' in mycar; // devuelve true +'model' in mycar; // devuelve true +</pre> + +<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4> + +<p>El {{JSxRef("Operadores/instanceof", "operador instanceof")}} devuelve <code>true</code> si el objeto especificado es del tipo de objeto especificado. La sintaxis es:</p> + +<pre class="syntaxbox notranslate">objectName instanceof objectType +</pre> + +<p>donde <code>objectName</code> es el nombre del objeto para comparar con <code>objectType</code>, y <code>objectType</code> es un tipo de objeto, como {{JSxRef("Date")}} o {{JSxRef("Array")}}.</p> + +<p>Utiliza <code>instanceof</code> cuando necesites confirmar el tipo de un objeto en tiempo de ejecución. Por ejemplo, al detectar excepciones, puedes ramificar a diferentes controladores según el tipo de excepción lanzada.</p> + +<p>Por ejemplo, el siguiente código usa <code>instanceof</code> para determinar si <code>theDay</code> es un objeto <code>Date</code>. Debido a que <code>theDay</code> es un objeto <code>Date</code>, las instrucciones de la expresión <code>if</code> se ejecutan.</p> + +<pre class="brush: js notranslate">var theDay = new Date(1995, 12, 17); +if (theDay instanceof Date) { + // instrucciones a ejecutar +} +} +</pre> + +<h3 id="Precedencia_de_los_operadores">Precedencia de los operadores</h3> + +<p>La <em>precedencia</em> de los operadores determina el orden en que se aplican al evaluar una expresión. Puedes redefinir la precedencia de los operadores mediante el uso de paréntesis.</p> + +<p>La siguiente tabla describe la precedencia de los operadores, de mayor a menor.</p> + +<table class="standard-table"> + <caption>Precedencia de los operadores</caption> + <thead> + <tr> + <th scope="col">Tipo de operador</th> + <th scope="col">Operadores individuales</th> + </tr> + </thead> + <tbody> + <tr> + <td>miembro</td> + <td><code>. []</code></td> + </tr> + <tr> + <td>llamar / crear instancia</td> + <td><code>() new</code></td> + </tr> + <tr> + <td>negación / incremento</td> + <td><code>! ~ - + ++ -- typeof void delete</code></td> + </tr> + <tr> + <td>multiplicar / dividir</td> + <td><code>* / %</code></td> + </tr> + <tr> + <td>adición / sustracción</td> + <td><code>+ -</code></td> + </tr> + <tr> + <td>desplazamiento bit a bit</td> + <td><code><< >> >>></code></td> + </tr> + <tr> + <td>relacional</td> + <td><code>< <= > >= in instanceof</code></td> + </tr> + <tr> + <td>igualdad</td> + <td><code>== != === !==</code></td> + </tr> + <tr> + <td><code>AND</code> bit a bit</td> + <td><code>&</code></td> + </tr> + <tr> + <td><code>XOR</code> bit a bit</td> + <td><code>^</code></td> + </tr> + <tr> + <td><code>OR</code> bit a bit</td> + <td><code>|</code></td> + </tr> + <tr> + <td><code>AND</code> lógico</td> + <td><code>&&</code></td> + </tr> + <tr> + <td><code>OR</code> lógico</td> + <td><code>||</code></td> + </tr> + <tr> + <td>condicional</td> + <td><code>?:</code></td> + </tr> + <tr> + <td>asignación</td> + <td><code>= += -= *= /= %= <<= >>= >>>= &= ^= |= &&= ||= ??=</code></td> + </tr> + <tr> + <td>coma</td> + <td><code>,</code></td> + </tr> + </tbody> +</table> + +<p>Puedes encontrar una versión más detallada de esta tabla, completa con enlaces a detalles adicionales sobre cada operador, en {{JSxRef("Operadores/Operator_Precedence", "Referencia de JavaScript", "#Table")}}.</p> + +<h2 id="Expresiones">Expresiones</h2> + +<p>Una <em>expresión</em> es cualquier unidad de código válida que se resuelve en un valor.</p> + +<p>Toda expresión sintácticamente válida se resuelve en algún valor, pero conceptualmente, hay dos tipos de expresiones: con efectos secundarios (por ejemplo: las que asignan valor a una variable) y las que en algún sentido evalúan y por lo tanto se resuelven en un valor.</p> + +<p>La expresión <code>x = 7</code> es un ejemplo del primer tipo. Esta expresión usa el <em>operador</em> = para asignar el valor siete a la variable <code>x</code>. La expresión en sí se evalúa como siete.</p> + +<p>El código <code>3 + 4</code> es un ejemplo del segundo tipo de expresión. Esta expresión usa el operador + para sumar tres y cuatro sin asignar el resultado, siete, a una variable.<br> + <br> + JavaScript tiene las siguientes categorías de expresión:</p> + +<ul> + <li>Aritméticas: se evalúa como un número, por ejemplo 3.14159. (Generalmente usa {{anch("#Aritméticos", "operadores aritméticos")}}).</li> + <li>Cadenas: se evalúa como una cadena de caracteres, por ejemplo, "Fred" o "234". (Generalmente usa {{anch("Cadena", "operadores de cadena")}}).</li> + <li>Lógicas: se evalúan como <code>true</code> o <code>false</code>. (A menudo implica {{anch("Logico", "operadores lógicos")}}).</li> + <li>Expresiones primarias: palabras clave básicas y expresiones generales en JavaScript.</li> + <li>Expresiones del lado izquierdo: los valores del lado izquierdo son el destino de una asignación.</li> +</ul> + +<h3 id="Expresiones_primarias">Expresiones primarias</h3> + +<p>Palabras clave básicas y expresiones generales en JavaScript.</p> + +<h4 id="this" name="this"><code>this</code></h4> + +<p>Utiliza la {{JSxRef("Operadores/this", "palabra clave this")}} para hacer referencia al objeto actual. En general, <code>this</code> se refiere al objeto que llama en un método. Usa <code>this</code> con la notación de punto o entre corchetes:</p> + +<pre class="syntaxbox notranslate">this['propertyName'] +this.propertyName +</pre> + +<p>Supongamos que una función llamada <code>validate</code> valida la propiedad <code>value</code> de un objeto, dado el objeto y los valores alto y bajo:</p> + +<pre class="brush: js notranslate">function validate(obj, lowval, hival) { + if ((obj.value < lowval) || (obj.value > hival)) + console.log('¡Valor no válido!'); +} +</pre> + +<p>Puedes llamar a <code>validate</code> en el controlador de eventos <code>onChange</code> de cada elemento de formulario, utilizando <code>this</code> para pasarlo al elemento de formulario, como en el siguiente ejemplo:</p> + +<pre class="brush: html notranslate"><p>Ingresa un número entre 18 y 99:</p> +<input type="text" name="age" size=3 onChange="validate(this, 18, 99);"> +</pre> + +<h4 id="Operador_de_agrupación">Operador de agrupación</h4> + +<p>El operador de agrupación <code>()</code> controla la precedencia de la evaluación en las expresiones. Por ejemplo, puedes redefinir la multiplicación y la división primero, luego la suma y la resta para evaluar la suma primero.</p> + +<pre class="brush:js notranslate">var a = 1; +var b = 2; +var c = 3; + +// precedencia predeterminada +a + b * c // 7 +// evaluado por omisión así +a + (b * c) // 7 + +// ahora prevalece sobre la precedencia +// suma antes de multiplicar +(a + b) * c // 9 + +// que es equivalente a +a * c + b * c // 9 +</pre> + +<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> + +<h4 id="new" name="new"><code>new</code></h4> + +<p>Puedes utilizar el {{JSxRef("Operadores/new", "operador new")}} para crear una instancia de un tipo de objeto definido por el usuario o de uno de los tipos de objeto integrados. Utiliza <code>new</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var objectName = new objectType([param1, param2, ..., paramN]); +</pre> + +<h4 id="super"><code>super</code></h4> + +<p>La {{JSxRef("Operadores/super", "palabra clave super")}} se utiliza para llamar a funciones en el padre de un objeto. Es útil con {{JSxRef("Classes", "clases")}} llamar al constructor padre, por ejemplo.</p> + +<pre class="syntaxbox notranslate">super([arguments]); // llama al constructor padre. +super.functionOnParent([arguments]); +</pre> + +<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div> diff --git a/files/es/web/javascript/guide/funciones/index.html b/files/es/web/javascript/guide/funciones/index.html new file mode 100644 index 0000000000..9594a71f4c --- /dev/null +++ b/files/es/web/javascript/guide/funciones/index.html @@ -0,0 +1,706 @@ +--- +title: Funciones +slug: Web/JavaScript/Guide/Funciones +tags: + - Funciones + - Guía + - JavaScript + - Novato + - Principiante + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Functions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</div> + +<p class="summary">Las funciones son uno de los bloques de construcción fundamentales en JavaScript. Una función en JavaScript es similar a un procedimiento — un conjunto de instrucciones que realiza una tarea o calcula un valor, pero para que un procedimiento califique como función, debe tomar alguna entrada y devolver una salida donde hay alguna relación obvia entre la entrada y la salida. Para usar una función, debes definirla en algún lugar del ámbito desde el que deseas llamarla.</p> + +<p>Consulta también el {{JSxRef("Funciones", "capítulo de referencia exhaustivo sobre funciones de JavaScript")}} para conocer los detalles.</p> + +<h2 id="Definir_funciones">Definir funciones</h2> + +<h3 id="Declaración_de_función">Declaración de función</h3> + +<p>Una <strong>definición de función</strong> (también denominada <strong>declaración de función</strong> o <strong>expresión de función</strong>) consta de la palabra clave {{JSxRef("Sentencias/function", "function")}}, seguida de:</p> + +<ul> + <li>El nombre de la función.</li> + <li>Una lista de parámetros de la función, entre paréntesis y separados por comas.</li> + <li>Las declaraciones de JavaScript que definen la función, encerradas entre llaves, <code>{ ... }</code>.</li> +</ul> + +<p>Por ejemplo, el siguiente código define una función simple llamada <code>square</code> ("cuadrado"):</p> + +<pre class="brush: js notranslate">function square(number) { + return number * number; +} +</pre> + +<p>La función <code>square</code> toma un parámetro, llamado <code>number</code>. La función consta de una declaración que dice devuelva el parámetro de la función (es decir, <code>number</code>) multiplicado por sí mismo. La instrucción {{JSxRef("Sentencias/return", "return")}} especifica el valor devuelto por la función:</p> + +<pre class="brush: js notranslate">return number * number; +</pre> + +<p>Los parámetros primitivos (como un <code>number</code>) se pasan a las funciones <strong>por valor</strong>; el valor se pasa a la función, pero si la función cambia el valor del parámetro, <strong>este cambio no se refleja globalmente ni en la función que llama</strong>.</p> + +<p>Si pasas un objeto (es decir, un valor no primitivo, como {{JSxRef("Array")}} o un objeto definido por el usuario) como parámetro y la función cambia las propiedades del objeto, ese cambio es visible fuera de la función, como se muestra en el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">function myFunc(theObject) { + theObject.make = 'Toyota'; +} + +[parcial]var mycar = { make: 'Honda', model: 'Accord', year: 1998 }; +var x, y; + +x = mycar.make; // x obtiene el valor "Honda" + +myFunc(mycar); +y = mycar.make; // y obtiene el valor "Toyota" + // (la propiedad make fue cambiada por la función) +</pre> + +<h3 id="Expresiones_function">Expresiones <code>function</code></h3> + +<p>Si bien la declaración de función anterior sintácticamente es una declaración, las funciones también se pueden crear mediante una {{JSxRef("Operadores/function", "expresión function")}}.</p> + +<p>Esta función puede ser <strong>anónima</strong>; no tiene por qué tener un nombre. Por ejemplo, la función <code>square</code> se podría haber definido como:</p> + +<pre class="brush: js notranslate">const square = function(number) { return number * number } +var x = square(4) // x obtiene el valor 16</pre> + +<p>Sin embargo, <em>puedes</em> proporcionar un nombre con una expresión <code>function</code>. Proporcionar un nombre permite que la función se refiera a sí misma y también facilita la identificación de la función en el seguimiento de la pila de un depurador:</p> + +<pre class="brush: js notranslate">const factorial = function fac(n) { return n < 2 ? 1 : n * fac(n - 1) } + +console.log(factorial(3)) +</pre> + +<p>Las expresiones <code>function</code> son convenientes cuando se pasa una función como argumento a otra función. El siguiente ejemplo muestra una función <code>map</code> que debería recibir una función como primer argumento y un arreglo como segundo argumento.</p> + +<pre class="brush: js notranslate">function map(f, a) { + let result = []; // Crea un nuevo arreglo + let i; // Declara una variable + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +</pre> + +<p>En el siguiente código, la función recibe una función definida por una expresión de función y la ejecuta por cada elemento del arreglo recibido como segundo argumento.</p> + +<pre class="brush: js notranslate">function map(f, a) { + let result = []; // Crea un nuevo arreglo + let i; // Declara una variable + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +const f = function(x) { + return x * x * x; +} +let numbers = [0, 1, 2, 5, 10]; +let cube = map(f,numbers); +console.log(cube);</pre> + +<p>La función devuelve: <code>[0, 1, 8, 125, 1000]</code>.</p> + +<p>En JavaScript, una función se puede definir en función de una condición. Por ejemplo, la siguiente definición de función define <code>myFunc</code> solo si <code>num</code> es igual a <code>0</code>:</p> + +<pre class="brush: js notranslate">var myFunc; +if (num === 0) { + myFunc = function(theObject) { + theObject.make = 'Toyota'; + } +}</pre> + +<p>Además de definir funciones como se describe aquí, también puedes usar el constructor {{JSxRef("Function")}} para crear funciones a partir de una cadena en tiempo de ejecución, muy al estilo de {{JSxRef("eval", "eval()")}}.</p> + +<p>Un <strong>método</strong> es una función que es propiedad de un objeto. Obten más información sobre objetos y métodos en {{JSxRef("../Guide/Working_with_Objects", "Trabajar con objetos")}}.</p> + +<h2 id="Llamar_funciones">Llamar funciones</h2> + +<p><em>Definir</em> una función no la <em>ejecuta</em>. Definirla simplemente nombra la función y especifica qué hacer cuando se llama a la función.</p> + +<p><strong>Llamar</strong> a la función en realidad lleva a cabo las acciones especificadas con los parámetros indicados. Por ejemplo, si defines la función <code>square</code>, podrías llamarla de la siguiente manera:</p> + +<pre class="brush: js notranslate">square(5); +</pre> + +<p>La declaración anterior llama a la función con un argumento de <code>5</code>. La función ejecuta sus declaraciones y devuelve el valor <code>25</code>.</p> + +<p>Las funciones deben estar <em>dentro del ámbito</em> cuando se llaman, pero la declaración de la función se puede elevar (cuando aparece debajo de la llamada en el código), como en este ejemplo:</p> + +<pre class="brush: js notranslate">console.log(square(5)); +/* ... */ +function square(n) { return n * n } +</pre> + +<p>El ámbito de una función es la función en la que se declara (o el programa completo, si se declara en el nivel superior).</p> + +<div class="note"> +<p><strong>Nota</strong>: Esto solo trabaja cuando se define la función usando la sintaxis anterior (es decir, <code>function funcName() {}</code>). El siguiente código no trabajará.</p> + +<p>Esto significa que la elevación de función solo trabaja con <em>declaraciones</em> de función, no con <em>expresiones</em> de función.</p> + +<pre class="brush: js example-bad notranslate">console.log(square) // square se eleva con un valor inicial undefined. +console.log(square(5)) // Error de tipo no detectado: square no es una función +const square = function(n) { + return n * n; +} +</pre> +</div> + +<p>Los argumentos de una función no se limitan a cadenas y números. Puedes pasar objetos completos a una función. La función <code>show_props()</code> (definida en {{JSxRef("../Guide/Working_with_Objects", "Trabajar con objetos", "#Objetos_y_propiedades")}} es un ejemplo de una función que toma un objeto como argumento.</p> + +<p>Una función se puede llamar a sí misma. Por ejemplo, aquí hay una función que calcula factoriales de forma recursiva:</p> + +<pre class="brush: js notranslate">function factorial(n) { + if ((n === 0) || (n === 1)) + return 1; + else + return (n * factorial(n - 1)); +} +</pre> + +<p>Luego, podrías calcular los factoriales de <code>1</code> a <code>5</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var a, b, c, d, e; +a = factorial(1); // a obtiene el valor 1 +b = factorial(2); // b obtiene el valor 2 +c = factorial(3); // c obtiene el valor 6 +d = factorial(4); // d obtiene el valor 24 +e = factorial(5); // e obtiene el valor 120 +</pre> + +<p>Hay otras formas de llamar funciones. A menudo hay casos en los que una función se tiene que llamar dinámicamente, o el número de argumentos de una función varía, o en los que el contexto de la llamada a la función se tiene que establecer en un determinado objeto específico en tiempo de ejecución.</p> + +<p>Resulta que las <em>funciones en sí mismas son objetos</em> y, a su vez, estos objetos tienen métodos. (Consulta el objeto {{JSxRef("Function")}}. Uno de estos, el método {{JSxRef("Function.apply", "apply()")}}, se puede utilizar para lograr este objetivo.</p> + +<h2 class="deki-transform" id="Ámbito_de_function">Ámbito de <code>function</code></h2> + +<p>No se puede acceder a las variables definidas dentro de una función desde cualquier lugar fuera de la función, porque la variable se define solo en el ámbito de la función. Sin embargo, una función puede acceder a todas las variables y funciones definidas dentro del ámbito en el que está definida.</p> + +<p>En otras palabras, una función definida en el ámbito global puede acceder a todas las variables definidas en el ámbito global. Una función definida dentro de otra función también puede acceder a todas las variables definidas en su función principal y a cualquier otra variable a la que tenga acceso la función principal.</p> + +<pre class="brush: js notranslate">// Las siguientes variables se definen en el ámbito global +var num1 = 20, + num2 = 3, + name = 'Chamahk'; + +// Esta función está definida en el ámbito global +function multiply() { + return num1 * num2; +} + +multiply(); // Devuelve 60 + +// Un ejemplo de función anidada +function getScore() { + var num1 = 2, + num2 = 3; + + function add() { + return name + ' anotó ' + (num1 + num2); + } + + return add(); +} + +getScore(); // Devuelve "Chamahk anotó 5" +</pre> + +<h2 id="Ámbito_y_la_pila_de_funciones">Ámbito y la pila de funciones</h2> + +<h3 id="Recursión">Recursión</h3> + +<p>Una función se puede referir y llamarse a sí misma. Hay tres formas de que una función se refiera a sí misma:</p> + +<ol> + <li>El nombre de la función</li> + <li>{{JSxRef("Funciones/arguments/callee", "arguments.callee")}}</li> + <li>Una variable dentro del ámbito que se refiere a la función</li> +</ol> + +<p>Por ejemplo, considera la siguiente definición de función:</p> + +<pre class="brush: js notranslate">var foo = function bar() { + // las instrucciones van aquí +} +</pre> + +<p>Dentro del cuerpo de la función, todos los siguientes son equivalentes:</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 se conoce como una <em>función recursiva</em>. En cierto modo, la recursividad es análoga a un bucle. Ambas ejecutan el mismo código varias veces y ambas requieren una condición (para evitar un bucle infinito, o más bien, una recursividad infinita en este caso).</p> + +<p>Por ejemplo, el siguiente bucle...</p> + +<pre class="brush: js notranslate">var x = 0; +while (x < 10) { // "x < 10" es la condición del bucle + // hacer cosas + x++; +} +</pre> + +<p>...se puede convertir en una declaración de función recursiva, seguida de una llamada a esa función:</p> + +<pre class="brush: js notranslate">function loop(x) { + if (x >= 10) // "x >= 10" es la condición de salida (equivalente a "!(x < 10)") + return; + // hacer cosas + loop(x + 1); // la llamada recursiva +} +loop(0); +</pre> + +<p>Sin embargo, algunos algoritmos no pueden ser simples bucles iterativos. Por ejemplo, obtener todos los nodos de una estructura de árbol (como {{web.link("/es/docs/DOM", "DOM")}}) es más fácil a través de la recursividad:</p> + +<pre class="brush: js notranslate">function walkTree(node) { + if (node == null) // + return; + // hacer algo con el nodo + for (var i = 0; i < node.childNodes.length; i++) { + walkTree(node.childNodes[i]); + } +} +</pre> + +<p>En comparación con la función <code>loop</code>, cada llamada recursiva en sí misma hace muchas llamadas recursivas aquí.</p> + +<p>Es posible convertir cualquier algoritmo recursivo en uno no recursivo, pero la lógica suele ser mucho más compleja, y hacerlo requiere el uso de una pila.</p> + +<p>De hecho, la recursividad en sí misma usa una pila: la pila de funciones. El comportamiento similar a una pila se puede ver en el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">function foo(i) { + if (i < 0) + return; + console.log('inicio: ' + i); + foo(i - 1); + console.log('fin: ' + i); +} +foo(3); + +// Produce: + +// inicio: 3 +// inicio: 2 +// inicio: 1 +// inicio: 0 +// fin: 0 +// fin: 1 +// fin: 2 +// fin: 3</pre> + +<h3 id="Funciones_anidadas_y_cierres">Funciones anidadas y cierres</h3> + +<p>Puedes anidar una función dentro de otra función. La función anidada (interna) es privada de su función contenedora (externa).</p> + +<p>También forma un <em>cierre</em>. Un cierre es una expresión (comúnmente, una función) que puede tener variables libres junto con un entorno que une esas variables (que "cierra" la expresión).</p> + +<p>Dado que una función anidada es un cierre, 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 el ámbito de la función externa.</p> + +<p>Para resumir:</p> + +<ul> + <li>Solo se puede acceder a la función interna desde declaraciones en la función externa.</li> +</ul> + +<ul> + <li>La función interna forma un cierre: la función interna puede usar los argumentos y variables de la función externa, mientras que la función externa no puede usar los argumentos y variables de la función interna.</li> +</ul> + +<p>El siguiente ejemplo muestra funciones anidadas:</p> + +<pre class="brush: js notranslate">function addSquares(a, b) { + function square(x) { + return x * x; + } + return square(a) + square(b); +} +a = addSquares(2, 3); // devuelve 13 +b = addSquares(3, 4); // devuelve 25 +c = addSquares(4, 5); // devuelve 41 +</pre> + +<p>Dado que la función interna forma un cierre, puedes llamar a la función externa y especificar argumentos tanto para la función externa como para la interna:</p> + +<pre class="brush: js notranslate">function outside(x) { + function inside(y) { + return x + y; + } + return inside; +} +fn_inside = outside(3); // Piensa en ello como: dame una función que agregue 3 a lo que sea que le des + // eso +result = fn_inside(5); // devuelve 8 + +result1 = outside(3)(5); // devuelve 8 +</pre> + +<h3 id="Preservación_de_variables">Preservación de variables</h3> + +<p>Observa cómo se conserva <code>x</code> cuando se devuelve <code>inside</code>. Un cierre debe conservar los argumentos y variables en todos los ámbitos a los que hace referencia. Dado que cada llamada proporciona argumentos potencialmente diferentes, se crea un nuevo cierre para cada llamada a <code>outside</code>. La memoria se puede liberar solo cuando el <code>inside</code> devuelto ya no es accesible.</p> + +<p>Esto no es diferente de almacenar referencias en otros objetos, pero a menudo es menos obvio porque uno no establece las referencias directamente y no las puede inspeccionar.</p> + +<h3 id="Funciones_multianidadas">Funciones multianidadas</h3> + +<p>Las funciones se pueden anidar de forma múltiple. Por ejemplo:</p> + +<ul> + <li>Una función (<code>A</code>) contiene una función (<code>B</code>), que a su vez contiene una función (<code>C</code>).</li> + <li>Ambas funciones <code>B</code> y <code>C</code> forman cierres aquí. Por tanto, <code>B</code> puede acceder a <code>A</code> y <code>C</code> puede acceder a <code>B</code>.</li> + <li>Además, dado que <code>C</code> puede acceder a <code>B</code> que puede acceder a <code>A</code>, <code>C</code> también puede acceder a <code>A</code>.</li> +</ul> + +<p>Por tanto, los cierres pueden contener múltiples ámbitos; contienen de forma recursiva el ámbito de las funciones que la contienen. Esto se llama <em>encadenamiento de alcance</em>. (La razón por la que se llama "encadenamiento" se explica más adelante).</p> + +<p>Considera el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">function A(x) { + function B(y) { + function C(z) { + console.log(x + y + z); + } + C(3); + } + B(2); +} +A(1); // registra 6 (1 + 2 + 3) +</pre> + +<p>En este ejemplo, <code>C</code> accede a <code>y</code> de <code>B</code> y a <code>x</code> de <code>A</code>.</p> + +<p>Esto se puede hacer porque:</p> + +<ol> + <li><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>).</li> + <li><code>C</code> forma un cierre que incluye a <code>B</code>.</li> + <li>Debido a que 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 <em>y variables</em> de <code>B</code> <em>y</em> de <code>A</code>. En otras palabras, <code>C</code> <em>encadena</em> los ámbitos de <code>B</code> y <code>A</code>, <em>en ese orden</em>.</li> +</ol> + +<p>Sin embargo, lo contrario 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>, del que <code>C</code> es una variable. Por lo tanto, <code>C</code> permanece privado solo para <code>B</code>.</p> + +<h3 id="Conflictos_de_nombres">Conflictos de nombres</h3> + +<p>Cuando dos argumentos o variables en el ámbito de un cierre tienen el mismo nombre, hay un <em>conflicto de nombres</em>. Tiene más prioridad el ámbito anidado. Entonces, el ámbito más interno tiene la mayor prioridad, mientras que el ámbito más externo tiene la más baja. Esta es la cadena de ámbito. El primero de la cadena es el ámbito más interno y el último es el ámbito más externo. Considera lo siguiente:</p> + +<pre class="brush: js notranslate">function outside() { + var x = 5; + function inside(x) { + return x * 2; + } + return inside; +} + +outside()(10); // devuelve 20 en lugar de 10 +</pre> + +<p>El conflicto de nombre ocurre en la declaración <code>return x</code> y está entre el parámetro <code>x</code> de <code>inside</code> y la variable <code>x</code> de <code>outside</code>. La cadena de ámbito aquí es {<code>inside</code>, <code>outside</code>, objeto global}. Por lo tanto, <code>x</code> de <code>inside</code> tiene precedencia sobre <code>x</code> de <code>outside</code> y <code>20</code> (<code>x</code>) de <code>inside</code> se devuelve en lugar de <code>10</code> (<code>x</code> de <code>outside</code>).</p> + +<h2 id="Cierres">Cierres</h2> + +<p>Los cierres son una de las características más poderosas de JavaScript. JavaScript permite el anidamiento de funciones y otorga a la función interna acceso completo a todas las variables y funciones definidas dentro de la función externa (y todas las demás variables y funciones a las que la función externa tiene acceso).</p> + +<p>Sin embargo, la función externa <em>no</em> tiene acceso a las variables y funciones definidas dentro de la función interna. Esto proporciona una especie de encapsulación para las variables de la función interna.</p> + +<p>Además, dado que la función interna tiene acceso a el ámbito de la función externa, las variables y funciones definidas en la función externa vivirán más que la duración de la ejecución de la función externa, si la función interna logra sobrevivir más allá de la vida de la función externa. Se crea un cierre cuando la función interna de alguna manera se pone a disposición de cualquier ámbito fuera de la función externa.</p> + +<pre class="brush: js notranslate">var pet = function(name) { // La función externa define una variable llamada "name" + var getName = function() { + return name; // La función interna tiene acceso a la variable + // "name" de la función externa + } + return getName; // Devuelve la función interna, exponiéndola así a ámbitos externos +} +myPet = pet('Vivie'); + +myPet(); // Devuelve "Vivie" +</pre> + +<p>Puede ser mucho más complejo que el código anterior. Se puede devolver un objeto que contiene métodos para manipular las variables internas de la función externa.</p> + +<pre class="brush: js notranslate">var createPet = function(name) { + var sex; + + return { + setName: function(newName) { + name = newName; + }, + + getName: function() { + return name; + }, + + getSex: function() { + return sex; + }, + + setSex: function(newSex) { + if(typeof newSex === 'string' && (newSex.toLowerCase() === 'male' || + newSex.toLowerCase() === 'female')) { + sex = newSex; + } + } + } +} + +var pet = createPet('Vivie'); +pet.getName(); // Vivie + +pet.setName('Oliver'); +pet.setSex('male'); +pet.getSex(); // male +pet.getName(); // Oliver +</pre> + +<p>En el código anterior, la variable <code>name</code> de la función externa es accesible para las funciones internas, y no hay otra forma de acceder a las variables internas excepto a través de las funciones internas. Las variables internas de las funciones internas actúan como almacenes seguros para los argumentos y variables externos. Contienen datos "persistentes" y "encapsulados" para que trabajen las funciones internas. Las funciones ni siquiera tienen que estar asignadas a una variable o tener un nombre.</p> + +<pre class="brush: js notranslate">var getCode = (function() { + var apiCode = '0]Eal(eh&2'; // Un código que no queremos que los externos puedan modificar... + + return function() { + return apiCode; + }; +})(); + +getCode(); // Devuelve el apiCode +</pre> + +<div class="blockIndicator note"> +<p><strong>Precaución</strong> ¡Hay una serie de trampas a tener en cuenta al usar cierres!</p> + +<p>Si una función encerrada define una variable con el mismo nombre que una variable en el ámbito externo, entonces no hay forma de hacer referencia a la variable en el ámbito externo nuevamente. (La variable de ámbito interno "anula" la externa, hasta que el programa sale de el ámbito interno).</p> + +<pre class="example-bad brush: js notranslate">var createPet = function(name) { // La función externa define una variable llamada "name". + return { + setName: function(name) { // La función envolvente también define una variable llamada "name". + name = name; // ¿Cómo accedemos al "name" definido por la función externa? + } + } +} +</pre> +</div> + +<h2 id="Usar_el_objeto_arguments">Usar el objeto <code>arguments</code></h2> + +<p>El <code>arguments</code> de una función se mantiene en un objeto similar a un arreglo. Dentro de una función, puedes abordar los argumentos que se le pasan de la siguiente manera:</p> + +<pre class="brush: js notranslate">arguments[i] +</pre> + +<p>donde <code>i</code> es el número ordinal del argumento, comenzando en <code>0</code>. Entonces, el primer argumento que se pasa a una función sería <code>arguments[0]</code>. El número total de argumentos se indica mediante <code>arguments.length</code>.</p> + +<p>Usando el objeto <code>arguments</code>, puedes llamar a una función con más argumentos de los que formalmente declara aceptar. Esto suele ser útil si no sabes de antemano cuántos argumentos se pasarán a la función. Puedes usar <code>arguments.length</code> para determinar el número de argumentos que realmente se pasan a la función, y luego acceder a cada argumento usando el objeto <code>arguments</code>.</p> + +<p>Por ejemplo, considera una función que concatena varias cadenas. El único argumento formal para la función es una cadena que especifica los caracteres que separan los elementos a concatenar. La función se define de la siguiente manera:</p> + +<pre class="brush: js notranslate">function myConcat(separator) { + var result = ''; // inicia list + var i; + // itera a través de arguments + for (i = 1; i < arguments.length; i++) { + result += arguments[i] + separator; + } + return result; +} +</pre> + +<p>Puedes pasar cualquier número de argumentos a esta función, y concatena cada argumento en una "lista" de cadenas:</p> + +<pre class="brush: js notranslate">// devuelve "red, orange, blue, " +myConcat(', ', 'red', 'orange', 'blue'); + +// devuelve "elephant; giraffe; lion; cheetah" +myConcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); + +// devuelve "sage. basil. oregano. pepper. perejil. " +myConcat('. ', 'salvia', 'albahaca', 'orégano', 'pimienta', 'perejil'); +</pre> + +<div class="note"> +<p><strong>Nota</strong>: La variable <code>arguments</code> es "similar a un arreglo", pero no es un arreglo. Es similar a un arreglo en el sentido de que tiene un índice numerado y una propiedad <code>length</code>. Sin embargo, <em>no</em> posee todos los métodos de manipulación de arreglos.</p> +</div> + +<p>Consulta el objeto {{JSxRef("Function")}} en la referencia de JavaScript para obtener más información.</p> + +<h2 id="Parámetros_de_función">Parámetros de función</h2> + +<p>A partir de ECMAScript 2015, hay dos nuevos tipos de parámetros: <em>parámetros predeterminados</em> y <em>parámetros resto</em>.</p> + +<h3 id="Parámetros_predeterminados">Parámetros predeterminados</h3> + +<p>En JavaScript, los parámetros de las funciones están predeterminados en <code>undefined</code>. Sin embargo, en algunas situaciones puede resultar útil establecer un valor predeterminado diferente. Esto es exactamente lo que hacen los parámetros predeterminados.</p> + +<h4 id="Sin_parámetros_predeterminados_preECMAScript_2015">Sin parámetros predeterminados (preECMAScript 2015)</h4> + +<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>b</code>, su valor sería <code>undefined</code> al evaluar <code>a * b</code>, y una llamada a <code>multiply</code> normalmente habría devuelto <code>NaN</code>. Sin embargo, esto se evita con la segunda línea de este ejemplo:</p> + +<pre class="brush: js notranslate">function multiply(a, b) { + b = typeof b !== 'undefined' ? b : 1; + + return a * b; +} + +multiply(5); // 5 +</pre> + +<h4 id="Con_parámetros_predeterminados_posECMAScript_2015">Con parámetros predeterminados (posECMAScript 2015)</h4> + +<p>Con <em>parámetros predeterminados</em>, ya no es necesaria una verificación manual en el cuerpo de la función. Simplemente puedes poner <code>1</code> como valor predeterminado para <code>b</code> en el encabezado de la función:</p> + +<pre class="brush: js notranslate">function multiply(a, b = 1) { + return a * b; +} + +multiply(5); // 5</pre> + +<p>Para obtener más detalles, consulta {{JSxRef("Funciones/Parametros_predeterminados", "parámetros predeterminados")}} en la referencia.</p> + +<h3 id="Parámetros_rest">Parámetros <code>rest</code></h3> + +<p>La sintaxis del {{JSxRef("Funciones/Parametros_rest", "parámetro rest")}} nos permite representar un número indefinido de argumentos como un arreglo.</p> + +<p>En el siguiente ejemplo, la función <code>multiply</code> usa <em>parámetros <code>rest</code></em> para recopilar argumentos desde el segundo hasta el final. Luego, la función los multiplica por el primer argumento.</p> + +<pre class="brush: js notranslate">function multiply(multiplier, ...theArgs) { + return theArgs.map(x => multiplier * x); +} + +var arr = multiply(2, 1, 2, 3); +console.log(arr); // [2, 4, 6]</pre> + +<h2 id="Funciones_Flecha">Funciones Flecha</h2> + +<p>Una {{JSxRef("Funciones/Funciones_flecha", "expresión de función flecha")}} (anteriormente, y ahora conocida incorrectamente como <strong>función de flecha gruesa</strong>) tiene una sintaxis más corta en comparación con las expresiones de función y no tiene su propio {{JSxRef("Operadores/this", "this")}}, {{JSxRef("Funciones/arguments", "arguments")}}, {{JSxRef("Operadores/super", "super")}} o {{JSxRef("../Operadores/new.target", "new.target")}}. Las funciones flecha siempre son anónimas. Consulta también esta publicación del blog hacks.mozilla.org: "<a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">ES6 en profundidad: funciones flecha</a>".</p> + +<p>Dos factores influyeron en la introducción de las funciones flecha: <em>funciones más cortas</em> y <em>no vinculantes</em> de <code>this</code>.</p> + +<h3 id="Funciones_más_cortas">Funciones más cortas</h3> + +<p>En algunos patrones funcionales, las funciones más cortas son bienvenidas. Compara:</p> + +<pre class="brush: js notranslate">var a = [ + 'Hidrógeno', + 'Helio', + 'Litio', + 'Berilio' +]; + +var a2 = a.map(function(s) { return s.length; }); + +console.log(a2); // logs [8, 6, 7, 9] + +var a3 = a.map(s => s.length); + +console.log(a3); // logs [8, 6, 7, 9] +</pre> + +<h3 id="Sin_this_separado">Sin <code>this</code> separado</h3> + +<p>Hasta las funciones flecha, cada nueva función definía su propio valor {{JSxRef("Operadores/this", "this")}} (un nuevo objeto en el caso de un constructor, indefinido en llamadas a funciones en {{JSxRef("Strict_mode", "modo estricto")}}, el objeto base si la función se llama como un "método de objeto", etc.). Esto resultó ser poco menos que ideal con un estilo de programación orientado a objetos.</p> + +<pre class="brush: js notranslate">function Person() { + // El constructor Person() define `this` como él mismo. + this.age = 0; + + setInterval(function growUp() { + // En modo no estricto, la función growUp() define `this` + // como el objeto global, que es diferente del `this` + // definido por el constructor Person(). + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>En ECMAScript 3/5, este problema se solucionó asignando el valor en <code>this</code> a una variable que se podría cerrar.</p> + +<pre class="brush: js notranslate">function Person() { + var self = this; // Algunos eligen `that` en lugar de` self`. + // Elige uno y se congruente. + self.age = 0; + + setInterval(function growUp() { + // La retrollamada se refiere a la variable `self` de la cual + // el valor es el objeto esperado. + self.age++; + }, 1000); +}</pre> + +<p>Alternativamente, podrías crear una {{JSxRef("Objetos_globales/Function/bind", "función vinculada")}} para que el valor <code>this</code> adecuado se pasara a la función <code>growUp()</code>.</p> + +<p>Una función flecha no tiene su propio <code>this</code> se utiliza el valor de <code>this</code> del contexto de ejecución adjunto. Por lo tanto, en el siguiente código, <code>this</code> dentro de la función que se pasa a <code>setInterval</code> tiene el mismo valor que <code>this</code> en la función adjunta:</p> + +<pre class="brush: js notranslate">function Person() { + this.age = 0; + + setInterval(() => { + this.age++; // |this| propiamente se refiere al objeto person + }, 1000); +} + +var p = new Person();</pre> + +<h2 id="Funciones_predefinidas">Funciones predefinidas</h2> + +<p>JavaScript tiene integradas varias funciones de nivel superior:</p> + +<dl> + <dt>{{JSxRef("Objetos_globales/eval", "eval()")}}</dt> + <dd> + <p>El método <code><strong>eval()</strong></code> evalúa el código JavaScript representado como una cadena.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/uneval", "uneval()")}}</dt> + <dd> + <p>El método <code><strong>uneval()</strong></code> crea una representación de cadena del código fuente de un {{JSxRef("Object")}}.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/isFinite", "isFinite()")}}</dt> + <dd> + <p>La función global <code><strong>isFinite()</strong></code> determina si el valor pasado es un número finito. Si es necesario, el parámetro, primero se convierte en un número.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/isNaN", "isNaN()")}}</dt> + <dd> + <p>La función <code><strong>isNaN()</strong></code> determina si un valor es {{JSxRef("Objetos_globales/NaN", "NaN")}} o no. <strong>Nota</strong>: La coerción dentro de la función <code>isNaN</code> tiene {{JSxRef("Objetos_globales/isNaN", "interesantes", "#Descripcion")}} reglas; también puedes querer usar {{JSxRef("Number.isNaN()")}}, como se define en ECMAScript 2015, o puedes usar {{JSxRef("Operadores/typeof", "typeof")}} para determinar si el valor no es un número (<code>NaN</code>).</p> + </dd> + <dt>{{JSxRef("Objetos_globales/parseFloat", "parseFloat()")}}</dt> + <dd> + <p>La función <code><strong>parseFloat()</strong></code> procesa un argumento de cadena y devuelve un número de punto flotante.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/parseInt", "parseInt()")}}</dt> + <dd> + <p>La función <code><strong>parseInt()</strong></code> procesa un argumento de cadena y devuelve un número entero de la base especificada (la base en los sistemas numéricos matemáticos).</p> + </dd> + <dt>{{JSxRef("Objetos_globales/decodeURI", "decodeURI()")}}</dt> + <dd> + <p>La función <code><strong>decodeURI()</strong></code> decodifica un identificador uniforme de recursos (URI) creado previamente por {{JSxRef("Objetos_globales/encodeURI", "encodeURI")}} o por una rutina similar.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/decodeURIComponent", "decodeURIComponent()")}}</dt> + <dd> + <p>El método <code><strong>decodeURIComponent()</strong></code> decodifica un componente Identificador uniforme de recursos (URI) creado previamente por {{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent")}} o por un rutina similar.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/encodeURI", "encodeURI()")}}</dt> + <dd> + <p>El método <code><strong>encodeURI()</strong></code> codifica un identificador uniforme de recursos (URI) reemplazando cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del caracter (solo habrá cuatro secuencias de escape para caracteres compuestos por dos caracteres "sustitutos").</p> + </dd> + <dt>{{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent()")}}</dt> + <dd> + <p>El método <code><strong>encodeURIComponent()</strong></code> codifica un componente Identificador uniforme de recursos (URI) reemplazando cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del caracter (solo habrá cuatro secuencias de escape para caracteres compuestos por dos caracteres "sustitutos").</p> + </dd> + <dt>{{JSxRef("Objetos_globales/escape", "escape()")}}</dt> + <dd> + <p>El método obsoleto <code><strong>escape()</strong></code> calcula una nueva cadena en la que ciertos caracteres han sido reemplazados por una secuencia de escape hexadecimal. En su lugar usa {{JSxRef("Objetos_globales/encodeURI", "encodeURI")}} o {{JSxRef("Objetos_globales/encodeURIComponent", "encodeURIComponent")}}.</p> + </dd> + <dt>{{JSxRef("Objetos_globales/unescape", "unescape()")}}</dt> + <dd> + <p>El método obsoleto <code><strong>unescape()</strong></code> calcula una nueva cadena en la que las secuencias de escape hexadecimales se reemplazan con el caracter que representan. Las secuencias de escape se pueden introducir por medio de una función como {{JSxRef("Objetos_globales/escape", "escape")}}. Debido a que <code>unescape()</code> está en desuso, usa {{JSxRef("Objetos_globales/decodeURI", "decodeURI()")}} o {{JSxRef("Objetos_globales/decodeURIComponent", "decodeURIComponent")}} en su lugar.</p> + </dd> +</dl> + +<p>{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}</p> diff --git a/files/es/web/javascript/guide/grammar_and_types/index.html b/files/es/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..894096ba1e --- /dev/null +++ b/files/es/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,762 @@ +--- +title: Gramática y Tipos +slug: Web/JavaScript/Guide/Grammar_and_types +tags: + - Guia(2) + - Guía + - JavaScript + - Variables + - literales +translation_of: Web/JavaScript/Guide/Grammar_and_types +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> + +<p class="summary">Este capítulo analiza la gramática básica de JavaScript, la declaración de variables, los tipos de datos y literales.</p> + +<h2 id="Conceptos_básicos">Conceptos básicos</h2> + +<p>JavaScript está influenciado sobre todo por la sintaxis de Java, C y C++, pero también ha sido influenciado por Awk, Perl y Python.</p> + +<p>JavaScript distingue entre mayúsculas y minúsculas (es <strong>case-sensitive</strong>) y utiliza el conjunto de caracteres <strong>Unicode</strong>. Por ejemplo, la palabra «Früh» (que significa "temprano" en Alemán) se podría usar como el nombre de una variable.</p> + +<pre class="brush: js notranslate">let Früh = "foobar"</pre> + +<p>Pero, la variable <code>früh</code> no es la misma que <code>Früh</code> porque JavaScript distingue entre mayúsculas y minúsculas.</p> + +<p>En JavaScript, las instrucciones se denominan {{Glossary("Statement", "declaraciones")}} y están separadas por punto y coma (;).</p> + +<p>No es necesario un punto y coma después de una declaración si está escrita en su propia línea. Pero si se deseas más de una declaración en una línea, entonces <em>debes</em> separarlas con punto y coma.</p> + +<div class="blockIndicator note"> +<p>ECMAScript también tiene reglas para la inserción automática del punto y coma —{{JSxRef("Gramatica_lexica", "IAPC", "#Insercion_automatica_de_punto_y_coma")}}— (<em>ASI</em> en inglés, por sus siglas «<em>Automatic Semicolon Insertion</em>») al final de las declaraciones. (Para obtener más información, consulta la referencia detallada sobre la {{JSxRef("Gramatica_lexica", "gramática léxica")}} de JavaScript).</p> +</div> + +<p>Sin embargo, se considera una buena práctica escribir siempre un punto y coma después de una declaración, incluso cuando no sea estrictamente necesario. Esta práctica reduce las posibilidades de que se introduzcan errores en el código.</p> + +<p>El texto fuente del script JavaScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son <em>fragmentos</em>, <em>caracteres de control</em>, <em>terminadores de línea</em>, <em>comentarios</em> o {{Glossary("Espacio en blanco", "espacios en blanco")}}. (Los espacios, tabulaciones y caracteres de nueva línea se consideran espacios en blanco).</p> + +<h2 id="Comentarios">Comentarios</h2> + +<p>La sintaxis de los <strong>comentarios</strong> es la misma que en C++ y en muchos otros lenguajes:</p> + +<pre class="brush: js notranslate">// un comentario de una línea + +/* este es un comentario + * más largo, de varias líneas + */ + +/* Sin embargo, no puedes /* anidar comentarios */ SyntaxError */ +</pre> + +<p>Los comentarios se comportan como espacios en blanco y se descartan durante la ejecución del script.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: También puedes ver un tercer tipo de sintaxis de comentario al comienzo de algunos archivos JavaScript, que se parece a esto: <code>#!/usr/bin/env node</code>.</p> + +<p>Esto se denomina sintaxis de <strong>comentario hashbang</strong> y es un comentario especial que se utiliza para especificar la ruta a un motor JavaScript en particular que debe ejecutar el script. Consulta {{JSxRef("Gramatica_lexica", "Comentarios Hashbang", "#Comentarios_hashbang")}} para obtener más detalles.</p> +</div> + +<h2 id="Declaraciones">Declaraciones</h2> + +<p>JavaScript tiene tres tipos de declaraciones de variables.</p> + +<dl> + <dt>{{JSxRef("Sentencias/var", "var")}}</dt> + <dd>Declara una variable, opcionalmente la inicia a un valor.</dd> + <dt>{{JSxRef("Sentencias/let", "let")}}</dt> + <dd>Declara una variable local con ámbito de bloque, opcionalmente la inicia a un valor.</dd> + <dt>{{JSxRef("Sentencias/const", "const")}}</dt> + <dd>Declara un nombre de constante de solo lectura y ámbito de bloque.</dd> +</dl> + +<h3 id="Variables">Variables</h3> + +<p>Utiliza variables como nombres simbólicos para valores en tu aplicación. Los nombres de las variables, llamados {{Glossary("Identifier", "identificadores")}}, se ajustan a ciertas reglas.</p> + +<p>Un identificador de JavaScript debe comenzar con una letra, un guión bajo (<code>_</code>) o un signo de dólar (<code>$</code>). Los siguientes caracteres también pueden ser dígitos (<code>0</code>-<code>9</code>).</p> + +<p>Dado que JavaScript distingue entre mayúsculas y minúsculas, las letras incluyen los caracteres "<code>A</code>" a "<code>Z</code>" (mayúsculas), así como "<code>a</code>" a "z" (minúsculas).</p> + +<p>Puedes utilizar la mayoría de las letras ISO 8859-1 o Unicode como <code>å</code> y <code>ü</code> en los identificadores. (Para obtener más detalles, consulta <a href="https://mathiasbynens.be/notes/javascript-identifiers-es6">esta publicación del blog</a>). También puedes usar {{JSxRef("Gramatica_lexica", "Secuencias de escape Unicode", "#Cadenas_literales")}} como caracteres en identificadores.</p> + +<p>Algunos ejemplos de nombres legales son <code>Number_hits</code>, <code>temp99</code>, <code>$credit</code> y <code>_name</code>.</p> + +<h3 id="Declaración_de_variables">Declaración de variables</h3> + +<p>Puedes declarar una variable de dos formas:</p> + +<ul> + <li>Con la palabra clave {{JSxRef("Sentencias/var", "var")}}. Por ejemplo, <code>var x = 42</code>. Esta sintaxis se puede utilizar para declarar variables <strong>locales</strong> y <strong>globales</strong>, dependiendo del <em>contexto de ejecución</em>.</li> + <li>Con la palabra clave {{JSxRef("Sentencias/const", "const")}} o {{JSxRef("Sentencias/let", "let")}}. Por ejemplo, <code>let y = 13</code>. Esta sintaxis se puede utilizar para declarar una variable local con ámbito de bloque. (Ve el {{anch("Ambito_de_variables", "Ámbito de variables")}} abajo.)</li> +</ul> + +<p>También puedes simplemente asignar un valor a una variable. Por ejemplo, <code>x = 42</code>. Este formulario crea una variable {{JSxRef("Sentencias/var", "global no declarada", "#Descripción")}}. También genera una advertencia estricta de JavaScript. Las variables globales no declaradas a menudo pueden provocar un comportamiento inesperado. Por lo tanto, se desaconseja utilizar variables globales no declaradas.</p> + +<h3 id="Evaluar_variables">Evaluar variables</h3> + +<p>Una variable declarada usando la instrucción <code>var</code> o <code>let</code> sin un valor asignado especificado tiene el valor de {{JSxRef("undefined")}}.</p> + +<p>Un intento de acceder a una variable no declarada da como resultado el disparo de una excepción {{JSxRef("ReferenceError")}}:</p> + +<pre class="brush: js notranslate">var a; +console.log('El valor de a es ' + a); // El valor de a es undefined + +console.log('El valor de b es ' + b); // El valor de b es undefined +var b; +// Esto puede desconcertarte hasta que leas 'Elevación de variable' a continuación + +console.log('El valor de c es ' + c); // Error de referencia no detectado: c no está definida + +let x; +console.log('El valor de x es ' + x); // El valor de x es undefined + +console.log('El valor de y es ' + y); // Error de referencia no detectada: y no está definida +let y;</pre> + +<p>Puedes usar <code>undefined</code> para determinar si una variable tiene un valor. En el siguiente código, a la variable <code>input</code> no se le asigna un valor y la declaración {{JSxRef("Sentencias/if...else", "if")}} evalúa a <code>true</code>.</p> + +<pre class="brush: js notranslate">var input; +if (input === undefined) { + doThis(); +} else { + doThat(); +} +</pre> + +<p>El valor <code>undefined</code> se comporta como <code>false</code> cuando se usa en un contexto booleano. Por ejemplo, el siguiente código ejecuta la función <code>myFunction</code> porque el elemento <code>myArray</code> es <code>undefined</code>:</p> + +<pre class="brush: js notranslate">var myArray = []; +if (!myArray[0]) myFunction(); +</pre> + +<p>El valor <code>undefined</code> se convierte en <code>NaN</code> cuando se usa en contexto numérico.</p> + +<pre class="brush: js notranslate">var a; +a + 2; // Evalúa a NaN</pre> + +<p>Cuando evalúas una variable {{JSxRef("null")}}, el valor nulo se comporta como <code>0</code> en contextos numéricos y como <code>false</code> en contextos booleanos. Por ejemplo:</p> + +<pre class="brush: js notranslate">var n = null; +console.log(n * 32); // Registrará 0 en la consola +</pre> + +<h3 id="Ámbito_de_variables">Ámbito de variables</h3> + +<p>Cuando declaras una variable fuera de cualquier función, se denomina variable <em>global</em>, porque está disponible para cualquier otro código en el documento actual. Cuando declaras una variable dentro de una función, se llama variable <em>local</em>, porque solo está disponible dentro de esa función.</p> + +<p>JavaScript anterior a ECMAScript 2015 no tiene el ámbito de la {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "declaración de bloque", "#Block_statement", "Checar")}}. Más bien, una variable declarada dentro de un bloque es local a la <em>función (o ámbito global)</em> en el que reside el bloque.</p> + +<p>Por ejemplo, el siguiente código registrará <code>5</code>, porque el ámbito de <code>x</code> es el contexto global (o el contexto de la función si el código es parte de una función). El ámbito de <code>x</code> no se limita al bloque de instrucciones <code>if</code> inmediato.</p> + +<pre class="brush: js notranslate">if (true) { + var x = 5; +} +console.log(x); // x es 5 +</pre> + +<p>Este comportamiento cambia cuando se usa la declaración <code>let</code> (introducida en ECMAScript 2015).</p> + +<pre class="brush: js notranslate">if (true) { + let y = 5; +} +console.log(y); // ReferenceError: y no está definida +</pre> + +<h3 id="Elevación_de_variables_hoisting">Elevación de variables (<code>hoisting</code>)</h3> + +<p>Otra cosa inusual acerca de las variables en JavaScript es que puedes hacer referencia a una variable declarada más tarde, sin obtener una excepción.</p> + +<p>Este concepto se conoce como <strong>elevación.</strong> Las variables en JavaScript son, en cierto sentido, "elevadas" (o "izadas") a la parte superior de la función o declaración. Sin embargo, las variables que se elevan devuelven un valor de <code>undefined</code>. Entonces, incluso si la declaras e inicias después de usarla o hacer referencia a esta variable, todavía devuelve <code>undefined</code>.</p> + +<pre class="brush: js notranslate">/** + * Ejemplo 1 + */ +console.log(x === undefined); // true +var x = 3; + +/** + * Ejemplo 2 + */ +// devolverá un valor de undefined +var myvar = 'my value'; + +(function() { + console.log(myVar); // undefined + var myvar = 'valor local'; +})(); +</pre> + +<p>Los ejemplos anteriores se interpretarán de la misma manera que:</p> + +<pre class="brush: js notranslate">/** + * Ejemplo 1 + */ +var x; +console.log(x === undefined); // true +x = 3; + +/** + * Ejemplo 2 + */ +var myvar = 'my value'; + +(function() { + var myVar; + console.log(myVar); // undefined + myvar = 'valor local'; +})(); +</pre> + +<p>Debido a la elevación, todas las declaraciones <code>var</code> en una función se deben colocar lo más cerca posible de la parte superior de la función. Esta buena práctica aumenta la claridad del código.</p> + +<p>En ECMAScript 2015, <code>let</code> y <code>const</code> <strong>se elevan pero no se inician</strong>. Hacer referencia a la variable en el bloque antes de la declaración de la variable da como resultado un {{JSxRef("ReferenceError")}}, porque la variable está en una "zona muerta temporal" desde el inicio del bloque hasta que se procesa la declaración.</p> + +<pre class="brush: js notranslate">console.log(x); // ReferenceError +let x = 3;</pre> + +<h3 id="Elevación_de_función">Elevación de función</h3> + +<p>En el caso de las funciones, solo se incluyen <em>declaraciones</em> de función, pero <em>no</em> las <em>expresiones</em> de la función.</p> + +<pre class="brush: js notranslate">/* Declaración de función */ + +foo(); // "bar" + +function foo() { + console.log('bar'); +} + + +/* Expresión de función */ + +baz(); // TypeError: baz no es una función + +var baz = function() { + console.log('bar2'); +}; +</pre> + +<h3 id="Variables_globales">Variables globales</h3> + +<p>Las variables globales, de hecho, son propiedades del <em>objeto global</em>.</p> + +<p>En las páginas web, el objeto global es {{domxref("window")}}, por lo que puedes establecer y acceder a variables globales utilizando la sintaxis <code>window.<var>variable</var></code>.</p> + +<p>En consecuencia, puedes acceder a las variables globales declaradas en una «ventana» o «marco» desde otra «ventana» o «marco» especificando el nombre de la <code>window</code> o el <code>frame</code>. Por ejemplo, si declaras una variable llamada <code>phoneNumber</code> en un documento, puedes hacer referencia a esta variable desde un <code>iframe</code> como <code>parent.phoneNumber</code>.</p> + +<h3 id="Constantes">Constantes</h3> + +<p>Puedes crear una constante de solo lectura con nombre con la palabra clave {{JSxRef("Sentencias/const", "const")}}.</p> + +<p>La sintaxis de un identificador de constante es la misma que la de cualquier identificador de variable: debe comenzar con una letra, un subrayado o un signo de dólar (<code>$</code>) y puede contener caracteres alfabéticos, numéricos o de subrayado.</p> + +<pre class="brush: js notranslate">const PI = 3.14; +</pre> + +<p>Una constante no puede cambiar el valor a través de la asignación o volver a declararla mientras se ejecuta el script. Se debe iniciar a un valor.</p> + +<p>Las reglas de ámbito para las constantes son las mismas que las de ámbito de bloque de las variables <code>let</code>. Si se omite la palabra clave <code>const</code>, se asume que el identificador representa una variable.</p> + +<p>No puedes declarar una constante con el mismo nombre que una función o una variable en el mismo ámbito. Por ejemplo:</p> + +<pre class="brush: js notranslate">// ESTO CAUSARÁ UN ERROR +function f() {}; +const f = 5; + +// ESTO TAMBIÉN CAUSARÁ UN ERROR +function f() { + const g = 5; + var g; + + // expresiones +} +</pre> + +<p>Sin embargo, las propiedades de los objetos asignados a constantes no son protegidas, es por esto que la siguiente declaración se ejecuta sin problemas.</p> + +<pre class="brush: js notranslate">const MY_OBJECT = {'key': 'value'}; +MY_OBJECT.key = 'otherValue';</pre> + +<p>Además, el contenido de los arreglos tampoco está protegido cuando es asignado a una constante, es por esto que la siguiente declaración se ejecuta sin problemas.</p> + +<pre class="brush: js notranslate">const MY_ARRAY = ['HTML','CSS']; +MY_ARRAY.push('JAVASCRIPT'); +console.log(MY_ARRAY); // registra ['HTML','CSS','JAVASCRIPT']; +</pre> + +<h2 id="Estructuras_y_tipos_de_datos">Estructuras y tipos de datos</h2> + +<h3 id="Tipos_de_datos">Tipos de datos</h3> + +<p>El último estándar ECMAScript define ocho tipos de datos:</p> + +<ul> + <li>Siete tipos de datos que son {{Glossary("Primitive", "primitivos")}}: + <ol> + <li>{{Glossary("Boolean", "Booleano")}}. <code>true</code> y <code>false</code>.</li> + <li>{{Glossary("null")}}. Una palabra clave especial que denota un valor nulo. (Dado que JavaScript distingue entre mayúsculas y minúsculas, <code>null</code> no es lo mismo que <code>Null</code>, <code>NULL</code> o cualquier otra variante).</li> + <li>{{Glossary("undefined")}}. Una propiedad de alto nivel cuyo valor no está definido.</li> + <li>{{Glossary("Number")}}. Un número entero o un número con coma flotante. Por ejemplo: <code>42</code> o <code>3.14159</code>.</li> + <li>{{Glossary("BigInt")}}. Un número entero con precisión arbitraria. Por ejemplo: <code>9007199254740992n</code>.</li> + <li>{{Glossary("String")}}. Una secuencia de caracteres que representan un valor de texto. Por ejemplo: "Hola"</li> + <li>{{Glossary("Symbol")}} (nuevo en ECMAScript 2015). Un tipo de dato cuyas instancias son únicas e inmutables</li> + </ol> + </li> + <li>y {{Glossary("Object")}}</li> +</ul> + +<p>Aunque estos tipos de datos son una cantidad relativamente pequeña, permiten realizar funciones útiles con tus aplicaciones. Los otros elementos fundamentales en el lenguaje son los {{JSxRef("Object", "Objetos", "", 1)}} y las {{JSxRef("Function", "funciones", "", 1)}}. Puedes pensar en objetos como contenedores con nombre para los valores, y las funciones como procedimientos que puedes programar en tu aplicación.</p> + +<h3 id="Conversión_de_tipos_de_datos">Conversión de tipos de datos</h3> + +<p>JavaScript es un lenguaje <em>tipado dinámicamente</em>. Esto significa que no tienes que especificar el tipo de dato de una variable cuando la declaras. También significa que los tipos de datos se convierten automáticamente según sea necesario durante la ejecución del script.</p> + +<p>Así, por ejemplo, puedes definir una variable de la siguiente manera:</p> + +<pre class="brush: js notranslate">var answer = 42; +</pre> + +<p>Y luego, puedes asignarle una cadena a esa misma variable, por ejemplo:</p> + +<pre class="brush: js notranslate">answer = 'Gracias por todo el pescado...'; +</pre> + +<p>Debido a que JavaScript se tipifica dinámicamente, esta asignación no genera un mensaje de error.</p> + +<h3 id="Números_y_el_operador">Números y el operador '+'</h3> + +<p>En expresiones que involucran valores numéricos y de cadena con el operador <code>+</code>, JavaScript convierte los valores numéricos en cadenas. Por ejemplo, considera las siguientes declaraciones:</p> + +<pre class="brush: js notranslate">x = 'La respuesta es ' + 42 // "La respuesta es 42" +y = 42 + ' es la respuesta' // "42 es la respuesta" +</pre> + +<p>Con todos los demás operadores, JavaScript <em>no</em> convierte valores numéricos en cadenas. Por ejemplo:</p> + +<pre class="brush: js notranslate">'37' - 7 // 30 +'37' + 7 // "377" +</pre> + +<h3 id="Convertir_texto_a_números">Convertir texto a números</h3> + +<p>En el caso que un valor representando un número está en memoria como texto, hay métodos para la conversión.</p> + +<ul> + <li id="parseInt()_and_parseFloat()">{{JSxRef("parseInt", "parseInt()")}}</li> + <li>{{JSxRef("parseFloat", "parseFloat()")}}</li> +</ul> + +<p><code>parseInt</code> solo devuelve números enteros, por lo que su uso se reduce para decimales.</p> + +<div class="blockIndicator note"> +<p>Además, una práctica recomendada para <code>parseInt</code> es incluir siempre el parámetro <em>radix</em>. El parámetro <code>radix</code> se utiliza para especificar qué sistema numérico se utilizará.</p> +</div> + +<pre class="brush: js notranslate">parseInt('101', 2) // 5</pre> + +<p>Un método alternativo para recuperar un número de una cadena es con el operador <code>+</code> (más unario):</p> + +<pre class="brush: js notranslate">'1.1' + '1.1' // '1.11.1' +(+'1.1') + (+'1.1') // 2.2 +// Nota: los paréntesis se agregan para mayor claridad, no son necesarios.</pre> + +<h2 id="Literales">Literales</h2> + +<p>Los <em>literales</em> representan valores en JavaScript. Estos son valores fijos, no variables, que <em>literalmente</em> proporcionas en tu script. Esta sección describe los siguientes tipos de literales:</p> + +<ul> + <li>{{anch("Arreglos_literales", "Arreglos literales")}}</li> + <li>{{anch("Booleanos_literales", "Booleanos literales")}}</li> + <li>{{anch("Literales_de_coma_flotante", "Literales de coma flotante")}}</li> + <li>{{anch("Literales_numericos", "Literales numéricos")}}</li> + <li>{{anch("Objetos_literales", "Objetos literales")}}</li> + <li>{{anch("RegExp_literales", "RegExp literales")}}</li> + <li>{{anch("Cadenas_literales", "Cadenas literales")}}</li> +</ul> + +<h3 id="Arreglos_literales">Arreglos literales</h3> + +<p>Un arreglo literal es una lista de cero o más expresiones, cada una de las cuales representa un elemento del arreglo, encerrada entre corchetes (<code>[]</code>). Cuando creas un arreglo utilizando un arreglo literal, se inicia con los valores especificados como sus elementos, y su <code>length</code> se establece en el número de argumentos especificado.</p> + +<p>El siguiente ejemplo crea el arreglo <code>coffees</code> con tres elementos y <code>length</code> de tres:</p> + +<pre class="brush: js notranslate">let coffees = ['French Roast', 'Colombian', 'Kona']; +</pre> + +<div class="note"> +<p><strong>Nota</strong>: Un arreglo literal es un tipo de <em>iniciador de objeto</em>. Consulta {{JSxRef("../Guide/Trabajando_con_objectos", "Uso de iniciadores de objetos", "#Uso_de_iniciadores_de_objeto")}}.</p> +</div> + +<p>Si creas un arreglo utilizando un literal en un script de nivel superior, JavaScript interpreta el arreglo cada vez que evalúa la expresión que contiene el arreglo literal. Además, cada vez que llamas a una función se crea un literal usado en ella.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Los arreglos literales también son objetos <code>Array</code>. Consulta {{JSxRef("Array")}} y {{JSxRef("../Guide/colecciones_indexadas", "Colecciones indexadas")}} para obtener detalles sobre los objetos <code>Array</code>.</p> +</div> + +<h4 id="Comas_adicionales_en_arreglos_literales">Comas adicionales en arreglos literales</h4> + +<p>No tienes que especificar todos los elementos en un arreglo literal. Si colocas dos comas en una fila, el arreglo completa el valor <code>undefined</code> para los elementos no especificados. El siguiente ejemplo crea el arreglo <code>fish</code>:</p> + +<pre class="brush: js notranslate">let fish = ['Lion', , 'Angel']; +</pre> + +<p>Este arreglo tiene dos elementos con valores y un elemento vacío:</p> + +<ul> + <li><code>fish[0]</code> es "Lion"</li> + <li><code>fish[1]</code> es <code>undefined</code></li> + <li><code>fish[2]</code> es "Angel"</li> +</ul> + +<p>Si incluyes una coma al final de la lista de los elementos, la coma es ignorada.</p> + +<p>En el siguiente ejemplo, el <code>length</code> del arreglo es tres. No hay <code>myList[3]</code>. Todas las demás comas de la lista indican un nuevo elemento.</p> + +<div class="note"> +<p><strong>Nota</strong>: Las comas finales pueden crear errores en versiones anteriores del navegador y se recomienda eliminarlas.</p> +</div> + +<pre class="brush: js notranslate">let myList = ['home', , 'school', ]; +</pre> + +<p>En el siguiente ejemplo, el <code>length</code> del arreglo es cuatro, y faltan <code>myList[0]</code> y <code>myList[2]</code>.</p> + +<pre class="brush: js notranslate">let myList = [ ,'home', , 'school']; +</pre> + +<p>En el siguiente ejemplo, el <code>length</code> del arreglo es cuatro, y faltan <code>myList[1]</code> y <code>myList[3]</code>. <strong>Solo se ignora la última coma.</strong></p> + +<pre class="brush: js notranslate">let myList = ['home', , 'school', , ]; +</pre> + +<p>Entender el comportamiento de las comas adicionales es importante para comprender JavaScript como lenguaje.</p> + +<p>Sin embargo, al escribir tu propio código, debes declarar explícitamente los elementos que faltan como <code>undefined</code>. Hacerlo así aumenta la claridad y la facilidad de mantenimiento de tu código.</p> + +<h3 id="Booleanos_literales">Booleanos literales</h3> + +<p>El tipo booleano tiene dos valores literales: <code>true</code> y <code>false</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Ten cuidado</strong>: No confundas los valores booleanos primitivos <code>true</code> y <code>false</code> con los valores <code>true</code> y <code>false</code> del objeto {{JSxRef("Boolean")}}.</p> + +<p>El objeto <code>Boolean</code> es un contenedor alrededor del tipo de dato primitivo <code>Boolean</code>. Consulta {{JSxRef("Boolean")}} para obtener más información.</p> +</div> + +<h3 id="Literales_numéricos">Literales numéricos</h3> + +<p>Los tipos {{JSxRef("Number")}} y {{JSxRef("BigInt")}} se pueden escribir en decimal (base 10), hexadecimal (base 16), octal (base 8) y binario (base 2).</p> + +<ul> + <li>Un literal numérico <em>decimal</em> es una secuencia de dígitos sin un <code>0</code> (cero) inicial.</li> + <li>Un <code>0</code> (cero) inicial en un literal numérico, o un <code>0o</code> inicial (o <code>0O</code>) indica que está en <em>octal</em>. Los números octales pueden incluir solo los dígitos <code>0</code>-<code>7</code>.</li> + <li>Un <code>0x</code> inicial (o <code>0X</code>) indica un tipo numérico <em>hexadecimal</em>. Los números hexadecimales pueden incluir los dígitos (<code>0</code>-<code>9</code>) y las letras <code>a</code>-<code>f</code> y <code>A</code>-<code>F</code>. (Si un caracter está en mayúscula o minúscula no cambia su valor. Por lo tanto: <code>0xa</code> = <code>0xA</code> = <code>10</code> y <code>0xf</code> = <code>0xF</code> = <code>15</code>).</li> + <li> + <p>Un <code>0b</code> inicial (o <code>0B</code>) indica un literal numérico <em>binario</em>. Los números binarios solo pueden incluir los dígitos <code>0</code> y <code>1</code>.</p> + </li> +</ul> + +<p>Aquí tienes algunos ejemplos de literales numéricos:</p> + +<pre class="eval notranslate">0, 117, -345, 123456789123456789n (decimal, base 10) +015, 0001, -0o77, 0o777777777777n (octal, base 8) +0x1123, 0x00111, -0xF1A7, 0x123456789ABCDEFn (hexadecimal, "hex" o base 16) +0b11, 0b0011, -0b11, 0b11101001010101010101n (binario, base 2) +</pre> + +<p>Para obtener más información, consulta {{JSxRef("Gramatica_lexica", "Literales numéricos en la referencia gramatical léxica", "#Literales_numericos")}}.</p> + +<h3 id="Literales_de_coma_flotante">Literales de coma flotante</h3> + +<p>Un literal de coma flotante puede tener las siguientes partes:</p> + +<ul> + <li>Un entero decimal que puede tener un signo (precedido por "<code>+</code>" o "<code>-</code>"),</li> + <li>Un punto decimal ("<code>.</code>"),</li> + <li>Una fracción (otro número decimal),</li> + <li>Un exponente.</li> +</ul> + +<p>La parte del exponente es una "<code>e</code>" o "<code>E</code>" seguida de un número entero, que puede tener signo (precedido por "<code>+</code>" o "<code>-</code>"). Un literal de coma flotante debe tener al menos un dígito y un punto decimal o "<code>e</code>" (o "<code>E</code>").</p> + +<p>Específicamente, la sintaxis es:</p> + +<pre class="eval notranslate">[(+|-)][dígitos].[dígitos][(E|e)[(+|-)]dígitos] +</pre> + +<p>Por ejemplo:</p> + +<pre class="eval notranslate">3.1415926 +-.123456789 +-3.1E+12 +.1e-23 +</pre> + +<h3 id="Objetos_literales">Objetos literales</h3> + +<p>Un objeto literal es una lista de cero o más pares de nombres de propiedad y valores asociados de un objeto, entre llaves (<code>{}</code>).</p> + +<div class="blockIndicator warning"> +<p><strong>¡No uses un objeto literal al comienzo de una declaración! </strong>Esto dará lugar a un error (o no se comportará como esperabas), porque la <code>{</code> se interpretará como el comienzo de un bloque.</p> +</div> + +<p>El siguiente es un ejemplo de un objeto literal. El primer elemento del objeto <code>car</code> define una propiedad, <code>myCar</code>, y le asigna una nueva cadena, "<code>Saturn</code>"; al segundo elemento, la propiedad <code>getCar</code>, se le asigna inmediatamente el resultado de invocar a la función <code>(carTypes("Honda"));</code> el tercer elemento, la propiedad <code>special</code>, utiliza una variable (<code>sales</code>) existente.</p> + +<pre class="brush: js notranslate">var sales = 'Toyota'; + +function carTypes(name) { + if (name === 'Honda') { + return name; + } else { + return "Lo sentimos, no vendemos " + name + "."; + } +} + +var car = { myCar: 'Saturn', getCar: carTypes('Honda'), special: sales }; + +console.log(car.myCar); // Saturn +console.log(car.getCar); // Honda +console.log(car.special); // Toyota +</pre> + +<p>Además, puedes utilizar un literal numérico o de cadena para el nombre de una propiedad o anidar un objeto dentro de otro. El siguiente ejemplo usa estas opciones.</p> + +<pre class="brush: js notranslate">var car = { manyCars: {a: 'Saab', b: 'Jeep'}, 7: 'Mazda' }; + +console.log(car.manyCars.b); // Jeep +console.log(car[7]); // Mazda +</pre> + +<p>Los nombres de propiedad de los objetos pueden ser cualquier cadena, incluida la cadena vacía. Si el nombre de la propiedad no fuera un {{Glossary("Identifier", "identificador")}} o un número JavaScript válido, debe ir entre comillas.</p> + +<p>No se puede acceder a los nombres de propiedad que no sean identificadores válidos como un punto (<code>.</code>), propiedad, pero <em>se pueden</em> acceder y configurar con la notación tipo arreglo ("<code>[]</code>").</p> + +<pre class="brush: js notranslate">var unusualPropertyNames = { + '': 'Una cadena vacía', + '!': '¡Bang!' +} +console.log(inusualPropertyNames.''); // SyntaxError: Cadena inesperada +console.log(inusualPropertyNames['']); // Una cadena vacía +console.log(unusualPropertyNames.!); // SyntaxError: símbolo inesperado ! +console.log(unusualPropertyNames['!']); // ¡Bang!</pre> + +<h4 id="Objetos_literales_mejorados">Objetos literales mejorados</h4> + +<p>En ES2015, los objeto literales se amplían para admitir la configuración del prototipo en la construcción, la abreviatura para asignaciones <code>foo: foo</code>, la definición de métodos, la realización de llamadas a <code>super</code> y el cálculo de nombres de propiedades con expresiones.</p> + +<p>Juntos, estos también acercan los objetos literales y las declaraciones de clase, y permiten que el diseño basado en objetos se beneficie de algunas de las mismas conveniencias.</p> + +<pre class="brush: js notranslate">var obj = { + // __proto__ + __proto__: theProtoObj, + // Abreviatura de "handler: handler" + handler, + // Métodos + toString() { + // Llamadas a super + return 'd ' + super.toString(); + }, + // Nombres de propiedad calculados (dinámicos) + [ 'prop_' + (() => 42)() ]: 42 +}; +</pre> + +<h3 id="Expresiones_regulares_«RegExp»_literales">Expresiones regulares («RegExp») literales</h3> + +<p>Un expresión regular literal (que se define en detalle {{JSxRef("../Guide/Regular_Expressions", "más adelante")}}) es un patrón incluido entre barras. El siguiente es un ejemplo de una expresión regular literal.</p> + +<pre class="brush: js notranslate">var re = /ab+c/;</pre> + +<h3 id="Cadenas_literales">Cadenas literales</h3> + +<p>Una cadena literal consta de cero o más caracteres encerrados entre comillas dobles (<code>"</code>) o simples (<code>'</code>). Una cadena debe estar delimitada por comillas del mismo tipo (es decir, ambas comillas simples o, ambas comillas dobles).</p> + +<p>Los siguientes son ejemplos de cadenas literales:</p> + +<pre class="brush: js notranslate">'foo' +"bar" +'1234' +"una linea \n otra linea" +"John's cat" +</pre> + +<p>Puedes llamar a cualquiera de los métodos del objeto {{JSxRef("String")}} en un valor de cadena literal. JavaScript automáticamente convierte la cadena literal en un objeto <code>String</code> temporal, llama al método y luego descarta el objeto <code>String</code> temporal. También puedes usar la propiedad <code>String.length</code> con una cadena literal:</p> + +<pre class="brush: js notranslate">// Imprimirá el número de símbolos en la cadena, incluidos los espacios en blanco. +console.log("John's cat".length) // En este caso, 10. +</pre> + +<p>En ES2015, también están disponibles las <em>plantillas literales</em>. Las plantillas literales están encerradas por la comilla invertida (<code>`</code>) ({{Interwiki("wikipedia", "Acento_grave")}}) en lugar de comillas simples o dobles.</p> + +<p>Las cadenas de las plantillas literales proporcionan azúcar sintáctica para construir cadenas. (Esto es similar a las funciones de interpolación de cadenas en Perl, Python y más).</p> + +<p>Opcionalmente, puedes agregar una etiqueta para permitirte personalizar la construcción de la cadena, evitando ataques de inyección o construyendo estructuras de datos de nivel superior a partir del contenido de la cadena.</p> + +<pre class="brush: js notranslate">// Creación de cadenas literales básicas +`en JavaScript '\n' es un avance de línea.` + +// Cadenas multilínea +`En JavaScript, las cadenas de plantilla pueden ocupar + varias líneas, pero las cadenas entrecomillas dobles o + simples no pueden.` + +// Interpolación de cadenas +var name = 'Bob', time = 'today'; +`Hola ${name}, ¿cómo estás ${time}?` + +// Construye un prefijo de petición HTTP utilizado para interpretar los reemplazos y la construcción +POST`http://foo.org/bar?a=${a}&b=${b} + Content-Type: application/json + X-Credentials: ${credentials} + { "foo": ${foo}, + "bar": ${bar}}`(myOnReadyStateChangeHandler);</pre> + +<p>Debes usar cadenas literales a menos que específicamente necesites usar un objeto <code>String</code>. Consulta {{JSxRef("String")}} para obtener detalles sobre los objetos <code>String</code>.</p> + +<h4 id="Uso_de_caracteres_especiales_en_cadenas">Uso de caracteres especiales en cadenas</h4> + +<p>Adicionalmente a los caracteres normales, también puedes incluir caracteres especiales en las cadenas, como muestra el siguiente ejemplo:</p> + +<pre class="brush: js notranslate">"una linea \n otra linea" +</pre> + +<p>La siguiente tabla enumera los caracteres especiales que se pueden usar en una cadena JavaScript.</p> + +<table class="standard-table"> + <caption>Tabla 2.1 caracteres especiales JavaScript</caption> + <thead> + <tr> + <th scope="col">Caracter</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\0</code></td> + <td>Byte nulo</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>\n</code></td> + <td>Nueva Línea</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Retorno de carro</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Tabulación</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Tabulación vertical</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>Apóstrofo o comilla simple</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>Comilla doble</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>Caracter de barra invertida</td> + </tr> + <tr> + <td><code>\<em>XXX</em></code></td> + <td>El caracter con la codificación Latin-1 especificada por hasta tres dígitos octales <em>XXX</em> entre <code>0</code> y <code>377</code>.<br> + Por ejemplo, <code>\251</code> es la secuencia octal del símbolo de copyright.</td> + </tr> + <tr> + </tr> + <tr> + <td><code>\x<em>XX</em></code></td> + <td> + <p>El caracter con la codificación Latin-1 especificada por los dos dígitos hexadecimales <em>XX</em> entre <code>00</code> y <code>FF</code>.<br> + Por ejemplo, <code>\xA9</code> es la secuencia hexadecimal del símbolo de copyright.</p> + </td> + </tr> + <tr> + </tr> + <tr> + <td><code>\u<em>XXXX</em></code></td> + <td>El caracter Unicode especificado por los cuatro dígitos hexadecimales <em>XXXX</em>.<br> + Por ejemplo, <code>\u00A9</code> es la secuencia Unicode para el símbolo de copyright. Consulta {{JSxRef("Gramatica_lexica", "Secuencias de escape Unicode", "#Cadenas_literales")}}.</td> + </tr> + <tr> + <td><code>\u<em>{XXXXX}</em></code></td> + <td>El punto de código escape Unicode.<br> + Por ejemplo, <code>\u{2F804}</code> es el mismo que el escape Unicode simple <code>\uD87E\uDC04</code>.</td> + </tr> + </tbody> +</table> + +<h4 id="Escapar_caracteres">Escapar caracteres</h4> + +<p>Para caracteres no enumerados en la tabla, la precedencia de la barra inversa es ignorada, pero su uso esta desaconsejado y se debe evitar.</p> + +<p>Puedes insertar comillas dobles dentro de una cadena anteponiendo un caracter de barra inversa. Esto se conoce como <em>escapar</em> las comillas. Por ejemplo:</p> + +<pre class="brush: js notranslate">var quote = "Él leyó \"La cremación de Sam McGee\" de R.W. Service."; +console.log(quote); +</pre> + +<p>El resultado de esto sería:</p> + +<pre class="eval notranslate">El leyó "La cremación de Sam McGee" de R.W. Service. +</pre> + +<p>Para incluir una barra invertida literal dentro de una cadena, debes escapar el caracter de barra invertida. Por ejemplo, para asignar la ruta del archivo <code>c:\temp</code> a una cadena, usa lo siguiente:</p> + +<pre class="brush: js notranslate">var home = 'c:\\temp'; +</pre> + +<p>También puedes escapar los saltos de línea precediéndolos con una barra invertida. La barra invertida y el salto de línea se eliminan del valor de la cadena.</p> + +<pre class="brush: js notranslate">var str = 'esta cadena \ +se divide \ +en múltiples \ +líneas.' +console.log(str); // esta cadena se divide en múltiples líneas. +</pre> + +<p>Aunque JavaScript no tiene sintaxis "«heredoc»" se puede acercar insertando una barra inversa y un salto de linea al final de cada linea:</p> + +<pre class="brush: js notranslate">var poem = +'Las rosas son rojas,\n\ +Las violetas son azules.\n\ +El azúcar es dulce,\n\ +y foo también.' +</pre> + +<p>ECMAScript 2015 introduce un nuevo tipo de literal, a saber, {{JSxRef("template_strings", "plantillas literales")}}. Esto permite muchas nuevas funciones, ¡incluidas cadenas multilínea!</p> + +<pre class="brush: js notranslate" dir="rtl">var poem = +`Las rosas son rojas, +Las violetas son azules. +El azúcar es dulce, +y foo también.`</pre> + +<h2 id="Mas_información">Mas información</h2> + +<p>Este capítulo se enfoca en la sintaxis básica para los tipos y las declaraciones. Para aprender mas acerca de las construcciones en el lenguaje JavaScript, ve también los siguientes capítulos en esta guía:</p> + +<ul> + <li>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Control de flujo y manejo de errores")}}</li> + <li>{{JSxRef("../Guide/Bucles_e_iteracion", "Bucles e iteración")}}</li> + <li>{{JSxRef("../Guide/Funciones", "Funciones")}}</li> + <li>{{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}}</li> +</ul> + +<p>En el próximo capítulo, veremos las construcciones de control de flujo y el manejo de errores.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> diff --git a/files/es/web/javascript/guide/index.html b/files/es/web/javascript/guide/index.html new file mode 100644 index 0000000000..18a98a6771 --- /dev/null +++ b/files/es/web/javascript/guide/index.html @@ -0,0 +1,138 @@ +--- +title: Guía de JavaScript +slug: Web/JavaScript/Guide +tags: + - Guía + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">La Guía de JavaScript te muestra cómo usar {{JSxRef("../../JavaScript", "JavaScript")}} y te brinda una perspectiva general del lenguaje. Si necesitas información exhaustiva sobre una característica del lenguaje, consulta la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</p> + +<h2 id="Capítulos">Capítulos</h2> + +<p>Esta guía se divide en varios capítulos:</p> + +<ul class="card-grid"> + <li><span>{{JSxRef("../Guide/Introducción", "Introducción")}}</span> + + <p>{{JSxRef("../Guide/Introducción", "Acerca de esta guía", "#Donde_encontrar_informacion_sobre_JavaScript")}}<br> + {{JSxRef("../Guide/Introducción", "Acerca de JavaScript", "#Que_es_JavaScript")}}<br> + {{JSxRef("../Guide/Introducción", "JavaScript y Java", "#JavaScript_y_Java")}}<br> + {{JSxRef("../Guide/Introducción", "ECMAScript", "#JavaScript_y_la_especificacion_ECMAScript")}}<br> + {{JSxRef("../Guide/Introducción", "Herramientas", "#Como_empezar_con_JavaScript")}} + {{JSxRef("../Guide/Introducción", "Hola, Mundo", "#Hola_mundo")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Grammar_and_types", "Gramática y tipos")}}</span> + <p>{{JSxRef("../Guide/Grammar_and_types", "Sintaxis básica y comentarios", "#Conceptos_basicos")}}<br> + {{JSxRef("../Guide/Grammar_and_types", "Declaración de variables", "#Declaraciones")}}<br> + {{JSxRef("../Guide/Grammar_and_types", "Ámbito de variables", "#Ambito_de_variables")}}<br> + {{JSxRef("../Guide/Grammar_and_types", "Elevación de variables (hoisting)", "Elevacion_de_variables")}}<br> + {{JSxRef("../Guide/Grammar_and_types", "Estructuras y tipos de datos", "#Estructuras_y_tipos_de_datos")}}<br> + {{JSxRef("../Guide/Grammar_and_types", "Literales", "#Literales")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Control de flujo y manejo de errores")}}</span> + <p>{{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "if...else", "#delacacion_if...else")}}<br> + {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "switch", "#declaracion_switch")}}<br> + {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "try/catch/throw", "Declaraciones_para_el_manejo_de_excepciones")}}<br> + {{JSxRef("../Guide/Control_de_flujo_y_manejo_de_errores", "Objetos Error", "#Utilizar_objetos_error")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Bucles_e_iteracion", "Bucles e iteración")}}</span> + <p>{{JSxRef("../Guide/Bucles_e_iteracion", "for", "#instruccion_for")}}<br> + {{JSxRef("../Guide/Bucles_e_iteracion", "while", "#instruccion_while")}}<br> + {{JSxRef("../Guide/Bucles_e_iteracion", "do...while", "#instruccion_do...while")}}<br> + {{JSxRef("../Guide/Bucles_e_iteracion", "break", "#instruccion_break")}}/{{JSxRef("../Guide/Bucles_e_iteracion", "continue", "#instruccion_continue")}}<br> + {{JSxRef("../Guide/Bucles_e_iteracion", "for..in", "#instruccion_for...in")}}<br> + {{JSxRef("../Guide/Bucles_e_iteracion", "for..of", "#instruccion_for...of")}}</p> + </li> +</ul> + +<ul class="card-grid"> + <li><span>{{web.link("/es/docs/Web/JavaScript/Guide/Functions", "Funciones")}}</span> + + <p>{{JSxRef("../Guide/Funciones", "Definir funciones", "#Definir_funciones")}}<br> + {{JSxRef("../Guide/Funciones", "Llamar funciones", "#Llamar_funciones")}}<br> + {{JSxRef("../Guide/Funciones", "Ámbito de una función", "#Ambito_de_una_funcion")}}<br> + {{JSxRef("../Guide/Funciones", "Cierres", "#Cierres")}}<br> + {{JSxRef("../Guide/Funciones", "Argumentos", "#Utilizar_el_objeto_arguments")}} y {{JSxRef("../Guide/Funciones", "parámetros", "#Utilizar_parametros_de_funcion")}}<br> + {{JSxRef("../Guide/Funciones", "Funciones flecha", "#Funciones_flecha")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Expressions_and_Operators", "Expresiones y operadores")}}</span> + <p>{{JSxRef("../Guide/Expressions_and_Operators", "Asignación", "#Operadores_de_asignacion")}} y {{JSxRef("../Guide/Expressions_and_Operators", "Comparación", "#Operadores_de_comparacion")}}<br> + {{JSxRef("../Guide/Expressions_and_Operators", "Operadores aritméticos", "#Operadores_aritmeticos")}}<br> + {{JSxRef("../Guide/Expressions_and_Operators", "Operadores lógicos", "#Operadores_logicos")}} y {{JSxRef("../Guide/Expressions_and_Operators", "a nivel de bits", "#Operadores_bit_a_bit")}}<br> + {{JSxRef("../Guide/Expressions_and_Operators", "Operador condicional (ternario)", "#Operador_condicional_ternario")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Numbers_and_dates", "Números y fechas")}}</span>{{JSxRef("../Guide/Numbers_and_dates", "Números literales", "#Numeros")}} + <p>{{JSxRef("../Guide/Numbers_and_dates", "Objeto Number", "#El_objeto_Number")}}<br> + {{JSxRef("../Guide/Numbers_and_dates", "Objeto Math", "#El_objeto_Math")}}<br> + {{JSxRef("../Guide/Numbers_and_dates", "Objeto Date", "#El_objeto_Date")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Text_formatting", "Formateo de texto")}}</span> + <p>{{JSxRef("../Guide/Text_formatting", "Cadenas literales", "#Cadenas_literales")}}<br> + {{JSxRef("../Guide/Text_formatting", "Objeto String", "#Objetos_string")}}<br> + {{JSxRef("../Guide/Text_formatting", "Plantillas literales", "#Plantillas_literales_multilinea")}}<br> + {{JSxRef("../Guide/Text_formatting", "Internacionalización", "#Internacionalizacion")}}<br> + {{JSxRef("../Guide/Regular_Expressions", "Expresiones Regulares")}}</p> + </li> +</ul> + +<ul class="card-grid"> + <li><span>{{JSxRef("../Guide/Regular_Expressions", "Colecciones indexadas")}}</span> + + <p>{{JSxRef("../Guide/colecciones_indexadas", "Arreglos", "#El_objeto_Array")}}<br> + {{JSxRef("../Guide/colecciones_indexadas", "Arreglos tipados", "#Arrays_tipados")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Keyed_collections", "Colecciones con clave")}}</span> + <p>{{JSxRef("../Guide/Keyed_collections", "Mapa", "#Objeto_map")}}<br> + {{JSxRef("../Guide/Keyed_collections", "WeakMap", "#El_objeto_WeakMap")}}<br> + {{JSxRef("../Guide/Keyed_collections", "Set", "#El_objeto_Set")}}<br> + {{JSxRef("../Guide/Keyed_collections", "WeakSet", "#El_objeto_WeakSet")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Trabajando_con_objectos", "Trabajar con objetos")}}</span> + <p>{{JSxRef("../Guide/Trabajando_con_objectos", "Objetos y propiedades", "#Objetos_y_propiedades")}}<br> + {{JSxRef("../Guide/Trabajando_con_objectos", "Creación de objetos", "#Creacion_de_objetos")}}<br> + {{JSxRef("../Guide/Trabajando_con_objectos", "Definición de métodos", "#Definicion_de_metodos")}}<br> + {{JSxRef("../Guide/Trabajando_con_objectos", "Captadores —getter— y establecedores —setter—", "#Definicion__de_captadores_getters_y_establecedores_setters")}} +</p> + </li> + <li><span>{{JSxRef("../Guide/Details_of_the_Object_Model", "Detalles del modelo de objetos")}}</span> + <p>{{JSxRef("../Guide/Details_of_the_Object_Model", "Programación Orientada a Objetos basada en prototipos", "#Lenguajes_basados_en_clases_vs._basados_en_prototipos")}}<br> + {{JSxRef("../Guide/Details_of_the_Object_Model", "Crear jerarquía de objetos", "#Creacion_de_la_jerarquia")}}<br> + {{JSxRef("../Guide/Details_of_the_Object_Model", "Herencia", "#Herencia_de_propiedades_revisada")}}</p> + </li> +</ul> + +<ul class="card-grid"> + <li><span>{{JSxRef("../Guide/Usar_promesas", "Promesas")}}</span> + + <p>{{JSxRef("../Guide/Usar_promesas", "Garantías", "#Garantias")}}<br> + {{JSxRef("../Guide/Usar_promesas", "Encadenamiento", "#Encadenamiento")}}<br> + {{JSxRef("../Guide/Usar_promesas", "Propagación de errores", "#Propagacion_de_errores")}}<br> + {{JSxRef("../Guide/Usar_promesas", "Composición", "#Composicion")}}<br> + {{JSxRef("../Guide/Usar_promesas", "Temporizador", "#Temporizador")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Iterators_and_Generators", "Iteradores y generadores")}}</span> + <p>{{JSxRef("../Guide/Iterators_and_Generators", "Iteradores", "#Iteradores")}}<br> + {{JSxRef("../Guide/Iterators_and_Generators", "Iterables", "#Iterables")}}<br> + {{JSxRef("../Guide/Iterators_and_Generators", "Generadores", "#Generadores")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Meta_programming", "Metaprogramación")}}</span> + <p>{{JSxRef("../Guide/Meta_programming", "Proxy", "#Proxies")}}<br> + {{JSxRef("../Guide/Meta_programming", "Controladores y trampas", "#Controladores_y_trampas")}}<br> + {{JSxRef("../Guide/Meta_programming", "Proxy revocable", "#Proxy_revocable")}}<br> + {{JSxRef("../Guide/Meta_programming", "Reflexión", "#Reflexion")}}</p> + </li> + <li><span>{{JSxRef("../Guide/Modules", "Módulos JavaScript")}}</span> + <p>{{JSxRef("../Guide/Modules", "Exportar", "#Exportar_caracteristicas_del_modulo")}}<br> + {{JSxRef("../Guide/Modules", "Importar", "#Importacion_de_caracteristicas_en_tu_script")}}<br> + {{JSxRef("../Guide/Modules", "Exportaciones predeterminadas", "#Exportaciones_predeterminadas_vs._exportaciones_con_nombre")}}<br> + {{JSxRef("../Guide/Modules", "Cambio de nombre de funciones", "#Renombrar_importaciones_y_exportaciones")}}<br> + {{JSxRef("../Guide/Modules", "Carga estática de módulos", "#Carga_estatica_de_modulos")}}<br> + {{JSxRef("../Guide/Modules", "Carga dinámica de módulos", "#Carga_dinamica_de_modulos")}}</p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/es/web/javascript/guide/introducción/index.html b/files/es/web/javascript/guide/introducción/index.html new file mode 100644 index 0000000000..6200c2c7d6 --- /dev/null +++ b/files/es/web/javascript/guide/introducción/index.html @@ -0,0 +1,161 @@ +--- +title: Introducción +slug: Web/JavaScript/Guide/Introducción +tags: + - Guía + - Introducion + - JavaScript + - Novato + - Principiante + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Introduction +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</div> + +<p class="summary">Este capítulo presenta JavaScript y analiza algunos de sus conceptos fundamentales.</p> + +<h2 id="¿Qué_debes_conocer_previamente">¿Qué debes conocer previamente?</h2> + +<p>Esta guía presume que tienes los siguientes antecedentes básicos:</p> + +<ul> + <li>Comprensión general de Internet y la ({{Glossary("WWW", "World Wide Web")}}).</li> + <li>Buen conocimiento práctico del {{Glossary("HTML", "lenguaje de marcado de hipertexto (HTML)")}}.</li> + <li>Alguna experiencia en programación. Si eres nuevo en la programación, prueba uno de los tutoriales vinculados en la página principal sobre {{JSxRef("../../JavaScript", "JavaScript")}}.</li> +</ul> + +<h2 id="Dónde_encontrar_información_sobre_JavaScript">Dónde encontrar información sobre JavaScript</h2> + +<p>La documentación de JavaScript en MDN incluye lo siguiente:</p> + +<ul> + <li>{{web.link("/es/docs/Learn", "Aprende desarrollo web")}} proporciona información para principiantes e introduce conceptos básicos de programación e Internet.</li> + <li>La {{JSxRef("../Guide", "Guía de JavaScript")}} (esta guía) proporciona una descripción general sobre el lenguaje JavaScript y sus objetos.</li> + <li>La {{JSxRef("../Reference", "Referencia de JavaScript")}} proporciona material de referencia detallado para JavaScript.</li> +</ul> + +<p>Si eres nuevo en JavaScript, comienza con los artículos en el {{web.link("/es/docs/Learn", "área de aprendizaje")}} y la {{JSxRef("../Guide", "Guía de JavaScript")}}. Una vez que tengas una firme comprensión de los fundamentos, puedes usar la {{JSxRef("../Referencia", "Referencia de JavaScript")}} para obtener más detalles sobre objetos y declaraciones individuales.</p> + +<h2 id="¿Qué_es_JavaScript">¿Qué es JavaScript?</h2> + +<p>JavaScript es un lenguaje de programación multiplataforma orientado a objetos que se utiliza para hacer que las páginas web sean interactivas (p. ej., Que tienen animaciones complejas, botones en los que se puede hacer clic, menús emergentes, etc.). También hay versiones de JavaScript de lado del servidor más avanzadas, como Node.js, que te permiten agregar más funcionalidad a un sitio web que simplemente descargar archivos (como la colaboración en tiempo real entre varias computadoras). Dentro de un entorno (por ejemplo, un navegador web), JavaScript se puede conectar a los objetos de su entorno para proporcionar control programático sobre ellos.</p> + +<p>JavaScript contiene una biblioteca estándar de objetos, como <code>Array</code>, <code>Date</code> y <code>Math</code>, y un conjunto básico de elementos del lenguaje como operadores, estructuras de control y declaraciones. El núcleo de JavaScript se puede extender para una variedad de propósitos completándolo con objetos adicionales; por ejemplo:</p> + +<ul> + <li><em>JavaScript de lado del cliente</em> extiende el núcleo del lenguaje al proporcionar objetos para controlar un navegador y su <em>Modelo de objetos de documento</em> (DOM por <em>Document Object Model</em>). Por ejemplo, las extensiones de lado del cliente permiten que una aplicación coloque elementos en un formulario HTML y responda a eventos del usuario, como clics del mouse, formularios para ingreso de datos y navegación de páginas.</li> + <li><em>JavaScript de lado del servidor</em> amplía el núcleo del lenguaje al proporcionar objetos relevantes para ejecutar JavaScript en un servidor. Por ejemplo, las extensiones de lado del servidor permiten que una aplicación se comunique con una base de datos, brinde continuidad de información de una invocación a otra de la aplicación o realice manipulación de archivos en un servidor.</li> +</ul> + +<p>Esto significa que en el navegador, JavaScript puede cambiar la apariencia de la página web (DOM). Y, del mismo modo, el JavaScript de Node.js en el servidor puede responder a solicitudes personalizadas desde el código escrito en el navegador.</p> + +<h2 id="JavaScript_y_Java" name="JavaScript_y_Java">JavaScript y Java</h2> + +<p>JavaScript y Java son similares en algunos aspectos, pero fundamentalmente diferentes en otros. El lenguaje JavaScript se parece a Java, pero no tiene el tipado estático ni la fuerte verificación de tipos de Java. JavaScript sigue la mayoría de la sintaxis de las expresiones de Java, convenciones de nomenclatura y construcciones de control de flujo básicas, razón por la cual se cambió el nombre de LiveScript a JavaScript.</p> + +<p>A diferencia del sistema de clases en tiempo de compilación de Java creado por declaraciones, JavaScript admite un sistema de tiempo de ejecución basado en una pequeña cantidad de tipos de datos que representan valores numéricos, booleanos y de cadena. JavaScript tiene un modelo de objetos basado en prototipos en lugar del modelo de objetos basado en clases más común. El modelo basado en prototipos proporciona herencia dinámica; es decir, lo que se hereda puede variar en objetos individuales. JavaScript también admite funciones sin requisitos declarativos especiales. Las funciones pueden ser propiedades de objetos, ejecutándose como métodos débilmente tipados.</p> + +<p>JavaScript es un lenguaje de forma muy libre en comparación con Java. No es necesario declarar todas las variables, clases y métodos. No tienes que preocuparte por si los métodos son públicos, privados o protegidos, y no tienes que implementar interfaces. Las variables, los parámetros y los tipos de retorno de función no se tipifican explícitamente.</p> + +<p>Java es un lenguaje de programación basado en clases diseñado para una ejecución rápida y con seguridad de tipos. La seguridad de tipos significa, por ejemplo, que no puedes convertir un entero de Java en una referencia de objeto o acceder a la memoria privada corrompiendo el código de bytes de Java. El modelo basado en clases de Java significa que los programas constan exclusivamente de clases y sus métodos. La herencia de clases de Java y la tipificación fuerte generalmente requieren jerarquías de objetos estrechamente acopladas. Estos requisitos hacen que la programación Java sea más compleja que la programación JavaScript.</p> + +<p>Por el contrario, JavaScript desciende en espíritu de una línea de lenguajes más pequeños de tipado dinámico como HyperTalk y dBASE. Estos lenguajes de «<em>scripting</em>» ofrecen herramientas de programación a una audiencia mucho más amplia debido a su sintaxis más sencilla, funcionalidad especializada incorporada y requisitos mínimos para la creación de objetos.</p> + +<table class="standard-table"> + <caption>JavaScript comparado con Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Orientado a objetos. No hay distinción entre tipos de objetos. La herencia se realiza a través del mecanismo de prototipo, y las propiedades y métodos se pueden agregar a cualquier objeto de forma dinámica.</td> + <td>Basado en clases. Los objetos se dividen en clases e instancias con toda la herencia a través de la jerarquía de clases. Las clases y las instancias no pueden tener propiedades o métodos agregados dinámicamente.</td> + </tr> + <tr> + <td>Los tipos de datos de las variables no se declaran (tipado dinámico, tipado flexible).</td> + <td>Los tipos de datos de las variables se deben declarar (tipado estático, fuertemente tipado).</td> + </tr> + <tr> + <td>No se puede escribir automáticamente en el disco duro.</td> + <td>Puede escribir automáticamente en el disco duro.</td> + </tr> + </tbody> +</table> + +<p>Para obtener más información sobre las diferencias entre JavaScript y Java, consulta el capítulo {{JSxRef("../Guide/Details_of_the_Object_Model", "Detalles del modelo de objetos")}}.</p> + +<h2 id="JavaScript_y_la_especificacion_ECMAScript" name="JavaScript_y_la_especificacion_ECMAScript">JavaScript y la especificación ECMAScript</h2> + +<p>JavaScript está estandarizado en <a class="external" href="https://www.ecma-international.org/">Ecma International</a>, la asociación europea para estandarizar los sistemas de información y comunicación (ECMA antes era un acrónimo para la Asociación Europea de Fabricantes de Computadoras) para ofrecer un lenguaje de programación internacional estandarizado basado en JavaScript. Esta versión estandarizada de JavaScript, denominada ECMAScript, se comporta de la misma manera en todas las aplicaciones que admiten el estándar. Las empresas pueden utilizar el lenguaje estándar abierto para desarrollar su implementación de JavaScript. El estándar ECMAScript está documentado en la especificación ECMA-262. Consulta {{JSxRef("../Novedades_en_JavaScript", "Novedades en JavaScript")}} para obtener más información sobre las diferentes versiones de JavaScript y las ediciones de especificación ECMAScript.</p> + +<p>El estándar ECMA-262 también está aprobado por <a class="external" href="https://www.iso.org/home.html">ISO</a> (Organización Internacional de Normalización) como ISO-16262. También puedes encontrar la especificación en <a class="external" href="https://www.ecma-international.org/publications/standards/Ecma-262.htm">el sitio web de Ecma International</a>. La especificación ECMAScript no describe el modelo de objetos de documento (DOM), que está estandarizado por el <a class="external" href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> y/o <a href="https://whatwg.org">WHATWG (Grupo de trabajo de tecnología de aplicaciones de hipertexto web)</a>. El DOM define la forma en que los objetos de documentos HTML se exponen a tu «script». Para tener una mejor idea de las diferentes tecnologías que se utilizan al programar con JavaScript, consulta el artículo {{JSxRef("../Descripción_de_las_tecnologías_JavaScript", "descripción de las tecnologías JavaScript")}}.</p> + +<h3 id="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript" name="Documentacion_de_JavaScript_versus_especificacion_de_ECMAScript">Documentación de JavaScript versus especificación de ECMAScript</h3> + +<p>La especificación ECMAScript es un conjunto de requisitos para implementar ECMAScript. Es útil si deseas implementar funciones del lenguaje compatibles con los estándares en tu implementación o motor ECMAScript (como SpiderMonkey en Firefox o V8 en Chrome).</p> + +<p>El documento ECMAScript <em>no</em> está destinado a ayudar a los programadores de scripts. Utiliza la documentación de JavaScript para obtener información al escribir tus scripts.</p> + +<p>La especificación ECMAScript utiliza terminología y sintaxis que puede resultar desconocida para un programador de JavaScript. Aunque la descripción del lenguaje puede diferir en ECMAScript, el lenguaje en sí sigue siendo el mismo. JavaScript admite todas las funciones descritas en la especificación ECMAScript.</p> + +<p>La documentación de JavaScript describe aspectos del lenguaje que son apropiados para un programador de JavaScript.</p> + +<h2 id="Cómo_empezar_con_JavaScript">Cómo empezar con JavaScript</h2> + +<p>Comenzar con JavaScript es fácil: todo lo que necesitas es un navegador web moderno. Esta guía incluye algunas funciones de JavaScript que solo están disponibles actualmente en las últimas versiones de Firefox, por lo que se recomienda utilizar la versión más reciente de Firefox.</p> + +<p>La herramienta <em>Consola web</em> integrada en Firefox es útil para experimentar con JavaScript; Puedes usarla en dos modos: modo de entrada unilínea y modo de entrada multilínea.</p> + +<h3 id="Entrada_unilínea_en_la_consola_web">Entrada unilínea en la consola web</h3> + +<p>La {{web.link("/es/docs/Tools/Web_Console", "Consola web")}} te muestra información sobre la página web cargada actualmente, y también incluye un intérprete de JavaScript que puedes usar para ejecutar expresiones de JavaScript en la página actual.</p> + +<p>Para abrir la Consola web (<kbd>Ctrl</kbd>+<kbd>Mayús</kbd>+<kbd>I</kbd> en Windows y Linux o <kbd>Cmd</kbd>-<kbd>Opción</kbd>-<kbd>K</kbd> en Mac), abre el menú <strong>Herramientas</strong> en Firefox y selecciona "<strong>Desarrollador ▶ Consola web</strong>".</p> + +<p>La consola web aparece en la parte inferior de la ventana del navegador. En la parte inferior de la consola hay una línea de entrada que puedes usar para ingresar JavaScript, y la salida aparece en el panel de arriba:</p> + +<p><img alt="Consola web" src="https://mdn.mozillademos.org/files/16569/2019-04-04_00-15-29.png" style="display: block; height: 1824px; margin-left: auto; margin-right: auto; width: 2784px;"></p> + +<p>La consola funciona exactamente de la misma manera que <code>eval</code>: devuelve la última expresión ingresada. En aras de la simplicidad, te puedes imaginar que cada vez que ingresas algo en la consola, en realidad estás rodeado por <code>console.log</code> alrededor de <code>eval</code>, así:</p> + +<pre class="brush: js notranslate">function greetMe(tuNombre) { + alert("Hola " + tuNombre) +} +<code>console.log(eval('3 + 5'))</code> +</pre> + +<h3 id="Entrada_multilínea_en_la_consola_web">Entrada multilínea en la consola web</h3> + +<p>El modo de entrada unilínea de la consola web es ideal para realizar pruebas rápidas de expresiones JavaScript, pero aunque puedes ejecutar varias líneas, no es muy conveniente para eso. Para JavaScript más complejo, puedes utilizar el <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Multi-line_mode">modo de entrada multilínea</a>.</p> + +<h3 id="Hola_mundo">Hola mundo</h3> + +<p>Para comenzar a escribir JavaScript, abre la Consola web en modo multilínea y escribe tu primer código "Hola mundo" en JavaScript:</p> + +<pre class="brush: js notranslate">(function(){ + "use strict"; + /* Inicio de tu código */ + function greetMe(tuNombre) { + alert('Hola ' + tuNombre); + } + + greetMe('Mundo'); + /* Fin de tu código */ +})();</pre> + +<p>Presiona <kbd>Cmd</kbd>+<kbd>Intro</kbd> o <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o haz clic en el botón <strong>Ejecutar</strong>), ¡para ver cómo se desarrolla en tu navegador!</p> + +<p>En las siguientes páginas, esta guía te presenta la sintaxis de JavaScript y las características del lenguaje, de modo que puedas escribir aplicaciones más complejas.</p> + +<p>Pero por ahora, recuerda incluir siempre el <code>(function() { "use strict";</code> antes de tu código, y agrega <code>})();</code> al final de tu código. Aprenderás {{Glossary("IIFE", "qué significa IIFE")}} , pero por ahora puedes pensar que hacen lo siguiente:</p> + +<ol> + <li>Mejoran enormemente el rendimiento.</li> + <li>Evitan la semántica estúpida en JavaScript que hace tropezar a los principiantes.</li> + <li>Evitan que los fragmentos de código ejecutados en la consola interactúen entre sí (por ejemplo, que algo creado en una ejecución de consola se utilice para una ejecución de consola diferente).</li> +</ol> + +<p>{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}</p> diff --git a/files/es/web/javascript/guide/iterators_and_generators/index.html b/files/es/web/javascript/guide/iterators_and_generators/index.html new file mode 100644 index 0000000000..3c6ceccb34 --- /dev/null +++ b/files/es/web/javascript/guide/iterators_and_generators/index.html @@ -0,0 +1,177 @@ +--- +title: Iteradores y generadores +slug: Web/JavaScript/Guide/Iterators_and_Generators +tags: + - Guía + - Intermedio + - JavaScript +translation_of: Web/JavaScript/Guide/Iterators_and_Generators +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</div> + +<p class="summary">Procesar cada uno de los elementos en una colección es una operación muy común. JavaScript proporciona diversas formas de iterar sobre una colección, desde simples bucles {{jsxref("Sentencias/for","for")}}<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>hasta métodos como<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>{{jsxref("Objetos_globales/Array/map","map()")}} y {{jsxref("Objetos_globales/Array/filter","filter()")}}.<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for" title="en/Core_JavaScript_1.5_Reference/Statements/for"> </a>Los iteradores y los generadores traen el concepto de iteración al centro del lenguaje y proporcionan un mecanismo para personalizar el comportamiento de los bucles {{jsxref("Sentencias/for...of","for...of")}}.</p> + +<p>Para más información, véase:</p> + +<ul> + <li>{{jsxref("Iteration_protocols", "Protocolos de iteración")}}</li> + <li>{{jsxref("Sentencias/for...of","for...of")}}</li> + <li>{{jsxref("Sentencias/function*","function*")}} y {{jsxref("Objetos_globales/Generador","Generador")}}</li> + <li>{{jsxref("Operadores/yield","yield")}} y {{jsxref("Operadores/yield*","yield*")}}</li> +</ul> + +<h2 id="Iteradores">Iteradores</h2> + +<p>En JavaScript, un <strong>iterador</strong> es un objeto que permite recorrer una colección y devolver un valor al terminar. </p> + +<p>Específicamente, un iterador es un objeto que implementa el <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol">protocolo de iteración</a> a través del método <code>next()</code>, el cual devuelve un objeto con dos propiedades:</p> + +<dl> + <dt><code><var>value</var></code></dt> + <dd>El siguiente valor en la secuencia de iteración.</dd> + <dt><code><var>done</var></code></dt> + <dd>Es <code>true</code> si el último valor en la secuencia ya ha sido consumido. Si <code><var>value</var></code> está presente junto con <code><var>done</var></code>, es el valor de retorno del iterador.</dd> +</dl> + +<p>Un iterador se considera ya terminado/finalizado cuando la invocación de <code>next()</code> regresa un objeto donde la propiedad <code>done</code> es <code>verdadero</code>.</p> + +<p>Una vez creado, un objeto iterador puede utilizarse explícitamente llamando repetidamente al método <code>next()</code>.</p> + +<pre class="brush: js">function crearIterador(arreglo){ + var siguienteIndice = 0; + + return { + next: function(){ + return siguienteIndice < arreglo.length ? + {value: arreglo[siguienteIndice++], done: false} : + {done: true}; + } + } +}</pre> + +<p>Una vez inicializado, se puede invocar al método <code>next()</code> para acceder a las parejas llave-valor del objeto en cuestión:</p> + +<pre class="brush: js">var it = crearIterador(['yo', 'ya']); +console.log(it.next().value); // 'yo' +console.log(it.next().value); // 'ya' +console.log(it.next().done); // true</pre> + +<h2 id="Generadores">Generadores</h2> + +<p>Aunque los iteradores personalizados son una herramienta útil, su creación require una programación meticulosa ya que necesitan mantener su estado interno explícitamente. Los <strong>{{jsxref("Objetos_globales/Generador","generadores","","true")}}</strong> son una alternativa poderosa: permiten definir un algoritmo iterativo al escribir una sola función que puede mantener su propio estado.</p> + +<p>Una función generadora (constructor GeneratorFunction) es un tipo especial de función que sirve como una fábrica de iteradores. Cuando se ejecuta, regresa un nuevo objeto Generador. Una función se convierte en una Función Generadora si utiliza la sintáxis {{jsxref("Sentencias/function*","function*")}}.</p> + +<pre class="brush: js">function* hacedorIds() { + var indice = 0; + while(true) + yield indice++; +} + +var gen = hacedorIds(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +// ...</pre> + +<h2 id="Iterables">Iterables</h2> + +<p>Un objeto es <strong>iterable</strong> si define cómo se itera. Un ejemplo son los valores que se iteran en un bucle {{jsxref("Sentencias/for...of", "for...of")}}. Algunos tipos integrados de datos, como {{jsxref("Array")}} o {{jsxref("Map")}}, tienen una forma de iteración ya definida, mientras que otras no (como {{jsxref("Object")}}).</p> + +<p><span id="result_box" lang="es"><span class="hps">Con el fin de</span> <span class="hps">ser</span> <strong><span class="hps">iterable</span></strong><span>,</span> <span class="hps">un objeto</span> <span class="hps">debe implementar</span></span> el método <strong>@@iterator</strong>. Esto quiere decir que dicho objeto (o alguno en su <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>) debe tener una propiedad definida usando la llave {{jsxref("Symbol.iterator")}}. Esta función debería regresar un nuevo iterador en cada invocación, pero no es obligatorio.</p> + +<h3 id="Iterables_definidos_por_el_usuario">Iterables definidos por el usuario</h3> + +<p>Podemos hacer nuestros propios objetos iterables de este modo:</p> + +<pre class="brush: js">var miIterable = {} +miIterable[Symbol.iterator] = function* () { + yield 1; + yield 2; + yield 3; +}; + +for (let valor of miIterable) { + console.log(valor) +} +// 1 +// 2 +// 3 + +// ó + +[...miIterable] // [1, 2, 3] +</pre> + +<h3 id="Iterables_integrados">Iterables integrados</h3> + +<p>{{jsxref("String")}}, {{jsxref("Array")}}, {{jsxref("Objetos_globales/TypedArray")}}, {{jsxref("Map")}} y {{jsxref("Set")}} son iterables ya integrados, porque todos sus objetos prototipo tienen un método definido con la llave {{jsxref("Symbol.iterator")}}.</p> + +<h3 id="Sintaxis_que_esperan_objetos_iterables">Sintaxis que esperan objetos iterables</h3> + +<p>Algunas sentencias y expresiones esperan objetos iterables, por ejemplo los bucles {{jsxref("Sentencias/for...of","for-of")}}, {{jsxref("Operadores/Spread_operator","el operador de propagación")}}, {{jsxref("Operadores/yield*","yield*")}}, y {{jsxref("Operadores/Destructuring_assignment","la asignación por desestructuración","","true")}}.</p> + +<pre class="brush: js">for(let valor of ["a", "b", "c"]){ + console.log(valor) +} +// "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> + +<h2 id="Generadores_avanzados">Generadores avanzados</h2> + +<p>Los generadores calculan los valores devueltos bajo demanda, lo que les permite representar eficientemente secuencias que son costosas de calcular, o incluso secuencias infinitas como se explicó anteriormente.</p> + +<p>El método {{jsxref("Objetos_globales/Generador/next","next()")}} también acepta un valor que puede ser utilizado para modificar el estado interno del generador. El valor recibido por <code>next()</code> es utilizado como si fuera el resultado de la iteración anterior (último valor entregado por <code>yield</code>) el cual detuvo al generador.</p> + +<p>A continuación se muestra un generador de Fibonacci usando <code>next(x)</code> para reiniciar la secuencia:</p> + +<pre class="brush: js">function* fibonacci(){ + var fn1 = 1; + var fn2 = 1; + while (true){ + var actual = fn2; + fn2 = fn1; + fn1 = fn1 + actual; + var reset = yield actual; + if (reset){ + fn1 = 1; + fn2 = 1; + } + } +} + +var secuencia = fibonacci(); +console.log(secuencia.next().value); // 1 +console.log(secuencia.next().value); // 1 +console.log(secuencia.next().value); // 2 +console.log(secuencia.next().value); // 3 +console.log(secuencia.next().value); // 5 +console.log(secuencia.next().value); // 8 +console.log(secuencia.next().value); // 13 +console.log(secuencia.next(true).value); // 1 +console.log(secuencia.next().value); // 1 +console.log(secuencia.next().value); // 2 +console.log(secuencia.next().value); // 3</pre> + +<p>Es posible forzar a un generador a lanzar una excepción cuando se invoca al método {{jsxref("Objetos_globales/Generador/throw","throw()")}} y se pasa el valor de excepción a lanzar. Esta excepción será lanzada desde el contexto actual suspendido del generador, como si en vez del estado suspendido actualmente de <code>yield</code> se tuviera una sentencia <code>throw valor</code>.</p> + +<p>Si la excepción no es atrapada dentro del generador, se propagará a la invocación de <code>throw()</code>, y las siguientes llamadas a <code>next()</code> tendrán a la propiedad <code>done</code> en <code>verdadero</code>.</p> + +<p>Los generadores tienen un método {{jsxref("Objetos_globales/Generador/return","return(valor)")}} que regresa el valor enviado y finalizan al generador.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Details_of_the_Object_Model", "Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/es/web/javascript/guide/keyed_collections/index.html b/files/es/web/javascript/guide/keyed_collections/index.html new file mode 100644 index 0000000000..21b8df5cbd --- /dev/null +++ b/files/es/web/javascript/guide/keyed_collections/index.html @@ -0,0 +1,162 @@ +--- +title: Colecciones con clave +slug: Web/JavaScript/Guide/Keyed_collections +tags: + - Colecciones + - Conjunto + - Guía + - JavaScript + - Map + - 'l10n:priority' + - set +translation_of: Web/JavaScript/Guide/Keyed_collections +--- +<div>{{jsSidebar("JavaScript Guide", "Guía de JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div> + +<p class="summary">Este capítulo presenta colecciones de datos que están indexadas por una clave; los objetos <code>Map</code> y <code>Set</code> contienen elementos que son iterables en el orden de inserción.</p> + +<h2 id="Mapas">Mapas</h2> + +<h3 id="Objeto_map">Objeto <code>map</code></h3> + +<p>ECMAScript 2015 introduce una nueva estructura de datos para asociar claves con valores. Un objeto {{JSxRef("Map")}} es un mapa de clave/valor simple y puedes iterar sobre sus elementos en el orden en que fueron insertados.</p> + +<p>El siguiente código muestra algunas operaciones básicas con un <code>Map</code>. Consulta también la página de referencia de {{JSxRef("Map")}} para obtener más ejemplos y la API completa. Puedes usar un bucle {{JSxRef("Sentencias/for...of", "for...of")}} para devolver un arreglo de <code>[<var>key</var>, <var>value</var>]</code> para cada iteración.</p> + +<pre class="brush: js notranslate">let sayings = new Map(); +sayings.set('dog', 'woof'); +sayings.set('cat', 'meow'); +sayings.set('elephant', 'toot'); +sayings.size; // 3 +sayings.get('dog'); // woof +sayings.get('fox'); // undefined +sayings.has('bird'); // false +sayings.delete('dog'); +sayings.has('dog'); // false + +for (let [key, value] of sayings) { + console.log(key + ' goes ' + value); +} +// "cat goes meow" +// "elephant goes toot" + +sayings.clear(); +sayings.size; // 0 +</pre> + +<h3 id="Comparar_Object_y_map">Comparar <code>Object</code> y <code>map</code></h3> + +<p>Tradicionalmente, los {{JSxRef("Object", "objetos", "", 1)}} se han utilizado para asignar cadenas a valores. Los objetos te permiten establecer claves a valores, recuperar esos valores, eliminar claves y detectar si algo está almacenado en una clave. Los objetos <code>Map</code>, sin embargo, tienen algunas ventajas más que los hacen mejores mapas.</p> + +<ul> + <li>Las claves de un <code>Object</code> son {{JSxRef("Global_Objects/String", "Cadenas")}} o {{JSxRef("Global_Objects/Symbol", "Símbolos")}}, donde pueden tener cualquier valor para un <code>Map</code>.</li> + <li>Puedes obtener el <code>size</code> de un <code>Map</code> fácilmente, mientras que tienes que realizar un seguimiento manual del tamaño de un <code>Object</code>.</li> + <li>La iteración de mapas está en el orden de inserción de los elementos.</li> + <li>Un <code>Object</code> tiene un prototipo, por lo que hay claves predeterminadas en el mapa. (Esto se puede omitir usando <code>map = Object.create(null)</code>).</li> +</ul> + +<p>Estos tres consejos te pueden ayudar a decidir si usar un <code>Map</code> o un <code>Object</code>:</p> + +<ul> + <li>Usa mapas sobre objetos cuando las claves sean desconocidas hasta el momento de la ejecución, y cuando todas las claves sean del mismo tipo y todos los valores sean del mismo tipo.</li> + <li>Utiliza mapas si es necesario almacenar valores primitivos como claves porque el objeto trata cada clave como una cadena, ya sea un valor numérico, un valor booleano o cualquier otro valor primitivo.</li> + <li>Usa objetos cuando haya lógica que opere en elementos individuales.</li> +</ul> + +<h3 id="El_objeto_WeakMap">El objeto <code>WeakMap</code></h3> + +<p>El objeto {{JSxRef("WeakMap")}} es una colección de pares clave/valor en la que las <strong>claves solo son objetos</strong> y los valores pueden ser valores arbitrarios. Las referencias de objeto en las claves se mantienen <em>débilmente</em>, lo que significa que son un objetivo de recolección de basura (GC por <em>Garbage Collection</em>) si ya no hay otra referencia al objeto. La API de <code>WeakMap</code> es la misma que la API de <code>Map</code>.</p> + +<p>Una diferencia con los objetos <code>Map</code> es que las claves en <code>WeakMap</code> no son enumerables (es decir, no hay ningún método que te proporcione una lista de las claves). Si lo hubiera, la lista dependería del estado de la recolección de basura, introduciendo el no determinismo.</p> + +<p>Para obtener más información y código de ejemplo, consulta también "¿Por qué mapa <em>Débil</em>?" en la página de referencia de {{JSxRef("WeakMap")}}.</p> + +<p>Un caso de uso de los objetos <code>WeakMap</code> es almacenar datos privados para un objeto u ocultar detalles de implementación. El siguiente ejemplo es de la publicación del blog de Nick Fitzgerald <a href="http://fitzgeraldnick.com/weblog/53/">"Ocultar detalles de implementación con WeakMaps de ECMAScript 6"</a>. Los datos y métodos privados pertenecen al objeto y se almacenan en <code><var>privates</var></code> del objeto <code>WeakMap</code>. Todo lo expuesto en la instancia y el prototipo es público; todo lo demás es inaccesible desde el mundo exterior porque <code><var>privates</var></code> no se exporta desde el módulo.</p> + +<pre class="brush: js notranslate">const privates = new WeakMap(); + +function Public() { + const me = { + // Los datos privados van aquí + }; + privates.set(this, me); +} + +Public.prototype.method = function () { + const me = privates.get(this); + // Hacer cosas con datos privados en `me`... +}; + +module.exports = Public;</pre> + +<h2 id="Sets"><code>Sets</code></h2> + +<h3 id="El_objeto_Set">El objeto <code>Set</code></h3> + +<p>Los objetos {{JSxRef("Set")}} son colecciones de valores. Puedes iterar sus elementos en el orden en que se insertaron. Un valor en un <code>Set</code> solo puede aparecer una vez; es único en la colección del <code>Set</code>.</p> + +<p>El siguiente código muestra algunas operaciones básicas con un <code>Set</code>. Además, consulta la página de referencia de {{JSxRef("Set")}} para obtener más ejemplos y la API completa.</p> + +<pre class="brush: js notranslate">let mySet = new Set(); +mySet.add(1); +mySet.add('algún texto'); +mySet.add('foo'); + +mySet.has(1); // true +mySet.delete('foo'); +mySet.size; // 2 + +for (let item of mySet) console.log(item); +// 1 +// "algún texto" +</pre> + +<h3 id="Conversión_entre_arreglo_y_Set">Conversión entre arreglo y <code>Set</code></h3> + +<p>Puedes crear un {{JSxRef("Array")}} a partir de un <code>Set</code> usando {{JSxRef("Array.from")}} o el {{JSxRef("Operators/Spread_operator", "operador de propagación")}}. Además, el constructor <code>Set</code> acepta un <code>Array</code> para convertirlo en la otra dirección.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Recuerda que los objetos <code>Set</code> almacenan <em>valores únicos</em>, por lo que cualquier elemento duplicado de un arreglo se elimina al realizar la conversión.</p> +</div> + +<pre class="brush: js notranslate">Array.from(mySet); +[...mySet2]; + +mySet2 = new Set([1, 2, 3, 4]); +</pre> + +<h3 id="Comparar_Array_y_Set">Comparar <code>Array</code> y <code>Set</code></h3> + +<p>Tradicionalmente en muchas situaciones, un conjunto de elementos se ha almacenado en arreglos de JavaScript. Sin embargo, el nuevo objeto <code>Set</code> tiene algunas ventajas:</p> + +<ul> + <li>Eliminar elementos <code>Array</code> por valor (<code>arr.splice(arr.indexOf(val), 1)</code>) es muy lento.</li> + <li>Los objetos <code>Set</code> te permiten eliminar elementos por su valor. Con un arreglo, tendrías que empalmar (con <code>splice</code>) en función del índice de un elemento.</li> + <li>El valor {{JSxRef("NaN")}} no se puede encontrar con <code>indexOf</code> en un arreglo.</li> + <li>Los objetos <code>Set</code> almacenan valores únicos. No es necesario que realices un seguimiento manual de los duplicados.</li> +</ul> + +<h3 id="El_objeto_WeakSet">El objeto <code>WeakSet</code></h3> + +<p>Los objetos {{JSxRef("WeakSet")}} son colecciones de objetos. Un objeto en el <code>WeakSet</code> solo puede aparecer una vez. Es único en la colección <code>WeakSet</code> y los objetos no son enumerables.</p> + +<p>Las principales diferencias con el objeto {{JSxRef("Set")}} son:</p> + +<ul> + <li>A diferencia de los <code>Sets</code>, los <code>WeakSets</code> son <strong>colecciones <em>únicamente</em> de <em>objetos</em></strong> y no de valores arbitrarios de cualquier tipo.</li> + <li>El <code>WeakSet</code> es <em>débil</em>: Las referencias a los objetos de la colección se mantienen débiles. Si no hay otra referencia a un objeto almacenado en el <code>WeakSet</code>, pueden ser recolectados como basura. Eso también significa que no hay una lista de objetos actualmente almacenados en la colección. Los <code>WeakSets</code> no se pueden enumerar.</li> +</ul> + +<p>Los casos de uso de los objetos <code>WeakSet</code> son limitados. No perderán memoria, por lo que puede ser seguro usar elementos DOM como clave y marcarlos con fines de seguimiento, por ejemplo.</p> + +<h2 id="Igualdad_de_clave_y_valor_de_Map_y_Set">Igualdad de clave y valor de <code>Map</code> y <code>Set</code></h2> + +<p>Tanto la igualdad de claves de los objetos <code>Map</code> como la igualdad de valores de los objetos <code>Set</code> se basan en "<a href="https://tc39.github.io/ecma262/#sec-samevaluezero">algoritmo del mismo valor cero</a>":</p> + +<ul> + <li>La igualdad funciona como el operador de comparación de identidad <code>===</code>.</li> + <li><code>-0</code> y <code>+0</code> se consideran iguales.</li> + <li>{{JSxRef("NaN")}} se considera igual a sí mismo (al contrario de <code>===</code>).</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p> diff --git a/files/es/web/javascript/guide/meta_programming/index.html b/files/es/web/javascript/guide/meta_programming/index.html new file mode 100644 index 0000000000..a51ee5559f --- /dev/null +++ b/files/es/web/javascript/guide/meta_programming/index.html @@ -0,0 +1,305 @@ +--- +title: Metaprogramación +slug: Web/JavaScript/Guide/Meta_programming +tags: + - ECMAScript 2015 + - Guía + - JavaScript + - Proxy + - Reflejar + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Meta_programming +--- +<div>{{jsSidebar("Guía de JavaScript")}}{{PreviousNext("Web/JavaScript/Guide/Iterators_and_Generators", "Web/JavaScript/Guide/Modules")}}</div> + +<p class="summary">A partir de ECMAScript 2015, JavaScript gana soporte para los objetos {{jsxref("Proxy")}} y {{jsxref("Reflect")}} lo cual te permite interceptar y definir un comportamiento personalizado para las operaciones fundamentales del lenguaje (por ejemplo, búsqueda de propiedades, asignación, enumeración, invocación de funciones, etc.). Con la ayuda de estos dos objetos, puedes programar en el metanivel de JavaScript.</p> + +<h2 id="Proxies">Proxies</h2> + +<p>Introducidos en ECMAScript 6, los objetos {{jsxref("Proxy")}} te permiten interceptar ciertas operaciones e implementar comportamientos personalizados.</p> + +<p>Por ejemplo, obtener una propiedad sobre un objeto:</p> + +<pre class="brush: js notranslate">let <var>handler</var> = { + get: function(<var>target</var>, name) { + return name in <var>target</var>? <var>target</var>[name] : 42 + } +} + +let p = new Proxy({}, <var>handler</var>) +p.a = 1 +console.log(p.a, p.b) // 1, 42 +</pre> + +<p>El objeto <code>Proxy</code> define un <dfn><code><var>target</var></code></dfn> (un objeto vacío aquí) y un objeto <dfn><code><var>handler</var></code></dfn>, en el que se implementa un <code>get</code> <dfn>trap</dfn>. Aquí, un objeto que es proxy no devolverá <code>undefined</code> cuando obtenga propiedades indefinidas, sino que devolverá el número <code>42</code>.</p> + +<p>Hay ejemplos adicionales disponibles en la página de referencia {{jsxref("Proxy")}}.</p> + +<h3 id="Terminología">Terminología</h3> + +<p>Los siguientes términos se utilizan cuando se habla de la funcionalidad de los proxies.</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler","handler","","true")}}</dt> + <dd>Objeto marcador de posición que contiene trampas.</dd> + <dt>traps</dt> + <dd>Los métodos que proporcionan acceso a la propiedad. (Esto es análogo al concepto de <em>trampas</em> en los sistemas operativos).</dd> + <dt>target</dt> + <dd>Objeto que virtualiza el proxy. A menudo se utiliza como interfaz de administración de almacenamiento para el proxy. Las invariantes (semántica que permanece sin cambios) con respecto a la no extensibilidad del objeto o las propiedades no configurables se verifican con el <code>target</code>.</dd> + <dt>invariants</dt> + <dd>La semántica que permanece sin cambios al implementar operaciones personalizadas se denominan <em>invariants</em>. Si violas las invariantes de un controlador, se lanzará un {{jsxref("TypeError")}}.</dd> +</dl> + +<h2 id="Controladores_y_trampas">Controladores y trampas</h2> + +<p>La siguiente tabla resume las trampas disponibles para los objetos <code>Proxy</code>. Ve las <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">páginas de referencia</a> para explicaciones detalladas y ejemplos.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Controlador/Trampa</th> + <th>Intercepciones</th> + <th>Invariantes</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</td> + <td>{{jsxref("Object.getPrototypeOf()")}}<br> + {{jsxref("Reflect.getPrototypeOf()")}}<br> + {{jsxref("Object/proto", "__proto__")}}<br> + {{jsxref("Object.prototype.isPrototypeOf()")}}<br> + {{jsxref("Operators/instanceof", "instanceof")}}</td> + <td> + <ul> + <li>El método <code>getPrototypeOf</code> regresa un objeto o <code>null</code>.</li> + <li>Si <code><var>target</var></code> no es extensible, el método <code>Object.getPrototypeOf(<var>proxy</var>)</code> debe devolver el mismo valor que <code>Object.getPrototypeOf(<var>target</var>)</code>.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</td> + <td>{{jsxref("Object.setPrototypeOf()")}}<br> + {{jsxref("Reflect.setPrototypeOf()")}}</td> + <td>Si <code><var>target</var></code> no es extensible, el parámetro <code>prototype</code> debe tener el mismo valor que <code>Object.getPrototypeOf(<var>target</var>)</code>.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/is Extensible", "handler.isExtensible()")}}</td> + <td>{{jsxref("Object.isExtensible()")}}<br> + {{jsxref("Reflect.isExtensible()")}}</td> + <td><code>Object.isExtensible(<var>proxy</var>)</code> debe devolver el mismo valor que <code>Object.isExtensible(<var>target</var>)</code>.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</td> + <td>{{jsxref("Object.preventExtensions()")}}<br> + {{jsxref("Reflect.preventExtensions()")}}</td> + <td><code>Object.preventExtensions(<var>proxy</var>)</code> solo devuelve <code>true</code> si <code>Object.isExtensible(<var>proxy</var>)</code> es <code>false</code>.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</td> + <td>{{jsxref("Object.getOwnPropertyDescriptor()")}}<br> + {{jsxref("Reflect.getOwnPropertyDescriptor()")}}</td> + <td> + <ul> + <li><code>getOwnPropertyDescriptor</code> debe devolver un objeto o <code>undefined</code>.</li> + <li>Una propiedad no se puede reportar como inexistente si existe como una propiedad propia no configurable de <code><var>target</var></code>.</li> + <li>Una propiedad no se puede reportar como inexistente si existe como propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li> + <li>Una propiedad no se puede reportar como existente si no existe como una propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li> + <li>No se puede reportar una propiedad como no configurable si no existe como propiedad propia de <code><var>target</var></code> o si existe como propiedad propia configurable de <code><var>target</var></code>.</li> + <li>El resultado de <code>Object.getOwnPropertyDescriptor(<var>target</var>)</code> se puede aplicar a <code><var>target</var></code> usando <code>Object.defineProperty</code> y no lanzará una excepción.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</td> + <td>{{jsxref("Object.defineProperty()")}}<br> + {{jsxref("Reflect.defineProperty()")}}</td> + <td> + <ul> + <li>No se puede agregar una propiedad si <code><var>target</var></code> no es extensible.</li> + <li>Una propiedad no se puede agregar como (o modificar para ser) no configurable si no existe como una propiedad propia no configurable de <code><var>target</var></code>.</li> + <li>Una propiedad no puede ser no configurable si existe una propiedad configurable correspondiente de <code><var>target</var></code>.</li> + <li>Si una propiedad tiene una propiedad de objeto <code>target</code> correspondiente, entonces <code>Object.defineProperty(<var>target</var>, <var>prop</var>, <var>descriptor</var>)</code> no lanzará una excepción.</li> + <li>En modo estricto, un valor <code>false</code> devuelto por el controlador <code>defineProperty</code> lanzará una excepción {{jsxref("TypeError")}}.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</td> + <td> + <dl> + <dt>Consulta de propiedad</dt> + <dd><code>foo in proxy</code></dd> + <dt>Consulta de propiedad heredada</dt> + <dd><code>foo in Object.create(<var>proxy</var>)</code><br> + {{jsxref("Reflect.has()")}}</dd> + </dl> + </td> + <td> + <ul> + <li>Una propiedad no se puede reportar como inexistente, si existe como una propiedad propia no configurable de <code><var>target</var></code>.</li> + <li>Una propiedad no se puede reportar como inexistente si existe como propiedad propia de <code><var>target</var></code> y <code><var>target</var></code> no es extensible.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</td> + <td> + <dl> + <dt>Acceso a la propiedad</dt> + <dd><code><var>proxy</var>[foo]</code><br> + <code><var>proxy</var>.bar</code></dd> + <dt>Acceso a propiedad heredada</dt> + <dd><code>Object.create(<var>proxy</var>)[foo]</code><br> + {{jsxref("Reflect.get()")}}</dd> + </dl> + </td> + <td> + <ul> + <li>El valor reportado para una propiedad debe ser el mismo que el valor de la propiedad <code><var>target</var></code> correspondiente si la propiedad de <code><var>target</var></code> es una propiedad de datos de solo lectura y no es configurable.</li> + <li>El valor reportado para una propiedad debe ser <code>undefined</code> si la propiedad <code><var>target</var></code> correspondiente es una propiedad de acceso no configurable que tiene <code>undefined</code> como su atributo <code>[[Get]]</code>.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</td> + <td> + <dl> + <dt>Asignación de propiedad</dt> + <dd><code><var>proxy</var>[foo] = bar</code><br> + <code><var>proxy</var>.foo = bar</code></dd> + <dt>Asignación de propiedad heredada</dt> + <dd><code>Object.create(<var>proxy</var>)[foo] = bar</code><br> + {jsxref("Reflect.set()")}}</dd> + </dl> + </td> + <td> + <ul> + <li>No se puede cambiar el valor de una propiedad para que sea diferente del valor de la propiedad <code><var>target</var></code> correspondiente si la propiedad <code><var>target</var></code> correspondiente es una propiedad de datos de solo lectura y no es configurable.</li> + <li>No se puede establecer el valor de una propiedad si la propiedad <code><var>target</var></code> correspondiente es una propiedad de acceso no configurable que tiene <code>undefined</code> como su atributo <code>[[Get]]</code>.</li> + <li>En modo estricto, un valor de retorno <code>false</code> del controlador <code>set</code> arrojará una excepción {{jsxref("TypeError")}}.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</td> + <td> + <dl> + <dt>Eliminación de propiedad</dt> + <dd><code>delete <var>proxy</var>[foo]</code><br> + <code>delete <var>proxy</var>.foo</code><br> + {{jsxref("Reflect.deleteProperty()")}}</dd> + </dl> + </td> + <td>Una propiedad no se puede eliminar si existe como una propiedad propia no configurable de <code><var>target</var></code>.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}</td> + <td> + <dl> + <dt>Enumeración de propiedad/<code>for...in</code>:</dt> + <dd><code>for (let name in <var>proxy</var>) {...}</code><br> + {{jsxref("Reflect.enumerate()")}}</dd> + </dl> + </td> + <td>El método <code>enumerate</code> debe devolver un objeto.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</td> + <td>{{jsxref("Object.getOwnPropertyNames()")}}<br> + {{jsxref("Object.getOwnPropertySymbols()")}}<br> + {{jsxref("Object.keys()")}}<br> + {{jsxref("Reflect.ownKeys()")}}</td> + <td> + <ul> + <li>El resultado de <code>ownKeys</code> es una lista.</li> + <li>El Tipo de cada elemento de la Lista de resultados es {{jsxref("String")}} o {{jsxref("Symbol")}}.</li> + <li>La Lista de resultados debe contener las claves de todas las propiedades propias no configurables de <code><var>target</var></code>.</li> + <li>Si el objeto <code><var>target</var></code> no es extensible, entonces la Lista de resultados debe contener todas las claves de las propiedades propias de <code><var>target</var></code> y ningún otro valor.</li> + </ul> + </td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</td> + <td><code>proxy(..args)</code><br> + {{jsxref("Function.prototype.apply()")}} y {{jsxref("Function.prototype.call()")}}<br> + {{jsxref("Reflect.apply()")}}</td> + <td>No hay invariantes para el método <code><var>handler</var>.apply</code>.</td> + </tr> + <tr> + <td>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</td> + <td><code>new proxy(...args)</code><br> + {{jsxref("Reflect.construct()")}}</td> + <td>El resultado debe ser un <code>Objeto</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Proxy_revocable"><code>Proxy</code> revocable</h2> + +<p>El método {{jsxref ("Proxy.revocable()")}} se usa para crear un objeto <code>Proxy</code> revocable. Esto significa que el proxy se puede revocar mediante la función <code>revoke</code> y apagar el proxy.</p> + +<p>Posteriormente, cualquier operación en el proxy conduce a un {{jsxref("TypeError")}}.</p> + +<pre class="brush: js notranslate">let revocable = Proxy.revocable({}, { + get: function(target, name) { + return '[[' + name + ']]' + } +}) +let proxy = revocable.proxy +console.log(proxy.foo) // "[[foo]]" + +revocable.revoke() + +console.log(proxy.foo) // Lanza TypeError +proxy.foo = 1 // TypeError nuevamente +delete proxy.foo // todavía TypeError +typeof proxy // "object", typeof no activa ninguna trampa +</pre> + +<h2 id="Reflexión">Reflexión</h2> + +<p>{{jsxref("Reflect")}} es un objeto integrado que proporciona métodos para operaciones JavaScript interceptables. Los métodos son los mismos que los de {{jsxref ("Global_Objects/Proxy/handler", "proxy handlers", "", "true")}}.</p> + +<p><code>Reflect</code> no es un objeto función.</p> + +<p><code>Reflect</code> ayuda con el reenvío de las operaciones predeterminadas del controlador al <code><var>target</var></code>.</p> + +<p>Con {{jsxref("Reflect.has()")}} por ejemplo, obtienes el operador <a href="/es/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a> como función:</p> + +<pre class="brush: js notranslate">Reflect.has(Object, 'assign') // true +</pre> + +<h3 id="Una_mejor_función_apply">Una mejor función <code>apply</code></h3> + +<p>En ES5, normalmente usas el método {{jsxref("Function.prototype.apply()")}} para llamar a una función con un valor <code>this</code> y <code><var>arguments</var></code> proporcionado como un arreglo (o un <a href="/es/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">objeto similar a un arreglo</a>).</p> + +<pre class="brush: js notranslate">Function.prototype.apply.call(Math.floor, undefined, [1.75]) +</pre> + +<p>Con {{jsxref("Reflect.apply")}} esto se vuelve menos detallado y más fácil de entender:</p> + +<pre class="brush: js notranslate">Reflect.apply(Math.floor, undefined, [1.75]); +// 1; + +Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111]); +// "hola" + +Reflect.apply(RegExp.prototype.exec, /ab/, ["confabulation"]).index; +// 4 + +Reflect.apply("".charAt, "ponies", [3]); +// "i" +</pre> + +<h3 id="Comprobando_si_la_definición_de_la_propiedad_ha_sido_exitosa">Comprobando si la definición de la propiedad ha sido exitosa</h3> + +<p>Con {{jsxref("Object.defineProperty")}}, que devuelve un objeto si tiene éxito, o arroja un {{jsxref("TypeError")}} de lo contrario, usaría un bloque {{jsxref("Statements/try...catch", "try...catch")}} para detectar cualquier error que haya ocurrido al definir una propiedad. Debido a que {{jsxref("Reflect.defineProperty")}} devuelve un estado de éxito booleano, aquí puedes usar un bloque {{jsxref("Statements/if...else", "if...else")}}:</p> + +<pre class="brush: js notranslate">if (Reflect.defineProperty(target, property, attributes)) { + // éxito +} else { + // fracaso +}</pre> + +<p>{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}</p> diff --git a/files/es/web/javascript/guide/módulos/index.html b/files/es/web/javascript/guide/módulos/index.html new file mode 100644 index 0000000000..eacc6835f6 --- /dev/null +++ b/files/es/web/javascript/guide/módulos/index.html @@ -0,0 +1,458 @@ +--- +title: Módulos JavaScript +slug: Web/JavaScript/Guide/Módulos +tags: + - Guía + - JavaScript + - Modules + - Módulos + - export + - import +translation_of: Web/JavaScript/Guide/Modules +--- +<div>{{JSSidebar("Guía de JavaScript")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}</div> + +<p>Esta guía te brinda todo lo que necesitas para comenzar con la sintaxis de los módulos JavaScript.</p> + +<h2 id="Un_antecedente_sobre_módulos">Un antecedente sobre módulos</h2> + +<p>Los programas JavaScript comenzaron siendo bastante pequeños — la mayor parte de su uso en los primeros días era para realizar tareas de scripting aisladas, proporcionando un poco de interactividad a tus páginas web donde fuera necesario, por lo que generalmente no se necesitaban grandes scripts. Avancemos unos años y ahora tenemos aplicaciones completas que se ejecutan en navegadores con mucho JavaScript, JavaScript ahora se usa en otros contextos (<a href="/es/docs/Glossary/Node.js">Node.js</a>, por ejemplo).</p> + +<p>Por lo tanto, en los últimos años se ha comenzado a pensar en proporcionar mecanismos para dividir programas JavaScript en módulos separados que se puedan importar cuando sea necesario. Node.js ha tenido esta capacidad durante mucho tiempo, y hay una serie de bibliotecas y marcos de JavaScript que permiten el uso de módulos (por ejemplo, <a href="https://en.wikipedia.org/wiki/CommonJS">CommonJS</a> y <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md">AMD</a> otros basados en sistemas de módulos como <a href="https://requirejs.org/">RequireJS</a>, y recientemente <a href="https://webpack.github.io/">Webpack</a> y <a href="https://babeljs.io/">Babel</a>).</p> + +<p>La buena noticia es que los navegadores modernos han comenzado a admitir la funcionalidad de los módulos de forma nativa, y de esto se trata este artículo. Esto solo puede ser algo bueno — los navegadores pueden optimizar la carga de módulos, haciéndolo más eficiente que tener que usar una biblioteca y hacer todo ese procesamiento adicional de lado del cliente, ahorrando viajes de ida y vuelta adicionales.</p> + +<h2 id="Soporte_del_navegador">Soporte del navegador</h2> + +<p>El uso de módulos JavaScript nativos depende de las declaraciones {{jsxref("Statements/import", "import")}} y {{jsxref("Statements/export", "export")}}; estas son compatibles con los navegadores de la siguiente manera:</p> + +<h3 id="import">import</h3> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h3 id="export">export</h3> + +<p>{{Compat("javascript.statements.export")}}</p> + +<h2 id="Introducción_—_un_ejemplo">Introducción — un ejemplo</h2> + +<p>Para demostrar el uso de módulos, hemos creado un <a href="https://github.com/mdn/js-examples/tree/master/modules">sencillo conjunto de ejemplos</a> que puedes encontrar en GitHub. Estos ejemplos demuestran un sencillo conjunto de módulos que crean un elemento <a href="/es/docs/Web/HTML/Element/canvas" title="Usa el elemento ↑<canvas>↓ de HTML con el scripting de la API de canvas o la API WebGL para dibujar gráficos y animaciones."><code><canvas></code></a> en una página web, y luego dibujan (y reportan información sobre) diferentes formas en el lienzo.</p> + +<p>Estos son bastante triviales, pero se han mantenido deliberadamente simples para demostrar los módulos con claridad.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si deseas descargar los ejemplos y ejecutarlos localmente, deberás ejecutarlos a través de un servidor web local.</p> +</div> + +<h2 id="Estructura_básica_de_los_ejemplos">Estructura básica de los ejemplos</h2> + +<p>En nuestro primer ejemplo (ve <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) tenemos la siguiente estructura de archivos:</p> + +<pre class="notranslate">index.html +main.js +modules/ + canvas.js + square.js</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Todos los ejemplos de esta guía básicamente tienen la misma estructura; lo anterior debería empezar a resultarte bastante familiar.</p> +</div> + +<p>Los dos módulos del directorio <code>modules</code> se describen a continuación:</p> + +<ul> + <li><code>canvas.js</code> — contiene funciones relacionadas con la configuración del lienzo (<code>canvas</code>): + + <ul> + <li><code>create()</code> — crea un lienzo (<code>canvas</code>) con un <code>width</code> y <code>height</code> especificados dentro de un contenedor <a href="/es/docs/Web/HTML/Element/div" title='El elemento ↑div↑ de HTML con ↑id="content"↓ es el contenedor genérico para el flujo de contenido. No tiene ningún efecto en el contenido o el diseño hasta que se le aplica estilo usando CSS.'><code><div></code></a> con un ID especificado, que a su vez se añade dentro de un elemento padre especificado. Devuelve un objeto que contiene el contexto 2D del lienzo y el ID del contenedor.</li> + <li><code>createReportList()</code> — crea una lista desordenada adjunta dentro de un elemento contenedor específico, que se puede usar para generar datos de informes. Devuelve el ID de la lista.</li> + </ul> + </li> + <li><code>square.js</code> — contiene: + <ul> + <li><code>name</code> — una constante que contiene la cadena 'square'.</li> + <li><code>draw()</code> — dibuja una figura cuadrada en un lienzo específico, con un tamaño, posición y color específicos. Devuelve un objeto que contiene el tamaño, la posición y el color del cuadrado.</li> + <li><code>reportArea()</code> — escribe el área de un cuadrado en una lista de informes específica, dada su longitud.</li> + <li><code>reportPerimeter()</code> — escribe el perímetro de un cuadrado en una lista de informes específica, dada su longitud.</li> + </ul> + </li> +</ul> + +<h2 id="Reflexión_—_.mjs_versus_.js">Reflexión — <code>.mjs</code> versus <code>.js</code></h2> + +<p>A través de este artículo, usaremos extensiones <code>.js</code> para nuestros archivos de módulo, pero en otros recursos, puedes ver que en su lugar se usa la extensión <code>.mjs</code>. <a href="https://v8.dev/features/modules#mjs">La documentación de V8 recomienda esto</a>, por ejemplo. Las razones dadas son:</p> + +<ul> + <li>Es bueno por claridad, es decir, deja claro qué archivos son módulos y cuáles JavaScript.</li> + <li>Asegura que tus archivos de módulo sean analizados como un módulo por los entornos de ejecución como <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a> y herramientas de compilación como <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li> +</ul> + +<p>Sin embargo, decidimos seguir usando <code>.js</code>, al menos por el momento. Para que los módulos funcionen correctamente en un navegador, debes asegurarte de que tu servidor los esté sirviendo con un encabezado <code>Content-Type</code> que contenga un tipo MIME de JavaScript como <code>text/javascript</code>. Si no lo haces, obtendrás un estricto error de verificación de tipo MIME como "El servidor respondió con un tipo MIME que no es JavaScript" y el navegador no ejecutará tu JavaScript. La mayoría de los servidores ya configuran el tipo correcto para archivos <code>.js</code>, pero todavía no para archivos <code>.mjs</code>. Los servidores que ya sirven archivos <code>.mjs</code> incluyen <a href="https://pages.github.com/">GitHub Pages</a> y <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> para Node.js.</p> + +<p>Esto está bien si ya estás utilizando un entorno de este tipo, o si no, pero sabes lo que estás haciendo y tiene acceso (es decir, puedes configurar tu servidor para establecer el <code><a href="/es/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para archivos <code>.mjs</code>). Sin embargo, podría causar confusión si no controlas el servidor desde el que estás sirviendo archivos, o si estás publicando archivos para uso público, como lo hacemos aquí.</p> + +<p>Por motivos de aprendizaje y portabilidad, decidimos mantenernos en <code>.js</code>.</p> + +<p>Si realmente valoras la claridad de usar <code>.mjs</code> para módulos en lugar de usar <code>.js</code> para archivos JavaScript "normales", pero no quieres encontrarte con el problema descrito anteriormente, siempre puedes usar <code>.mjs</code> durante el desarrollo y convertirlos a <code>.js</code> durante tu paso de compilación.</p> + +<p>También vale la pena señalar que:</p> + +<ul> + <li>Es posible que algunas herramientas nunca admitan <code>.mjs</code>, tal como <a href="https://www.typescriptlang.org/">TypeScript</a>.</li> + <li>El atributo <code><script type="module"></code> se usa para indicar cuándo se está apuntando a un módulo, como verás a continuación.</li> +</ul> + +<h2 id="Exportar_características_del_módulo">Exportar características del módulo</h2> + +<p>Lo primero que debes hacer para acceder a las funciones del módulo es exportarlas. Esto se hace usando la declaración {{jsxref("Statements/export", "export")}}.</p> + +<p>La forma más sencilla de utilizarla es colocarla delante de cualquier elemento que desees exportar fuera del módulo, por ejemplo:</p> + +<pre class="brush: js; notranslate">export const name = 'square'; + +export function draw(ctx, length, x, y, color) { + ctx.fillStyle = color; + ctx.fillRect(x, y, length, length); + + return { + length: length, + x: x, + y: y, + color: color + }; +}</pre> + +<p>Puedes exportar funciones, <code>var</code>, <code>let</code>, <code>const</code> y, como veremos más adelante — clases. Deben ser elementos de nivel superior; no puedes usar <code>export</code> dentro de una función, por ejemplo.</p> + +<p>Una forma más conveniente de exportar todos los elementos que deseas exportar es usar una sola declaración de exportación al final de tu archivo de módulo, seguida de una lista separada por comas de las características que deseas exportar entre llaves. Por ejemplo:</p> + +<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> + +<h2 id="Importación_de_características_en_tu_script">Importación de características en tu script</h2> + +<p>Una vez que hayas declarado las funciones y características que deseas exportar de tu módulo, debes importarlas en tu script para poder usarlas. La forma más sencilla de hacerlo es la siguiente:</p> + +<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> + +<p>Utiliza la declaración {{jsxref("Statements/import", "import")}}, seguida de una lista separada por comas de las características que deseas importar entre llaves, seguida de la palabra clave <code>from</code>, seguida de la ruta al archivo del módulo — una ruta relativa a la raíz del sitio, que para nuestro ejemplo de <code>basic-modules</code> sería <code>/js-examples/modules/basic-modules</code>.</p> + +<p>Sin embargo, hemos escrito la ruta de manera un poco diferente — estamos usando la sintaxis de punto (<code>.</code>) para significar "la ubicación actual", seguida de la ruta más allá del archivo que estamos tratando de encontrar. Esto es mucho mejor que escribir la ruta relativa completa cada vez, ya que es más corta y hace que la URL sea portátil — el ejemplo seguirá funcionando si lo mueve a una ubicación diferente en la jerarquía del sitio.</p> + +<p>Así por ejemplo:</p> + +<pre class="notranslate">/js-examples/modules/basic-modules/modules/square.js</pre> + +<p>se convierte en</p> + +<pre class="notranslate">./modules/square.js</pre> + +<p>Puedes ver estas líneas en acción en <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En algunos sistemas de módulos, puedes omitir la extensión del archivo y el punto (por ejemplo, <code>'/modules/square'</code>). Esto no funciona en módulos de JavaScript nativos.</p> +</div> + +<p>Una vez que hayas importado las funciones a tu script, las puedes usar tal como se definieron dentro del mismo archivo. Lo siguiente se encuentra en <code>main.js</code>, debajo de las líneas <code>import</code>:</p> + +<pre class="brush: js; notranslate">let myCanvas = create('myCanvas', document.body, 480, 320); +let reportList = createReportList(myCanvas.id); + +let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue'); +reportArea(square1.length, reportList); +reportPerimeter(square1.length, reportList); +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aunque las funciones importadas están disponibles en el archivo, son vistas de solo lectura de la función que se exportó. No puedes cambiar la variable que se importó, pero aún puedes modificar propiedades similares a <code>const</code>. Además, estas características se importan como enlaces activos, lo cual significa que pueden cambiar de valor incluso si no puedes modificar el enlace a diferencia de <code>const</code>.</p> +</div> + +<h2 id="Aplicar_el_módulo_a_tu_HTML">Aplicar el módulo a tu HTML</h2> + +<p>Ahora solo necesitamos aplicar el módulo <code>main.js</code> a nuestra página HTML. Esto es muy similar a cómo aplicamos un script normal a una página, con algunas diferencias notables.</p> + +<p>En primer lugar, debes incluir <code>type="module"</code> en el elemento <a href="/es/docs/Web/HTML/Element/script" title="El elemento ↑<script>↓ de HTML se utiliza para incrustar o hacer referencia al código ejecutable; esto se usa normalmente para incrustar o hacer referencia a código JavaScript."><code><script></code></a>, para declarar este script como un módulo. Para importar el script <code>main.js</code>, usamos esto:</p> + +<pre class="brush: html; no-line-numbers notranslate"><script type="module" src="main.js"></script></pre> + +<p>También puedes incrustar el script del módulo directamente en el archivo HTML colocando el código JavaScript dentro del cuerpo del elemento <code><script></code>:</p> + +<pre class="brush: js notranslate"><script type="module"> + /* El código del módulo JavaScript va aquí */ +</script></pre> + +<p>El script en el que importas las características del módulo básicamente actúa como el módulo de nivel superior. Si lo omite, Firefox, por ejemplo, te da un error de "SyntaxError: Las declaraciones import solo pueden aparecer en el nivel superior de un módulo".</p> + +<p>Solo puede usar instrucciones <code>import</code> y <code>export</code> dentro de los módulos, no en scripts normales.</p> + +<h2 id="Otras_diferencias_entre_módulos_y_scripts_estándar">Otras diferencias entre módulos y scripts estándar</h2> + +<ul> + <li>Debes prestar atención a las pruebas locales — si intentas cargar el archivo HTML localmente (es decir, con una URL <code>file:///</code>), te encontrarás con errores de CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor.</li> + <li>Además, ten en cuenta que puedes obtener un comportamiento diferente de las secciones del script definidas dentro de los módulos en comparación con los scripts estándar. Esto se debe a que los módulos automáticamente usan {{jsxref("Strict_mode", "strict mode", "", 1)}}.</li> + <li>No es necesario utilizar el atributo <code>defer</code> (ve <a href="/es/docs/Web/HTML/Element/script#Attributes" title="El elemento ↑<script>↓ de HTML se utiliza para incrustar o hacer referencia al código ejecutable; esto se usa normalmente para incrustar o hacer referencia a código JavaScript."> atributos de <code><script></code></a>) al cargar un script de módulo; los módulos se difieren automáticamente.</li> + <li>Los módulos solo se ejecutan una vez, incluso si se les ha hecho referencia en varias etiquetas <code><script></code>.</li> + <li>Por último, pero no menos importante, dejemos esto en claro — las características del módulo se importan al alcance de un solo script — no están disponibles en el alcance global. Por lo tanto, solo podrás acceder a las funciones importadas en el script en el que se importan y no podrás acceder a ellas desde la consola de JavaScript, por ejemplo. Seguirás recibiendo errores de sintaxis en DevTools, pero no podrás utilizar algunas de las técnicas de depuración que esperabas utilizar.</li> +</ul> + +<h2 id="Exportaciones_predeterminadas_vs._exportaciones_con_nombre">Exportaciones predeterminadas vs. exportaciones con nombre</h2> + +<p>La funcionalidad que hemos exportado hasta ahora se compone de <strong>exportaciones con nombre</strong> — cada elemento (ya sea una función, <code>const</code>, etc.) se ha denominado por su nombre en <code>export</code>, y ese nombre también se ha utilizado para referirse a él en <code>import</code>.</p> + +<p>También hay un tipo de exportación llamado <strong>exportación predeterminada</strong> — está diseñado para facilitar que un módulo proporcione una función predeterminada, y también ayuda a los módulos JavaScript a interoperar con los sistemas de módulos CommonJS y AMD existentes (como se explica muy bien en <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 en profundidad: módulos</a> de Jason Orendorff; busca "Exportaciones predeterminadas").</p> + +<p>Veamos un ejemplo mientras explicamos cómo funciona. En nuestros ↑basic-modules↓ <code>square.js</code> puedes encontrar una función llamada <code>randomSquare()</code> que crea un cuadrado con un color, tamaño y posición aleatorios. Lo queremos exportar como nuestro predeterminado, por lo que en la parte inferior del archivo escribimos esto:</p> + +<pre class="brush: js; notranslate">export default randomSquare;</pre> + +<p>Ten en cuenta la falta de llaves.</p> + +<p>En su lugar, podríamos anteponer <code>export default</code> a la función y definirla como una función anónima, así:</p> + +<pre class="brush: js; notranslate">export default function(ctx) { + ... +}</pre> + +<p>En nuestro archivo <code>main.js</code>, importamos la función predeterminada usando esta línea:</p> + +<pre class="brush: js; notranslate">import randomSquare from './modules/square.js';</pre> + +<p>Una vez más, ten en cuenta la falta de llaves. Esto se debe a que solo se permite una exportación predeterminada por módulo, y sabemos que <code>randomSquare</code> lo es. La línea anterior es básicamente una abreviatura de:</p> + +<pre class="brush: js; notranslate">import {default as randomSquare} from './modules/square.js';</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La sintaxis as para cambiar el nombre de los elementos exportados se explica a continuación en la sección <a href="#Renombrar_impotaciones_y_exportaciones">Renombrar importaciones y exportaciones</a>.</p> +</div> + +<h2 id="Evitar_conflictos_de_nombres">Evitar conflictos de nombres</h2> + +<p>Hasta ahora, nuestros módulos de dibujo de formas en el lienzo parecen estar funcionando bien. Pero, ¿qué pasa si intentamos agregar un módulo que se ocupa de dibujar otra forma, como un círculo o un triángulo? Estas formas probablemente también tendrían funciones asociadas como <code>draw()</code>, <code>reportArea()</code>, etc.; si intentáramos importar diferentes funciones del mismo nombre en el mismo archivo de módulo de nivel superior, terminaríamos con conflictos y errores.</p> + +<p>Afortunadamente, hay varias formas de evitar esto. Los veremos en las siguientes secciones.</p> + +<h2 id="Renombrar_importaciones_y_exportaciones">Renombrar importaciones y exportaciones</h2> + +<p>Dentro de las llaves de tu instrucciones <code>import</code> y <code>export</code>, puedes usar la palabra clave <code>as</code> junto con un nuevo nombre de función, para cambiar el nombre de identificación que utilizará una función dentro del módulo de nivel superior.</p> + +<p>Entonces, por ejemplo, ambos de los siguientes harían el mismo trabajo, aunque de una manera ligeramente diferente:</p> + +<pre class="brush: js; notranslate">// dentro de module.js +export { + function1 as newFunctionName, + function2 as anotherNewFunctionName +}; + +// dentro de main.js +import {newFunctionName, anotherNewFunctionName} from './modules/module.js';</pre> + +<pre class="brush: js; notranslate">// dentro de module.js +export {function1, function2}; + +// dentro de main.js +import {function1 as newFunctionName, + function2 as anotherNewFunctionName } from './modules/module.js';</pre> + +<p>Veamos un ejemplo real. En nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a>, verás el mismo sistema de módulos que en el ejemplo anterior, excepto que hemos agregado los módulos <code>circle.js</code> y <code>triangle.js</code> para dibujar e informar sobre círculos y triángulos.</p> + +<p>Dentro de cada uno de estos módulos, tenemos características con los mismos nombres que se exportan y, por lo tanto, cada una tiene la misma instrucción <code>export</code> en la parte inferior:</p> + +<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> + +<p>Al importarlos a <code>main.js</code>, si intentamos usar esto:</p> + +<pre class="brush: js; notranslate">import { name, draw, reportArea, reportPerimeter } from './modules/square.js'; +import { name, draw, reportArea, reportPerimeter } from './modules/circle.js'; +import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';</pre> + +<p>El navegador arrojará un error como "SyntaxError: redeclaración de nombre import" (Firefox).</p> + +<p>En su lugar, necesitamos cambiar el nombre de las importaciones para que sean únicas:</p> + +<pre class="brush: js; notranslate">import { name as squareName, + draw as drawSquare, + reportArea as reportSquareArea, + reportPerimeter as reportSquarePerimeter } from './modules/square.js'; + +import { name as circleName, + draw as drawCircle, + reportArea as reportCircleArea, + reportPerimeter as reportCirclePerimeter } from './modules/circle.js'; + +import { name as triangleName, + draw as drawTriangle, + reportArea as reportTriangleArea, + reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';</pre> + +<p>Ten en cuenta que podrías resolver el problema en los archivos del módulo, p. ej.</p> + +<pre class="brush: js; notranslate">// en square.js +export {name as squareName, + draw as drawSquare, + reportArea as reportSquareArea, + reportPerimeter as reportSquarePerimeter };</pre> + +<pre class="brush: js; notranslate">// en main.js +import {squareName, drawSquare, reportSquareArea, reportSquarePerimeter} from './modules/square.js';</pre> + +<p>Y funcionaría igual. El estilo que uses depende de ti, sin embargo, podría decirse que tiene más sentido dejar el código de tu módulo tal cual y realizar los cambios en las importaciones. Esto tiene sentido especialmente cuando estás importando desde módulos de terceros sobre los que no tienes ningún control.</p> + +<h2 id="Crear_un_objeto_module">Crear un objeto <code>module</code></h2> + +<p>El método anterior funciona bien, pero es un poco complicado y largo. Una solución aún mejor es importar las características de cada módulo dentro de un objeto <code>module</code>. La siguiente forma de sintaxis hace eso:</p> + +<pre class="brush: js; notranslate">import * as Module from './modules/module.js';</pre> + +<p>Esto toma todas las exportaciones disponibles dentro de <code>module.js</code> y las hace disponibles como miembros de un objeto <code>Module</code>, dándole efectivamente su propio espacio de nombres. Así por ejemplo:</p> + +<pre class="brush: js; notranslate">Module.function1() +Module.function2() +etc.</pre> + +<p>De nuevo, veamos un ejemplo real. Si vas a nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a>, verás el mismo ejemplo nuevamente, pero reescrito para aprovechar esta nueva sintaxis. En los módulos, las exportaciones están todas en la siguiente forma simple:</p> + +<pre class="brush: js; notranslate">export { name, draw, reportArea, reportPerimeter };</pre> + +<p>Las importaciones, por otro lado, se ven así:</p> + +<pre class="brush: js; notranslate">import * as Canvas from './modules/canvas.js'; + +import * as Square from './modules/square.js'; +import * as Circle from './modules/circle.js'; +import * as Triangle from './modules/triangle.js';</pre> + +<p>En cada caso, ahora puedes acceder a las importaciones del módulo debajo del nombre del objeto especificado, por ejemplo:</p> + +<pre class="brush: js; notranslate">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); +Square.reportArea(square1.length, reportList); +Square.reportPerimeter(square1.length, reportList);</pre> + +<p>Por lo tanto, ahora puedes escribir el código de la misma manera que antes (siempre que incluyas los nombres de los objetos donde sea necesario), y las importaciones son mucho más ordenadas.</p> + +<h2 id="Módulos_y_clases">Módulos y clases</h2> + +<p>Como dijimos antes, también puedes exportar e importar clases; esta es otra opción para evitar conflictos en tu código, y especialmente es útil si ya tienes el código de tu módulo escrito en un estilo orientado a objetos.</p> + +<p>Puedes ver un ejemplo de nuestro módulo de dibujo de formas reescrito con clases ES en nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a>. Como ejemplo, el archivo <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> ahora contiene toda su funcionalidad en una sola clase:</p> + +<pre class="brush: js; notranslate">class Square { + constructor(ctx, listId, length, x, y, color) { + ... + } + + draw() { + ... + } + + ... +}</pre> + +<p>que luego exportamos:</p> + +<pre class="brush: js; notranslate">export { Square };</pre> + +<p>En <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, lo importamos así:</p> + +<pre class="brush: js; notranslate">import { Square } from './modules/square.js';</pre> + +<p>Y luego usas la clase para dibujar nuestro cuadrado:</p> + +<pre class="brush: js; notranslate">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); +square1.draw(); +square1.reportArea(); +square1.reportPerimeter();</pre> + +<h2 id="Carga_estática_de_módulos">Carga estática de módulos</h2> + +<p>Habrá ocasiones en las que querrás agregar módulos juntos. Es posible que tengas varios niveles de dependencias, donde desees simplificar las cosas, combinando varios submódulos en un módulo principal. Esto es posible utilizando la sintaxis de exportación de los siguientes formas en el módulo principal:</p> + +<pre class="brush: js; notranslate">export * from 'x.js' +export { name } from 'x.js'</pre> + +<p>Para ver un ejemplo, ve nuestro directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a>. En este ejemplo (basado en nuestro ejemplo de clases anterior) tenemos un módulo adicional llamado <code>shapes.js</code>, que reúne toda la funcionalidad de <code>circle.js</code>, <code>square.js</code> y <code>triangle.js</code>. También hemos movido nuestros submódulos dentro de un subdirectorio dentro del directorio <code>modules</code> llamado <code>shapes</code>. Entonces, la estructura del módulo en este ejemplo es:</p> + +<pre class="notranslate">modules/ + canvas.js + shapes.js + shapes/ + circle.js + square.js + triangle.js</pre> + +<p>En cada uno de los submódulos, la exportación es de la misma forma, p. ej.</p> + +<pre class="brush: js; notranslate">export { Square };</pre> + +<p>Luego viene la parte de agregación. Dentro de <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, incluimos las siguientes líneas:</p> + +<pre class="brush: js; notranslate">export { Square } from './shapes/square.js'; +export { Triangle } from './shapes/triangle.js'; +export { Circle } from './shapes/circle.js';</pre> + +<p>Estas toman las exportaciones de los submódulos individuales y las ponen a disposición de manera efectiva desde el módulo <code>shapes.js</code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Las exportaciones a las que se hace referencia en <code>shapes.js</code> básicamente se redirigen a través del archivo y realmente no existen allí, por lo que no podrás escribir ningún código relacionado útil dentro del mismo archivo.</p> +</div> + +<p>Entonces, ahora en el archivo <code>main.js</code>, podemos obtener acceso a las tres clases de módulos reemplazando</p> + +<pre class="brush: js; notranslate">import { Square } from './modules/square.js'; +import { Circle } from './modules/circle.js'; +import { Triangle } from './modules/triangle.js';</pre> + +<p>con la siguiente única línea:</p> + +<pre class="brush: js; notranslate">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> + +<h2 id="Carga_dinámica_de_módulos">Carga dinámica de módulos</h2> + +<p>La parte más nueva de la funcionalidad de los módulos de JavaScript que estará disponible en los navegadores es la carga dinámica de módulos. Esto te permite cargar módulos dinámicamente solo cuando son necesarios, en lugar de tener que cargar todo por adelantado. Esto tiene algunas obvias ventajas de rendimiento; sigue leyendo y veamos cómo funciona.</p> + +<p>Esta nueva funcionalidad te permite llamar a {{jsxref("Statements/import", "import()", "#Importaciones_Dinámicas")}} como una función, pasándole la ruta al módulo como parámetro. Devuelve una {{jsxref("Promise")}}, que se cumple con un objeto <code>module</code> (consulta <a href="#Crear_un_objeto_module">Crear un objeto <code>module</code></a>) que te da acceso a las exportaciones de ese objeto, p. ej.</p> + +<pre class="brush: js; notranslate">import('./modules/myModule.js') + .then((module) => { + // Haz algo con el módulo. + });</pre> + +<p>Veamos un ejemplo. En el directorio <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-import</a> tenemos otro ejemplo basado en nuestro ejemplo de clases. Esta vez, sin embargo, no dibujamos nada en el lienzo cuando se carga el ejemplo. En su lugar, incluimos tres botones — "Círculo", "Cuadrado" y "Triángulo" — que, cuando se presionan, cargan dinámicamente el módulo requerido y luego lo usan para dibujar la forma asociada.</p> + +<p>En este ejemplo, solo hemos realizado cambios en nuestros archivos <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> y <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> — el módulo <code>exports</code> sigue siendo el mismo que antes.</p> + +<p>En <code>main.js</code> hemos tomado una referencia a cada botón usando una llamada a <a href="/es/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a>, por ejemplo:</p> + +<pre class="brush: js; notranslate">let squareBtn = document.querySelector('.square');</pre> + +<p>Luego adjuntamos un escucha de eventos a cada botón para que cuando se presione, el módulo relevante se cargue dinámicamente y se use para dibujar la forma:</p> + +<pre class="brush: js; notranslate">squareBtn.addEventListener('click', () => { + import('./modules/square.js').then((Module) => { + let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); + square1.draw(); + square1.reportArea(); + square1.reportPerimeter(); + }) +});</pre> + +<p>Ten en cuenta que, debido a que el cumplimiento de la promesa devuelve un objeto <code>module</code>, la clase se convierte en una subfunción del objeto, por lo que ahora necesitamos acceder al constructor prefijado con <code>Module.</code>, p. ej. <code>Module.Square(...)</code>.</p> + +<h2 id="Solución_de_problemas">Solución de problemas</h2> + +<p>Aquí hay algunos consejos que te pueden ayudar si tienes problemas para hacer que tus módulos funcionen. ¡No dude en agregarlos a la lista si descubres más!</p> + +<ul> + <li>Mencionamos esto antes, pero para reiterar: los archivos <code>.js</code> se deben cargar con un tipo MIME de <code>text/javascript</code> (u otro tipo MIME compatible con JavaScript, pero se recomienda <code>text/javascript</code>), de lo contrario, obtendrás un error de comprobación de tipo MIME estricto como "El servidor respondió con un tipo MIME no JavaScript".</li> + <li>Si intentas cargar el archivo HTML localmente (es decir, con una URL <code>file:///</code>), encontrarás errores CORS debido a los requisitos de seguridad del módulo JavaScript. Necesitas hacer tus pruebas a través de un servidor. Las páginas de GitHub son ideales ya que también sirven archivos <code>.js</code> con el tipo MIME correcto.</li> + <li>Debido a que <code>.mjs</code> es una extensión de archivo no estándar, es posible que algunos sistemas operativos no la reconozcan o intenten reemplazarla por otra. Por ejemplo, descubrimos que macOS silenciosamente agregaba <code>.js</code> al final de los archivos <code>.mjs</code> y luego, automáticamente ocultaba la extensión del archivo. Entonces, todos nuestros archivos salían realmente como <code>x.mjs.js</code>. Una vez que desactivamos la acción de ocultar automáticamente las extensiones de archivo y lo entrenamos para aceptar <code>.mjs</code>, todo estuvo bien.</li> +</ul> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Uso de módulos JavaScript en la web</a>, por Addy Osmani y Mathias Bynens</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">Módulos ES: un análisis profundo de dibujos animados</a>, publicación en el blog Hacks de Lin Clark</li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 en profundidad: Módulos</a>, publicación en el blog Hacks de Jason Orendorff</li> + <li>Libro de Axel Rauschmayer <a href="http://exploringjs.com/es6/ch_modules.html">Explorando JS: Módulos</a></li> +</ul> + +<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p> diff --git a/files/es/web/javascript/guide/numbers_and_dates/index.html b/files/es/web/javascript/guide/numbers_and_dates/index.html new file mode 100644 index 0000000000..e19c9cab75 --- /dev/null +++ b/files/es/web/javascript/guide/numbers_and_dates/index.html @@ -0,0 +1,395 @@ +--- +title: Números y fechas +slug: Web/JavaScript/Guide/Numbers_and_dates +tags: + - Coma flotante + - Cálculo + - Enteros + - Fechas + - Guía + - JavaScript + - Math + - Numeros + - Numérico + - PF + - Punto flotante + - 'l10n:priority' +translation_of: Web/JavaScript/Guide/Numbers_and_dates +--- +<div>{{jsSidebar("JavaScript Guide", "Guía JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</div> + +<p><span class="seoSummary">Este capítulo presenta los conceptos, objetos y funciones que se utilizan para trabajar y realizar cálculos utilizando números y fechas en JavaScript.</span> Esto incluye el uso de números escritos en varias bases, incluyendo decimal, binario y hexadecimal, así como el uso del objeto global {{JSxRef("Math")}} para realizar una amplia variedad de operaciones matemáticas con números.</p> + +<h2 id="Números">Números</h2> + +<p>En JavaScript, los números se implementan en {{interwiki("wikipedia", "Formato en coma flotante de doble precisión")}} de 64 bits IEEE 754 (es decir, un número entre ±2<sup>−1022</sup> y ±2<sup>+1023</sup>, o aproximadamente ±10<sup>−308</sup> a ±10<sup>+308</sup>, con una precisión numérica de 53 bits). Los valores enteros hasta ±2<sup>53</sup> - 1 se pueden representar con exactitud.</p> + +<p>Además de poder representar números de punto flotante, el tipo <code>number</code> tiene tres valores simbólicos: <code>+</code>{{JSxRef("Infinity")}}, <code>-</code>{{JSxRef("Infinity")}} y {{JSxRef("NaN")}} (<em>Not-a-Number</em>, no es un número).</p> + +<p>Una adición más reciente a JavaScript es el {{JSxRef("BigInt")}} que te permite representar números enteros que pueden ser muy grandes. Sin embargo, existen advertencias para usar <code>BigInt</code>; por ejemplo, no puedes mezclar y hacer coincidir los valores <code>BigInt</code> y {{JSxRef("Number")}} en la misma operación, y no puedes usar el objeto {{JSxRef("Math")}} con valores <code>BigInt</code>.</p> + +<p>Consulta también {{JSxRef("../Data_structures", "estructuras y tipos de datos JavaScript")}} para conocer el contexto con otros tipos primitivos en JavaScript.</p> + +<p>Puedes utilizar cuatro tipos de literales numéricos: decimal, binario, octal y hexadecimal.</p> + +<h3 id="Números_decimales">Números decimales</h3> + +<pre class="brush: js notranslate">1234567890 +42 + +// Precaución al usar ceros a la izquierda: + +0888 // 888 procesado como decimal +0777 // procesado como octal en modo no estricto (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 cada dígito después del <code>0</code> inicial es menor que 8, el número se procesa como un número octal.</p> + +<h3 id="Números_binarios">Números binarios</h3> + +<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>). Si los dígitos después del <code>0b</code> no son 0 o 1, el siguiente {{JSxRef("Objetos_globales/SyntaxError", "SyntaxError")}} se lanza un: "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> + +<h3 id="Números_octales">Números octales</h3> + +<p>La sintaxis de números octales utiliza un cero a la izquierda. Si los dígitos después del <code>0</code> están fuera del rango de 0 a 7, el número se interpretará como un número decimal.</p> + +<pre class="brush: js notranslate">var n = 0755; // 493 +var m = 0644; // 420 +</pre> + +<p>El modo estricto en ECMAScript 5 prohíbe la sintaxis octal. La notación octal no es parte de ECMAScript 5, pero la admiten todos los navegadores al poner como prefijo un cero al número: <code>0644 == 420</code> y <code>"\045" === "%"</code>. En ECMAScript 2015, los números octales son compatibles si tienen el prefijo <code>0o</code>, por ejemplo:</p> + +<pre class="brush: js notranslate">var a = 0o10; // ES2015: 8 +</pre> + +<h3 id="Números_hexadecimales">Números hexadecimales</h3> + +<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 <code>0x</code> están fuera del rango (0123456789ABCDEF), el siguiente {{JSxRef("Objetos_globales/SyntaxError", "SyntaxError")}} se lanza: "El identificador comienza inmediatamente después del literal numérico".</p> + +<pre class="brush: js notranslate">0xFFFFFFFFFFFFFFFFF // 295147905179352830000 +0x123456789ABCDEF // 81985529216486900 +0XA // 10 +</pre> + +<h3 id="Exponenciación">Exponenciación</h3> + +<pre class="brush: js notranslate">1E3 // 1000 +2e6 // 2000000 +0.1e2 // 10</pre> + +<h2 id="El_objeto_Number">El objeto <code>Number</code></h2> + +<p>El objeto integrado {{JSxRef("Number")}} tiene propiedades para constantes numéricas, como valor máximo, <code>NaN</code> (no un número) e <code>infinity</code>. No puedes cambiar los valores de estas propiedades y las debes usar de la siguiente manera:</p> + +<pre class="brush: js notranslate">var biggestNum = Number.MAX_VALUE; +var smallestNum = Number.MIN_VALUE; +var infiniteNum = Number.POSITIVE_INFINITY; +var negInfiniteNum = Number.NEGATIVE_INFINITY; +var notANum = Number.NaN; +</pre> + +<p>Siempre haces referencia a una propiedad del objeto <code>Number</code> predefinido como se muestra arriba, y no como una propiedad de un objeto <code>Number</code> que creas tú mismo.</p> + +<p>La siguiente tabla resume las propiedades del objeto <code>Number</code>.</p> + +<table class="standard-table"> + <caption>Propiedades de <code>Number</code></caption> + <thead> + <tr> + <th scope="col">Propiedad</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Number.MAX_VALUE")}}</td> + <td>El número representable más grande (<code>±1.7976931348623157e+308</code>)</td> + </tr> + <tr> + <td>{{JSxRef("Number.MIN_VALUE")}}</td> + <td>El número representable más pequeño (<code>±5e-324</code>)</td> + </tr> + <tr> + <td>{{JSxRef("Number.NaN")}}</td> + <td>Valor especial <code>not a number</code> ("no es un número")</td> + </tr> + <tr> + <td>{{JSxRef("Number.NEGATIVE_INFINITY")}}</td> + <td>Valor infinito negativo especial; devuelto por desbordamiento</td> + </tr> + <tr> + <td>{{JSxRef("Number.POSITIVE_INFINITY")}}</td> + <td>Valor infinito positivo especial; devuelto por desbordamiento</td> + </tr> + <tr> + <td>{{JSxRef("Number.EPSILON")}}</td> + <td>Diferencia entre <code>1</code> y el valor más pequeño mayor que <code>1</code> que se puede representar como un {{JSxRef("Number")}} (<code>2.220446049250313e-16</code>)</td> + </tr> + <tr> + <td>{{JSxRef("Number.MIN_SAFE_INTEGER")}}</td> + <td>Número entero seguro mínimo en JavaScript (−2<sup>53</sup> + 1 o <code>−9007199254740991</code>)</td> + </tr> + <tr> + <td>{{JSxRef("Number.MAX_SAFE_INTEGER")}}</td> + <td>Máximo número entero seguro en JavaScript (+2<sup>53</sup> - 1 o <code>+9007199254740991</code>)</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>Métodos de <code>Number</code></caption> + <thead> + <tr> + <th>Método</th> + <th>Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Number.parseFloat()")}}</td> + <td>Analiza un argumento de cadena y devuelve un número de punto flotante.<br> + Igual que la función {{JSxRef("parseFloat", "parseFloat()")}} global.</td> + </tr> + <tr> + <td>{{JSxRef("Number.parseInt()")}}</td> + <td>Analiza un argumento de cadena y devuelve un número entero de la base o raíz especificada.<br> + Igual que la función {{JSxRef("parseInt", "parseInt()")}} global.</td> + </tr> + <tr> + <td>{{JSxRef("Number.isFinite()")}}</td> + <td>Determina si el valor pasado es un número finito.</td> + </tr> + <tr> + <td>{{JSxRef("Number.isInteger()")}}</td> + <td>Determina si el valor pasado es un número entero.</td> + </tr> + <tr> + <td>{{JSxRef("Number.isNaN()")}}</td> + <td>Determina si el valor pasado es {{JSxRef("Objetos_globales/NaN", "NaN")}}. Versión más robusta del {{JSxRef("Objetos_globales/isNaN", "isNaN()")}} global original.</td> + </tr> + <tr> + <td>{{JSxRef("Number.isSafeInteger()")}}</td> + <td>Determina si el valor proporcionado es un número que es un <dfn>entero seguro</dfn>.</td> + </tr> + </tbody> +</table> + +<p>El prototipo <code>Number</code> proporciona métodos para recuperar información de objetos <code>Number</code> en varios formatos. La siguiente tabla resume los métodos de <code>Number.prototype</code>.</p> + +<table class="standard-table"> + <caption>Métodos de <code>Number.prototype</code></caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Number.toExponential", "toExponential()")}}</td> + <td>Devuelve una cadena que representa el número en notación exponencial.</td> + </tr> + <tr> + <td>{{JSxRef("Number.toFixed", "toFixed()")}}</td> + <td>Devuelve una cadena que representa el número en notación de punto fijo.</td> + </tr> + <tr> + <td>{{JSxRef("Number.toPrecision", "toPrecision()")}}</td> + <td>Devuelve una cadena que representa el número con una precisión especificada en notación de punto fijo.</td> + </tr> + </tbody> +</table> + +<h2 id="El_objeto_Math">El objeto <code>Math</code></h2> + +<p>El objeto integrado {{JSxRef("Math")}} tiene propiedades y métodos para constantes y funciones matemáticas. Por ejemplo, la propiedad <code>PI</code> del objeto <code>Math</code> tiene el valor de <code>pi</code> (3.141...), que usarías en una aplicación como:</p> + +<pre class="brush: js notranslate">Math.PI +</pre> + +<p>De manera similar, las funciones matemáticas estándar son métodos de <code>Math</code>. Estas incluyen funciones trigonométricas, logarítmicas, exponenciales y otras. Por ejemplo, si deseas utilizar la función trigonométrica «seno», debes escribir</p> + +<pre class="brush: js notranslate">Math.sin(1.56) +</pre> + +<p>Ten en cuenta que todos los métodos trigonométricos de <code>Math</code> toman argumentos en radianes.</p> + +<p>La siguiente tabla resume los métodos del objeto <code>Math</code>.</p> + +<table class="standard-table"> + <caption>Métodos de <code>Math</code></caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("Math.abs", "abs()")}}</td> + <td>Valor absoluto</td> + </tr> + <tr> + <td>{{JSxRef("Math.sin", "sin()")}}, {{JSxRef("Math.cos", "cos()")}}, {{JSxRef("Math.tan", "tan()")}}</td> + <td>Funciones trigonométricas estándar; con el argumento en radianes.</td> + </tr> + <tr> + <td>{{JSxRef("Math.asin", "asin()")}}, {{JSxRef("Math.acos", "acos()")}}, {{JSxRef("Math.atan", "atan()")}}, {{JSxRef("Math.atan2", "atan2()")}}</td> + <td>Funciones trigonométricas inversas; devuelven valores en radianes.</td> + </tr> + <tr> + <td>{{JSxRef("Math.sinh", "sinh()")}}, {{JSxRef("Math.cosh", "cosh()")}}, {{JSxRef("Math.tanh", "tanh()")}}</td> + <td>Funciones hiperbólicas; argumento en ángulo hiperbólico.</td> + </tr> + <tr> + <td>{{JSxRef("Math.asinh", "asinh()")}}, {{JSxRef("Math.acosh", "acosh()")}}, {{JSxRef("Math.atanh", "atanh()")}}</td> + <td>Funciones hiperbólicas inversas; devuelven valores en ángulo hiperbólico.</td> + </tr> + <tr> + <td> + <p>{{JSxRef("Math.pow", "pow()")}}, {{JSxRef("Math.exp", "exp()")}}, {{JSxRef("Math.expm1", "expm1()")}}, {{JSxRef("Math.log10", "log10()")}}, {{JSxRef("Math.log1p", "log1p()")}}, {{JSxRef("Math.log2", "log2()")}}</p> + </td> + <td>Funciones exponenciales y logarítmicas.</td> + </tr> + <tr> + <td>{{JSxRef("Math.floor", "floor()")}}, {{JSxRef("Math.ceil", "ceil()")}}</td> + <td>Devuelve el entero más grande/más pequeño menor/mayor o igual que un argumento.</td> + </tr> + <tr> + <td>{{JSxRef("Math.min", "min()")}}, {{JSxRef("Math.max", "max()")}}</td> + <td>Devuelven el valor mínimo o máximo (respectivamente) de una lista de números separados por comas como argumentos.</td> + </tr> + <tr> + <td>{{JSxRef("Math.random", "random()")}}</td> + <td>Devuelve un número aleatorio entre 0 y 1.</td> + </tr> + <tr> + <td>{{JSxRef("Math.round", "round()")}}, {{JSxRef("Math.fround", "fround()")}}, {{JSxRef("Math.trunc", "trunc()")}},</td> + <td>Funciones de redondeo y truncamiento.</td> + </tr> + <tr> + <td>{{JSxRef("Math.sqrt", "sqrt()")}}, {{JSxRef("Math.cbrt", "cbrt()")}}, {{JSxRef("Math.hypot", "hypot()")}}</td> + <td>Raíz cuadrada, raíz cúbica, raíz cuadrada de la suma de argumentos cuadrados.</td> + </tr> + <tr> + <td>{{JSxRef("Math.sign", "sign()")}}</td> + <td>El signo de un número, que indica si el número es positivo, negativo o cero.</td> + </tr> + <tr> + <td>{{JSxRef("Math.clz32", "clz32()")}},<br> + {{JSxRef("Math.imul", "imul()")}}</td> + <td>Número de bits cero iniciales en la representación binaria de 32 bits.<br> + El resultado de la multiplicación de 32 bits similar a C de los dos argumentos.</td> + </tr> + </tbody> +</table> + +<p>A diferencia de muchos otros objetos, nunca creas un objeto <code>Math</code> propio. Siempre usas el objeto <code>Math</code> incorporado.</p> + +<h2 id="El_objeto_Date">El objeto <code>Date</code></h2> + +<p>JavaScript no tiene un tipo de dato para fechas. Sin embargo, puedes utilizar el objeto {{JSxRef("Date")}} y sus métodos para trabajar con fechas y horas en tus aplicaciones. El objeto <code>Date</code> tiene una gran cantidad de métodos para establecer, obtener y manipular fechas. Pero no tiene propiedades.</p> + +<p>JavaScript maneja las fechas de manera similar a Java. Los dos lenguajes tienen muchos de los mismos métodos de fecha, y ambos lenguajes almacenan fechas como el número de milisegundos desde el 1 de enero de 1970, 00:00:00, con una marca de tiempo Unix que es el número de segundos desde el 1 de enero de 1970, 00: 00:00.</p> + +<p>El rango del objeto <code>Date</code> es de -100,000,000 de días a 100,000,000 de días en relación con el 1 de enero de 1970 UTC.</p> + +<p>Para crear un objeto <code>Date</code>:</p> + +<pre class="brush: js notranslate">var dateObjectName = new Date([parameters]); +</pre> + +<p>donde <code>dateObjectName</code> es el nombre del objeto <code>Date</code> que se está creando; puede ser un objeto nuevo o una propiedad de un objeto existente.</p> + +<p>Llamar a <code>Date</code> sin la palabra clave <code>new</code> devuelve una cadena que representa la fecha y hora actuales.</p> + +<p>Los parámetros de la sintaxis anterior pueden ser cualquiera de los siguientes:</p> + +<ul> + <li>Nada: crea la fecha y hora de hoy. Por ejemplo, <code>today = new Date();</code>.</li> + <li>Una cadena que representa una fecha en la siguiente forma: "Mes día, año horas:minutos:segundos." Por ejemplo, <code>var Xmas95 = new Date("December 25, 1995 13:30:00")</code>. Si omites horas, minutos o segundos, el valor se establecerá en cero.</li> + <li>Un conjunto de valores enteros para año, mes y día. Por ejemplo, <code>var Xmas95 = new Date(1995, 11, 25)</code>.</li> + <li>Un conjunto de valores enteros para año, mes, día, hora, minuto y segundos. Por ejemplo, <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0)</code>.</li> +</ul> + +<h3 id="Métodos_del_objeto_Date">Métodos del objeto <code>Date</code></h3> + +<p>Los métodos del objeto <code>Date</code> para manejar fechas y horas se incluyen en estas categorías generales:</p> + +<ul> + <li>métodos establecedores ("<code>set</code>"), para configurar valores de fecha y hora en objetos <code>Date</code>.</li> + <li>Métodos captadores ("<code>get</code>"), para obtener valores de fecha y hora de objetos <code>Date</code>.</li> + <li>métodos conversores ("<code>to</code>"), para devolver valores de cadena de objetos <code>Date</code>.</li> + <li>métodos <code>parse</code> y <code>UTC</code>, para analizar cadenas de <code>Date</code>.</li> +</ul> + +<p>Con los métodos "<code>get</code>" y "<code>set</code>" puedes obtener y establecer segundos, minutos, horas, día del mes, día de la semana, meses y años por separado. Existe un método <code>getDay</code> que devuelve el día de la semana, pero no existe el método <code>setDay</code> correspondiente, porque el día de la semana se establece automáticamente. Estos métodos utilizan números enteros para representar estos valores de la siguiente manera:</p> + +<ul> + <li>Segundos y minutos: 0 a 59</li> + <li>Horas: 0 a 23</li> + <li>Día: 0 (Domingo) a 6 (Sábado)</li> + <li>Fecha: 1 al 31 (día del mes)</li> + <li>Meses: 0 (Enero) a 11 (Diciembre)</li> + <li>Año: años desde 1900</li> +</ul> + +<p>Por ejemplo, supongamos que defines la siguiente fecha:</p> + +<pre class="brush: js notranslate">var Xmas95 = new Date('December 25, 1995'); +</pre> + +<p>Entonces, <code>Xmas95.getMonth()</code> devuelve 11 y <code>Xmas95.getFullYear()</code> devuelve 1995.</p> + +<p>Los métodos <code>getTime</code> y <code>setTime</code> son útiles para comparar fechas. El método <code>getTime</code> devuelve el número de milisegundos desde el 1 de enero de 1970, 00:00:00 para un objeto <code>Date</code>.</p> + +<p>Por ejemplo, el siguiente código muestra el número de días que quedan en el año actual:</p> + +<pre class="brush: js notranslate">var today = new Date(); +var endYear = new Date(1995, 11, 31, 23, 59, 59, 999); // Establece día y mes +endYear.setFullYear(today.getFullYear()); // Establece año a este año +var msPerDay = 24 * 60 * 60 * 1000; // Número de milisegundos por día +var daysLeft = (endYear.getTime() - today.getTime()) / msPerDay; +var daysLeft = Math.round(daysLeft); // devuelve los días que quedan en el año +</pre> + +<p>Este ejemplo crea un objeto <code>Date</code> llamado <code>today</code> que contiene la fecha de hoy. Luego crea un objeto <code>Date</code> llamado <code>endYear</code> y establece el año en el año actual. Luego, usando la cantidad de milisegundos por día, calcula la cantidad de días entre <code>today</code> y <code>endYear</code>, usando <code>getTime</code> y redondeando a un número entero de días.</p> + +<p>El método <code>parse</code> es útil para asignar valores de cadenas de fecha a objetos <code>Date</code> existentes. Por ejemplo, el siguiente código usa <code>parse</code> y <code>setTime</code> para asignar un valor de fecha al objeto <code>IPOdate</code>:</p> + +<pre class="brush: js notranslate">var IPOdate = new Date(); +IPOdate.setTime(Date.parse('Aug 9, 1995')); +</pre> + +<h3 id="Ejemplo">Ejemplo</h3> + +<p>En el siguiente ejemplo, la función <code>JSClock()</code> devuelve la hora en el formato de un reloj digital.</p> + +<pre class="brush: js notranslate">function JSClock() { + var time = new Date(); + var hour = time.getHours(); + var minute = time.getMinutes(); + var second = time.getSeconds(); + var temp = '' + ((hour > 12) ? hour - 12 : hour); + if (hour == 0) + temp = '12'; + temp += ((minute < 10) ? ':0' : ':') + minute; + temp += ((second < 10) ? ':0' : ':') + second; + temp += (hour >= 12) ? ' P.M.' : ' A.M.'; + return temp; +} +</pre> + +<p>La función <code>JSClock</code> primero crea un nuevo objeto <code>Date</code> llamado <code>time</code>; dado que no se dan argumentos, la hora se crea con la fecha y hora actuales. Luego, las llamadas a los métodos <code>getHours</code>, <code>getMinutes</code> y <code>getSeconds</code> asignan el valor de la hora, minuto y segundo actuales a <code>hour</code>, <code>minute</code> y <code>second</code>.</p> + +<p>Las siguientes cuatro declaraciones crean un valor de cadena basado en el tiempo. La primera declaración crea una variable <code>temp</code>, asignándole un valor mediante una expresión condicional; si <code>hour</code> es mayor que 12, (<code>hour - 12</code>), de lo contrario, simplemente hora, a menos que la hora sea 0, en cuyo caso se convierte en 12.</p> + +<p>La siguiente declaración agrega un valor de <code>minute</code> a <code>temp</code>. Si el valor de <code>minute</code> es menor que 10, la expresión condicional agrega una cadena con un cero precedente; de lo contrario, agrega una cadena con dos puntos de demarcación. Luego, una declaración agrega un valor de segundos a <code>temp</code> de la misma manera.</p> + +<p>Finalmente, una expresión condicional agrega "P.M." a <code>temp</code> si <code>hour</code> es 12 o mayor; de lo contrario, agrega "A.M." a <code>temp</code>.</p> + +<p>{{PreviousNext("Web/JavaScript/Guide/Expressions_and_Operators", "Web/JavaScript/Guide/Text_formatting")}}</p> diff --git a/files/es/web/javascript/guide/regular_expressions/aserciones/index.html b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html new file mode 100644 index 0000000000..b822cdd2bf --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/aserciones/index.html @@ -0,0 +1,247 @@ +--- +title: Aserciones +slug: Web/JavaScript/Guide/Regular_Expressions/Aserciones +tags: + - Aserciones + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, condicionales e inversas).</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no coincide con la "A" en "alias A", pero coincide con la primera "A" en "Alias A".</p> + + <div class="blockIndicator note"> + <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupo")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/r$/</code> no coincide con la "r" en "espera", pero sí en "esperar".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p> + + <p>Ejemplos:</p> + + <ul> + <li><code>/\bl/</code> encuentra la "l" en "luna".</li> + <li><code>/un\b/</code> no concuerda con "un" en "luna", porque "un" va seguido de "a", que es un carácter de palabra.</li> + <li><code>/una\b/</code> coincide con "una" en "luna", porque "una" es el final de la cadena, por lo tanto no va seguido de un carácter de palabra.</li> + <li><code>/\w\b\w/</code> nunca encontrará con nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li> + </ul> + + <p>Para hacer coincidir un carácter de retroceso (<code>[\b]</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "Clases de caracteres")}}.</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bme/</code> coincide con "me" en "al mediodía", y <code>/ay\B/</code> coincide con "ay" en "posiblemente ayer".</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Otras_aserciones">Otras aserciones</h3> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, <code>/Jack(?=Sprat)/</code> coincide con "Jack" solo si va seguido de "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> coincide con "Jack" solo si va seguido de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p><strong>Aserción anticipada negativa</strong>: Coincide con "x" solo si "x" <span> no está seguida de </span>"y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa</strong>: coincide con "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?<=Jack)Sprat/</code><span> coincide con "Sprat" sólo si va precedida de "Jack". </span><code>/(?<=Jack|Tom)Sprat/</code> coincide con "Sprat" solo si va precedido de "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa negativa</strong>: coincide con "x" solo si "x" <em>no</em> está precedida por "y". Por ejemplo, <code>/(?<!-)\d+/</code><span> coincide con un número solo si no está precedido por un signo de menos. </span><code>/(? coincide con "3". <code>/(?<!-)\d+/.exec('-3')</code> no se encuentra la coincidencia porque el número está precedido por el signo menos.</code></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_de_descripción_de_tipo_límite">Ejemplo de descripción de tipo límite</h3> + +<pre class="brush: js notranslate">// Usa límites Regex para arreglar cadenas con errores. +let multilineaIncorrecta = `tey, la brillante manzena vered +toy cuelga en una rama del arbol vered`; + +// 1) Usa ^ para corregir la coincidencia al principio de la cadena y justo después de la nueva línea. +multilineaIncorrecta = multilineaIncorrecta.replace(/^t/gim,'h'); +console.log(1, multilineaIncorrecta); // corrige 'tey', 'toy' => 'hey', 'hoy'. + +// 2) Usa $ para arreglar el reconocimiento al final del texto. +multilineaIncorrecta = multilineaIncorrecta.replace(/ed$/gim,'de'); +console.log(2, multilineaIncorrecta); // corrige 'vered' => 'verde'. + +// 3) Usa \b para encontrar los caracteres justo en el borde entre una palabra y un espacio. +multilineaIncorrecta = multilineaIncorrecta.replace(/\ba/gim,'á'); +console.log(3, multilineaIncorrecta); // corrige 'arbol' sin tocar nada más. + +// 4) Usa \B para encontrar los caracteres dentro de los bordes de una entidad. +multilineaCorrecta = multilineaIncorrecta.replace(/\Ben/gim,'an'); +console.log(4, multilineaCorrecta); // corrige 'manzena' pero no toca 'en'. +</pre> + +<h3 id="Busca_al_comienzo_de_la_entrada_usando_un_caracter_de_control">Busca al comienzo de la entrada usando un caracter de control <code>^</code></h3> + +<p>Usa <code>^</code> para hacer coincidir al comienzo de la entrada. En este ejemplo, podemos obtener las frutas que comienzan con 'A' con una expresión regular <code>/^A/</code>. Para seleccionar las frutas adecuadas, podemos utilizar el método {{JSxRef("Objetos_globales/Array/filter", "filter")}} con un {{JSxRef("Funciones/Arrow_functions", "función flecha")}}.</p> + +<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"]; + +// Selecciona frutas que comiencen con 'M' por la Regex /^M/. +// Aquí se usa el símbolo de control '^' solo en un rol: Reconocer desde el inicio una entrada. + +let frutasEmpiezanConM = frutas.filter(fruta => /^M/.test(fruta)); +console.log(frutasEmpiezanConM); // [ 'Manzana', 'Melón' ]</pre> + +<p>En el segundo ejemplo, <code>^</code> se usa tanto para hacer coincidir al comienzo de la entrada como para crear conjuntos de caracteres negados o complementados cuando se usa dentro de {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos")}}.</p> + +<pre class="brush: js notranslate">let frutas = ["Manzana", "Sandía", "Naranja", "Aguacate", "Fresa", "Melón"]; + +// Seleccionar frutas que no comiencen por 'M' con la regexp /^[^M]/. +// En este ejemplo, se representan dos significados del símbolo de control '^': +// 1) Inicio coincidente de la entrada +// 2) Un conjunto de caracteres negado o complementado: [^M] +// Es decir, coincide con cualquier cosa que no esté encerrado entre los corchetes. + +let frutasNoEmpiezanConM = frutas.filter(fruta => /^[^M]/.test(fruta)); + +console.log(frutasNoEmpiezanConM); // [ "Sandía", "Naranja", "Aguacate", "Fresa" ]</pre> + +<h3 id="Reconoce_el_límite_de_palabra">Reconoce el límite de palabra</h3> + +<pre class="brush: js notranslate">let frutasConDescripcion = ["Manzana roja", "Piña amarilla", "Aguacate verde"]; + +// Selecciona descripciones que contengan terminaciones de palabras 'ja' o 'de': +let deJaSeleccion = frutasConDescripcion.filter(descr => /(de|ja)\b/.test(descr)); + +console.log(deJaSeleccion); // ["Manzana roja", "Aguacate verde"]</pre> + +<h3 id="Aserción_anticipada">Aserción anticipada</h3> + +<pre class="brush: js notranslate">// JS aserción anticipada x(?=Y) + +let regex = /Primer(?= prueba)/g; + +console.log('Primer prueba'.match(regex)); // [ 'Primer' ] +console.log('Primer melocotón'.match(regex)); // null +console.log('Esta es mi Primer prueba en un año.'.match(regex)); // [ 'Primer' ] +console.log('Este es mi Primer melocotón en un mes.'.match(regex)); // null +</pre> + +<h3 id="Aserción_anticipada_negativa_básica">Aserción anticipada negativa básica</h3> + +<p>Por ejemplo, <code>/\d+(?!\.)/</code><span> coincide con un número solo si no va seguido de un punto decimal. </span><code>/\d+(?!\.)/.exec('3.141')</code> coincide con "141" pero no con "3."</p> + +<pre class="brush: js notranslate">console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ] +</pre> + +<h3 id="Diferente_significado_del_uso_de_la_combinación_!_en_aserciones_y_rangos">Diferente significado del uso de la combinación '?!' en aserciones y rangos</h3> + +<p>Diferente significado del uso de la combinación <code>?!</code> en {{JSxRef("../Guide/Regular_Expressions/Aserciones", "Aserciones")}} <code>/x(?!y)/</code> y de <code>[^?!]</code> en {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Rangos")}}.</p> + +<pre class="brush: js notranslate">let naranjaNoLimon = "¿Quieres beber jugo de naranja? ¡Sí, no quiero tomar jugo de limón!"; + +// Diferente significado del uso de la combinación '?!' en Aserciones /x(?!y)/ y [^?!] en Rangos. +let regexNoSeleccionaLimon = /[^?!]+beber(?! de limón)[^?!]+[?!]/gi +console.log(naranjaNoLimon.match(regexNoSeleccionaLimon)); // [ '¿Quieres beber jugo de naranja?' ] + +let regexNoSeleccionaNaranja = /[^?!]+tomar(?! de naranja)[^?!]+[?!]/gi +console.log(naranjaNoLimon.match(regexNoSeleccionaNaranja)); // [ ' ¡Sí, no quiero tomar jugo de limón!' ] +</pre> + +<h3 id="Aserción_inversa">Aserción inversa</h3> + +<pre class="brush: js notranslate">let naranjas = ['naranja madura A', 'naranja verde B', 'naranja madura C',]; + +let naranjas_maduras = naranjas.filter(fruta => fruta.match(/(?<=naranja) madura/)); +console.log(naranjas_maduras); // [ 'naranja madura A ', 'naranja madura C' ] +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assertion', 'RegExp: Aserciones')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html new file mode 100644 index 0000000000..6de027b270 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html @@ -0,0 +1,220 @@ +--- +title: Clases de caracteres +slug: Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - RegExp + - clases de caracteres +translation_of: Web/JavaScript/Guide/Regular_Expressions/Character_Classes +--- +<p>{{JsSidebar("Guía de JavaScript")}}</p> + +<p>Las clases de caracteres distinguen tipos de caracteres como, por ejemplo, distinguen entre letras y dígitos.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-character-classes.html")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p>Tiene uno de los siguientes significados:</p> + + <ul> + <li>Coincide con cualquier carácter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.i/</code> coincide con "mi" y "si", pero no con "día", en "si alegra mi día".</li> + <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li> + </ul> + + <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para hacer coincidir un patrón en varias líneas, se puede utilizar el conjunto de caracteres <code>[^]</code> — coincidirá con cualquier carácter, incluidas las nuevas líneas.</p> + + <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", el cual permite que el punto también coincida con los terminadores de línea.</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> coincide con "2" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Busca cualquier caracter que <em>no</em> sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> coincide con "B" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> coincide con "m" en "manzana", "5" en "$5.28", "3" en "3D" y "m" en "Émanuel".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> coincide con "%" en "50%" y "É" en "Émanuel".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> encuentra " bar" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Coincide con una tabulación horizontal.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Coincide con un retorno de carro.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Coincide con un salto de línea.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Coincide con una tabulación vertical.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Coincide con un caracter de avance de página.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Coincide con un caracter de retroceso. Si estás buscando el carácter de límite de palabra (<code>\b</code>), consulta {{JSxRef("../Guide/Regular_Expressions/Boundaries", "Límites")}}.</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Coincide con un caracter de control mediante {{Interwiki("wikipedia", "Caret_notation", "notación de intercalación")}}, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> encuentra "\r" en "\r\n".</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Coincide con el carácter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Coincide con una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td> + <td>(Solo cuando se establece el indicador <code>u</code>). Hace coincidir el carácter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p> + + <ul> + <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> coincide con el carácter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el carácter se vuelve especial para significar que coincide con el límite de una palabra.</li> + <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un carácter especial que significa que deben coincidir 0 o más ocurrencias del carácter anterior; por ejemplo, <code>/a*/</code> significa coincidir con 0 o más "<em>a</em>"es. Para hacer coincidir <code>*</code> literalmente, precede con una barra invertida; por ejemplo, <code>/a\*/</code> coincide con "a*".</li> + </ul> + + <div class="blockIndicator note"> + <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Buscar_una_serie_de_dígitos">Buscar una serie de dígitos</h3> + +<pre class="brush: js notranslate">var datosAleatorios = "015 354 8787 687351 3512 8735"; +var regexpCuatroDigitos = /\b\d{4}\b/g; +// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra) +// \d{4} indica un dígito, cuatro veces +// \b indica otro límite (es decir, no termina la coincidencia en medio de una palabra) + + +console.table(datosAleatorios.match(regexpCuatroDigitos)); +// ['8787', '3512', '8735'] +</pre> + +<h3 id="Busca_una_palabra_del_alfabeto_latino_que_comience_con_A">Busca una palabra (del alfabeto latino) que comience con A</h3> + +<pre class="brush: js notranslate">var extractoAlicia = "Estoy segura de que no soy Ada, dijo, 'porque su cabello se hace en rizos tan largos, y el mío no se riza en absoluto'."; +var regexpPalabraEmpiezaConA = /\b[aA]\w+/g; +// \b indica un límite (es decir, no empieza a coincidir en medio de una palabra) +// [aA] indica las letras a o A +// \w+ indica cualquier carácter *del alfabeto latino*, varias veces + +console.table(extractoAlicia.match(regexpPalabraEmpiezaConA)); +// ["Ada", "absoluto"] +</pre> + +<h3 id="Busca_una_palabra_de_caracteres_Unicode">Busca una palabra (de caracteres Unicode)</h3> + +<p>En lugar del alfabeto latino, podemos usar una variedad de caracteres Unicode para identificar una palabra (de modo que podamos tratar con texto en otros idiomas, tal como Ruso o Árabe). El "Plano multilingüe básico" de Unicode contiene la mayoría de los caracteres que se utilizan en todo el mundo y podemos utilizar clases y rangos de caracteres para reconocer las palabras escritas con esos caracteres.</p> + +<pre class="brush: js notranslate">var textoNoEs = "Приключения Алисы в Стране чудес"; +var regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu; +// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020 + +console.table(textoNoEs.match(regexpPalabraBMP)); +[ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ] +</pre> + +<div class="hidden"> +<p>Nota para los editores de MDN: no intentes agregar ejemplos divertidos con emojis, ya que esos caracteres no los maneja la plataforma (Kuma).</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-characterclass', 'RegExp: Clases de caracteres')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html new file mode 100644 index 0000000000..bc2821219f --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html @@ -0,0 +1,182 @@ +--- +title: Cuantificadores +slug: Web/JavaScript/Guide/Regular_Expressions/Cuantificadores +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - cuantificadores + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Quantifiers +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los cuantificadores indican el número de caracteres o expresiones que deben coincidir.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-quantifiers.html", "taller")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente tabla también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Cheatsheet", "esta hoja de referencia")}}. No olvides editarla también, ¡gracias!</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres individuales, sino que también incluye {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}}, {{JSxRef("../Guide/Regular_Expressions/Unicode_Property_Escapes", "escapes de propiedades Unicode")}}, {{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "grupos y rangos")}}.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bu*/</code> coincide con "buuuu" en "Un fantasma abuuuucheado" y "b" en "Un búho gorjeó", pero nada en "Una cabra gruñó".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> coincide con la "<em>a</em>" en "candy" y todas las "<em>a</em>"es en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?le?/</code> coincide con "el" en "ángel" y "ele" en "ángeles".</p> + + <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>, o <code>{}</code>, hace que el cuantificador <em>no sea codicioso</em> (es decir que coincida con el mínimo número de veces), a diferencia del predeterminado, que es codicioso (que coincide con el máximo número de veces).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no coincide con la "<em>a</em>" de "candy", pero coincide con todas las "<em>a</em>"es de "caandy" y las dos primeras "<em>a</em>"es en "caaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no coincide con las "<em>a</em>"es en "caramelo", pero coincide con todas las "<em>a</em>"es en "caaraamelo" y en "caaaaaaaraaaamelo".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> > <em>n</em></code> coincide con al menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no coincide con nada en "crmelo", la "<em>a</em>" en "carmelo", las dos "<em>a</em>"es en "caarmelo" y las tres primeras "<em>a</em>"es en "caaaaaaarmelo". Observa que al comparar "caaaaaaarmelo", encuentra las "aaa", aunque la cadena original tenía más "<em>a</em>"es.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad posible de la cadena. El caracter <code>?</code> después del cuantificador hace que el cuantificador "no sea codicioso": lo cual significa que se detendrá tan pronto como encuentre una coincidencia. Por ejemplo, dada una cadena como "algún <foo> <bar> nuevo </bar> </foo>":</p> + + <ul> + <li><code>/<.*>/</code> coincidirá con "<foo> <bar> nuevo </bar> </foo>"</li> + <li><code>/<.*?>/</code> coincidirá con "<foo>"</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Patrón_repetido">Patrón repetido</h3> + +<pre class="brush: js notranslate">var palabraTerminadaConAes = /\w+a+\b/; +var mensajeDelicado = "Esto es Espartaaaaaaa"; + +console.table(mensajeDelicado.match(palabraTerminadaConAes)); // [ "Espartaaaaaaa" ] +</pre> + +<h3 id="Conteo_de_caracteres">Conteo de caracteres</h3> + +<pre class="brush: js notranslate">var palabraDeUnaLetra = /\b\w\b/g; +var palabraNoTanLarga = /\b\w{1,6}\b/g; +var palabraLaaaaarga = /\b\w{10,}\b/g; + +var frase = "¿Por qué me tengo que sentar a estudiar las tablas de multiplicar?"; + +console.table(frase.match(palabraDeUnaLetra)); // ["a"] +console.table(frase.match(palabraNoTanLarga)); // ["Por", "qu", "me", "tengo", "que", "sentar", "a", "las", "tablas", "de"] +console.table(frase.match(palabraLaaaaarga)); // ["multiplicar"] +</pre> + +<h3 id="Caracter_opcional">Caracter opcional</h3> + +<pre class="brush: js notranslate">var londinText = "He asked his neighbour a favour."; +var yanquiText = "He asked his neighbor a favor."; + +var regexpEnding = /\w+ou?r/g; +// \w+ Una o varias letras +// o seguida de una "o", +// u? opcionalmente seguida de una "u" +// r seguida de una "r" + +console.table(londinText.match(regexpEnding)); +// ["neighbour", "favour"] + +console.table(yanquiText.match(regexpEnding)); +// ["neighbor", "favor"] +</pre> + +<h3 id="Codicioso_versus_no_codicioso">Codicioso versus no codicioso</h3> + +<pre class="brush: js notranslate">var texto = "Debo estar muy cerca del centro de la tierra."; +var regexpCodiciosa = /[\w ]+/; +// [\w ] una letra del alfabeto latino o un espacio en blanco +// + una o varias veces + +console.log(texto.match(regexpCodiciosa)[0]); +// "Debo estar muy cerca del centro de la tierra." +// casi todo el texto coincide (omite el caracter de punto) + +var regexpNoCodiciosa = /[\w ]+?/; // Observa el signo de interrogación +console.log(texto.match(regexpNoCodiciosa)); +// "D" +// La coincidencia es la más pequeña posible +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-quantifier', 'RegExp: Quantifiers')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html new file mode 100644 index 0000000000..7fc434a0dc --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html @@ -0,0 +1,177 @@ +--- +title: Escapes de propiedades Unicode +slug: Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Referencia + - escapes de propiedades unicode + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los <strong>escapes de propiedad Unicode</strong> en las {{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}} permiten la coincidencia de caracteres según sus propiedades Unicode. Un caracter se describe mediante varias propiedades que, o bien, son binarias ("tipo booleano") o, no binarias. Por ejemplo, puedes usar escapes de propiedades Unicode para reconocer emojis, signos de puntuación, letras (incluso letras de idiomas específicos o scripts), etc.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-unicode-property-escapes.html", "taller")}}</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Para que funcionen los escapes de propiedad Unicode, una expresión regular debe utilizar {{JSxRef("../Guide/Regular_Expressions", "la bandera <code>u</code>", "#Busqueda_avanzada_con_banderas")}} que indica que una cadena se debe considerar como una serie de puntos de código Unicode. Consulta también {{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Algunas propiedades Unicode abarcan muchos más caracteres que algunas {{JSxRef("../Guide/Regular_Expressions/Character_Classes", "clases de caracteres")}} (como <code>\w</code> que coincide solo con letras latinas, desde <code>a</code> hasta <code>z</code>) pero esta última es más compatible con los navegadores (a partir de enero de 2020).</p> +</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<pre class="brush: js notranslate">// Valores no binarios +\p{<em>UnicodePropertyValue</em>} +\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>} + +// Valores binarios y no binarios +\p{<em>UnicodeBinaryPropertyName</em>} + +// Negación: \P se niega con \p +\P{<em>UnicodePropertyValue</em>} +\P{<em>UnicodeBinaryPropertyName</em>} +</pre> + +<ul> + <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">Categoría general</a> (<code>gc</code> por «<em><strong>g</strong>eneral <strong>c</strong>ategory</em>»)</li> + <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code> por «<em><strong>sc</strong>ript</em>»)</li> + <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Extensiones de script</a> (<code>scx</code> por «<em><strong>sc</strong>ript e<strong>x</strong>tensions</em>»)</li> +</ul> + +<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt<span style="display: none;"> </span></a></p> + +<dl> + <dt>UnicodeBinaryPropertyName</dt> + <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alfabético</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítico</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Dígito hexadecimal</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio en blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd> + <dt>NombreDePropiedadUnicode</dt> + <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd> + <dt>ValorDePropiedadUnicode</dt> + <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir <code>Nd</code>, <code>digit</code>, o <code>Decimal_Number</code>). Para la mayoría de los valores, la parte <em><code>NombreDePropiedadUnicode</code></em> y el signo igual se pueden omitir. Si se especifica un <em><code>NombreDePropiedadUnicode</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Debido a que hay muchas propiedades y valores disponibles, no los describiremos exhaustivamente aquí, en su lugar proporcionaremos varios ejemplos.</p> +</div> + +<h2 id="Justificación">Justificación</h2> + +<p>Antes de ES2018, no existía una forma eficiente de hacer coincidir caracteres de diferentes conjuntos basados en <code>scripts</code> (como macedonio, griego, georgiano, etc.) o <code>propertyName</code> (como Emoji, etc.) en JavaScript. Consulta la <a href="https://github.com/tc39/proposal-regexp-unicode-property-escapes">propuesta tc39 sobre escapes de propiedad Unicode</a> para obtener más información.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Categorías_generales">Categorías generales</h3> + +<p>Las categorías generales se utilizan para clasificar caracteres Unicode, y hay subcategorías disponibles para definir una categorización más precisa. Es posible utilizar formas cortas o largas en los escapes de propiedades Unicode.</p> + +<p>Se pueden utilizar para reconocer letras, números, símbolos, signos de puntuación, espacios, etc. Para obtener una lista más exhaustiva de categorías generales, consulta <a href="https://unicode.org/reports/tr18/#General_Category_Property">la especificación Unicode</a>.</p> + +<pre class="brush: js notranslate">// encontrar todas las letras de un texto +let historia = "Es el gato de Cheshire: ahora tendré alguien con quien hablar"; + +// Forma más explícita +historia.match(/\p{General_Category=Letter}/gu); + +// No es obligatorio utilizar el nombre de la propiedad para las categorías generales +historia.match(/\p{Letter}/gu); + +// Esto es equivalente (alias corto): +historia.match(/\p{L}/gu); + +// Esto también es equivalente (conjunción de todas las subcategorías que utilizan alias cortos) +historia.match(/\p{Lu}|\p{Ll}|\p{Lt}|\p{Lm}|\p{Lo}/gu); +</pre> + +<h3 id="Scripts_y_extensiones_de_script">Scripts y extensiones de script</h3> + +<p>Algunos idiomas usan diferentes signos para su sistema de escritura. Por ejemplo, el Inglés y el Español se escriben con los signos latinos, mientras que el Árabe y el Ruso se escriben con otros signos (Árabe y Cirílico, respectivamente). Las propiedades Unicode <code>Script</code> y <code>Script_Extensions</code> permiten que las expresiones regulares coincidan con los caracteres según el script con el que se utilizan principalmente (<code>Script</code>) o según el conjunto de los scripts a los que pertenecen (<code>Script_Extensions</code>).</p> + +<p>Por ejemplo, <code>A</code> pertenece al script <code>Latin</code> y <code>ε</code> al script <code>Greek</code> (Griego).</p> + +<pre class="brush: js notranslate">let caracteresMezclados = "aεЛ"; + +// Usando el nombre canónico "largo" del script +caracteresMezclados.match(/\p{Script=Latin}/u); // a + +// Usando un alias corto para el script +caracteresMezclados.match(/\p{Script=Greek}/u); // ε + +// Usando el nombre corto Sc para la propiedad Script +caracteresMezclados.match(/\p{Sc=Cyrillic}/u); // Л +</pre> + +<p>Para obtener más detalles, consulta <a href="https://unicode.org/reports/tr24/#Script">la especificación Unicode</a> y la <a href="https://tc39.es/ecma262/#table-unicode-script-values">Tabla de scripts en la especificación ECMAScript</a>.</p> + +<p>Si se usa un carácter en un conjunto limitado de scripts, la propiedad <code>Script</code> solo coincidirá con el script "predominante" utilizado. Si quieres hacer coincidir caracteres basados en un script "no predominante", podrías usar la propiedad <code>Script_Extensions</code> (<code>Scx</code> para abreviar).</p> + +<pre class="brush: js notranslate">// ٢ es el dígito 2 en notación Árabe-Índica +// si bien está escrito en un script predominante en árabe +// también se puede escribir en el script Thaana + +"٢".match(/\p{Script=Thaana}/u); +// null ya que Thaana no es el script predominante super() + +"٢".match(/\p{Script_Extensions=Thaana}/u); +// ["٢", index: 0, input: "٢", groups: undefined] +</pre> + +<h3 id="Escapes_de_propiedades_Unicode_versus_Clases_de_caracteres">Escapes de propiedades Unicode versus Clases de caracteres</h3> + +<p>Con las expresiones regulares de JavaScript, también es posible utilizar {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "clases de caracteres")}} y especialmente <code>\w</code> o <code>\d</code> para hacer coincidir letras o dígitos. Sin embargo, estos formularios solo coinciden con caracteres de la escritura <em>latina</em> (en otras palabras, de la <code>a</code> a la <code>z</code> y <code>A</code> a <code>Z</code> para <code>\w</code> y <code>0</code> a <code>9</code> para <code>\d</code>). Como se muestra en {{JSxRef("../Guide/Regular_Expressions/Clases_de_caracteres", "este ejemplo", "#Busca_una_palabra_de_caracteres_Unicode")}}, puede ser un poco torpe trabajar con textos no latinos.</p> + +<p>Las categorías de escape de propiedad Unicode abarcan muchos más caracteres y <code>\p{Letter}</code> o <code>\p{Number}</code> funcionarán para cualquier script.</p> + +<pre class="brush: js notranslate">// Intentando usar rangos para evitar limitaciones de \w: + +const textoNoEs = "Приключения Алисы в Стране чудес"; +const regexpPalabraBMP = /([\u0000-\u0019\u0021-\uFFFF])+/gu; +// BMP pasa por U+0000 a U+FFFF pero el espacio es U+0020 + +console.table(textoNoEs.match(regexpPalabraBMP)); + +// El uso de la propiedad Unicode se escapa en su lugar +const regexpEPU = /\p{L}+/gu; +console.table(textoNoEs.match(regexpEPU)); +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-runtime-semantics-unicodematchproperty-p', 'RegExp: Escapes de propiedades Unicode')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Grupos_y_rangos", "Grupos y rangos")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> + <li>{{JSxRef("Objetos_globales/RegExp/unicode", "RegExp.prototype.unicode")}}</li> + <li><a href="https://en.wikipedia.org/wiki/Unicode_character_property">Propiedades de caracteres unicode — Wikipedia</a></li> + <li><a href="https://2ality.com/2017/07/regexp-unicode-property-escapes.html">Una entrada en el blog de Axel Rauschmayer sobre los escapes de propiedades Unicode</a></li> + <li><a href="https://unicode.org/reports/tr18/#Categories">El documento Unicode para las propiedades Unicode</a></li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html new file mode 100644 index 0000000000..34eed03589 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html @@ -0,0 +1,176 @@ +--- +title: Grupos y rangos +slug: Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos +tags: + - Expresiones Regulares + - Guía + - JavaScript + - Rangos + - Referencia + - grupos + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Los grupos y rangos indican grupos y rangos de caracteres de expresión.</p> + +<div>{{EmbedInteractiveExample("pages/js/regexp-groups-ranges.html")}}</div> + +<h2 id="Tipos">Tipos</h2> + +<div class="hidden">La siguiente sección también está duplicada en {{JSxRef("../Guide/Regular_Expressions/Hoja_de_referencia", "esta hoja de trucos")}}. No olvides editarla también, ¡gracias!</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> coincide con "verde" en "manzana verde" y "roja" en "manzana roja".</p> + </td> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p> + + <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p> + + <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> coinciden con la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "sin-fin".</p> + + <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "s" en "sin-fin".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p> + + <div class="blockIndicator note"> + <p>El caracter ^ también puede indicar el {{JSxRef("../Guide/Regular_Expressions/Assertions", "comienzo de la entrada")}}.</p> + </div> + </td> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p><strong>Grupo de captura</strong>: Coincide con <code><em>x</em></code> y recuerda la coincidencia. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p> + + <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p> + + <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los grupos de no captura (ve {{anch("GpoDeNoCaptura", "más abajo")}}).</p> + + <p>{{JSxRef("Objetos_globales/String/match", "String.match()")}} no devolverá grupos si se establece el indicador <code>/.../g</code>. Sin embargo, aún puedes usar {{JSxRef("Objetos_globales/String/matchAll", "String.matchAll()")}} para obtener todas las coincidencias.</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Donde "n" es un número entero positivo. Una referencia inversa a la última subcadena que coincide con el paréntesis <code>n</code> en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/manzana(,)\snaranja\1/</code> coincide con "manzana, naranja" en "manzana, naranja, cereza, melocotón".</p> + </td> + </tr> + <tr> + <td><code>\k<Nombre></code></td> + <td> + <p>Una referencia inversa a la última subcadena que coincide con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code><Nombre></code>.</p> + + <p>Por ejemplo, <code>/(?<trato>\w+), si \k<trato>/</code> coincide con "Sr., sí Sr." en "¿Me copias? ¡Sr., sí Sr.!".</p> + + <div class="blockIndicator note"> + <p>aquí se usa <code>\k</code> literalmente para indicar el comienzo de una referencia inversa a un grupo de captura con nombre.</p> + </div> + </td> + </tr> + <tr> + <td><code>(?<Nombre>x)</code></td> + <td> + <p><strong>Grupo de captura con nombre</strong>: Coincide con "x" y la almacena en la propiedad de grupos de las coincidencias devueltas con el nombre especificado por <code><Nombre></code>. Los corchetes angulares (<code><</code> y <code>></code>) son necesarios para el nombre del grupo.</p> + + <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podrías usar <code>/\((?<area>\d\d\d)\)/</code>. El número resultante aparecería en <code>matches.groups.area</code>.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td><span id="GpoDeNoCaptura"><strong>Grupo de no captura</strong></span>: Coincide con "x" pero no recuerda la coincidencia. La subcadena coincidente no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Conteo_de_vocales">Conteo de vocales</h3> + +<pre class="brush: js notranslate">var aliceExcerpt = "Hubo un largo silencio después de esto, y Alicia solo podía escuchar susurros de vez en cuando."; +var regexpVowels = /[aeiouy]/g; + +console.log("Número de vocales minúsculas: ", aliceExcerpt.match(regexpVowels).length); +// Número de vocales: 34</pre> + +<h3 id="Uso_de_grupos">Uso de grupos</h3> + +<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe +First_Name: Jane, Last_Name: Smith`; + +let regexpNames = /First_Name: (\w+), Last_Name: (\w+)/mg; +let match = regexpNames.exec(personList); +do { + console.log(`Hola ${match[1]} ${match[2]}`); +} while((match = regexpNames.exec(personList)) !== null); +</pre> + +<h3 id="Uso_de_grupos_con_nombre">Uso de grupos con nombre</h3> + +<pre class="brush: js notranslate">let personList = `First_Name: John, Last_Name: Doe +First_Name: Jane, Last_Name: Smith`; + +let regexpNames = /First_Name: (?<firstname>\w+), Last_Name: (?<lastname>\w+)/mg; +let match = regexpNames.exec(personList); +do { + console.log(`Hola ${match.groups.firstname} ${match.groups.lastname}`); +} while((match = regexpNames.exec(personList)) !== null);</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: No todos los navegadores admiten esta función; consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla de compatibilidad", "#Compatibilidad_del_navegador")}}.</p> +</div> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-classranges', 'RegExp: Ranges')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>Para obtener información sobre la compatibilidad del navegador, consulta la {{JSxRef("../Guide/Regular_Expressions", "tabla principal de compatibilidad de expresiones regulares", "#Compatibilidad_del_navegador")}}.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Guía de expresiones regulares")}} + + <ul> + <li>{{JSxRef("../Guide/Regular_Expressions/Character_Classes", "Clases de caracteres")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Assertions", "Aserciones")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Cuantificadores", "Cuantificadores")}}</li> + <li>{{JSxRef("../Guide/Regular_Expressions/Escapes_de_propiedades_Unicode", "Escapes de propiedades Unicode")}}</li> + </ul> + </li> + <li>{{JSxRef("Objetos_globales/RegExp", "El constructor RegExp()")}}</li> +</ul> diff --git a/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html new file mode 100644 index 0000000000..accc783aff --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html @@ -0,0 +1,451 @@ +--- +title: Hoja de referencia de sintaxis de expresiones regulares +slug: Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia +tags: + - Cheatsheet + - Expresiones Regulares + - Guía + - Hoja de referencia + - JavaScript + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Cheatsheet +--- +<div>{{jsSidebar("Guía de JavaScript")}}</div> + +<p><span class="seoSummary">Esta página proporciona una hoja de referencia general de todas las capacidades de la sintaxis de <code>RegExp</code> agregando el contenido de los artículos en la guía <code>RegExp</code>. Si necesitas más información sobre un tema específico, sigue el enlace del título correspondiente para acceder al artículo completo o dirígete a <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/">la guía</a>.</span></p> + +<h2 id="Clases_de_caracteres"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">el artículo original</a></div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + </tbody> + <tbody> + <tr> + <td><code>.</code></td> + <td> + <p>Tiene uno de los siguientes significados:</p> + + <ul> + <li>Encuentra cualquier caracter único <em>excepto</em> terminadores de línea: <code>\n</code>, <code>\r</code>, <code>\u2028</code> o <code>\u2029</code>. Por ejemplo, <code>/.y/</code> reconoce "my" y "ay", pero no "yes", en "yes make my day".</li> + <li>Dentro de un juego de caracteres, el punto pierde su significado especial y concuerda con un punto literal.</li> + </ul> + + <p>Ten en cuenta que el indicador multilínea <code>m</code> no cambia el comportamiento del punto. Por lo tanto, para buscar en un patrón multilínea, puedes usar el juego de caracteres <code>[^]</code> — este encontrará con cualquier caracter, incluidas las nuevas líneas.</p> + + <p>ES2018 agregó el indicador <code>s</code> "<em>dotAll</em>", que permite que el punto también concuerde con los terminadores de línea.</p> + </td> + </tr> + <tr> + <td><code>\d</code></td> + <td> + <p>Busca cualquier dígito (número arábigo). Equivalente a <code>[0-9]</code>. Por ejemplo, <code>/\d/</code> o <code>/[0-9]/</code> encuentra el "2" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\D</code></td> + <td> + <p>Busca cualquier caracter que no sea un dígito (número arábigo). Equivalente a <code>[^0-9]</code>. Por ejemplo, <code>/\D/</code> o <code>/[^0-9]/</code> encuentra la "B" en "B2 es el número de suite".</p> + </td> + </tr> + <tr> + <td><code>\w</code></td> + <td> + <p>Busca cualquier caracter alfanumérico del alfabeto latino básico, incluido el caracter de subrayado. Equivalente a <code>[A-Za-z0-9_]</code>. Por ejemplo, <code>/\w/</code> encuentra la "m" en "manzana", el "5" en "$5.28" y el "3" en "3D".</p> + </td> + </tr> + <tr> + <td><code>\W</code></td> + <td> + <p>Busca cualquier caracter que no sea un caracter de palabra del alfabeto latino básico. Equivalente a <code>[^A-Za-z0-9_]</code>. Por ejemplo, <code>/\W/</code> o <code>/[^A-Za-z0-9_]/</code> encuentra el caracter "%" en "50%".</p> + </td> + </tr> + <tr> + <td><code>\s</code></td> + <td> + <p>Busca un solo caracter de espacio en blanco, incluido el espacio, tabulación, avance de página, avance de línea y otros espacios Unicode. Equivalente a <code>[ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\s\w*/</code> reconoce " bar" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\S</code></td> + <td> + <p>Busca un solo caracter que no sea un espacio en blanco. Equivalente a <code>[^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code>. Por ejemplo, <code>/\S\w*/</code> encuentra "foo" en "foo bar".</p> + </td> + </tr> + <tr> + <td><code>\t</code></td> + <td>Coincide con una tabulación horizontal.</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>Coincide con un retorno de carro.</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>Coincide con un salto de línea.</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>Coincide con una tabulación vertical.</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>Coincide con un caracter de avance de página.</td> + </tr> + <tr> + <td><code>[\b]</code></td> + <td>Coincide con un caracter de retroceso. Si estás buscando el caracter de límite de palabra (<code>\b</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">Límites</a>.</td> + </tr> + <tr> + <td><code>\0</code></td> + <td>Coincide con un caracter <code>NUL</code>. No sigue a este con otro dígito.</td> + </tr> + <tr> + <td><code>\c<em>X</em></code></td> + <td> + <p>Coincide con un caracter de control usando <a href="https://en.wikipedia.org/wiki/Caret_notation">notación de acento circunflejo</a>, donde "X" es una letra de la A a la Z (correspondiente a los puntos de código <code>U+0001</code><em>-</em><code>U+001F</code>). Por ejemplo, <code>/\cM/</code> reconoce el caracter "\r" en "\r\n".</p> + </td> + </tr> + <tr> + <td><code>\x<em>hh</em></code></td> + <td>Busca el caracter con el código <code><em>hh</em></code> (dos dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>hhhh</em></code></td> + <td>Busca una unidad de código UTF-16 con el valor <code><em>hhhh</em></code> (cuatro dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\u<em>{hhhh}</em> o <em>\u{hhhhh}</em></code></td> + <td>(Solo cuando se establece el indicador <code>u</code>). Busca el caracter con el valor Unicode <code>U+<em>hhhh</em></code> o <code>U+<em>hhhhh</em></code> (dígitos hexadecimales).</td> + </tr> + <tr> + <td><code>\</code></td> + <td> + <p>Indica que el siguiente caracter se debe tratar de manera especial o "escaparse". Se comporta de dos formas.</p> + + <ul> + <li>Para los caracteres que generalmente se tratan literalmente, indica que el siguiente caracter es especial y no se debe interpretar literalmente. Por ejemplo, <code>/b/</code> reconoce el caracter "b". Al colocar una barra invertida delante de "b", es decir, usando <code>/\b/</code>, el caracter se vuelve especial para significar que concuerda con el límite de una palabra.</li> + <li>Para los caracteres que generalmente se tratan de manera especial, indica que el siguiente caracter no es especial y se debe interpretar literalmente. Por ejemplo, "*" es un caracter especial que significa que deben reconocer 0 o más ocurrencias del caracter anterior; por ejemplo, <code>/a*/</code> significa reconocer 0 o más "a"s. Para emparejar el <code>*</code> literal, precédelo con una barra invertida; por ejemplo, <code>/a\*/</code> concuerda con "a*".</li> + </ul> + + <p>Ten en cuenta que algunos caracteres como <code>:</code>, <code>-</code>, <code>@</code>, etc. no tienen un significado especial cuando se escapan ni cuando no se escapan. Las secuencias de escape como <code>\:</code>, <code>\-</code>, <code>\@</code> serán equivalentes a sus equivalentes de caracteres literales sin escapar en expresiones regulares. Sin embargo, en las expresiones regulares con <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags_2">indicador Unicode</a>, esto provocará un error de <em>escape de identidad no válido</em>. Esto se hace para asegurar la compatibilidad con el código existente que usa nuevas secuencias de escape como <code>\p</code> o <code>\k</code>.</p> + + <div class="blockIndicator note"> + <p>Para reconocer este caracter literalmente, escápalo consigo mismo. En otras palabras, para buscar <code>\</code> usa <code>/\\/</code>.</p> + </div> + </td> + </tr> + </tbody> +</table> + +<h2 id="Aserciones"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">el artículo original</a></div> + +<h3 id="Aserciones_de_tipo_límite">Aserciones de tipo límite</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p>Coincide con el comienzo de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca inmediatamente después de un caracter de salto de línea. Por ejemplo, <code>/^A/</code> no reconoce la "A" en "an A", pero encuentra la primera "A" en "An A".</p> + + <div class="blockIndicator note"> + <p>Este caracter tiene un significado diferente cuando aparece al comienzo de un <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupo</a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Coincide con el final de la entrada. Si el indicador multilínea se establece en <code>true</code>, también busca hasta inmediatamente antes de un caracter de salto de línea. Por ejemplo, <code>/a$/</code> no reconoce la "t" en "eater", pero sí en "eat".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Marca el límite de una palabra. Esta es la posición en la que un caracter de palabra no va seguido o precedido por otro caracter de palabra, por ejemplo, entre una letra y un espacio. Ten en cuenta que el límite de una palabra encontrada no se incluye en el resultado. En otras palabras, la longitud de un límite de palabra encontrada es cero.</p> + + <p>Ejemplos:</p> + + <ul> + <li><code>/\bm/</code> reconoce la "m" en "moon".</li> + <li><code>/oo\b/</code> no reconoce "oo" en "moon", porque "oo" va seguido de "n", que es un caracter de palabra.</li> + <li><code>/oon\b/</code> encuentra "oon" en "moon", porque "oon" es el final de la cadena, por lo que no va seguido de un caracter de palabra.</li> + <li><code>/\w\b\w/</code> nunca encontrará nada, porque un caracter de palabra nunca puede ir seguido de un caracter que no sea de palabra y otro de palabra.</li> + </ul> + + <p>Para encontrar un caracter de retroceso (<code>[\b]</code>), consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a>.</p> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Coincide con un límite sin palabra. Esta es una posición en la que el caracter anterior y siguiente son del mismo tipo: ambos deben ser palabras o ambos deben ser no palabras, por ejemplo, entre dos letras o entre dos espacios. El principio y el final de una cadena se consideran no palabras. Igual que el límite de palabras encontradas, el límite sin palabras reconocidas tampoco se incluye en el resultado. Por ejemplo, <code>/\Bon/</code> reconoce "on" en "at noon", y <code>/ye\B/</code> encuentra "ye" en "possibly yesterday".</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Otras_aserciones">Otras aserciones</h3> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El caracter <code>?</code> también se puede utilizar como cuantificador.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>x(?=y)</code></td> + <td> + <p><strong>Aserción anticipada</strong>: Coincide con "x" solo si "x" va seguida de "y". Por ejemplo, /<code>Jack(?=Sprat)/</code> reconocerá a "Jack" solo si va seguida de "Sprat".<br> + <code>/Jack(?=Sprat|Frost)/</code> encontrará a "Jack" solo si va seguida de "Sprat" o "Frost". Sin embargo, ni "Sprat" ni "Frost" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>x(?!y)</code></td> + <td> + <p><strong>Aserción de búsqueda anticipada negativa</strong>: reconoce la "x" solo si la "x" <span>no va seguida de</span> "y"<span>.</span> Por ejemplo, <code>/\d+(?!\.)/</code> <span>reconoce un número solo si no va seguido de un punto decimal.</span> <code>/\d+(?!\.)/.exec('3.141')</code> halla el "141" pero no el "3".</p> + </td> + </tr> + <tr> + <td><code>(?<=y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa</strong>: encontrará "x" solo si "x" está precedida por "y". Por ejemplo, <code>/(?<=Jack)Sprat/</code><span> reconoce a "Sprat" solo si está precedido por "Jack".</span> <code>/(?<=Jack|Tom)Sprat/</code> empareja "Sprat" solo si está precedido por "Jack" o "Tom". Sin embargo, ni "Jack" ni "Tom" forman parte del resultado.</p> + </td> + </tr> + <tr> + <td><code>(?<!y)x</code></td> + <td> + <p><strong>Aserción de búsqueda inversa negativa</strong>: Reconoce la "x" solo si "x" no está precedida por "y". Por ejemplo, <code>/(?<!-)\d+/</code> <span>encuentra un número solo si no está precedido por un signo menos</span>. <code>/(?<!-)\d+/.exec('3')</code> encuentra el "3". <code>/(?<!-)\d+/.exec('-3')</code> no lo reconoce porque el número está precedido por el signo menos.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Grupos_y_rangos"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">el artículo original</a></div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>|<em>y</em></code></td> + <td> + <p>Coincide con "x" o "y". Por ejemplo, <code>/verde|roja/</code> reconoce el "verde" en "manzana verde" y "roja" en "manzana roja".</p> + </td> + </tr> + <tr> + <td><code>[xyz]<br> + [a-c]</code></td> + <td> + <p>Un juego de caracteres. Coincide con cualquiera de los caracteres incluidos. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. También es posible incluir una clase de caracteres en un juego de caracteres.</p> + + <p>Por ejemplo, <code>[abcd]</code> es lo mismo que <code>[a-d]</code>. Coincide con la "b" en "brisket" y la "c" en "chop".</p> + + <p>Por ejemplo, <code>[abcd-]</code> y <code>[-abcd]</code> reconoce la "b" en "brisket", la "c" en "chop" y el "-" (guión) en "non-profit".</p> + + <p>Por ejemplo, <code>[\w-]</code> es lo mismo que <code>[A-Za-z0-9_-]</code>. Ambos reconocen la "b" en "brisket", la "c" en "chop" y la "n" en "non-profit".</p> + </td> + </tr> + <tr> + <td> + <p><code>[^xyz]<br> + [^a-c]</code></p> + </td> + <td> + <p>Un juego de caracteres negado o complementado. Es decir, hallan cualquier cosa que no esté encerrada entre corchetes. Puedes especificar un rango de caracteres mediante el uso de un guión, pero si el guión aparece como el primero o último caracter entre corchetes, se toma como un guión literal para incluirse en el juego de caracteres como un caracter normal. Por ejemplo, <code>[^abc]</code> es lo mismo que <code>[^a-c]</code>. Inicialmente halla la "o" en "bacon" y la "h" en "chuleta".</p> + + <div class="blockIndicator note"> + <p>El caracter ^ además puede indicar el <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Boundaries">comienzo de la entrada</a>.</p> + </div> + </td> + </tr> + <tr> + <td><code>(<em>x</em>)</code></td> + <td> + <p><strong>Grupo de captura</strong>: Encuentra la <code><em>x</em></code> y la recuerda. Por ejemplo, <code>/(foo)/</code> encuentra y recuerda "foo" en "foo bar". </p> + + <p>Una expresión regular puede tener varios grupos de captura. En los resultados, coincide con los grupos capturados normalmente en un arreglo cuyos miembros están en el mismo orden que los paréntesis de la izquierda en el grupo capturado. Este suele ser solo el orden de los propios grupos capturados. Esto se vuelve importante cuando los grupos capturados están anidados. Se accede a las coincidencias utilizando el índice de los elementos del resultado (<code>[1], ..., [n]</code>) o desde las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</p> + + <p>Los grupos de captura tienen una penalización de rendimiento. Si no necesitas que se recupere la subcadena coincidente, prefiere los paréntesis que no capturen (ve más abajo).</p> + + <p><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.match()</a></code> no devolverá grupos si el indicador <code>/.../g</code> está configurado. Sin embargo, aún puedes usar <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/String/matchAll">String.matchAll()</a></code> para obtener todas los encontrados.</p> + </td> + </tr> + <tr> + <td><code>\<em>n</em></code></td> + <td> + <p>Donde "n" es un número entero positivo. Una referencia posterior a la última subcadena que coincide con el paréntesis n en la expresión regular (contando los paréntesis izquierdos). Por ejemplo, <code>/apple(,)\sorange\1/</code> coincide con "apple, orange" en "apple, orange, cherry, peach".</p> + </td> + </tr> + <tr> + <td>\k<Name></td> + <td> + <p>Una referencia inversa a la última subcadena encontrada con el grupo de captura <strong>N</strong><strong>ombrado</strong> especificado por <code><Name></code>.</p> + + <p>Por ejemplo, <code>/(?<title>\w+), yes \k<title>/</code> concuerda con "Sir, yes Sir" en "Do you copy? Sir, yes Sir!".</p> + + <div class="blockIndicator note"> + <p><code>\k</code> aquí se usa literalmente para indicar el comienzo de una referencia a un grupo de captura nombrado.</p> + </div> + </td> + </tr> + <tr> + <td><code>(?<Name>x)</code></td> + <td> + <p><strong>Grupo de captura nombrado</strong>: reconoce la "x" y la almacena en la propiedad <code>group</code> del resultado devuelto bajo el nombre especificado por <code><Name></code>. Los corchetes angulares (<code><</code> y <code>></code>) son obligatorios para el nombre del grupo.</p> + + <p>Por ejemplo, para extraer el código de área de Estados Unidos de un número de teléfono, podríamos usar <code>/\((?<area>\d\d\d)\)/</code>. El número resultante debería aparecer en <code>matches.groups.area</code>.</p> + </td> + </tr> + <tr> + <td><code>(?:<em>x</em>)</code></td> + <td><strong>Grupo sin captura</strong>: reconoce la "x" pero no recuerda el resultado. La subcadena encontrada no se puede recuperar de los elementos del arreglo resultante (<code>[1], ..., [n]</code>) o de las propiedades predefinidas del objeto <code>RegExp</code> (<code>$1, ..., $9</code>).</td> + </tr> + </tbody> +</table> + +<h2 id="Cuantificadores"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">el artículo original</a></div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A continuación, <em>elemento</em> se refiere no solo a caracteres singulares, sino que también incluye <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedad Unicode</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>.</p> +</div> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caracteres</th> + <th scope="col">Significado</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><em>x</em>*</code></td> + <td> + <p>Concuerda 0 o más veces con el elemento "x" anterior. Por ejemplo, <code>/bo*/</code> reconoce a "boooo" en "Un fantasma booooed" y "b" en "A bird warbled", pero nada en "Una cabra gruñó".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>+</code></td> + <td> + <p>Encuentra 1 o más veces el elemento "x" anterior Equivalente a <code>{1,}</code>. Por ejemplo, <code>/a+/</code> encuentra la "a" en "candy" y todas las "a"es en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>?</code></td> + <td> + <p>Halla 0 o 1 vez el elemento "x" anterior. Por ejemplo, <code>/e?Le?/</code> reconoce a "el" en "ángel" y a "le" en "angle".</p> + + <p>Si se usa inmediatamente después de cualquiera de los cuantificadores <code>*</code>, <code>+</code>, <code>?</code>o <code>{}</code>, hace que el cuantificador no codicioso (que reconoce el número mínimo de veces), a diferencia del predeterminado, que es codicioso (que reconoce el número máximo de veces).</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda exactamente con "n" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{2}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a"s en "caandy" y las dos primeras "a"s en "caaandy ".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,}</code></td> + <td> + <p>Donde "n" es un número entero positivo, concuerda con al menos "n" apariciones del elemento "x". Por ejemplo, <code>/a{2,}/</code> no reconoce la "a" en "candy", pero reconoce todas las "a" en "caandy" y en "caaaaaaandy".</p> + </td> + </tr> + <tr> + <td><code><em>x</em>{<em>n</em>,<em>m</em>}</code></td> + <td> + <p>Donde "n" es 0 o un número entero positivo, "m" es un número entero positivo y <code><em>m</em> > <em>n</em></code>, reconoce por lo menos "n" y como máximo "m" apariciones del elemento "x" anterior. Por ejemplo, <code>/a{1,3}/</code> no reconoce nada en "cndy", la "a" en "caramelo", las dos "a" en "caandy" y las tres primeras "a" está en "caaaaaaandy". Observa que al comparar "caaaaaaandy", las "aaa" encontradas, aunque la cadena original tenía más "a" s.</p> + </td> + </tr> + <tr> + <td> + <p><code><em>x</em>*?</code><br> + <code><em>x</em>+?</code><br> + <code><em>x</em>??</code><br> + <code><em>x</em>{n}?</code><br> + <code><em>x</em>{n,}?</code><br> + <code><em>x</em>{n,m}?</code></p> + </td> + <td> + <p>De manera predeterminada, los cuantificadores como <code>*</code> y <code>+</code> son "codiciosos", lo cual significa que intentan hacer coincidir la mayor cantidad de cadena posible. El carácter <code>?</code> después del cuantificador hace que este sea "no codicioso": lo cual significa que se detendrá tan pronto como encuentre una concordancia. Por ejemplo, dada una cadena "algo como <foo> <bar> new </bar> </foo>":</p> + + <ul> + <li><code>/<.*>/</code> reconocerá "<foo> <bar> nuevo </bar> </foo>"</li> + <li><code>/<.*?>/</code> encajará "<foo>"</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Escapa_la_propiedad_Unicode"><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapa la propiedad Unicode</a></h2> + +<div class="hidden">Si deseas contribuir a este documento, edita también <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">el artículo original</a></div> + +<pre class="brush: js notranslate">// Valores no binarios +\p{<em>UnicodePropertyValue</em>} +\p{<em>UnicodePropertyName</em>=<em>UnicodePropertyValue</em>} + +// Valores binarios y no binarios +\p{<em>UnicodeBinaryPropertyName</em>} + +// Negación: \P is negado \p +\P{<em>UnicodePropertyValue</em>} +\P{<em>UnicodeBinaryPropertyName</em>} +</pre> + +<dl> + <dt>UnicodeBinaryPropertyName</dt> + <dd>El nombre de una <a href="https://tc39.es/ecma262/#table-binary-unicode-properties">propiedad binaria</a>. Por ejemplo: <code><a href="https://unicode.org/reports/tr18/#General_Category_Property">ASCII</a></code>, <code><a href="https://unicode.org/reports/tr44/#Alphabetic">Alpha</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#Diacritic">Diacrítica</a></code>, <code><a href="https://unicode.org/reports/tr51/#Emoji_Properties">Emoji</a></code>, <code><a href="https://unicode.org/reports/tr44/#Hex_Digit">Hex_Digit</a></code>, <code>Math</code>, <code><a href="https://unicode.org/reports/tr44/#White_Space">Espacio_blanco</a></code>, etc. Consulta <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropList.txt">Unicode Data PropList.txt</a> para obtener más información.</dd> + <dt>UnicodePropertyName</dt> +</dl> + +<dl> + <dd>El nombre de una propiedad <a href="https://tc39.es/ecma262/#table-nonbinary-unicode-properties">no binaria</a>:</dd> +</dl> + +<ul> + <li><a href="https://unicode.org/reports/tr18/#General_Category_Property">General_Category</a> (<code>gc</code>)</li> + <li><a href="https://unicode.org/reports/tr24/#Script">Script</a> (<code>sc</code>)</li> + <li><a href="https://unicode.org/reports/tr24/#Script_Extensions">Script_Extensions</a> (<code>scx</code>)</li> +</ul> + +<p>Consulta también <a href="https://www.unicode.org/Public/UCD/latest/ucd/PropertyValueAliases.txt">PropertyValueAliases.txt</a></p> + +<dl> + <dt>UnicodePropertyValue</dt> + <dd>Uno de los fragmentos enumerados en la sección Valores, más adelante. Muchos valores tienen alias o abreviaturas (por ejemplo, el valor <code>Decimal_Number</code> para la propiedad <code>General_Category</code> se puede escribir cómo <code>Nd</code>, <code>digit</code>, o <code>Decimal_number</code>). Para la mayoría de los valores, la parte <em><code>UnicodePropertyName</code> </em> y el signo igual se pueden omitir. Si se especifica un <em><code>UnicodePropertyName</code></em>, el valor debe corresponder al tipo de propiedad proporcionado.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puesto que hay muchas propiedades y valores disponibles, no las describiremos exhaustivamente aquí, sino que proporcionaremos varios ejemplos.</p> +</div> diff --git a/files/es/web/javascript/guide/regular_expressions/index.html b/files/es/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..150d86b5f6 --- /dev/null +++ b/files/es/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,451 @@ +--- +title: Expresiones Regulares +slug: Web/JavaScript/Guide/Regular_Expressions +tags: + - Expresiones Regulares + - Guía + - Intermedio + - JavaScript + - Referencia + - RegExp + - regex +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> + +<p class="summary">Las expresiones regulares son patrones que se utilizan para hacer coincidir combinaciones de caracteres en cadenas. En JavaScript, las expresiones regulares también son objetos. Estos patrones se utilizan con los métodos {{jsxref("RegExp.exec", "exec()")}} y {{jsxref("RegExp.test", "test()")}} de {{jsxref("RegExp")}}, y con {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.replaceAll", "replaceAll()")}}, {{jsxref("String.search", "search()")}} y {{jsxref("String.split", "split()")}} métodos de {{jsxref("String")}}. Este capítulo describe las expresiones regulares de JavaScript.</p> + +<h2 id="Crear_una_expresión_regular">Crear una expresión regular</h2> + +<p>Construyes una expresión regular en una de estas dos formas:</p> + +<ul> + <li> + <p>Usando una expresión regular literal, que consiste en un patrón encerrado entre barras, como sigue:</p> + + <pre class="brush: js notranslate">let re = /ab+c/; +</pre> + + <p>Las expresiones regulares literales proporcionan la compilación de la expresión regular cuando se carga el script. Si la expresión regular permanece constante, su uso puede mejorar el rendimiento.</p> + </li> + <li> + <p>O llamando a la función constructora del objeto {{jsxref("RegExp")}}, de la siguiente manera:</p> + + <pre class="brush: js notranslate">let re = new RegExp('ab+c'); +</pre> + + <p>El uso de la función constructora proporciona una 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> + </li> +</ul> + +<h2 id="Escribir_un_patrón_de_expresión_regular">Escribir un patrón de expresión regular</h2> + +<p>Un patrón de expresión regular se compone de caracteres simples, como <code>/abc/</code>, o una combinación de caracteres simples y especiales, como <code>/ab*c/</code> o <code>/Capítulo (\d)\.\d*/</code>. El último ejemplo incluye paréntesis, que se utilizan como dispositivos de memoria. La coincidencia realizada con esta parte del patrón se recuerda para su uso posterior, como se describe en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Uso de grupos</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si ya estás familiarizado con las formas de una expresión regular, también puedes leer <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">la hoja de referencia</a> para una búsqueda rápida de un patrón/construcción específica.</p> +</div> + +<h3 id="Usar_patrones_simples">Usar patrones simples</h3> + +<p>Los patrones simples se construyen con caracteres para los que deseas encontrar una coincidencia directa. Por ejemplo, el patrón <code>/abc/</code> coincide con combinaciones de caracteres en cadenas solo cuando ocurre la secuencia exacta <code>"abc"</code> (todos los caracteres juntos y en ese orden). Tal coincidencia tendría éxito en las cadenas <code>"Hola, ¿conoces tu abc?"</code> y <code>"Los últimos diseños de aviones evolucionaron a partir de slabcraft"</code>. En ambos casos, la coincidencia es con la subcadena <code>"abc"</code>. No hay ninguna coincidencia en la cadena <code>"Grab crab"</code> porque aunque contiene la subcadena <code>"ab c"</code>, no contiene la subcadena <code>"abc"</code> exacta.</p> + +<h3 id="Usar_caracteres_especiales">Usar caracteres especiales</h3> + +<p>Cuando la búsqueda de una coincidencia requiere algo más que una coincidencia exacta, como por ejemplo buscar una o más 'b', o encontrar espacios en blanco, puedes incluir caracteres especiales en el patrón. Por ejemplo, para hacer coincidir <em>una sola <code>"a"</code> seguida de cero o más <code>"b"</code>s seguidas de <code>"c"</code></em>, usarías el patrón <code>/ab*c/</code>: el <code>*</code> después de <code>"b"</code> significa "0 o más apariciones del elemento anterior". En la cadena <code>"cbbabbbbcdebc"</code>, este patrón coincidirá con la subcadena <code>"abbbbc"</code>.</p> + +<p>Las siguientes páginas proporcionan listas de los diferentes caracteres especiales que encajan en cada categoría, junto con descripciones y ejemplos.</p> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></dt> + <dd>Las aserciones incluyen límites, que indican el comienzo y el final de líneas y palabras, y otros patrones que indican de alguna manera que el reconocimiento es posible (incluidas las expresiones anticipadas, inversas y condicionales).</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></dt> + <dd>Distingue diferentes tipos de caracteres. Por ejemplo, distinguir entre letras y dígitos.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></dt> + <dd>Indica grupos y rangos de caracteres de expresión.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></dt> + <dd>Indica el número de caracteres o expresiones que deben coincidir.</dd> + <dt><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></dt> + <dd>Distinguir según las propiedades de los caracteres Unicode, por ejemplo, letras mayúsculas y minúsculas, símbolos matemáticos y de puntuación.</dd> +</dl> + +<p>Si deseas ver todos los caracteres especiales que se pueden usar en expresiones regulares en una sola tabla, consulta lo siguiente:</p> + +<table class="standard-table"> + <caption>Caracteres especiales en expresiones regulares.</caption> + <thead> + <tr> + <th scope="col">Caracteres/construcciones</th> + <th scope="col">Artículo correspondiente</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\</code>, <code>.</code>, <code>\cX</code>, <code>\d</code>, <code>\D</code>, <code>\f</code>, <code>\n</code>, <code>\r</code>, <code>\s</code>, <code>\S</code>, <code>\t</code>, <code>\v</code>, <code>\w</code>, <code>\W</code>, <code>\0</code>, <code>\xhh</code>, <code>\uhhhh</code>, <code>\uhhhhh</code>, <code>[\b]</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">Clases de caracteres</a></p> + </td> + </tr> + <tr> + <td><code>^</code>, <code>$</code>, <code>x(?=y)</code>, <code>x(?!y)</code>, <code>(?<=y)x</code>, <code>(?<!y)x</code>, <code>\b</code>, <code>\B</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">Aserciones</a></p> + </td> + </tr> + <tr> + <td><code>(x)</code>, <code>(?:x)</code>, <code>(?<Name>x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos y rangos</a></p> + </td> + </tr> + <tr> + <td><code>*</code>, <code>+</code>, <code>?</code>, <code>x{<em>n</em>}</code>, <code>x{<em>n</em>,}</code>, <code>x{<em>n</em>,<em>m</em>}</code></td> + <td> + <p><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">Cuantificadores</a></p> + </td> + </tr> + <tr> + <td><code>\p{<em>UnicodeProperty</em>}</code>, <code>\P{<em>UnicodeProperty</em>}</code></td> + <td><a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">Escapes de propiedades Unicode</a></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">También está disponible una hoja de referencia más grande</a> (solo agregando partes de esos artículos individuales).</p> +</div> + +<h3 id="Escapando">Escapando</h3> + +<p>Si necesitas usar literalmente cualquiera de los caracteres especiales (en realidad buscando un <code>"*"</code>, por ejemplo), lo debes escapar colocando una barra invertida delante de él. Por ejemplo, para buscar <code>"a"</code> seguido de <code>"*"</code> seguido de <code>"b"</code>, usarías <code>/a\*b/</code> — la barra invertida "escapa" de <code>"*"</code>, volviéndola literal en lugar de especial.</p> + +<p>De manera similar, si estás escribiendo un literal de expresión regular y necesitas buscar una barra inclinada ("/"), la debes escapar (de lo contrario, esta termina el patrón). Por ejemplo, para buscar la cadena "/ejemplo/" seguida de uno o más caracteres alfabéticos, usarías <code>/\/ejemplo\/[a-z]+/i</code>: las barras invertidas antes de cada barra, las hace literales.</p> + +<p>Para hacer coincidir una barra invertida literal, debes escapar de la barra invertida. Por ejemplo, para encontrar la cadena "C:\" donde "C" puede ser cualquier letra, usarías <code>/[A-Z]:\\/</code> — la primera barra invertida escapa a la que sigue, por lo que la expresión busca una sola barra invertida literal.</p> + +<p>Si usas el constructor <code>RegExp</code> con un literal de cadena, recuerda que la barra invertida es un escape en los literales de cadena, por lo que para usarlo en la expresión regular, debes escapar en el nivel del literal de cadena. <code>/a\*b/</code> y <code>new RegExp("a\\*b")</code> crean la misma expresión, que busca "a" seguida de un "*" literal seguido de "b".</p> + +<p>Si las cadenas de escape aún no forman parte de tu patrón, puedes agregarlas usando {{jsxref('String.replace')}}:</p> + +<pre class="brush: js notranslate">function escapeRegExp(string) { + return string.replace(/[.*+\-?^${}()|[\]\\]/g,'\\$&'); // $& significa toda la cadena coincidente +} +</pre> + +<p>La "g" después de la expresión regular es una opción o indicador que realiza una búsqueda global, buscando en toda la cadena y devolviendo todas las coincidencias. Se explica en detalle a continuación en <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions#Advanced_searching_with_flags">Búsqueda avanzada con indicadores</a>.</p> + +<p><em>¿Por qué no está integrada en JavaScript?</em> Existe una propuesta para agregar esta función a RegExp, pero fue <a href="https://github.com/benjamingr/RegExp.escape/issues/37">rechazada por TC39.</a></p> + +<h3 id="Usando_paréntesis">Usando paréntesis</h3> + +<p>Los paréntesis alrededor de cualquier parte del patrón de expresión regular hacen que se recuerde esa parte de la subcadena coincidente. Una vez reconocida, la subcadena se puede recuperar para otro uso. Consulta <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges#Using_groups">Grupos y rangos</a> para obtener más detalles.</p> + +<h2 id="Usar_expresiones_regulares_en_JavaScript">Usar expresiones regulares en JavaScript</h2> + +<p>Las expresiones regulares se utilizan con los métodos <code>RegExp</code> <code>test()</code> y <code>exec()</code> y con los métodos de <code>String</code>, <code>match()</code>, <code>replace()</code>, <code>search()</code> y <code>split()</code>. Estos métodos se explican en detalle en la <a href="/es/docs/Web/JavaScript/Reference" title="/es/docs/JavaScript/Reference">referencia de JavaScript</a>.</p> + +<table class="standard-table"> + <caption>Métodos que usan expresiones regulares</caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("RegExp.exec", "exec()")}}</td> + <td>Ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un arreglo de información o <code>null</code> en una discrepancia.</td> + </tr> + <tr> + <td>{{jsxref("RegExp.test", "test()")}}</td> + <td>Prueba una coincidencia en una cadena. Devuelve <code>true</code> o <code>false</code>.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match()")}}</td> + <td>Devuelve un arreglo que contiene todas las coincidencias, incluidos los grupos de captura, o <code>null</code> si no se encuentra ninguna coincidencia.</td> + </tr> + <tr> + <td>{{jsxref("String.matchAll", "matchAll()")}}</td> + <td>Devuelve un iterador que contiene todas las coincidencias, incluidos los grupos de captura.</td> + </tr> + <tr> + <td>{{jsxref("String.search", "search()")}}</td> + <td>Prueba una coincidencia en una cadena. Devuelve el índice de la coincidencia, o <code>-1</code> si la búsqueda falla.</td> + </tr> + <tr> + <td>{{jsxref("String.replace", "replace()")}}</td> + <td>Ejecuta una búsqueda por una coincidencia en una cadena y reemplaza la subcadena coincidente con una subcadena de reemplazo.</td> + </tr> + <tr> + <td>{{jsxref("String.replaceAll", "replaceAll()")}}</td> + <td>Ejecuta una búsqueda de todas las coincidencias en una cadena y reemplaza las subcadenas coincidentes con una subcadena de reemplazo.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split()")}}</td> + <td>Utiliza una expresión regular o una cadena fija para dividir una cadena en un arreglo de subcadenas.</td> + </tr> + </tbody> +</table> + +<p>Cuando desees saber si un patrón se encuentra en una cadena, utiliza los métodos <code>test()</code> o <code>search()</code>; para obtener más información (pero una ejecución más lenta) utiliza los métodos <code>exec()</code> o <code>match()</code>. Si usas <code>exec()</code> o <code>match()</code> y si la búsqueda tiene éxito, estos métodos devuelven un arreglo y actualizan las propiedades del objeto expresión regular asociado y también del objeto de expresión regular predefinido, el objeto <code>RegExp</code>. Si la búsqueda falla, el método <code>exec()</code> devuelve <code>null</code> (que coacciona a <code>false</code>).</p> + +<p>En el siguiente ejemplo, el script utiliza el método <code>exec()</code> para encontrar una coincidencia en una cadena.</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Si no necesitas acceder a las propiedades de la expresión regular, una forma alternativa de crear <code>myArray</code> es con este script:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); + // similar a "cdbbdbsbz" .match(/d(b+)d/g); sin embargo, + // "cdbbdbsbz" .match (/d(b+)d/g) genera Array ["dbbd"], mientras + // /d(b+)d/g.exec('cdbbdbsbz ') produce Array ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]. +</pre> + +<p>(Consulta <a href="#g-diferentes-comportamientos">diferentes comportamientos</a> para obtener más información sobre los diferentes comportamientos).</p> + +<p>Si deseas construir la expresión regular a partir de una cadena, otra alternativa más es este script:</p> + +<pre class="brush: js notranslate">var myRe = new RegExp('d(b+)d', 'g'); +var myArray = myRe.exec('cdbbdbsbz'); +</pre> + +<p>Con estos scripts, la búsqueda se realiza correctamente, devuelve el arreglo y actualiza las propiedades que se muestran en la siguiente tabla.</p> + +<table class="standard-table"> + <caption>Resultado de la ejecución de expresiones regulares.</caption> + <thead> + <tr> + <th scope="col">Objeto</th> + <th scope="col">Propiedad o índice</th> + <th scope="col">Descripción</th> + <th scope="col">En este ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td rowspan="4"><code>myArray</code></td> + <td></td> + <td>La cadena coincidente y todas las subcadenas recordadas.</td> + <td><code>['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']</code></td> + </tr> + <tr> + <td><code>índice</code></td> + <td>El índice basado en 0 de la coincidencia en la cadena de entrada.</td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>entrada</code></td> + <td>La cadena original.</td> + <td><code>'cdbbdbsbz'</code></td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>Los últimos caracteres encontrados.</td> + <td><code>'dbbd'</code></td> + </tr> + <tr> + <td rowspan="2"><code>myRe</code></td> + <td><code>lastIndex</code></td> + <td>El índice en el que comenzará la siguiente búsqueda. (Esta propiedad se establece solo si la expresión regular usa la opción <code>g</code>, descrita en <a href="#Búsqueda_avanzada_con_banderas">Búsqueda avanzada con banderas</a>).</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>fuente</code></td> + <td>El texto del patrón. Actualizado en el momento en que se crea la expresión regular, no se ejecuta.</td> + <td><code>'d(b+)d'</code></td> + </tr> + </tbody> +</table> + +<p>Como se muestra en la segunda forma de este ejemplo, puedes usar una expresión regular creada con un iniciador de objeto sin asignarla a una variable. Sin embargo, si lo hace, cada aparición es una nueva expresión regular. Por este motivo, si utilizas esta forma sin asignarla a una variable, no podrás acceder posteriormente a las propiedades de esa expresión regular. Por ejemplo, supongamos que tienes este script:</p> + +<pre class="brush: js notranslate">var myRe = /d(b+)d/g; +var myArray = myRe.exec('cdbbdbsbz'); +console.log('El valor de lastIndex es ' + myRe.lastIndex); + +// "El valor de lastIndex es 5" +</pre> + +<p>Sin embargo, si tienes este script:</p> + +<pre class="brush: js notranslate">var myArray = /d(b+)d/g.exec('cdbbdbsbz'); +console.log('El valor de lastIndex es ' + /d(b+)d/g.lastIndex); + +// "El valor de lastIndex es 0" +</pre> + +<p>Las apariciones de <code>/d(b+)d/g</code> en las dos declaraciones son objetos de expresión regular diferentes y, por lo tanto, tienen valores diferentes para su propiedad <code>lastIndex</code>. Si necesitas acceder a las propiedades de una expresión regular creada con un iniciador de objeto, primero debes asignarla a una variable.</p> + +<h3 id="Búsqueda_avanzada_con_banderas"><a name="Advanced_searching_with_flags">Búsqueda avanzada con banderas</a></h3> + +<p>Las expresiones regulares tienen seis indicadores opcionales que permiten funciones como la búsqueda global y que no distinga entre mayúsculas y minúsculas. Estos indicadores se pueden usar por separado o juntos en cualquier orden y se incluyen como parte de la expresión regular.</p> + +<table class="standard-table"> + <caption>Indicadores de expresión regular</caption> + <thead> + <tr> + <th scope="col">Bandera</th> + <th scope="col">Descripción</th> + <th scope="col">Propiedad correspondiente</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Búsqueda global.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global">RegExp.prototype.global</a></code></td> + </tr> + <tr> + <td><code>i</code></td> + <td>Búsqueda que no distingue entre mayúsculas y minúsculas.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/ignoreCase">RegExp.prototype.ignoreCase</a></code></td> + </tr> + <tr> + <td><code>m</code></td> + <td>Búsqueda multilínea.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/multiline">RegExp.prototype.multiline</a></code></td> + </tr> + <tr> + <td><code>s</code></td> + <td>Permite que el <code>.</code> coincida con caracteres de nueva línea.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/dotAll">RegExp.prototype.dotAll</a></code></td> + </tr> + <tr> + <td><code>u</code></td> + <td>"unicode"; tratar un patrón como una secuencia de puntos de código Unicode.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode">RegExp.prototype.unicode</a></code></td> + </tr> + <tr> + <td><code>y</code></td> + <td>Realiza una búsqueda "pegajosa" que coincida a partir de la posición actual en la cadena de destino. Consulta {{jsxref("RegExp.sticky", "sticky")}}.</td> + <td><code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">RegExp.prototype.sticky</a></code></td> + </tr> + </tbody> +</table> + +<p>Para incluir una bandera con la expresión regular, usa esta sintaxis:</p> + +<pre class="brush: js notranslate">var re = /patrón/banderas; +</pre> + +<p>o</p> + +<pre class="brush: js notranslate">var re = new RegExp('patrón', 'banderas'); +</pre> + +<p>Ten en cuenta que las banderas son parte integral de una expresión regular. No se pueden agregar ni eliminar más tarde.</p> + +<p>Por ejemplo, <code>re = /\w+\s/g</code> crea una expresión regular que busca uno o más caracteres seguidos de un espacio y busca esta combinación en toda la cadena.</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +var str = 'fee fi fo fum'; +var myArray = str.match(re); +console.log(myArray); + +// ["fee ", "fi ", "fo "] +</pre> + +<p>Podrías reemplazar la línea:</p> + +<pre class="brush: js notranslate">var re = /\w+\s/g; +</pre> + +<p>con:</p> + +<pre class="brush: js notranslate">var re = new RegExp('\\w+\\s', 'g'); +</pre> + +<p>y obtener el mismo resultado.</p> + +<p id="g-different-behaviors">El comportamiento asociado con el indicador <code>g</code> es diferente cuando se usa el método <code>.exec()</code>. Los roles de "clase" y "argumento" se invierten: En el caso de <code>.match()</code>, la clase cadena (o tipo de datos) posee el método y la expresión regular es solo un argumento, mientras que en el caso de <code>.exec()</code>, es la expresión regular la que posee el método, siendo la cadena el argumento. Compara esto <em><code>str.match(re)</code></em> con <em><code>re.exec(str)</code></em>. El indicador <code>g</code> se usa con el método <strong><code>.exec()</code></strong> para obtener una progresión iterativa.</p> + +<pre class="brush: js notranslate">var xArray; while(xArray = re.exec(str)) console.log(xArray); +// produce: +// ["fee ", index: 0, input: "fee fi fo fum"] +// ["fi ", index: 4, input: "fee fi fo fum"] +// ["fo ", index: 7, input: "fee fi fo fum"]</pre> + +<p>La bandera <code>m</code> se utiliza para especificar que una cadena de entrada de varias líneas se debe tratar como varias líneas. Si se usa el indicador <code>m</code>, <code>^</code> y <code>$</code> coinciden al principio o al final de cualquier línea dentro de la cadena de entrada en lugar del inicio o el final de toda la cadena.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: También hay varios ejemplos disponibles en:</p> + +<ul> + <li>Las páginas de referencia para {{jsxref("RegExp.exec", "exec()")}}, {{jsxref("RegExp.test", "test()")}}, {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.search", "search()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.split", "split()")}}</li> + <li>Artículos de esta guía: <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes">clases de caracteres</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions">aserciones</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos y rangos</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Quantifiers">cuantificadores</a>, <a href="/es/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes">escapes de propiedades Unicode</a></li> +</ul> +</div> + +<h3 id="Usar_caracteres_especiales_para_verificar_la_entrada">Usar caracteres especiales para verificar la entrada</h3> + +<p>En el siguiente ejemplo, se espera que el usuario ingrese un número de teléfono. Cuando el usuario presiona el botón "Comprobar", el script verifica la validez del número. Si el número es válido (encuentra la secuencia de caracteres especificada por la expresión regular), la secuencia de comandos muestra un mensaje agradeciendo al usuario y confirmando el número. Si el número no es válido, el guión informa al usuario que el número de teléfono no es válido.</p> + +<p>Entre paréntesis que no capturan <code>(?:</code>, la expresión regular busca tres caracteres numéricos <code>\d{3}</code> O <code>|</code> un paréntesis izquierdo <code>\(</code> seguido de tres dígitos <code>\d{3}</code>, seguido de un paréntesis cerrado <code>\)</code>, (finaliza el paréntesis no capturador <code>)</code>), seguido de un guión, una barra diagonal o un punto decimal y cuando lo encuentre, recuerde el carácter <code>([-\/\.])</code>, seguido de tres dígitos <code>\d{3}</code>, seguido de la coincidencia recordada de un guión, una barra diagonal o un punto decimal <code>\1</code>, seguida de cuatro dígitos <code>\d{4}</code>.</p> + +<p>El evento <code>Change</code> activado cuando el usuario presiona <kbd>Enter</kbd> establece el valor de <code>RegExp.input</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p> + Ingresa tu número de teléfono (con el código de área) y luego haz clic en "Comprobar". + <br> + El formato esperado es como ###-###-####. +</p> +<form action="#"> + <input id="phone"> + <button onclick="testInfo(document.getElementById('phone'));">Comprobar</button> +</form></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; +function testInfo(phoneInput) { + var OK = re.exec(phoneInput.value); + if (!OK) { + console.error(phoneInput.value + ' isn\'t a phone number with area code!'); + } else { + console.log('Gracias, tu número de teléfono es ' + OK[0]);} +} </pre> + +<h4 id="Resultado">Resultado</h4> + +<div> +<p>{{ EmbedLiveSample('Using_special_characters_to_verify_input', '', '', '', 'Web/JavaScript/Guide/Regular_Expressions') }}</p> + +<h2 id="Herramientas">Herramientas</h2> + +<dl> + <dt><a href="https://regex101.com/" rel="noopener">Probador de expresiones regulares</a></dt> + <dd>Un constructor/depurador de expresiones regulares en línea</dd> + <dt><a href="https://extendsclass.com/regex-tester.html" rel="noopener">Visualizador de expresiones regulares</a></dt> + <dd>Un probador de expresiones regulares visual en línea.</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-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> +</div> + +<div>{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div> diff --git a/files/es/web/javascript/guide/text_formatting/index.html b/files/es/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..63a866024b --- /dev/null +++ b/files/es/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,254 @@ +--- +title: Formato de texto +slug: Web/JavaScript/Guide/Text_formatting +tags: + - Guía + - JavaScript +translation_of: Web/JavaScript/Guide/Text_formatting +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> + +<p class="summary">Este capítulo presenta cómo trabajar con cadenas de caracteres (<code>String</code>) y texto en JavaScript.</p> + +<h2 id="Cadenas_de_caracteres_String">Cadenas de caracteres (<code>String</code>)</h2> + +<p>El tipo {{Glossary("String")}} de JavaScript se utiliza para representar datos textuales. Es un conjunto de "elementos" de valores enteros sin signo de 16 bits (unidades de código UTF-16). Cada elemento de la cadena de caracteres ocupa una posición en la cadena. El primer elemento está en el índice 0, el siguiente en el índice 1, y así sucesivamente. La longitud de una cadena es el número de elementos que contiene. Puedes crear cadenas utilizando cadena literales u objetos <strong>string</strong>.</p> + +<div class="hidden">PRECAUCIÓN: si editas esta página, no incluyas ningún caracter por encima de U+FFFF, hasta que se solucione el ({{bug(857438)}} de MDN).</div> + +<h3 id="Cadenas_literales">Cadenas literales</h3> + +<p>Puedes crear cadenas simples utilizando comillas simples o dobles:</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<p>Se pueden crear cadenas más avanzadas usando secuencias de escape:</p> + +<h4 id="Secuencias_de_escape_hexadecimales">Secuencias de escape hexadecimales</h4> + +<p>El número después de \x se interpreta como un número del {{Interwiki("wikipedia", "Sistema_hexadecimal")}}.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="Secuencias_de_escape_Unicode">Secuencias de escape Unicode</h4> + +<p>Las secuencias de escape Unicode requieren al menos cuatro dígitos hexadecimales después de <code>\u</code>.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©"</pre> + +<h4 id="Puntos_de_escape_de_código_Unicode">Puntos de escape de código Unicode</h4> + +<p>Nuevo en ECMAScript 2015. Con el código de puntos de escape Unicode, cualquier carácter se puede escapar usando números hexadecimales para que sea posible usar puntos de código Unicode hasta <code>0x10FFFF</code>. Con simples escapes Unicode, a menudo es necesario escribir las mitades sustitutas por separado para lograr el mismo resultado.</p> + +<p>Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' + +// lo mismo con los escapes Unicode simples +'\uD87E\uDC04'</pre> + +<h3 id="Objetos_String">Objetos <code>String</code></h3> + +<p>El objeto {{JSxRef("String")}} es una envoltura alrededor del tipo de dato primitivo <code>string</code>.</p> + +<pre class="brush: js notranslate">const foo = new String('foo'); // Crea un objeto String +console.log(foo); // Muestra: <span><span>[String: 'foo']</span></span> +typeof foo; // Devuelve 'object' +</pre> + +<p>Puedes llamar a cualquiera de los métodos del objeto <code>String</code> en un valor de cadena literal: JavaScript automáticamente convierte la cadena literal en un objeto <code>String</code> temporal, llama al método y luego descarta el objeto <code>String</code> temporal. También puedes usar la propiedad <code>String.length</code> con una cadena literal:</p> + +<p>Debes usar cadenas literales a menos que necesites específicamente usar un objeto <code>String</code>, porque los objetos <code>String</code> pueden tener un comportamiento contrario a la intuición. Por ejemplo:</p> + +<pre class="brush: js notranslate">const firstString = '2 + 2'; // Crea un valor de cadena literal +const secondString = new String('2 + 2'); // Crea un objeto String +eval(firstString); // Devuelve el número 4 +eval(secondString); // Devuelve la cadena "2 + 2"</pre> + +<p>Un objeto <code>String</code> tiene una propiedad, <code>length</code>, que indica el número de unidades de código UTF-16 en la cadena. Por ejemplo, el siguiente código asigna a <code>helloLength</code> el valor 13, porque "¡Hola, mundo!" tiene 13 caracteres, cada uno representado por una unidad de código UTF-16. Puedes acceder a cada unidad de código utilizando la notación de corchete de los arreglos. No puedes cambiar caracteres individuales porque las cadenas son objetos inmutables similares a los arreglos:</p> + +<pre class="brush: js notranslate">const hello = '¡Hola, mundo!'; +const helloLength = hello.length; +hello[0] = 'L'; // Esto no tiene ningún efecto, porque las cadenas son inmutables +hello[1]; // Esto devuelve "H" +</pre> + +<p>Los caracteres cuyos valores escalares Unicode son mayores que U+FFFF (tal como algunos caracteres chinos/japoneses/coreanos/vietnamitas raros y algunos «emoji»s) se almacenan en UTF-16 con dos unidades de código sustituto cada uno. Por ejemplo, una cadena que contenga el caracter único U+1F600 "Cara sonriente de emoji" tendrá una longitud de 2. El acceso a las unidades de código individual en una cadena de este tipo utilizando corchetes puede tener consecuencias indeseables, como la formación de cadenas con diferentes unidades de código suplente, violando el estándar Unicode. (Se deben agregar ejemplos a esta página después de que se corrija el error MDN {{bug(857438)}}). Consulta también {{JSxRef("String.fromCodePoint()")}} o {{JSxRef("String.prototype.codePointAt()")}}.</p> + +<p>Un objeto <code>String</code> tiene una variedad de métodos: por ejemplo, aquellos que devuelven una variación de la cadena en sí, como <code>substring</code> y <code>toUpperCase</code>.</p> + +<p>La siguiente tabla resume los métodos de los objetos {{JSxRef("String")}}.</p> + +<table class="standard-table"> + <caption> + <h4 id="Métodos_de_String">Métodos de <code>String</code></h4> + </caption> + <thead> + <tr> + <th scope="col">Método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{JSxRef("String.charAt", "charAt")}}, {{JSxRef("String.charCodeAt", "charCodeAt")}}, {{JSxRef("String.codePointAt", "codePointAt")}}</td> + <td>Devuelve el caracter o código de caracter en la posición especificada en la cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.indexOf", "indexOf")}}, {{JSxRef("String.lastIndexOf", "lastIndexOf")}}</td> + <td>Devuelve la posición de la subcadena especificada en la cadena o la última posición de la subcadena especificada, respectivamente.</td> + </tr> + <tr> + <td>{{JSxRef("String.startsWith", "startsWith")}}, {{JSxRef("String.endsWith", "endsWith")}}, {{JSxRef("String.includes", "includes")}}</td> + <td>Devuelve si o no la cadena comienza, termina o contiene una subcadena especificada.</td> + </tr> + <tr> + <td>{{JSxRef("String.concat", "concat")}}</td> + <td>Combina el texto de dos cadenas y devuelve una nueva cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.fromCharCode", "fromCharCode")}}, {{JSxRef("String.fromCodePoint", "fromCodePoint")}}</td> + <td>Construye una cadena a partir de la secuencia especificada de valores Unicode. Este es un método de la clase <code>String</code>, no una instancia de <code>String</code>.</td> + </tr> + <tr> + <td>{{JSxRef("String.split", "split")}}</td> + <td>Divide un objeto <code>String</code> en un arreglo de cadenas separando la cadena en subcadenas.</td> + </tr> + <tr> + <td>{{JSxRef("String.slice", "slice")}}</td> + <td>Extrae una sección de una cadena y devuelve una nueva cadena.</td> + </tr> + <tr> + <td>{{JSxRef("String.substring", "substring")}}, {{JSxRef("String.substr", "substr")}}</td> + <td>Devuelve el subconjunto especificado de la cadena, ya sea especificando los índices inicial y final o el índice inicial y una longitud.</td> + </tr> + <tr> + <td>{{JSxRef("String.match", "match")}}, {{JSxRef("String.matchAll", "matchAll")}}, {{JSxRef("String.replace", "replace")}}, {{JSxRef("String.replaceAll", "replaceAll")}}, {{JSxRef("String.search", "search")}}</td> + <td>Trabaja con expresiones regulares.</td> + </tr> + <tr> + <td>{{JSxRef("String.toLowerCase", "toLowerCase")}}, {{JSxRef("String.toUpperCase", "toUpperCase")}}</td> + <td> + <p>Devuelve la cadena en minúsculas o mayúsculas, respectivamente.</p> + </td> + </tr> + <tr> + <td>{{JSxRef("String.normalize", "normalize")}}</td> + <td>Devuelve la forma de normalización Unicode del valor de la cadena llamada.</td> + </tr> + <tr> + <td>{{JSxRef("String.repeat", "repeat")}}</td> + <td>Devuelve una cadena que consta de los elementos del objeto repetidos las veces indicadas.</td> + </tr> + <tr> + <td>{{JSxRef("String.trim", "trim")}}</td> + <td>Recorta los espacios en blanco desde el principio y el final de la cadena.</td> + </tr> + </tbody> +</table> + +<h3 id="Plantillas_literales_multilínea">Plantillas literales multilínea</h3> + +<p>Las {{JSxRef("template_strings", "plantillas literales")}} son cadena literales que permiten expresiones incrustadas. Puedes utilizar cadenas de varias líneas y funciones de interpolación de cadenas con ellas.</p> + +<p>Las plantillas literales están encerradas por el carácter (<code>``</code>) ({{Interwiki("wikipedia", "Acento_grave", "acento grave")}}) en lugar de comillas simples o dobles. Las plantillas literales pueden contener marcadores de posición. Estos se indican mediante el signo de dólar y llaves (<code>${expresión}</code>).</p> + +<h4 id="Multilíneas">Multilíneas</h4> + +<p>Cualquier caracter de nueva línea insertado en la fuente es parte de la plantilla literal. Usando cadenas normales, tendrías que usar la siguiente sintaxis para obtener cadenas multilínea:</p> + +<pre class="brush: js notranslate">console.log('cadena de texto línea 1\n\ +cadena de texto línea 2'); +// "cadena de texto línea 1 +// cadena de texto línea 2"</pre> + +<p>Para obtener el mismo efecto con cadenas multilínea, ahora puedes escribir:</p> + +<pre class="brush: js notranslate">console.log(`cadena de texto línea 1 +cadena de texto línea 2`); +// "cadena de texto línea 1 +// cadena de texto línea 2"</pre> + +<h4 id="Expresiones_incrustadas">Expresiones incrustadas</h4> + +<p>Para incrustar expresiones dentro de cadenas normales, usarías la siguiente sintaxis:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log('Quince es ' + (five + ten) + ' y no ' + (2 * five + ten) + '.'); +// "Quince es 15 y no 20."</pre> + +<p>Ahora, con las plantillas literales, puedes hacer uso del azúcar sintáctica haciendo que las sustituciones como esta sean más legibles:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log (`Quince es ${five + ten} y no ${2 * five + ten}.`); +// "Quince es 15 y no 20."</pre> + +<p>Para obtener más información, lee acerca de {{JSxRef("template_strings", "plantillas literales")}} en la {{JSxRef("../Referencia", "Referencia de JavaScript")}}.</p> + +<h2 id="Internacionalización">Internacionalización</h2> + +<p>El objeto {{JSxRef("Intl")}} es el espacio de nombres para la API de internacionalización de ECMAScript, que proporciona comparación de cadenas sensible al idioma, formato de números y formato de fecha y hora. Los constructores de los objetos {{JSxRef("Collator")}}, {{JSxRef("NumberFormat")}} y {{JSxRef("DateTimeFormat")}} son propiedades del objeto <code>Intl</code>.</p> + +<h3 id="Formato_de_fecha_y_hora">Formato de fecha y hora</h3> + +<p>El objeto {{JSxRef("DateTimeFormat")}} es útil para formatear la fecha y la hora. El siguiente formato es una fecha para el Inglés como se usa en los Estados Unidos. (El resultado es diferente en otra zona horaria).</p> + +<pre class="brush: js notranslate">const msPerDay = 24 * 60 * 60 * 1000; + +// July 17, 2014 00:00:00 UTC. +const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); + +const options = { year: '2-digit', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }; +const americanDateTime = new Intl.DateTimeFormat('en-US', options).format; + +console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT +</pre> + +<h3 id="Formato_de_número">Formato de número</h3> + +<p>El objeto {{JSxRef("NumberFormat")}} es útil para formatear números, por ejemplo, monedas.</p> + +<pre class="brush: js notranslate">const gasPrice = new Intl.NumberFormat('en-US', + { style: 'currency', currency: 'USD', + minimumFractionDigits: 3 }); + +console.log(gasPrice.format(5.259)); // $5.259 + +const hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec', + { style: 'currency', currency: 'CNY' }); + +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 +</pre> + +<h3 id="Colación">Colación</h3> + +<p>El objeto {{JSxRef("Collator")}} es útil para comparar y ordenar cadenas.</p> + +<p>Por ejemplo, en realidad hay dos órdenes de clasificación diferentes en Alemán, «<em>phonebook</em>» y «<em>dictionary</em>». La clasificación «<em>phonebook</em>» enfatiza el sonido, y es como si "ä", "ö", etc. se expandieran a "ae", "oe", etc. antes de la clasificación.</p> + +<pre class="brush: js notranslate">const names = ['Hochberg', 'Hönigswald', 'Holzman']; + +const germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk'); + +// como ordenando ["Hochberg", "Hoenigswald", "Holzman"]: +console.log(names.sort(germanPhonebook.compare).join(', ')); +// registra "Hochberg, Hönigswald, Holzman" +</pre> + +<p>Algunas palabras alemanas se conjugan con diéresis adicionales, por lo que en los diccionarios es sensato ordenar ignorando diéresis (excepto cuando se ordenan palabras que difieren <em>solo</em> por las diéresis: «<em>schon</em>» antes de «<em>schön</em>»).</p> + +<pre class="brush: js notranslate">const germanDictionary = new Intl.Collator('de-DE-u-co-dict'); + +// como si ordenara ["Hochberg", "Honigswald", "Holzman"]: +console.log(names.sort(germanDictionary.compare).join(', ')); +// registra "Hochberg, Holzman, Hönigswald" +</pre> + +<p>Para obtener más información sobre la API de {{JSxRef("Intl")}}, consulta también la <a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/">Introducción a la API de internacionalización de JavaScript</a>.</p> + +<div>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> diff --git a/files/es/web/javascript/guide/trabajando_con_objectos/index.html b/files/es/web/javascript/guide/trabajando_con_objectos/index.html new file mode 100644 index 0000000000..84a9854d9a --- /dev/null +++ b/files/es/web/javascript/guide/trabajando_con_objectos/index.html @@ -0,0 +1,493 @@ +--- +title: Trabajando con objetos +slug: Web/JavaScript/Guide/Trabajando_con_objectos +tags: + - Comparación de objetos + - Constructor + - Documento + - Guía + - JavaScript + - Objeto + - Principiante +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +<div>{{jsSidebar("Guía de JavaScript")}} {{PreviousNext("Web/JavaScript/Guide/Keyed_collections", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</div> + +<p class="summary">JavaScript está diseñado en un paradigma simple basado en objetos. Un objeto es una colección de propiedades, y una propiedad es una asociación entre un nombre (o <em>clave</em>) y un valor. El valor de una propiedad puede ser una función, en cuyo caso la propiedad es conocida como un método. Además de los objetos que están predefinidos en el navegador, puedes definir tus propios objetos. Este capítulo describe cómo usar objetos, propiedades, funciones y métodos; y cómo crear tus propios objectos.</p> + +<h2 id="Visión_general_sobre_Objetos">Visión general sobre Objetos</h2> + +<p>Los objetos en JavaScript, como en tantos otros lenguajes de programación, se pueden comparar con objetos de la vida real. El concepto de Objetos en JavaScript se puede entender con objetos tangibles de la vida real.</p> + +<p>En JavaScript, un objeto es un entidad independiente con propiedades y tipos. Compáralo con una taza, por ejemplo. Una taza es un objeto con propiedades. Una taza tiene un color, un diseño, un peso, un material del que está hecha, etc. Del mismo modo, los objetos de JavaScript pueden tener propiedades que definan sus características.</p> + +<h2 id="Objetos_y_propiedades">Objetos y propiedades</h2> + +<p>Un objeto de JavaScript tiene propiedades asociadas a él. Una propiedad de un objeto se puede explicar como una variable adjunta al objeto. Las propiedades de un objeto básicamente son lo mismo que las variables comunes de JavaScript, excepto por el nexo con el objeto. Las propiedades de un objeto definen las características del objeto. Accedes a las propiedades de un objeto con una simple notación de puntos:</p> + +<pre class="brush: js notranslate">objectName.propertyName +</pre> + +<p>Como todas las <code>variables</code> de JavaScript, tanto el nombre del objeto (que puede ser una variable normal) como el nombre de la propiedad son sensibles a mayúsculas y minúsculas. Puedes definir propiedades asignándoles un valor. Por ejemplo, vamos a crear un objeto llamado <code>myCar</code> y le vamos a asignar propiedades denominadas <code>make</code>, <code>model</code>, y <code>year</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var myCar = new Object(); +myCar.make = 'Ford'; +myCar.model = 'Mustang'; +myCar.year = 1969; +</pre> + +<p>El ejemplo anterior también se podría escribir usando un <strong><a href="/es/docs/Web/JavaScript/Guide/Working_with_Objects#Object_initializers">iniciador de objeto</a></strong>, que es una lista delimitada por comas de cero o más pares de nombres de propiedad y valores asociados de un objeto, encerrados entre llaves (<code>{}</code>):</p> + +<pre class="brush: js notranslate">var myCar = { + make: 'Ford', + model: 'Mustang', + year: 1969 +}; +</pre> + +<p>Las propiedades no asignadas de un objeto son {{jsxref("undefined")}} (yno {{jsxref("null")}}).</p> + +<pre class="brush: js notranslate">myCar.color; // undefined</pre> + +<p>También puedes acceder o establecer las propiedades de los objetos en JavaScript mediante la notación de corchetes ↑[]↓ (Para más detalle ve <a href="/es/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Accesores de propiedades</a>). Los objetos, a veces son llamados <em>arreglos asociativos</em>, debido a que cada propiedad está asociada con un valor de cadena que se puede utilizar para acceder a ella. Por lo tanto, por ejemplo, puedes acceder a las propiedades del objeto <code>myCar</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">myCar['make'] = 'Ford'; +myCar['model'] = 'Mustang'; +myCar['year'] = 1969; +</pre> + +<p>El nombre de la propiedad de un objeto puede ser cualquier cadena válida de JavaScript, o cualquier cosa que se pueda convertir en una cadena, incluyendo una cadena vacía. Sin embargo, cualquier nombre de propiedad que no sea un identificador válido de JavaScript (por ejemplo, el nombre de alguna propiedad que tenga un espacio o un guión, o comience con un número) solo se puede acceder utilizando la notación de corchetes. Esta notación es muy útil también cuando los nombres de propiedades son determinados dinámicamente (cuando el nombre de la propiedad no se determina hasta el tiempo de ejecución). Ejemplos de esto se muestran a continuación:</p> + +<pre class="brush: js notranslate">// Se crean y asignan cuatro variables de una sola vez, +// separadas por comas +var myObj = new Object(), + str = 'myString', + rand = Math.random(), + obj = new Object(); + +myObj.type = 'Sintaxis de puntos'; +myObj['fecha de creación'] = 'Cadena con espacios'; +myObj[str] = 'Valor de cadena'; +myObj[rand] = 'Número aleatorio'; +myObj[obj] = 'Object'; +myObj[''] = 'Incluso una cadena vacía'; + +console.log(myObj); +</pre> + +<p>Por favor, ten en cuenta que todas las claves con notación en corchetes se convierten a cadenas a menos que estas sean símbolos, ya que los nombres de las propiedades (claves) en Javascript pueden solo pueden ser cadenas o símbolos (en algún momento, los nombres privados también serán agregados a medida que progrese la <a href="https://github.com/tc39/proposal-class-fields">propuesta de los campos de clase</a>, pero no las usarás con el formato <code>[]</code>). Por ejemplo, en el código anterior, cuando la clave <code>obj</code> se añadió a <code>myObj</code>, Javascript llamará al método {{jsxref("Object.toString", "obj.toString()")}}, y usará la cadena resultante de esta llamada como la nueva clave.</p> + +<p>También puedes acceder a las propiedades mediante el uso de un valor de cadena que se almacena en una variable:</p> + +<pre class="brush: js notranslate">var propertyName = 'make'; +myCar[propertyName] = 'Ford'; + +propertyName = 'model'; +myCar[propertyName] = 'Mustang'; +</pre> + +<p>Puedes usar la notación de corchetes con <code><a href="/es/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> para iterar sobre todas las propiedades enumerables de un objeto. Para ilustrar cómo funciona esto, la siguiente función muestra las propiedades del objeto cuando pasas el objeto y el nombre del objeto como argumentos a la función:</p> + +<pre class="brush: js notranslate">function showProps(obj, objName) { + var result = ``; + for (var i in obj) { + // obj.hasOwnProperty() se usa para filtrar propiedades de la cadena de prototipos del objeto + if (obj.hasOwnProperty(i)) { + result += `${objName}.${i} = ${obj[i]}\n`; + } + } + return result; +} +</pre> + +<p>Por lo tanto, la llamada a la función <code>showProps(myCar, "myCar")</code> devolverá lo siguiente:</p> + +<pre class="brush: js notranslate">myCar.make = Ford +myCar.model = Mustang +myCar.year = 1969</pre> + +<h2 id="Enumerar_las_propiedades_de_un_objeto">Enumerar las propiedades de un objeto</h2> + +<p>A partir de <a href="/es/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="/es/docs/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5</a>, hay tres formas nativas para enumerar/recorrer las propiedades de objetos:</p> + +<ul> + <li><code><a href="/es/docs/Web/JavaScript/Reference/Statements/for...in" title="/es/docs/JavaScript/Reference/Statements/for...in">bucles for...in</a></code><br> + Este método recorre todas las propiedades enumerables de un objeto y su cadena de prototipos</li> + <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> + Este método devuelve un arreglo con todos los nombres de propiedades enumerables ("<code>claves</code>") propias (no en la cadena de prototipos) de un objeto <code>o</code>.</li> + <li>{{jsxref("Object.getOwnPropertyNames", "Object.getOwnPropertyNames(o)")}}<br> + Este método devuelve un arreglo que contiene todos los nombres (enumerables o no) de las propiedades de un objeto <code>o</code>.</li> +</ul> + +<p>Antes de ECMAScript 5, no existía una manera nativa para enumerar todas las propiedades de un objeto. Sin embargo, esto se puede lograr con la siguiente función:</p> + +<pre class="brush: js notranslate">function listAllProperties(o) { + var objectToInspect; + var result = []; + + for(objectToInspect = o; objectToInspect !== null; + objectToInspect = Object.getPrototypeOf(objectToInspect)) { + result = result.concat( + Object.getOwnPropertyNames(objectToInspect) + ); + } + + return result; +} +</pre> + +<p>Esto puede ser útil para revelar propiedades "ocultas" (propiedades de la cadena de prototipos a las que no se puede acceder a través del objeto, porque otra propiedad tiene el mismo nombre en la cadena de prototipos). Enumerar las propiedades accesibles solo es posible eliminando los duplicados en el arreglo.</p> + +<h2 id="Creación_de_nuevos_objetos">Creación de nuevos objetos</h2> + +<p>JavaScript tiene una colección de objetos predefinidos. Además, puedes crear tus propios objetos. En JavaScript 1.2 y versiones posteriores, puedes crear un objeto usando un <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">iniciador de objeto</a>. Como alternativa, puedes crear primero una función constructora y luego crear una instancia de un objeto invocando esa función con el operador <code>new</code>.</p> + +<h3 id="Uso_de_iniciadores_de_objeto"><span id="Object_initializers">Uso de iniciadores de objeto</span></h3> + +<p>Además de la creación de objetos utilizando una función constructora, puedes crear objetos utilizando un <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer">iniciador de objeto</a>. El uso de iniciadores de objetos a veces se denomina crear objetos con notación literal. "Iniciador de objeto" es consistente con la terminología utilizada por C++.</p> + +<p>La sintaxis para un objeto usando un iniciador de objeto es:</p> + +<pre class="brush: js notranslate">var obj = { property_1: value_1, // property_# puede ser un identificador... + 2: value_2, // o un número... + // ..., + 'property n': value_n }; // o una cadena +</pre> + +<p>donde <code>obj</code> es el nombre del nuevo objeto, cada <code>property_<var>i</var></code> es un identificador (ya sea un nombre, un número o una cadena literal), y cada <code>value_<var>i</var></code> es una expresión cuyo valor se asigna a la <code>property_<var>i</var></code>. El <code>obj</code> y la asignación es opcional; si no necesitas hacer referencia a este objeto desde otro lugar, no necesitas asignarlo a una variable. (Ten en cuenta que tal vez necesites envolver el objeto literal entre paréntesis si el objeto aparece donde se espera una declaración, a fin de no confundir el literal con una declaración de bloque).</p> + +<p>Los iniciadores de objetos son expresiones, y cada iniciador de objeto da como resultado un nuevo objeto donde la instrucción de creación sea ejecutada. Los iniciadores de objetos idénticos crean objetos distintos que no se compararán entre sí como iguales. Los objetos se crean como si se hiciera una llamada a <code>new Object()</code>; es decir, los objetos hechos a partir de expresiones literales de objeto son instancias de <code>Object</code>.</p> + +<p>La siguiente declaración crea un objeto y lo asigna a la variable <code>x</code> si y solo si la expresión <code>cond</code> es <code>true</code>.</p> + +<pre class="brush: js notranslate">if (cond) var x = {greeting: '¡Hola!'}; +</pre> + +<p>El siguiente ejemplo crea <code>myHonda</code> con tres propiedades. Observa que la propiedad <code>engine</code> también es un objeto con sus propias propiedades.</p> + +<pre class="brush: js notranslate">var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}}; +</pre> + +<p>También puedes utilizar iniciadores de objetos para crear arreglos. Consulta <a href="/es/docs/Web/JavaScript/Guide/Grammar_and_types#Array_literals">arreglos literales</a>.</p> + +<h3 id="Usar_una_función_constructora">Usar una función constructora</h3> + +<p>Como alternativa, puedes crear un objeto con estos dos pasos:</p> + +<ol> + <li>Definir el tipo de objeto escribiendo una función constructora. Existe una fuerte convención, con buena razón, para utilizar en mayúscula la letra inicial.</li> + <li>Crear una instancia del objeto con el operador <code>new</code>.</li> +</ol> + +<p>Para definir un tipo de objeto, crea una función para el objeto que especifique su nombre, propiedades y métodos. Por ejemplo, supongamos que deseas crear un tipo de objeto para coches. Quieres llamar <code>Car</code> a este tipo de objeto, y deseas que tenga las siguientes propiedades: <code>make</code>, <code>model</code> y <code>year</code>. 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>Observa el uso de <code>this</code> para asignar valores a las propiedades del objeto en función de los valores pasados a la función.</p> + +<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 a sus propiedades. Entonces el valor de <code>myCar.make</code> es la cadena "Eagle", para <code>myCar.year</code> es el número entero 1993, y así sucesivamente.</p> + +<p>Puedes crear cualquier número de objetos <code>Car</code> con las llamadas a <code>new</code>. Por ejemplo,</p> + +<pre class="brush: js notranslate">var kenscar = new Car('Nissan', '300ZX', 1992); +var vpgscar = new Car('Mazda', 'Miata', 1990); +</pre> + +<p><s0>Un objeto puede tener una propiedad que en sí misma es otro objeto. Por ejemplo, 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 instancias dos nuevos objetos <code>person</code> de la siguiente manera:</p> + +<pre class="brush: js notranslate">var rand = new Person('Rand McKinnon', 33, 'M'); +var ken = new Person('Ken Jones', 39, 'M'); +</pre> + +<p>Entonces, puedes volver a escribir la definición de <code>Car</code> para incluir una propiedad <code>owner</code> que tomará el 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>Nota que en lugar de pasar un valor de cadena o entero cuando se crean los nuevos objetos, las declaraciones anteriores pasan al objetos <code>rand</code> y <code>ken</code> como argumentos para los <code>owner</code>s. Si luego quieres averigüar el nombre del propietario del <code>car2</code>, puedes acceder a la propiedad de la siguiente manera:</p> + +<pre class="brush: js notranslate">car2.owner.name +</pre> + +<p>Ten en cuenta que siempre se puede añadir una propiedad a un objeto previamente definido. Por ejemplo, la declaración</p> + +<pre class="brush: js notranslate">car1.color = 'black'; +</pre> + +<p>agrega la propiedad <code>color</code> a <code>car1</code>, y le asigna el valor "<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, tienes que añadir la propiedad a la definición del tipo de objeto <code>Car</code>.</p> + +<h3 id="Usar_el_método_Object.create">Usar el método <code>Object.create</code></h3> + +<p>Los objetos también se pueden crear por medio del método {{jsxref("Object.create()")}}. Este método puede ser muy útil, ya que te permite elegir el prototipo del objeto que deseas crear, sin tener que definir una función constructora.</p> + +<pre class="brush: js notranslate">// Propiedades y método de encapsulación para Animal +var Animal = { + type: 'Invertebrates', // Valor predeterminado de las propiedades + displayType: function() { // Método que mostrará el tipo de Animal + console.log(this.type); + } +}; + +// Crea un nuevo tipo de animal llamado animal1 +var animal1 = Object.create(Animal); +animal1.displayType(); // Muestra: Invertebrates + +// Crea un nuevo tipo de animal llamado Fishes +var fish = Object.create(Animal); +fish.type = 'Fishes'; +fish.displayType(); // Muestra: Fishes</pre> + +<h2 id="Herencia">Herencia</h2> + +<p>Todos los objetos en JavaScript heredan de al menos otro objeto. El objeto del que se hereda se conoce como el prototipo, y las propiedades heredadas se pueden encontrar en el objeto <code>prototype</code> del constructor. Para más información consulta <a href="/es/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain">Herencia y cadena prototipos</a>.</p> + +<h2 id="Propiedades_del_objeto_indexado">Propiedades del objeto indexado</h2> + +<p>En <s0>JavaScript 1.0</s0>, puedes hacer referencia a una propiedad de un objeto, ya sea por el nombre de la propiedad o por su índice ordinal. Si inicialmente defines una propiedad por su nombre, siempre debes referirte a ella por su nombre, y si inicialmente defines una propiedad por un índice, siempre debes referirte a ella por su índice.</p> + +<p>Esta restricción se aplica cuando creas un objeto y sus propiedades con una función constructora (como hicimos anteriormente con el tipo de objeto <code>Car</code>) y cuando defines propiedades individuales explícitamente (por ejemplo, <code>myCar.color = "red"</code>). Si inicialmente defines una propiedad de objeto con un índice, como <code>myCar[5] = "25 mpg"</code>, posteriormente te refiere a la propiedad solo como <code>myCar[5]</code>.</p> + +<p>La excepción a esta regla son los objetos HTML, como por ejemplo los objetos contenidos en <code>formularios</code>. Siempre puedes hacer referencia a los objetos en estos objetos en forma de arreglo por su número ordinal (según el lugar en el que aparecen en el documento) o por su nombre (si está definido). Por ejemplo, si la segunda etiqueta <code><FORM></code> en un documento tiene un atributo <code>NAME</code> con valor "<code>myForm</code>", puedes hacer referencia al formulario como <code>document.forms[1]</code> o <code>document.forms["myForm"]</code> o <code>document.forms.myForm</code>.</p> + +<h2 id="Definición_de_las_propiedades_de_un_tipo_de_objeto">Definición de las propiedades de un tipo de objeto</h2> + +<p>Puedes agregar una propiedad a un tipo de objeto definido previamente mediante el uso de la propiedad <code>prototype</code>. Esto define una propiedad que es compartida por todos los objetos del tipo especificado, en lugar de por una sola instancia del objeto. El siguiente código agrega una propiedad <code>color</code> a todos los objetos del tipo <code>Car</code>, y luego asigna un valor a la propiedad <code>color</code> del objeto <code>car1</code>.</p> + +<pre class="brush: js notranslate">Car.prototype.color = null; +car1.color = 'black'; +</pre> + +<p>Para más información, consulta la <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="/es/docs/JavaScript/Reference/Global Objects/Function/prototype">propiedad <code>prototype</code></a> del objeto <code>Function</code> en la <a href="/es/docs/Web/JavaScript/Reference">Referencia de JavaScript</a>.</p> + +<h2 id="Definición_de_métodos">Definición de métodos</h2> + +<p>Un <em>método</em> es una función asociada a un objeto, o, simplemente, un método es una propiedad de un objeto que es una función. Los métodos se definen normalmente como una función, con excepción de que tienen que ser asignados como la propiedad de un objeto. Consulte también <a href="/es/docs/Web/JavaScript/Reference/Functions/Method_definitions">definiciones de métodos</a> para obtener más detalles. Un ejemplo puede ser:</p> + +<pre class="brush: js notranslate">objectName.methodname = functionName; + +var myObj = { + myMethod: function(params) { + // ...hacer algo + } + + // O ESTO TAMBIÉN FUNCIONA + + myOtherMethod(params) { + // ...hacer algo más + } +}; +</pre> + +<p><s0>donde <code>objectName</code> es un objeto existente, <code>methodname</code> es el nombre que se le va a asignar al método, y <code>functionName</code> es el nombre de la función.</p> + +<p>Entonces puedes llamar al método en el contexto del objeto de la siguiente manera:</p> + +<pre class="brush: js notranslate">object.methodname(params); +</pre> + +<p>Puedes definir métodos para un tipo de objeto incluyendo una definición del método en la función constructora del objeto. Podrías definir una función que formateé y muestre las propiedades de los objetos del tipo <code>Car</code> previamente definidas; por ejemplo:</p> + +<pre class="brush: js notranslate">function displayCar() { + var result = `Un hermoso ${this.year} ${this.make} ${this.model}`; + pretty_print(result); +} +</pre> + +<p>donde <code>pretty_print</code> es una función para mostrar una línea horizontal y una cadena. Observa el uso de <code>this</code> para referirse al objeto al que pertenece el método.</p> + +<p>Puedes hacer de esta función un método de <code>Car</code> agregando la declaración</p> + +<pre class="brush: js notranslate">this.displayCar = displayCar; +</pre> + +<p>a la definición del objeto. Por lo tanto, la definición completa de <code>Car</code> ahora se verá así:</p> + +<pre class="brush: js notranslate">function Car(make, model, year, owner) { + this.make = make; + this.model = model; + this.year = year; + this.owner = owner; + this.displayCar = displayCar; +} +</pre> + +<p>Entonces puedes llamar al método <code>displayCar</code> para cada uno de los objetos de la siguiente manera:</p> + +<pre class="brush: js notranslate">car1.displayCar(); +car2.displayCar(); +</pre> + +<h2 id="Usar_this_para_referencias_a_objetos">Usar <code>this</code> para referencias a objetos</h2> + +<p>JavaScript tiene una palabra clave especial, <code>this</code>, que puedes usar dentro de un método para referirte al objeto actual. Por ejemplo, supongamos que tienes 2 objetos,<code>Manager</code> e <code>Intern</code>. Cada objeto tiene su propio <code>name</code>,<code>age</code> y <code>job</code>. En la función <code>sayHi()</code>, observa que hay <code>this.name</code>. Cuando se agregan a los 2 objetos, se pueden llamar y devuelve el <code>'Hola, mi nombre es'</code> y luego agrega el valor <code>name</code> de ese objeto específico. Como se muestra abajo. </p> + +<pre class="brush: js notranslate">const Manager = { + name: "John", + age: 27, + job: "Software Engineer" +} + +const Intern= { + name: "Ben", + age: 21, + job: "Software Engineer Intern" +} + +function sayHi() { + console.log('Hola, mi nombre es ', this.name) +} + +// agrega la función sayHi a ambos objetos +Manager.sayHi = sayHi; +Intern.sayHi = sayHi; + +Manager.sayHi() // Hola, mi nombre es John' +Intern.sayHi() // Hola, mi nombre es Ben' +</pre> + +<p><code>this</code> se refiere al objeto en el que se encuentra. Puedes crear una nueva función llamada <code>howOldAmI()</code> que registra una oración que dice cuántos años tiene la persona. </p> + +<pre class="brush: js notranslate">function howOldAmI() { + console.log('Tengo ' + this.age + ' años.') +} +Manager.howOldAmI = howOldAmI; +Manager.howOldAmI() // Tengo 27 años. +</pre> + +<h2 id="Definición_de_captadores_getters_y_establecedores_setters">Definición de captadores (<code>getters</code>) y establecedores (<code>setters</code>)</h2> + +<p>Un captador (<a href="/es/docs/Web/JavaScript/Reference/Functions/get">getter</a>) es un método que obtiene el valor de una propiedad específica. Un establecedor (<a href="/es/docs/Web/JavaScript/Reference/Functions/set">setter</a>) es un método que establece el valor de una propiedad específica. Puedes definir captadores y establecedores en cualquier objeto principal predefinido o en un objeto definido por el usuario que admita la adición de nuevas propiedades. </p> + +<p>En principio, los captadores y establecedores pueden ser</p> + +<ul> + <li>definido usando <a href="#Iniciadores_de_objeto">iniciadores de objeto</a>, o</li> + <li>agregado posteriormente a cualquier objeto en cualquier momento usando un método de adición para el captador o el establecedor.</li> +</ul> + +<p>Al definir captadores y establecedores usando <a href="#Iniciadores_de_objeto">iniciadores de objeto</a>, todo lo que necesitas hacer es prefijar un método captador con <code>get</code> y un método establecedor con <code>set</code>. Por supuesto, el método captador no debe esperar un parámetro, mientras que el método establecedor espera exactamente un parámetro (el nuevo valor a establecer). Por ejemplo:</p> + +<pre class="brush: js notranslate">var o = { + a: 7, + get b() { + return this.a + 1; + }, + set c(x) { + this.a = x / 2; + } +}; + +console.log (o.a); // 7 +console.log (o.b); // 8 <-- En este punto se inicia el método get b(). +o.c = 50; // <-- En este punto se inicia el método set c(x) +console.log(o.a); // 25 +</pre> + +<p>var o = {</p> + +<ul> + <li>a: 7,</li> + <li><code>o.b</code> — un captador que devuelve <code>o.a</code> más 1</li> + <li><code>o.c</code> — un establecedor que establece el valor de <code>o.a</code> en la mitad del valor que se establece en <code>o.c</code></li> +</ul> + +<p>Ten en cuenta que los nombres de función de los captadores y establecedores definidos en un objeto literal usando "[gs]et <em>propiedad</em>()" (en contraposición a <code>__define [GS]etter__</code>) no son los nombres de los captadores en sí, aunque la sintaxis <code>[gs]et <em>propertyName</em>() {}</code> te puede inducir a pensar lo contrario.</p> + +<p>Los captadores y establecedores también se pueden agregar a un objeto en cualquier momento después de la creación usando el método <code>Object.defineProperties</code>. El primer parámetro de este método es el objeto sobre el que se quiere definir el captador o establecedor. El segundo parámetro es un objeto cuyo nombre de propiedad son los nombres <code>getter</code> o <code>setter</code>, y cuyos valores de propiedad son objetos para la definición de las funciones <code>getter</code> o <code>setter</code>. Aquí hay un ejemplo que define el mismo <code>getter</code> y <code>setter</code> utilizado en el ejemplo anterior:</p> + +<pre class="brush: js notranslate">var o = { a: 0 }; + +Object.defineProperties(o, { + 'b': { get: function() { return this.a + 1; } }, + 'c': { set: function(x) { this.a = x / 2; } } +}); + +o.c = 10; // Ejecuta el establecedor, que asigna 10/2 (5) a la propiedad 'a' +console.log(o.b); // Ejecuta el captador, que produce un + 1 o 6 +</pre> + +<p>¿Cuál de las dos formas elegir? depende de tu estilo de programación y de la tarea que te ocupa. Si ya utilizas el iniciador de objeto al definir un prototipo probablemente escojas la primer forma la mayoría de las veces. Esta forma es más compacta y natural. Sin embargo, si más tarde necesitas agregar captadores y establecedores — porque no lo escribiste en el objeto prototipo o particular — entonces la segunda forma es la única forma posible. La segunda forma, probablemente representa mejor la naturaleza dinámica de JavaScript — pero puede hacer que el código sea difícil de leer y entender.</s6></p> + +<h2 id="Eliminar_propiedades">Eliminar propiedades</h2> + +<p>Puedes eliminar una propiedad no heredada mediante el operador <code>delete</code>. El siguiente código muestra cómo eliminar una propiedad.</p> + +<pre class="brush: js notranslate">//Crea un nuevo objeto, myobj, con dos propiedades, a y b. +var myobj = new Object; +myobj.a = 5; +myobj.b = 12; + +// Elimina la propiedad a, dejando a myobj solo con la propiedad b. +delete myobj.a; +console.log ('a' in myobj); // muestra: "false" +</pre> + +<p>También puedes utilizar <code>delete</code> para eliminar una variable global siempre y cuando no se haya utilizado la palabra clave <code>var</code> para declarar la variable:</p> + +<pre class="brush: js notranslate">g = 17; +delete g; +</pre> + +<h2 id="Comparar_objetos">Comparar objetos</h2> + +<p>Como sabemos los objetos son de tipo referencia en JavaScript. Dos distintos objetos nunca son iguales, incluso aunque tengan las mismas propiedades. Solo comparar la misma referencia de objeto consigo misma arroja verdadero.</p> + +<pre class="brush: js notranslate">// Dos variables, dos distintos objetos con las mismas propiedades +var fruit = { name: 'apple' }; +var fruitbear = { name: 'apple' }; + +fruit == fruitbear; // devuelve false +fruit === fruitbear; // devuelve false</pre> + +<pre class="brush: js notranslate">// Dos variables, un solo objeto +var fruit = { name: 'apple' }; +var fruitbear = fruit; // Asigna la referencia del objeto fruit a fruitbear + +// Aquí fruit y fruitbear apuntan al mismo objeto +fruit == fruitbear; // devuelve true +fruit === fruitbear; // devuelve true + +fruit.name = 'grape'; +console.log(fruitbear); // Produce: { name: "grape" }, en lugar de { name: "apple" } +</pre> + +<p>Para obtener más información sobre los operadores de comparación, consulta <a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">Operadores de comparación</a>.</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>Para profundizar más, lee sobre los <a href="/es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">detalles del modelo de objetos de JavaScript</a>.</li> + <li>Para obtener más información sobre las clases de ECMAScript 2015 (una forma alternativa de crear objetos), lee el capítulo <a href="/es/docs/Web/JavaScript/Reference/Classes">Clases de JavaScript</a>.</li> +</ul> + +<p>{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}</p> diff --git a/files/es/web/javascript/guide/usar_promesas/index.html b/files/es/web/javascript/guide/usar_promesas/index.html new file mode 100644 index 0000000000..4b84166fe6 --- /dev/null +++ b/files/es/web/javascript/guide/usar_promesas/index.html @@ -0,0 +1,344 @@ +--- +title: Usar promesas +slug: Web/JavaScript/Guide/Usar_promesas +tags: + - Asíncrono + - Guía + - Intermedio + - Promesa + - Promesas +translation_of: Web/JavaScript/Guide/Using_promises +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p>Una {{jsxref("Promise")}} (promesa en castellano) es un objeto que representa la terminación o el fracaso de una operación asíncrona. Dado que la mayoría de las personas consumen <code>promises</code> ya creadas, esta guía explicará primero cómo consumirlas, y luego cómo crearlas.</p> + +<p>Esencialmente, una promesa es un objeto devuelto al cuál se adjuntan funciones <code>callback</code>, en lugar de pasar callbacks a una función.</p> + +<p>Considera la función <code>crearArchivoAudioAsync()</code>, el cuál genera de manera asíncrona un archivo de sonido de acuerdo a un archivo de configuración, y dos funciones callback, una que es llamada si el archivo de audio es creado satisfactoriamente, y la otra que es llamada si ocurre un error. El código podría verse de la siguiente forma:</p> + +<pre class="brush: js line-numbers language-js">function exitoCallback(resultado) { + console.log("Archivo de audio disponible en la URL " + resultado); +} + +function falloCallback(error) { + console.log("Error generando archivo de audio " + error); +} + +crearArchivoAudioAsync(audioConfig, exitoCallback, falloCallback); +</pre> + +<p>... las funciones modernas devuelven un objeto <code>promise</code> al que puedes adjuntar funciones de retorno (callbacks). Si <code>crearArchivoAudioAsync</code> fuera escrita de manera tal que devuelva un objeto <code>promise</code>, usarla sería tan simple como esto:</p> + +<pre class="brush: js line-numbers language-js">crearArchivoAudioAsync(audioConfig).then(exitoCallback, falloCallback);</pre> + +<p>Lo cuál es la versión corta de:</p> + +<pre class="brush: js line-numbers language-js">const promesa = crearArchivoAudioAsync(audioConfig); +promesa.then(exitoCallback, falloCallback);</pre> + +<p>Llamamos a esto una <em>llamada a función asíncrona</em>. Esta convención tiene varias ventajas. Exploraremos cada una de ellas.</p> + +<h2 id="Garantías">Garantías</h2> + +<p>A diferencia de las funciones callback pasadas al "viejo estilo", una promesa viene con algunas garantías:</p> + +<ul> + <li>Las funciones callback nunca serán llamadas antes de la <a href="/es/docs/Web/JavaScript/EventLoop#Ejecutar_hasta_completar">terminación de la ejecución actual</a> del bucle de eventos de JavaScript.</li> + <li>Las funciones callback añadidas con <code>then()</code> incluso después del éxito o fracaso de la operación asíncrona serán llamadas como se mostró anteriormente.</li> + <li>Múltiples funciones callback pueden ser añadidas llamando a <code>then()</code> varias veces. Cada una de ellas es ejecutada una seguida de la otra, en el orden en el que fueron insertadas.</li> +</ul> + +<p>Una de las grandes ventajas de usar <code>promises</code> es el encadenamiento, explicado a continuación.</p> + +<h2 id="Encadenamiento">Encadenamiento</h2> + +<p>Una necesidad común es el ejecutar dos o más operaciones asíncronas seguidas, donde cada operación posterior se inicia cuando la operación previa tiene éxito, con el resultado del paso previo. Logramos esto creando una cadena de objetos <code>promises</code>.</p> + +<p>Aquí está la magia: la función <code>then()</code> devuelve una promesa nueva, diferente de la original:</p> + +<pre class="brush: js">const promesa = hazAlgo(); +const promesa2 = promesa.then(exitoCallback, falloCallback); +</pre> + +<p>o</p> + +<pre class="brush: js">let promesa2 = hazAlgo().then(exitoCallback, falloCallback); +</pre> + +<p>Esta segunda promesa (<code>promesa2</code>) representa no sólo la terminación de <code>hazAlgo()</code>, sino también de <code>exitoCallback</code> o <code>falloCallback</code> que pasaste, las cuales pueden ser otras funciones asíncronas devolviendo una promesa. Cuando ese es el caso, cualquier función callback añadida a <code>promesa2</code> se queda en cola detrás de la promesa devuelta por <code>exitoCallback</code> o <code>falloCallback</code>.</p> + +<p>Básicamente, cada promesa representa la terminación de otro paso (asíncrono on no) en la cadena.</p> + +<p>En el pasado, hacer varias operaciones asíncronas en fila conduciría a la clásica pirámide de funciones callback:</p> + +<pre class="brush: js">hazAlgo(function(resultado) { + hazAlgoMas(resultado, function(nuevoResultado) { + hazLaTerceraCosa(nuevoResultado, function(resultadoFinal) { + console.log('Obtenido el resultado final: ' + resultadoFinal + }, falloCallback); + }, falloCallback); +}, falloCallback); +</pre> + +<p>Con las funciones modernas, adjuntamos nuestras functiones callback a las promesas devueltas, formando una cadena de promesa:</p> + +<pre class="brush: js">hazAlgo().then(function(resultado) { + return hazAlgoMas(resultado); +}) +.then(function(nuevoResultado) { + return hazLaTerceraCosa(nuevoResultado); +}) +.then(function(resultadoFinal) { + console.log('Obtenido el resultado final: ' + resultadoFinal); +}) +.catch(falloCallback); +</pre> + +<p>Los argumentos a <code>then</code> son opcionales, y <code>catch(falloCallBack)</code> es un atajo para <code>then(null, falloCallBack)</code>. Es posible que veas esto expresado con <a href="/es/docs/Web/JavaScript/Referencia/Funciones/Arrow_functions">funciones de flecha</a> :</p> + +<pre class="brush: js">hazAlgo() +.then(resultado => hazAlgoMas(resultado)) +.then(nuevoResultado => hazLaTerceraCosa(nuevoResultado)) +.then(resultadoFinal => { + console.log(`Obtenido el resultado final: ${resultadoFinal}`); +}) +.catch(falloCallback); +</pre> + +<p><strong>Importante</strong>: Devuelve siempre resultados, de otra forma las funciones callback no se encadenarán, y los errores no serán capturados.</p> + +<h3 id="Encadenar_después_de_una_captura">Encadenar después de una captura</h3> + +<p>Es posible encadenar después de un fallo - por ejemplo: un <code>catch</code>- lo que es útil para lograr nuevas acciones incluso después de una acción fallida en la cadena. Lea el siguiente ejemplo:</p> + +<pre class="brush: js">new Promise((resolver, rechazar) => { + console.log('Inicial'); + + resolver(); +}) +.then(() => { + throw new Error('Algo falló'); + + console.log('Haz esto'); +}) +.catch(() => { + console.log('Haz aquello'); +}) +.then(() => { + console.log('Haz esto sin que importe lo que sucedió antes'); +}); +</pre> + +<p>Esto devolverá el siguiente texto:</p> + +<pre>Inicial +Haz aquello +Haz esto sin que importe lo que sucedió antes +</pre> + +<p>Note que el texto "Haz esto" no es escrito porque el error "Algo falló" causó un rechazo.</p> + +<h2 id="Propagación_de_errores">Propagación de errores</h2> + +<p>Tal vez recuerdes haber visto <code>falloCallback</code> tres veces en la pirámide en un ejemplo anterior, en comparación con sólo una vez al final de la cadena de promesas:</p> + +<pre class="brush: js">hazAlgo() +.then(resultado => hazAlgoMas(valor)) +.then(nuevoResultado => hazLaTerceraCosa(nuevoResultado)) +.then(resultadoFinal => console.log(`Obtenido el resultado final: ${resultadoFinal}`)) +.catch(falloCallback); +</pre> + +<p>Básicamente, una cadena de promesas se detiene si hay una excepción, y recorre la cadena buscando manejadores de captura. Lo siguiente está mucho más adaptado a la forma de trabajo del código síncrono:</p> + +<pre class="brush: js">try { + let resultado = syncHazAlgo(); + let nuevoResultado = syncHazAlgoMas(resultado); + let resultadoFinal = syncHazLaTerceraCosa(nuevoResultado); + console.log(`Obtenido el resultado final: ${resultadoFinal}`); +} catch(error) { + falloCallback(error); +} +</pre> + +<p>Esta simetría con el código síncrono culmina con la mejora sintáctica <a href="/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona">async/await</a> en ECMASCript 2017:</p> + +<pre class="brush: js">async function foo() { + try { + let resultado = await hazAlgo(); + let nuevoResultado = await hazAlgoMas(resultado); + let resultadoFinal = await hazLaTerceraCosa(nuevoResultado); + console.log(`Obtenido el resultado final: ${resultadoFinal}`); + } catch(error) { + falloCallback(error); + } +} +</pre> + +<p>Se construye sobre <code>promesas</code>, por ejemplo, <code>hazAlgo()</code> es la misma función que antes. Puedes leer más sobre la sintaxis <a href="https://developers.google.com/web/fundamentals/getting-started/primers/async-functions">aquí</a>.</p> + +<p>Las <code>promesas</code> resuelven un fallo fundamental de la pirámide de funciones callback, capturando todos los errores, incluso excepciones lanzadas y errores de programación. Esto es esencial para la composición funcional de operaciones asíncronas.</p> + +<h2 id="Eventos_de_rechazo_de_Promesas">Eventos de rechazo de Promesas</h2> + +<p>Cuando una <code>promesa</code> es rechazada, uno de los dos eventos se envía al ámbito global (generalmente, éste es el {{domxref("window")}}, o, si se utiliza en un trabajador web, es el {{domxref("Worker")}} u otra interfaz basada en un trabajador). Los dos eventos son:</p> + +<p><strong>{{domxref("Window.rejectionhandled_event", "rejectionhandled")}}</strong></p> + +<p>Se envía cuando se rechaza una promesa, una vez que el rechazo ha sido manejado por la función <code>reject</code> del ejecutor.</p> + +<p><strong>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</strong></p> + +<p>Se envía cuando se rechaza una promesa pero no hay un controlador de rechazo disponible.</p> + +<p>En ambos casos, el evento (del tipo {{domxref("PromiseRejectionEvent")}}) tiene como miembros una propiedad {{domxref("PromiseRejectionEvent.promise", "promise")}} que indica que la promesa fue rechazada, y una propiedad {{domxref("PromiseRejectionEvent.reason", "reason")}} que proporciona el motivo por el cuál se rechaza la promesa.</p> + +<p>Esto hace posible ofrecer el manejo de errores de promesas, y también ayuda a depurarlos. Estos controladores son globales, por lo tanto, todos los errores serán manejados por éstos independientemente de la fuente.</p> + +<p><u>Un caso de especial utilidad</u>: al escribir código para {{Glossary("Node.js")}}, es común que los módulos que incluyas en tu proyecto no cuenten con un controlador de evento para promesas rechazadas. Estos se registran en la consola en tiempo de ejecución de Node. Puedes capturarlos para analizarlos y manejarlos en tu código - o solo evitar que abarroten tu salida - agregando un controlador para el evento {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, como se muestra a continuación:</p> + +<pre><code>window.addEventListener("</code>unhandledrejection<code>", event => { + /* Podrías comenzar agregando código para examinar + la promesa específica analizando event.promise + y la razón del rechazo, accediendo a event.reason */ + + event.preventDefault(); +}, false);</code></pre> + +<p>Llamando al método {{domxref("Event.preventDefault", "preventDefault()")}} del evento, le dices a Javascript en tiempo de ejecución que no realice su acción predeterminada cuando las promesas rechazadas no cuenten con manejadores. En el caso de Node, esa acción predeterminada usualmente registra el error en la consola.</p> + +<p>Lo ideal, por supuesto, sería examinar las promesas rechazadas para asegurarte que ninguna de ellas tienen errores de código reales antes de descartar esos eventos.</p> + +<h2 id="Crear_una_promesa_alrededor_de_una_vieja_API_de_callbacks"><strong>Crear una promesa alrededor de una vieja API de callbacks</strong></h2> + +<p>Una {{jsxref("Promise")}} puede ser creada desde cero usando su constructor. Esto debería ser sólo necesario para envolver viejas APIs.</p> + +<p>En un mundo ideal, todas las funciones asíncronas devolverían promesas. Desafortunadamente, algunas APIs aún esperan que se les pase callbacks con resultado fallido/exitoso a la forma antigua. El ejemplo más obvio es la función {{domxref("WindowTimers.setTimeout", "setTimeout()")}}:</p> + +<pre class="brush: js">setTimeout(() => diAlgo("pasaron 10 segundos"), 10000); +</pre> + +<p>Combinar callbacks del viejo estilo con promesas es problemático. Si <code>diAlgo</code> falla o contiene un error de programación, nada lo captura. La función <code>setTimeout</code> es culpable de esto.</p> + +<p>Afortunadamente podemos envolverlas en una promesa. La mejor práctica es envolver las funciones problemáticas en el nivel más bajo posible, y después nunca llamarlas de nuevo directamente:</p> + +<pre class="brush: js">const espera = ms => new Promise(resuelve => setTimeout(resuelve, ms)); + +espera(10000).then(() => diAlgo("10 segundos")).catch(falloCallback); +</pre> + +<p>Básicamente, el constructor de la promesa toma una función ejecutora que nos permite resolver o rechazar manualmente una promesa. Dado que <code>setTimeout</code> no falla realmente, descartamos el rechazo en este caso.</p> + +<h2 id="Composición">Composición</h2> + +<p>{{jsxref("Promise.resolve()")}} y {{jsxref("Promise.reject()")}} son atajos para crear manualmente una promesa resuelta o rechazada respectivamente. Esto puede ser útil a veces.</p> + +<p>{{jsxref("Promise.all()")}} son {{jsxref("Promise.race()")}} son dos herramientas de composición para ejecutar operaciones asíncronas en paralelo.</p> + +<p>Podemos comenzar operaciones en paralelo y esperar que finalicen todas ellas de la siguiente manera:</p> + +<pre><code>Promise.all([func1(), func2(), func3()]) +.then(([resultado1, resultado2, resultado3]) => { /* usa resultado1, resultado2 y resultado3 */ });</code></pre> + +<p>La composición secuencial es posible usando Javascript inteligente:</p> + +<pre><code>[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve()) +.then(result3 => { /* use result3 */ });</code></pre> + +<p>Básicamente, reducimos un conjunto de funciones asíncronas a una cadena de promesas equivalente a: <code>Promise.resolve().then(func1).then(func2).then(func3);</code></p> + +<p>Esto se puede convertir en una función de composición reutilizable, que es común en la programación funcional:</p> + +<pre><code>const aplicarAsync = (acc,val) => acc.then(val); +const componerAsync = (...funcs) => x => funcs.reduce(aplicarAsync, Promise.resolve(x));</code></pre> + +<p>La función <code>componerAsync()</code> aceptará cualquier número de funciones como argumentos, y devolverá una nueva función que acepta un valor inicial que es pasado a través del conducto de composición. Esto es beneficioso porque cualquiera o todas las funciones pueden ser o asíncronas o síncronas y se garantiza que serán ejecutadas en el orden correcto:</p> + +<pre class="brush: js">const transformData = componerAsync(func1, asyncFunc1, asyncFunc2, func2); +const resultado3 = transformData(data); +</pre> + +<p>En ECMAScript 2017, la composición secuencial puede ser realizada usando simplemente async/await:</p> + +<pre class="brush: js">let resultado; +for (const f of [func1, func2, func3]) { + resultado = await f(resultado); +} +</pre> + +<h2 id="Sincronización">Sincronización</h2> + +<p>Para evitar sorpresas, las funciones pasadas a <code>then()</code> nunca serán llamadas sincrónicamente, incluso con una promesa ya resuelta:</p> + +<pre class="brush: js">Promise.resolve().then(() => console.log(2)); +console.log(1); // 1, 2 +</pre> + +<p>En lugar de ejecutarse inmediatamente, la función pasada es colocada en una cola de microtareas, lo que significa que se ejecuta más tarde cuando la cola es vaciada al final del actual ciclo de eventos de JavaScript:</p> + +<pre class="brush: js">const espera = ms => new Promise(resuelve => setTimeout(resuelve, ms)); + +espera().then(() => console.log(4)); +Promise.resuelve().then(() => console.log(2)).then(() => console.log(3)); +console.log(1); // 1, 2, 3, 4 +</pre> + +<h2 id="Anidamiento">Anidamiento</h2> + +<p>Las cadenas de promesas simples se mantienen planas sin anidar, ya que el anidamiento puede ser el resultado de una composición descuidada. Vea <a href="/es/docs/Web/JavaScript/Guide/Usar_promesas$edit#Common_mistakes">errores comunes</a>.</p> + +<p>El anidamiento es una estructura de control para limitar el alcance de las sentencias <code>catch</code>. Específicamente, un <code>catch</code> anidado sólo captura fallos dentro de su contexto y por debajo, no captura errores que están más arriba en la cadena fuera del alcance del anidamiento. Cuando se usa correctamente, da mayor precisión en la recuperación de errores:</p> + +<pre><code>hacerAlgoCritico() +.then(resultado => hacerAlgoOpcional() + .then(resultadoOpcional => hacerAlgoSuper(resultadoOpcional)) + .catch(e => {})) // Ignorar si hacerAlgoOpcional falla. +.then(() => masAsuntosCriticos()) +.catch(e => console.log("Acción crítica fallida: " + e.message));</code> +</pre> + +<p>Nota que aquí los pasos opcionales están anidados, por la precaria colocación de lo externo (y) alrededor de ellos.</p> + +<p>La declaración interna <code>catch</code> solo detecta errores de <code>hacerAlgoOpcional()</code> y <code>hacerAlgoSuper()</code>, después de lo cuál el código se reanuda con <code>masAsuntosCriticos()</code>. Es importante destacar que si <code>hacerAlgoCritico()</code> falla, el error es capturado únicamente por el <code>catch</code> final.</p> + +<h2 id="Errores_comunes">Errores comunes</h2> + +<p>Aquí hay algunos errores comunes que deben tenerse en cuenta al componer cadenas de promesas. Varios de estos errores se manifiestan en el siguiente ejemplo:</p> + +<pre><code>// ¡Mal ejemplo! +hacerlAlgo().then(function(resultado) { + hacerOtraCosa(resultado) // Olvida devolver una promesa desde el interior de la cadena + anidamiento innecesario + .then(nuevoResultado => hacerUnaTerceraCosa(nuevoResultado)); +}).then(() => hacerUnaCuartaCosa()); +// Olvida terminar la cadena con un catch!</code></pre> + +<p>El primer error es no encadenar las acciones adecuadamente. Esto sucede cuando creamos una promesa y olvidamos devolverla. Como consecuencia, la cadena se rompe, o mejor dicho, tenemos dos cadenas independientes que compiten. Esto significa que <code>hacerUnaCuartaCosa()</code> no esperará a que finalicen <code>hacerOtraCosa()</code> o <code>hacerUnaTerceraCosa()</code>, y se ejecutará paralelamente a ellas. Las cadenas separadas también tienen un manejador de errores separado, lo que provoca errores no detectados.</p> + +<p>El segundo error es el anidamiento innecesario, que da lugar al primer error. La anidación también limita el alcance de los manejadores de errores internos, que - si no son deseados - pueden llevar a errores no detectados. Una variante de esto es el <a href="https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it">constructor anti-patrón de promesas</a>, el cuál combina el anidamiento con el uso redundante del constructor de promesa para envolver el código que ya usa promesas. </p> + +<p>El tercer error es olvidar cerrar las cadenas con catch.Las cadenas de promesas no terminadas conducen a errores no capturados en la mayoría de los navegadores.</p> + +<p>Una buena regla es devolver o terminar siempre las cadenas de promesas, y tan pronto como obtenga una nueva promesa, devolverla de inmediato, para aplanar las cosas:</p> + +<pre><code>hacerAlgo() +.then(function(resultado) { + return hacerOtraCosa(resultado); +}) +.then(nuevoResultado => hacerUnaTerceraCosa(nuevoResultado)) +.then(() => hacerUnaCuartaCosa()) +.catch(error => console.log(error));</code></pre> + +<p>Nota que <code>() => x</code> es un atajo para <code>() => { return x; }</code>.</p> + +<p>Ahora tenemos una cadena determinística simple con un manejador de error adecuado.</p> + +<p>El uso de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async / await</a> aborda la mayoría, si no todos estos problemas, la desventaja es que el error más común con esa sintaxis es olvidar la palabra clave <a href="en-US/docs/Web/JavaScript/Reference/Statements/async_function">await</a>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Promise.then()")}}</li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="http://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">Nolan Lawson: Tenemos un problema con las promesas — Errores comunes con las promesas</a></li> +</ul> diff --git a/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html b/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html new file mode 100644 index 0000000000..f237f7c5fa --- /dev/null +++ b/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html @@ -0,0 +1,410 @@ +--- +title: Herencia y la cadena de prototipos +slug: Web/JavaScript/Herencia_y_la_cadena_de_protipos +tags: + - Herencia + - Intermedio + - JavaScript + - Programación orientada a objetos +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<p>JavaScript provoca cierta confusión en desarrolladores con experiencia en lenguajes basados en clases (como Java o C++), por ser dinámico y no proporcionar una implementación de clases en sí mismo (la palabra clave <code>class</code> se introdujo en ES2015, pero sólo para endulzar la sintaxis, ya que JavaScript sigue estando basado en prototipos).</p> + +<p>En lo que a herencia se refiere, JavaScript sólo tiene una estructura: objetos. Cada objeto tiene una propiedad privada (referida como su [[Prototype]]) que mantiene un enlace a otro objeto llamado su <strong>prototipo</strong>. Ese objeto prototipo tiene su propio prototipo, y así sucesivamente hasta que se alcanza un objeto cuyo prototipo es <code>null</code>. Por definición, <code>null</code> no tiene prototipo, y actúa como el enlace final de esta <strong>cadena de prototipos</strong>.</p> + +<p>Casi todos los objetos en JavaScript son instancias de {{jsxref("Object")}} que se sitúa a la cabeza de la cadena de prototipos.</p> + +<p>A pesar de que a menudo esto se considera como una de las principales debilidades de JavaScript, el modelo de herencia de prototipos es de hecho más potente que el modelo clásico. Por ejemplo, es bastante simple construir un modelo clásico a partir de un modelo de prototipos.</p> + +<h2 id="Herencia_con_la_cadena_de_prototipos">Herencia con la cadena de prototipos</h2> + +<h3 id="Heredando_propiedades">Heredando propiedades</h3> + +<p>Los objetos en JavaScript son "contenedores" dinámicos de propiedades (referidas como sus <strong>propiedades particulares</strong>). Los objetos en JavaScript poseen un enlace a un objeto prototipo. Cuando intentamos acceder a una propiedad de un objeto, la propiedad no sólo se busca en el propio objeto sino también en el prototipo del objeto, en el prototipo del prototipo, y así sucesivamente hasta que se encuentre una propiedad que coincida con el nombre o se alcance el final de la cadena de prototipos.</p> + +<div class="note"> +<p>Siguiendo el estándar ECMAScript, la notación <code>algunObjeto.[[Prototype]]</code> se usa para designar el prototipo de <code>algunObjeto.</code> A partir de ECMAScript 2015, se accede al <code>[[Prototype]]</code> utilizando los accesores {{jsxref("Object.getPrototypeOf()")}} y {{jsxref("Object.setPrototypeOf()")}}. Esto es equivalente a la propiedad JavaScript <code>__proto__</code> que no es estándar pero es el de-facto implementado por los navegadores.</p> + +<p>No debe confundirse con la propiedad de las funciones <code><em>func.</em>prototype</code>, que en cambio especifican el <code>[[Prototype]]</code> a asignar a todas las instancias de los objetos creados por la función dada cuando se utiliza como un constructor. La propiedad <code><strong>Object.prototype</strong></code> representa el prototipo del objeto {{jsxref("Object")}}.</p> +</div> + +<p>Esto es lo que ocurre cuando intentamos acceder a una propiedad:</p> + +<pre class="brush: js">// <code>Supongamos que tenemos un objeto</code> o, con propiedades a y b: +// {a: 1, b: 2} +// o.[[Prototype]] tiene propiedades b y c: +// {b: 3, c: 4} +// Finalmente, o.[[Prototype]].[[Prototype]] es null. +// Este es el final de la cadena de prototipos, ya que null, +// por definición, no tiene [[Prototype]]. +// Por tanto, la cadena completa de prototipos se vería como: +// {a:1, b:2} ---> {b:3, c:4} ---> null + +console.log(o.a); // 1 +// ¿Hay una propiedad 'a' en o? Sí, y su valor es 1. + +console.log(o.b); // 2 +// ¿Hay una propiedad 'b' en o? Sí, y su valor es 2. +// El prototipo también tiene una propiedad 'b', pero no se ha visitado. +// Esto se llama "solapamiento de propiedades" + +console.log(o.c); // 4 +// ¿Hay una propiedad 'c' en o? No, comprobamos su prototipo. +// ¿Hay una propiedad 'c' en o.[[Prototype]]? Sí, y su valor es 4. + +console.log(o.d); // undefined +// ¿Hay una propiedad 'd' en o? No, comprobamos su prototipo. +// ¿Hay una propiedad 'd' en o.[[Prototype]]? No, comprobamos su prototipo. +// o.[[Prototype]].[[Prototype]] es null, paramos de buscar. +// No se encontró la propiedad, se devuelve undefined +</pre> + +<p>Dar valor a una propiedad de un objeto crea una propiedad. La única excepción a las reglas de funcionamiento de obtener y dar valores ocurre cuando hay una propiedad heredada con un <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="Defining Getters and Setters">getter o un setter</a>.</p> + +<h3 id="Heredando_métodos">Heredando "métodos"</h3> + +<p>JavaScript no tiene "métodos" en la forma que los lenguajes basados en clases los define. En JavaScript, cualquier función puede añadirse a un objeto como una propiedad. Una función heredada se comporta como cualquier otra propiedad, viéndose afectada por el solapamiento de propiedades como se muestra anteriormente (siendo, en este caso, una especie de <em>redefinición de métodos</em>).</p> + +<p>Cuando una función heredada se ejecuta, el valor de <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this" title="this"><code>this</code></a> apunta al objeto que hereda, no al prototipo en el que la función es una propiedad.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function(b){ + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// Cuando en este caso se llama a o.m, 'this' se refiere a o + +var p = Object.create(o); +// p es un objeto que hereda de o + +p.a = 12; // crea una propiedad 'a' en p +console.log(p.m()); // 13 +// cuando se llama a p.m, 'this' se refiere a p. +// De esta manera, cuando p hereda la función m de o, +// 'this.a' significa p.a, la propiedad 'a' de p +</pre> + +<h2 id="Usando_prototipos_en_JavaScript">Usando prototipos en JavaScript</h2> + +<p>Veamos lo que sucede detrás de escena detalladamente.</p> + +<p>En JavaScript, como se mencionó anteriormente, las funciones pueden tener propiedades. Todas las funciones tienen una propiedad especial llamada <code>prototype</code>. Por favor ten en cuenta que el siguiente código es autónomo (es seguro asumir que no hay otro JavaScript en la página web mas que el siguiente). Para la mejor experiencia de aprendizaje, es altamente recomendable que abras una consola (la cual, en Chrome y Firefox, se puede abrir presionando Ctrl+Shift+I), navegando hasta la pestaña "console", copiando y pegando el siguiente código JavaScript, y ejecutándolo presionando la tecla Enter/Return.</p> + +<pre class="brush: js line-numbers language-js">function hacerAlgo(){} +console.log( hacerAlgo.prototype ); +// No importa cómo declares la función, una +// función en JavaScript siempre tendrá una +// propiedad prototype predeterminada. +var hacerAlgo = function(){}; +console.log( hacerAlgo.prototype );</pre> + +<p>Como acabamos de ver, <code>hacerAlgo()</code> tiene una propiedad <code>prototype</code> predeterminada, como lo demuestra la consola. Después de ejecutar este código, la consola debería haber mostrado un parecido a esto.</p> + +<pre class="brush: js line-numbers language-js">{ + constructor: ƒ hacerAlgo(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>Podemos añadir propiedades al prototipo de <code>hacerAlgo()</code>, como se muestra a continuación.</p> + +<pre class="brush: js line-numbers language-js">function hacerAlgo(){} +hacerAlgo.prototype.foo = "bar"; +console.log( hacerAlgo.prototype );</pre> + +<p>El resultado:</p> + +<pre>{ + foo: "bar", + constructor: ƒ hacerAlgo(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>Ahora podemos usar el operador <code>new</code> para crear una instancia de <code>hacerAlgo()</code> basado en este prototipo. Para usar el operador <code>new</code>, llama la función normalmente pero añadiendo el prefijo <code>new</code>. Llamar a la función con el operador <code>new</code> devuelve un objeto que es una instancia de la función. Entonces las propiedades pueden ser añadidas a este objeto.</p> + +<p>Intenta el siguiente código:</p> + +<pre class="brush: js line-numbers language-js">function hacerAlgo(){} +hacerAlgo.prototype.foo = "bar"; // añadir una propiedad al prototipo +var hacerUnaInstancia = new hacerAlgo(); +hacerUnaInstancia.prop = "un valor"; // añadir una propiedad al objeto +console.log( hacerUnaInstancia );</pre> + +<p>El resultado es similar a lo siguiente:</p> + +<pre class="brush: js line-numbers language-js">{ + prop: "un valor", + __proto__: { + foo: "bar", + constructor: ƒ hacerAlgo(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +}</pre> + +<p>Como acabamos de ver, el <code>__proto__</code> de <code>hacerUnaInstancia</code> es <code>hacerAlgo.prototype</code>. Pero, ¿qué hace esto? Cuando accedes a la propiedad de <code>hacerUnaInstancia</code>, el navegador primero revisa si <code>hacerUnaInstancia</code> tiene esa propiedad.</p> + +<p>Si <code>hacerUnaInstancia</code> no tiene la propiedad, entonces el navegador busca por la propiedad en el <code>__proto__</code> de <code>hacerUnaInstancia</code> (también conocido como <code>hacerAlgo.prototype</code>). Si el <code>__proto__</code> de <code>hacerUnaInstancia</code> tiene la propiedad buscada, entonces la propiedad en el <code>__proto__</code> de <code>hacerUnaInstancia</code> es usada.</p> + +<p>De otra manera, si el <code>__proto__</code> de <code>hacerUnaInstancia</code> no tiene la propiedad, entonces el <code>__proto__</code> de <code>__proto__</code> de <code>hacerUnaInstancia</code> es revisado para la propiedad. Por defecto, el <code>__proto__</code> de la propieda <code>prototype</code> de cualquier función es <code>window.Object.prototype</code>. Entonces, el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> (conocido como el <code>__proto__</code> de <code>hacerAlgo.prototype</code> (conocido como <code>Object.prototype</code>)) es entonces revisado por la propiedad que se está buscando.</p> + +<p>Si la propiedad no es encontrada en el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code>, entonces el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> es revisado. Sin embargo, hay un problema: el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de el <code>__proto__</code> de <code>hacerUnaInstancia</code> no existe. Entonces y sólo entonces, despues de que toda la cadena de prototipos de <code>__proto__</code>'s es revisada, y no haya mas <code>__proto__</code>s el navegador afirma que la propiedad no existe y concluye que el valor de la propiedad es <code>undefined</code>.</p> + +<p>Vamos a intentar introduciendo más código en la consola:</p> + +<pre class="brush: js line-numbers language-js">function hacerAlgo(){} +hacerAlgo.prototype.foo = "bar"; +var hacerUnaInstancia = new hacerAlgo(); +hacerUnaInstancia.prop = "un valor"; +console.log("hacerUnaInstancia.prop: " + hacerUnaInstancia.prop); +console.log("hacerUnaInstancia.foo: " + hacerUnaInstancia.foo); +console.log("hacerAlgo.prop: " + hacerAlgo.prop); +console.log("hacerAlgo.foo: " + hacerAlgo.foo); +console.log("hacerAlgo.prototype.prop: " + hacerAlgo.prototype.prop); +console.log("hacerAlgo.prototype.foo: " + hacerAlgo.prototype.foo);</pre> + +<p>El resultado es el siguiente:</p> + +<pre class="brush: js line-numbers language-js">hacerUnaInstancia.prop: un valor +hacerUnaInstancia.foo: bar +hacerAlgo.prop: undefined +hacerAlgo.foo: undefined +hacerAlgo.prototype.prop: undefined +hacerAlgo.prototype.foo: bar</pre> + +<h2 id="Maneras_diferentes_de_crear_objetos_y_la_cadena_de_prototipos_resultante">Maneras diferentes de crear objetos y la cadena de prototipos resultante</h2> + +<h3 id="Objetos_creados_mediante_estructuras_sintácticas">Objetos creados mediante estructuras sintácticas</h3> + +<pre class="brush: js">var o = {a: 1}; + +// El objeto recién creado o tiene Object.prototype como su [[Prototype]] +// o no tiene ninguna propiedad llamada 'hasOwnProperty' +// hasOwnProperty es una propiedad propia de Object.prototype. +// Entonces o hereda hasOwnProperty de Object.prototype +// Object.prototype es null como su prototype. +// o ---> Object.prototype ---> null + +var a = ["yo", "whadup", "?"]; + +// Arrays hereda de Array.prototype +// (que tiene métodos como indexOf, forEach, etc.) +// La cadena de prototipados sería: +// a ---> Array.prototype ---> Object.prototype ---> null + +function f(){ + return 2; +} + +// Las funciones heredan de Function.prototype +// (que tiene métodos como call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="Con_un_constructor">Con un constructor</h3> + +<p>Un "constructor" en JavaScript es "solo" una función que pasa a ser llamada con el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="new">operador new</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v){ + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g es un objeto con las propiedades 'vértices' y 'edges'. +// g.[[Prototype]] es el valor de Graph.prototype cuando new Graph() es ejecutado. +</pre> + +<h3 id="Con_Object.create">Con <code>Object.create</code></h3> + +<p>ECMAScript 5 Introdujo un nuevo método: {{jsxref("Object.create()")}}. Llamando este método creas un nuevo objeto. El prototype de este objeto es el primer argumento de la función:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (heredado) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, por que d no hereda de Object.prototype +</pre> + +<div> +<h3 id="Con_la_palabra_reservada_class">Con la palabra reservada <code>class</code></h3> + +<p>ECMAScript 2015 introduce un nuevo set de palabras reservadas que implementan <a href="/en-US/docs/Web/JavaScript/Reference/Classes">clases</a>. Aunque estos constructores lucen más familiares para los desarrolladores de lenguajes basados en clases, aun así no son clases. JavaScript sigue estando basado en prototipos. Los nuevos keywords incluyen {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">"use strict"; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Rendimiento">Rendimiento</h3> + +<p>El tiempo de búsqueda para las propiedades que están en lo alto de la cadena de prototipo puede tener un impacto negativo en el rendimiento, y esto puede ser significativo en el código donde el rendimiento es crítico. Además, tratar de acceder a las propiedades inexistentes siempre atravesara la cadena de prototipos completamente.</p> + +<p>También, cuando iteramos sobre las propiedades de un objeto, cada propiedad enumerable que se encuentra en la cadena de prototipo será enumerada.</p> + +<p>Para comprobar si un objeto tiene una propiedad definida en sí mismo y no en alguna parte de su cadena de prototipo, Es necesario usar para esto el método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> que todos los objetos heredan de<code> Object.prototype</code>.</p> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty" title="/ru/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> es la única cosa en JavaScript que se ocupa de las propiedades y no atraviesa la cadena de prototipos.</p> + +<p>Nota: Esto <strong>no</strong> es suficiente para chequear si una propiedad esta <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. la propiedad podría existir, pero el valor justamente sucede que esta seteado como <code>undefined</code>.</p> +</div> + +<h3 id="Malas_practicas_Extensión_de_prototipos_nativos">Malas practicas: Extensión de prototipos nativos</h3> + +<p>Una mala característica que a menudo se usa, es extender <code>Object.prototype</code> o uno de los otros pre-incorporados prototypes.</p> + +<p>Esta técnica se llama <em>monkey patching</em> y rompe la <em>encapsulación</em>. Si bien, es utilizado por librerías como <em>Prototype.js</em>, no hay una buena razón para saturar los tipos pre-incorporados con funcionalidades adicionales <em>no estándar</em>.</p> + +<p>La <strong>única</strong> buena razón para extender los pre-incorporados prototipos es modificar las funcionalidades nuevas de los motores de JavaScript; por ejemplo:</p> + +<p><code>Array.forEach</code>, etc.</p> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p><code>B</code> heredará de <code>A</code>:</p> + +<pre class="brush: js">function A(a){ + this.varA = a; +} + +// Cual es el propósito de incluir varA en el prototipo si A.prototype.varA <em>siempre</em> va a ser la sombra de +// this.varA, dada la definición de la función A arriba? +A.prototype = { + varA : null, // No deberíamos atacar varA desde el prototipo como haciendo nada? + // Tal vez intentando una optimización al asignar espacios ocultos en las clases? + // https://developers.google.com/speed/articles/optimizing-javascript#Initializing instanciar variables + // podría ser válido si varA no fuera inicializado únicamente por cada instancia. + doSomething : function(){ + // ... + } +} + +function B(a, b){ + A.call(this, a); + this.varB = b; +} +B.prototype = Object.create(A.prototype, { + varB : { + value: null, + enumerable: true, + configurable: true, + writable: true + }, + doSomething : { + value: function(){ // override + A.prototype.doSomething.apply(this, arguments); // call super + // ... + }, + enumerable: true, + configurable: true, + writable: true + } +}); +B.prototype.constructor = B; + +var b = new B(); +b.doSomething(); +</pre> + +<p>Las partes importantes son:</p> + +<ul> + <li>Los tipos son definidos en <code>.prototype</code></li> + <li>Usar <code>Object.create()</code> para heredar</li> +</ul> + +<h2 id="prototype_y_Object.getPrototypeOf"><code>prototype</code> y <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript es un poco confuso para desarrolladores que vienen de lenguajes como Java o C++, ya que todo es dinámico, en todo momento de la ejecución, y no tiene clases en lo absoluto. Todo es solamente instancias (objetos). Incluso las "clases" que creamos, son solo funciones (objetos).</p> + +<p>Probablemente notaste que nuestra <code>función A</code> tiene una propiedad especial llamada <code>prototype</code>. Esta propiedad especial funciona con el operador de JavaScript <code>new</code>. La referencia al prototipo objeto es copiada al interno <code>[[Prototype]]</code> propiedad de la instancia <em>new</em>. Por ejemplo, cuando creas una variable <code>var a1 = new A()</code>, JavaScript (después de haber creado el objeto en memoria y antes de correr function <code>A()</code> con <code>this</code> definido a él) setea <code>a1.[[Prototype]] = A.prototype</code>. Cuando a continuación accedes a las propiedades de la instancia, JavaScript primero chequea si existen en el objeto directamente, y si no, mira en el <code>[[Prototype]]</code>. Esto significa que todo lo que definas en el <code>prototipo</code> es efectivamente compartido a todas las instancias, e incluso después puedes cambiar partes del <code>prototipo</code> y que todos los cambios se hagan en todas las instancias.</p> + +<p>Si, en el ejemplo de arriba, pones <code>var a1 = new A(); var a2 = new A();</code> entonces <code>a1.doSomething</code> se referiría a <code>Object.getPrototypeOf(a1).doSomething</code>, que seria lo mismo que <code>A.prototype.doSomething</code> que definiste, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>resumiendo, <code>prototype</code> es para tipos, mientras que <code>Object.getPrototypeOf()</code> es lo mismo para instancias.</p> + +<p><code>[[Prototype]]</code> es visto como <em>recursivo</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., hasta que se encuentra o <code>Object.getPrototypeOf </code>retornará null.</p> + +<p>Entonces, cuando llamas</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript en realidad hace</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(o algo similar) y cuando después haces</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>chequea si <code>o</code> tiene una propiedad <code>someProp</code>. Si no, busca en <code>Object.getPrototypeOf(o).someProp</code> y si ahí no existe, busca en <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code> y así sucesivamente.</p> + +<div> +<h2 id="En_conclusión">En conclusión</h2> + +<p>Es <strong>esencial</strong> entender el modelo de prototipado por instancias antes de escribir código complejo que hace uso de esto. También, sé consciente del largo de la cadena de prototipado en tu código y romperlo si es necesario para evitar posibles problemas de rendimiento. Adicionalmente, el prototipo nativo <strong>nunca</strong> debería ser extendido a menos que esto sea por motivo de compatibilidad con nuevas versiones de JavaScript.</p> +</div> diff --git a/files/es/web/javascript/index.html b/files/es/web/javascript/index.html new file mode 100644 index 0000000000..b5fdd92899 --- /dev/null +++ b/files/es/web/javascript/index.html @@ -0,0 +1,143 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - Aprender + - JavaScript + - 'l10n:priority' +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>JavaScript</strong> (<strong>JS</strong>) es un lenguaje de programación ligero, interpretado, o compilado <a href="https://en.wikipedia.org/wiki/Just-in-time_compilation">justo-a-tiempo</a> (just-in-time) con </span> <span class="seoSummary">{{Glossary("First-class Function", "funciones de primera clase")}}. Si bien es más conocido como un lenguaje de scripting (secuencias de comandos) para páginas web, y es usado en <a class="external external-icon" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">muchos entornos fuera del navegador</a>, tal como {{Glossary("Node.js")}}, <a class="external external-icon" href="https://couchdb.apache.org/">Apache CouchDB</a> y <a class="external external-icon" href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>.</span> JavaScript es un lenguaje de {{Glossary ("Prototype-based programming", "programación basada en prototipos")}}, multiparadigma, de un solo hilo, dinámico, con soporte para programación orientada a objetos, imperativa y declarativa (por ejemplo programación funcional). Lee más en <a href="/es/docs/Web/JavaScript/About_JavaScript">acerca de JavaScript</a>.</p> + +<p class="summary">Esta sección está dedicada al lenguaje JavaScript en sí, y no a las partes que son específicas de las páginas web u otros entornos host. Para información acerca de {{Glossary("API","APIs")}} específicas para páginas Web, consulta <a href="/es/docs/Web/API">APIs Web</a> y {{Glossary("DOM")}}.</p> + +<p>El estándar para JavaScript es <a href="/es/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. A partir del 2012, todos los <a href="https://kangax.github.io/compat-table/es5/">navegadores modernos</a> soportan completamente ECMAScript 5.1. Los navegadores viejos soportan al menos ECMAScript 3. Desde Junio 17, 2015, <a href="https://www.ecma-international.org">ECMA International</a> publico la sexta versión principal de ECMAScript, que oficialmente se llama ECMAScript 2015, y que inicialmente se denominó ECMAScript 6 o ES6. Desde entonces, los estándares ECMAScript están en ciclos de lanzamiento anuales. Esta documentación hace referencia a la última versión preliminar, que actualmente es <a href="https://tc39.github.io/ecma262/">ECMAScript 2020</a>.</p> + +<p>No confundas JavaScript con el <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">lenguaje de programación Java</a>. Ambos "Java" y "JavaScript" son marcas o marcas registradas de Oracle en los Estados Unidos y otros países, Sin embargo, los dos lenguajes de programación tienen sintaxis, semántica y usos muy diferentes.</p> + +<h3 id="Quieres_transformarte_en_un_desarrollador_web_front-end">Quieres transformarte en un desarrollador web front-end?</h3> + +<p>Hemos reunido un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Tutoriales">Tutoriales</h2> + +<p>Aprende a programar en JavaScript con guías y tutoriales.</p> + +<h3 id="Para_completos_principiantes">Para completos principiantes</h3> + +<p>Dirígete a nuestro tema del <a href="/es/docs/Learn/JavaScript">Area de Aprendizaje JavaScript</a> si quieres aprender JavaScript pero no tienes experiencia previa de JavaScript o programación. Los módulos completos disponibles allí son los siguientes:</p> + +<dl> + <dt><a href="/es/docs/Learn/JavaScript/First_steps">Primeros pasos en JavaScript</a></dt> + <dd>Responde algunas preguntas fundamentales tales como "¿qué es JavaScript?", "¿cómo se ve?", y "¿qué puede hacer?", junto con la discusión de características clave de JavaScript, como variables, cadenas, números y matrices.</dd> + <dt><a href="/es/docs/Learn/JavaScript/Building_blocks">Bloques de construcción JavaScript</a></dt> + <dd>Continúa nuestra cobertura de las características fundamentales clave de JavaScript, dirigiendo nuestra atención a los tipos de bloques de código que se encuentran comúnmente, tales como declaraciones condicionales, bucles, funciones y eventos.</dd> + <dt><a href="/es/docs/Learn/JavaScript/Objects">Introducción a objetos JavaScript</a></dt> + <dd>Es importante comprender la naturaleza de la orientación a objetos en JavaScript si deseas ir más allá con tu conocimiento del lenguaje y la escritura de código más eficiente, por lo tanto, hemos proporcionado este módulo para ayudarte.</dd> + <dt><a href="/es/docs/Learn/JavaScript/Asynchronous">JavaScript asíncrono</a></dt> + <dd>Analiza el JavaScript asíncrono, por qué es importante y cómo se puede usar para manejar eficazmente las potenciales operaciones de bloqueo, tales como recuperar recursos de un servidor.</dd> + <dt><a href="/es/docs/Learn/JavaScript/Client-side_web_APIs">API web del lado del cliente</a></dt> + <dd>Explora qué son las APIs y cómo usar algunas de las APIs más comunes que encontrarás a menudo en tu trabajo de desarrollo.</dd> +</dl> + +<h3 id="Guía_de_JavaScript">Guía de JavaScript</h3> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Guide">Guía de JavaScript</a></dt> + <dd>Una guía mucho más detallada del lenguaje JavaScript, dirigida a aquellos con experiencia previa en programación, ya sea en JavaScript u otro lenguaje.</dd> +</dl> + +<h3 id="Intermedio">Intermedio</h3> + +<dl> + <dt><a href="/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">Comprendiendo los frameworks JavaScript de lado del cliente </a></dt> + <dd>Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, ya que proporcionan a los desarrolladores herramientas probadas y comprobadas para crear aplicaciones web interactivas y escalables. Este módulo te brinda algunos conocimientos básicos sobre cómo funcionan los frameworks del lado del cliente y cómo encajan en tu conjunto de herramientas, antes de pasar a la serie de tutoriales que cubren algunos de los más populares en la actualidad.</dd> + <dt><a href="/es/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Una reintroducción a JavaScript</a></dt> + <dd>Una descripción general para aquellos que <em>piensan</em> que saben JavaScript.</dd> +</dl> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Data_structures">Estructuras de datos en JavaScript</a></dt> + <dd>Descripción general de las estructuras de datos disponibles en JavaScript.</dd> + <dt><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y similaridad</a></dt> + <dd>JavaScript proporciona tres diferentes operadores de comparación de valores: igualdad estricta usando <code>===</code>, igualdad abstracta usando <code>==</code>, y el método {{jsxref("Global_Objects/Object/is", "Object.is()")}}.</dd> + <dt><a href="/es/docs/Web/JavaScript/Closures">Cierres (clousures)</a></dt> + <dd> + <p>Un cierre es la combinación de una función y un entorno léxico dentro del cual se declaró esa función.</p> + </dd> +</dl> + +<h3 id="Avanzado">Avanzado</h3> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Herencia y la cadena de prototipos</a></dt> + <dd>Explicación de la herencia basada en prototipos ampliamente incomprendida y subestimada.</dd> + <dt><a href="/es/docs/Web/JavaScript/Reference/Strict_mode">Modo estricto</a></dt> + <dd>El modo estricto define que no puedes usar ninguna variable antes de iniciarla. Es una variable restringida de ECMAScript 5, para un rendimiento más rápido y una depuración más fácil.</dd> + <dt><a href="/es/docs/Web/JavaScript/Typed_arrays">Arreglos escritos en JavaScript</a></dt> + <dd>Los arreglos escritos en JavaScript proveen un mecanismo para acceder a datos binarios sin formato.</dd> + <dt><a href="/es/docs/Web/JavaScript/Memory_Management">Gestión de la Memoria</a></dt> + <dd>Ciclo de vida de la memoria y recolección de basura en JavaScript.</dd> + <dt><a href="/es/docs/Web/JavaScript/EventLoop">Modelo de Concurrencia y Bucle de Eventos</a></dt> + <dd>JavaScript tiene un modelo de concurrencia basado en un "bucle de eventos".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Referencia">Referencia</h2> + +<p>Consulta la documentación completa de la <a href="/es/docs/Web/JavaScript/Reference">referencia de JavaScript</a>.</p> + +<dl> + <dt><a href="/es/docs/Web/JavaScript/Reference/Global_Objects">Objectos Estándar</a></dt> + <dd>Conoce los objectos estándar integrados {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, y otros.</dd> + <dt><a href="/es/docs/Web/JavaScript/Reference/Operators">Expresiones y operadores</a></dt> + <dd>Aprende más sobre el comportamiento de los operadores de JavaScript {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, el <a href="/es/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operador de precedencia</a>, y más.</dd> + <dt><a href="/es/docs/Web/JavaScript/Reference/Statements">Sentencias y declaraciones</a></dt> + <dd>Aprende cómo funciona {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, y más declaraciones y palabras reservadas de JavaScript.</dd> + <dt><a href="/es/docs/Web/JavaScript/Reference/Functions">Funciones</a></dt> + <dd>Aprende cómo trabajar con funciones de JavaScript para desarrollar tus aplicaciones.</dd> +</dl> + +<h2 id="Herramientas_recursos">Herramientas & recursos</h2> + +<p>Herramientas útiles para escribir y depurar tu código<strong> JavaScript</strong>.</p> + +<dl> + <dt><a href="/es/docs/Tools">Herramientas para Desarrolladores de Firefox</a></dt> + <dd><a href="/es/docs/Tools/Web_Console">Consola Web</a>, <a href="/es/docs/Tools/Profiler">Generador de Perfiles de JavaScript</a>, <a href="/es/docs/Tools/Debugger">Depurador</a>, y más.</dd> + <dt><a href="/es/docs/Web/JavaScript/Shells">Shells J</a><a href="/es/docs/Web/JavaScript/Shells">avaScript</a></dt> + <dd>Un shell de JavaScript te permite probar rápidamente fragmentos de código JavaScript.</dd> + <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt> + <dd>Un excelente recurso para aspirantes a desarrollador web — Aprendr JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratis, y el curso completo está disponible por un pequeño pago único.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd>La colaboración hecha fácil. Al agregar TogetherJS a tu sitio web, ¡tus usuarios pueden ayudarse mutuamente en un sitio web en tiempo real!</dd> + <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Preguntas en Stack Overflow etiquetadas con "JavaScript".</dd> + <dt><a href="/es/docs/Web/JavaScript/New_in_JavaScript">Versiones de JavaScript y notas de lanzamiento</a></dt> + <dd>Explora el historial de características y el estado de implementación de JavaScript.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Edita JavaScript, CSS, HTML y obtén resultados en vivo. Usa recursos externos y colabora con tu equipo en línea.</dd> + <dt><a href="https://plnkr.co/">Plunker</a></dt> + <dd>Plunker es una comunidad en línea para crear, colaborar y compartir sus ideas de desarrollo web. Edita sus archivos JavaScript, CSS, HTML y obtén resultados en vivo y estructuras de archivos.</dd> + <dt><a href="https://jsbin.com/">JSBin</a></dt> + <dd> + <p>JSBin es una herramienta de depuración de desarrollo web colaborativo de código abierto.</p> + </dd> + <dt><a href="https://codepen.io/">Codepen</a></dt> + <dd> + <p>Codepen es otra herramienta colaborativa de desarrollo web usada como un espacio para mostrar resultados en vivo.</p> + </dd> + <dt><a href="https://stackblitz.com/">StackBlitz</a></dt> + <dd> + <p>StackBlitz es otra herramienta de depuración/visualización en línea, que puede alojar e implementar aplicaciones full-stack usando React, Angular, etc.</p> + </dd> +</dl> +</div> +</div> diff --git a/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html b/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html new file mode 100644 index 0000000000..51f5ad98c9 --- /dev/null +++ b/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html @@ -0,0 +1,384 @@ +--- +title: Introducción a JavaScript orientado a objetos +slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos +tags: + - Constructor + - Herencia + - JavaScript + - Objetos + - Orientado a objetos + - POO + - espacio de nombres +translation_of: Learn/JavaScript/Objects +--- +<p>{{jsSidebar("Introductory")}}</p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>JavaScript</strong> dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a las diferencias de sus capacidades en comparación con otros lenguajes.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, luego examina el modelo de objetos de JavaScript, y finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p> + +<h2 id="JavaScript_Review" name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Revisión de JavaScript</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el ámbito de aplicación, puedes leer sobre estos temas en: <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a>.</span></span></p> + +<h2 id="Object-oriented_programming" name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Programación orientada a objetos</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la <strong>modularidad</strong>, <strong>polimorfismo</strong> y <strong>encapsulamiento</strong>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de un conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la computadora.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado a objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> + +<h2 id="Terminology" name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Terminología</span></span></h2> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Clase</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Define las características del Objeto.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Objeto</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una instancia de una Clase.</span></span></dd> + <dt><span style="line-height: 1.5;">Propiedad</span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una característica del Objeto, como el color.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Método</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una capacidad del Objeto, como caminar.</span></span></dd> +</dl> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Constructor</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es un método llamado en el momento de la creación de instancias.</span></span></dd> + <dt><span style="line-height: 1.5;">Herencia</span></dt> + <dd><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase puede heredar características de otra Clase.</span></span></dd> +</dl> + +<dl> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Encapsulamiento</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.</span></span></dd> + <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Polimorfismo</span></span></dt> + <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diferentes Clases podrían definir el mismo método o propiedad.</span></span></dd> +</dl> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p> + +<h2 id="Programación_basada_en_prototipos"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación basada en prototipos</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación <a href="https://en.wikipedia.org/wiki/Self_%28programming_language%29">Self</a> desarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> + +<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2> + +<h3 id="Core_Objects" name="Core_Objects"><span style="font-size: 1.714285714285714rem;">Namespace</span></h3> + +<p>Un <strong>espacio de nombres</strong> es un contenedor que permite asociar toda la funcionalidad de un determinado objeto con un nombre único. En JavaScript un espacio de nombres es un objeto que permite a métodos, propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un único objeto global para las variables, métodos, funciones convirtiendolos en propiedades de ese objeto. El uso de los namespace permite minimizar el conflicto de nombres con otros objetos haciéndolos únicos dentro de nuestra aplicación.</p> + +<div>Un <strong>espacio de nombres</strong> es un objeto: </div> + +<div><br> +<span style="line-height: 1.5;">Vamos a crear un objeto global llamado MIAPLICACION</span></div> + +<div> </div> + +<pre class="brush: js">// namespace global + +var MIAPLICACION = MIAPLICACION || {};</pre> + +<div> </div> + +<div class="note"> +<p><strong>Nota:</strong> Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.</p> +</div> + +<div> +<div>En el código de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra definida. Si es así utilizamos el objeto global MIAPLICACION que existe; si este no existe creamos un objeto vacío llamado MIAPLICACION que encapsulará métodos, funciones, variables y otros objetos que vayamos a crear.</div> + +<div> </div> + +<div>También podemos crear <strong>Sub-espacios de nombres</strong>:</div> + +<div> </div> + +<pre class="brush: js">// Sub-namespace + +MIAPLICACION.event = {} ;</pre> +</div> + +<div>A continuación se muestra el código para la creación de un <strong>espacio de nombre</strong> y cómo agregar variables, funciones y métodos:</div> + +<div> </div> + +<pre class="brush: js">// Creación del contenedor llamado MIAPLICACION.metodoComun de método y propiedades comunes. +MIAPLICACION.metodoComun = { + regExParaNombre: "", // define regex para la validación del nombre + regExParaTelefono: "", // define regex para validación del teléfono + validaNombre: function(nombre){ + // Hace algo con el nombre que usted ingresa a la variable reExParaNombre + // usando "this.regExParaNombre" + }, + + validaNroTelefono: function (numTelefono){ + // Hace algo con el número de teléfono + } +} + +// Objeto junto a la declaración del método +MIAPLICACION.event = { + addListener: function(el, type, fn){ + // código de relleno + }, + removeListener: function(el, type, fn){ + // código de relleno + }, + getEvent: function(e) { + // código de relleno + } + + // Puedes agregar otras propiedades y métodos +} + +// Sintaxis de utilización del método addListener: +MIAPLICACION.event.addListener("turel", "tipo", callback); + + +</pre> + +<div> +<h3 id="Core_Objects" name="Core_Objects" style="line-height: 24px;"><span style="font-size: 1.714285714285714rem;">Objetos básicos</span></h3> +</div> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p> + +<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="brush: js" dir="ltr">alert (Math.random ());</span></span> +</pre> + +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> este y todos los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La función <code>alert</code> no es realmente parte de JavaScript.</span></span></div> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos básicos en JavaScript.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto en JavaScript es una instancia del objeto <code>Object</code>, por lo tanto, hereda todas sus propiedades y métodos.</span></span></p> + +<h3 id="Custom_Objects" name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Objetos personalizados</span></span></h3> + +<h4 id="The_Class" name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La clase</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada <strong>Persona</strong>.</span></span></p> + +<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">function Persona() { }</span></span> +</pre> + +<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objeto (ejemplo de clase)</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define una clase llamada <code>Persona</code> y creamos dos instancias ( <code>persona1</code> y <code>persona2</code> ).</span></span></p> + +<pre class="brush: js">function Persona() { +} + +var persona1 = new Persona(); +var persona2 = new Persona();</pre> + +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div> + +<h4 id="The_Constructor" name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. Más adelante describiremos como agregar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo, el constructor de la clase <code>Persona</code> muestra un alerta que dice (<strong>Una instancia de persona)</strong> cuando se crea la instancia de la clase <code>Persona</code>.</span></span></p> + +<pre class="brush: js">function Persona() { + alert('Una instancia de Persona'); +} + +var persona1 = new Persona(); +var persona2 = new Persona();</pre> + +<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La propiedad (atributo del objeto)</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada <strong><code>this</code></strong> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-from-human goog-gtc-translatable">El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: <strong>NombreDeLaInstancia<code>.Propiedad</code></strong>. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-from-human goog-gtc-translatable">(Desde dentro de la clase la sintaxis es <strong><code>this.</code><code>Propiedad</code></strong> que se utiliza para obtener o establecer el valor de la propiedad).</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la propiedad <font face="Courier New, Andale Mono, monospace"><strong>primerNombre </strong></font>de la clase <code>Persona</code> y la definimos en la creación de la instancia.</span></span></p> + +<pre class="brush: js">function Persona(primerNombre) { + this.primerNombre = primerNombre; + alert('Una instancia de Persona'); +} + +var persona1 = new Persona("Alicia"); +var persona2 = new Persona("Sebastian"); + +// Muestra el primer nombre de persona1 +alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia" +alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"</pre> + +<h4 id="The_methods" name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define y utiliza el método diHola<code>()</code> para la clase <code>Persona</code>.</span></span></p> + +<pre class="brush: js">function Persona(primerNombre) { + this.primerNombre = primerNombre; +} + +Persona.prototype.diHola = function() { + alert ('Hola, Soy ' + this.primerNombre); +}; + +var persona1 = new Persona("Alicia"); +var persona2 = new Persona("Sebastian"); + +// Llamadas al método diHola de la clase Persona. +persona1.diHola(); // muestra "Hola, Soy Alicia" +persona2.diHola(); // muestra "Hola, Soy Sebastian"</pre> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En JavaScript los métodos son objetos como lo es una función normal y se vinculan a un objeto como lo hace una propiedad, lo que significa que se pueden invocar desde "fuera de su contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Considera el siguiente código de ejemplo:</span></span></p> + +<pre class="brush: js">function Persona(primerNombre) { + this.primerNombre = primerNombre; +} + +Persona.prototype.diHola = function() { + alert ("Hola, Soy " + this.primerNombre); +}; + +var persona1 = new Persona("Alicia"); +var persona2 = new Persona("Sebastian"); +var funcionSaludar = persona1.diHola; + +persona1.diHola(); // muestra "Hola, Soy Alicia" +persona2.diHola(); // muestra "Hola, Soy Sebastian" +funcionSaludar(); // muestra "Hola, Soy undefined (ó da un error con el + // TypeError en modo estricto + +alert(funcionSaludar === persona1.diHola); // muestra true (verdadero) +alert(funcionSaludar === Persona.prototype.diHola); // muestra true (verdadero) +funcionSaludar.call(persona1); // muestra "Hola, Soy Alicia"</pre> + +<div>En el ejemplo se muestran todas las referencias que tenemos de la función <strong>diHola</strong> — una de ellas es <strong>persona1, </strong>otra en <strong>Persona.prototype</strong>, en la variable <strong>funcionSaludar</strong>, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. <span style="line-height: 1.5;">En el común de los casos cuando la llamamos desde una expresión donde tenemos a la función desde la propiedad del objeto — <strong>persona1.diHola()</strong>.</span><span style="line-height: 1.5;">— Se establece en el objeto que tenemos en la función (persona1), razón por la cual <strong>persona1.diHola()</strong> utiliza el nombre "Alicia" y <strong>persona2.diHola()</strong> utiliza el nombre "Sebastian". </span><span style="line-height: 1.5;">Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable —<strong>funcionSaludar()</strong> — Este </span><span style="line-height: 1.5;">establece </span><span style="line-height: 1.5;">al objeto global (windows, en los navegadores). </span><span style="line-height: 1.5;">Desde este objeto (probablemente) no tiene a la propiedad <strong>primerNombre</strong>, por lo que finalizará con "Hola, Soy indefinido". </span><span style="line-height: 1.5;">(El cual se incluye en modo </span>de código suelto, sino sería diferente [un error] en modo estricto, pero para evitar confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando Function.call (ó Function.apply), como se muestra al final del ejemplo <strong>funcionSaludar.call(persona1)</strong>.</div> + +<div> </div> + +<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div> + +<h4 id="Inheritance" name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Herencia</span></span></h4> + +<div>La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase especializada comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a la clase secundaria, y luego se hace la especialización. </div> + +<div> </div> + +<div class="note"> +<p>JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>) así que debemos decírselo de forma manual.</p> +</div> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-140" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la clase <strong><code>Estudiante</code></strong> como una clase secundaria de <strong><code>Persona</code></strong> .</span></span><span style="line-height: 1.5;"> </span><span class="goog-gtc-unit" id="goog-gtc-unit-141" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Luego redefinimos el método <strong>diHola<code>()</code></strong> y agregamos el método <strong>diAdios<code>()</code></strong>.</span></span></p> + +<pre class="brush: js">// Definimos el constructor Persona +function Persona(primerNombre) { + this.primerNombre = primerNombre; +} + +// Agregamos un par de métodos a Persona.prototype +Persona.prototype.caminar = function() { + alert("Estoy caminando!"); +}; +Persona.prototype.diHola = function(){ + alert("Hola, Soy" + this.primerNombre); +}; + +// Definimos el constructor Estudiante +function Estudiante(primerNombre, asignatura) { + // Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this" se + // ha establecido correctamente durante la llamada + Persona.call(this, primerNombre); + + //Inicializamos las propiedades específicas de Estudiante + this.asignatura = asignatura; +}; + +// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype +// Nota: Un error común es utilizar "new Persona()" para crear Estudiante.prototype +// Esto es incorrecto por varias razones, y no menos importante que no le estamos pasando nada +// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona +// es arriba, donde llamamos a Estudiante. +Estudiante.prototype = Object.create(Persona.prototype); // Vea las siguientes notas + +// Establecer la propiedad "constructor" para referencias a Estudiante +Estudiante.prototype.constructor = Estudiante; + +// Reemplazar el método "diHola" +Estudiante.prototype.diHola = function(){ + alert("Hola, Soy " + this.primerNombre + ". Estoy estudiando " + this.asignatura + "."); +}; + +// Agregamos el método "diAdios" +Estudiante.prototype.diAdios = function() { + alert("¡ Adios !"); +}; + +// Ejemplos de uso +var estudiante1 = new Estudiante("Carolina", "Física Aplicada"); +estudiante1.diHola(); // muestra "Hola, Soy Carolina. Estoy estudianto Física Aplicada." +estudiante1.caminar(); // muestra "Estoy caminando!" +estudiante1.diAdios(); // muestra "¡ Adios !" + +// Comprobamos que las instancias funcionan correctamente +alert(estudiante1 instanceof Persona); // devuelve true +alert(estudiante1 instanceof Estudiante); // devuelve true +</pre> + +<p>Con respecto a la línea <strong>Estudiante.prototype = Object.create(Persona.prototype); </strong>: Sobre los motores antiguos de JavaScript sin <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, se puede utilizar un "polyfill" (aka "shim", vea el enlace del artículo), o se puede utilizar una función que obtiene el mismo resultado, como por ejemplo:</p> + +<pre class="brush: js">function crearObjeto(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// uso: +Estudiante.prototype = crearObjeto(Persona.prototype); </pre> + +<div class="note"> +<p>Ver <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> para conocer más sobre lo que hace, y complementar con los motores antiguos.</p> +</div> + +<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Encapsulación</span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo anterior, <code>Estudiante</code> no tiene que saber cómo se aplica el método <code>caminar()</code> de la clase <code>Persona</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Estudiante</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p> + +<h4 id="Abstraction" name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></h4> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript logra la especialización por herencia y por composición al permitir que las instancias de clases sean los valores de los atributos de otros objetos.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p> + +<p> </p> + +<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">v</span></span>ar foo = function() {}; +alert( 'foo es una Función: ' + (foo instanceof Function) ); +alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) ); +</pre> + +<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Polimorfismo</span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p> + +<h2 id="Notes" name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Notas</span></span></h2> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p> + +<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p> + +<h2 id="References" name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Referencias</span></span></h2> + +<ol> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-from-human goog-gtc-translatable">Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-from-human goog-gtc-translatable">Wikipedia. "Programación orientada a objetos", <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a>.</span></span></li> + <li><a href="http://davidwalsh.name/javascript-objects">Descripción general de POO en JavaScript</a> por Kyle Simpson.</li> +</ol> diff --git a/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html b/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..9b480576af --- /dev/null +++ b/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,416 @@ +--- +title: Introducción al uso de XPath en Javascript +slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +--- +<p>Este documento describe la interfaz para usar <a href="/en-US/docs/Web/XPath">XPath</a> internamente en JavaScript, en extensiones y desde sitios web. Mozilla implementa una gran parte del <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>. Esto significa que las expresiones XPath pueden correrse en documentos HTML y XML.</p> + +<p>La interfaz principal a usar con XPath es la función <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">evaluate</a> del objeto <a href="/en/DOM/document" title="en/DOM/document">document</a>.</p> + +<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> + +<p>Este método evalúa expresiones <a href="/en/XPath" title="en/XPath">XPath</a> contra un documento basado en <a href="/en/XML" title="en/XML">XML</a> (incluyendo documentos HTML), y regresa un objeto <code><a href="/en/XPathResult" title="en/XPathResult">XPathResult</a></code>, el cual puede ser un solo nodo o un conjunto de nodos. La documentación existente para este método se encuentra en <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a>, pero de momento es más bien escasa para nuestras necesidades; una examinación más abarcativa será dada a continuación.</p> + +<pre class="brush: js">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); +</pre> + +<h3 id="Parameters" name="Parameters">Parámetros</h3> + +<p>La función <a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">evaluate</a> toma un total de 5 parámetros:</p> + +<ul> + <li><code>xpathExpression</code>: Una cadena que contiene la expresión XPath a evaluar.</li> + <li><code>contextNode</code>: Un nodo en el documento contra la <code>xpathExpression</code> debe ser evaluada, incluyendo todos los nodos descendientes. El nodo <a href="/en/DOM/document" title="en/DOM/document">document</a> es el usado más comúnmente.</li> + <li><code>namespaceResolver</code>: Una función que pasará cualquier prefijo de namespace contenido en una <code>xpathExpression</code> la cúal regresará una cadena representando al URI del namespace asociado con ese prefijo. Esto activa la conversión entre los prefijos usados en las expresiones XPath y los posiblemente distintos prefijos usados en el documento. La función puede ser: + <ul> + <li>Creada usando el metodo <code><a href="/en/DOM/document.createNSResolver" title="en/DOM/document.createNSResolver">createNSResolver</a></code> de un objeto <code><a href="/en/XPathEvaluator" title="en/XPathEvaluator">XPathEvaluator</a></code>. Deberías usar este virtualmente todo el tiempo.</li> + <li><code>null</code>, el cúal puede ser usado para documentos HTML o cuando no son usados prefijos de namespace. Note que, si la expresión XPath contiene un prefijo de namespace, esto resultará en una <code>DOMException</code> siendo arrojada con el código <code>NAMESPACE_ERR</code>.</li> + <li>Una función definida por el usuario. Mira la sección <a href="#Implementing_a_User_Defined_Namespace_Resolver">Usar un Solucionador de Namespace definido por el usuario</a> en el apéndice para detalles.</li> + </ul> + </li> + <li><code>resultType</code>: Una <a href="#XPathResult_Defined_Constants">constante</a> que especifica el tipo del resultado deseado a ser regresado. La constante más comúnmente pasada es <code>XPathResult.ANY_TYPE</code> la cúal regresará los resultados de la expresión XPath como el tipo más natural. Hay una sección en el apéndice que contiene una lista completa de las <a href="#XPathResult_Defined_Constants">constantes disponibles</a>. Estas son explicadas debajo, en la sección "<a href="#Specifying_the_Return_Type">Especificando el tipo de valor regresado</a>".</li> + <li><code>result</code>: Si un objeto <code>XPathResult</code> existente es especificado, sera reusado para regresar el resultado. Especificando <code>null</code>, un nuevo objeto <code>XPathResult</code> será creado.</li> +</ul> + +<h3 id="Return_Value" name="Return_Value">Valor regresado</h3> + +<p>Regresa <code>xpathResult</code>, que es un objeto <code>XPathResult</code> del tipo especificado en el parámetro <code>resultType</code>. La interfaz <code>XPathResult</code> está definida en{{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.</p> + +<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Implementando un Solucionador de Namespace predefinido</h3> + +<p>Nosotros creamos un solucionador de namespace usando el método <code>createNSResolver</code> del objeto <a href="/en/DOM/document" title="en/DOM/document">document</a>.</p> + +<pre class="brush: js">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); +</pre> + +<p><span class="comment">O alternativamente, usar el método <code>createNSResolver</code> de un objeto<code> XPathEvaluator</code>. </span></p> + +<pre><span class="comment">var xpEvaluator = new XPathEvaluator(); +var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </span></pre> + +<p>Y entonces pasar a <code>document.evaluate</code> la variable <code>nsResolver</code>, como el parámetro <code>namespaceResolver</code>.</p> + +<p>Nota: XPath define QNames sin un prefijo sólo al igualar elementos en el namespace null. No hay manera en XPath de tomar el namespace predefinido tal como se aplica a un elemento de referencia regular (e.g., <code>p[@id='_myid']</code> for <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code>). Para igualar elementos predefinidos en un namespace no-nulo, , se tiene que hacer refencia a un elemento en particular usando una forma como <code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> (este enfoque funciona bien para expresiones XPath dinámicas donde el namespace puede ser dessconocido) o usar un nombre de prueba prefijado, y crear un solucionador de namespace mapeando el prefijo al namespace. Lee más sobre como crear un solucionador de namespace definido por el usuario, si deseas tomar el último enfoque.</p> + +<h3 id="Notes" name="Notes">Notas</h3> + +<p>Se adapta cualquier nodo DOM a resolver namespaces, así que una expresión XPath puede ser fácilmente evaluada relativa al contexto del nodo donde este aparece dentro del documento. Este adaptador funciona como el método de DOM Nivel 3 <code>lookupNamespaceURI</code> en nodos a resolver el <code>namespaceURI</code> desde un prefijo dado, usando la información actual disponible en la jerarquía del nodo en el momento en que lookupNamespaceURI es llamado. También resuelve correctamente el prefijo implícito de XML.</p> + +<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Especificando el tipo de valor regresado</h3> + +<p>La variable regresado <code>xpathResult</code> desde <code>document.evaluate</code> puede estar compuesto de nodos individuales (tipos simples), o una colección de nodos (tipo de conjunto de nodos)</p> + +<h4 id="Simple_Types" name="Simple_Types">Tipos simples</h4> + +<p>Cuando el tipo de resultado deseado especificado en <code>resultType</code> es uno de los siguientes :</p> + +<ul> + <li><code>NUMBER_TYPE</code> - un doble</li> + <li><code>STRING_TYPE</code> - una cadena</li> + <li><code>BOOLEAN_TYPE</code> - un booleano</li> +</ul> + +<p>Obtenemos el valor regresado por la expresión accediendo a las siguientes propiedades, respectivamente, del objeto <code>XPathResult</code>.</p> + +<ul> + <li><code>numberValue</code></li> + <li><code>stringValue</code></li> + <li><code>booleanValue</code></li> +</ul> + +<h5 id="Example" name="Example">Ejemplo</h5> + +<p>El siguiente código usa la expresión XPath <code><a href="/en/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> para obtener el número de elementos <p> en un documento HTML:</p> + +<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> paragraphCount <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">evaluate<span class="punctuation token">(</span></span> 'count<span class="comment token">(//p)', document, null, XPathResult.ANY_TYPE, null ); +</span> +<span class="function token">alert<span class="punctuation token">(</span></span> <span class="string token">'This document contains '</span> <span class="operator token">+</span> paragraphCount<span class="punctuation token">.</span>numberValue <span class="operator token">+</span> <span class="string token">' paragraph elements'</span> <span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Aunque JavaScript nos permite convertir el número a una cadena para desplegarlo, la interfaz <code>XPath</code> no convertirá el resultado numérico si la propiedad <code>stringValue</code> es solicitada, así que el siguiente código no funcionará:</p> + +<pre class="brush: js">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); + +alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' ); +</pre> + +<p>A su vez, regresará una excepción con el código <code>NS_DOM_TYPE_ERROR</code>.</p> + +<h4 id="Node-Set_Types" name="Node-Set_Types">Tipos de conjuntos de Nodos</h4> + +<p>El objeto <code>XPathResult</code> permite a los conjuntos de nodos ser regresados en 3 diferentes tipos principales:</p> + +<ul> + <li><a href="#Iterators">Iteradores</a></li> + <li><a href="#Snapshots">Capturas</a></li> + <li><a href="#First_Node">Primeros nodos</a></li> +</ul> + +<h5 id="Iterators" name="Iterators">Iteradores</h5> + +<p>Cuando el tipo de resultado especificado en el <code>resultType</code> es uno de los siguientes:</p> + +<ul> + <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> + <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> +</ul> + +<p>El objeto <code>XPathResult</code> regresado es un conjunto de nodos de los nodos coincidentes los cuales se comportarán como un iterador, perimitiendo el acceso individual a los nodos mediante el uso de método <span id="cke_bm_118S" style="display: none;"> </span><code>iterateNext()</code><span id="cke_bm_118E" style="display: none;"> </span> del <code>XPathResult</code><span id="cke_bm_119E" style="display: none;"> </span>.</p> + +<p>Una vez que hemos iterado sobre todos los nodos individuales coincidentes,<code> iterateNext()</code> regresará <code>null</code>.</p> + +<p>Es importante señalar que si el documento se ha transformado (el arbol del documento se ha modificado) entre iteraciones </p> + +<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6> + +<pre class="brush: js">var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); + +try { + var thisNode = iterator.iterateNext(); + + while (thisNode) { + alert( thisNode.textContent ); + thisNode = iterator.iterateNext(); + } +} +catch (e) { + dump( 'Error: Document tree modified during iteration ' + e ); +} +</pre> + +<h5 id="Snapshots" name="Snapshots">Snapshots</h5> + +<p>When the specified result type in the <code>resultType</code> parameter is either:</p> + +<ul> + <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> + <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> +</ul> + +<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p> + +<p>Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.</p> + +<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6> + +<pre class="brush: js">var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); + +for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ) +{ + dump( nodesSnapshot.snapshotItem(i).textContent ); +} +</pre> + +<h5 id="First_Node" name="First_Node">First Node</h5> + +<p>When the specified result type in the <code>resultType</code> parameter is either:</p> + +<ul> + <li><code>ANY_UNORDERED_NODE_TYPE</code></li> + <li><code>FIRST_ORDERED_NODE_TYPE</code></li> +</ul> + +<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p> + +<p>Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.</p> + +<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6> + +<pre class="brush: js">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); + +dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); +</pre> + +<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">The ANY_TYPE Constant</h4> + +<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p> + +<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p> + +<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== <pre> </pre></span></p> + +<h2 id="Examples" name="Examples">Examples</h2> + +<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Within an HTML Document</h3> + +<p>The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.</p> + +<p>To extract all the <code><h2></code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p> + +<pre class="brush: js">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); +</pre> + +<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p> + +<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en/DOM/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p> + +<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the <code>iterateNext()</code> method of the returned object:</p> + +<pre class="brush: js">var thisHeading = headings.iterateNext(); + +var alertText = 'Level 2 headings in this document are:\n' + +while (thisHeading) { + alertText += thisHeading.textContent + '\n'; + thisHeading = headings.iterateNext(); +} +</pre> + +<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p> + +<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Evaluating against an XML document within an Extension</h3> + +<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > + <person> + <name first="george" last="bush" /> + <address street="1600 pennsylvania avenue" city="washington" country="usa"/> + <phoneNumber>202-456-1111</phoneNumber> + </person> + <person> + <name first="tony" last="blair" /> + <address street="10 downing street" city="london" country="uk"/> + <phoneNumber>020 7925 0918</phoneNumber> + </person> +</people> +</pre> + +<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p> + +<p>JavaScript used in the extensions xul/js documents.</p> + +<pre class="brush: js">var req = new XMLHttpRequest(); + +req.open("GET", "chrome://yourextension/content/peopleDB.xml", false); +req.send(null); + +var xmlDoc = req.responseXML; + +var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement); + +var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h3 id="Note">Note</h3> + +<p>When the XPathResult object is not defined, the constants can be retreived in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p> + +<pre class="brush: js">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre> + +<h2 id="Appendix" name="Appendix">Appendix</h2> + +<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Implementing a User Defined Namespace Resolver</h4> + +<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p> + +<pre>'//xhtml:td/mathml:math' +</pre> + +<p>will select all <a href="/en/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p> + +<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p> + +<pre class="brush: js">function nsResolver(prefix) { + var ns = { + 'xhtml' : 'http://www.w3.org/1999/xhtml', + 'mathml': 'http://www.w3.org/1998/Math/MathML' + }; + return ns[prefix] || null; +} +</pre> + +<p>Our call to <code>document.evaluate</code> would then looks like:</p> + +<pre class="brush: js">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); +</pre> + +<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Implementing a default namespace for XML documents</h4> + +<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p> + +<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> +<feed xmlns="http://www.w3.org/2005/Atom"> + <entry /> + <entry /> + <entry /> +</feed> +</pre> + +<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p> + +<p>One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:</p> + +<pre class="brush: js">function resolver() { + return 'http://www.w3.org/2005/Atom'; +} +doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null) +</pre> + +<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p> + +<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p> + +<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4> + +<p>Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p> + +<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4> + +<p>If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.</p> + +<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).</p> + +<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p> + +<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p> + +<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p> + +<pre class="brush: js">var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace +var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null); +var thisitemEl = thislevel.iterateNext(); +</pre> + +<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">XPathResult Defined Constants</h4> + +<table class="standard-table"> + <thead> + <tr> + <td class="header">Result Type Defined Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + </thead> + <tbody> + <tr> + <td>ANY_TYPE</td> + <td>0</td> + <td>A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.</td> + </tr> + <tr> + <td>NUMBER_TYPE</td> + <td>1</td> + <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td>STRING_TYPE</td> + <td>2</td> + <td>A result containing a single string.</td> + </tr> + <tr> + <td>BOOLEAN_TYPE</td> + <td>3</td> + <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td>UNORDERED_NODE_ITERATOR_TYPE</td> + <td>4</td> + <td>A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ORDERED_NODE_ITERATOR_TYPE</td> + <td>5</td> + <td>A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> + </tr> + <tr> + <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> + <td>6</td> + <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ORDERED_NODE_SNAPSHOT_TYPE</td> + <td>7</td> + <td>A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.</td> + </tr> + <tr> + <td>ANY_UNORDERED_NODE_TYPE</td> + <td>8</td> + <td>A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td>FIRST_ORDERED_NODE_TYPE</td> + <td>9</td> + <td>A result node-set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en/Using_XPath" title="en/Using_XPath">Using XPath</a></li> +</ul> + +<div class="originaldocinfo"> +<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> + +<ul> + <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li> + <li>Original Source Author: James Graham.</li> + <li>Other Contributors: James Thompson.</li> + <li>Last Updated Date: 2006-3-25.</li> +</ul> +</div> + +<p> </p> diff --git a/files/es/web/javascript/language_resources/index.html b/files/es/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..c165066272 --- /dev/null +++ b/files/es/web/javascript/language_resources/index.html @@ -0,0 +1,146 @@ +--- +title: Recursos de lenguaje JavaScript +slug: Web/JavaScript/Language_Resources +tags: + - Avanzado + - JavaScript +translation_of: Web/JavaScript/Language_Resources +--- +<div>{{JsSidebar}}</div> + +<p><strong>ECMAScript</strong> es el lenguaje de scripting que forma la base de <a href="/es/docs/JavaScript">JavaScript</a>. ECMAScript está estandarizado por la organización de estándares <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">ECMA Internacional</a> en las especificaciones <strong>ECMA-262 y ECMA-402</strong>. Los siguientes estándares de ECMAScript han sido aprobados o estas siendo trabajados:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nombre</th> + <th>Enlaces</th> + <th>Fecha de liberación</th> + <th>Descripción</th> + </tr> + <tr> + <th colspan="4">Ediciones actuales</th> + </tr> + <tr> + <td>ECMA-262 9<sup>a</sup> Edición</td> + <td><a href="https://tc39.github.io/ecma262/">Borrador de Trabajo</a>, <a href="https://github.com/tc39/ecma262">repositorio</a></td> + <td>2018</td> + <td>Especificación del Lenguaje ECMAScript 2018</td> + </tr> + <tr> + <td>ECMA-402 5<sup>a</sup> Edición</td> + <td><a href="https://tc39.github.io/ecma402/">Borrador de Trabajo</a>, <a href="https://github.com/tc39/ecma402">repositorio</a></td> + <td>2018</td> + <td>Especificación de la API de internacionalización ECMAScript 2018 </td> + </tr> + <tr> + <th colspan="4">Obsoletos / Historia de las ediciones</th> + </tr> + <tr> + <td>ECMA-262</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">PDF</a></td> + <td>Junio 1997</td> + <td>ECMAScript: Un lenguaje de programación multiplataforma de propósito general. Esta fue la primera versión del estándar ECMAScript.</td> + </tr> + <tr> + <td>ECMA-262 2<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%202nd%20edition,%20August%201998.pdf">PDF</a></td> + <td>Agosto 1998</td> + <td>ECMAScript Especificación de idioma. Esta es la segunda revisión del estándar ECMAScript también la norma ISO 16262.</td> + </tr> + <tr> + <td>ECMA-262 3<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf">PDF</a></td> + <td>Diciembre 1999</td> + <td>Especificación del lenguaje ECMAScript. Esta es la tercera revisión del estándar ECMAScript ; corresponde a JavaScript 1.5.<br> + Ver también la <a href="http://www.mozilla.org/js/language/E262-3-errata.html">errata</a></td> + </tr> + <tr> + <td>ECMA-262 5<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf">PDF</a></td> + <td>Diciembre 2009</td> + <td>Especificación del lenguaje ECMAScript . Esta es la quinta revisión del estándar ECMAScript.<br> + Vea también la <a href="http://wiki.ecmascript.org/doku.php?id=es3.1:es3.1_proposal_working_draft">ES5 errata</a> y <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5 soporte en Mozilla.</a></td> + </tr> + <tr> + <td>ECMA-357</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST-WITHDRAWN/ECMA-357,%201st%20edition,%20June%202004.pdf">PDF</a></td> + <td>Junio 2004</td> + <td><a href="/en-US/docs/E4X" title="E4X">ECMAScript for XML (E4X)</a>.<br> + Vea también la <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=169406">E4X errata</a>.</td> + </tr> + <tr> + <td>ECMA-262 5.1 Edición</td> + <td><a href="http://www.ecma-international.org/ecma-262/5.1/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/">HTML</a></td> + <td>Junio 2011</td> + <td>Esta es la tercera versión completa alineada del estándar internacional <a href="http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=55755">ISO/IEC 16262:2011</a>.<br> + Incluye correcciones de erratas ES5, sin nuevas funciones.</td> + </tr> + <tr> + <td>ECMA-402 1<sup>a</sup> Edición</td> + <td><a href="http://ecma-international.org/ecma-402/1.0/ECMA-402.pdf">PDF</a>, <a href="http://ecma-international.org/ecma-402/1.0/index.html">HTML</a></td> + <td>Diciembre 2012</td> + <td>Especificación internacional de la API ECMAScript</td> + </tr> + <tr> + <td>ECMA-262 6<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a></td> + <td>Junio 2015</td> + <td>Especificación del Lenguaje ECMAScript 2015 </td> + </tr> + <tr> + <td>ECMA-402 2<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/ecma-402/2.0/ECMA-402.pdf">PDF</a></td> + <td>Junio 2015</td> + <td>Especificación internacional de ECMAScript 2015</td> + </tr> + <tr> + <td>ECMA-262 7<sup>a</sup><span style="font-size: 13.3333px;"> </span>Edición</td> + <td><a href="http://www.ecma-international.org/ecma-262/7.0/">HTML</a></td> + <td>Junio 2016</td> + <td>Especificación del Lenguaje ECMAScript 2016</td> + </tr> + <tr> + <td>ECMA-402 3<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/ecma-402/3.0/">HTML</a></td> + <td>Junio 2016</td> + <td>Especificación internacional de la API ECMAScript 2016</td> + </tr> + <tr> + <td>ECMA-262 8<sup>a</sup> Edición</td> + <td><a href="http://www.ecma-international.org/ecma-262/8.0/">HTML</a></td> + <td>Junio 2017</td> + <td>Especificación del Lenguaje ECMAScript 2017</td> + </tr> + <tr> + <td> + <p>ECMA-402 4<sup>a</sup> Edición</p> + </td> + <td><a href="http://www.ecma-international.org/ecma-402/4.0/">HTML</a></td> + <td>Junio 2017</td> + <td>Especificación internacional de la API ECMAScript 2017</td> + </tr> + </tbody> +</table> + +<p><strong>ES.Next</strong> es un nombre dinámico que hace referencia a cualquiera que sea la próxima versión al momento de escribir. Las características de ES.Next se llaman más correctamente propuestas, porque, por definición, la especificación aún no se ha finalizado.</p> + +<p>Vea la entrada en <a href="https://en.wikipedia.org/wiki/ECMAScript" title="https://en.wikipedia.org/wiki/ECMAScript">Wikipedia ECMAScript </a> para mas información de la historia de ECMAScript.</p> + +<p>Puede participar o simplemente rastrear el trabajo en las próximas revisiones de la Especificación del lenguaje ECMAScript, cuyo nombre en código es "Harmony", y la Especificación API de internacionalización de ECMAScript a través de la wiki pública y la <a class="link-https" href="https://mail.mozilla.org/listinfo/es-discuss" title="https://mail.mozilla.org/listinfo/es-discuss">lista de discusión</a> enlazada desde <a href="http://www.ecmascript.org/community.php">ecmascript.org</a>.</p> + +<h2 id="Implementaciones">Implementaciones</h2> + +<ul> + <li><a href="/es/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> - el motor de JavaScript usado en varios productos de Mozilla, incluyendo Firefox;</li> + <li><a href="/es/docs/Rhino" title="Rhino">Rhino</a> - El motor de JavaScript escrito en Java;</li> + <li><a href="/es/docs/Tamarin" title="Tamarin">Tamarin</a> - La maquina virtual ActionScript (usada en Adobe® Flash® Player);</li> + <li><a href="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines" title="https://en.wikipedia.org/wiki/List_of_ECMAScript_engines">Otras implementacion </a>(Wikipedia).</li> +</ul> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="https://brendaneich.com/" title="https://brendaneich.com/">Brendan Eich's blog</a>. Brendan es el creador de JavaScript y el motor SpiderMonkey JS. El aún trabaja con el grupo de ECMA para desarrollar el lenguaje.</li> + <li><a href="http://dmitrysoshnikov.com/" title="http://dmitrysoshnikov.com/">El análisis de Dmitry Soshnikov's de ECMA-262 Edición 3 y 5</a></li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/1.1/index.html b/files/es/web/javascript/novedades_en_javascript/1.1/index.html new file mode 100644 index 0000000000..985692f96c --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.1/index.html @@ -0,0 +1,74 @@ +--- +title: Nuevo en JavaScript 1.1 +slug: Web/JavaScript/Novedades_en_JavaScript/1.1 +tags: + - JavaScript + - Versiones +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.1 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>Lo siguiente es una bitácora de cambios en JavaScript desde Netscape Navigator 2.0 al 3.0. La documentación del viejo Netscape se refiere a ésto como "<a href="https://web.archive.org/web/20060318153542/wp.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html">Características agregadas luego de la versión 1</a>". Netscape Navigator 3.0 se lanzó el 19 de agosto de 1996. Netscape Navigator 3.0 fue la segunda versión principal del navegador con soporte JavaScript.</p> + +<h2 id="Versiones_JavaScript">Versiones JavaScript</h2> + +<p>Netscape Navigator 3.0 también introdujo versiones del lenguage JavaScript.</p> + +<pre class="brush: html"><SCRIPT LANGUAGE="JavaScript"> <!-- JavaScript for Navigator 2.0. --> +<SCRIPT LANGUAGE="JavaScript1.1"> <!-- JavaScript for Navigator 3.0. --></pre> + +<h2 id="Características_nuevas_en_JavaScript_1.1">Características nuevas en JavaScript 1.1</h2> + +<h3 id="Objetos_nuevos">Objetos nuevos</h3> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Boolean")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Number")}}</li> +</ul> + +<h3 id="Propiedades_nuevas">Propiedades nuevas</h3> + +<ul> + <li>{{jsxref("Number.MAX_VALUE")}}</li> + <li>{{jsxref("Number.MIN_VALUE")}}</li> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Number.NEGATIVE_INFINITY")}}</li> + <li>{{jsxref("Number.POSITIVE_INFINITY")}}</li> +</ul> + +<h3 id="Método_nuevos">Método nuevos</h3> + +<ul> + <li>{{jsxref("Array.prototype.join()")}}</li> + <li>{{jsxref("Array.prototype.reverse()")}}</li> + <li>{{jsxref("Array.prototype.sort()")}}</li> + <li>{{jsxref("Array.prototype.split()")}}</li> +</ul> + +<h3 id="Operadores_nuevos">Operadores nuevos</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></code></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void">void</a></code></li> +</ul> + +<h3 id="Otras_características_nuevas">Otras características nuevas</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Element/noscript"><noscript></a></code></li> + <li><a href="/en-US/docs/Archive/Web/LiveConnect">LiveConnect</a>. Comunicación entre Java y JavaScript.</li> +</ul> + +<h2 id="Modificaciones_en_funcionalidad_en_JavaScript_1.1">Modificaciones en funcionalidad en JavaScript 1.1</h2> + +<ul> + <li>"Eliminación de objetos". Puedes remover un objeto si estableces como <code>null</code> su objeto de referencia.</li> + <li>Se añadieron a los objetos las propiedades <code>constructor</code> y <code>prototype</code>.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> ahora es un método de cada objeto (anteriormente era una función integrada); ésto evalúa una cadena de código JavaScript en el contexto del objeto especificado.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code> ahora funciona en todas las plataformas.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">toString()</a></code>: Se agregó el parámetro de radix, lo cual especifica la base a usar para representar valores numéricos.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN"> </a> Ahora funciona en todas las plataformas (no sólamente en <em>Unix</em>)</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat">parseFloat()</a></code> <code>y <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseint()</a></code> ahora resultan <code>NaN</code> en todas las plataformas si el primer caracter de la cadena especificada no puede ser convertido en número; en lanzamientos anteriores, resultaba <code>NaN</code> en <em>Solaris </em>e <em>Irix</em>, y cero en todas las otras plataformas.</li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/1.2/index.html b/files/es/web/javascript/novedades_en_javascript/1.2/index.html new file mode 100644 index 0000000000..722e0d21f1 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.2/index.html @@ -0,0 +1,100 @@ +--- +title: New in JavaScript 1.2 +slug: Web/JavaScript/Novedades_en_JavaScript/1.2 +tags: + - JavaScript + - Versiones +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.2 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<div>Lo siguiente es una lista de cambios de JavaScript del Navegador Netscape 3.0 a 4.0. La antigua Documentación del Navegador Netscape puede ser localizada en <a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Archivo.org</a>. Netscape Navegador 4.0 fue lanzado en el 11 de Junio de 1997. Netscape Navegador 4.0 fue la tercera principal del navegador con soporte a JavaScript.</div> + +<p> </p> + +<h2 id="JavaScript_versiones">JavaScript versiones</h2> + +<p> </p> + +<p>El Navegador Netscape 4.0 ejecuta las versiones del lenguaje JavaScript hasta el 1.2. Tenga en cuenta que el Navegador Netscape 3.0 y anteriores ignoraban script con el atributo de lenguaje colocando "JavaScript1.2" y superior.</p> + +<p> </p> + +<pre class="brush: html"><SCRIPT LANGUAGE="JavaScript1.1"> <!-- JavaScript para Navegador 3.0. --> +<SCRIPT LANGUAGE="JavaScript1.2"> <!-- JavaScript para Navegador 4.0. --></pre> + +<p> </p> + +<h2 id="Las_nuevas_características_en_JavaScript_1.2">Las nuevas características en JavaScript 1.2</h2> + +<h3 id="Los_nuevos_objetos">Los nuevos objetos</h3> + +<ul> + <li>Tu puedes crear objetos usando la notación literal (inspirado en la sintaxis literal del diccionario de Python 1.x).</li> + <li>Arreglos (Arrays) pueden ser creados usando la notación literal (Inspirados en la lista de la sintaxis literal de Python 1.X ).</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/arity">argumentos</a></li> +</ul> + +<h3 id="Nuevas_Propiedades">Nuevas Propiedades</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">Function.arity</a></li> +</ul> + +<h3 id="Nuevos_Metodos">Nuevos Metodos</h3> + +<ul> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.charCodeAt()")}}</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("String.fromCharCode()")}}</li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.replace()")}}</li> + <li>{{jsxref("String.prototype.search()")}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substr()")}}</li> +</ul> + +<h3 id="Nuevos_Operadores">Nuevos Operadores</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete (eliminar)</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_when_to_use_them">Operadores de Igualdad</a> (<code>==</code> y <code>!=</code>)</li> +</ul> + +<h3 id="Nuevas_Declaraciones">Nuevas Declaraciones</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label">Labeled</a> statements</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li> +</ul> + +<h3 id="Otras_nuevas_características">Otras nuevas características</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Expresiones Regulares</a></li> + <li><a href="https://web.archive.org/web/19971015223714/http://developer.netscape.com/library/documentation/communicator/jsguide/js1_2.htm">Scripts Firmados</a></li> +</ul> + +<h2 id="Cambios_en_la_funcionalidad_de_JavaScript_1.2">Cambios en la funcionalidad de JavaScript 1.2</h2> + +<ul> + <li>Ahora puedes anidar funciones dentro de funciones.</li> + <li>Número ahora convierte un objeto especificado en un número.</li> + <li>Numero ahora produce NaN en lugar de un error si <code>x</code> es una cadena que no contiene un literal bien formado numérico.</li> + <li>Cadena ahora convierte un objeto especificado en una cadena.</li> + <li>{{jsxref("Array.prototype.sort()")}} Ahora funciona en todas las plataformas. Ya no convierte los elementos definidos en Nulo (null) y los ordena a la gran final de la matriz (Array).</li> + <li>{{jsxref("String.prototype.split()")}} + <ul> + <li>Se puede tomar un argumento de expresión regular, asi como una cadena fija, por el que se divide la cadena objeto.</li> + <li>Se puede tomar un conteo límite para que no incluirá arrastrando elementos vacíos en la matriz (array) resultante.</li> + </ul> + </li> + <li>{{jsxref("String.prototype.substring()")}}: Ya no intercambia números de índice cuando el primer índice es mayor que el segundo.</li> + <li><code>toString()</code>: Ahora convierte el objeto (object) o la matriz (array) a un literal.</li> + <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Statements/break"><code>break</code></a> y <a href="/en-US/docs/Web/JavaScript/Reference/Statements/continue"><code>continue</code></a> declaraciones se pueden utilizar ahora con la nueva instrucción con etiqueta.</li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/1.3/index.html b/files/es/web/javascript/novedades_en_javascript/1.3/index.html new file mode 100644 index 0000000000..9fb442d96c --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.3/index.html @@ -0,0 +1,141 @@ +--- +title: Nuevo en JavaScript 1.3 +slug: Web/JavaScript/Novedades_en_JavaScript/1.3 +tags: + - JavaScript + - Versiones +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.3 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>Lo siguiente es el archivo de cambios de JavaScript desde Netscape Navigator 4.0 al 4.5. La documentación antigua de Netscape puede encontrarse en archive.org. Netscape Navigator 4.5 fue lanzado el 19 de octubre de 1998.</p> + +<p>El cambio más importante en JavaScript 1.3 fue conseguir que estuviera en conformidad con ECMA-262 y Unicode eliminando las inconsistencias entre JavaScritp 1.2 y el nuevo estándar ECMA (publicado en junio de 1997). Características adicionales de la versión 1.2. (que en ese momento todavía no era ECMA-262) se mantuvieron en el lenguaje JavaScript (ver más adelante para una lista de las diferencias.)</p> + +<h2 id="Versiones_de_JavaScript">Versiones de JavaScript</h2> + +<p>Netscape Communicator y Netscape Navigator 4.06 y 4.5 ejecutan versiones del lenguaje JavaScript hasta la 1.3. Se hace notar que Communicator y Navigator 4.0-4.5 y anteriores ignoraban los scripts con el atributo de lenguaje "JavaScript1.3" y superior.</p> + +<pre class="brush: html"><SCRIPT LANGUAGE="JavaScript1.2"> <!-- JavaScript para Navigator 4.0. --> +<SCRIPT LANGUAGE="JavaScript1.3"> <!-- JavaScript para Navigator 4.5. --></pre> + +<h2 id="Nuevas_características_en_JavaScript_1.3">Nuevas características en JavaScript 1.3</h2> + +<h3 id="Nuevos_globales">Nuevos globales</h3> + +<ul> + <li>{{jsxref("NaN")}}</li> + <li>{{jsxref("Infinity")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<h3 id="Nuevos_métodos">Nuevos métodos</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite"><code>isFinite()</code></a></li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Date.UTC()")}}</li> + <li>{{jsxref("Date.prototype.getFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.setMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.getUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.getUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.getUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.getUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.getUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.getUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</li> + <li>{{jsxref("Date.prototype.toUTCString()")}}</li> + <li>{{jsxref("Date.prototype.setUTCFullYear()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMonth()")}}</li> + <li>{{jsxref("Date.prototype.setUTCDate()")}}</li> + <li>{{jsxref("Date.prototype.setUTCHours()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMinutes()")}}</li> + <li>{{jsxref("Date.prototype.setUTCSeconds()")}}</li> + <li>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</li> +</ul> + +<h3 id="Otras_características_nuevas">Otras características nuevas</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators" title="JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Operadores de igualdad estrictos</a></li> + <li>Soporte de Unicode</li> + <li>Se introduce una consola de JavaScript.</li> +</ul> + +<h2 id="Funcionalidades_cambiadas_en_JavaScript_1.3">Funcionalidades cambiadas en JavaScript 1.3</h2> + +<ul> + <li>Cambios a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> para estar en conformidad con ECMA-262 + + <ul> + <li>Nuevo constructor <code>Date(year, month, day, [,<em>hours</em> [<em>, minutes</em> [<em>, seconds</em> [<em>, milliseconds</em> ]]]])</code></li> + <li>Parámetros de métodos adicionales: + <ul> + <li><code>setMonth(month[, date])</code></li> + <li><code>setHours(hours[, min[, sec[, ms]]])</code></li> + <li><code>setMinutes(min[, sec[, ms]])</code></li> + <li><code>setSeconds(sec[, ms])</code></li> + </ul> + </li> + </ul> + </li> + <li>La longitud de un array (propiedad length) es ahora una propiedad sin signo, un entero de 32-bit.</li> + <li>{{jsxref("Array.prototype.push()")}}: En JavaScript 1.2, el método <code>push</code> devolvía el último elemento añadido a un array. Bajo JavaScript 1.3, <code>push</code> devuelve la nueva longitud del array.</li> + <li>{{jsxref("Array.prototype.slice()")}}: En JavaScript 1.2, el método <code>splice</code> devolvía el elemento eliminado, si solo había sido eliminado un elemento (si el parámetro <code>howMany</code> es igual a <code>1</code>). En JavaScript 1.3, <code>splice</code> siempre devuelve un array con los elemento eliminados. Si un elemento es eliminado, se devuelve un array de un elemento.</li> + <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#replace">Cambios</a> a {{jsxref("String.prototype.replace()")}}.</li> + <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#Boolean">Cambios</a> al objeto {{jsxref("Boolean")}}.</li> + <li><a href="https://web.archive.org/web/20000815081640/http://developer.netscape.com/docs/manuals/communicator/jsref/js13.html#toString">Cambios</a> a <code>toString()</code>.</li> +</ul> + +<h2 id="Características_no-ECMA-262_de_JavaScript_1.3">Características no-ECMA-262 de JavaScript 1.3</h2> + +<p>La siguiente es una comparación entre la versión de junio de 1998 de ECMA-262 y JavaScript 1.3. Las siguientes características no fueron parte del estándar en ese moemtno, pero se implementaron en JavaScript 1.3.</p> + +<h3 id="Palabras_clave_y_operadores">Palabras clave y operadores</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Using_the_Equality_Operators">Operadores de igualdad estrictos</a></li> + <li>Barra invertida (<code>\v</code> or <code>\u000B</code>) como secuencia de escape.</li> +</ul> + +<h3 id="Sentencias">Sentencias</h3> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/label"><code>label</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch"><code>switch</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/do...while"><code>do...while</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a></li> +</ul> + +<h3 id="Objetos_integrados">Objetos integrados</h3> + +<ul> + <li>{{jsxref("RegExp")}}</li> +</ul> + +<h3 id="Métodos_de_objetos_integrados">Métodos de objetos integrados</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource">toSource()</a></code></li> + <li>{{jsxref("Object.prototype.watch()")}}</li> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> + <li>{{jsxref("Function.arity")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.slice()")}}</li> + <li>{{jsxref("Array.prototype.splice()")}}</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("String.prototype.concat()")}}</li> + <li>{{jsxref("String.prototype.match()")}}</li> + <li>{{jsxref("String.prototype.search()")}}</li> + <li>{{jsxref("String.prototype.slice()")}}</li> + <li>{{jsxref("String.prototype.substr()")}}</li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/1.5/index.html b/files/es/web/javascript/novedades_en_javascript/1.5/index.html new file mode 100644 index 0000000000..62eebd9d61 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.5/index.html @@ -0,0 +1,47 @@ +--- +title: Novedades en Javascript 1.5 +slug: Web/JavaScript/Novedades_en_JavaScript/1.5 +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.5 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>JavaScript versión 1.5 provee las siguientes nuevas características y mejoras:</p> + +<h2 id="Errores_en_tiempo_de_ejecución">Errores en tiempo de ejecución</h2> + +<p>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> + +<h2 id="Mejoras_para_el_formato_de_números"><strong>Mejoras para el formato de números</strong></h2> + +<p>El formato de números ha sido mejorado para incluir los métodos <code>Number.prototype.toExponential</code>, <code>Number.prototype.toFixed</code> y <code>Number.prototype.toPrecision</code>. Véase la página <a href="/es/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number" title="es/Guía_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number">Objeto <em>Number</em></a>.</p> + +<h2 id="Mejoras_en_expresiones_regulares"><strong>Mejoras en expresiones regulares </strong></h2> + +<p>Las siguientes mejoras para expresiones regulares han sido añadidas:</p> + +<ul> + <li>Cuantificadores: — +, *, ? y {} —ahora pueden seguirse por un <code>?</code> para forzarlos ha no ser avaros {{ mediawiki.external('greedy') }}. Vea la entrada <strong>?</strong> 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 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') }}. Vea la entrada <strong>(?:x)</strong> 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 expresiones regulares</a>.</li> + <li>Aserciones predictivas {{ mediawiki.external('lookahead assertions') }} positivas y negativas son soportadas. Las dos aseguran 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 expresiones regulares</a>.</li> + <li>La bandera {{ mediawiki.external('flag') }} m ha sido añadida para especificar que la expresión regular deberá cotejarse sobre múltiples líneas. Véase la página <a href="/es/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayúsculas_y_minúsculas_y_considerar_entrada_multilínea" title="es/Guía_JavaScript_1.5/Trabajar_con_expresiones_regulares#Ejecutar_una_busqueda_global,_discriminar_mayúsculas_y_minúsculas_y_considerar_entrada_multilínea">Ejecutar una búsqueda global, discriminar mayúsculas y minúsculas y considerar entrada multilínea</a>.</li> +</ul> + +<h2 id="Declaraciones_de_funciones_condicionales"><strong>Declaraciones de funciones condicionales</strong></h2> + +<p>Las funciones ahora pueden ser declaradas dentro de una cláusula if. Véase la página: <a href="/es/Guía_JavaScript_1.5/Definiendo_Funciones" title="es/Guía_JavaScript_1.5/Definiendo_Funciones">Definiendo Funciones</a>.</p> + +<h2 id="Expresiones_funcionales"><strong>Expresiones funcionales</strong></h2> + +<p>Las funciones ahora pueden ser declaradas dentro de una expresión. Véase la página: <a href="/es/Guía_JavaScript_1.5/Definiendo_Funciones" title="es/Guía_JavaScript_1.5/Definiendo_Funciones">Definiendo Funciones</a>.</p> + +<h2 id="Cláusulas_Catch_múltiples"><strong>Cláusulas Catch múltiples</strong></h2> + +<p>Las múltiples cláusulas Catch en una sentencia try...catch son soportadas. Véase la página: <a href="/es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch" title="es/Guía_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch"><em>El bloque catch</em></a>.</p> + +<h2 id="Obtenedores_y_Modificadores"><strong>Obtenedores y Modificadores</strong></h2> + +<p>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. Véase la página: <a href="/es/Guía_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set" title="es/Guía_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set">Definiendo obtenedores y modificadores</a>.</p> + +<h2 id="Constantes"><strong>Constantes</strong></h2> + +<p>Constantes definidas como sólo de lectura son soportadas. Esta característica está disponible únicamente en la implementación C de JavaScript. Véase la página: <a href="/es/Guía_JavaScript_1.5/Constantes" title="es/Guía_JavaScript_1.5/Constantes">Constantes</a>.</p> diff --git a/files/es/web/javascript/novedades_en_javascript/1.6/index.html b/files/es/web/javascript/novedades_en_javascript/1.6/index.html new file mode 100644 index 0000000000..b8393c6b9e --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.6/index.html @@ -0,0 +1,79 @@ +--- +title: Novedades en JavaScript 1.6 +slug: Web/JavaScript/Novedades_en_JavaScript/1.6 +tags: + - E4X + - JavaScript + - Todas_las_Categorías +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.6 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>JavaScript 1.6 introduce algunas nuevas características: E4X, algunos métodos nuevos <code>Array</code> y Arreglos y Cadenas genéricos.</p> + +<p>JavaScript 1.6 es soportado en <a href="es/Firefox_1.5">Firefox 1.5</a> y posteriores.</p> + +<h3 id="E4X" name="E4X">E4X</h3> + +<p>ECMAScript para XML (<a href="es/E4X">E4X</a>) es una poderosa tecnología para creción y procesamiento de contenido <a href="es/XML">XML</a> dentro de <a href="es/JavaScript">JavaScript</a>. Continuamos mejorando nuestro soporte en E4X , incluyendo adiciones transparentes de integración con el existente <a href="es/DOM">DOM</a>, pero desarrolladores quienes estan construyendo aplicaciones Web basadas en XML pueden beneficiarse con el soporte de E4X en Firefox 1.5.</p> + +<p>Puede seguirse utilizando el estandar de tipo MIME cuando utiliza E4X:</p> + +<pre><script type="text/javascript"> +</pre> + +<p>Sin embargo, la sintaxis de E4X puede entrar en conflicto con la práctica común de poner scripts dentro de comentarios HTML (<code><span class="nowiki"><!--...--></span></code>) para esconderlos de los navegadores antiguos. E4X puede también entrar en conflicto con la práctica más moderna de poner scripts dentro de las secciones XML CDATA (<code><![CDATA{{ mediawiki.external('...') }}]></code>) para permitir que los símbolos "<" y ">" en el script (nótese que esto no se aplica a HTML). Si visualiza errores de sintaxis inexplicables, añada "; e4x=1" al tipo MIME:</p> + +<pre><script type="text/javascript; e4x=1"> +</pre> + +<p>Nótese que los scripts en extensiones siempre tratan los comentarios HTML como literales E4X. Esto es, el "e4x=1" está implícito.</p> + +<h3 id="Extras_de_Arreglos" name="Extras_de_Arreglos">Extras de Arreglos</h3> + +<p>Existen siete nuevos métodos de <code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array">Array</a></code> que pueden ser separados en dos categorías, métodos de localización de items y métodos iterativos. Los métodos de localización de items son:</p> + +<ul> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/indexOf">indexOf()</a></code> - retorna el índice de la primera ocurrencia del item.</li> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/lastIndexOf">lastIndexOf()</a></code> - retorna el índice de la última ocurrencia del item dado.</li> +</ul> + +<p>Los métodos iterativos son:</p> + +<ul> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/every">every()</a></code> - corre una función en cada item en un arreglo y retorna verdadero si la función retorna verdadero en todos los items.</li> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/filter">filter()</a></code> - corre una función en cada item en un arreglo y retorna un arreglo con todos los items para los cuales la función retorna verdadero.</li> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/forEach">forEach()</a></code> - corre una función en cada item en un arreglo.</li> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/map">map()</a></code> - corre una función en cada item del arreglo y retorna los resultados en un arreglo.</li> + <li><code><a href="es/Core_JavaScript_1.5_Reference/Objects/Array/some">some()</a></code> - corre una función en cada item de un arreglo y retorna verdadero si la función retorna verdadero para cualquier item.</li> +</ul> + +<h3 id="Arreglos_y_cadenas_gen.C3.A9ricos" name="Arreglos_y_cadenas_gen.C3.A9ricos">Arreglos y cadenas genéricos</h3> + +<p>Algunas veces le gustaría aplicar métodos de arreglos a las cadenas. Para hacer esto, trate a una cadena como un arreglo de caracteres. Por ejemplo, para chequear que cada caracter en la variable <var>cadena</var> es una letra, podría escribir:</p> + +<pre>function esLetra(caracter) { + return (caracter >= "a" && caracter <= "z"); +} + +if (Array.prototype.every.call(cadena, esLetra)) + alert("La cadena '" + cadena + "' contiene solo letras!"); +</pre> + +<p>Esta notación es demasiado extensa y JavaScript 1.6 introduce un atajo genérico {{ mediawiki.external('generic shorthand') }}:</p> + +<pre>if (Array.every(cadena, isLetter)) + alert("La cadena '" + cadena + "' contiene sólo letras!"); +</pre> + +<p>Similarmente puede fácilmene aplicar métodos de String a cualquier objeto:</p> + +<pre>var número = 15; +alert(String.replace(número, /5/, '2')); +</pre> + +<h3 id="V.C3.A9ase_tambi.C3.A9n" name="V.C3.A9ase_tambi.C3.A9n">Véase también</h3> + +<p>Nuevas características de <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a> introducidas en <a href="es/Firefox_2">Firefox 2</a>.</p> + +<p> </p> diff --git a/files/es/web/javascript/novedades_en_javascript/1.7/index.html b/files/es/web/javascript/novedades_en_javascript/1.7/index.html new file mode 100644 index 0000000000..d783fdb0b0 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.7/index.html @@ -0,0 +1,534 @@ +--- +title: Novedades en JavaScript 1.7 +slug: Web/JavaScript/Novedades_en_JavaScript/1.7 +tags: + - Guía_de_JavaScript_1.5 + - JavaScript + - Todas_las_Categorías +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.7 +--- +<p>{{jsSidebar("New_in_JS")}}</p> + +<p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores, comprensión de arrays, sentencias <code>let</code> y asignación desestructurada. Evidentemente también incluye todas las características de <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>.</p> + +<p>El soporte para JavaScript 1.7 estará disponible a partir de <a href="es/Firefox_2">Firefox 2</a> Beta 1, así como en compilaciones actuales.</p> + +<p>Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a construir o utilizar esta consola, lee <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">Introducción al shell de JavaScript</a>.</p> + +<h2 id="Utilizando_JavaScript_1.7" name="Utilizando_JavaScript_1.7">Utilizando JavaScript 1.7</h2> + +<p>Para usar las nuevas caracteristicas de JavaScript 1.7, es necesario especificar explícitamente el uso de JavaScript 1.7. En HTML o XUL, utiliza:</p> + +<pre class="eval"> <script type="application/javascript;version=1.7"/> +</pre> + +<p>Cuando se utilice el <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">shell de JavaScript</a>, debes especificar la versión deseada utilizando la función <code>version()</code>:</p> + +<pre class="eval"> version(170); +</pre> + +<h2 id="Generadores_e_iteradores" name="Generadores_e_iteradores">Generadores e iteradores</h2> + +<p>Cuando se desarrolla código que involucra algoritmos iterativos (como iteraciones sobre listas, o cálculos repetitivos sobre el mismo conjunto de datos), con frecuencia hay variables de estado cuyos valores necesitan ser mantenidos durante el proceso. Tradicionalmente se utilizan funciones callback para obtener los valores intermedios de un algoritmo iterativo.</p> + +<h3 id="Generadores" name="Generadores">Generadores</h3> + +<p>Considera este algoritmo iterativo que obtiene los números de la serie Fibonacci:</p> + +<pre>function do_callback(num) { + document.write(num + "<BR>\n"); +} + +function fib() { + var i = 0, j = 1, n = 0; + while (n < 10) { + do_callback(i); + var t = i; + i = j; + j += t; + n++; + } +} + +fib(); +</pre> + +<p>Este código utiliza rutinas callback para realizar las operaciones en cada paso del algoritmo. En este caso, cada numero Fibonacci es impreso en la consola.</p> + +<p>Los generadores e iteradores trabajan juntos para proveer nuevas y mejores formas de hacer esto. Veamos cómo es la rutina de la serie Fibonacci escrita utilizando generadores:</p> + +<pre>function fib() { + var i = 0, j = 1; + while (true) { + yield i; + var t = i; + i = j; + j += t; + } +} + +var g = fib(); +for (var i = 0; i < 10; i++) { + document.write(g.next() + "<BR>\n"); +} +</pre> + +<p>La función que contiene la palabra clave <code>yield</code> es un generador. Cuando es llamada, sus parámetros formales son instanciados a los argumentos actuales, pero su cuerpo no es realmente evaluado, si no que se devuelve un + + <i>generator-iterator</i> + . Cada llamada al método <code>next()</code> del + + <i>generator-iterator</i> + realiza otro paso a través de algoritmo iterativo. El valor de cada paso es el valor especificado por la palabra clave <code>yield</code>. Piensa en <code>yield</code> como la versión + + <i>generator-iterator</i> + de <code>return</code> que delimita la frontera entre cada iteración del algoritmo. Cada vez que se llama a <code>next()</code>, el código del generador continúa a partir de la sentencia que va después de <code>yield</code>.</p> + +<p>Se realiza un ciclo en el generator-iterator llamando repetidamente a su método <code>next()</code> hasta que se consiga la condición deseada. Con este ejemplo se pueden obtener tantos números de Fibonacci como se quiera llamando simplemente a <code>g.next()</code> hasta que conseguir la cantidad de números que se quiera.</p> + +<h5 id="Resumiendo_un_generador_en_un_punto_espec.C3.ADfico" name="Resumiendo_un_generador_en_un_punto_espec.C3.ADfico">Resumiendo un generador en un punto específico</h5> + +<p>Una vez que un generador ha sido iniciado por la invocación de su función <code>next()</code>, puede utilizarse <code>send()</code>, pasando un valor específico que será tratado como el resultado de la última producción. El generador entonces retornará el operando de la subsecuente producción.</p> + +<p>No se puede iniciar un generador en un punto arbitrario; deberá comenzarse con <code>next()</code> antes de poder enviarle {{ mediawiki.external('<code>send()</code>') }} un valor específico.</p> + +<div class="note"><b>Nótese:</b> Como un punto interesante, invocando <code>send(undefined)</code> es equivalente a invocar <code>next()</code>. Sin embargo, iniciando la aparición de un nuevo generador con cualquier otro valor que no sea indefinido {{ mediawiki.external('undefined') }} cuando invoque a <code>send()</code> resultará como una excepción de error de tipo {{ mediawiki.external('<code>TypeError</code> exception') }}.</div> + +<h5 id="Excepciones_en_los_generadores" name="Excepciones_en_los_generadores">Excepciones en los generadores</h5> + +<p>Puede forzar a un generador a lanzar una excepción mediante la invoación de su método <code>throw()</code>, pasándole el valor de la excepción que debe ser lanzada. Esta excepción se lanzará desde el conxtexto actual suspendido del generador, así como si el <code>yield</code> que está actualmente suspendido en lugar del sentencia <code>throw + <i>valor</i> + </code>.</p> + +<p>Si una producción no es encontrada durante el procesamiento de la excepción lanzada, entonces la excepción se propagará ascendentemente hasta la invocación del <code>throw()</code> y subsecuentemente invocará a <code>next()</code> que resulta en el lanzamiento de una <code>StopIteration</code>.</p> + +<h5 id="Cerrando_un_generador" name="Cerrando_un_generador">Cerrando un generador</h5> + +<p>Los generadores poseen el método <code>close()</code> que forza al generador a cerrarse por sí mismo. Los efectos de cerrar un generador son:</p> + +<ol> + <li>Cualquier cláusula <code>finally</code> activa en la función del generador es ejecutada.</li> + <li>Si una cláusula <code>finally</code> lanza cualquier excepción distinta a <code>StopIteration</code>, la excepción es propagada hacia el invocador del método <code>close()</code>.</li> + <li>El generador termina.</li> +</ol> + +<h5 id="Ejemplo_de_un_Generador" name="Ejemplo_de_un_Generador">Ejemplo de un Generador</h5> + +<p>Este código maneja un generador que se producirá cada 100 lazos.</p> + +<pre>var gen = generator(); + +function driveGenerator() { + if (gen.next()) { + window.setTimeout(driveGenerator, 0); + } else { + gen.close(); + } +} + +function generator() { + while (i < something) { + /** stuff **/ + + ++i; + /** 100 loops per yield **/ + if ((i % 100) == 0) { + yield true; + } + } + + yield false; +} +</pre> + +<h3 id="Iteradores" name="Iteradores">Iteradores</h3> + +<p>Un + <i>iterador</i> + es un objeto especial que te permite iterar datos.</p> + +<p>En el uso cotidiano, los objetos iteradores son + <i>invisibles</i> + (no se necesita trabajar con ellos explícitamente) y son usados en <a href="es/Gu%c3%ada_JavaScript_1.5/Sentencias_de_manipulaci%c3%b3n_de_objetos">sentencias <code>for...in</code> y <code>for each...in</code></a> para recorrer de forma natural las claves y/o los valores de los objetos.</p> + +<pre>var objectWithIterator = getObjectSomehow(); + +for (var i in objectWithIterator) +{ + document.write(objectWithIterator[i] + "<BR>\n"); +} +</pre> + +<p>Si se está implementando un objeto iterador personalizado o se necesita manipular directamente un iterador, será preciso conocer antes el método <code>next()</code>, la excepción <code>StopIteration</code> y la propiedad <code>__iterator__</code>.</p> + +<p><span class="comment">traduzco getter como la función get</span> Se puede crear un iterador para un objeto llamando a <code>Iterator( + <i>objectname</i> + )</code>. El iterador para cierto objeto se conoce gracias a la propiedad <code>__iterator__</code> de dicho objeto, la cual implementa predeterminadamente la iteración de acuerdo al modelo convencional de <code>for..in</code> y <code>for each...in</code>. Si se desea utilizar un iterador personalizado, se debería sobreescribir la función <a href="es/Gu%c3%ada_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set">get</a> para que <code>__iterator__</code> devuelva una instancia del susodicho iterador. Para obtener el iterador de un objeto en un script se debería de usar <code>Iterator( + <i>obj</i> + )</code> en lugar de acceder directamente a la propiedad <code>__iterator__</code>.</p> + +<p>Una vez se tiene el iterador, se puede buscar fácilmente el siguiente elemento en el objeto llamando su método <code>next()</code>. Cuando no hay más datos se lanza la excepción <code>StopIteration</code>.</p> + +<p>A continuación se muestra un ejemplo simple de manipulación directa de iteradores:</p> + +<pre>var obj = {name:"Jack Bauer", username:"JackB", id:12345, agency:"CTU", region:"Los Angeles"}; + +var it = Iterator(obj); + +try { + while (true) { + document.write(it.next() + "<BR>\n"); + } +} catch (err if err instanceof StopIteration) { + document.write("End of record.<BR>\n"); +} catch (err) { + document.write("Unknown error: " + err.description + "<BR>\n"); +} +</pre> + +<p>La salida de este programa tendrá este aspecto:</p> + +<pre>name,Jack Bauer +username,JackB +id,12345 +agency,CTU +region,Los Angeles +End of record. +</pre> + +<p>Opcionalmente se puede especificar un segundo parámetro durante la creación del iterador, el cual es un valor booleano que indica si sólo se quieren obtener las claves cada vez que se llama al método <code>next()</code> o no. Cambiando <code>var it = Iterator(obj);</code> por <code>var it = Iterator(obj, true);</code> en el ejemplo anterior se obtendría la siguiente salida:</p> + +<pre>name +username +id +agency +region +End of record. +</pre> + +<p>En ambos casos, el orden final en el que los datos son devueltos puede variar dependiendo de la implementación por lo que <b>no se garantiza el orden de los datos</b>.</p> + +<p>Los iteradores son un método útil de recorrer los datos de los objetos, incluyendo objetos que pueden contener datos inesperados. Esto puede ser especialmente útil si se necesitan recuperar datos para los que la aplicación no está preparada.</p> + +<h2 id="Comprensi.C3.B3n_de_arrays" name="Comprensi.C3.B3n_de_arrays">Comprensión de arrays</h2> + +<p>La comprensión de arrays es una forma de utilizar generadores para realizar de manera apropiada potentes inicializaciones de arrays. Por ejemplo:</p> + +<pre class="eval">function range(begin, end) { + for (let i = begin; i < end; ++i) { + yield i; + } +} +</pre> + +<p><code>range()</code> es un generador que devuelve todos los valores entre <tt>begin</tt> y <tt>end</tt>. Una vez definido eso, se puede utilizar así:</p> + +<pre class="eval">var diez_cuadrados = [i * i for (i in range(0, 10))]; +</pre> + +<p>Esto pre-inicializa un nuevo array, <var>diez_cuadrados</var>, para que contenga los cuadrados de los valores del rango <code>0..9</code>.</p> + +<p>Se puede usar cualquier sentencia condicional al inicializar un array. Si lo que se quiere es inicializar un array para que contenta los números pares entre 0 y 20, se puede usar este código.</p> + +<pre class="eval">var pares = [i for (i in range(0, 21)) if (i % 2 == 0)]; +</pre> + +<p>Antes de JavaScript 1.7, lo anterior debería haber sido codificado así:</p> + +<pre>var evens = []; +for (var i=0; i <= 20; i++) { + if (i % 2 == 0) + evens.push(i); +} +</pre> + +<p>La comprensión de arrays no sólo es mucho más compacta sino que de hecho es mucho más fácil de leer una vez que nos hemos familiarizado con el concepto.</p> + +<h4 id="Reglas_de_.C3.A1mbito" name="Reglas_de_.C3.A1mbito">Reglas de ámbito</h4> + +<p>La comprensión de arrays utiliza un bloque implícito en el cual se ubica. Dicho bloque contiene todo el contenido que se halla dentro de los corchetes, además del las declaraciones <code>let</code> implícitas.</p> + +<p><span class="comment">''Add details.''</span></p> + +<h2 id=".C3.81mbito_de_un_bloque_con_let" name=".C3.81mbito_de_un_bloque_con_let">Ámbito de un bloque con <code>let</code></h2> + +<p>Existen varias formas en las que <code>let</code> puede ser usado para manejar el ámbito de un bloque de datos y funciones:</p> + +<ul> + <li>La <b>sentencia <code>let</code></b> proporciona un método de asociar valores con variables, constantes y funciones en el ámbito del bloque, sin afectar a los de las variables que tengan el mismo nombre fuera del bloque.</li> + <li>La <b>expresión <code>let</code></b> permite establecer variables cuyo ámbito está comprendido en una única expresión.</li> + <li>La <b>definición <code>let</code></b> define variables, constantes y funciones cuyo ámbito queda restringido al bloque en el que se han definido. Esta sintaxis es muy parecida a la usada para <code>var</code>.</li> + <li>Además se puede utilizar <code>let</code> para establecer variables que existan sólo dentro del contexto de un bucle <code>for</code>.</li> +</ul> + +<p> </p> + +<h3 id="El_sentencia_let" name="El_sentencia_let">El sentencia <code>let</code></h3> + +<p>La sentencia <code>let</code> proporciona un ámbito local para variables, constantes y funciones. Funciona reservando cero o más variables en el ámbito léxico de un único bloque de código. La validez de la sentencia <code>let</code> finaliza cuando termina el bloque.</p> + +<p>Por ejemplo:</p> + +<pre>var x = 5; +var y = 0; + +let (x = x+10, y = 12) { + document.write(x+y + "<BR>\n"); +} + +document.write(x+y + "<BR>\n"); +</pre> + +<p>tendrá como salida:</p> + +<pre>27 +5 +</pre> + +<p>Las reglas para el bloque de código son las mismas que para cualquier otro bloque de código de JavaScript. Puede tener sus propias variables establecidas usando declaraciones <code>let</code>.</p> + +<div class="note"><b>Nota:</b> Cuando se use la sintaxis de las sentencia <code>let</code>, será necesario incluir los paréntesis. El no incluirlos provocará un error de sintaxis.</div> + +<h4 id="Reglas_de_.C3.A1mbito_2" name="Reglas_de_.C3.A1mbito_2">Reglas de ámbito</h4> + +<p>El ámbito de las variables definidas usando <code>let</code> es el del mismo bloque de <code>let</code>, además de cualquier bloque interno contenido dentro de él, a menos que esos bloques definan variables con el mismo nombre.</p> + +<h3 id="Expresiones_let" name="Expresiones_let">Expresiones <code>let</code></h3> + +<p>Se puede usar <code>let</code> para establecer variables cuyo ámbito comprende sólo una única expresión:</p> + +<pre>var x = 5; +var y = 0; +document.write( let(x = x + 10, y = 12) x+y + "<BR>\n"); +document.write(x+y + "<BR>\n"); +</pre> + +<p>La salida da como resultado:</p> + +<pre>27 +5 +</pre> + +<p>En este caso, el ámbito de las variables <var>x</var> = <code>x+10</code> e <var>y</var> = <code>12</code> es utilizado solamente en la expresión <code>x+y</code></p> + +<h4 id="Reglas_de_.C3.A1mbito_3" name="Reglas_de_.C3.A1mbito_3">Reglas de ámbito</h4> + +<p>Dada la expresión <code>let</code></p> + +<pre class="eval">let (<var>decls</var>) <var>expr</var> +</pre> + +<p>existe un bloque creado implícitamente que comprende el trozo <var>expr</var>.</p> + +<h3 id="Definiciones_let" name="Definiciones_let">Definiciones <code>let</code></h3> + +<p>La palabra clave <code>let</code> puede además ser usada para definir variables, constantes y funciones dentro de un bloque.</p> + +<pre> ** Este código no funciona en FF 2.0 b1. ** +if (x > y) +{ + let const k = 37; + let gamma : int = 12.7 + k; + let i = 10; + let function f(n) { return (n/3)+k; } + return f(gamma) + f(i); +} +</pre> + +<h4 id="Reglas_de_.C3.A1mbito_4" name="Reglas_de_.C3.A1mbito_4">Reglas de ámbito</h4> + +<p>Las variables, funciones y constantes declaradas usando <code>let</code>, <code>let function</code> y <code>let const</code> tienen como ámbito el bloque en el que están definidas, además de cualquier sub-bloque en el que no sean redefinidas. De este modo, <code>let</code> funciona como <code>var</code>.</p> + +<p>En los programas y clases, <code>let</code> no crea propiedades en los objetos y clases globales como hace <code>var</code>. En vez de eso, crea propiedades en un bloque implícito creado para la evaluación de sentencias en dichos contextos. Esto significa esencialmente que <code>let</code> no sobreescribirá las variables previamente definidas usando <code>var</code>. Por ejemplo:</p> + +<pre>** No funciona en FF 2.0 b1. Devuelve "42", no "global". +var x = 'global'; +let x = 42; +document.write(this.x + "<BR>\n"); +</pre> + +<p>La salida mostrada por este código será "global", no "42".</p> + +<p>Un + <i>bloque implícito</i> + es aquel que no está comprendido entre llaves; es creado implícitamente por el motor de JavaScript.</p> + +<p>En las funciones, una sentencia <code>let</code> ejecutada dentro de <code>eval()</code> no crea propiedades en el objeto variable <span class="comment">Esto hay que traducirlo: (activation object or innermost binding rib)</span> como sí hace <code>var</code>. En vez de eso, lo hace en un bloque creado implícitamente para la evaluación de las sentencias del programa. Esto es consecuencia de la forma de trabajar de <code>eval()</code> unido a la anterior regla.</p> + +<p>En otras palabras, cuando se usa <code>eval()</code> para ejecutar código, dicho código es es tratado como un programa independiente el cual tiene su propio bloque implícito alrededor de su código.</p> + +<h3 id=".C3.81mbito_de_variables_con_let_en_bucles_for" name=".C3.81mbito_de_variables_con_let_en_bucles_for">Ámbito de variables con <code>let</code> en bucles <code>for</code></h3> + +<p>Se puede usar la palabra reservada <code>let</code> para declarar variables localmente en el ámbito de un bucle <code>for</code>, al igual que con <code>var</code>.</p> + +<pre>** Add obj ** + var i=0; + for ( let i=i ; i < 10 ; i++ ) + document.write(i + "<BR>\n"); + + for ( let [name,value] in obj ) + document.write("Name: " + name + ", Value: " + value + "<BR>\n"); +</pre> + +<h4 id="Reglas_de_.C3.A1mbito_5" name="Reglas_de_.C3.A1mbito_5">Reglas de ámbito</h4> + +<pre class="eval">for (let <var>expr1</var>; <var>expr2</var>; <var>expr3</var>) <var>sentencia</var> +</pre> + +<p>En este ejemplo, <var>expr2</var>, <var>expr3</var> y <var>sentencia</var> están delimitadas por un bloque implícito que contiene a las variables locales al bloque declaradas por <code>let <var>expr1</var></code>. Esto se demuestra en el primer bucle del ejemplo.</p> + +<pre class="eval">for (<var>expr1</var> in <var>expr2</var>) <var>sentencia</var> +</pre> + +<p>En este caso, existe un bloque implícito que contiene a <var>sentencia</var>. Esto es mostrado en el segundo bucle del ejemplo.</p> + +<h2 id="Asignaci.C3.B3n_desestructurada" name="Asignaci.C3.B3n_desestructurada">Asignación desestructurada</h2> + +<p>La asignación desestructurada hace posible extraer datos desde arrays u objetos utilizando una sintaxis que refleja la construcción de arrays y objetos literales.</p> + +<p>Las expresiones de objetos y arrays literales proporcionan una forma fácil de crear paquetes de datos ad hoc. Una vez creados estos paquetes de datos, pueden ser usados como se quiera. Se pueden devolver incluso desde funciones.</p> + +<p>Una peculiaridad especialmente útil que se puede hacer con la asignación desestructurada es leer una estructura completa desde una única sentencia aunque hay un número de cosas interesantes que se pueden hacer con ella, como muestra la siguiente sección repleta de ejemplos.</p> + +<p>Esta capacidad es similar a las características que presentan lenguajes tales como Perl o Python.</p> + +<h3 id="Ejemplos" name="Ejemplos">Ejemplos</h3> + +<p>La asignación desestructurada se explica mejor con ejemplos por lo que aquí se muestran un par de ellos con fines didáctico.</p> + +<div class="note"><b>Nota:</b> Si tienes ejemplos más interesantes con formas de utilizar la asignación desestructurada, por favor, anímate a añadirlos a esta sección.</div> + +<h4 id="Intercambiando_valores" name="Intercambiando_valores">Intercambiando valores</h4> + +<p>Se puede usar la asignación desestructurada para, por ejemplo, intercambiar valores:</p> + +<pre>var a = 1; +var b = 3; + +[a, b] = [b, a]; +</pre> + +<p>Tras ejecutar este código, <var>b</var> valdrá 1 y <var>a</var> valdrá 3.</p> + +<p>O para rotar valores: (formato de código pobre)</p> + +<pre><body bgcolor = "black"> + +<script type="application/javascript;version=1.7"/> + +var a = 'o'; +var b = "<font color = 'green'>o</font>"; +var c = 'o'; +var d = 'o'; +var e = 'o'; +var f = "<font color = 'blue'>o</font>"; +var g = 'o'; +var h = 'o'; + +for (lp=0;lp<40;lp++) + {[a, b, c, d, e, f, g, h] = [b, c, d, e, f, g, h, a]; + document.write(a+''+b+''+c+''+d+''+e+''+f+''+g+''+h+''+"<br />");} +</script> +</pre> + +<p>Después de ejecutar este código, se mostrará un espectáculo de colores gracias a la rotación de las variables.</p> + +<h4 id="Devolviendo_m.C3.BAltiples_valores" name="Devolviendo_m.C3.BAltiples_valores">Devolviendo múltiples valores</h4> + +<p>Gracias a la asignación desestructurada, las funciones pueden devolver múltiples valores. Dado que las funciones siempre han podido devolver funciones, ésto proporciona una vuelta de tuerca a la flexibilidad.</p> + +<pre>function f() { + return [1, 2]; +} +</pre> + +<p>Como se puede observar, los resultados se devuelven usando una notación parecida a la utilizada con los arrays, con los valores que se quieren devolver encerrados entre corchetes. Así, se puede devolver un número cualquiera de resultados. En el siguiente ejemplo, <code>f()</code> devuelve el valor <code>{{ mediawiki.external('1, 2') }}</code>.</p> + +<pre>var a, b; +[a, b] = f(); +document.write ("A es " + a + " B es " + b + "<BR>\n"); +</pre> + +<p>El comando <code>{{ mediawiki.external('a, b') }} = f()</code> asigna el resultado de la función a las variables ubicadas por orden entre corchetes: <var>a</var> queda establecido a 1 y <var>b</var> a 2.</p> + +<p>También se pueden obtener los valores devueltos como un array:</p> + +<pre>var a = f(); +document.write ("A es " + a); +</pre> + +<p>En este caso, <var>a</var> será un array que contendrá los valores 1 y 2.</p> + +<h4 id="Ignorar_ciertos_valores_devueltos" name="Ignorar_ciertos_valores_devueltos">Ignorar ciertos valores devueltos</h4> + +<p>Se pueden ignorar algunos valores devueltos en los que no se esté interesado:</p> + +<pre>function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +document.write ("A is " + a + " B is " + b + "<BR>\n"); +</pre> + +<p>Tras ejecutar este código, <var>a</var> valdrá 1 y <var>b</var>, 3. El valor 2 es ignorado.</p> + +<h4 id="Iteraci.C3.B3n_sobre_objetos" name="Iteraci.C3.B3n_sobre_objetos">Iteración sobre objetos</h4> + +<p>Se puede usar asignación desestructurada para recuperar datos de un objeto.</p> + +<pre>var obj = { nombre: "Bob", puntos: 1.5, edad: 35 }; + +for (let[nombre, valor] in obj) { + document.write ("Nombre: " + nombre + ", Valor: " + valor + "<BR>\n"); +} +</pre> + +<p>Este bucle recorre todos los pares clave/valor del objeto <var>obj</var> y muestra sus nombres y valores. En este caso, la salida será algo así:</p> + +<pre>Nombre: nombre, Valor: Bob +Nombre: puntos, Valor: 1.5 +Nombre: edad, Valor: 35 +</pre> + +<h4 id="Iteraci.C3.B3n_sobre_valores_en_arrays_de_objetos" name="Iteraci.C3.B3n_sobre_valores_en_arrays_de_objetos">Iteración sobre valores en arrays de objetos</h4> + +<p>Se puede iterar un array de objetos, accediendo a los campos que interesen de cada objeto.</p> + +<pre>var personas = [ + { + nombre: "Mike Smith", + familia: { + madre: "Jane Smith", + padre: "Harry Smith", + hermana: "Samantha Smith" + }, + edad: 35 + }, + { + nombre: "Tom Jones", + familia: { + madre: "Norah Jones", + padre: "Richard Jones", + hermano: "Howard Jones" + }, + edad: 25 + } +]; + +for each (let {nombre: n, familia: { padre: f } } in personas) { + document.write ("Nombre: " + n + ", Padre: " + f + "<BR>\n"); +} +</pre> + +<p>Esto copia el valor del campo <var>nombre</var> a <var>n</var> y el del campo <var>familia.padre</var> a <var>f</var> y luego los muestra por pantalla. Esto se hace para cada objeto del array <var>personas</var>. La salida será algo así:</p> + +<pre>Nombre: Mike Smith, Padre: Harry Smith +Nombre: Tom Jones, Padre: Richard Jones +</pre> + +<p><span class="comment">Categorías</span> <span class="comment">enlaces interwikis</span></p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/New_in_JavaScript_1.7", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.7", "it": "it/Novit\u00e0_in_JavaScript_1.7", "ja": "ja/New_in_JavaScript_1.7", "pl": "pl/Nowo\u015bci_w_JavaScript_1.7", "zh-tw": "zh_tw/JavaScript_1.7_\u65b0\u9bae\u4e8b" } ) }}</p> diff --git a/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html b/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html new file mode 100644 index 0000000000..7cd586c2cb --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.8.1/index.html @@ -0,0 +1,30 @@ +--- +title: Nuevo en JavaScript 1.8.1 +slug: Web/JavaScript/Novedades_en_JavaScript/1.8.1 +tags: + - Firefox 3.5 + - JavaScript + - Versiones +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.1 +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>El siguiente es un registro de cambios para JavaScript 1.8.1. Esta versión fue incluida en <a href="/es/Firefox/Releases/3.5">Firefox 3.5</a>.</p> + +<p>JavaScript 1.8.1 es una actualización modesta sintácticamente a JavaScript; El principal cambio en esta versión es la adición del compilador <a href="/es/docs/SpiderMonkey/Internals/Tracing_JIT">Tracemonkey Just-In-Time</a>, que mejora el rendimiento.</p> + +<h2 id="Nuevas_características_en_JavaScript_1.8.1">Nuevas características en JavaScript 1.8.1</h2> + +<ul> + <li>{{jsxref("Object.getPrototypeOf()")}}</li> + <li><a href="/es/docs/Web/JavaScript/Guide/Using_native_JSON">Soporte para JSON nativo</a></li> + <li>{{jsxref("String.prototype.trim()")}}</li> + <li>{{jsxref("String.prototype.trimLeft()")}}</li> + <li>{{jsxref("String.prototype.trimRight()")}}</li> +</ul> + +<h2 id="Funcionalidad_modificada_en_JavaScript_1.8.1">Funcionalidad modificada en JavaScript 1.8.1</h2> + +<ul> + <li>La configuración implícita de propiedades en los inicializadores de objeto y matriz ya no ejecuta setters en JavaScript. Esto hace que el comportamiento de establecer los valores de las propiedades sea más predecible.</li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html b/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html new file mode 100644 index 0000000000..57761b2971 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.8.5/index.html @@ -0,0 +1,151 @@ +--- +title: Novedades en JavaScript 1.8.5 +slug: Web/JavaScript/Novedades_en_JavaScript/1.8.5 +tags: + - ECMAScript5 + - Firefox 4 + - JavaScript + - JavaScript 1.8.5 + - JavaScript_version_overviews +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8.5 +--- +<p>{{jsSidebar("New_in_JS")}}JavaScript 1.8.5 es una versión de JavaScript incluida en Firefox 4.</p> + +<h2 id="Nuevas_Funciones">Nuevas Funciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Function</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/create" title="En/Core JavaScript 1.5 + Reference/Global Objects/Object/Create">Object.create</a></code></td> + <td>Crea un nuevo objeto con el objeto prototype especificado y sus propiedades. {{ bug("492840") }}</td> + </tr> + <tr> + <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/defineProperty" title="En/Core JavaScript 1.5 Reference/Global + Objects/Object/DefineProperty">Object.defineProperty</a></code></td> + <td>Añade la propiedad nombrada descrita por un descriptor dado a un objeto.</td> + </tr> + <tr> + <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/defineProperties" title="En/Core JavaScript 1.5 Reference/Global + Objects/Object/DefineProperties">Object.defineProperties</a></code></td> + <td>Añade las propiedades descritas por los descriptores dados a un objeto.</td> + </tr> + <tr> + <td><code><a class="internal" href="/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor" title="En/Core JavaScript 1.5 Reference/Global + Objects/Object/GetOwnPropertyDescriptor">Object.getOwnPropertyDescriptor</a></code></td> + <td>Devuelve una propiedad del descriptor para una propiedad nombrada en un objeto. {{ bug("505587") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/keys" title="en/Core JavaScript + 1.5 Reference/Global Objects/Object/keys"><code>Object.keys</code></a></td> + <td>Devuelve un vector de todas las propiedades enumerables de un objeto.{{ bug("307791") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/getOwnPropertyNames"><code>Object.getOwnPropertyNames </code></a></td> + <td>Devuelve un vector de todas las propiedades enumerables y no-enumerables de un objeto. {{ bug("518663") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/preventExtensions"><code>Object.preventExtensions</code></a></td> + <td>Evita cualquier extensión de un objeto. {{ bug("492849") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isExtensible" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/isExtensible"><code>Object.isExtensible</code></a></td> + <td>Determina si la extensión de un objeto está permitida. {{ bug("492849") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/seal" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/seal"><code>Object.seal</code></a></td> + <td>Evita otro código proveniente del borrado de las propiedades de un objeto.{{ bug("492845") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isSealed" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/isSealed"><code>Object.isSealed</code></a></td> + <td>Determina si un objeto está sellado. {{ bug("492845") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/freeze" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/freezed"><code>Object.freeze</code></a></td> + <td>Congela un objeto: otro código no puede borrar o cambiar ninguna propiedad. {{ bug("492844") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Object/isFrozen" title="en/Core + JavaScript 1.5 Reference/Global Objects/Object/isFrozen"><code>Object.isFrozen</code></a></td> + <td>Determina si un objeto ha sido congelado. {{ bug("492844") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Array/isArray" title="en/Core JavaScript + 1.5 Reference/Global Objects/Array/isArray"><code>Array.isArray </code></a></td> + <td>Comprueba si una variable es un Array. {{ bug("510537") }}</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Date/toJSON" title="en/JavaScript/Reference/Global Objects/Date/toJSON"><code>Date.toJSON</code></a></td> + <td>Devuelve un string en formato JSON a partir de un objeto Date.</td> + </tr> + <tr> + <td><a href="/en/JavaScript/Reference/Global_Objects/Function/bind" title="en/JavaScript/Reference/Global_Objects/Function/bind"><code>Function.prototype.bind</code></a></td> + <td>Crea una nueva función que, cuando es llamada, se llama a esta función en el contexto provisto (con una secuencia de argumentos dados). {{ bug("429507") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Nuevas_características_ECMAScript5">Nuevas características ECMAScript5</h2> + +<ul> + <li>Los operadores <code><a href="/en/JavaScript/Reference/Operators/Special/get" title="en/JavaScript/Reference/Operators/Special Operators/get Operator">get</a></code> y <code><a href="/en/JavaScript/Reference/Operators/Special/set" title="en/JavaScript/Reference/Operators/Special Operators/set Operator">set</a></code> ahora permiten al identificador ser numérico o string. {{ bug("520696") }}</li> + <li><a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply"><code>Function.apply()</code></a> puede aceptar cualquier objeto estilo-array como lista de argumentos, en lugar de solo arrays reales.</li> + <li><a href="/en/JavaScript/Strict_mode" title="en/JavaScript/Strict mode">strict mode soportado</a></li> +</ul> + +<h2 id="Otros_trabajos_de_estandarización">Otros trabajos de estandarización</h2> + +<p>Varias sintaxis no estandar para la definición de getters y setters han sido eliminadas; la sintaxis ECMAScript 5 definida no ha sido cambiada. Todas ellas fueron muy esotéricas y raramente usadas; si ello te afecta, mira <a class="external" href="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/" title="http://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/"> este post</a> para más detalles.</p> + +<h2 id="Nuevos_Objetos">Nuevos Objetos</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Objeto</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en/JavaScript/Reference/Global_Objects/Proxy" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Proxy">Proxy</a></code></td> + <td>Ofrece soporte para la creación de <code>Object</code> y <code>Function</code> proxy que habilitan la meta-programación en JavaScript.</td> + </tr> + </tbody> +</table> + +<h2 id="Cambios_a_objetos_globales">Cambios a objetos globales</h2> + +<dl> + <dt>Soporte ISO 8601 en Date</dt> + <dd>El método <a href="/en/JavaScript/Reference/Global_Objects/Date/parse" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date/parse"><code>parse()</code></a>&nbspdel objeto <a href="/en/JavaScript/Reference/Global_Objects/Date" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a> ahora soporta strings de fecha en el formato simple ISO 8601.</dd> + <dt>Objetos globales hechos de solo lectura</dt> + <dd>Los objetos <a href="/en/JavaScript/Reference/Global_Objects/NaN" title="en/JavaScript/Reference/Global Objects/NaN"><code>NaN</code></a>, <a href="/en/JavaScript/Reference/Global_Objects/Infinity" title="en/JavaScript/Reference/Global Objects/Infinity"><code>Infinity</code></a>, y <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global Objects/undefined"><code>undefined</code></a> han sido hechos de solo lectura, por la especificación ECMAScript 5.</dd> +</dl> + +<h2 id="Cambios_Adicionales">Cambios Adicionales</h2> + +<ul> + <li><a href="/en/JavaScript/Reference/Global_Objects/Object/Parent" title="en/JavaScript/Reference/Global Objects/Object/Parent"><code>obj.__parent__</code></a> y <code>obj.__count__</code> se convierten en obsoletos. Alguna información sobre el por qué: <a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/" title="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a> {{ bug("551529") }} & {{ bug("552560") }}</li> + <li>El arrastre de comas no se aceptará más en <a href="/En/Using_native_JSON" title="En/Using native JSON"><code>JSON.parse()</code></a></li> +</ul> + +<h2 id="Cambios_en_el_API_JavaScript_(SpiderMonkey)">Cambios en el API JavaScript (SpiderMonkey)</h2> + +<div class="note"><strong>Nota:</strong> Los Locale callbacks (como se especificó en la estrucutura <a href="/en/JSLocaleCallbacks" title="en/JSLocaleCallbacks">JSLocaleCallbacks</a>) no debe liberar la memoria del buffer que se les pasa; este buffer se controla por la rutina SpiderMonkey.</div> + +<p>La función <a href="/en/SpiderMonkey/JSAPI_Reference/JS_NewString" title="en/SpiderMonkey/JSAPI Reference/JS NewString"><code>JS_NewString()</code></a> fue eliminada en SpiderMonkey 1.8.5. Use <a href="/en/SpiderMonkey/JSAPI_Reference/JS_NewStringCopyN" title="en/SpiderMonkey/JSAPI Reference/JS NewStringCopyN"><code>JS_NewStringCopyN()</code></a> en su lugar.</p> + +<p>{{ languages( { "en":"en/JavaScript/New_in_JavaScript/1.8.5" } ) }}</p> diff --git a/files/es/web/javascript/novedades_en_javascript/1.8/index.html b/files/es/web/javascript/novedades_en_javascript/1.8/index.html new file mode 100644 index 0000000000..6045185e4a --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/1.8/index.html @@ -0,0 +1,150 @@ +--- +title: Novedades en JavaScript 1.8 +slug: Web/JavaScript/Novedades_en_JavaScript/1.8 +tags: + - JavaScript + - Todas_las_Categorías + - Visión_general_de_las_versiones_JavaScript +translation_of: Archive/Web/JavaScript/New_in_JavaScript/1.8 +--- +<p>{{jsSidebar("New_in_JS")}}JavaScript 1.8 esta planificado para integrarse como parte de Gecko 1.9 (el cual sera incorporado en <a href="es/Firefox_3_para_desarrolladores">Firefox 3</a>). Esta es una actualización menos sustancial que la descrita en <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>, pero tiene algunas actualizaciones para comprobar el progreso hacia ECMAScript 4/JavaScript 2. Esta versión incluirá todas las nuevas características especificadas en <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a> y <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>.</p> + +<p>Lee el {{ Bug(380236) }} para estar al día del progreso de desarrollo de JavaScript 1.8.</p> + +<h3 id="Usando_JavaScript_1.8" name="Usando_JavaScript_1.8">Usando JavaScript 1.8</h3> + +<p>Para poder usar algunas de las nuevas características de JavaScript 1.8 en el HTML, usar:</p> + +<pre class="eval"> <script type="application/javascript;version=1.8"> ... su código aquí ... </script> +</pre> + +<p>Cuando uses la <a href="es/Introducci%c3%b3n_al_shell_de_JavaScript">Shell de JavaScript</a>, componentes XPCOM de JavaScript, o elementos <code><script></code> XUL <code><script></code>, se usará automaticamente la última versión de JS (JS1.8 en Mozilla 1.9), lee ({{ Bug(381031) }}, {{ Bug(385159) }}).</p> + +<p>Las características que requieren el uso de las nuevas palabras clave "yield" y "let" requiere que especifique la versión 1.7 o mayor ya que el código existente podría usar estas palabras clave como variables o nombres de función. Las características que no introducen nuevas palabras claves (como el generador de expresiones) pueden ser usadas sin especificar la versión de JavaScript.</p> + +<p> </p> + +<h3 id="Cierres_de_Expresi.C3.B3n" name="Cierres_de_Expresi.C3.B3n">Cierres de Expresión</h3> + +<p>Esta adición es simplemente una manera más simplificada de escribir funciones sencillas, dándole al lenguaje algo similar al típico <a class="external" href="http://es.wikipedia.org/wiki/C%C3%A1lculo_lambda#C.C3.A1lculo_lambda_y_los_lenguajes_de_programaci.C3.B3n">cálculo Lambda</a>.</p> + +<p><a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a> y versiones anteriores:</p> + +<pre class="eval"> function(x) { return x * x; } +</pre> + +<p>JavaScript 1.8:</p> + +<pre class="eval"> function(x) x * x +</pre> + +<p>Esta sintaxis te permite dejar fuera las llaves y las declaraciones 'return' - haciéndolas implícitas. No hay beneficio adicional en escribir código de esta manera, sino que el único es tener un código prácticamente mas corto.</p> + +<p><br> + <strong>Ejemplos:</strong></p> + +<p>Una manera simplificada para vincular event listeners:</p> + +<pre class="eval"> document.addEventListener("click", function() false, true); +</pre> + +<p>Usando esta notación con algunas de las funciones desde <a href="es/Novedades_en_JavaScript_1.6">JavaScript 1.6</a>:</p> + +<pre class="eval"> elems.some(function(elem) elem.type == "text"); +</pre> + +<p> </p> + +<h3 id="Generador_de_Expresiones" name="Generador_de_Expresiones">Generador de Expresiones</h3> + +<p>Esta adición te permite simplemente crear generadores (los cuales fueron introducidos en <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>). Típicamente debería crear una función personalizada la cual podría tener un impacto sobre esta, pero esta adición le permite usar <a href="es/Novedades_en_JavaScript_1.7#Comprensi.C3.B3n_de_arrays">sintaxis de comprensión de arrays</a> para crear una declaración de generador idéntica.</p> + +<p><br> + En <a href="es/Novedades_en_JavaScript_1.7">JavaScript 1.7</a>, podrías escribir algo como lo siguiente para crear un generador personalizado para un objeto:</p> + +<pre class="eval"> function add3(obj) { + for ( let i in obj ) + yield i + 3; + } + + let it = add3(someObj); + try { + while (true) { + document.write(it.next() + "<br>\n"); + } + } catch (err if err instanceof StopIteration) { + document.write("End of record.<br>\n"); + } +</pre> + +<p>En JavaScript 1.8, puedes eludir esto creando una función para un generador personalizado usando una expresión del generador:</p> + +<pre class="eval"> let it = (i + 3 for (i in someObj)); + try { + while (true) { + document.write(it.next() + "<br>\n"); + } + } catch (err if err instanceof StopIteration) { + document.write("End of record.<br>\n"); + } +</pre> + +<p><br> + Las expresiones del generador también pueden ser pasadas, como valores, a una función. Esto es particularmente notable ya que los generadores no son ejecutados hasta que sean absolutamente necesarios (no como una situación de comprensión de arrays típica, donde los arrays son construidos antes de tiempo ). Un ejemplo de la diferencia puede verse aquí:</p> + +<p><br> + Usando JavaScript 1.7 Comprensión de Arrays</p> + +<pre class="eval"> handleResults([ i for ( i in obj ) if ( i > 3 ) ]); + + function handleResults( results ) { + for ( let i in results ) + // ... + } +</pre> + +<p>Usando JavaScript 1.8 Generador de Expresiones</p> + +<pre class="eval"> handleResults( i for ( i in obj ) if ( i > 3 ) ); + + function handleResults( results ) { + for ( let i in results ) + // ... + } +</pre> + +<p><br> + La diferencia entre los dos ejemplos radica en que usando el generador de expresiones, solo tendría que recorrer sobre la estructura 'obj' una sola vez, en total, en lugar de una vez en la comprensión de la matriz, y de nuevo cuando ocurran iteraciones a través de la misma.</p> + +<h3 id="M.C3.A1s_extras_sobre_Arrays" name="M.C3.A1s_extras_sobre_Arrays">Más extras sobre Arrays</h3> + +<p>Existen dos nuevos métodos de iteracion <code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array">Array</a></code> incluidos en JavaScript 1.8, especificamente:</p> + +<ul> + <li><code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce">reduce()</a></code> - ejecuta una función en cada elemento en el array y colecciona los resultados de llamadas previas:</li> + <li><code><a href="es/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight">reduceRight()</a></code> - ejecuta una función en cada objeto del array y colecciona los resultados de llamadas previas, pero en orden inverso.</li> +</ul> + +<h3 id="Cambios_en_destructuracion_for..in" name="Cambios_en_destructuracion_for..in">Cambios en destructuracion for..in</h3> + +<p><a href="es/Novedades_en_JavaScript_1.7#Iteraci.C3.B3n_sobre_objetos">Novedades en JavaScript_1.7#Iteración sobre objetos</a> ({{ Bug(366941) }}).</p> + +<h3 id="Cambios_pr.C3.B3ximos" name="Cambios_pr.C3.B3ximos">Cambios próximos</h3> + +<p>Los cambios que se espera que lleguen con JavaScript 1.8 incluyen:</p> + +<ul> + <li>Codificación - Decodificacion en JSON.</li> + <li>Sintaxis slice</li> + <li>Destructuracion generalizada for...in</li> +</ul> + +<h3 id="Tambi.C3.A9n_puedes_ver" name="Tambi.C3.A9n_puedes_ver">También puedes ver</h3> + +<p><a href="es/JavaScript">Portada JavaScript</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/New_in_JavaScript_1.8", "fr": "fr/Nouveaut\u00e9s_dans_JavaScript_1.8", "ja": "ja/New_in_JavaScript_1.8", "ko": "ko/New_in_JavaScript_1.8", "pl": "pl/Nowo\u015bci_w_JavaScript_1.8", "pt": "pt/Novidades_no_Javascript_1.8" } ) }}</p> diff --git a/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html b/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html new file mode 100644 index 0000000000..c32f0ecd34 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html @@ -0,0 +1,41 @@ +--- +title: ECMAScript 5 support in Mozilla +slug: Web/JavaScript/Novedades_en_JavaScript/ECMAScript_5_support_in_Mozilla +translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>ECMAScript 5.1, es una versión antigua del estándar sobre el cuál se basa Javascript, dicha versión fue aprovada en Junio de 2011.</p> + +<p>El motor de JavaScript utilizado en las últimas versiones de los proyectos de Mozilla, incluyendo Firefox y Thunderbird, tienen soporte a todas las características de ECMAScript 5.1. Este artículo cubre las funciones compatibles con diferentes versiones del motor de JavaScript utilizado por Mozilla.</p> + +<h2 id="Características_soportadas">Características soportadas</h2> + +<h3 id="Añadido_en_JavaScript_1.8.5_(Gecko_2_Firefox_4_y_posteriores)">Añadido en JavaScript 1.8.5 (Gecko 2, Firefox 4 y posteriores)</h3> + +<p>Firefox 4 tiene soporte completo a ECMAScript 5, incluyendo el constructor <code>Object.*</code> métodos y el modo estrícto (strict mode.) Lee más en <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5" title="en/JavaScript/New_in_JavaScript/1.8.5">New in JavaScript 1.8.5</a>.</p> + +<h3 id="Añadido_en_JavaScript_1.8.1_(Gecko_1.9.1_Firefox_3.5)">Añadido en JavaScript 1.8.1 (Gecko 1.9.1, Firefox 3.5)</h3> + +<ul> + <li>Soporte nativo de los objetos <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="En/Using native JSON">JSON</a>.</li> + <li><code>Posee el método <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf" title="En/Core JavaScript 1.5 Reference/Global Objects/Object/GetPrototypeOf">Object.getPrototypeOf()</a></code>.</li> + <li><code>El método <a class="internal" href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim" title="En/Core JavaScript 1.5 Reference/Global Objects/String/Trim">String.trim()</a></code>, que elimina todos los espacios vacíos que hayan al principio o al final de un texto.</li> + <li>Gecko 1.9.1.4 actualizó la implementación de <a href="/en-US/docs/Web/JavaScript/Guide/Using_native_JSON#Converting_objects_into_JSON" title="En/Using native JSON#Converting objects into JSON"><code>JSON.stringify()</code></a> para que responda a ECMAScript 5.</li> +</ul> + +<p>Las mejoras dispuestas por ECMAScript 5 se han hecho en el algoritmo de análisis sintáctico que impiden la evaluación de XHTML como código JavaScript en ciertas circunstancias..</p> + +<h3 id="Añadido_en_JavaScript_1.6_(Gecko_1.8_Firefox_1.5)">Añadido en JavaScript 1.6 (Gecko 1.8, Firefox 1.5)</h3> + +<p>Los métodos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array"><code>Array</code></a> que ofrecen varias mejoras en los métodos que manipulan arreglos (arrays), que han sido parte de Javascript desde la versión <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">1.6</a>, ahora forman parte del estándar ECMAScript 5.</p> + +<h2 id="Más_información">Más información</h2> + +<ul> + <li><a class="external" href="http://www.ecmascript.org/" title="http://www.ecmascript.org/">ECMAScript web site</a></li> + <li><a class="external" href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf" title="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">ECMAScript 5.1 specification</a></li> + <li>John Resig's post on <a class="external" href="http://ejohn.org/blog/objectgetprototypeof/" title="http://ejohn.org/blog/objectgetprototypeof/">Object.getPrototypeOf</a></li> + <li>Michael J. Ryan's implementation of <a class="external" href="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx" title="http://frugalcoder.us/post/2010/01/07/EcmaScript-5s-Date-Extensions.aspx">ECMAScript5 Dates in JavaScript</a></li> + <li><a href="http://kangax.github.io/es5-compat-table/" title="http://kangax.github.io/es5-compat-table/">ECMAScript 5 support across browsers</a></li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html b/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html new file mode 100644 index 0000000000..882207368f --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html @@ -0,0 +1,273 @@ +--- +title: Soporte de ECMAScript 2015 en Mozilla +slug: Web/JavaScript/Novedades_en_JavaScript/ECMAScript_6_support_in_Mozilla +tags: + - ECMAScript6 + - Firefox + - JavaScript +translation_of: Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>ECMAScript 2015 (ES6) es la sexta edicion de las especificaciones del estandar del lenguaje ECMAScript. Esta versión define el estandar para la implementación de <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">Javascript</a> en <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, el motor utilizado en Firefox y otras aplicaciones de Mozilla.</p> + +<p>Con el nombre clave de "ES.next", "Harmony" o "ECMAScript 6", el primer borrador (basado en <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5.1</a>) fue publicado el 12 de Julio del 2011 como "ES.next". En Agosto de 2014, el borrador de la especificación ECMAScript 2015 fue detenido y pasó por un período de estabilización y correción de errores. Finalmente, el ECMA-262 Edición 6 fue oficialmente aprobado y publicado como un estándar en Junio 17 de 2015 por la Asamblea General de ECMA. También aparecerá como una norma internacional de la industria ISO/IEC 16262:2016.</p> + +<p>El estándar se puede consultar (y descargar) en los formatos <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">HTML</a> y <a href="http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf">PDF</a> de manera gratuita desde <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ecma-international.org</a>.</p> + +<p>Un canal para la retroalimentación sobre los estandares ECMAScript es <a href="https://mail.mozilla.org/listinfo/es-discuss">es-discuss</a>.</p> + +<h2 id="Biblioteca_estándar">Biblioteca estándar</h2> + +<h3 id="Adiciones_al_objeto_Array">Adiciones al objeto <code>Array</code></h3> + +<ul> + <li>Iteración {{jsxref("Array")}} con {{jsxref("Statements/for...of", "for...of")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>)</li> + <li>{{jsxref("Array.from()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li> + <li>{{jsxref("Array.of()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Array.prototype.fill()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Array.prototype.find()")}}, {{jsxref("Array.prototype.findIndex()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Array.prototype.entries()")}},<br> + {{jsxref("Array.prototype.keys()")}} (<a href="/es/Firefox/Releases/28">Firefox 28</a>),<br> + {{jsxref("Array.prototype.values()")}}</li> + <li>{{jsxref("Array.prototype.copyWithin()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li> + <li>{{jsxref("Array.@@species", "get Array[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li> +</ul> + +<h3 id="Nuevos_objetos_Map_y_Set_y_contrapartes_débiles">Nuevos objetos <code>Map</code> y <code>Set</code>, y contrapartes débiles</h3> + +<ul> + <li>{{jsxref("Map")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>) + + <ul> + <li>Iteración {{jsxref("Map")}} con {{jsxref("Sentencias/for...of", "for...of")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("Map.prototype.forEach()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Map.prototype.entries()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li> + <li>{{jsxref("Map.prototype.keys()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li> + <li>{{jsxref("Map.prototype.values()")}}</li> + <li>Argumento del Constructor: <code>new {{jsxref("Map")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>set()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>{{jsxref("Map.@@species", "get Map[@@species]")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li>{{jsxref("Set")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>) + <ul> + <li>Iteración {{jsxref("Set")}} con {{jsxref("Sentencias/for...of", "for...of")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("Set.prototype.forEach()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Set.prototype.entries()")}},<br> + {{jsxref("Set.prototype.keys()")}},<br> + {{jsxref("Set.prototype.values()")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>)</li> + <li>Argumento del Constructor: <code>new {{jsxref("Set")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>add()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>{{jsxref("Set.@@species", "get Set[@@species]")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li>{{jsxref("WeakMap")}} (<a href="/es/Firefox/Releases/6">Firefox 6</a>) + <ul> + <li>{{jsxref("WeakMap.clear()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li> + <li>Argumento iterable opcional en el constructor {{jsxref("WeakMap")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + <li>Argumento del Constructor: <code>new {{jsxref("WeakMap")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>set()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + </ul> + </li> + <li>{{jsxref("WeakSet")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>) + <ul> + <li>Argumento del Constructor: <code>new {{jsxref("WeakSet")}}(null)</code> (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + <li>Monkey-patched <code>add()</code> en el Constructor (<a href="/es/Firefox/Releases/37">Firefox 37</a>)</li> + </ul> + </li> +</ul> + +<h3 id="Nuevas_funciones_Math">Nuevas funciones <code>Math</code></h3> + +<ul> + <li>{{jsxref("Math.imul()")}} (<a href="/es/Firefox/Releases/20">Firefox 20</a>)</li> + <li>{{jsxref("Math.clz32()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Math.fround()")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li> + <li>{{jsxref("Math.log10()")}}, {{jsxref("Math.log2()")}}, {{jsxref("Math.log1p()")}}, {{jsxref("Math.expm1()")}}, {{jsxref("Math.cosh()")}}, {{jsxref("Math.sinh()")}}, {{jsxref("Math.tanh()")}}, {{jsxref("Math.acosh()")}}, {{jsxref("Math.asinh()")}}, {{jsxref("Math.atanh()")}}, {{jsxref("Math.hypot()")}}, {{jsxref("Math.trunc()")}}, {{jsxref("Math.sign()")}}, {{jsxref("Math.cbrt()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> +</ul> + +<h3 id="Adiciones_al_objeto_Number">Adiciones al objeto <code>Number</code></h3> + +<ul> + <li>{{jsxref("Number.isNaN()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.isFinite()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.isInteger()")}} (<a href="/es/Firefox/Releases/16">Firefox 16</a>)</li> + <li>{{jsxref("Number.parseInt()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.parseFloat()")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.EPSILON")}} (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li>{{jsxref("Number.MAX_SAFE_INTEGER")}}, {{jsxref("Number.MIN_SAFE_INTEGER")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Number.isSafeInteger()")}} (<a href="/es/Firefox/Releases/32">Firefox 32</a>)</li> +</ul> + +<h3 id="Adiciones_al_objeto_Object">Adiciones al objeto <code>Object</code></h3> + +<ul> + <li>{{jsxref("Object.prototype.__proto__")}} ha sido estandarizado</li> + <li>{{jsxref("Object.is()")}} (<a href="/es/Firefox/Releases/22">Firefox 22</a>)</li> + <li>{{jsxref("Object.setPrototypeOf()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Object.assign()")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li> + <li>{{jsxref("Object.getOwnPropertySymbols()")}} (<a href="/es/Firefox/Releases/33">Firefox 33</a>)</li> +</ul> + +<h3 id="Adiciones_al_objeto_Date">Adiciones al objeto <code>Date</code></h3> + +<ul> + <li>{{jsxref("Date.prototype")}} es un objeto ordinario (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + <li>genérico {{jsxref("Date.prototype.toString")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + <li>{{jsxref("Date.prototype.@@toPrimitive", "Date.prototype[@@toPrimitive]")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li> +</ul> + +<h3 id="Nuevo_objeto_Promise">Nuevo objeto <code>Promise</code></h3> + +<ul> + <li>{{jsxref("Promise")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>, habilitado por defecto en <a href="/es/Firefox/Releases/29">Firefox 29</a>)</li> +</ul> + +<h3 id="Nuevo_objeto_Proxy">Nuevo objeto <code>Proxy</code></h3> + +<ul> + <li>{{jsxref("Proxy")}} (<a href="/es/Firefox/Releases/18">Firefox 18</a>)</li> + <li>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "preventExtensions()")}} trap (<a href="https://developer.mozilla.org/en-US/Firefox/Releases/22">Firefox 22</a>)</li> + <li>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "isExtensible()")}} trap (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "getPrototypeOf()")}} and {{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "setPrototypeOf()")}} traps (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> +</ul> + +<h3 id="Nuevo_objeto_Reflect">Nuevo objeto <code>Reflect</code> </h3> + +<ul> + <li>{{jsxref("Reflect")}} (<a href="/es/Firefox/Releases/42">Firefox 42</a>)</li> +</ul> + +<h3 id="Adiciones_al_objeto_RegExp">Adiciones al objeto <code>RegExp</code></h3> + +<ul> + <li>{{jsxref("RegExp")}} sticky (y) flag (<a href="/es/Firefox/Releases/38">Firefox 38</a>)</li> + <li>{{jsxref("RegExp")}} unicode (u) flag (<a href="/es/Firefox/Releases/46">Firefox 46</a>)</li> + <li>generic {{jsxref("RegExp.prototype.toString")}} (<a href="/es/Firefox/Releases/39">Firefox 39</a>)</li> + <li>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("RegExp.@@species", "get RegExp[@@species]")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> +</ul> + +<h3 id="Adiciones_al_objeto_String">Adiciones al objeto <code>String</code></h3> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}} (<a href="/es/Firefox/Releases/29">Firefox 29</a>)</li> + <li>{{jsxref("String.prototype.codePointAt()")}} (<a href="/es/Firefox/Releases/29">Firefox 29</a>)</li> + <li>{{jsxref("String.prototype.startsWith()")}}, {{jsxref("String.prototype.endsWith()")}} (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li> + <li>{{jsxref("String.prototype.includes()")}} (<a href="/es/Firefox/Releases/40">Firefox 40</a>)(anteriormente <code>String.prototype.contains()</code> (<a href="/es/Firefox/Releases/17">Firefox 17</a>))</li> + <li>{{jsxref("String.prototype.repeat()")}} (<a href="/es/Firefox/Releases/24">Firefox 24</a>)</li> + <li>{{jsxref("String.prototype.normalize()")}} (<a href="/es/Firefox/Releases/31">Firefox 31</a>)</li> + <li>{{jsxref("String.raw()")}} (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Unicode_code_point_escapes">\u{XXXXXX}</a> Unicode code point escapes (<a href="/es/Firefox/Releases/40">Firefox 40</a>)</li> +</ul> + +<h3 id="Nuevo_objeto_Symbol">Nuevo objeto <code>Symbol</code></h3> + +<ul> + <li>{{jsxref("Symbol")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.iterator")}} (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.for()")}} - registro global de símbolos (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + <li>{{jsxref("Symbol.match")}} (<a href="/es/Firefox/Releases/40">Firefox 40</a>)</li> + <li>{{jsxref("Symbol.species")}} (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + <li>{{jsxref("Symbol.toPrimitive")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li> + <li>{{jsxref("Symbol.prototype.@@toPrimitive", "Symbol.prototype[@@toPrimitive]")}} (<a href="/es/Firefox/Releases/44">Firefox 44</a>)</li> + <li>{{jsxref("Symbol.replace")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("Symbol.search")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("Symbol.split")}} (<a href="/es/Firefox/Releases/49">Firefox 49</a>)</li> + <li>{{jsxref("Symbol.hasInstance")}} (<a href="/es/Firefox/Releases/50">Firefox 50</a>)</li> +</ul> + +<h3 id="Typed_Arrays">Typed Arrays</h3> + +<p>Typed arrays se especifican como parte de ECMAScript 2015 y ya no en <a href="https://www.khronos.org/registry/typedarray/specs/latest/">su propia especificación</a>.</p> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> + <li>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li> + <li>{{jsxref("DataView")}}</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("TypedArray.@@species", "get %TypedArray%[@@species]")}} (<a href="/es/Firefox/Releases/48">Firefox 48</a>)</li> +</ul> + +<h2 id="Expresiones_y_operadores">Expresiones y operadores</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a> (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">Operador Spread para arrays</a> (<a href="/es/Firefox/Releases/16">Firefox 16</a>) + <ul> + <li>Utiliza la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">Operador Spread para llamadas a funciones</a> (<a href="/es/Firefox/Releases/27">Firefox 27</a>) + <ul> + <li>Utiliza la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> + <li>{{jsxref("Statements/const", "const")}} (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.5">JS 1.5</a>, Firefox 1.0) (cumple con ES2015 {{bug("950547")}} implementado en Firefox 51)</li> + <li>{{jsxref("Statements/let", "let")}} (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/es/Firefox/Releases/2">Firefox 2</a>) (en cumplimiento de ES2015 {{bug("950547")}} implementado en Firefox 51)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a> (<a href="/es/docs/Web/JavaScript/New_in_JavaScript/1.7">JS 1.7</a>, <a href="/es/Firefox/Releases/2">Firefox 2</a>) (en cumplimiento de ES2015 {{bug("1055984")}})</li> +</ul> + +<h2 id="Sentencias">Sentencias</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} (<a href="/es/Firefox/Releases/13">Firefox 13</a>) + + <ul> + <li>Funciona en terminos de <code>.iterator()</code> y <code>.next()</code> (<a href="/es/Firefox/Releases/17">Firefox 17</a>)</li> + <li>Usa la propiedad <code>"@@iterator"</code> (<a href="/es/Firefox/Releases/27">Firefox 27</a>)</li> + <li>Usa la propiedad <code>Symbol.iterator</code> (<a href="/es/Firefox/Releases/36">Firefox 36</a>)</li> + </ul> + </li> +</ul> + +<h2 id="Funciones">Funciones</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parametros Rest</a> (<a href="/es/Firefox/Releases/15">Firefox 15</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/default_parameters">Parametros por Defecto o predeterminados</a> (<a href="/es/Firefox/Releases/15">Firefox 15</a>) + <ul> + <li>Parámetros sin valores predeterminados después de los parámetros predeterminados (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Functions/Default_parameters#Destructured_parameter_with_default_value_assignment" title="Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.">Parámetros desestructurados con asignación de valor predeterminada</a> (<a href="/es/Firefox/Releases/41">Firefox 41</a>)</li> + </ul> + </li> + <li><a href="/es/docs/Web/JavaScript/Reference/arrow_functions">Funciones flecha</a> (<a href="/es/Firefox/Releases/22">Firefox 22</a>)</li> + <li>{{jsxref("Statements/function*", "Generator function")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>) + <ul> + <li>{{jsxref("Operators/yield", "yield")}} (<a href="/es/Firefox/Releases/26">Firefox 26</a>)</li> + <li>{{jsxref("Operators/yield*", "yield*")}} (<a href="/es/Firefox/Releases/27">Firefox 27</a>)</li> + </ul> + </li> + <li>{{jsxref("Functions/arguments/@@iterator", "arguments[@@iterator]")}} (<a href="/es/Firefox/Releases/46">Firefox 46</a>)</li> +</ul> + +<h2 id="Otras_características">Otras características</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Literales numéricos binarios y octales</a> (<a href="/es/Firefox/Releases/25">Firefox 25</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/template_strings">Plantillas de strings</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Property_definitions">Inicializador de objetos: nombres de propiedades abreviadas</a> (<a href="/es/Firefox/Releases/33">Firefox 33</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Inicializador de objetos: nombres de propiedades computados</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Method_definitions">Inicializador de objetos: nombres de métodos abreviados</a> (<a href="/es/Firefox/Releases/34">Firefox 34</a>)</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">ECMAScript Next support in Mozilla</a></li> + <li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts">ECMAScript 2015 specification drafts</a></li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=694100">Mozilla ES2015 tracking bug</a></li> + <li><a href="http://kangax.github.io/es5-compat-table/es6" title="http://kangax.github.io/es5-compat-table">ECMAScript 2015 support across browsers</a></li> +</ul> diff --git a/files/es/web/javascript/novedades_en_javascript/index.html b/files/es/web/javascript/novedades_en_javascript/index.html new file mode 100644 index 0000000000..9217bc92c6 --- /dev/null +++ b/files/es/web/javascript/novedades_en_javascript/index.html @@ -0,0 +1,81 @@ +--- +title: Novedades en JavaScript +slug: Web/JavaScript/Novedades_en_JavaScript +tags: + - JavaScript + - Novedades + - Versiones +translation_of: Archive/Web/JavaScript/New_in_JavaScript +--- +<div>{{jsSidebar("New_in_JS")}}</div> + +<p>Este capítulo contiene información del historial de versiones de JavaScript y su estatus de implementación en aplicaciones basadas en JavaScript de Mozilla/SpiderMonkey (como Firefox)</p> + +<h2 id="Versiones_ECMAScript">Versiones ECMAScript</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Language_Resources">Recursos del Lenguaje</a></dt> + <dd>Aprende más acerca de los estándares ECMAscript en los que el lenguaje JavaScript está basado.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">Soporte ECMAScript 5</a></dt> + <dd>Estatus de la implementación del estandar actual ECMA-262 (Edición 5.1) en aquellos productos y sistemas basados en Mozilla.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">Soporte ECMAScript 6</a></dt> + <dd>Estatus de la implementación del estandar en proceso de incorporación ECMA-262 (Edición 6) en aquellos productos y sistemas basados en Mozilla.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_7_support_in_Mozilla">Soporte ECMAScript 7</a></dt> + <dd>Estatus de la implementación del estandar próximo ECMA-262 (Edición 7) en aquellos productos y sistemas basados en Mozilla.</dd> +</dl> + +<h2 id="Notas_de_Lanzamiento_de_JavaScript">Notas de Lanzamiento de JavaScript</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/Firefox_JavaScript_changelog">Bitácora de cambios (changelog) de JavaScript en Firefox</a></dt> + <dd>Vea esta bitácora de cambios (changelog) para mayor información de las características y funcionalidades implementadas a partir de Firefox 5.</dd> + <dt>Bitácora de Cambios (Changelog) de JavaScript en Chrome</dt> + <dd>(PENDIENTE) Vea esta bitácora de cambios (changelog) para mayor información de las características y funcionalidades implementadas en Chrome.</dd> +</dl> + +<h2 id="Versiones_JavaScript">Versiones JavaScript</h2> + +<p><strong>Deprecated</strong> ({{deprecated_inline()}}). The explicit versioning and opt-in of language features was Mozilla-specific and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=867609">is in process of being removed</a>. Firefox 4 was the last version which referred to an JavaScript version (1.8.5). With new ECMA standards, JavaScript language features are now often mentioned with their initial definition in ECMA-262 Editions such as Edition 6 (ES6).</p> + +<p>JavaScript was released as version 1.0 in March 1996 in Netscape Navigator 2.0 and Internet Explorer 2.0.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.1">JavaScript 1.1</a></dt> + <dd>Version shipped in Netscape Navigator 3.0. Released on August 19, 1996.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.2">JavaScript 1.2</a></dt> + <dd>Version shipped in Netscape Navigator 4.0-4.05. Released on June 11, 1997.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.3">JavaScript 1.3</a></dt> + <dd>Version shipped in Netscape Navigator 4.06-4.7x. Released on October 19, 1998.<br> + Standardization work to be compliant with ECMA-262 1st and 2nd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.4">JavaScript 1.4</a></dt> + <dd>Version shipped in Netscape's server side JavaScript. Released in 1999.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.5">JavaScript 1.5</a></dt> + <dd>Version shipped in Netscape Navigator 6.0 and Firefox 1.0. Release on November 14, 2000.<br> + Standardization work to be compliant with ECMA-262 3rd Edition.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.6">JavaScript 1.6</a></dt> + <dd>Version shipped in Firefox 1.5. Released in November 2005.<br> + Includes ECMAScript for XML (E4X), new <code>Array</code> methods plus <code>String</code> and <code>Array</code> generics.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JavaScript 1.7</a></dt> + <dd>Version shipped in Firefox 2. Released in October 2006.<br> + Includes generators, iterators, array comprehensions, <code>let</code> expressions, and destructuring assignment.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8">JavaScript 1.8</a></dt> + <dd>Version shipped in Firefox 3. Released in June 2008.<br> + Includes expression closures, generator expressions and <code>Array.reduce()</code></dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.1">JavaScript 1.8.1</a></dt> + <dd>Version shipped in Firefox 3.5. Released on <span class="st">June 30, 2009.<br> + Includes the TraceMonkey JIT and supports native JSON.</span></dd> + <dt>JavaScript 1.8.2</dt> + <dd>Version shipped in Firefox 3.6. Released June 22, 2009.<br> + Includes only minor changes.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.8.5">JavaScript 1.8.5</a></dt> + <dd>Version shipped in Firefox 4. Released July 27, 2010.<br> + Includes many new features for ECMA-262 Edition 5 compliance.<br> + This is the last JavaScript version.</dd> +</dl> + +<h2 id="Features_still_requiring_version_opt-in">Features still requiring version opt-in</h2> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code> statement</a></dt> + <dd>The <code>let</code> statement requires the JavaScript version 1.7 (or higher) opt-in. See {{bug(932517)}} and {{bug(932513)}}.</dd> +</dl> diff --git a/files/es/web/javascript/reference/errors/bad_octal/index.html b/files/es/web/javascript/reference/errors/bad_octal/index.html new file mode 100644 index 0000000000..b12b1bc346 --- /dev/null +++ b/files/es/web/javascript/reference/errors/bad_octal/index.html @@ -0,0 +1,45 @@ +--- +title: 'SyntaxError: "x" is not a legal ECMA-262 octal constant' +slug: Web/JavaScript/Reference/Errors/Bad_octal +translation_of: Web/JavaScript/Reference/Errors/Bad_octal +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">Warning: SyntaxError: 08 is not a legal ECMA-262 octal constant. +Warning: SyntaxError: 09 is not a legal ECMA-262 octal constant. +</pre> + +<h2 id="Tipo_de_Error">Tipo de Error</h2> + +<p>{{jsxref("SyntaxError")}} warning in <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a> only.</p> + +<h2 id="Que_salio_mal">Que salio mal ?</h2> + +<p><span id="result_box" lang="es"><span>Los literales decimales pueden comenzar con un cero (0) seguido de otro dígito decimal, pero Si todos los dígitos después del 0 inicial son más pequeños que 8, el número se interpreta como un número octal.</span> <span>Pero este no es el caso con 08 y 09, JavaScript advierte sobre ello.</span></span></p> + +<p><span id="result_box" lang="es"><span>Tenga en cuenta que las literales octales y las secuencias de escape octal están obsoletas y presentarán una advertencia de depreciación adicional.</span> <span>Con ECMAScript 6 y posteriores, la sintaxis utiliza un cero a la izquierda seguido de una letra latina en minúscula o mayúscula "O" (0o o 0O).</span> <span>Consulte la página sobre gramática léxica para obtener más información.</span></span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Numeros_octales_invalidos">Numeros octales invalidos</h3> + +<pre class="brush: js example-bad">08; +09; +// SyntaxError: 08 is not a legal ECMA-262 octal constant +// SyntaxError: octal literals and octal escape sequences are deprecated</pre> + +<h3 id="Números_octales_válidos"><span class="short_text" id="result_box" lang="es"><span>Números octales válidos</span></span></h3> + +<p><span class="short_text" id="result_box" lang="es"><span>Utilice el cero inicialmente seguido de la letra "o";</span></span></p> + +<pre class="brush: js example-good">0O755; +0o644; +</pre> + +<h2 id="Ver_Tambien">Ver Tambien</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Octal">Gramatica lexica</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html b/files/es/web/javascript/reference/errors/caracter_ilegal/index.html new file mode 100644 index 0000000000..cc9422a21d --- /dev/null +++ b/files/es/web/javascript/reference/errors/caracter_ilegal/index.html @@ -0,0 +1,83 @@ +--- +title: 'ErrorDeSintaxis: Caracter ilegal' +slug: Web/JavaScript/Reference/Errors/caracter_ilegal +tags: + - Error + - Error de sintaxis + - JavaScript + - SyntaxError + - errores +translation_of: Web/JavaScript/Reference/Errors/Illegal_character +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: illegal character (Firefox) +SyntaxError: Invalid or unexpected token (Chrome)</pre> + +<pre class="syntaxbox">ErrorDeSintasix: Carácter ilegal (Firefox) +ErrorDeSintasix: Componente léxico inválido o inesperado (Chrome) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}} {{jsxref("ErrorDeSintaxis")}}</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>Hay un componente léxico inválido o inesperado que no pertenece a su posición en el código. Utilice un editor que soporte el resaltado de sintaxis y que revise cuidadosamente su código contra discrepancias como un signo menos (<code> - </code>) contra un guion (<code> – </code>) o comillas simples (<code> " </code>) contra comillas no estándar (<code> “ </code>).</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Caracteres_no_coincidentes">Caracteres no coincidentes</h3> + +<p>Algunos caracteres parecen iguales, pero hará que el analizador falle al interpretar su código.</p> + +<pre class="brush: js example-bad">“Esto parece una cadena de caracteres”; +<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code> +// ErrorDeSintaxis: Carácter ilegal + +42 – 13; +<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code> +// ErrorDeSintaxis: Carácter ilegal +</pre> + +<p>Esto debería funcionar:</p> + +<pre class="brush: js example-good">"Esto en realidad es una cadena de caracteres"; + +42 - 13; +</pre> + +<h3 id="Caracteres_olvidados">Caracteres olvidados</h3> + +<p>Es fácil olvidar caracteres aquí o allí.</p> + +<pre class="brush: js example-bad">var colors = ['#000', #333', '#666']; +<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code> +// ErrorDeSintaxis: Carácter ilegal +</pre> + +<p>Agregue la comilla olvidada para <code><strong>'</strong>#333'</code>.</p> + +<pre class="brush: js example-good">var colors = ['#000', '#333', '#666'];</pre> + +<h3 id="Caracteres_escondidos">Caracteres escondidos</h3> + +<p>Cuando copia y pega un código de una fuente externa, puede haber caracteres inválidos. ¡Cuidado!</p> + +<pre class="brush: js example-bad">var foo = 'bar'; +<code class="language-js"><span class="comment token">// SyntaxError: illegal character</span></code> +// ErrorDeSintaxis: Carácter ilegal +</pre> + +<p>Al inspeccionar este código en un editor como Vim, puede ver que en realidad hay un carácter de <a href="https://en.wikipedia.org/wiki/Zero-width_space">espacio de ancho cero (ZWSP) (U+200B)</a>.</p> + +<pre class="brush: js">var foo = 'bar';<200b></pre> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Gramática léxica</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html b/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html new file mode 100644 index 0000000000..bd44b0ed7c --- /dev/null +++ b/files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html @@ -0,0 +1,57 @@ +--- +title: >- + SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# + instead +slug: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma +tags: + - Error + - Fuente + - JavaScript +translation_of: Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">Advertencia: Error de Sintaxis al utilizar //@ para indicar el código fuente de la URL esta obsoleto. En su lugar use //#. + +Advertencia: Error de Sintaxis: al utilizar //@ para indicar el mapeo de programas del código fuente de la URL esta obsoleto. En su lugar use //#. +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>Una advertencia ocurrida como esta {{jsxref("SyntaxError")}}. JavaScript no se detendrá.</p> + +<h2 id="Descripción_del_error">Descripción del error</h2> + +<p>Esta es una sintaxis obsoleta del codigo fuente de mapa en JavaScript.</p> + +<p>Las sintaxis de código fuente de mapa en JavaScript se suelen combinar y minificar para hacer que la entrega desde el servidor sea más eficiente. Con los códigos de origen de mapas, el depurador puede asignar el código que se está ejecutando a los archivos de origen.</p> + +<p>La especificación de mapa de código fuente cambió la sintaxis debido a un conflicto con IE con la versión windows 8.x siempre que se encontró en la página. Despues <code> //@cc_on</code> fue interpretado para activar la compilación condicional en el motor IE JScript. <a href="https://docs.microsoft.com/en-us/scripting/javascript/reference/at-cc-on-statement-javascript">El comentario de compilación condicional</a> en IE es una característica poco conocida, pero rompió mapas de fuente de origen con <a href="https://bugs.jquery.com/ticket/13274">jQuery</a> y otras bibliotecas.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Sintaxis_obsoleta">Sintaxis obsoleta</h3> + +<p>Sintaxis con el signo obsoleto "@".</p> + +<pre class="brush: js example-bad">//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map +</pre> + +<h3 id="Sintaxis_estándar">Sintaxis estándar</h3> + +<p>En su lugar use el signo "#".</p> + +<pre class="brush: js example-good">//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</pre> + +<p>O, alternativamente, puede establecer un encabezado en su archivo JavaScript para evitar tener un comentario de error de sintaxis:</p> + +<pre class="brush: js example-good">X-SourceMap: /path/to/file.js.map</pre> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Como utilizar un mapa de Fuentes - Documentación de Herramientas de Firefox</a><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map"> </a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Introducción a las fuentes – HTML5 rocks</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html b/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html new file mode 100644 index 0000000000..c03cb15dd2 --- /dev/null +++ b/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html @@ -0,0 +1,72 @@ +--- +title: 'ErrordeSintaxis: Punto y coma ; faltante antes de la declaracion' +slug: Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion +tags: + - JavaScript + - errores + - errorsintaxis + - puntoycoma +translation_of: Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +--- +<div>{{jsSidebar("Errores")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">Error de Sintaxis: Punto y coma ; faltante antes de la declaración +</pre> + +<h2 id="Tipo_de_Error">Tipo de Error</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="¿Qué_salio_mal">¿Qué salio mal?</h2> + +<p>Hay un punto y coma (<code>;</code>) faltando en alguna parte. Las declaraciones Javascript deben terminar con punto y coma. Algunas de ellas son afectadas por la inserción automática<a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion"> (ASI)</a>, pero en este caso necesitas colocar un punto y coma, de esta forma Javascript puede analizar el código fuente de forma correcta.</p> + +<p>Sin embargo, algunas veces, este error es solo una consecuencia de otro error, como no separar las cadenas de texto correctamente, o usar <em>var</em> incorrectamente. Tal vez tengas muchos paréntesis en algún lugar. Revisa cuidadosamente la sintaxis cuando este error es lanzado.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Cadenas_de_texto_(strings)_sin_terminar">Cadenas de texto (strings) sin terminar</h3> + +<p>Este error puede pasar fácilmente cuando no se colocan las comillas correctamente y el motor de JavaScript esta esperando el final de la cadena. por ejemplo:</p> + +<pre class="brush: js example-bad">var foo = 'El bar de Tom's'; +// Error de Sintaxis: Punto y coma ; faltante antes de la declaración</pre> + +<p>En este caso se pueden usar comillas dobles para escapar del apóstrofe:</p> + +<pre class="brush: js example-good">var foo = "El bar de Tom's"; +var foo = 'El bar de Tom\'s'; +</pre> + +<div class="note"> +<p>Nota: Este error suele pasar frecuentemene con cadenas del idioma Inglés</p> +</div> + +<h3 id="Declarar_propiedades_con_var">Declarar propiedades con var</h3> + +<p><strong>No se pueden</strong> declarar propiedades de un objeto o arreglo con una declaración <code>var</code></p> + +<pre class="brush: js example-bad">var obj = {}; +var obj.foo = 'hola'; // Error de Sintaxis: Punto y coma ; faltante antes de la declaración + +var array = []; +var array[0] = 'mundo'; // Error de Sintaxis: Punto y coma ; faltante antes de la declaración +</pre> + +<p>En vez de esto. omitamos la palabra <code>var</code>:</p> + +<pre class="brush: js example-good">var obj = {}; +obj.foo = 'hola'; + +var array = []; +array[0] = 'mundo'; +</pre> + +<h2 id="Ver_también">Ver también:</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">Automatic semicolon insertion (ASI)</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/in_operator_no_object/index.html b/files/es/web/javascript/reference/errors/in_operator_no_object/index.html new file mode 100644 index 0000000000..d2a549f48a --- /dev/null +++ b/files/es/web/javascript/reference/errors/in_operator_no_object/index.html @@ -0,0 +1,71 @@ +--- +title: 'TypeError: cannot use ''in'' operator to search for ''x'' in ''y''' +slug: Web/JavaScript/Reference/Errors/in_operator_no_object +tags: + - Error + - JavaScript + - TiposError + - TypeError + - errores +translation_of: Web/JavaScript/Reference/Errors/in_operator_no_object +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">TypeError: cannot use 'in' operator to search for 'x' in 'y' (Firefox, Chrome) +</pre> + +<h2 id="Tipo_de_Error">Tipo de Error</h2> + +<p>{{jsxref("TypeError")}}</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code> </a>puede ser usado sólo para verificar si una propiedad se encuentra en un objeto. No puede buscar en cadenas de caracteres, o en números, u otro tipo primitivo.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Buscando_en_cadenas_de_caracteres">Buscando en cadenas de caracteres</h3> + +<p>A diferencia de otros lenguajes de programación (ej. Python), no puede buscar cadenas de texto usando el<a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"> operator</a> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code></a>.</p> + +<pre class="brush: js example-bad">"Hello" in "Hello World"; +// TypeError: cannot use 'in' operator to search for 'Hello' in 'Hello World'</pre> + +<p>En su lugar, deberá usar {{jsxref("String.prototype.indexOf()")}}, por ejemplo.</p> + +<pre class="brush: js example-good">"Hello World".indexOf("Hello") !== -1; +// true</pre> + +<h3 id="El_operando_no_puede_ser_null_o_undefined">El operando no puede ser <code>null</code> o <code>undefined</code></h3> + +<p>Asegúrese que el objeto que está inspeccionando no sea {{jsxref("null")}} o {{jsxref("undefined")}}.</p> + +<pre class="brush: js example-bad">var foo = null; +"bar" in foo; +// TypeError: cannot use 'in' operator to search for 'bar' in 'foo' +</pre> + +<p>El operador <code>in</code> siempre espera un objeto.</p> + +<pre class="brush: js example-good">var foo = { baz: "bar" }; +"bar" in foo; // false + +"PI" in Math; // true +"pi" in Math; // false +</pre> + +<h3 id="Buscando_en_arreglos">Buscando en arreglos</h3> + +<p>Tenga cuidado cuando use el operador <code>in</code> para buscar en objetos {{jsxref("Array")}}. El operador <code>in</code> verifica el índice numérico, no el valor de dicho índice.</p> + +<pre class="brush: js">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +3 in trees; // true +"oak" in trees; // false</pre> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/index.html b/files/es/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c752aa10c6 --- /dev/null +++ b/files/es/web/javascript/reference/errors/index.html @@ -0,0 +1,29 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Depuración + - Error + - Excepciones + - Excepción + - JavaScript + - errores +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Abajo encontraras una lista de los errores que son generados por JavaScript. Estos errores pueden ser una ayuda útil al depurar, aunque el problema reportado no siempre es precisamente claro. Las paginas de abajo proporcionan detalles adicionales sobre estos errores. Cada error es un objeto basado en el objeto {{jsxref("Error")}} , y tiene un <code>nombre</code> y un <code>mensaje</code>.</p> + +<p>Los errores mostrados en la consola web pueden incluir un link a la pagina debajo correspondiente para ayudarte a comprender rápidamente el problema en tu código.</p> + +<h2 id="Lista_de_errores">Lista de errores</h2> + +<p>En esta lista, cada pagina esta ordenada por nombre (el tipo de error) y el mensaje (un mensaje de error mas detallado y legible). Juntos,estas dos propiedades proveen un punto de partida hacia el entendimiento y la resolución del problema. Para mas información, ¡Sigue los links abajo!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">¿Qué salió mal? Solucionando Javascript</a>: El tutorial introductorio para principiantes sobre la reparación en errores de JavaScript.</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html b/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html new file mode 100644 index 0000000000..3bb05d9b89 --- /dev/null +++ b/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html @@ -0,0 +1,113 @@ +--- +title: 'SyntaxError: indicador de expresión regular no válido "x"' +slug: Web/JavaScript/Reference/Errors/Indicador_regexp_no-val +tags: + - Error + - Error de sintaxis + - JavaScript + - SyntaxError +translation_of: Web/JavaScript/Reference/Errors/Bad_regexp_flag +--- +<div>{{jsSidebar("Errors", "Errores")}}</div> + +<p>La excepción de JavaScript "indicador de expresión regular no válido" se produce cuando las indicadores, definidas después de la segunda barra en la expresión regular literal, no son de <code>g</code>, <code>i</code>, <code>m</code>, <code>s</code>, <code>u</code> o <code>y</code>.</p> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox notranslate">SyntaxError: error de sintaxis en la expresión regular (Edge) +SyntaxError: marca de expresión regular no válida "x" (Firefox) +SyntaxError: indicadores de expresión regular no válidos (Chrome) +</pre> + +<h2 id="Tipo_Error">Tipo <code>Error</code></h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>Hay indicadores de expresión regular no válidos en el código. En una expresión regular literal, que consiste en un patrón encerrado entre barras, los indicadores se definen después de la segunda barra. También se pueden definir en la función constructora del objeto {{jsxref("RegExp")}} (segundo parámetro). Los indicadores de expresión regular se pueden usar por separado o juntos en cualquier orden, pero solo hay seis de ellos en ECMAScript.</p> + +<p>Para incluir una bandera con la expresión regular, usa esta sintaxis:</p> + +<pre class="brush: js notranslate">var re = /patrón/indicadores; +</pre> + +<p>o</p> + +<pre class="brush: js notranslate">var re = new RegExp('patrón', 'indicadores');</pre> + +<table class="standard-table"> + <caption>Indicadores de expresión regular</caption> + <thead> + <tr> + <th scope="col">Bandera</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>g</code></td> + <td>Búsqueda global.</td> + </tr> + <tr> + <td>i</td> + <td>Búsqueda que no distingue entre mayúsculas y minúsculas.</td> + </tr> + <tr> + <td>m</td> + <td>Búsqueda multilínea.</td> + </tr> + <tr> + <td>s</td> + <td>Permite que el punto (<code>.</code>) coincida con las nuevas líneas (agregado en ECMAScript 2018)</td> + </tr> + <tr> + <td>u</td> + <td>Unicode; trata el patrón como una secuencia de puntos de código Unicode</td> + </tr> + <tr> + <td>y</td> + <td>Realiza una búsqueda "pegajosa" que coincida a partir de la posición actual en la cadena de destino. Consulta {{jsxref("RegExp.sticky", "sticky")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Solo hay seis indicadores de expresión regular válidos.</p> + +<pre class="brush: js example-bad notranslate">/foo/bar; + +// SyntaxError: indicador de expresión regular no válido "b" +</pre> + +<p>¿Tenías la intención de crear una expresión regular? Una expresión que contiene dos barras se interpreta como una expresión regular literal.</p> + +<pre class="brush: js example-bad notranslate">let obj = { + url: /docs/Web +}; + +// SyntaxError: indicador de expresión regular no válido "W" +</pre> + +<p>¿O pretendías crear una cadena en su lugar? Agrega comillas simples o dobles para crear una cadena literal.</p> + +<pre class="brush: js example-good notranslate">let obj = { + url: '/docs/Web' +};</pre> + +<h3 id="Indicadores_de_expresión_regular_válidos">Indicadores de expresión regular válidos</h3> + +<p>Consulta la tabla anterior para ver las seis marcas de expresiones regulares válidas que están permitidas en JavaScript.</p> + +<pre class="brush: js example-good notranslate">/foo/g; +/foo/gims; +/foo/uy; +</pre> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{JSxRef("../Guide/Regular_Expressions", "Expresiones regulares")}}</li> + <li><a href="http://xregexp.com/flags/">Indicadores de RegEx</a> – biblioteca de expresiones regulares que proporciona cuatro nuevos indicadores (<code>n</code>, <code>s</code>, <code>x</code>, <code>A</code>)</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/invalid_array_length/index.html b/files/es/web/javascript/reference/errors/invalid_array_length/index.html new file mode 100644 index 0000000000..f0665e5e7f --- /dev/null +++ b/files/es/web/javascript/reference/errors/invalid_array_length/index.html @@ -0,0 +1,78 @@ +--- +title: 'RangeError: invalid array length' +slug: Web/JavaScript/Reference/Errors/Invalid_array_length +tags: + - Array + - JavaScript + - RangeError + - errores +translation_of: Web/JavaScript/Reference/Errors/Invalid_array_length +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">RangeError: invalid array length (Firefox) +RangeError: Invalid array length (Chrome) +RangeError: Invalid array buffer length (Chrome) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2> + +<p>Una longitud de array inválida puede presentarse en éstas situaciones:</p> + +<ul> + <li>Cuando se crea un {{jsxref("Array")}} o un {{jsxref("ArrayBuffer")}} el cual tiene una longitud negativa o es igual o mayor a 2<sup>32</sup>, o</li> + <li>cuando se define la propiedad {{jsxref("Array.length")}} a un valor el cual es negativo o es igual o mayor a 2<sup>32</sup>.</li> +</ul> + +<p>¿Por qué el <code>Array</code> y <code>ArrayBuffer</code> tienen longitud limitada? La propiedad de longitud de un <code>Array</code> o un <code>ArrayBuffer</code> está representada con un entero sin signo de 32 bits, el cual sólo puede almacenar valores que estén en el rango de 0 a 2<sup>32</sup>-1.</p> + +<p>Si estás creando un <code>Array</code> usando el constructor, es mejor que utilices la notación literal, ya que el primer argumento es interpretado como la longitud del <code>Array</code>.</p> + +<p>De lo contrario, puedes <span class="_Tgc">especificar</span> un mínimo y un máximo para la longitud antes de definir la propiedad de longitud, o puedes usarla como el argumento del constructor.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_inválidos">Casos inválidos</h3> + +<pre class="brush: js example-bad">new Array(Math.pow(2, 40)) +new Array(-1) +new ArrayBuffer(Math.pow(2, 32)) +new ArrayBuffer(-1) + +let a = []; +a.length = a.length - 1; // definir la propiedad de longitud a -1 + +let b = new Array(Math.pow(2, 32) - 1); +b.length = b.length + 1; // definir la propiedad de longitud a 2^32 +</pre> + +<h3 id="Casos_válidos">Casos válidos</h3> + +<pre class="brush: js example-good">[ Math.pow(2, 40) ] // [ 1099511627776 ] +[ -1 ] // [ -1 ] +new ArrayBuffer(Math.pow(2, 32) - 1) +new ArrayBuffer(0) + +let a = []; +a.length = Math.max(0, a.length - 1); + +let b = new Array(Math.pow(2, 32) - 1); +b.length = Math.min(0xffffffff, b.length + 1); + +// 0xffffffff es la notación hexadecimal de 2^32 - 1 +// el cual también se puede especificar como (-1 >>> 0) +</pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.length")}}</li> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/invalid_date/index.html b/files/es/web/javascript/reference/errors/invalid_date/index.html new file mode 100644 index 0000000000..f8036e83e2 --- /dev/null +++ b/files/es/web/javascript/reference/errors/invalid_date/index.html @@ -0,0 +1,58 @@ +--- +title: 'RangeError: invalid date' +slug: Web/JavaScript/Reference/Errors/Invalid_date +tags: + - ErrorDeRango + - JavaScript + - errores +translation_of: Web/JavaScript/Reference/Errors/Invalid_date +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">RangeError: invalid date (Firefox) +RangeError: invalid time value (Chrome) +RangeError: Provided date is not in valid range (Chrome) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="¿Cuál_es_el_problemaEdit">¿Cuál es el problema?<a class="button section-edit only-icon" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Errors/Invalid_array_length$edit#¿Cuál_es_el_problema" rel="nofollow, noindex"><span>Edit</span></a></h2> + +<p><span id="noHighlight_0.5046278067977897">Se ha proporcionado una cadena con una fecha no válida para </span>{{jsxref("Date")}} o {{jsxref("Date.parse()")}}.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_no_válidos">Casos no válidos</h3> + +<div class="textArea" id="destText" style="direction: ltr;"> +<div><span id="noHighlight_0.47667740970902406">Las cadenas o fechas irreconocibles que contienen valores de elementos ilegales en cadenas con formato ISO suelen devolver {{jsxref("Nan")}}. Sin embargo, dependiendo de la implementación, las cadenas de formato ISO no conformes, también pueden lanzar </span><code>RangeError: invalid date</code><span>, como los siguientes casos en Firefox:</span></div> + +<div> </div> +</div> + +<pre class="brush: js example-bad">new Date('foo-bar 2014'); +new Date('2014-25-23').toISOString(); +new Date('foo-bar 2014').toString(); +</pre> + +<p>Esto, sin embargo, devuelve {{jsxref("NaN")}} en Firefox:</p> + +<pre class="brush: js example-bad">Date.parse('foo-bar 2014'); // NaN</pre> + +<p>Para más información, consulte la documentación de {{jsxref("Date.parse()")}}.</p> + +<h3 id="Casos_válidos">Casos válidos</h3> + +<pre class="brush: js example-good">new Date('05 October 2011 14:48 UTC');</pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("Date.prototype.parse()")}}</li> + <li>{{jsxref("Date.prototype.toISOString()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html b/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html new file mode 100644 index 0000000000..b4139e8269 --- /dev/null +++ b/files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html @@ -0,0 +1,60 @@ +--- +title: 'SyntaxError: Malformed formal parameter' +slug: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +tags: + - JavaScript + - SyntaxError + - errores +translation_of: Web/JavaScript/Reference/Errors/Malformed_formal_parameter +--- +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: Expected {x} (Edge) +SyntaxError: malformed formal parameter (Firefox) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Qué_salió_mal"><span class="tlid-translation translation" lang="es"><span title="">¿Qué salió mal?</span></span></h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">Hay un constructor <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function()</code> </a>con al menos dos argumentos pasados en el código.</span> <span title="">El último argumento es el código fuente de la nueva función que está creando.</span> <span title="">Todo lo demás forma la lista de argumentos de su nueva función.</span><br> + <br> + <span title="">La lista de argumentos no es válida de alguna manera.</span> <span title="">Quizás eligió accidentalmente una palabra clave como <code>if</code> o <code>var</code> como nombre de argumento, o tal vez haya algún signo de puntuación en su lista de argumentos.</span> <span title="">O tal vez accidentalmente pasó un valor no válido, como un número u objeto.</span></span></p> + +<h2 id="OK_eso_solucionó_mi_problema._Pero_¿Por_qué_no_dijiste_eso_en_primer_lugar"><span class="tlid-translation translation" lang="es"><span title="">OK, eso solucionó mi problema.</span> <span title="">Pero, ¿Por qué no dijiste eso en primer lugar?</span></span></h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">Es cierto que la redacción del mensaje de error es un poco extraña.</span> <span title="">El "parámetro formal" es una forma elegante de decir "argumento de función".</span> <span title="">Y usamos la palabra "malformada" porque todos los ingenieros de Firefox son grandes admiradores de las novelas de terror góticas del siglo XIX.</span></span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_no_validos">Casos no validos</h3> + +<pre class="brush: js example-bad">var f = Function('x y', 'return x + y;'); +// SyntaxError (<span class="tlid-translation translation" lang="es"><span title="">Falta una coma</span></span>) + +var f = Function('x,', 'return x;'); +// SyntaxError (Coma extraña) + +var f = Function(37, "alert('OK')"); +// SyntaxError (Números no pueden ser nombres de argumentos) +</pre> + +<h3 id="Casos_validos">Casos validos</h3> + +<pre class="brush: js example-good">var f = Function('x, y', 'return x + y;'); // Correctamente puntuado + +var f = Function('x', 'return x;'); + +// Si puede, evite usar Function - Esto es mucho más rápido +var f = function(x) { return x; }; +</pre> + +<h2 id="Ver_tambien">Ver tambien</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Sobre functions</a></li> + <li><a href="https://www.gutenberg.org/ebooks/84"><em>Frankenstein</em> por Mary Wollstonecraft Shelley, texto completo en línea</a> <span class="tlid-translation translation" lang="es"><span title="">("Maldito (aunque me maldiga a mí mismo) ¡sé las manos que te formaron! Me has hecho miserable más allá de toda expresión. No me has dejado ningún poder para considerar si soy justo para ti o no. ¡Fuera! Aléjame de la vista de tu</span> <span title="">forma detestada ")</span></span></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html b/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html new file mode 100644 index 0000000000..b846b70c9f --- /dev/null +++ b/files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html @@ -0,0 +1,47 @@ +--- +title: 'SyntaxError: missing } after property list' +slug: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +translation_of: Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: missing } after property list +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Que_estuvo_mal">¿Que estuvo mal?</h2> + +<p>Es un error de sinaxis en algún lugar en el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer</a>. Prodría provocarse debido a la falta de una llave, pero, por ejemplo tambien por falta de alguna coma. Tambien verifique si alguna llave o parentesis se encuentra en el orden correcto. Indentar o darle un buen formato al codido puede ayudarlo a observar mejor el error.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Olvido_de_coma">Olvido de coma</h3> + +<p>Algunas veces, hace faltan las comas en codigo inicial del proyecto, he aquí un ejemplo:</p> + +<pre class="brush: js example-bad">var obj = { + a: 1, + b: { myProp: 2 } + c: 3 +}; +</pre> + +<p>La correción podría ser:</p> + +<pre class="brush: js example-good">var obj = { + a: 1, + b: { myProp: 2 }, + c: 3 +}; +</pre> + +<h2 id="Observe_Tambien">Observe Tambien</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/errors/missing_formal_parameter/index.html b/files/es/web/javascript/reference/errors/missing_formal_parameter/index.html new file mode 100644 index 0000000000..8ea7e3684a --- /dev/null +++ b/files/es/web/javascript/reference/errors/missing_formal_parameter/index.html @@ -0,0 +1,75 @@ +--- +title: 'SyntaxError: missing formal parameter' +slug: Web/JavaScript/Reference/Errors/Missing_formal_parameter +translation_of: Web/JavaScript/Reference/Errors/Missing_formal_parameter +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: missing formal parameter (Firefox) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Que_es_lo_que_fue_mal">¿Que es lo que fue mal?</h2> + +<p>"Formal parameter" es una forma adornada de decir "parámetro de función". Tu declaración de funcion carece de parámetros válidos. En la declaración de la función, los parámetros deben ser {{Glossary("Identifier", "identifiers")}}, no ningún valor cómo números, cadenas, o objetos. Declarar las funciones y invocarlas son dos pasos distindos. La declaración sólo requiere identificador/es. Es en la invocación que asignas los valores.</p> + +<p>En {{glossary("JavaScript")}}, los indentificadosres sólo pueden contener carácteres alfanuméricos (o "$" y "_"), no pueden comenzar por número. Un identificador difiere de una <strong>cadena</strong> en que la cadena son datos, mientras que lo primero es parte del código.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Los parámetros de función deben ser identificadores cuando creas la función. Todas estas declaraciones fallan, ya que proveen parámetros:</p> + +<pre class="brush: js example-bad highlight:[1,6,11]">function square(3) { + return number * number; +}; +// SyntaxError: missing formal parameter + +function greet("Howdy") { + return greeting; +}; +// SyntaxError: missing formal parameter + +function log({ obj: "value"}) { + console.log(arg) +}; +// SyntaxError: missing formal parameter +</pre> + +<p>Necesitarás usar identificadores en las funciones:</p> + +<pre class="brush: js example-good highlight:[1,5,9]">function square(number) { + return number * number; +}; + +function greet(greeting) { + return greeting; +}; + +function log(arg) { + console.log(arg) +};</pre> + +<p>Entonces podrás invocarlas con argumentos a tu gusto:</p> + +<pre class="brush: js">square(2); // 4 + +greet("Howdy"); // "Howdy" + +log({obj: "value"}); // Object { obj: "value" } +</pre> + +<h2 id="También_interesante">También interesante</h2> + +<ul> + <li>Otros errores relacionados con parámetros formales: + <ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter">SyntaxError: Malformed formal parameter</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li> + </ul> + </li> +</ul> diff --git a/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html b/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html new file mode 100644 index 0000000000..4b72369e87 --- /dev/null +++ b/files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html @@ -0,0 +1,51 @@ +--- +title: 'SyntaxError: missing ) after argument list' +slug: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +translation_of: Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: missing ) after argument list +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2> + +<p>Hay un error en cómo la función es llamada. Esto puede ser un typo, la falta de un operador, o un string no escapado, por ejemplo.</p> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>Debido a que no se encuentra el operador "<code>+</code>" para concatenar el string, JavaScript espera que el argumento de la función <code>log</code> sea solo <code>"PI: "</code>. En tal caso, debería terminar con el paréntesis de cierre.</p> + +<pre class="brush: js example-bad">console.log('PI: ' Math.PI); +// SyntaxError: missing ) after argument list +</pre> + +<p>Puedes corregir la llamada del <code>log</code>, agregando el operador "<code>+</code>":</p> + +<pre class="brush: js example-good">console.log('PI: ' + Math.PI); +// "PI: 3.141592653589793"</pre> + + + +<h3 id="Strings_sin_cierre">Strings sin cierre</h3> + +<pre class="brush: js example-bad">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"); +// SyntaxError: missing ) after argument list +</pre> + +<p>Aquí JavaScript piensa que tienes <code>);</code> dentro del string y lo ignora, y termina no sabiendo que quisiste utilizar <code>);</code> para cerrar la función <code>console.log</code>. Para solucionar esto, podemos poner un <code>'</code> después del string "Script":</p> + +<pre class="brush: js example-good">console.log('"Java" + "Script" = \"' + 'Java' + 'Script\"'); +// '"Java" + "Script" = "JavaScript"'</pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Guide/Funciones">Funciones</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/more_arguments_needed/index.html b/files/es/web/javascript/reference/errors/more_arguments_needed/index.html new file mode 100644 index 0000000000..fd392c5801 --- /dev/null +++ b/files/es/web/javascript/reference/errors/more_arguments_needed/index.html @@ -0,0 +1,51 @@ +--- +title: 'TypeError: More arguments needed' +slug: Web/JavaScript/Reference/Errors/More_arguments_needed +tags: + - Errors + - JavaScript + - Tipo de Error + - TypeError + - errores +translation_of: Web/JavaScript/Reference/Errors/More_arguments_needed +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensage">Mensage</h2> + +<pre class="syntaxbox">TypeError: argument is not an Object and is not null (Edge) +TypeError: Object.create necesita al menos 1 argumento, pero solo only 0 fueron aprovadas. +TypeError: Object.setPrototypeOf necesita al menos 2 argumentos, pero solo 0 fueron aprovados +TypeError: Object.defineProperties requires at least 1 argument, but only 0 were passed +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="¿Qué_fué_mal">¿Qué fué mal?</h2> + +<p>Hay un error con que una funcion es llamada. Más argumentos necesitan ser dados.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El método {{jsxref("Object.create()")}} necesita al menos un argumento y el método {{jsxref("Object.setPrototypeOf()")}} necesita al menos 2 argumentos.</p> + +<pre class="brush: js example-bad">var obj = Object.create(); +// TypeError: Object.create necesita al menos 1 argumento, pero ninguno fue aprovad + +var obj = Object.setPrototypeOf({}); +// TypeError: Object.setPrototypeOf requires at least 2 arguments, but only 1 were passed +</pre> + +<p>Puedes arreglar esto configurando {{jsxref("null")}} como el prototipo, por ejemplo:</p> + +<pre class="brush: js example-good">var obj = Object.create(null); + +var obj = Object.setPrototypeOf({}, null);</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Funciones</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/no_variable_name/index.html b/files/es/web/javascript/reference/errors/no_variable_name/index.html new file mode 100644 index 0000000000..4ff3b8090e --- /dev/null +++ b/files/es/web/javascript/reference/errors/no_variable_name/index.html @@ -0,0 +1,83 @@ +--- +title: 'SyntaxError: missing variable name' +slug: Web/JavaScript/Reference/Errors/No_variable_name +tags: + - Error + - Error de sintaxis + - errores +translation_of: Web/JavaScript/Reference/Errors/No_variable_name +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: missing variable name (Firefox) +SyntaxError: Unexpected token = (Chrome)</pre> + +<h2 id="Error">Error </h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Qué_anda_mal">¿Qué anda mal?</h2> + +<p>Una variable no tiene nombre. Esto es un error recurrente en el código. Probablemente una coma está mal colocada en algún lugar o nombraste mal una variable. Completamente entendible. Nombrar cosas es difícil.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Missing_a_variable_name">Missing a variable name</h3> + +<pre class="brush: js example-bad">var = "foo"; +</pre> + +<p>Es bueno nombrar buenas variables. Todos hemos estado así.</p> + +<pre class="brush: js example-good">var ohGodWhy = "foo";</pre> + +<h3 id="Palabras_reservadas_no_pueden_ser_nombre_de_variables">Palabras reservadas no pueden ser nombre de variables</h3> + +<p>Hay algunas palabras que son reservadas. No puedes usarlas para nombrar variables, lo siento :(</p> + +<pre class="brush: js example-bad">var debugger = "whoop"; +// SyntaxError: missing variable name +</pre> + +<h3 id="Declarar_multiples_variables">Declarar multiples variables</h3> + +<p>Toma especial atención a las comas cuando declaras multiples variables. ¿Hay un exceso de comas? ¿Accidentalmente añadiste comas en vez de punto y coma? </p> + +<pre class="brush: js example-bad">var x, y = "foo", +var x, = "foo" + +var first = document.getElementById('one'), +var second = document.getElementById('two'), + +// SyntaxError: missing variable name +</pre> + +<p>La versión arreglada:</p> + +<pre class="brush: js example-good">var x, y = "foo"; +var x = "foo"; + +var first = document.getElementById('one'); +var second = document.getElementById('two');</pre> + +<h3 id="Arrays">Arrays</h3> + +<p>{{jsxref("Array")}} literales en JavaScript necesitan corchetes alrededor de los valores. Esto no funciona:</p> + +<pre class="brush: js example-bad">var arr = 1,2,3,4,5; +// SyntaxError: missing variable name +</pre> + +<p>Esto es correcto:</p> + +<pre class="brush: js example-good">var arr = [1,2,3,4,5];</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="http://wiki.c2.com/?GoodVariableNames">Good variable names</a></li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Variable declarations in the JavaScript Guide</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/not_a_codepoint/index.html b/files/es/web/javascript/reference/errors/not_a_codepoint/index.html new file mode 100644 index 0000000000..0c89773f6b --- /dev/null +++ b/files/es/web/javascript/reference/errors/not_a_codepoint/index.html @@ -0,0 +1,51 @@ +--- +title: 'RangeError: argument is not a valid code point' +slug: Web/JavaScript/Reference/Errors/Not_a_codepoint +translation_of: Web/JavaScript/Reference/Errors/Not_a_codepoint +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox">RangeError: {0} is not a valid code point (Firefox) +RangeError: Invalid code point {0} (Chrome) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="¿Qué_estuvo_mal">¿Qué estuvo mal?</h2> + +<p>El metodo {{jsxref("String.fromCodePoint()")}} acepta solamente <em><strong>code point</strong></em> validos.</p> + +<p>Un <a href="https://en.wikipedia.org/wiki/Code_point">code point</a> es un valor en el conjunto de caracteres <a href="/es/docs/">Unicode</a>; esto es, un rango de enteros que va desde <code>0</code> a <code>0x10FFFF</code>.</p> + +<p>Usando valores {{jsxref("NaN")}}, enteros negativos (<code>-1</code>), no enteros (<code>3.14</code>), o valores mayores a <code>0x10FFFF</code> (<code>1114111</code>) no trabajarian con este metodo.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_invalidos">Casos invalidos</h3> + +<pre class="brush: js example-bad">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> + +<h3 id="Casos_validos">Casos validos</h3> + +<pre class="brush: js example-good">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" +</pre> + +<h2 id="Observe_tambien">Observe tambien</h2> + +<ul> + <li>{{jsxref("String.fromCodePoint()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/not_a_function/index.html b/files/es/web/javascript/reference/errors/not_a_function/index.html new file mode 100644 index 0000000000..7d1987cc64 --- /dev/null +++ b/files/es/web/javascript/reference/errors/not_a_function/index.html @@ -0,0 +1,124 @@ +--- +title: 'TypeError: "x" is not a function' +slug: Web/JavaScript/Reference/Errors/Not_a_function +tags: + - Error + - ErrorDeTipo + - JavaScript + - errores +translation_of: Web/JavaScript/Reference/Errors/Not_a_function +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">TypeError: "x" is not a function +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>Se ha intentado llamar a un elemento o valor como si fuera una función, pero no lo era. El código esperaba que hubiera una función implementada, pero no la ha encontrado.</p> + +<p>¿Está bien escrito el nombre de la función?¿El objeto sobre el que estás haciendo la llamada tiene ese método implementado realmente? Por ejemplo, los objetos tipo Array tienen implementada la función map, pero el resto de tipos no la tienen.</p> + +<p>Hay muchas funciones propias de Javascript (built-in) que necesitan una función de callback, por lo que tienes que pasar esa función como parámetro para que estos métodos funcionen correctamente.</p> + +<ul> + <li>Cuando se usen objetos {{jsxref("Array")}} o {{jsxref("TypedArray")}}: + <ul> + <li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li> + </ul> + </li> + <li>Cuando se usen objetos {{jsxref("Map")}} y {{jsxref("Set")}}: + <ul> + <li>{{jsxref("Map.prototype.forEach()")}} y {{jsxref("Set.prototype.forEach()")}}</li> + </ul> + </li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Nombre_de_la_función_mal_escrito">Nombre de la función mal escrito</h3> + +<p>En este caso, que ocurre con mucha frecuencia, el nombre de la función está mal escrito:</p> + +<pre class="brush: js example-bad">var x = document.getElementByID("foo"); +// TypeError: document.getElementByID is not a function +</pre> + +<p>El nombre correcto de la función es <code>getElementByI<strong>d</strong></code>:</p> + +<pre class="brush: js example-good">var x = document.getElementById("foo"); +</pre> + +<h3 id="Función_llamada_en_el_objeto_equivocado">Función llamada en el objeto equivocado</h3> + +<p>Puede que el método que queramos usar no esté implementado en el tipo de objeto que estemos usado. En este ejemplo, queremos usar el método map, que recibe una función de callback como argumento, pero solo lo tienen los objetos {{jsxref("Array")}}.</p> + +<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 }; + +obj.map(function(num) { + return num * 2; +}); + +// TypeError: obj.map is not a function</pre> + +<p>Como obj es un diccionario (parejas clave/valor), no tiene método map y se produce el error. Para evitarlo, hay que usar un {{jsxref("Array")}}:</p> + +<pre class="brush: js example-good">var numeros = [1, 4, 9]; + +numeros.map(function(num) { + return num * 2; +}); + +// Array [ 2, 8, 18 ] +</pre> + +<h3 id="La_función_comparte_un_nombre_con_una_propiedad_preexistente">La función comparte un nombre con una propiedad preexistente</h3> + +<p>A veces, al hacer una clase, puede tener una propiedad y una función con el mismo nombre. Al llamar a la función, el compilador piensa que la función deja de existir.</p> + +<pre class="brush: js example-bad">var Perro = function () { + this.edad = 11; + this.color = "negro"; + this.nombre = "Rafael"; + return this; +} + +Perro.prototype.nombre = function(nombre) { + this.nombre = nombre; + return this; +} + + +var miNuevoPerro = new Perro(); +miNuevoPerro.nombre("Lilly"); //Uncaught TypeError: myNewDog.name is not a function +</pre> + +<p>Utilice un nombre de propiedad diferente en su lugar:</p> + +<pre class="brush: js example-good">var Perro = function () { + this.edad = 11; + this.color = "negro"; + this.nombrePerro = "Rafael"; //Usando this.nombrePerro en vez de .nombre + return this; +} + +Perro.prototype.nombre = function(nombre) { + this.nombrePerro = nombre; + return this; +} + + +var miNuevoPerro = new Perro(); +miNuevoPerro.nombre("Lilly"); //Perro { edad: 11, color: 'negro', nombrePerro: 'Lilly' }</pre> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/not_defined/index.html b/files/es/web/javascript/reference/errors/not_defined/index.html new file mode 100644 index 0000000000..4166d131ca --- /dev/null +++ b/files/es/web/javascript/reference/errors/not_defined/index.html @@ -0,0 +1,67 @@ +--- +title: 'ReferenceError: "x" is not defined' +slug: Web/JavaScript/Reference/Errors/Not_defined +tags: + - Error + - JavaScript + - ReferenceError +translation_of: Web/JavaScript/Reference/Errors/Not_defined +--- +<div>{{jsSidebar("Errors")}}</div> + +<pre class="syntaxbox notranslate">ReferenceError: "x" no está definida.</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("ReferenceError")}}</p> + +<h2 id="¿Qué_está_mal">¿Qué está mal?</h2> + +<p>Hay una variable no existente que está siendo referida en algún lugar. Esta variable necesita ser declarada o se debe comprobar su disponibilidad en el {{Glossary("ámbito")}} actual del script.</p> + +<div class="note"> +<p><strong>Nota: </strong> Cuando una librería es cargada (como por ejemplo jQuery) asegúrese de que se haya cargado antes de intentar acceder a sus variables, como por ejemplo "$". Ponga la etiqueta {{HTMLElement("script")}}, que carga la librería antes del código que la utiliza.</p> +</div> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="Variable_no_declarada">Variable no declarada</h3> + +<pre class="brush: js example-bad notranslate">foo.substring(1); // ReferenceError: foo no está declarada. +</pre> + +<p>La variable "foo" no está declarada en ninguna parte. La variable debe ser alguna cadena para que el método {{jsxref("String.prototype.substring()")}} funcione correctamente.</p> + +<pre class="brush: js example-good notranslate">var foo = "bar"; +foo.substring(1); // "ar"</pre> + +<h3 id="Contexto_erróneo">Contexto erróneo</h3> + +<p>Una variable necesita estar disponible en el contexto actual de ejecución. No se puede acceder a las variables definidas dentro de una <a href="/es/docs/Web/JavaScript/Referencia/Funciones">función</a> desde fuera de dicha función, debido a que la variable está definida solamente dentro de la función.</p> + +<pre class="brush: js example-bad notranslate">function numbers () { + var num1 = 2, + num2 = 3; + return num1 + num2; +} + +console.log(num1); // ReferenceError num1 sin definir.</pre> + +<p>Sin embargo, una función puede acceder a todas las variables y funciones definidas dentro del ámbito en la cual ha sido definida. Es decir, una función en el contexto global puede acceder a todas las variables definidas en el contexto global.</p> + +<pre class="brush: js example-good notranslate">var num1 = 2, + num2 = 3; + +function numbers () { + return num1 + num2; +} + +console.log(num1); // 2</pre> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<ul> + <li>{{Glossary("Ámbito")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declaring_variables">Guía; declarando variables en JavaScript</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope/en-US/docs/">Guía; contexto de la función en Java Script </a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/precision_range/index.html b/files/es/web/javascript/reference/errors/precision_range/index.html new file mode 100644 index 0000000000..22c37598ff --- /dev/null +++ b/files/es/web/javascript/reference/errors/precision_range/index.html @@ -0,0 +1,96 @@ +--- +title: 'RangeError: precision is out of range' +slug: Web/JavaScript/Reference/Errors/Precision_range +translation_of: Web/JavaScript/Reference/Errors/Precision_range +--- +<div>{{jsSidebar("Errors")}}</div> + +<p>The JavaScript exception "precision is out of range" occurs when a number that's outside of the range of 0 and 20 (or 21) was passed into <code>toFixed</code> or <code>toPrecision</code>.</p> + +<h2 id="Message">Message</h2> + +<pre class="syntaxbox notranslate">RangeError: The number of fractional digits is out of range (Edge) +RangeError: The precision is out of range (Edge) +RangeError: precision {0} out of range (Firefox) +RangeError: toExponential() argument must be between 0 and 20 (Chrome) +RangeError: toFixed() digits argument must be between 0 and 20 (Chrome) +RangeError: toPrecision() argument must be between 1 and 21 (Chrome) +</pre> + +<h2 id="Error_type">Error type</h2> + +<p>{{jsxref("RangeError")}}</p> + +<h2 id="Que_salió_mal">Que salió mal?</h2> + +<p>Fué un argumento preciso fuera de rango en uno de estos metodos:</p> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> + +<p>El rango permitido para estos metodos usualmente esta entre 0 o 20 (o 21). De todas formas la <span><span>especificación</span></span> ECMAScript permite extender este rango.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Firefox (SpiderMonkey)</th> + <th scope="col">Chrome, Opera (V8)</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("Number.prototype.toExponential()")}}</td> + <td>0 to 100</td> + <td>0 to 20</td> + </tr> + <tr> + <td>{{jsxref("Number.prototype.toFixed()")}}</td> + <td>-20 to 100</td> + <td>0 to 20</td> + </tr> + <tr> + <td>{{jsxref("Number.prototype.toPrecision()")}}</td> + <td>1 to 100</td> + <td>1 to 21</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Examples</h2> + +<h3 id="Casos_no_validos">Casos no validos</h3> + +<pre class="brush: js example-bad notranslate">77.1234.toExponential(-1); // RangeError +77.1234.toExponential(101); // RangeError + +2.34.toFixed(-100); // RangeError +2.34.toFixed(1001); // RangeError + +1234.5.toPrecision(-1); // RangeError +1234.5.toPrecision(101); // RangeError +</pre> + +<h3 id="Casos_validos">Casos validos</h3> + +<pre class="brush: js example-good notranslate">77.1234.toExponential(4); // 7.7123e+1 +77.1234.toExponential(2); // 7.71e+1 + +2.34.toFixed(1); // 2.3 +2.35.toFixed(1); // 2.4 (note that it rounds up in this case) + +5.123456.toPrecision(5); // 5.1235 +5.123456.toPrecision(2); // 5.1 +5.123456.toPrecision(1); // 5 +</pre> + +<h2 id="También_te_puede_interesar">También te puede interesar:</h2> + +<ul> + <li>{{jsxref("Number.prototype.toExponential()")}}</li> + <li>{{jsxref("Number.prototype.toFixed()")}}</li> + <li>{{jsxref("Number.prototype.toPrecision()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/property_access_denied/index.html b/files/es/web/javascript/reference/errors/property_access_denied/index.html new file mode 100644 index 0000000000..1df56e4c5b --- /dev/null +++ b/files/es/web/javascript/reference/errors/property_access_denied/index.html @@ -0,0 +1,46 @@ +--- +title: 'Error: Permission denied to access property "x"' +slug: Web/JavaScript/Reference/Errors/Property_access_denied +tags: + - Error + - JavaScript + - Seguridad + - errores +translation_of: Web/JavaScript/Reference/Errors/Property_access_denied +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">Error: Permission denied to access property "x"</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("Error")}}.</p> + +<h2 id="¿Cuál_es_el_problema">¿Cuál es el problema?</h2> + +<p><span class="seoSummary">Se ha intentado acceder a un objeto al cual no tienes permiso. Probablemente es un elemento {{HTMLElement("iframe")}} cargado de otro dominio en el cual violaste la <a href="/en-US/docs/Web/Security/Same-origin_policy">política del mismo origen</a>.</span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { + console.log(frames[0].document); + // Error: Permission denied to access property "document" + } + </script> + </head> + <body></body> +</html></pre> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{HTMLElement("iframe")}}</li> + <li><span class="seoSummary"><a href="/en-US/docs/Web/Security/Same-origin_policy">Política del mismo origen</a></span></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/stmt_after_return/index.html b/files/es/web/javascript/reference/errors/stmt_after_return/index.html new file mode 100644 index 0000000000..1dd135c3ec --- /dev/null +++ b/files/es/web/javascript/reference/errors/stmt_after_return/index.html @@ -0,0 +1,74 @@ +--- +title: 'Advertencia: codigo inaccesible despues de sentencia de retorno' +slug: Web/JavaScript/Reference/Errors/Stmt_after_return +translation_of: Web/JavaScript/Reference/Errors/Stmt_after_return +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">Advertencia: código inaccesible después de sentencia de retorno (Firefox) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>Advertencia</p> + +<h2 id="Qué_va_mal">Qué va mal?</h2> + +<p>Código inalcanzable después de una sentencia de retorno puede ocurrir en estas situaciones:</p> + +<ul> + <li>Cuando se usa una expresión despues de una sentencia {{jsxref("Statements/return", "return")}}</li> + <li>Cuando se usa una sentencia de retorno sin punto y coma pero inluye una expresion directamente despues.</li> +</ul> + +<p>Cuando una expresion existe después de una sentencia de retorno válida, se da una advertencia para indicar que el código después de la sentencia de retorno es inalcanzable, lo que significa que nunca será ejecutado.</p> + +<p>¿Porqué deberia tener un punto y coma despues de la sentencia de retorno? En el caso de sentencias sin punto y coma, estas pueden no ser claras, puede que el desarrollador intentara retornar el resultado de la sentencia en la siguiente línea, o detener la ejecución y retornar. La advertencia indica que hay una ambiguedad en la forma en la que la sentencia de retorno está escrita.</p> + +<p>Advertencias no seran mostradas por retornos sin punto y coma si la sentencia lo sigue:</p> + +<ul> + <li>{{jsxref("Statements/throw", "throw")}}</li> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/var", "var")}}</li> + <li>{{jsxref("Statements/function", "function")}}</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_invalidos">Casos invalidos</h3> + +<pre class="brush: js example-bad">function f() { + var x = 3; + x += 4; + return x; // return sale de la funcion inmediatamente + x -= 3; // esta linea nunca se ejecutara ; es inalcanzable +} + +function f() { + return // es tratado como `return;` + 3 + 4; //la funcion regresa, y esta linea nunca es alcanzada +} +</pre> + +<h3 id="Casos_validos">Casos validos</h3> + +<pre class="brush: js example-good">function f() { + var x = 3; + x += 4; + x -= 3; + return x; // OK: regreso despues de todas las otras declaraciones +} + +function f() { + return 3 + 4 // OK: sin punto y coma regresa la expresion en la misma linea +} +</pre> + +<h2 id="Ve_tambien">Ve tambien</h2> + +<ul> + <li>{{jsxref("Statements/return", "Automatic Semicolon Insertion", "#Automatic_Semicolon_Insertion", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html b/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html new file mode 100644 index 0000000000..2ca6ef8de4 --- /dev/null +++ b/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html @@ -0,0 +1,117 @@ +--- +title: 'SyntaxError: "use strict" no permitida en función con parámetros complejos' +slug: Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos +tags: + - Error + - JavaScript + - TypeError + - errores +translation_of: Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +--- +<div>{{jsSidebar("Errors", "Errores")}}</div> + +<p>La excepción de JavaScript: "<code>'use strict' no permitida en función</code>" ocurre cuando se usa una directiva <code>"use strict"</code> en la parte superior de una función con {{jsxref("Functions/Default_parameters", "parámetros predeterminados", "", 1)}}, {{jsxref("Functions/rest_parameters", "parámetros rest", "", 1)}} o {{jsxref("Operators/Destructuring_assignment" , "Desestructuración de parámetros", "", 1)}}.</p> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox notranslate">Edge: +No se puede aplicar el modo estricto en funciones con una lista de parámetros complejos + +Firefox: +SyntaxError: "use strict" no permitido en la función con parámetro predeterminado +SyntaxError: "use strict" no permitido en la función con parámetro rest +SyntaxError: "use strict" no permitido en la función con parámetro de desestructuración + +Chrome: +SyntaxError: directiva ilegal 'use strict' en función con una lista de parámetros complejos +</pre> + +<h2 id="Tipo_Error">Tipo <code>Error</code></h2> + +<p>{{jsxref("SyntaxError")}}.</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>Se escribió una directiva <code>"use strict"</code> en la parte superior de una función que tiene uno de los siguientes parámetros:</p> + +<ul> + <li>{{jsxref("Functions/Default_parameters", "Parámetros predeterminados", "", 1)}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parámetros rest", "", 1)}}</li> + <li>{{jsxref("Operators/Destructuring_assignment", "Desestructuración de parámetros", "", 1)}}</li> +</ul> + +<p>No está permitida una directiva <code>"use strict"</code> en la parte superior de dichas funciones según la especificación ECMAScript.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Declaración_de_función">Declaración de función</h3> + +<p>En este caso, la función <code>sum</code> tiene los parámetros predeterminados <code>a = 1</code> y <code>b = 2</code>:</p> + +<pre class="brush: js example-bad notranslate">function sum(a = 1, b = 2) { + SyntaxError: 'use strict' no permitida en la función con parámetros predeterminados + 'use strict'; + return a + b; +} +</pre> + +<p>Si la función debe estar en <a href="/es/docs/Web/JavaScript/Reference/Strict_mode">modo estricto</a>, y todo el script o la función adjunta también está bien que esté en modo estricto, puedes mover la directiva <code>"use strict"</code> fuera de la función:</p> + +<pre class="brush: js example-good notranslate">'use strict'; +function sum(a = 1, b = 2) { + return a + b; +} +</pre> + +<h3 id="Expresión_Function">Expresión <code>Function</code></h3> + +<p>Una expresión <code>function</code> puede usar otra solución alternativa:</p> + +<pre class="brush: js example-bad notranslate">var sum = function sum([a, b]) { + // SyntaxError: "use strict" no permitido en función con parámetros de desestructuración + 'use strict'; + return a + b; +}; +</pre> + +<p>Esta se puede convertir a la siguiente expresión:</p> + +<pre class="brush: js example-good notranslate">var sum = (function() { + 'use strict'; + return function sum([a, b]) { + return a + b; + }; +})(); +</pre> + +<h3 id="Función_de_flecha">Función de flecha</h3> + +<p>Si una función de flecha necesita acceder a la variable <code>this</code>, puedes usar la función de flecha como función circundante:</p> + +<pre class="brush: js example-bad notranslate">var callback = (...args) => { + SyntaxError: "use strict" no permitido en la función con parámetro rest + 'use strict'; + return this.run(args); +}; +</pre> + +<p>Esta se puede convertir a la siguiente expresión:</p> + +<pre class="brush: js example-good notranslate">var callback = (() => { + 'use strict'; + return (...args) => { + return this.run(args); + }; +})(); +</pre> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{jsxref("Strict_mode", "Modo estricto", "", 1)}}</li> + <li>{{jsxref("Statements/function", "Declaración de función", "", 1)}}</li> + <li>{{jsxref("Operators/function", "Expresión function", "", 1)}}</li> + <li>{{jsxref("Functions/Default_parameters", "Parámetros predeterminados", "", 1)}}</li> + <li>{{jsxref("Functions/rest_parameters", "Parámetros rest", "", 1)}}</li> + <li>{{jsxref("Operators/Destructuring_assignment", "Desestructuración de parámetros", "", 1)}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/too_much_recursion/index.html b/files/es/web/javascript/reference/errors/too_much_recursion/index.html new file mode 100644 index 0000000000..91ac6d7973 --- /dev/null +++ b/files/es/web/javascript/reference/errors/too_much_recursion/index.html @@ -0,0 +1,57 @@ +--- +title: 'InternalError: too much recursion' +slug: Web/JavaScript/Reference/Errors/Too_much_recursion +tags: + - Error + - InternalError + - JavaScript + - Recursiva + - Recursividad + - Recursión(2) +translation_of: Web/JavaScript/Reference/Errors/Too_much_recursion +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">InternalError: too much recursion +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("InternalError")}}.</p> + +<h2 id="¿Qué_ha_ido_mal">¿Qué ha ido mal?</h2> + +<p>Una función que se llama a sí misma es una función recursiva. Podemos decir que la recursión es análoga a un bucle. Ambos ejecutan el mismo código varias veces y ambos requieren de una condición de fin (para evitar un bucle infinito o recursión infinita). Cuando hay recursión infinita o mucha recursión, JavaScript lanza este error.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Esta función recursiva se ejecuta 10 veces, debido a la condición de salida. </p> + +<pre class="brush: js">function loop(x) { + if (x >= 10) // "x >= 10" es la condición de salida + return; + // hacer cosas + loop(x + 1); // llamada recursiva +} +loop(0);</pre> + +<p>Si establecemos esta condición para un valor muy alto, no funcionará:</p> + +<pre class="brush: js example-bad">function loop(x) { + if (x >= 1000000000000) + return; + // hacer cosas + loop(x + 1); +} +loop(0); + +// InternalError: too much recursion (demasiada recursión)</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{Glossary("Recursion")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Recursion">Recursive functions</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/undefined_prop/index.html b/files/es/web/javascript/reference/errors/undefined_prop/index.html new file mode 100644 index 0000000000..96f7e050de --- /dev/null +++ b/files/es/web/javascript/reference/errors/undefined_prop/index.html @@ -0,0 +1,63 @@ +--- +title: 'ReferenceError: reference to undefined property "x"' +slug: Web/JavaScript/Reference/Errors/Undefined_prop +tags: + - JavaScript + - Modo estricto + - ReferenceError + - errores +translation_of: Web/JavaScript/Reference/Errors/Undefined_prop +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">ReferenceError: reference to undefined property "x" (Firefox) +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>Advertencia {{jsxref("ReferenceError")}} únicamente en <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo estricto</a>.</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>El script intentó acceder a una propiedad no definida en un objeto. Hay dos formas de acceder a las propiedades; vea la página <a href="/es/docs/Web/JavaScript/Referencia/Operadores/Miembros">operadores de miembros</a> para aprender más sobre ellas.</p> + +<p>Los errores sobre referencias a propiedades no definidas ocurren únicamente en el <a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">modo de código estricto</a>. En el modo no estricto, estos intentos de obtener propiedades no definidas son silenciosamente ignorados.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Casos_inválidos">Casos inválidos</h3> + +<p>En este caso, la propiedad <code>bar</code> no está definida, produciéndose un <code>ReferenceError</code>.</p> + +<pre class="brush: js example-bad">'use strict'; + +var foo = {}; +foo.bar; // ReferenceError: reference to undefined property "bar" +</pre> + +<h3 id="Casos_válidos">Casos válidos</h3> + +<p>Para evitar este error, es necesario ya sea definir la propiedad <code>bar</code> en el objeto o verificar su existencia antes de leerla; una manera de hacerlo es usar el método {{jsxref("Object.prototype.hasOwnProperty()")}}, como en el siguiente ejemplo:</p> + +<pre class="brush: js example-good">'use strict'; + +var foo = {}; + +// Definir la propiedad bar + +foo.bar = 'luna'; +console.log(foo.bar); // "luna" + +// Prueba para asegurarse que bar existe antes de leerla + +if (foo.hasOwnProperty('bar')) { + console.log(foo.bar); +}</pre> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Referencia/Modo_estricto">Modo estricto</a></li> +</ul> diff --git a/files/es/web/javascript/reference/errors/unexpected_token/index.html b/files/es/web/javascript/reference/errors/unexpected_token/index.html new file mode 100644 index 0000000000..02cad6eb2f --- /dev/null +++ b/files/es/web/javascript/reference/errors/unexpected_token/index.html @@ -0,0 +1,50 @@ +--- +title: 'SyntaxError: Unexpected token' +slug: Web/JavaScript/Reference/Errors/Unexpected_token +tags: + - JavaScript + - SyntaxError + - errores +translation_of: Web/JavaScript/Reference/Errors/Unexpected_token +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">SyntaxError: expected expression, got "x" +SyntaxError: expected property name, got "x" +SyntaxError: expected target, got "x" +SyntaxError: expected rest argument name, got "x" +SyntaxError: expected closing parenthesis, got "x" +SyntaxError: expected '=>' after argument list, got "x" +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("SyntaxError")}}</p> + +<h2 id="¿Que_significa_el_error">¿Que significa el error?</h2> + +<p>Se esperaba un constructor específico de JavaScript pero se recibió algo diferente. Puede ser un simple error de tipeo.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Se_espera_expresión">Se espera expresión</h3> + +<p>Cuando se llama a una función, no se permiten comas al final de los argumentos. JavaScript espera un argumento que puede ser en realidad cualquier tipo de expresión.</p> + +<pre class="brush: js example-bad">Math.max(2, 42,); +// SyntaxError: expected expression, got ')' +</pre> + +<p>El error se corrije omitiendo la coma o agregando otro argumento:</p> + +<pre class="brush: js example-good">Math.max(2, 42); +Math.max(2, 42, 13 + 37); +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Math.max()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/errors/unexpected_type/index.html b/files/es/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..a53f74c95b --- /dev/null +++ b/files/es/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,61 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Mensaje">Mensaje</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Examples: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Tipo_de_error">Tipo de error</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="¿Qué_salió_mal">¿Qué salió mal?</h2> + +<p>Tipo inesperado. Esto ocurre amenudo con valores {{jsxref("undefined")}} o {{jsxref("null")}} .</p> + +<p>Además, ciertos métodos, como {{jsxref ("Object.create ()")}} o {{jsxref("Symbol.keyFor()")}}, requieren de un tipo específico, que debe ser proporcionado, ejemplos</p> + +<h3 id="Casos_inválidos">Casos inválidos</h3> + +<pre class="brush: js example-bad">// undefined and null cases on which the substring method won't work +var foo = undefined; +foo.substring(1); // TypeError: foo is undefined + +var foo = null; +foo.substring(1); // TypeError: foo is null + + +// Certain methods might require a specific type +var foo = {} +Symbol.keyFor(foo); // TypeError: foo is not a symbol + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" is not an object or null +</pre> + +<h3 id="Cómo_solucionar_el_problema">Cómo solucionar el problema</h3> + +<p>Para fijar un puntero nulo a indefinidos o valores nulos, puede utilizar el operador typeof, por ejemplo</p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Ahora sabemos que foo está definido, ahora podemos continuar. +}</pre> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..6c050f7f0a --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html @@ -0,0 +1,129 @@ +--- +title: handler.getOwnPropertyDescriptor() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor +--- +<div>{{JSRef}}</div> + +<div>El método <strong><code>handler.getOwnPropertyDescriptor()</code></strong> captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</div> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">var p = new Proxy(target, { + getOwnPropertyDescriptor: function(target, prop) { + } +}); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>El método <code>getOwnPropertyDescriptor</code> recibe los siguiente parámetros. <code>this</code> está asociado al handler del proxy.</p> + +<dl> + <dt><code>target</code></dt> + <dd>El objeto destino.</dd> + <dt><code>prop</code></dt> + <dd>El nombre de la propiedad cuya descripción ha de ser devuelta.</dd> +</dl> + +<h3 id="Valor_Devuelto">Valor Devuelto</h3> + +<p>El método <code>getOwnPropertyDescriptor</code> debe devolver un objeto o <code>undefined</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code><strong>handler.getOwnPropertyDescriptor()</strong></code> captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p> + +<h3 id="Intercepciones">Intercepciones</h3> + +<p>Este método intercepta las siguientes operaciones:</p> + +<ul> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> + +<h3 id="Invariantes">Invariantes</h3> + +<p>Si los siguientes invariantes son violados, el proxy lanzará {{jsxref("TypeError")}}:</p> + +<ul> + <li><code>getOwnPropertyDescriptor</code> debe devolver un objeto o <code>undefined</code>.</li> + <li>No puede devolver que una propiedad no existe si está presente en el objeto como no configurable.</li> + <li>No puede devolver que una propiedad no existe si esta está presente como una propiedad propia del objeto destino y el objeto no es extensible.</li> + <li>No puede devolver que una propuedad existe, si esta no está presente en el objeto destino y el objeto no es extensible. </li> + <li>No puede devolver que una propiedad es no configurable si esta no existe en el objeto destino o si existe pero sí es configurable.</li> + <li>El resultado de <code>Object.getOwnPropertyDescriptor(target)</code> puede ser aplicado al objeto destino mediante <code>Object.defineProperty </code>y no lanzará ningún tipo de excepción.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente código captura {{jsxref("Object.getOwnPropertyDescriptor()")}}.</p> + +<pre class="brush: js">var p = new Proxy({ a: 20}, { + getOwnPropertyDescriptor: function(target, prop) { + console.log('called: ' + prop); + return { configurable: true, enumerable: true, value: 10 }; + } +}); + +console.log(Object.getOwnPropertyDescriptor(p, 'a').value); // "called: a" + // 10 +</pre> + +<p>El siguiente código viola uno de los invariantes definidos previamente.</p> + +<pre class="brush: js">var obj = { a: 10 }; +Object.preventExtensions(obj); +var p = new Proxy(obj, { + getOwnPropertyDescriptor: function(target, prop) { + return undefined; + } +}); + +Object.getOwnPropertyDescriptor(p, 'a'); // TypeError is thrown +</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-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición Inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_buscadores">Compatibilidad con buscadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Proxy.handler.getOwnPropertyDescriptor")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Object.getOwnPropertyDescriptor()")}}</li> + <li>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/index.html new file mode 100644 index 0000000000..042e9b50b1 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/proxy/handler/index.html @@ -0,0 +1,83 @@ +--- +title: Proxy handler +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Proxy + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy +--- +<div>{{JSRef}}</div> + +<p>The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.</p> + +<h2 id="Methods">Methods</h2> + +<p>All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.</p> + +<dl> + <dt>{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.getPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}</dt> + <dd>A trap for {{jsxref("Object.setPrototypeOf")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}</dt> + <dd>A trap for {{jsxref("Object.isExtensible")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}</dt> + <dd>A trap for {{jsxref("Object.preventExtensions")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}</dt> + <dd>A trap for {{jsxref("Object.defineProperty")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}</dt> + <dd>A trap for the {{jsxref("Operators/in", "in")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}</dt> + <dd>A trap for getting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}</dt> + <dd>A trap for setting property values.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}</dt> + <dd>A trap for the {{jsxref("Operators/delete", "delete")}} operator.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}</dt> + <dd>A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}</dt> + <dd>A trap for a function call.</dd> + <dt>{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}</dt> + <dd>A trap for the {{jsxref("Operators/new", "new")}} operator.</dd> +</dl> + +<p>Some non-standard traps are <a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#Proxy">obsolete and have been removed</a>.</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('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>The <code>enumerate</code> handler has been removed.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Proxy.handler")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html new file mode 100644 index 0000000000..ee5ac155e7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html @@ -0,0 +1,122 @@ +--- +title: handler.set() +slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/set +tags: + - ECMAScript 2015 + - JavaScript + - Proxy + - metodo +translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set +--- +<div>{{JSRef}}</div> + +<p>El método <code><strong>handler.set()</strong></code> captura las asignaciones de un valor a una determinada propiedad.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: js">var p = new Proxy(target, { + set: function(target, property, value, receiver) { + } +}); +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>El método <code>set</code> recibe los siguientes parámetros.<code>this</code> se asocia al handler.</p> + +<dl> + <dt><code>target</code></dt> + <dd>El objeto objetivo.</dd> + <dt><code>property</code></dt> + <dd>El nombre de la propiedad a la que se le asignará el valor.</dd> + <dt><code>value</code></dt> + <dd>El nuevo valor asignado a la propiedad.</dd> + <dt><code>receiver</code></dt> + <dd>El objeto al que originalmente iba dirigida la asignación. Normalmente es el proxy. Sin embargo el manejador o <code>set</code> handler puede ser llamado de forma indirecta a través de un prototipo entre otros.</dd> + <dd>Por ejemplo, suponga que un escript ejecuta la sentencia <code>obj.name = "jen"</code>, y <code>obj</code> no es un proxy, y no posee la propiedad <code>.name</code>, pero tiene un proxy en su cadena de prototipos. El manejador <code>set</code> de este proxy será llamado y obj será pasado como el receiver.</dd> +</dl> + +<h3 id="Valor_Devuelto">Valor Devuelto</h3> + +<p>El método <code>set</code> debe devolver un valor booleano. Devolverá <code>true</code> para indicar que la asignación se ha llevado a cabo con éxito. Si devuelve <code>false</code>, y la asignación tiene lugar en modo estricto, se lanzará un error de tipo <code>TypeError</code>.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code><strong>handler.set</strong></code> captura la asignación de un valor a una propiedad.</p> + +<h3 id="Qué_intercepta">Qué intercepta</h3> + +<p>Las siguientes operaciones son capturadas:</p> + +<ul> + <li>Asignación a propiedades: <code>proxy[foo] = bar</code> y <code>proxy.foo = bar</code></li> + <li>Asignación a propiedades heredadas: <code>Object.create(proxy)[foo] = bar</code></li> + <li>{{jsxref("Reflect.set()")}}</li> +</ul> + +<h3 id="Invariantes">Invariantes</h3> + +<p>Si los siguientes invariantes son violados, el proxy lanzará un {{jsxref("TypeError")}}:</p> + +<ul> + <li>El valor de la propiedad no puede ser diferente al de la correspondiente propiedad del objeto, si esta es una propiedad no configurable, o sin permisos de escritura.</li> + <li>No se puede asignar un valor a una propiedad si la correspondiente propiedad en el objeto objetivo es no configurable y tiene <code>undefined</code> como su atributo [[Set]].</li> + <li>En modo estricto, la devolución de <code>false</code> pro parte del manejador <code>set</code> lanzará una excepción del tipo {{jsxref("TypeError")}}.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>El siguiente código captura la asignación de un valor a una propiedad.</p> + +<pre class="brush: js">var p = new Proxy({}, { + set: function(target, prop, value, receiver) { + target[prop] = value + console.log('property set: ' + prop + ' = ' + value) + return true + } +}) + +console.log('a' in p) // false + +p.a = 10 // "propiedad asignada: a = 10" +console.log('a' in p) // true +console.log(p.a) // 10 +</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-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_los_buscadores">Compatibilidad con los buscadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Proxy.handler.set")}}</p> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Proxy")}}</li> + <li>{{jsxref("Proxy.handler", "handler")}}</li> + <li>{{jsxref("Reflect.set()")}}</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..672942b3ad --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,163 @@ +--- +title: RangeError +slug: Web/JavaScript/Reference/Global_Objects/RangeError +tags: + - Error + - JavaScript + - Object + - RangeError +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +--- +<div>{{JSRef}}</div> + +<p>El objeto <code><strong>RangeError</strong></code> indica un error cuando un valor no se encuentra dentro de un rango de valores permitidos.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>new RangeError([<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. Mensaje de error</dd> + <dt><code>fileName</code> {{non-standard_inline}}</dt> + <dd>Opcional. Nombre del fichero que contiene el código donde se produjo el error</dd> + <dt><code>lineNumber</code> {{non-standard_inline}}</dt> + <dd>Opcional. Número de línea de código donde se produjo el error</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Se lanza un <code>RangeError</code> cuando se pasa como parámetro a una función un número que no está dentro del rango que dicha función permite. Esto puede ocurrir cuando se intenta crear un array con una longitud inválida con el constructor {{jsxref("Array")}}, o al pasar valores inválidos a los métodos numéricos {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} o {{jsxref("Number.toPrecision()")}}.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("RangeError.prototype")}}</dt> + <dd>Permite añadir propiedades a objetos <code>RangeError</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<p><code>RangeError</code> no contiene métodos, pero hereda 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="Instancias_de_RangeError">Instancias de <code>RangeError</code></h2> + +<h3 id="Propiedades_2">Propiedades</h3> + +<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Propiedades')}}</div> + +<h3 id="Métodos_2">Métodos</h3> + +<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Métodos')}}</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Utilizando_RangeError">Utilizando <code>RangeError</code></h3> + +<pre class="brush: js">var check = function(num) { + if (num < MIN || num > MAX) { + throw new RangeError('El parámetro debe estar entre ' + MIN + ' y ' + MAX); + } +}; + +try { + check(500); +} +catch (e) { + if (e instanceof RangeError) { + // TODO: Manejar el error de rango + } +} +</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 inical.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</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>{{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")}}</li> + <li>{{jsxref("RangeError.prototype")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Number.toExponential()")}}</li> + <li>{{jsxref("Number.toFixed()")}}</li> + <li>{{jsxref("Number.toPrecision()")}}</li> +</ul> 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 new file mode 100644 index 0000000000..ba020719b7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html @@ -0,0 +1,130 @@ +--- +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 +--- +<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/reflect/index.html b/files/es/web/javascript/reference/global_objects/reflect/index.html new file mode 100644 index 0000000000..a2f9d12fb7 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/reflect/index.html @@ -0,0 +1,137 @@ +--- +title: Reflect +slug: Web/JavaScript/Reference/Global_Objects/Reflect +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Overview + - Reflect + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect +--- +<div>{{JSRef}}</div> + +<p><strong>Reflect </strong> es un objecto incorporado que proporciona metodos para interceptar operaciones de javascript. Los métodos son los mismos que los de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handlers</a>. <code>Reflect</code> no es un objeto de funciones y por lo tanto no puede ser construido.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>A diferencia de la mayoria de los objetos globales, <code>Reflect</code> no es un constructor. No puede ser instanciado con un <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">operador</a> <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> </a>o invocando el objecto <code>Reflect</code> como una función. Todas las propiedades y métodos de <code>Reflect</code> son estáticos (igual que los del objeto {{jsxref("Math")}}).</p> + +<h2 id="Métodos">Métodos</h2> + +<p>El objeto <code>Reflect</code> proporciona las siguientes funciones estáticas con los mismos nombres de los métodos de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler">proxy handler</a>. Algunos de estos métodos son correspondientes a los métodos de {{jsxref("Object")}}.</p> + +<dl> + <dt>{{jsxref("Reflect.apply()")}}</dt> + <dd>Calls a target function with arguments as specified by the <code>args</code> parameter. See also {{jsxref("Function.prototype.apply()")}}.</dd> + <dt>{{jsxref("Reflect.construct()")}}</dt> + <dd> The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> as a function. Equivalent to calling <code>new target(...args)</code>.</dd> + <dt>{{jsxref("Reflect.defineProperty()")}}</dt> + <dd>Similar to {{jsxref("Object.defineProperty()")}}. Returns a {{jsxref("Boolean")}}.</dd> + <dt>{{jsxref("Reflect.deleteProperty()")}}</dt> + <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete"><code>delete</code> operator</a> as a function. Equivalent to calling <code>delete target[name]</code>.</dd> + <dt>{{jsxref("Reflect.get()")}}</dt> + <dd>A function that returns the value of properties.</dd> + <dt>{{jsxref("Reflect.getOwnPropertyDescriptor()")}}</dt> + <dd>Similar to {{jsxref("Object.getOwnPropertyDescriptor()")}}. Returns a property descriptor of the given property if it exists on the object, {{jsxref("undefined")}} otherwise.</dd> + <dt>{{jsxref("Reflect.getPrototypeOf()")}}</dt> + <dd>Same as {{jsxref("Object.getPrototypeOf()")}}.</dd> + <dt>{{jsxref("Reflect.has()")}}</dt> + <dd>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code> operator</a> as function. Returns a boolean indicating whether an own or inherited property exists.</dd> + <dt>{{jsxref("Reflect.isExtensible()")}}</dt> + <dd>Same as {{jsxref("Object.isExtensible()")}}.</dd> + <dt>{{jsxref("Reflect.ownKeys()")}}</dt> + <dd>Returns an array of the target object's own (not inherited) property keys.</dd> + <dt>{{jsxref("Reflect.preventExtensions()")}}</dt> + <dd>Similar to {{jsxref("Object.preventExtensions()")}}. Returns a {{jsxref("Boolean")}}.</dd> + <dt>{{jsxref("Reflect.set()")}}</dt> + <dd>A function that assigns values to properties. Returns a {{jsxref("Boolean")}} that is <code>true</code> if the update was successful.</dd> + <dt>{{jsxref("Reflect.setPrototypeOf()")}}</dt> + <dd>A function that sets the prototype of an object.</dd> +</dl> + +<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-reflect-object', 'Reflect')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect-object', 'Reflect')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Reflect.enumerate has been removed.</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>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>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("42")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(10)}}</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>{{CompatChrome(49.0)}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("42")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(10)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="También_ver">También ver</h2> + +<ul> + <li>The {{jsxref("Proxy")}} global object.</li> + <li>The {{jsxref("Proxy.handler", "handler")}} object.</li> +</ul> diff --git a/files/es/web/javascript/reference/global_objects/reflect/set/index.html b/files/es/web/javascript/reference/global_objects/reflect/set/index.html new file mode 100644 index 0000000000..10436d8928 --- /dev/null +++ b/files/es/web/javascript/reference/global_objects/reflect/set/index.html @@ -0,0 +1,148 @@ +--- +title: Reflect.set() +slug: Web/JavaScript/Reference/Global_Objects/Reflect/set +translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/set +--- +<div>{{JSRef}}</div> + +<p>El método estático <code><strong>Reflect</strong></code><strong><code>.set()</code></strong> funciona igual que asignar una propiedad en un objeto.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">Reflect.set(target, propertyKey, value[, receiver]) +</pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>target</code></dt> + <dd>El objeto en el cual se va a asignar una propiedad.</dd> + <dt><code>propertyKey</code></dt> + <dd>El nombre de la propiedad a asignar.</dd> + <dt>value</dt> + <dd>El valor de la propiedad.</dd> + <dt>receiver</dt> + <dd>El valor de <code>this</code> para usar en la llamada a <code>target</code> si se encuentra un setter.</dd> +</dl> + +<h3 id="Valor_de_retorno">Valor de retorno</h3> + +<p>Un {{jsxref("Boolean")}} indicando si se pudo o no asignar la propiedad.</p> + +<h3 id="Excepciones">Excepciones</h3> + +<p>Un {{jsxref("TypeError")}}, si <code>target</code> no es un {{jsxref("Object")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>Reflect.set</code> permite asignar una propiedad a un objeto. It does property assignment and is like the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> syntax as a function.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Uso_de_Reflect.set()"><code><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif">Uso de </font>Reflect.set()</code></h3> + +<pre class="brush: js">// Objeto +var obj = {}; +Reflect.set(obj, 'prop', 'value'); // true +obj.prop; // "value" + +// Arreglo +var arr = ['duck', 'duck', 'duck']; +Reflect.set(arr, 2, 'goose'); // true +arr[2]; // "goose" + +// Puede truncar un arreglo. +Reflect.set(arr, 'length', 1); // true +arr; // ["duck"]; + +// Con solo un argumento, propertyKey y value son "undefined". +var obj = {}; +Reflect.set(obj); // true +Reflect.getOwnPropertyDescriptor(obj, 'undefined'); +// { value: undefined, writable: true, enumerable: 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">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.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í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>49</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(42)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</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ásico</td> + <td>{{CompatNo}}</td> + <td>49</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(42)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Reflect")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/acerca_de/index.html b/files/es/web/javascript/referencia/acerca_de/index.html new file mode 100644 index 0000000000..3382ea7dca --- /dev/null +++ b/files/es/web/javascript/referencia/acerca_de/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/referencia/características_desaprobadas/index.html b/files/es/web/javascript/referencia/características_desaprobadas/index.html new file mode 100644 index 0000000000..f0f18cfbd7 --- /dev/null +++ b/files/es/web/javascript/referencia/características_desaprobadas/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/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html b/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html new file mode 100644 index 0000000000..5ef865f0bb --- /dev/null +++ b/files/es/web/javascript/referencia/características_desaprobadas/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/referencia/classes/class_fields/index.html b/files/es/web/javascript/referencia/classes/class_fields/index.html new file mode 100644 index 0000000000..446c63c001 --- /dev/null +++ b/files/es/web/javascript/referencia/classes/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/referencia/classes/constructor/index.html b/files/es/web/javascript/referencia/classes/constructor/index.html new file mode 100644 index 0000000000..71fcb413f1 --- /dev/null +++ b/files/es/web/javascript/referencia/classes/constructor/index.html @@ -0,0 +1,100 @@ +--- +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> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">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">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">constructor() {} +</pre> + +<p>Para las clases derivadas, el constructor por defecto es:</p> + +<pre class="brush: js">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> + +<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/referencia/classes/extends/index.html b/files/es/web/javascript/referencia/classes/extends/index.html new file mode 100644 index 0000000000..6781c3801e --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/classes/index.html b/files/es/web/javascript/referencia/classes/index.html new file mode 100644 index 0000000000..0f108dda68 --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/classes/private_class_fields/index.html b/files/es/web/javascript/referencia/classes/private_class_fields/index.html new file mode 100644 index 0000000000..5826cc125b --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/classes/static/index.html b/files/es/web/javascript/referencia/classes/static/index.html new file mode 100644 index 0000000000..92f972f171 --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/funciones/arguments/callee/index.html b/files/es/web/javascript/referencia/funciones/arguments/callee/index.html new file mode 100644 index 0000000000..1902131055 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/arguments/index.html b/files/es/web/javascript/referencia/funciones/arguments/index.html new file mode 100644 index 0000000000..ab768cff21 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/arguments/length/index.html b/files/es/web/javascript/referencia/funciones/arguments/length/index.html new file mode 100644 index 0000000000..b1d7698194 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/arrow_functions/index.html b/files/es/web/javascript/referencia/funciones/arrow_functions/index.html new file mode 100644 index 0000000000..6ea9a35595 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/get/index.html b/files/es/web/javascript/referencia/funciones/get/index.html new file mode 100644 index 0000000000..7125ab0caa --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/index.html b/files/es/web/javascript/referencia/funciones/index.html new file mode 100644 index 0000000000..ac1bea24ea --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/method_definitions/index.html b/files/es/web/javascript/referencia/funciones/method_definitions/index.html new file mode 100644 index 0000000000..2aa23ca9b3 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/funciones/parametros_por_defecto/index.html b/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html new file mode 100644 index 0000000000..e319a3606b --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/parametros_por_defecto/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/referencia/funciones/parametros_rest/index.html b/files/es/web/javascript/referencia/funciones/parametros_rest/index.html new file mode 100644 index 0000000000..2e26e2c6e0 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/parametros_rest/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/referencia/funciones/set/index.html b/files/es/web/javascript/referencia/funciones/set/index.html new file mode 100644 index 0000000000..ef555e6759 --- /dev/null +++ b/files/es/web/javascript/referencia/funciones/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/referencia/gramatica_lexica/index.html b/files/es/web/javascript/referencia/gramatica_lexica/index.html new file mode 100644 index 0000000000..fd6a12d8c5 --- /dev/null +++ b/files/es/web/javascript/referencia/gramatica_lexica/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/referencia/index.html b/files/es/web/javascript/referencia/index.html new file mode 100644 index 0000000000..29d75a4161 --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/iteration_protocols/index.html b/files/es/web/javascript/referencia/iteration_protocols/index.html new file mode 100644 index 0000000000..7d8d31f2cd --- /dev/null +++ b/files/es/web/javascript/referencia/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/referencia/modo_estricto/index.html b/files/es/web/javascript/referencia/modo_estricto/index.html new file mode 100644 index 0000000000..d6a596b3e5 --- /dev/null +++ b/files/es/web/javascript/referencia/modo_estricto/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/referencia/objetos_globales/aggregateerror/index.html b/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html new file mode 100644 index 0000000000..524d0f9f5a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/@@iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html new file mode 100644 index 0000000000..65ac581204 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/@@species/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html new file mode 100644 index 0000000000..2f15ad345a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/@@unscopables/index.html b/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html new file mode 100644 index 0000000000..43dc771ae7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/concat/index.html b/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html new file mode 100644 index 0000000000..dc7dfc999d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/copywithin/index.html b/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html new file mode 100644 index 0000000000..e28b99c382 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html new file mode 100644 index 0000000000..89fef6475f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/every/index.html b/files/es/web/javascript/referencia/objetos_globales/array/every/index.html new file mode 100644 index 0000000000..540ebbdfa9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/fill/index.html b/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html new file mode 100644 index 0000000000..7113df34bd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/filter/index.html b/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html new file mode 100644 index 0000000000..dae88f3ece --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html @@ -0,0 +1,219 @@ +--- +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><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">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">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">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">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="brush: js">if (!Array.prototype.filter) + Array.prototype.filter = function(func, thisArg) { + 'use strict'; + if ( ! ((typeof func === 'Function') && this) ) + throw new TypeError(); + + var len = this.length >>> 0, + res = new Array(len), // preallocate array + c = 0, i = -1; + if (thisArg === undefined) + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func(t[i], i, t)) + res[c++] = t[i]; + else + while (++i !== len) + // checks to see if the key was set + if (i in this) + if (func.call(thisArg, t[i], i, t)) + res[c++] = t[i]; + + 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/referencia/objetos_globales/array/find/index.html b/files/es/web/javascript/referencia/objetos_globales/array/find/index.html new file mode 100644 index 0000000000..7de7850cca --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/findindex/index.html b/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html new file mode 100644 index 0000000000..c249a3b2df --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/flat/index.html b/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html new file mode 100644 index 0000000000..67d1b3a4c7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/flatmap/index.html b/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html new file mode 100644 index 0000000000..0a93f97675 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/foreach/index.html b/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html new file mode 100644 index 0000000000..bc6b693176 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/from/index.html b/files/es/web/javascript/referencia/objetos_globales/array/from/index.html new file mode 100644 index 0000000000..a11d0ebd53 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/includes/index.html b/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html new file mode 100644 index 0000000000..3831c7d73d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/index.html b/files/es/web/javascript/referencia/objetos_globales/array/index.html new file mode 100644 index 0000000000..e4358cf6d1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/array/index.html @@ -0,0 +1,451 @@ +--- +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'], + ['r','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 +r,c,a,d,r,a,c,t + +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,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/referencia/objetos_globales/array/indexof/index.html b/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html new file mode 100644 index 0000000000..7aad7773b1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/isarray/index.html b/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html new file mode 100644 index 0000000000..b2a115a814 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/join/index.html b/files/es/web/javascript/referencia/objetos_globales/array/join/index.html new file mode 100644 index 0000000000..ea9ba3e544 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html new file mode 100644 index 0000000000..ff7cb593f5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/lastindexof/index.html b/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html new file mode 100644 index 0000000000..19667a54af --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/length/index.html b/files/es/web/javascript/referencia/objetos_globales/array/length/index.html new file mode 100644 index 0000000000..cbbb1a46db --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/map/index.html b/files/es/web/javascript/referencia/objetos_globales/array/map/index.html new file mode 100644 index 0000000000..8b958a4945 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/observe/index.html b/files/es/web/javascript/referencia/objetos_globales/array/observe/index.html new file mode 100644 index 0000000000..13f16ef5d0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/array/observe/index.html @@ -0,0 +1,133 @@ +--- +title: Array.observe() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/observe +tags: + - Método(2) + - Vector +translation_of: Archive/Web/JavaScript/Array.observe +--- +<div>{{JSRef}}</div> + +<p>El método <strong><code>Array.observe()</code></strong> se utiliza para poder observar en forma asincrónica los cambios ocurridos en un vector, similar a {{jsxref("Object.observe()")}} para los objetos. Provee un flujo ordenado por orden de ocurrencia de los cambios ocurridos en el vector. Es equivalente a invocar <code>Object.observe()</code> con la lista de tipos aceptados: <code>["add", "update", "delete", "splice"]</code>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Array.observe(<var>arr</var>, <var>callback</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>El vector a ser observado.</dd> + <dt><code>callback</code></dt> + <dd>La función invocada con cada cambio dentro del vector con el siguiente argumento: + <dl> + <dt><code>changes</code></dt> + <dd>Un vector de objetos, cada uno representando un cambio. Las propiedades de estos objetos son: + <ul> + <li><strong><code>name</code></strong>: El nombre de la propiedad que ha cambiado.</li> + <li><strong><code>object</code></strong>: El vector modificado, despues de la modificación.</li> + <li><strong><code>type</code></strong>: Una cadena de caracteres indicando el tipo de cambio que ocurrió. Estos tipos son: <code>"add"</code>, <code>"update"</code>, <code>"delete"</code>, o <code>"splice"</code>.</li> + <li><strong><code>oldValue</code></strong>: El valor antes de ser modificado. Solo para los tipos <code>"update"</code> o <code>"delete"</code>.</li> + <li><strong><code>index</code></strong>: La posición del vector en la que ocurrio el cambio. Sólo para el tipo <code>"splice"</code>.</li> + <li><strong><code>removed</code></strong>: Un vector con los elementos borrados. Sólo para el tipo "splice".</li> + <li><strong><code>addedCount</code></strong>: La cantidad de elementos agregados. Sólo para el tipo "splice".</li> + </ul> + </dd> + </dl> + </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La función callback es invocada cada vez que ocurre un cambio en el vector, recibiendo como parámetro, un vector con todos los cambios ocurridos en el orden en que estos fueron realizados.</p> + +<div class="note"> +<p>Changes done via Array methods, such as <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a> will be reported as <code>"splice"</code> changes. Index assignment changes which do not change the length of the array may be reported as <code>"update"</code> changes.</p> + +<p>Los cambios realizados por medio de los metodos del objeto Array, como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">Array.prototype.pop()</a>, seran reportados como del tipo "splice". Los cambios realizados por indice, que no modifican la cantidad de elementos del vector, podrian ser reportados con el tipo "update".</p> +</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Mostrando_en_consola_los_diferentes_tipos_de_modificaciones">Mostrando en consola los diferentes tipos de modificaciones</h3> + +<pre class="brush: js">var arr = ['a', 'b', 'c']; + +Array.observe(arr, function(changes) { + console.log(changes); +}); + +arr[1] = 'B'; +// [{type: 'update', object: <arr>, name: '1', oldValue: 'b'}] + +arr[3] = 'd'; +// [{type: 'splice', object: <arr>, index: 3, removed: [], addedCount: 1}] + +arr.splice(1, 2, 'beta', 'gamma', 'delta'); +// [{type: 'splice', object: <arr>, index: 1, removed: ['B', 'c', 'd'], addedCount: 3}] +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p> + +<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("36")}}</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>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</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><a href="//stackoverflow.com/q/29269057/778272">Under what condition would Array.observe's “add” event trigger?</a></li> + <li>{{jsxref("Array.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/array/of/index.html b/files/es/web/javascript/referencia/objetos_globales/array/of/index.html new file mode 100644 index 0000000000..f57c7e2bc1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/pop/index.html b/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html new file mode 100644 index 0000000000..acc6d06885 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html new file mode 100644 index 0000000000..2098f514ad --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html @@ -0,0 +1,188 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype +tags: + - Array + - Arreglo + - JavaScript + - Property + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +<div>{{JSRef}}</div> + +<p>La propiedad <strong><code>Array.prototype</code></strong> representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.</p> + +<pre class="brush: js">// Si JavaScript no proporciona un método first() de forma nativa, +// agrega un nuevo método que devuelve el primer elemento de una matriz. + +if (!Array.prototype.first) { + Array.prototype.first = function() { + return this[0]; + } +} +</pre> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Las instancias {{jsxref("Array")}} heredan de <code>Array.prototype</code>. Al igual que con todos los constructores, puede cambiar el prototipo del constructor del objeto para realizar cambios en todas las instancias {{jsxref("Array")}} . Por ejemplo, puede agregar nuevos métodos y propiedades para extender todos los objetos <code>Array</code>. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.</p> + +<p>Un hecho poco conocido: <code>Array.prototype</code> en sí es un {{jsxref("Array")}}:</p> + +<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Properties" name="Properties">Propiedades</h2> + +<dl> + <dt><code>Array.prototype.constructor</code></dt> + <dd>Especifica la función que crea el prototipo de un objeto.</dd> + <dt>{{jsxref("Array.prototype.length")}}</dt> + <dd>Refleja el número de elementos en un array.</dd> + <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> + <dd>Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> +</dl> + +<h2 id="Methods" name="Methods">Métodos</h2> + +<h3 id="Mutator_methods" name="Mutator_methods">Métodos de mutación</h3> + +<p>Estos métodos modifican el array:</p> + +<dl> + <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> + <dd>Copia una secuencia de elementos dentro del array.</dd> + <dt>{{jsxref("Array.prototype.fill()")}}</dt> + <dd>Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.</dd> + <dt>{{jsxref("Array.prototype.pop()")}}</dt> + <dd>Elimina el último elemento de un array y devuelve dicho elemento.</dd> + <dt>{{jsxref("Array.prototype.push()")}}</dt> + <dd>Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</dd> + <dt>{{jsxref("Array.prototype.reverse()")}}</dt> + <dd>Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.</dd> + <dt>{{jsxref("Array.prototype.shift()")}}</dt> + <dd>Elimina el primer elemento de un array y devuelve dicho elemento.</dd> + <dt>{{jsxref("Array.prototype.sort()")}}</dt> + <dd>Ordena los elementos de un array y devuelve el array.</dd> + <dt>{{jsxref("Array.prototype.splice()")}}</dt> + <dd>Añade o elimina elementos de un array.</dd> + <dt>{{jsxref("Array.prototype.unshift()")}}</dt> + <dd>Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.</dd> +</dl> + +<h3 id="Accessor_methods" name="Accessor_methods">Métodos de consulta</h3> + +<p>Estos métodos no modifican el array y devuelven alguna representación del array.</p> + +<dl> + <dt>{{jsxref("Array.prototype.concat()")}}</dt> + <dd>Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).</dd> + <dt>{{jsxref("Array.prototype.includes()")}}</dt> + <dd>Determina si un array contiene cierto elemento, devolviendo <code>true</code> o <code>false</code> apropiadamente.</dd> + <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> + <dd>Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> + <dt>{{jsxref("Array.prototype.join()")}}</dt> + <dd>Une todos los elementos de un array en una cadena de texto.</dd> + <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> + <dd>Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> + <dt>{{jsxref("Array.prototype.slice()")}}</dt> + <dd>Extrae una sección de un array y devuelve un nuevo array.</dd> + <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Devuelve el array literal que representa al propio array especificado; puedes usar este valor para crear un nuevo array. Reemplaza al método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Array.prototype.toString()")}}</dt> + <dd>Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> + <dd>Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> +</dl> + +<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteración</h3> + +<p>Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (<code style="font-style: normal;">length</code>) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (<span style="font-family: consolas,monaco,andale mono,monospace;">callback</span>) no es visitado. Otros cambios sobre el array (establecer el valor o eliminar un elemento) podría afectar el resultado de la operación si el método visita el elemento después. Mientras que el comportamiento especifico de estos métodos en muchos casos es bien definido, no deberías delegar sobre eso con la finalidad de no confundir a otros que podrían leer tu código. Si debes modificar el array, copialo en un nuevo array en su lugar.</p> + +<dl> + <dt>{{jsxref("Array.prototype.entries()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice en el array.</dd> + <dt>{{jsxref("Array.prototype.every()")}}</dt> + <dd>Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.</dd> + <dt>{{jsxref("Array.prototype.filter()")}}</dt> + <dd>Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.</dd> + <dt>{{jsxref("Array.prototype.find()")}}</dt> + <dd>Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o <code>undefined</code> si no se halla ninguno.</dd> + <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> + <dd>Devuelve el índice hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o -1 si no se halla ninguno.</dd> +</dl> + +<dl> + <dt>{{jsxref("Array.prototype.forEach()")}}</dt> + <dd>Llama a una función para cada elemento del array.</dd> + <dt>{{jsxref("Array.prototype.keys()")}}</dt> + <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array.</dd> + <dt>{{jsxref("Array.prototype.map()")}}</dt> + <dd>Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.</dd> + <dt>{{jsxref("Array.prototype.reduce()")}}</dt> + <dd>Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.</dd> + <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> + <dd>Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.</dd> + <dt>{{jsxref("Array.prototype.some()")}}</dt> + <dd>Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.</dd> + <dt>{{jsxref("Array.prototype.values()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> + <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> +</dl> + +<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos (no estándar)</h3> + +<p>Muchos métodos en el objeto Javascript Array son diseñados para ser generalmente llamados para todos los objetos que "parecen" Arrays. Es decir, pueden ser usados sobre cualquier objeto que tenga una propiedad longitud (<code style="font-style: normal;">length</code>), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación <code><span style="font-family: consolas,monaco,andale mono,monospace;">array[5]</span></code>). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la <code>longitud</code> y propiedades numéricas del objeto sobre el cual son llamados. Otros, como {{jsxref("Array.reverse", "reverse")}}, requieren que las propiedades numéricas del objeto y la <code>longitud</code> sean mutables; estos métodos, por tanto, no pueden ser llamados sobre objetos como {{jsxref("String")}}, los cuales no permiten que su longitud o propiedades numéricas sintetizadas sean establecidas.</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<p> </p> + +<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.4.3.1', 'Array.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Se agregaron los métodos <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>Se agregó el método <code>includes()</code>.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> + +<div>{{Compat("javascript.builtins.Array.prototype")}}</div> + +<div id="compat-mobile"> </div> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/array/push/index.html b/files/es/web/javascript/referencia/objetos_globales/array/push/index.html new file mode 100644 index 0000000000..fc00ce7e7a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/reduce/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html new file mode 100644 index 0000000000..68d7a9cb2f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/reduceright/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html new file mode 100644 index 0000000000..cff59fddf4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/reverse/index.html b/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html new file mode 100644 index 0000000000..7399f8dcda --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/shift/index.html b/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html new file mode 100644 index 0000000000..7391f6c325 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/slice/index.html b/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html new file mode 100644 index 0000000000..e3ddd7e8a5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/some/index.html b/files/es/web/javascript/referencia/objetos_globales/array/some/index.html new file mode 100644 index 0000000000..d04b57b025 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/sort/index.html b/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html new file mode 100644 index 0000000000..ac28826327 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/splice/index.html b/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html new file mode 100644 index 0000000000..5d7992a2c4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html new file mode 100644 index 0000000000..0fc418ab47 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html new file mode 100644 index 0000000000..ffd8df0b3b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html new file mode 100644 index 0000000000..402f011e0f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/unobserve/index.html b/files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html new file mode 100644 index 0000000000..37cf23ef2e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html @@ -0,0 +1,127 @@ +--- +title: Array.unobserve() +slug: Web/JavaScript/Referencia/Objetos_globales/Array/unobserve +translation_of: Archive/Web/JavaScript/Array.unobserve +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método Array<strong>.unobserve()</strong> se utiliza para eliminar observadores asignados por {{jsxref("Array.observe()")}}.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Array.unobserve(<var>arr</var>, <var>callback</var>)</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>arr</code></dt> + <dd>El array para parar la observación.</dd> + <dt><code>callback</code></dt> + <dd>La referencia al observador para dejar de llamar <span id="result_box" lang="es"><span class="hps">cada vez que</span> <span class="hps">se realizan cambios</span> <span class="hps">en el a</span></span>rray <strong>arr</strong>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Array.unobserve()</code> debe ser llamado después de {{jsxref("Array.observe()")}} con el fin de eliminar un observador de un array.</p> + +<p><span id="result_box" lang="es"><span class="hps">El callback (llamada de retorno)</span> <span class="hps">debe</span> <span class="hps">ser una referencia a</span> <span class="hps">una función y no</span> <span class="hps">una función anónima</span><span>, ya que</span> <span class="hps">esta referencia</span> <span class="hps">se utilizará para</span> borrar <span class="hps">el</span> <span class="hps">observador</span> <span class="hps">anterior.</span> <span class="hps">Es inútil</span> <span class="hps">llamar</span> a </span><strong>Array.unobserve()</strong><span lang="es"><span class="hps"> con</span> <span class="hps">una función anónima</span> <span class="hps">como</span> <span class="hps">callback</span><span>, porque no va a</span> <span class="hps">eliminar ningún </span><span class="hps">observador.</span></span></p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Dejando_de_observar_un_array">Dejando de observar un array</h3> + +<pre class="brush: js">var arr = [1, 2, 3]; + +var observer = function(changes) { + console.log(changes); +} + +Array.observe(arr, observer); + +arr.push(4); +// [{type: "splice", object: <arr>, index: 3, removed:[], addedCount: 1}] + +Array.unobserve(arr, observer); + +arr.pop(); +// The callback wasn't called</pre> + +<h3 id="Utilizando_una_función_anónima">Utilizando una función anónima</h3> + +<pre class="brush: js">var persons = ['Khalid', 'Ahmed', 'Mohammed']; + +Array.observe(persons, function (changes) { + console.log(changes); +}); + +persons.shift(); +// [{type: "splice", object: <arr>, index: 0, removed: [ "Khalid" ], addedCount: 0 }] + +Array.unobserve(persons, function (changes) { + console.log(changes); +}); + +persons.push('Abdullah'); +// [{type: "splice", object: <arr>, index: 2, removed: [], addedCount: 1 }] +// The callback will always be called +</pre> + +<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>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</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>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html b/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html new file mode 100644 index 0000000000..4641a05d98 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/array/values/index.html b/files/es/web/javascript/referencia/objetos_globales/array/values/index.html new file mode 100644 index 0000000000..dbc76e8634 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/arraybuffer/@@species/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html new file mode 100644 index 0000000000..ab87242260 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/arraybuffer/bytelength/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html new file mode 100644 index 0000000000..e553024b1e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/arraybuffer/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html new file mode 100644 index 0000000000..4a83b5a24d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/arraybuffer/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html new file mode 100644 index 0000000000..8901cacfde --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html @@ -0,0 +1,68 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype +tags: + - ArrayBuffer + - JavaScript + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<p>La propiedad <strong><code>ArrayBuffer.prototype</code></strong> representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Las instancias de <code>ArrayBuffer</code> heredan de <code>ArrayBuffer.prototype</code>. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de <code>ArrayBuffer</code>.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>ArrayBuffer.prototype.constructor</dt> + <dd>Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar <code>ArrayBuffer</code>.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. <strong>Sólo lectura.</strong></dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>Retorna un nuevo <code>ArrayBuffer</code> cuyo contenido es una copia los bytes de este <code>ArrayBuffer</code> desde <code>begin</code>, incluido, hasta <code>end</code>, no incluido. Si <code>begin</code> o <code>end</code> son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.</dd> +</dl> + +<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-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> + +<div id="compat-mobile"> </div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html new file mode 100644 index 0000000000..924ab7ccef --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/boolean/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/index.html new file mode 100644 index 0000000000..17a0f7d9e9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/boolean/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html new file mode 100644 index 0000000000..e42f79f26b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getdate/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html new file mode 100644 index 0000000000..451f889003 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getday/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html new file mode 100644 index 0000000000..f384f21b71 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html new file mode 100644 index 0000000000..be63745dbd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html @@ -0,0 +1,124 @@ +--- +title: Date.prototype.getFullYear() +slug: Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear +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 del objeto de fecha especificado acorde al tiempo local.</p> + +<p>Es prefererible usar este método en sustitución del método <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear">getYear()</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>dateObj</var>.getFullYear()</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<p>Ninguno.</p> + +<h3 id="Devuelve">Devuelve</h3> + +<p>El valor devuelto por <code>getFullYear()</code> es un número absolute. Para fechas entre los años 1000 y 9999, <code>getFullYear()</code> devuelve un número de cuatro cifras, por ejemplo, 1995. Use esta función para obtener un año que cumpla con el efecto del año 2000.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_getFullYear">Usando <code>getFullYear()</code></h3> + +<p>El siguiente ejemplo asigna un valor de cuatro digitos con el año actual a la variable <code>year</code>.</p> + +<pre class="brush: js">var today = new Date(); +var year = today.getFullYear(); +</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('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.10', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}}</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 para Android</th> + <th>Firefox para móvil (Gecko)</th> + <th>IE para móvil</th> + <th>Opera para móvil</th> + <th>Safari para 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="Vea_también">Vea 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/referencia/objetos_globales/date/gethours/index.html b/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html new file mode 100644 index 0000000000..b669c976c7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getmilliseconds/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html new file mode 100644 index 0000000000..cf673a530a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getminutes/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html new file mode 100644 index 0000000000..9b144239b9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getmonth/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html new file mode 100644 index 0000000000..08a7e1d143 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getseconds/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html new file mode 100644 index 0000000000..875fe3f48b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/gettime/index.html b/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html new file mode 100644 index 0000000000..f08882be5e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getutcfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html new file mode 100644 index 0000000000..f2133bfc02 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/getutchours/index.html b/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html new file mode 100644 index 0000000000..1e7a7a1ce2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/index.html b/files/es/web/javascript/referencia/objetos_globales/date/index.html new file mode 100644 index 0000000000..20e05539e5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/now/index.html b/files/es/web/javascript/referencia/objetos_globales/date/now/index.html new file mode 100644 index 0000000000..6c611710bb --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/parse/index.html b/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html new file mode 100644 index 0000000000..15536775d7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html new file mode 100644 index 0000000000..200bae55bc --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html @@ -0,0 +1,200 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype +tags: + - Date + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Date +--- +<div> + {{JSRef("Objetos_globales", "Date")}}</div> +<h2 id="Resumen">Resumen</h2> +<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> +<div> + {{js_property_attributes(0,0,1)}}</div> +<h2 class="noinclude" id="Propriedades">Propriedades</h2> +<dl> + <dt class="noinclude"> + <code>Date.prototype.constructor</code></dt> + <dd> + </dd> +</dl> +<div> + {{ jsOverrides("Object", "properties", "constructor") }}</div> +<h2 id="Métodos">Métodos</h2> +<dl> + <dt> + {{jsxref("Date.prototype.getDate()")}}</dt> + <dd> + Devuelve el día del mes de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getDay()")}}</dt> + <dd> + Devuelve el día de la semana de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd> + Devuelve el año de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getHours()")}}</dt> + <dd> + Devuelve la hora de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd> + Devuelve los milisegundos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd> + Devuelve los minutos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getMonth()")}}</dt> + <dd> + Devuelve el mes de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd> + Devuelve los segundos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.getTime()")}}</dt> + <dd> + Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd> + Devuelve la diferencia horaria en minutos para la zona geográfica actual.</dd> + <dt> + {{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd> + Devuelve el día del mes de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd> + Devuelve el día de la semana de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd> + Devuelve el día el año de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd> + Devuelve las horas de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd> + Devuelve los milisegundos de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd> + Devuelve los minutos de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd> + Devuelve el mes de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd> + Devuelve los segundos de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}</dt> + <dd> + Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.</dd> + <dt> + {{jsxref("Date.prototype.setDate()")}}</dt> + <dd> + Establece el día del mes de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd> + Establece el año completo de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setHours()")}}</dt> + <dd> + Establece las horas de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd> + Establece los milisegundos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd> + Establece los minutos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setMonth()")}}</dt> + <dd> + Establece el mes de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd> + Establece los segundos de la fecha especificada según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setTime()")}}</dt> + <dd> + Establece el valor del objeto <code>Date</code> según la hora local.</dd> + <dt> + {{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd> + Establece el día del mes de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd> + Establece el año completo de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd> + Establece la hora de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd> + Establece los milisegundos de la fecha especificada según la hora universal..</dd> + <dt> + {{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd> + Establece los minutos de la fecha especificada según la hora universal..</dd> + <dt> + {{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd> + Establece el mes de la fecha especificada según la hora universal.</dd> + <dt> + {{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd> + Establece los segundos de la fecha especificada según la hora universal..</dd> + <dt> + {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}</dt> + <dd> + Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.</dd> + <dt> + {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}</dt> + <dd> + Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.</dd> + <dt> + {{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd> + Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.</dd> + <dt> + {{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd> + Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.</dd> + <dt> + {{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd> + Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.</dd> + <dt> + {{jsxref("Date.prototype.toSource()")}}</dt> + <dd> + Devuelve un literal que representa al objeto <code>Date</code> especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.</dd> + <dt> + {{jsxref("Date.prototype.toString()")}}</dt> + <dd> + Devuelve una cadena representando el objeto <code>Date</code> especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.</dd> + <dt> + {{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd> + Convierte una fecha en una cadena, usando las reglas horarias universales.</dd> + <dt> + {{jsxref("Date.prototype.valueOf()")}}</dt> + <dd> + Devuelve el valor primitivo de un objeto <code>Date</code>. Sobreescribe el método {{jsxref("Object.valueOf()")}}.</dd> +</dl> +<p>{{ jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf") }}</p> diff --git a/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html b/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html new file mode 100644 index 0000000000..e272f78fc3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/setmonth/index.html b/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html new file mode 100644 index 0000000000..04aa9ec82a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/todatestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html new file mode 100644 index 0000000000..b0a3b5f431 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/toisostring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html new file mode 100644 index 0000000000..b3461f355d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/tojson/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html new file mode 100644 index 0000000000..7d44a716c2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/tolocaledatestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html new file mode 100644 index 0000000000..26b773ba9a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html new file mode 100644 index 0000000000..77f48344d3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/tolocaletimestring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html new file mode 100644 index 0000000000..c3954096f6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/toutcstring/index.html b/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html new file mode 100644 index 0000000000..4742a6eacf --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/date/utc/index.html b/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html new file mode 100644 index 0000000000..605ae2819d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/decodeuri/index.html b/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html new file mode 100644 index 0000000000..dc8264eebe --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/decodeuricomponent/index.html b/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html new file mode 100644 index 0000000000..05d9bd4b52 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/encodeuri/index.html b/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html new file mode 100644 index 0000000000..51277231e0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/encodeuricomponent/index.html b/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html new file mode 100644 index 0000000000..53af149970 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/constructor_error/index.html b/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html new file mode 100644 index 0000000000..114831c512 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/error/constructor_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/referencia/objetos_globales/error/filename/index.html b/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html new file mode 100644 index 0000000000..8e633934e0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/index.html b/files/es/web/javascript/referencia/objetos_globales/error/index.html new file mode 100644 index 0000000000..03cbd038da --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/linenumber/index.html b/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html new file mode 100644 index 0000000000..0efec0696f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/message/index.html b/files/es/web/javascript/referencia/objetos_globales/error/message/index.html new file mode 100644 index 0000000000..3f14983d6e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/name/index.html b/files/es/web/javascript/referencia/objetos_globales/error/name/index.html new file mode 100644 index 0000000000..841cc7cbc4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html new file mode 100644 index 0000000000..075d9a9b3f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html @@ -0,0 +1,153 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Error +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Error.prototype</strong></code> representa el prototipo del constructor {{jsxref("Error")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de <code>Error.prototype</code>. Como todas las funciones constructoras, se puede usar el protoipo del constructor para añadir propiedades o métodos a todas las instancias creadas con este constructor.</p> + +<h2 id="Properties">Properties</h2> + +<h3 id="Propiedades_estándar">Propiedades estándar</h3> + +<dl> + <dt><code>Error.prototype.constructor</code></dt> + <dd>Especifica la función que crea una instancia del prototipo.</dd> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Mensaje de error.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>Nombre del error.</dd> +</dl> + +<h3 id="Extensiones_específicas_del_proveedor">Extensiones específicas del proveedor</h3> + +<div>{{non-standard_header}}</div> + +<h4 id="Microsoft">Microsoft</h4> + +<dl> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>Número de error.</dd> +</dl> + +<h4 id="Mozilla">Mozilla</h4> + +<dl> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Ruta del archivo que lanzó el error.</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>Número de fila en el archivo que lanzó el error.</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>Número de columna en el archivo que lanzó el error.</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>Seguimiento de la pila.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Devuelve una cadena que contiene el codígo del objeto {{jsxref("Error")}}; se puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<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.11.3.1', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</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")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html new file mode 100644 index 0000000000..fb1b429884 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/error/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html new file mode 100644 index 0000000000..f4ea4a44b9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/escape/index.html b/files/es/web/javascript/referencia/objetos_globales/escape/index.html new file mode 100644 index 0000000000..4925618b0e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/eval/index.html b/files/es/web/javascript/referencia/objetos_globales/eval/index.html new file mode 100644 index 0000000000..52375445c4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/evalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html new file mode 100644 index 0000000000..13fbe371e4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/funcionesasíncronas/index.html b/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html new file mode 100644 index 0000000000..bdb37b012c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/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/referencia/objetos_globales/function/apply/index.html b/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html new file mode 100644 index 0000000000..07f47b42f2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/arguments/index.html b/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html new file mode 100644 index 0000000000..f0f8f6ca90 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/arity/index.html b/files/es/web/javascript/referencia/objetos_globales/function/arity/index.html new file mode 100644 index 0000000000..f79bf24bc4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/function/arity/index.html @@ -0,0 +1,32 @@ +--- +title: Function.arity +slug: Web/JavaScript/Referencia/Objetos_globales/Function/arity +tags: + - JavaScript + - Obsoleto + - Propiedad + - Sin Implementación + - función +translation_of: Archive/Web/JavaScript/Function.arity +--- +<div>{{JSRef}} {{Obsolete_Header}}</div> + +<p class="note">La propiedad <code><strong>arity</strong></code> regresa el número de argumentos esperados por la función, sin embargo, ya no existe y ha sido remplazada por la propiedad {{jsxref("Function.prototype.length")}} .</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Implementada en JavaScript 1.2. extraida en JavaScript 1.4.</p> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Function.arity")}}</p> +</div> + +<h2 id="Ver_más">Ver más</h2> + +<ul> + <li>{{jsxref("Function.prototype.length")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html b/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html new file mode 100644 index 0000000000..bdc7b5b73c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/call/index.html b/files/es/web/javascript/referencia/objetos_globales/function/call/index.html new file mode 100644 index 0000000000..4200c5d2a5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/caller/index.html b/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html new file mode 100644 index 0000000000..942df69a68 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/displayname/index.html b/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html new file mode 100644 index 0000000000..d464266838 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/función/index.html b/files/es/web/javascript/referencia/objetos_globales/function/función/index.html new file mode 100644 index 0000000000..af4dff0361 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/function/función/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/referencia/objetos_globales/function/index.html b/files/es/web/javascript/referencia/objetos_globales/function/index.html new file mode 100644 index 0000000000..5b586f3611 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/isgenerator/index.html b/files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html new file mode 100644 index 0000000000..7c5dd089d4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html @@ -0,0 +1,90 @@ +--- +title: Function.prototype.isGenerator() +slug: Web/JavaScript/Referencia/Objetos_globales/Function/isGenerator +translation_of: Archive/Web/JavaScript/Function.isGenerator +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <code><strong>isGenerator()</strong></code> determina si una función es un <a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">generador</a>.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code><var>fun</var>.isGenerator()</code></pre> + +<h2 id="Descripción">Descripción</h2> + +<p>El método <code>isGenerator()</code> determina si una función es un <a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">generador</a>. Fue parte de una propuesta del proceso de estandarización "Harmony", pero no fue incluido en la especificación ECMAScript 6.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">function f() {} + +function* g() { + yield 42; +} + +console.log('f.isGenerator() = ' + f.isGenerator()); // f.isGenerator() = false +console.log('g.isGenerator() = ' + g.isGenerator()); // g.isGenerator() = true +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No es parte de ninguna especificación. Implementado en JavaScript 1.8.6.</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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("5.0")}}</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>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("5.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><a href="/es/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/function/length/index.html b/files/es/web/javascript/referencia/objetos_globales/function/length/index.html new file mode 100644 index 0000000000..7638859bba --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/name/index.html b/files/es/web/javascript/referencia/objetos_globales/function/name/index.html new file mode 100644 index 0000000000..2440bd60f1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html new file mode 100644 index 0000000000..110de332cc --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html @@ -0,0 +1,64 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef("Objetos_globales", "Function")}}</div> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>Un valor desde cuyas instancias de una clase particular son creados. Cada objeto que puede ser creado por la invocación a la función constructora posee una propiedad prototype asociada.</p> + +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> + +<p>Puede añadir propiedades o métodos a una clase existente mediante la adición de ellos al prototipo asociado con la función constructora para esa clase.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{Deprecated_inline}}</dt> + <dd>Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una <code>Function</code>, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.</dd> + <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt> + <dd>Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.</dd> + <dt>{{jsxref("Function.caller")}}</dt> + <dd>Especifica la función que invoca la ejecución de la función actual (no estándar).</dd> + <dt>{{jsxref("Function.constructor")}}</dt> + <dd>Especifica la función que crea un prototipo de objeto.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Specifica el número de argumentos esperados por la función.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>El nombre de la función (no forma parte del estándar).</dd> + <dt>{{jsxref("Function.prototype")}}</dt> + <dd>Permite añadir propiedades a los objetos función (ambos, los construidos usando <code>Function</code> y los declarados usando una declaración de función o una expresión de función).</dd> +</dl> + +<div>{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}</div> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).</dd> + <dt>{{jsxref("Function.prototype.toSource()")}}</dt> + <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> +</dl> + +<div>{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}</div> + +<dl> + <dt> </dt> +</dl> + +<h2 id="Vea_También">Vea También</h2> + +<ul> + <li>{{jsxref("Objetos_globales/Function", "Function")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html new file mode 100644 index 0000000000..3cee3c1d4c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/function/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html new file mode 100644 index 0000000000..b5ee70147e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/generador/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/index.html new file mode 100644 index 0000000000..ec92ca413f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/generador/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/referencia/objetos_globales/generador/next/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html new file mode 100644 index 0000000000..6b6bf61cbe --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/generador/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/referencia/objetos_globales/generador/return/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html new file mode 100644 index 0000000000..649d5b8dec --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/generador/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/referencia/objetos_globales/generador/throw/index.html b/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html new file mode 100644 index 0000000000..9f4cd76fbe --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/generador/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/referencia/objetos_globales/index.html b/files/es/web/javascript/referencia/objetos_globales/index.html new file mode 100644 index 0000000000..9946b3f648 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/infinity/index.html new file mode 100644 index 0000000000..2a0a716eeb --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/internalerror/constructor_internalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html new file mode 100644 index 0000000000..ba895aaff9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_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/referencia/objetos_globales/internalerror/index.html b/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html new file mode 100644 index 0000000000..e7754d1575 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/intl/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/index.html new file mode 100644 index 0000000000..c1a2a47243 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/intl/numberformat/format/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html new file mode 100644 index 0000000000..713302ea3c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/intl/numberformat/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html new file mode 100644 index 0000000000..7ee880d0e8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/intl/relativetimeformat/index.html b/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html new file mode 100644 index 0000000000..fc15049fa6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/isfinite/index.html b/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html new file mode 100644 index 0000000000..1227071c44 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/isnan/index.html b/files/es/web/javascript/referencia/objetos_globales/isnan/index.html new file mode 100644 index 0000000000..d2607d0134 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/json/index.html b/files/es/web/javascript/referencia/objetos_globales/json/index.html new file mode 100644 index 0000000000..2744fb71e5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/json/parse/index.html b/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html new file mode 100644 index 0000000000..d8816fe8ff --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/json/stringify/index.html b/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html new file mode 100644 index 0000000000..13f508d7f7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html new file mode 100644 index 0000000000..67e8288ad2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html new file mode 100644 index 0000000000..cbd6e02a50 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html new file mode 100644 index 0000000000..76a4ca10b7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/foreach/index.html b/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html new file mode 100644 index 0000000000..00d8e85ff8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/get/index.html b/files/es/web/javascript/referencia/objetos_globales/map/get/index.html new file mode 100644 index 0000000000..7f53d850e3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/has/index.html b/files/es/web/javascript/referencia/objetos_globales/map/has/index.html new file mode 100644 index 0000000000..c556a00dae --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/index.html b/files/es/web/javascript/referencia/objetos_globales/map/index.html new file mode 100644 index 0000000000..e3ad7812b7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html new file mode 100644 index 0000000000..6f67e49dee --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html new file mode 100644 index 0000000000..16fc79a952 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html @@ -0,0 +1,134 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Map +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa el prototipo del constructor {{jsxref("Map")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>La instancia de {{jsxref("Map")}} hereda de {{jsxref("Map.prototype")}}. Puedes utilizar el constructor del prototipo del objeto para agregar propiedades o métodos a todas las instancias de <code>Map</code>.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd>Devuelve el número de conjuntos de llave/valor en el objeto <code>Map</code>.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>Elimina todos los conjuntos de llave/valor del objeto <code>Map</code>.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> + <dd>Elimina cualquier valor asociado a la <code>llave</code> y devuelve el valor que <code>Map.prototype.has(key)</code> tenía previamente. Después <code>Map.prototype.has(key)</code> devolverá <code>false</code>.</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto <code>Map</code>, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> + <dd>Devuelve el valor asociado a la <code>llave</code>, o <code>undefined</code> si no tiene ninguno.</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> + <dd>Devuelve un booleano que indica si un valor se ha asociado a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">llave</span></font> en el objeto <code>Map</code> o no se ha asociado.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene las <strong>llaves</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> + <dd>Establece un valor para la <code>llave</code> en el objeto <code>Map</code>. Devuelve el objeto <code>Map</code>.</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene los <strong>valores</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> +</dl> + +<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', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Edge</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>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("13") }}</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>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>{{CompatNo}}</td> + <td>38</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("13")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td> + <p>8</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/map/set/index.html b/files/es/web/javascript/referencia/objetos_globales/map/set/index.html new file mode 100644 index 0000000000..27faa5a1a6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/size/index.html b/files/es/web/javascript/referencia/objetos_globales/map/size/index.html new file mode 100644 index 0000000000..3ca4d446db --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/map/values/index.html b/files/es/web/javascript/referencia/objetos_globales/map/values/index.html new file mode 100644 index 0000000000..c81b54dbe7 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/abs/index.html b/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html new file mode 100644 index 0000000000..eb286dcc59 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/acos/index.html b/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html new file mode 100644 index 0000000000..3280a9b17f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/acosh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html new file mode 100644 index 0000000000..8819e3c69a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/asin/index.html b/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html new file mode 100644 index 0000000000..1a6c78d6a5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/asinh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html new file mode 100644 index 0000000000..9a3204a6a8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/atan/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html new file mode 100644 index 0000000000..abb0453e6c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/atan2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html new file mode 100644 index 0000000000..7b0dc147da --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/atanh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html new file mode 100644 index 0000000000..85022b4138 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/cbrt/index.html b/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html new file mode 100644 index 0000000000..350bc03054 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/ceil/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html new file mode 100644 index 0000000000..52b43cd3a2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/cos/index.html b/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html new file mode 100644 index 0000000000..82a0793769 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/e/index.html new file mode 100644 index 0000000000..2fdc92d125 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/exp/index.html b/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html new file mode 100644 index 0000000000..ca60758600 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/expm1/index.html b/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html new file mode 100644 index 0000000000..d8679d9230 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/floor/index.html b/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html new file mode 100644 index 0000000000..867f3e8dac --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/fround/index.html b/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html new file mode 100644 index 0000000000..73d773e5b0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/hypot/index.html b/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html new file mode 100644 index 0000000000..21d6850e44 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/index.html b/files/es/web/javascript/referencia/objetos_globales/math/index.html new file mode 100644 index 0000000000..bdf0d21e74 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/ln10/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html new file mode 100644 index 0000000000..8b9f40b77b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/ln2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html new file mode 100644 index 0000000000..4a447f677a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/log/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log/index.html new file mode 100644 index 0000000000..d243cd0501 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/log10/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html new file mode 100644 index 0000000000..dc97208b63 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/log10e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html new file mode 100644 index 0000000000..755b6ceb1a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/log2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html new file mode 100644 index 0000000000..b394270684 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/log2e/index.html b/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html new file mode 100644 index 0000000000..f9593b4bc6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/max/index.html b/files/es/web/javascript/referencia/objetos_globales/math/max/index.html new file mode 100644 index 0000000000..0e0f82881c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/min/index.html b/files/es/web/javascript/referencia/objetos_globales/math/min/index.html new file mode 100644 index 0000000000..a2dbf8348a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/pi/index.html b/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html new file mode 100644 index 0000000000..d4428498cd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/pow/index.html b/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html new file mode 100644 index 0000000000..7185cffede --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/random/index.html b/files/es/web/javascript/referencia/objetos_globales/math/random/index.html new file mode 100644 index 0000000000..ace95bc0cf --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/round/index.html b/files/es/web/javascript/referencia/objetos_globales/math/round/index.html new file mode 100644 index 0000000000..0257148e69 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/seno/index.html b/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html new file mode 100644 index 0000000000..a89a6e635e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/math/seno/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/referencia/objetos_globales/math/sign/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html new file mode 100644 index 0000000000..3c48027556 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/sqrt/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html new file mode 100644 index 0000000000..a3977c6f08 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/sqrt1_2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html new file mode 100644 index 0000000000..de9bd99eb9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/sqrt2/index.html b/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html new file mode 100644 index 0000000000..7e23295f25 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/tan/index.html b/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html new file mode 100644 index 0000000000..8a773b0da5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/tanh/index.html b/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html new file mode 100644 index 0000000000..138c466b37 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/math/trunc/index.html b/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html new file mode 100644 index 0000000000..9efe511927 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/nan/index.html b/files/es/web/javascript/referencia/objetos_globales/nan/index.html new file mode 100644 index 0000000000..f107f1bb3c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/null/index.html b/files/es/web/javascript/referencia/objetos_globales/null/index.html new file mode 100644 index 0000000000..94d1a392c5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/index.html b/files/es/web/javascript/referencia/objetos_globales/number/index.html new file mode 100644 index 0000000000..72c1425b8b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/isfinite/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html new file mode 100644 index 0000000000..f26af9f671 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/isinteger/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html new file mode 100644 index 0000000000..6fdafca32e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/isnan/index.html b/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html new file mode 100644 index 0000000000..cc9c62274c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/issafeinteger/index.html b/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html new file mode 100644 index 0000000000..b12c4cf4d6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/max_safe_integer/index.html b/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html new file mode 100644 index 0000000000..e5fa9df144 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/max_value/index.html b/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html new file mode 100644 index 0000000000..60c3d04e95 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/min_value/index.html b/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html new file mode 100644 index 0000000000..dadda2e337 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/nan/index.html b/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html new file mode 100644 index 0000000000..79db15a598 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/negative_infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html new file mode 100644 index 0000000000..2e2d7d1573 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/parsefloat/index.html b/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html new file mode 100644 index 0000000000..6285aa9b5a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/parseint/index.html b/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html new file mode 100644 index 0000000000..e899827599 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/positive_infinity/index.html b/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html new file mode 100644 index 0000000000..41d101a569 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html new file mode 100644 index 0000000000..721da0526c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html @@ -0,0 +1,15 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype +tags: + - JavaScript + - Number + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Number +--- +<div> + {{JSRef("Objetos_globales", "Number")}}</div> +<h3 id="Resumen" name="Resumen">Resumen</h3> +<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase. Para información acerca de prototipos.</p> +<div class="noinclude"> + </div> diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html new file mode 100644 index 0000000000..f11ccc3938 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html new file mode 100644 index 0000000000..d0c28b1431 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/toprecision/index.html b/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html new file mode 100644 index 0000000000..7a5110d7a9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html new file mode 100644 index 0000000000..f911fa271e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/number/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html new file mode 100644 index 0000000000..588c421746 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/__definegetter__/index.html b/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html new file mode 100644 index 0000000000..fceb708912 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/__lookupgetter__/index.html b/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html new file mode 100644 index 0000000000..8292222a38 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/assign/index.html b/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html new file mode 100644 index 0000000000..17de417d75 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/constructor/index.html b/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html new file mode 100644 index 0000000000..3871c41fe3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/count/index.html b/files/es/web/javascript/referencia/objetos_globales/object/count/index.html new file mode 100644 index 0000000000..74b387457d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/count/index.html @@ -0,0 +1,82 @@ +--- +title: Object.prototype.__count__ +slug: Web/JavaScript/Referencia/Objetos_globales/Object/count +translation_of: Archive/Web/JavaScript/Object.count +--- +<div>{{JSRef}} {{obsolete_header("2")}}</div> + +<p>La propiedad <strong><code>__count__</code></strong> es usada para almacenar el número de propiedades enumerables de un objeto, pero esta ha sido eliminada.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code><var>obj</var>.__count__</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: js">{ 1: 1 }.__count__ // 1 +[].__count__ // 0 +[1].__count__ // 1 +[1, /* hole */, 2, 3].__count__ // 3 +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>No forma parte de ninguna especificación.</p> + +<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>{{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>{{CompatNo}}</td> + <td>{{CompatNo}}</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><a class="external" href="http://whereswalden.com/2010/04/06/more-changes-coming-to-spidermonkey-the-magical-__count__-property-of-objects-is-being-removed/">[Blog post] More changes coming to SpiderMonkey: the magical __count__ property is being removed</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/create/index.html b/files/es/web/javascript/referencia/objetos_globales/object/create/index.html new file mode 100644 index 0000000000..94608d1c58 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/defineproperties/index.html b/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html new file mode 100644 index 0000000000..3002dd200d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/defineproperty/index.html b/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html new file mode 100644 index 0000000000..f971d5a131 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html new file mode 100644 index 0000000000..98aff1178a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/freeze/index.html b/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html new file mode 100644 index 0000000000..890d0d07b4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/fromentries/index.html b/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html new file mode 100644 index 0000000000..023cc5f8ca --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/getnotifier/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html new file mode 100644 index 0000000000..91521354cc --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html @@ -0,0 +1,92 @@ +--- +title: Object.getNotifier() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/getNotifier +tags: + - JavaScript + - Método(2) + - No estándar(2) + - Objeto +translation_of: Archive/Web/JavaScript/Object.getNotifier +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <strong><code>Object.getNotifer()</code></strong> es usado para crear un objeto que permita gatillar un cambio sinteticamente.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.getNotifier(<em>obj</em>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto del cuál se obtiene el notificador.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>El notificador es usado para gatillar cambios sinteticos que serán observados por <code>Object.observe()</code>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal specification.</a></p> + +<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("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</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>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Object.unobserve()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html new file mode 100644 index 0000000000..fb2eaf68da --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/getownpropertydescriptors/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html new file mode 100644 index 0000000000..9585fa80e8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/getownpropertynames/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html new file mode 100644 index 0000000000..5c3819045a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/getownpropertysymbols/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html new file mode 100644 index 0000000000..cf8be23f59 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/getprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html new file mode 100644 index 0000000000..a9b50ec2ec --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/hasownproperty/index.html b/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html new file mode 100644 index 0000000000..d84e5d6a52 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/index.html b/files/es/web/javascript/referencia/objetos_globales/object/index.html new file mode 100644 index 0000000000..99089bd28e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/is/index.html b/files/es/web/javascript/referencia/objetos_globales/object/is/index.html new file mode 100644 index 0000000000..926357d0ab --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/isextensible/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html new file mode 100644 index 0000000000..30082032ea --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/isfrozen/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html new file mode 100644 index 0000000000..9a2bc2ee94 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/isprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html new file mode 100644 index 0000000000..8275ebafac --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/issealed/index.html b/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html new file mode 100644 index 0000000000..c28437561a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/keys/index.html b/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html new file mode 100644 index 0000000000..d6bd068f2f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/nosuchmethod/index.html b/files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html new file mode 100644 index 0000000000..d7422b2a3d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html @@ -0,0 +1,198 @@ +--- +title: Object.prototype.__noSuchMethod__ +slug: Web/JavaScript/Referencia/Objetos_globales/Object/noSuchMethod +tags: + - JavaScript + - No-estándar + - Objeto + - Obsoleto + - Propiedad + - Prototipo +translation_of: Archive/Web/JavaScript/Object.noSuchMethod +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko43")}}</div> + +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("Safari14")}}</div> + +<p>La <strong><code>__noSuchMethod__</code></strong> se usa para referenciar una función que debe ejecutarse cuando se llama a un método inexistente en un objeto, pero esta función no ya no está disponible.</p> + + + +<p>Mientras <code><strong>__noSuchMethod__</strong></code> a sido eliminado, la especificación ECMAScript 2015 tiene el objeto {{JSxRef("Proxy")}} , el cual puede lograr lo siguiente (y más).</p> + +<h2 id="Sintaxis_de_data">Sintaxis de data</h2> + +<pre>//EXample 2 obj.__noSuchMetod__ = id</pre> + +<p>Otros ejemplos como fun</p> + +<pre class="syntaxbox"><code><var>obj</var>.__noSuchMethod__ = <var>fun</var></code></pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>fun</code></dt> + <dd>Una función que toma la forma</dd> + <dd> + <pre class="brush: js"><code>function (<var>id</var>, <var>args</var>) { . . . }</code></pre> + + <dl> + <dt><code>id</code></dt> + <dd>El nombre del método inexistente que fue llamado</dd> + <dt><code>args</code></dt> + <dd>Un array de los argumentos pasados al método</dd> + </dl> + </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Por defecto, un intento de llamar a un método que no existe en un objeto tiene como resultado {{JSxRef("TypeError")}}. Este comportamiento puede evitarse definiendo una función en el miembro <code>__noSuchMethod__</code> de ese objeto. La función toma dos argumentos, el primero es el nombre del método intentado y el segundo es un array de los argumentos que fueron pasados en el método de llamada. El segundo argumento es un array real (es decir, hereda a través de la cadena {{JSxRef("Array.prototype")}}) y no el objeto array con el <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/arguments">objeto arguments</a>.</p> + +<p>Si no se puede llamar a este método, ya sea <code>undefined</code> por defecto, como si se hubiera eliminado, o si se ha configurado manualmente como no funcional, el motor JavaScript volverá a lanzar <code>TypeError</code>s.</p> + +<h2 id="Esto_es_creado_por_esto">Esto es creado por esto:</h2> + +<p>Director de traductor de grupos:</p> + +<h4 id="Vicente_Oliver">Vicente Oliver</h4> + +<h4 id="titox31">titox31</h4> + + + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Simple_test_of___noSuchMethod__">Simple test of <code>__noSuchMethod__</code></h3> + +<pre class="brush: js">var o = { + __noSuchMethod__: function(id, args) { + console.log(id, '(' + args.join(', ') + ')'); + } +}; + +o.foo(1, 2, 3); +o.bar(4, 5); +o.baz(); + +// Output +// foo (1, 2, 3) +// bar (4, 5) +// baz () +</pre> + +<h3 id="Using___noSuchMethod___to_simulate_multiple_inheritance">Using <code>__noSuchMethod__</code> to simulate multiple inheritance</h3> + +<p>A continuación se muestra un ejemplo de código que implementa una forma primitiva de la herencia múltiple.</p> + +<pre class="brush: js">// Doesn't work with multiple inheritance objects as parents +function noMethod(name, args) { + var parents = this.__parents_; + + // Go through all parents + for (var i = 0; i < parents.length; i++) { + // If we find a function on the parent, we call it + if (typeof parents[i][name] == 'function') { + return parents[i][name].apply(this, args); + } + } + + // If we get here, the method hasn't been found + throw new TypeError; +} + +// Used to add a parent for multiple inheritance +function addParent(obj, parent) { + // If the object isn't initialized, initialize it + if (!obj.__parents_) { + obj.__parents_ = []; + obj.__noSuchMethod__ = noMethod; + } + + // Add the parent + obj.__parents_.push(parent); +} +</pre> + +<p>Un ejemplo de cómo utilizar esta idea se muestra a continuación.</p> + +<pre class="brush: js">// Example base class 1 +function NamedThing(name) { + this.name = name; +} + +NamedThing.prototype = { + getName: function() { return this.name; }, + setName: function(newName) { this.name = newName; } +} +function String(bash) { + this.close =javaOpenDOM ; +console.info(bash with DOM User with 30pok to 40000km/h to +20years) +; + +} +// Example base class 2 +function AgedThing(age) { + this.age = age; +} + +AgedThing.prototype = { + getAge: function() { return this.age; }, + setAge: function(age) { this.age = age; } +} + +// Child class. inherits from NamedThing and AgedThing +// as well as defining address +function Person(name, age, address){ + addParent(this, NamedThing.prototype); + NamedThing.call(this, name); + addParent(this, AgedThing.prototype); + AgedThing.call(this, age); + this.address = address; +} + +Person.prototype = { + getAddr: function() { return this.address; }, + setAddr: function(addr) { this.address = addr; } +} + +var bob = new Person('bob', 25, 'New York'); + +console.log('getAge is ' + (('getAge' in bob) ? 'in' : 'not in') + ' bob'); +// getAge is not in bob + +console.log("bob's age is: " + bob.getAge()); +// bob's age is: 25 + +console.log('getName is ' + (('getName' in bob) ? 'in' : 'not in') + ' bob'); +// getName is not in bob + +console.log("bob's name is: " + bob.getName()); +// bob's name is: bob + +console.log('getAddr is ' + (('getAddr' in bob) ? 'in' : 'not in') + ' bob'); +// getAddr is in bob + +console.log("bob's address is: " + bob.getAddr()); +// bob's address is: New York +</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>No forma parte de ninguna especificación. Esta característica ha sido eliminada, vea {{bug(683218)}}.</p> + +<blockquote> +<h2 id="Alias_de___noSuchMetod__">Alias de __noSuchMetod__</h2> + +<p>aliasduplicate.lopen_bash</p> + +<p>hamlStyluslopen</p> +</blockquote> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div class="hidden">La tabla de compatibilidad de esta página se genera a partir de 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íenos un mensaje.</div> + +<p>{{Compat("javascript.builtins.Object.noSuchMethod")}}</p> +</div> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html b/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html new file mode 100644 index 0000000000..8bf0fd1e5b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/observe/index.html @@ -0,0 +1,188 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/observe +translation_of: Archive/Web/JavaScript/Object.observe +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p>El método <strong><code>Object.observe() </code></strong>es usado para observar de forma asíncrona cambios sobre un objeto. Este método transmite información sobre cambios en el objeto, en el orden en que estos ocurren.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>[, <var>acceptList</var>])</code></pre> + +<h3 id="Parámetros">Parámetros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto que será observado.</dd> + <dt><code>callback</code></dt> + <dd>La función llamada cada vez que un cambio es realizado. Esta función recibe el siguiente argumento:</dd> + <dd> + <dl> + <dt><code>changes</code></dt> + <dd>Una cadena (<em>Array</em>) de objetos, cada uno de los cuales representa un cambio. Las propiedades de estos objetos son: + <ul> + <li><strong><code>name</code></strong>: El nombre de la propiedad que fue cambiada.</li> + <li><strong><code>object</code></strong>: El objeto con el cambio ya realizado.</li> + <li><strong><code>type</code></strong>: Una cadena (<em>String</em>), indicando el tipo de cambio que ocurrió. Puede ser "<em>add</em>" (añadir), "<em>update" </em>(actualizar) o "<em>delete</em>" (borrar) .</li> + <li><strong><code>oldValue</code></strong>: Sólo válido para los tipos (<em>type</em>) <em>"</em><em>update" </em>o <em>"delete"</em>. Esta propiedad representa el valor antes de que haya ocurrido el cambio.</li> + </ul> + </dd> + </dl> + </dd> + <dt><code>acceptList</code></dt> + <dd>La lista de tipos de cambios que serán observados en el objeto dado, y que serán pasados a la función callback dada. Si este parámetro es omitido, se utilizará de forma predeterminada la cadena (<em>Array</em>) <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>La función <strong><code>callback</code> </strong>es llamada o ejecutada cada vez que un cambio es aplicado sobre el objeto <strong><code>obj</code></strong>. Esta función es ejecutada con una cadena (Array) de todos los cambios sobre el objeto, en el orden en el que estos ocurrieron.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Imprimir_en_consola_los_seis_tipos_diferentes_de_cambios_en_un_objeto.">Imprimir en consola los seis tipos diferentes de cambios en un objeto.</h3> + +<pre class="brush: js">var obj = { + foo: 0 +}; + +Object.observe(obj, function(changes) { + console.log(changes); +}); + +obj.baz = 2; +// [{name: 'baz', object: <obj>, type: 'add'}] + +obj.foo = 'hello'; +// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] + +delete obj.baz; +// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}] + +Object.defineProperty(obj, 'foo', {writable: false}); +// [{name: 'foo', object: <obj>, type: 'reconfigure'}] + +Object.setPrototypeOf(obj, {}); +// [{name: '__proto__', object: <obj>, type: 'setPrototype', oldValue: <prototype>}] + +Object.seal(obj); +// [ +// {name: 'foo', object: <obj>, type: 'reconfigure'}, +// {name: 'baz', object: <obj>, type: 'reconfigure'}, +// {object: <obj>, type: 'preventExtensions'} +// ] +</pre> + +<h3 id="Enlace_de_datos">Enlace de datos</h3> + +<pre class="brush: js">// Un modelo de objeto "usuario" +var user = { + id: 0, + name: 'Brendan Eich', + title: 'Mr.' +}; + +// Crear un saludo para el usuario +function updateGreeting() { + user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!'; +} +updateGreeting(); + +Object.observe(user, function(changes) { + changes.forEach(function(change) { + // Cada vez que las propiedades "name" o "title" del objeto + // "user" cambien, se ejecutará la función updateGreeting. + if (change.name === 'name' || change.name === 'title') { + updateGreeting(); + } + }); +}); +</pre> + +<h3 id="Cambio_de_tipo_personalizado">Cambio de tipo personalizado</h3> + +<pre class="brush: js">// A point on a 2D plane +var point = {x: 0, y: 0, distance: 0}; + +function setPosition(pt, x, y) { + // Performing a custom change + Object.getNotifier(pt).performChange('reposition', function() { + var oldDistance = pt.distance; + pt.x = x; + pt.y = y; + pt.distance = Math.sqrt(x * x + y * y); + return {oldDistance: oldDistance}; + }); +} + +Object.observe(point, function(changes) { + console.log('Distance change: ' + (point.distance - changes[0].oldDistance)); +}, ['reposition']); + +setPosition(point, 3, 4); +// Distance change: 5 +</pre> + +<h2 id="Especificación_Técnica_(en_inglés)">Especificación Técnica (en inglés)</h2> + +<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p> + +<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>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</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>{{CompatNo}}</td> + <td>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html b/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html new file mode 100644 index 0000000000..7fcd990395 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/parent/index.html @@ -0,0 +1,244 @@ +--- +title: Object.prototype.__parent__ +slug: Web/JavaScript/Referencia/Objetos_globales/Object/Parent +translation_of: Archive/Web/JavaScript/Object.parent +--- +<div>{{JSRef}}{{Non-standard_Header}}{{Obsolete_Header("gecko2")}}</div> + +<p>The <strong><code>__parent__</code></strong> property used to point to an object's context, but it has been removed.</p> + +<p> <img alt="Helvetica" src=" youtube.com"></p> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <table class="standard-table"> + <tbody> + <tr> + <td>JSON</td> + <td>Energy</td> + <td>Pass</td> + <td>Vid errors</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>M</td> + <td>290 GX Pass Golden</td> + <td>67/500</td> + <td>error 759848</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>A</td> + <td>190 EXHI Pass</td> + <td>Appears</td> + <td>error 578047</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>B</td> + <td>not run</td> + <td>not run</td> + <td>error 000000</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>Y</td> + <td>"Variant Turbo_"</td> + <td>30x35</td> + <td>error A24AB6</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>D</td> + <td>not</td> + <td>23/56[(89])</td> + <td>(math error) 759709</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>Z</td> + <td>-7800 Gx 2000-7800</td> + <td>not</td> + <td>error 638298303890</td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td>Errors</td> + <td>5876785675</td> + <td>87659679567</td> + <td>5'690'8435978</td> + <td>8767689</td> + <td>8743578495</td> + <td>834257384957</td> + <td>847359873489534897</td> + <td>0945894758597</td> + <td>34879587595934</td> + <td>859084987</td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> + </table> + + <h2 id="sect1"></h2> + </td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </tbody> +</table> + +<div class="blockIndicator warning"> +<p>Advertencia de Traductor: Tengan cuidado con el escaneer. Si la camara trasera de movil o de delante de ordenadores. Limpiela con un trapo. Si aun sigue el problema, llame a al atencion al cliente.</p> +</div> + +<div class="blockIndicator note"> +<p>Nota: sentimos mucho hacerlo en English (US) Intenten traducirlo con Traductor y intentelo de nuevo</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<h2 class="syntaxbox" id="obj.__parent__"><var>obj</var>.__parent__</h2> + +<h2 id="Description">Description</h2> + +<p>For top-level objects, this is the e.g. window.</p> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of any specifications.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object.parent")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://whereswalden.com/2010/05/07/spidermonkey-change-du-jour-the-special-__parent__-property-has-been-removed/">SpiderMonkey change du jour: the special __parent__ property has been removed</a></li> + <li><a href="/en-US/docs/Components.utils.getGlobalForObject">Components.utils.getGlobalForObject</a></li> +</ul> + +<h2 id="See_also_var">See also var</h2> + +<ol> + <li>"htpps://github.rs/accounts"</li> + <li>not</li> +</ol> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html b/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html new file mode 100644 index 0000000000..50f51214a8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/propertyisenumerable/index.html b/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html new file mode 100644 index 0000000000..b2ede9dd60 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/proto/index.html b/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html new file mode 100644 index 0000000000..24055ac261 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html new file mode 100644 index 0000000000..25c11842ad --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html @@ -0,0 +1,194 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype +tags: + - JavaScript + - Objeto + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef("Objetos_globales", "Object")}}</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>La propiedad <code><strong>Object.prototype</strong></code> representa al objeto prototipo de {{jsxref("Object")}}.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Description" name="Description">Descripción</h2> + +<p>Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de<code> Object.prototype</code>, aunque pueden ser sobrecargados. Sin embargo, un <code>Object</code> puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando {{jsxref("Object.create", "Object.create(null)")}}), o bien alterado para que no cumpla esta propiedad (por ejemplo usando {{jsxref("Object.setPrototypeOf")}}).</p> + +<p>Cambios en el prototipo de {{jsxref("Object")}} son vistos por <strong>todos </strong>los objetos a traves de el encadenado de prototype, a no ser que las propiedades y los metodos sujetos a estos cambios sean sobreescritos en algun lugar de la cadena de prototype. Este poderoso y a la vez potencialmente peligroso mecanismo permite extender o sobreescribir el comportamiento de un objeto.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Especifica la función que crea el prototipo de un objeto.</dd> + <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}</dt> + <dd>Apunta al objeto que se usó como prototipo cuando fue instanciado.</dd> + <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}</dt> + <dd>Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}</s></dt> + <dd>Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}</s></dt> + <dd><s class="obsoleteElement">Apunta al contexto de un objeto. Ha sido borrado.</s></dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> + <dd>Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.</dd> + <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> + <dd>Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.</dd> + <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> + <dd>Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> + <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> + <dd>Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Devuelve un valor lógico (boolean) que indica si el objeto contiene la propiedad indicada como una propiedad directa de ese objeto y no heredada por la cadena de prototipo.</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Devuelve una indicación <em>booleana</em> cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Devuelve un valor lógico (boolean) indicando si el attributo <a href="/es/docs/Web/JavaScript/Data_structures#Objetos">ECMAScript [[Enumerable]]</a> está definido.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}</dt> + <dd>Devuelve una cadena con el fuente de un literal de objeto que representa el objeto desde el que este método es llamado; se puede usar este valor para crear un nuevo objeto.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Llama a {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Devuelve la cadena de texto (string) que representa al objeto.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}</dt> + <dd>Remueve un punto de mira de una propiedad del objeto.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Devuelve el valor primitivo del objeto indicado.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}</dt> + <dd>Agrega un punto de mira a una propiedad del objeto.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}</s></dt> + <dd><s class="obsoleteElement">Se utiliza para evaluar una cadena de código JavaScript en el contexto del objeto especificado, pero que ha sido removido.</s></dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Al alterar el comportamiento de un método existente en Object.prototype, es oportuno considerar envolver el código de tu extensión antes o después de la existente lógica. Por ejemplo, este trozo de código (sin testear) ejecutara una determinada lógica antes de que la lógica existente o la de algún otro elemento sea ejecutada.</p> + +<p>Cuando una función es llamada, los parámetros de la llamada son mantenidos en el argumento parecido a una array llamado "arguments". Por ejemplo, en la llamada "myFn(a, b, c)", los parámetros dentro del cuerpo de la función myFn estarán contenidos en una variable llamada "arguments". Si se desea llamar al siguiente método de la cadena de prototype, simplemente añade this y arguments a la funcion apply(). Este patrón puede ser usado en cualquier prototype, por ejemplo Node.prototype, Function.prototype, etc.</p> + +<pre class="brush: js">var current = Object.prototype.valueOf; + +// Como mi propiedad "-prop-value" es un atajo y no se encuentra siempre +// en la cadena de prototype, queremos modificar Object.prototype: +Object.prototype.valueOf = function() { + if (this.hasOwnProperty('-prop-value')) { + return this['-prop-value']; + } else { + // No parece que este objeto sea uno de los mios, por lo que recaeeremos + // en el comportamiento por defecto lo mejor que podamos. + // La llamada apply se comporta como el "super" en otros lenguages de programación. + // A pesar de que valueOf() no tiene parametros, alguna otra llamada podria tenerlos. + return current.apply(this, arguments); + } +}</pre> + +<p>Como JavaScript no tiene objetos de tipo “subclase”, prototype es realmente útil para crear un objeto “base” donde ciertas funciones actúan como objetos. Por ejemplo:</p> + +<pre class="brush: js">var Person = function(name) { + this.name = name; + this.canTalk = true; +}; + +Person.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name); + } +}; + +var Employee = function(name, title) { + Person.call(this, name); + this.title = title; +}; + +Employee.prototype = Object.create(Person.prototype); +Employee.prototype.constructor = Employee; + +Employee.prototype.greet = function() { + if (this.canTalk) { + console.log('Hi, I am ' + this.name + ', the ' + this.title); + } +}; + +var Customer = function(name) { + Person.call(this, name); +}; + +Customer.prototype = Object.create(Person.prototype); +Customer.prototype.constructor = Customer; + +var Mime = function(name) { + Person.call(this, name); + this.canTalk = false; +}; + +Mime.prototype = Object.create(Person.prototype); +Mime.prototype.constructor = Mime; + +var bob = new Employee('Bob', 'Builder'); +var joe = new Customer('Joe'); +var rg = new Employee('Red Green', 'Handyman'); +var mike = new Customer('Mike'); +var mime = new Mime('Mime'); + +bob.greet(); +// Hi, I am Bob, the Builder + +joe.greet(); +// Hi, I am Joe + +rg.greet(); +// Hi, I am Red Green, the Handyman + +mike.greet(); +// Hi, I am Mike + +mime.greet();</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">Observación</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.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.builtins.Object.prototype")}}</p> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html b/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html new file mode 100644 index 0000000000..42c89175a3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/setprototypeof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html new file mode 100644 index 0000000000..ff32fc5738 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/tolocalestring/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html new file mode 100644 index 0000000000..d0de708b98 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html new file mode 100644 index 0000000000..713a176b0b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html new file mode 100644 index 0000000000..a9ffc11535 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/unobserve/index.html b/files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html new file mode 100644 index 0000000000..d500dbde21 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html @@ -0,0 +1,138 @@ +--- +title: Object.unobserve() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/unobserve +tags: + - JavaScript + - No estandar + - Objeto + - metodo +translation_of: Archive/Web/JavaScript/Object.unobserve +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>El método <strong>Object.unobserve()</strong> es usado para remover observadores establecidos por {{jsxref("Object.observe()")}}.</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="syntaxbox"><code>Object.unobserve(<var>obj</var>, <var>callback</var>)</code></pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>obj</code></dt> + <dd>El objeto a parar de observar.</dd> + <dt><code>callback</code></dt> + <dd>La referencia al observador a parar de llamar cada vez que se hacen cambios sobre el objeto <strong>obj</strong>.</dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p><code>Object.unobserve()</code> debería ser llamado después de {{jsxref("Object.observe()")}} en orden de remover un observador de un objeto.</p> + +<p>La llamada de retorno (<em>callback</em>) debería ser una referencia a una función (asignada o declarada) y no a una función anonima, debido a que ésta referencia será usada para retirar el observador previo. A menos que se llame <strong><code>Object.unobserve()</code> </strong>con una función anonima como llamada de retorno, no se removerá ningún observador.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Dejando_de_observar_un_objeto.">Dejando de observar un objeto.</h3> + +<pre class="brush: js">var obj = { + foo: 0, + bar: 1 +}; + +var observer = function(changes) { + console.log(changes); +} + +Object.observe(obj, observer); + +obj.newProperty = 2; +// [{name: 'newProperty', object: <obj>, type: 'add'}] + +Object.unobserve(obj, observer); + +obj.foo = 1; +// La llamada de retorno no fue llamada</pre> + +<h3 id="Utilizando_una_función_anónima">Utilizando una función anónima</h3> + +<pre class="brush: js">var person = { + name : 'Ahmed', + age : 25 +}; + +Object.observe(person, function (changes) { + console.log(changes); +}); + +person.age = 40; +// [{name: 'age', object: <obj>, oldValue: 25, type: 'update'}] + +Object.unobserve(person, function (changes) { + console.log(changes); +}); + +person.age = 63; +// [{name: 'age', object: <obj>, oldValue: 40, type: 'update'}] +// La llamada de retorno siempre será llamada +</pre> + +<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("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</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>{{CompatChrome("36")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("23")}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li> + <li>{{jsxref("Array.unobserve()")}} {{non-standard_inline}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html b/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html new file mode 100644 index 0000000000..67f565051c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html @@ -0,0 +1,37 @@ +--- +title: Object.prototype.unwatch() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/unwatch +tags: + - JavaScript + - Method + - Non-standard + - Object + - Prototype + - Referencia +translation_of: Archive/Web/JavaScript/Object.unwatch +--- +<div> + {{JSRef("Objetos_globales", "Object")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Elimina un control establecido con el método {{jsxref("Object.watch", "watch()")}} sobre una propiedad de un objeto.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<p><code>unwatch( + <i> + nombrePropiedad</i> + ) </code></p> +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> +<dl> + <dt> + <code>nombrePropiedad</code></dt> + <dd> + El nombre de la propiedad del objeto.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>El depurador de JavaScript tiene funciones similares a las proporcionadas por este método, además de otras opciones de depuración. Para más información acerca del depurador, vea <a href="/es/docs/Venkman">Venkman</a>.</p> +<p>Por defecto, este método se hereda para todos los objetos descendientes de <code>Object</code>.</p> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<p>Vea {{jsxref("Object.watch", "watch()")}}.</p> +<h2 id="Vea_También">Vea También</h2> +<ul> + <li>{{jsxref("Object.watch()")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html new file mode 100644 index 0000000000..5cf466078d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/values/index.html b/files/es/web/javascript/referencia/objetos_globales/object/values/index.html new file mode 100644 index 0000000000..81b56ef1e0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/object/watch/index.html b/files/es/web/javascript/referencia/objetos_globales/object/watch/index.html new file mode 100644 index 0000000000..584a53350b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/object/watch/index.html @@ -0,0 +1,104 @@ +--- +title: Object.prototype.watch() +slug: Web/JavaScript/Referencia/Objetos_globales/Object/watch +tags: + - JavaScript + - Method + - Non-standard + - Object + - Prototype +translation_of: Archive/Web/JavaScript/Object.watch +--- +<div> + {{JSRef("Objetos_globales", "Object")}}</div> +<h2 id="Resumen" name="Resumen">Resumen</h2> +<p>Controla si se asigna un valor a una propiedad y ejecuta una función cuando esto ocurre.</p> +<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> +<p><code>watch( + <i> + propiedad</i> + , + <i> + delegado</i> + ) </code></p> +<h3 id="Par.C3.A1metros" name="Par.C3.A1metros">Parámetros</h3> +<dl> + <dt> + <code>nombrePropiedad</code></dt> + <dd> + Nombre de la propiedad del objeto.</dd> +</dl> +<dl> + <dt> + <code>funcionDelegada</code></dt> + <dd> + Función a llamar.</dd> +</dl> +<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> +<p>Controla si se asigna una propiedad llamada <code>nombrePropiedad</code> en este objeto, llamando a <code>funcionDelegada(propiedad, valorViejo, valorNuevo)</code> siempre que <code>nombrePropiedad</code> sea asignada y almacene el valor de retorno de esa propiedad. La función encargada de dicho control puede filtrar (o anular) el valor asignado, devolviendo un <code>valorNuevo</code> modificado (o devolviendo <code>valorViejo</code>).</p> +<p>Si elimina una propiedad para la que se ha establecido un control, ese control no desaparece. Si más tarde se vuelve a crear la propiedad, el control volverá a tener efecto.</p> +<p>Para eliminar un control, use el método {{jsxref("Object.prototype.unwatch()")}}. Por defecto, el método <code>watch</code> se hereda para cada uno de los objetos descendientes de {{jsxref("Object")}}.</p> +<p>El depurador JavaScript tiene funciones similares a las que proporciona este método, además de otras opciones de depuración. Para más información sobre el depurador, vea <a href="/es/docs/Venkman">Venkman</a>.</p> +<p>En NES 3.0 y 4.x, <code>funcionDelegada</code> se llama desde las asignaciones del script además del código nativo. En Firefox, <code>funcionDelegada</code> se llama solamente en las asignaciones del script, pero no en el código nativo. Por ejemplo, <code>window.watch('location', miDelegado)</code> no llamará a <code>miDelegado</code> si el usuario hace click sobre un enlace a un ancla dentro del documento actual. Sin embargo, el siguiente código llamará a <code>miDelegado</code>:</p> +<pre class="brush: js"><code>window.location += '#miAncla';</code> +</pre> +<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> +<h3 id="Ejemplo:_Usando_watch_y_unwatch" name="Ejemplo:_Usando_watch_y_unwatch">Ejemplo: Usando <code>watch</code> y <code>unwatch</code></h3> +<pre class="brush: js">var objeto = {p:1}; +objeto.watch("p", + function (identificador,valorViejo,valorNuevo) { + document.writeln("objeto." + identificador + " ha cambiado de " + + valorViejo + " a " + valorNuevo); + return valorNuevo; + }); + +objeto.p = 2; +objeto.p = 3; +delete objeto.p; +objeto.p = 4; + +objeto.unwatch('p'); +objeto.p = 5; +</pre> +<p>Este script muestra lo siguiente:</p> +<pre>objeto.p ha cambiado de 1 a 2 +objeto.p ha cambiado de 2 a 3 +objeto.p ha cambiado de undefined a 4 +</pre> +<h3 id="Ejemplo:_Usando_watch_para_validar_las_propiedades_de_un_objeto" name="Ejemplo:_Usando_watch_para_validar_las_propiedades_de_un_objeto">Ejemplo: Usando <code>watch</code> para validar las propiedades de un objeto</h3> +<p>Usted puede usar <code>watch</code> para comprobar cualquier asignación a las propiedades de un objecto. Este ejemplo asegura que cada Persona siempre tiene un nombre válido y una edad entre 0 y 200.</p> +<pre class="brush: js">Persona = function(nombre,edad) { + this.watch("edad", Persona.prototype._esAsignacionValida); + this.watch("nombre",Persona.prototype._esAsignacionValida); + this.nombre=nombre; + this.edad=edad; +}; + +Persona.prototype.toString = function() { return this.nombre + "," + this.edad;}; + +Persona.prototype._esAsignacionValida = function(identificador,valorViejo,valorNuevo) { + if (id=="nombre" && (!valorNuevo|| valorNuevo.length>30)) { throw new RangeError("nombre no válido para " + this); } + if (id=="edad" && (valorNuevo<0 || valorNuevo>200)) { throw new RangeError("edad no válida para " + this ); } + return valorNuevo; +}; + +alejandra = new Persona("Alejandra",29); // --> Alejandra,29 +document.writeln(alejandra); + +try { + alejandra.nombre=""; // --> Error "nombre no válido para Alejandra,29" +} catch (excepcion) { document.writeln(excepcion); } + +try { + alejandra.edad=-4; // --> Error "edad no válida para Alejandra,29" +} catch (excepcion) { document.writeln(excepcion); } +</pre> +<p>Este script muestra lo siguiente:</p> +<pre>Alejandra,29 +RangeError: nombre no válido para Alejandra,29 +RangeError: edad no válida para Alejandra,29 +</pre> +<h2 id="Vea_Tambi.C3.A9n" name="Vea_Tambi.C3.A9n">Vea También</h2> +<ul> + <li>{{jsxref("Object.prototype.unwatch()")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html b/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html new file mode 100644 index 0000000000..16510d882d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/parseint/index.html b/files/es/web/javascript/referencia/objetos_globales/parseint/index.html new file mode 100644 index 0000000000..30e3874a34 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/all/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html new file mode 100644 index 0000000000..79a16aadc6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/catch/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html new file mode 100644 index 0000000000..a99a071979 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/finally/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html new file mode 100644 index 0000000000..8d21aa785a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/index.html new file mode 100644 index 0000000000..58a2319c2f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html new file mode 100644 index 0000000000..c03fa64f5e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html @@ -0,0 +1,68 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype +tags: + - JavaScript + - Promesa + - Propiedad +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>Promise.prototype</strong></code> representa el prototipo del constructor de {{jsxref("Promise")}}</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Las instancias de {{jsxref("Promise")}} heredan de {{jsxref("Promise.prototype")}}. Se puede usar el objeto prototipo del constructor para agregar propiedades o métodos a todas las instancias de <code>Promise</code>.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}</dt> + <dd>Anexa a la promesa un callback manejador de rechazo, y retorna una nueva promesa que resuelve al valor de retorno del callback si es llamado, o de lo contrario a su valor de cumplimiento original si la promesa es cumplida.</dd> + <dt>{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}</dt> + <dd>Anexa a la promesa manejadores de cumplimiento y rechazo, y retorna una nueva promesa que resuelve al valor de retorno del manejador llamado, o a su valor de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise#settledNote">determinación (settled)</a> original si la promesa no fue manejada (p.ej. si el manejador relevante <code>alCumplirse</code> o <code>alRechazarse</code> no es una función).</dd> +</dl> + +<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-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</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","Promise.prototype")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html new file mode 100644 index 0000000000..f24be82a9c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/reject/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html new file mode 100644 index 0000000000..70505d7471 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/resolve/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html new file mode 100644 index 0000000000..e91dc7b80d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/promise/then/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html new file mode 100644 index 0000000000..8998f3b180 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/proxy/index.html b/files/es/web/javascript/referencia/objetos_globales/proxy/index.html new file mode 100644 index 0000000000..1469b1f138 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/referenceerror/index.html b/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html new file mode 100644 index 0000000000..5b48497b5d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/compile/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html new file mode 100644 index 0000000000..0bce81a56d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/exec/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html new file mode 100644 index 0000000000..1925e63b67 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/ignorecase/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html new file mode 100644 index 0000000000..9073d631d1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/index.html new file mode 100644 index 0000000000..9a26edead0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/regexp/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html new file mode 100644 index 0000000000..ad3a8c90e9 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/rightcontext/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html new file mode 100644 index 0000000000..39530ee1b5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/test/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html new file mode 100644 index 0000000000..4507b57c97 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/regexp/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html new file mode 100644 index 0000000000..50c10d2bb2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/@@iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html new file mode 100644 index 0000000000..7445821fc0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/add/index.html b/files/es/web/javascript/referencia/objetos_globales/set/add/index.html new file mode 100644 index 0000000000..f9385894fb --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html new file mode 100644 index 0000000000..0fdca7e492 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html new file mode 100644 index 0000000000..3e5544e06a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/entries/index.html b/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html new file mode 100644 index 0000000000..ba07d24187 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/has/index.html b/files/es/web/javascript/referencia/objetos_globales/set/has/index.html new file mode 100644 index 0000000000..e133de2d00 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/index.html b/files/es/web/javascript/referencia/objetos_globales/set/index.html new file mode 100644 index 0000000000..db091b3a59 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/size/index.html b/files/es/web/javascript/referencia/objetos_globales/set/size/index.html new file mode 100644 index 0000000000..444ad7ae8a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/set/values/index.html b/files/es/web/javascript/referencia/objetos_globales/set/values/index.html new file mode 100644 index 0000000000..8b7ec88ece --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/anchor/index.html b/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html new file mode 100644 index 0000000000..c34abd62b1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/big/index.html b/files/es/web/javascript/referencia/objetos_globales/string/big/index.html new file mode 100644 index 0000000000..0aa04e5b74 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/blink/index.html b/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html new file mode 100644 index 0000000000..cf49f3d840 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/bold/index.html b/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html new file mode 100644 index 0000000000..cc7c841181 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/charat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html new file mode 100644 index 0000000000..6ef6d46e37 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/charcodeat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html new file mode 100644 index 0000000000..4eccf78f13 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/codepointat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html new file mode 100644 index 0000000000..ae3fef3ec8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/concat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html new file mode 100644 index 0000000000..d00ffce70e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/endswith/index.html b/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html new file mode 100644 index 0000000000..cbeac4f481 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/fixed/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html new file mode 100644 index 0000000000..3d188bc39d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/fontcolor/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html new file mode 100644 index 0000000000..135e805cb2 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/fontsize/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html new file mode 100644 index 0000000000..212c49d638 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/fromcharcode/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html new file mode 100644 index 0000000000..7e87f3d90d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/fromcodepoint/index.html b/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html new file mode 100644 index 0000000000..39fe662b75 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/includes/index.html b/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html new file mode 100644 index 0000000000..094a3fd648 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/index.html b/files/es/web/javascript/referencia/objetos_globales/string/index.html new file mode 100644 index 0000000000..a6c5aea8e3 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/indexof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html new file mode 100644 index 0000000000..14f7b01eb8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/italics/index.html b/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html new file mode 100644 index 0000000000..71897293bb --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/lastindexof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html new file mode 100644 index 0000000000..ffde251071 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/length/index.html b/files/es/web/javascript/referencia/objetos_globales/string/length/index.html new file mode 100644 index 0000000000..9401b8898a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/link/index.html b/files/es/web/javascript/referencia/objetos_globales/string/link/index.html new file mode 100644 index 0000000000..021c659f34 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/localecompare/index.html b/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html new file mode 100644 index 0000000000..2bda296c61 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/match/index.html b/files/es/web/javascript/referencia/objetos_globales/string/match/index.html new file mode 100644 index 0000000000..6403dbaf06 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/matchall/index.html b/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html new file mode 100644 index 0000000000..a536720dbd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/normalize/index.html b/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html new file mode 100644 index 0000000000..2794644f1c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/padstart/index.html b/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html new file mode 100644 index 0000000000..57abbd8f5c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html new file mode 100644 index 0000000000..1ea663138c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html @@ -0,0 +1,117 @@ +--- +title: String.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<p>{{JSRef("Objetos_globales", "String")}}</p> + +<h2 id="Resumen" name="Resumen">Resumen</h2> + +<p>The <strong><code>String.prototype</code></strong> propiedad representa el prototipo de esta clase. Puede usar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Especifica la función que crea un prototipo de objeto.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Refleja la longitud de la cadena.</dd> +</dl> + +<div>{{ jsOverrides("Object", "properties", "constructor", "length") }}</div> + +<h2 id="Métodos">Métodos</h2> + +<h3 id="M.C3.A9todos_no_relacionados_con_HTML" name="M.C3.A9todos_no_relacionados_con_HTML">Métodos no relacionados con HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Devuelve el carácter en el índice especificado.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Devuelve el número que indica el valor Unicode del carácter en el índice especificado.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Combina el texto de dos cadenas y devuelve una nueva cadena.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Se usa para emparejar una expresión regular con una cadena.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Realiza una búsqueda de una expresión regular en una cadena especificada.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Divide un objeto <code>String</code> en un arreglo de cadenas, separando la cadena en subcadenas.</dd> + <dt>{{jsxref("String.prototype.substr()")}}</dt> + <dd>Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Devuelve el valor de la cadena que realiza la llamada en minúsculas.</dd> + <dt>{{jsxref("String.prototype.toSource()")}}</dt> + <dd>Devuelve el objeto literal que representa el objeto especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Devuelve el valor de la cadena que realiza la llamada en mayúsculas.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Métodos de encapsulado HTML</h3> + +<p>Cada uno de los métodos siguientes devuelve una copia de la cadena encapsulada dentro de una etiqueta HTML. Por ejemplo, "test".bold() devuelve "<b>test</b>".</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}}</dt> + <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-name-A"><code><a name="<em>name</em>"></code></a> (Ancha Hipertexto)</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><code><font color="<em>color</em>"></code></dd> + <dt>{{jsxref("String.prototype.fontsize()")}}</dt> + <dd><code><font size="<em>size</em>"></code></dd> + <dt>{{jsxref("String.prototype.italics()")}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}}</dt> + <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-href"><code><a href="<em>url</em>"></code></a> (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> + +<p>Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.</p> + +<p>{{ jsOverrides("Object", "methods", "charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "localeCompare", "match", "quote", "replace", "search", "slice", "split", "substr", "substring", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toSource", "toString", "toUpperCase", "trim", "trimLeft", "trimRight", "valueOf", "anchor", "big", "blink", "bold", "fixed", "fontcolor", "fontsize", "italics", "link", "small", "strike", "sub", "sup") }}</p> + +<h2 id="See_also" name="See_also">Vea también</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> + +<dl> + <dt> </dt> +</dl> diff --git a/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html b/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html new file mode 100644 index 0000000000..3c8f3c1d55 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/repeat/index.html b/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html new file mode 100644 index 0000000000..a449bdfb27 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/replace/index.html b/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html new file mode 100644 index 0000000000..680393ece1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/search/index.html b/files/es/web/javascript/referencia/objetos_globales/string/search/index.html new file mode 100644 index 0000000000..23e37234d1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/slice/index.html b/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html new file mode 100644 index 0000000000..cbfe5a716b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/small/index.html b/files/es/web/javascript/referencia/objetos_globales/string/small/index.html new file mode 100644 index 0000000000..a8b2f302fd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/split/index.html b/files/es/web/javascript/referencia/objetos_globales/string/split/index.html new file mode 100644 index 0000000000..ade291da0f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/startswith/index.html b/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html new file mode 100644 index 0000000000..c658cc80da --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/strike/index.html b/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html new file mode 100644 index 0000000000..20ba5e9c90 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/sub/index.html b/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html new file mode 100644 index 0000000000..195bca9d1e --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/substr/index.html b/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html new file mode 100644 index 0000000000..290d1292ab --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/substring/index.html b/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html new file mode 100644 index 0000000000..9918417f95 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/sup/index.html b/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html new file mode 100644 index 0000000000..6b8db218b6 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/tolocalelowercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html new file mode 100644 index 0000000000..5c1eae2144 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/tolocaleuppercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html new file mode 100644 index 0000000000..7199ca3ae5 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/tolowercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html new file mode 100644 index 0000000000..8060f3dd1c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/tosource/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html new file mode 100644 index 0000000000..104738c22d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/tostring/index.html b/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html new file mode 100644 index 0000000000..89f53666b1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/touppercase/index.html b/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html new file mode 100644 index 0000000000..77b05b28b4 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/trim/index.html b/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html new file mode 100644 index 0000000000..d958d713eb --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/trimend/index.html b/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html new file mode 100644 index 0000000000..6252141adf --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/string/valueof/index.html b/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html new file mode 100644 index 0000000000..b287c4d774 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/symbol/for/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html new file mode 100644 index 0000000000..1111e49b7a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/symbol/hasinstance/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html new file mode 100644 index 0000000000..9149aeda00 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/symbol/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/index.html new file mode 100644 index 0000000000..ef21b5fb6c --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/symbol/iterator/index.html b/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html new file mode 100644 index 0000000000..4f9e0212cc --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/syntaxerror/index.html b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html new file mode 100644 index 0000000000..92bf3f4991 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/syntaxerror/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html new file mode 100644 index 0000000000..7535a17309 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html @@ -0,0 +1,132 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype +tags: + - Error + - JavaScript + - Property + - Prototype + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>SyntaxError.prototype</strong></code> representa el prototipo para el constructor {{jsxref("SyntaxError")}}.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de <code>SyntaxError.prototype</code>. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.</p> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>Especifica la funcion que creó una instancia del prototipo.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad <code>message</code> , en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, es heredada de {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>Error name. Inherited from {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>Stack trace. Heredada de {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Metodos">Metodos</h2> + +<p>A pesar de que el objeto prototipo de {{jsxref("SyntaxError")}} no contiene metodos propios, las instancias de {{jsxref("SyntaxError")}} heredan algunos metodos debido a la cadena de prototipos.</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con 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>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.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html b/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html new file mode 100644 index 0000000000..579f8af9bd --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/typedarray/index.html b/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html new file mode 100644 index 0000000000..644b28c081 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/uint8array/index.html b/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html new file mode 100644 index 0000000000..6402e356b0 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/undefined/index.html b/files/es/web/javascript/referencia/objetos_globales/undefined/index.html new file mode 100644 index 0000000000..1aa7db29b8 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/unescape/index.html b/files/es/web/javascript/referencia/objetos_globales/unescape/index.html new file mode 100644 index 0000000000..48418ef48a --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/urierror/index.html b/files/es/web/javascript/referencia/objetos_globales/urierror/index.html new file mode 100644 index 0000000000..3ba028a2ab --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/clear/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html new file mode 100644 index 0000000000..b5c66c7714 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/delete/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html new file mode 100644 index 0000000000..7f4933eb0b --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/get/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html new file mode 100644 index 0000000000..e60e34f8f1 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/has/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html new file mode 100644 index 0000000000..dd978ede16 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html new file mode 100644 index 0000000000..0fed17e5ca --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakmap/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html new file mode 100644 index 0000000000..0127f6606f --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html @@ -0,0 +1,142 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +--- +<div>{{JSRef}}</div> + +<p>La propiedad <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa el prototipo para el constructor {{jsxref("WeakMap")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Descripción">Descripción</h2> + +<p>Las instancias de {{jsxref("WeakMap")}} heredan de {{jsxref("WeakMap.prototype")}}. Se puede usar el objeto prototipo del constructor para añadir propiedades o métodos para todas las instancias de <code>WeakMap</code>.</p> + +<p><code>WeakMap.prototype</code> por si mismo es solamente un objeto ordinario:</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> + +<h2 id="Propiedades">Propiedades</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>Retorna la función que creó el prototipo de la instanciaReturns the function that created an instance's prototype. Esta es la función {{jsxref("WeakMap")}} por defecto.</dd> +</dl> + +<h2 id="Métodos">Métodos</h2> + +<dl> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> + <dd>Remueve cualquier valor asociado a la clave. Después de esto <code>WeakMap.prototype.has(key)</code> retornará falso.</dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> + <dd>Retorna el valor asociado a la clave, o <code>undefined</code> si no hay ninguno.</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> + <dd>Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the <code>WeakMap</code> object o no.</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> + <dd>Asigna el valor para la clave en el objeto <code>WeakMap</code>. Retorna el objeto <code>WeakMap</code>.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Remueve todas los pares clave/valore del objeto <code>WeakMap</code>. Notese que es posible implementar un objeto parecido al <code>WeakMap</code> que posea un método <code>.clear()</code>, encapsulando el objeto <code>WeakMap</code> que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})</s></dd> +</dl> + +<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-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</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>36</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>11</td> + <td>23</td> + <td>7.1</td> + </tr> + <tr> + <td>Objeto ordinario</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("40")}}</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>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Objeto ordinario</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("40")}}</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("Map.prototype")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html new file mode 100644 index 0000000000..0dd654e6ef --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/weakset/index.html b/files/es/web/javascript/referencia/objetos_globales/weakset/index.html new file mode 100644 index 0000000000..ab2af60090 --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/objetos_globales/webassembly/index.html b/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html new file mode 100644 index 0000000000..80542d763d --- /dev/null +++ b/files/es/web/javascript/referencia/objetos_globales/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/referencia/operadores/adición/index.html b/files/es/web/javascript/referencia/operadores/adición/index.html new file mode 100644 index 0000000000..888845158a --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/adición/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/referencia/operadores/aritméticos/index.html b/files/es/web/javascript/referencia/operadores/aritméticos/index.html new file mode 100644 index 0000000000..ed3e21620a --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/aritméticos/index.html @@ -0,0 +1,314 @@ +--- +title: Operadores Aritméticos +slug: Web/JavaScript/Referencia/Operadores/Aritméticos +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).</p> + +<p>Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</p> + +<h2 id="Suma_o_adición_()"><a name="Addition">Suma o adición (+)</a></h2> + +<p>La operación suma se produce mediante la suma de número o strings concatenados.</p> + +<h3 id="Sintaxis">Sintaxis</h3> + +<pre class="brush: js"><strong>Operador:</strong> x + y</pre> + +<h3 id="Ejemplos">Ejemplos:</h3> + +<pre class="brush: js">// Número + Número = Adición + +1 + 2 // 3 + +// Bolean + Número = Adición + +true + 1 // 2 + +// Bolean + Bolean // Adición + +false + false // 0 + +// Número + String = Concatenación + +5 + 'foo' // "5foo" + +// String + Bolean = Concatenación + +'foo' + true // "footrue" + +// String + String = Concatenación + +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Resta_o_sustracción_(-)"><a name="Subtraction">Resta o sustracción (-)</a></h2> + +<p>La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.</p> + +<h3 id="Sintaxis_2">Sintaxis</h3> + +<pre class="brush: js"><strong>Operador:</strong> x - y</pre> + +<h3 id="Ejemplos_2">Ejemplos</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN +</pre> + +<h2 id="División_()"><a name="Division">División (/)</a></h2> + +<p>El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> + +<h3 id="Sintaxis_3">Sintaxis</h3> + +<pre class="brush: js"><strong>Operador:</strong> x / y</pre> + +<h3 id="Ejemplos_3">Ejemplos</h3> + +<pre class="brush: js">1 / 2 // devuelve 0.5 en JavaScript +1 / 2 // devuelve 0 en Java +// (Ninguno de los números es explícitamente un número de punto flotante) + +1.0 / 2.0 // devuelve 0.5 en JavaScript y Java + +2.0 / 0 // devuelve Infinito en JavaScript +2.0 / 0.0 // devuelve Infinito +2.0 / -0.0 // devuelve -Infinito en JavaScript +</pre> + +<h2 id="Multiplicación_(*)"><a name="Multiplication">Multiplicación (*)</a></h2> + +<p>El operador multiplicación produce el producto de la multiplicación de los operandos.</p> + +<h3 id="Sintaxis_4">Sintaxis</h3> + +<pre class="brush: js"><strong>Operador:</strong> x * y</pre> + +<h3 id="Ejemplos_4">Ejemplos</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinito * 0 // NaN +Infinito * Infinito // Infinito +'foo' * 2 // NaN</pre> + +<h2 id=".25_.28modular.29" name=".25_.28modular.29">Resto o Residuo (%)</h2> + +<p>El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de <code>modulo</code> incorporada para producir el resultado, que es el resto entero de dividir <code>var1</code> por <code>var2</code> - por ejemplo - <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript</a>, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.</p> + +<h3 id="Sintaxis_5">Sintaxis</h3> + +<pre class="brush: js"><strong>Operador:</strong> var1 % var2</pre> + +<h3 id="Ejemplos_5">Ejemplos</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5</pre> + +<h2 id="Exponenciación_(**)">Exponenciación (**)</h2> + +<p>El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, <code>var1<sup>var2</sup></code>, en la declaración anterior, donde <code>var1</code> y <code>var2</code> son variables. El operador de exponenciación es asociativo a la derecha. <code>a ** b ** c</code> es igual a <code>a ** (b ** c)</code>.</p> + +<h3 id="Sintaxis_6">Sintaxis</h3> + +<pre><strong>Operador:</strong> var1 ** var2</pre> + +<p> </p> + +<h3 id="Notas">Notas</h3> + +<p>En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (<code>+/-/~/!/delete/void/typeof</code>) inmediatamente antes del número de base.</p> + +<pre class="brush: js">-2 ** 2; +// 4 en Bash, -4 en otros idiomas. +// Esto no es válido en JavaScript, ya que la operación es ambigua. + + +-(2 ** 2); +// -4 en JavaScript y la intención del autor no es ambigua.</pre> + +<h3 id="Ejemplos_6">Ejemplos</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</pre> + +<p>Para invertir el signo del resultado de una expresión de exponenciación:</p> + +<pre class="brush: js">-(2 ** 2) // -4</pre> + +<p>Para forzar la base de una expresión de exponenciación a ser un número negativo:</p> + +<pre class="brush: js">(-2) ** 2 // 4</pre> + +<div class="note"> +<p><strong>Nota:</strong> JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">un operador bit a bit ^ (logical XOR)</a>. <code>**</code> y <code>^</code> son diferentes (por ejemplo: <code>2 ** 3 === 8</code> cuando <code>2 ^ 3 === 1</code>.)</p> +</div> + +<p> </p> + +<h2 id=".2B.2B_.28incremento.29" name=".2B.2B_.28incremento.29">Incremento (++)</h2> + +<p> </p> + +<p>El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.</p> + +<ul> + <li>Si se usa postfijo, con el operador después del operando (por ejemplo, x++), devuelve el valor antes de incrementar.</li> + <li>Si se usa prefijo, con el operador antes del operando (por ejemplo, ++x), devuelve el valor después de incrementar.</li> +</ul> + +<h3 id="Sintaxis_7">Sintaxis</h3> + +<pre><strong>Operador:</strong> x++ o ++x</pre> + +<h3 id="Ejemplos_7">Ejemplos</h3> + +<pre class="brush: js">// Postfijo +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefijo +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="--_.28decremento.29" name="--_.28decremento.29">Decremento (--)</h2> + +<p>El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.</p> + +<ul> + <li>Si se usa postfijo (por ejemplo, x--), devuelve el valor antes de decrementar.</li> + <li>Si usa el prefijo (por ejemplo, --x), entonces devuelve el valor después de decrementar.</li> +</ul> + +<h3 id="Sintaxis_8">Sintaxis</h3> + +<pre><strong>Operador:</strong> x-- o --x</pre> + +<h3 id="Ejemplos_8">Ejemplos</h3> + +<pre class="brush: js">// Postfijo +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefijo +var a = 2; +b = --a; // a = 1, b = 1</pre> + +<p> </p> + +<h2 id="-_.28negaci.C3.B3n_unitario.29" name="-_.28negaci.C3.B3n_unitario.29">Negación unaria (-)</h2> + +<p>El operador de negación unaria precede su operando y lo niega.</p> + +<h3 id="Sintaxis_9">Sintaxis</h3> + +<pre><strong>Operador:</strong> -x</pre> + +<h3 id="Ejemplos_9">Ejemplos</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// el operador de negación unario puede convertir no-números en un número +var x = "4"; +y = -x; // y = -4</pre> + +<h2 id="Unario_más_()">Unario más (+)</h2> + +<p>El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas <code>true</code>, <code>false</code> y <code>null</code>. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> + +<h3 id="Sintaxis_10">Sintaxis</h3> + +<pre><strong>Operador:</strong> +x</pre> + +<h3 id="Ejemplos_10">Ejemplos</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN</pre> + +<p> </p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores unarios.</a></p> + </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Operadores unarios.</a></p> + </td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td><a href="https://github.com/rwaldron/exponentiation-operator">Operador de exponenciación</a> agregado.</td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Asignación</a></li> +</ul> + +<p> </p> diff --git a/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html b/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html new file mode 100644 index 0000000000..d85bfa8b6e --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/array_comprehensions/index.html @@ -0,0 +1,195 @@ +--- +title: Comprensiones de arreglo +slug: Web/JavaScript/Referencia/Operadores/Array_comprehensions +tags: + - JavaScript + - No estandar + - Obsoleto + - Operador + - Referencia +translation_of: Archive/Web/JavaScript/Array_comprehensions +--- +<div>{{jsSidebar("Operators")}}</div> + +<div class="warning"><strong>No es un estándar. ¡No utilizar!</strong><br> +La sintaxis de <em>array comprehensions</em> no es estándar y ha sido removida desde Firefox 58. Para usos futuros, considera utilizar: {{jsxref("Array.prototype.map")}}, {{jsxref("Array.prototype.filter")}}, {{jsxref("Functions/Arrow_functions", "arrow functions", "", 1)}} o {{jsxref("Operators/Spread_operator", "spread syntax", "", 1)}}.</div> + +<p>{{Obsolete_Header(58)}}</p> + +<p>La sintaxis de <strong><em>array comprehension</em></strong> era una expresión JavaScript, la cual permitía crear rápidamente un nuevo arreglo basado en otro existente. Sin embargo, ha sido removida del estándar y de la implementación de Firefox. ¡No lo utilices!</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="syntaxbox">[for (x of iterable) x] +[for (x of iterable) if (condition) x] +[for (x of iterable) for (y of iterable) x + y] +</pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Dentro de las comprensiones de arreglo son permitidos estos dos tipos de componentes:</p> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Statements/if...else", "if")}}</li> +</ul> + +<p>La iteración for-of es siempre el primer componente. Son permitidas múltiples iteraciones for-of o sentencias if.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Comprensiones_de_arreglo_simples">Comprensiones de arreglo simples</h3> + +<pre class="brush:js">[for (i of [ 1, 2, 3 ]) i*i ]; +// [ 1, 4, 9 ] + +var abc = [ "A", "B", "C" ]; +[for (letters of abc) letters.toLowerCase()]; +// [ "a", "b", "c" ]</pre> + +<h3 id="Comprensiones_de_arreglo_con_sentencia_if">Comprensiones de arreglo con sentencia if</h3> + +<pre class="brush: js">var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ]; +[for (year of years) if (year > 2000) year]; +// [ 2006, 2010, 2014 ] +[for (year of years) if (year > 2000) if(year < 2010) year]; +// [ 2006], lo mismo de arriba: +[for (year of years) if (year > 2000 && year < 2010) year]; +// [ 2006] +</pre> + +<h3 id="Comprensiones_de_arreglo_comparado_a_map_y_filter">Comprensiones de arreglo comparado a <code>map</code> y <code>filter</code></h3> + +<p>Una manera sencilla de entender la sintaxis de comprensión de arreglo, es compararla con los métodos de Array {{jsxref("Array.map", "map")}} y {{jsxref("Array.filter", "filter")}}:</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; + +numbers.map(function (i) { return i * i }); +numbers.map(i => i*i); +[for (i of numbers) i*i ]; +// todos son [ 1, 4, 9 ] + +numbers.filter(function (i) { return i < 3 }); +numbers.filter(i => i < 3); +[for (i of numbers) if (i < 3) i]; +// todos son [ 1, 2 ] +</pre> + +<h3 id="Comprensiones_de_arreglo_con_dos_arreglos">Comprensiones de arreglo con dos arreglos</h3> + +<p>Utilizando dos iteraciones for-of para trabajar con dos arreglos:</p> + +<pre class="brush: js">var numbers = [ 1, 2, 3 ]; +var letters = [ "a", "b", "c" ]; + +var cross = [for (i of numbers) for (j of letters) i+j]; +// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ] + +var grid = [for (i of numbers) [for (j of letters) i+j]]; +// [ +// ["1a", "1b", "1c"], +// ["2a", "2b", "2c"], +// ["3a", "3b", "3c"] +// ] + +[for (i of numbers) if (i > 1) for (j of letters) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"], lo mismo de arriba: + +[for (i of numbers) for (j of letters) if (i > 1) if(j > "a") i+j] +// ["2b", "2c", "3b", "3c"] + +[for (i of numbers) if (i > 1) [for (j of letters) if(j > "a") i+j]] +// [["2b", "2c"], ["3b", "3c"]], no lo mismo de arriba: + +[for (i of numbers) [for (j of letters) if (i > 1) if(j > "a") i+j]] +// [[], ["2b", "2c"], ["3b", "3c"]] +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<p>Estuvo inicialmente en el borrador de ECMAScript 6, pero se eliminó en la revisión 27 (Agosto 2014). Por favor ver revisiones mas viejas de ES6 para semánticas de especificación. Se espera que haya una versión actualizada en un nuevo borrador de ES2016 / ES7.</p> + +<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>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("30") }}</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>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("30") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notas_de_implementación_específicas_de_SpiderMonkey">Notas de implementación específicas de SpiderMonkey</h2> + +<ul> + <li>{{jsxref("Statements/let", "let")}} como identificador no es soportado ya que let solo está disponible actualmente en la versión 1.7 de JS y etiquetas de rutinas XUL.</li> + <li>Desestructurar en comprensiones todavía no está soportado ({{bug(980828)}}).</li> +</ul> + +<h2 id="Diferencias_con_las_comprensiones_de_los_viejos_JS1.7JS1.8">Diferencias con las comprensiones de los viejos JS1.7/JS1.8</h2> + +<ul> + <li>Las comprensiones de ES7 crean un ámbito por nodo "for" en lugar de tomar la comprensión como un todo. + <ul> + <li>Viejo: <code>[()=>x for (x of [0, 1, 2])][1]() // 2</code></li> + <li>Nuevo: <code>[for (x of [0, 1, 2]) ()=>x][1]() // 1, cada iteración crea un enlace fresco para x.</code></li> + <li>Las comprensiones de ES7 empiezan con "for" en lugar de la expresión de asignación. + <ul> + <li>Viejo: <code>[i * 2 for (i of numbers)]</code></li> + <li>Nuevo: <code>[for (i of numbers) i * 2]</code></li> + </ul> + </li> + </ul> + </li> + <li>Las comprensiones de ES7 pueden tener múltiples componentes <code>if</code> y <code>for</code>.</li> + <li>Las comprensiones de ES7 solo trabajan con <code>{{jsxref("Statements/for...of", "for...of")}}</code> y no con iteraciones <code>{{jsxref("Statements/for...in", "for...in")}}</code>.</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> + <li>{{jsxref("Operators/Generator_comprehensions", "Generator comprehensions", "" ,1)}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/asignacion/index.html b/files/es/web/javascript/referencia/operadores/asignacion/index.html new file mode 100644 index 0000000000..1fa4b79ac4 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/asignacion/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/referencia/operadores/assignment_operators/index.html b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html new file mode 100644 index 0000000000..a2d44f62ce --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html @@ -0,0 +1,461 @@ +--- +title: Operadores de asignación +slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Un <strong>operador de asignacion</strong> asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.</p> + +<h2 id="Visión_general"><span class="short_text" id="result_box" lang="es"><span>Visión general</span></span></h2> + +<p>El operador de asignación basico es el igual (<code>=</code>), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nombres</th> + <th>Abreviaciones</th> + <th>Significado</th> + </tr> + <tr> + <td><a href="#Assignment">Asignación</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">Asignación de adición</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Asignación de sustracción</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Asignación de multiplicación</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Asignación de división</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">Asignación de Resto</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation_assignment">Asignación de exponenciación</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la derecha</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">Asignacion AND</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Asignacion XOR</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Asignacion OR</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Asignación"><a name="Assignment">Asignación</a></h2> + +<p>Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.</p> + +<h3 id="Sintaxis">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y +</pre> + +<h3 id="Ejemplos">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asumiendo las siguientes variables +// x = 5 +// y = 10 +// z = 25 + + +x = y // x es 10 +x = y = z // x, y, z son todas 25 +</pre> + +<h2 id="Asignación_de_Adición"><a name="Addition_assignment">Asignación de Adición</a></h2> + +<p>El operador de asignación de suma <strong>agrega</strong> el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.</p> + +<h3 id="Sintaxis_2">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x += y +<strong>Significado:</strong> x = x + y +</pre> + +<h3 id="Ejemplos_2">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asuma las siguientes variables +// foo = "foo" +// bar = 5 +// baz = true + + +// Number + Number -> Adición +bar += 2 // 7 + +// Boolean + Number -> Adición +baz += 1 // 2 + +// Boolean + Boolean -> Adición +baz += false // 1 + +// Number + String -> concatenación +bar += "foo" // "5foo" + +// String + Boolean -> concatenación +foo += false // "foofalse" + +// String + String -> concatenación +foo += "bar" // "foobar" +</pre> + +<h2 id="Asignación_de_Sustracción"><a name="Subtraction_assignment">Asignación de Sustracción</a></h2> + +<p>El operador de asignación de sustracción <strong>sustrae </strong>el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.</p> + + + +<h4 id="Sintaxis_3">Sintaxis</h4> + + + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x -= y +<strong>Significado:</strong> x = x - y +</pre> + +<h4 id="Ejemplos_3">Ejemplos</h4> + +<pre class="brush: js notranslate">// Asumiendo las siguientes variables +// bar = 5 + +bar -= 2 // 3 +bar -= "foo" // NaN +</pre> + +<h2 id="Asignación_de_Multiplicación">Asignación de Multiplicación </h2> + +<p>El operador de asignación de multiplicación <strong>multiplica </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_4">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x *= y +<strong>Significado:</strong> x = x * y +</pre> + +<h3 id="Ejemplos_4">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asumiendo la siguiente variable +// bar = 5 + +bar *= 2 // 10 +bar *= "foo" // NaN +</pre> + +<h2 id="Asignación_de_división"><a name="Division_assignment">Asignación de división</a></h2> + +<p>El operador de asignación de división <strong>divide </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_5">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x /= y +<strong>Significado:</strong> x = x / y +</pre> + +<h3 id="Ejemplos_5">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asumiendo la siguiente variable +// bar = 5 + +bar /= 2 // 2.5 +bar /= "foo" // NaN +bar /= 0 // Infinity +</pre> + +<h2 id="Asignación_de_resto"><a name="Remainder_assignment">Asignación de resto</a></h2> + +<p>El operador de asignación de resto <strong>divide </strong>la variable por el valor del operador derecho y asigna el <strong>resto </strong>a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.</p> + +<h3 id="Sintaxis_6">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x %= y +<strong>Significado:</strong> x = x % y +</pre> + +<h3 id="Ejemplos_6">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asumiendo la siguiente variable +// bar = 5 + +bar %= 2 // 1 +bar %= "foo" // NaN +bar %= 0 // NaN +</pre> + +<h2 id="Asignación_de_exponenciación"><a id="Exponentiation_assignment" name="Exponentiation_assignment"></a>Asignación de <span id="result_box" lang="es"><span>exponenciación</span></span></h2> + +<p>El operador de asignación de exponente evalua el resultado de elevar primero el operando a la <strong>potencia </strong>del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles</p> + +<h3 id="Sintaxis_7">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x **= y +<strong>Significado:</strong> x = x ** y +</pre> + +<h3 id="Ejemplos_7">Ejemplos</h3> + +<pre class="brush: js notranslate">// Asumiendo la siguiente variable +// bar = 5 + +bar **= 2 // 25 +bar **= "foo" // NaN</pre> + +<h2 id="Asignación_de_desplazamiento_a_la_izquierda"><a name="Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></h2> + +<p>El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_8">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x <<= y +<strong>Significado:</strong> x = x << y +</pre> + +<h3 id="Ejemplos_8">Ejemplos</h3> + +<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) +bar <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h2 id="Asignación_de_desplazamiento_a_la_derecha"><a name="Right_shift_assignment">Asignación de desplazamiento a la derecha</a></h2> + +<p>El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_9">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>= y +<strong>Significado:</strong> x = x >> y +</pre> + +<h3 id="Ejemplos_9">Ejemplos</h3> + +<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) +bar >>= 2; // 1 (00000000000000000000000000000001) + +var bar -5; // (-00000000000000000000000000000101) +bar >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h2 id="Asignación_sin_signo_de_desplazamiento_a_la_derecha"><a name="Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></h2> + +<p>El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_10">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>>= y +<strong>Significado:</strong> x = x >>> y +</pre> + +<h3 id="Ejemplo">Ejemplo</h3> + +<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) +bar >>>= 2; // 1 (00000000000000000000000000000001) + +var bar = -5; // (-00000000000000000000000000000101) +bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h2 id="Asignación_AND"><a name="Bitwise_AND_assignment">Asignación AND</a></h2> + +<p>El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.</p> + +<h3 id="Sintaxis_11">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &= y +<strong>Significado:</strong> x = x & y +</pre> + +<h3 id="Ejemplo_2">Ejemplo</h3> + +<pre class="brush: js notranslate">var bar = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +bar &= 2; // 0 +</pre> + +<h2 id="Asignación_XOR"><a name="Bitwise_XOR_assignment">Asignación XOR</a></h2> + +<p>El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles</p> + +<h3 id="Sintaxis_12">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x ^= y +<strong>Significado:</strong> x = x ^ y +</pre> + +<h3 id="Ejemplo_3">Ejemplo</h3> + +<pre class="brush: js notranslate">var bar = 5; +bar ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Asignación_OR"><a name="Bitwise_OR_assignment">Asignación OR</a></h2> + +<p>El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles</p> + +<h3 id="Sintaxis_13">Sintaxis</h3> + +<pre class="syntaxbox notranslate"><strong>Operador:</strong> x |= y +<strong>Significado:</strong> x = x | y +</pre> + +<h3 id="Ejemplo_4">Ejemplo</h3> + +<pre class="brush: js notranslate">var bar = 5; +bar |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Ejemplos_10">Ejemplos</h2> + +<h3 id="Operador_izquierdo_con_otros_operadores_de_asignación">Operador izquierdo con otros operadores de asignación</h3> + +<p>En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:</p> + +<pre class="brush: js notranslate">a[i++] += 5 // i es evaluado una vez +a[i++] = a[i++] + 5 // i es evaluado dos veces +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}</td> + <td>{{Spec2('ES1')}}</td> + <td> + <p>Definición inicial</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome para Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte basico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vea_tambien">Vea tambien</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Operadores Aritméticos</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/async_function/index.html b/files/es/web/javascript/referencia/operadores/async_function/index.html new file mode 100644 index 0000000000..12e76e6ce5 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/await/index.html b/files/es/web/javascript/referencia/operadores/await/index.html new file mode 100644 index 0000000000..d1a84251f1 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/bitwise_operators/index.html b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html new file mode 100644 index 0000000000..2f0e76013f --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html @@ -0,0 +1,721 @@ +--- +title: Operadores a nivel de bit +slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators +tags: + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Los operadores a nivel de bit </strong>tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">números</a> decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.</p> + +<p>La siguiente tabla resume los operadores a nivel de bit de JavaScript:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Uso</th> + <th>Descripción</th> + </tr> + <tr> + <td><a href="#Bitwise_AND">AND binario</a></td> + <td><code>a & b</code></td> + <td>Devuelve un uno en cada posición en la que ambos operandos sea uno.</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">OR binario </a></td> + <td><code>a | b</code></td> + <td>Devuelve un uno en cada posición en la que uno o ambos operandos sea uno.</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> + <td><code>a ^ b</code></td> + <td>Devuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. </td> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> + <td><code>~ a</code></td> + <td>Invierte los bits del operando.</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift</a></td> + <td><code>a << b</code></td> + <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la izquierda, desplazando en ceros desde la derecha.</td> + </tr> + <tr> + <td><a href="#Right_shift">Sign-propagating right shift</a></td> + <td><code>a >> b</code></td> + <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, descartando los bits desplazados fuera.</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> + <td><code>a >>> b</code></td> + <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, desplazando en ceros desde la izquierda.</td> + </tr> + </tbody> +</table> + +<h2 id="Enteros_con_signo_de_32_bits">Enteros con signo de 32 bits</h2> + +<p>Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:</p> + +<pre>00000000000000000000000100111010 +</pre> + +<p>A continuación se codifica <code>~314</code> como complemento a uno de 314:</p> + +<pre>11111111111111111111111011000101 +</pre> + +<p>Por último, se codifica <code>-314 como complemento a dos de </code><code>314</code>:</p> + +<pre>11111111111111111111111011000110 +</pre> + +<p>El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado <em>bit de signo.</em></p> + +<p>El número 0 es el entero compuesto íntegramente por bits en 0.</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) + +</pre> + +<p>El número -1 es el entero compuesto íntegramente por bits de 1.</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) +</pre> + +<p>El número <code>-2147483648</code> (representación hexadecimal: <code>-0x80000000</code>) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) +</pre> + +<p>El número <code>2147483647</code> (representación hexadecimal: <code>0x7fffffff</code>) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. </p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) +</pre> + +<p>Los números <code>-2147483648</code> and <code>2147483647</code> son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.</p> + +<h2 id="Operadores_lógicos_a_nivel_de_bit">Operadores lógicos<strong> a nivel de bit</strong></h2> + +<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p> + +<ul> + <li>Los operandos son convertidos en enteros de 32 bits y representados por series de bits (ceros y unos). Los numeros con más de 32 bits se convierten para que sus bits más significativos sean descartados. Por ejemplo, el siguiente entero con más de 32 bits se convierte a un entero de 32 bits.</li> + <li> + <pre><code>Antes: 1100110111110100000000000000110000000000001 +Después: 10100000000000000110000000000001</code></pre> + </li> + <li>Cada bit del primer operando es emparejado con su bit correspondiente en el segundo operando: el primero con el primero, el segundo con el segundo, y así.</li> + <li>El operador se aplica a cada pareja de bits, y el resultado se construye bit a bit. </li> +</ul> + +<h3 id="(Bitwise_AND_o_AND_a_nivel_de_bits)"><a name="Bitwise_AND">& (Bitwise AND o AND a nivel de bits)</a></h3> + +<p>Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, <code>a</code> AND <code>b</code> es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a AND b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. </p> + +<h3 id="(Bitwise_OR_o_OR_a_nivel_de_bits)"><a name="Bitwise_OR">| (Bitwise OR o OR a nivel de bits)</a></h3> + +<p>Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.</p> + +<h3 id="(Bitwise_XOR_o_XOR_a_nivel_de_bits)"><a name="Bitwise_XOR">^ (Bitwise XOR o XOR a nivel de bits)</a></h3> + +<p>Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x</p> + +<h3 id="(Bitwise_NOT_o_Negación_a_nivel_de_bits)"><a name="Bitwise_NOT">~ (Bitwise NOT o Negación a nivel de bits)</a></h3> + +<p>Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NOT a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<p> </p> + +<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p> </p> + +<p>Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.</p> + +<p>Ejemplo con indexOf:</p> + +<pre class="brush: js">var str = 'rawr'; +var searchFor = 'a'; + +// esta es un forma alternativa de escribir (-1*str.indexOf('a') <= 0) +if (~str.indexOf(searchFor)) { + // searchFor esta en el string +} else { + // searchFor no esta en el string +} + +// aquí verás los valores que retorna (~str.indexOf(searchFor)) +// r == -1 +// a == -2 +// w == -3 +</pre> + +<h2 id="Operadores_de_desplazamiento_a_nivel_de_bit">Operadores de desplazamiento <strong>a nivel de bit</strong></h2> + +<p>Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.</p> + +<p>Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.</p> + +<h3 id="<<_(Desplazamiento_a_la_izquierda)"><a name="Left_shift"><< (Desplazamiento a la izquierda)</a></h3> + +<p>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</p> + +<p>Por ejemplo, 9 << 2 devuelve 36:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Desplazar a la izquierda cualquier número <strong>x</strong> por <strong>y</strong> bits da por resultado <strong>x * 2^y</strong>.</p> + +<h3 id=">>_(Desplazamiento_a_la_derecha_con_propagación_de_signo_o_Desplazamiento_aritmético_a_la_derecha)"><a name="Right_shift">>> (Desplazamiento a la derecha con propagación de signo o </a><a name="Unsigned_right_shift">Desplazamiento aritmético a la derecha</a><a name="Right_shift">)</a></h3> + +<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".</p> + +<p>Por ejemplo, <code>9 >> 2</code> devuelve 2:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Igualmente, <code>-9 >> 2</code> devuelve-3, porque se mantiene el signo:</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(Desplazamiento_a_la_derecha_con_relleno_de_ceros_o_Desplazamiento_lógico_)"><a name="Unsigned_right_shift">>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )</a></h3> + +<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. </p> + +<p><br> + Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, <code>9 >>> 2</code> da 2, al igual que <code>9 >> 2</code>:</p> + +<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Sin embargo, no es el caso para números negativos. Por ejemplo, <code>-9 >>> 2</code> da 1073741821, que es diferente de <code>-9 >> 2</code> (que da -3):</p> + +<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Banderas_y_máscaras_de_bits">Banderas y máscaras de bits</h3> + +<p>Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).</p> + +<p>Supongamos que hay 4 banderas:</p> + +<ul> + <li>bandera A: tenemos un problema de hormigas</li> + <li>bandera B: somos dueños de un murciélago</li> + <li>bandera C: somos dueños de un gato</li> + <li>bandera D: somos dueños de un pato</li> +</ul> + +<p>Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:</p> + +<pre class="brush: js">var flags = 5; // binary 0101 +</pre> + +<p>Este valor indica:</p> + +<ul> + <li>la bandera A es verdadera (tenemos un problema de hormigas);</li> + <li>la bandera B es falsa (no tenemos un murciélago);</li> + <li>la bandera C es verdadera (somos dueños de un gato);</li> + <li>la bandera D es falsa (no tenemos pato);</li> +</ul> + +<p>Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.</p> + +<p>Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:</p> + +<pre class="brush: js">var FLAG_A = 1; // 0001 +var FLAG_B = 2; // 0010 +var FLAG_C = 4; // 0100 +var FLAG_D = 8; // 1000 +</pre> + +<p>Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:</p> + +<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:</p> + +<pre class="brush: js">// if we own a cat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // do stuff +} +</pre> + +<p>Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:</p> + +<pre class="brush: js">// if we own a bat or we own a cat +// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true +if ((flags & FLAG_B) || (flags & FLAG_C)) { + // do stuff +} +</pre> + +<pre class="brush: js">// if we own a bat or cat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // do stuff +} +</pre> + +<p>Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:</p> + +<pre class="brush: js">// yes, we own a cat and a duck +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:</p> + +<pre class="brush: js">// no, we don't have an ant problem or own a cat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):</p> + +<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:</p> + +<pre class="brush: js">// if we didn't have a bat, we have one now, +// and if we did have one, bye-bye bat +// same thing for cats +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finalmente, todas las banderas se pueden voltear con el operador NOT:</p> + +<pre class="brush: js">// entering parallel universe... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Fragmentos_de_conversión">Fragmentos de conversión</h3> + +<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> + +<pre class="brush: js">var sBinString = "1011"; +var nMyNumber = parseInt(sBinString, 2); +alert(nMyNumber); // prints 11, i.e. 1011 +</pre> + +<p> </p> + +<p>Convierte una cadena binaria a un número decimal:</p> + +<p> </p> + +<pre class="brush: js">var nMyNumber = 11; +var sBinString = nMyNumber.toString(2); +alert(sBinString); // prints 1011, i.e. 11 +</pre> + +<h3 id="Automatiza_la_creación_de_una_máscara.">Automatiza la creación de una máscara.</h3> + +<p>Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:</p> + +<pre class="brush: js">function createMask () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 +var mask2 = createMask(false, false, true); // 4, i.e.: 0100 +var mask3 = createMask(true); // 1, i.e.: 0001 +// etc. + +alert(mask1); // prints 11, i.e.: 1011 +</pre> + +<h3 id="Algoritmo_inverso_una_matriz_de_valores_booleanos_de_una_máscara">Algoritmo inverso: una matriz de valores booleanos de una máscara</h3> + +<p>Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:</p> + +<pre class="brush: js">function arrayFromMask (nMask) { + // nMask must be between -2147483648 and 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError("arrayFromMask - out of range"); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var array1 = arrayFromMask(11); +var array2 = arrayFromMask(4); +var array3 = arrayFromMask(1); + +alert("[" + array1.join(", ") + "]"); +// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>Puedes probar ambos algoritmos al mismo tiempo ...</p> + +<pre class="brush: js">var nTest = 19; // our custom mask +var nResult = createMask.apply(this, arrayFromMask(nTest)); + +alert(nResult); // 19 +</pre> + +<p>Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:</p> + +<pre class="brush: js">function createBinaryString (nMask) { + // nMask must be between -2147483648 and 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = createBinaryString(11); +var string2 = createBinaryString(4); +var string3 = createBinaryString(1); + +alert(string1); +// prints 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definicion inicial</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Operadores logicos</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/class/index.html b/files/es/web/javascript/referencia/operadores/class/index.html new file mode 100644 index 0000000000..e654359035 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/comparacion/index.html b/files/es/web/javascript/referencia/operadores/comparacion/index.html new file mode 100644 index 0000000000..c60efcaada --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/comparacion/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/referencia/operadores/comparison_operators/index.html b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html new file mode 100644 index 0000000000..e4cbd93b31 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html @@ -0,0 +1,261 @@ +--- +title: Operadores de Comparación +slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators +tags: + - JavaScript + - Operador + - Referencia +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, <code>===</code>) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, <code>==</code>) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <code><=</code>), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.</p> + +<p>Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.</p> + +<pre class="brush: js notranslate">console.log(1 == 1) +// Esperamos True + +console.log("1" == 1 ) +// Esperamos true + +console.log( 1 === 1) +// Esperamos true + +console.log( "1" === 1) +// Esperamos false +</pre> + +<p>Características de las comparaciones:</p> + +<ul> + <li>Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.</li> + <li>Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico). <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre sí. </li> + <li>Dos operandos booleanos son estrictamente iguales si ambos son <code>true</code> o ambos son <code>false</code>.</li> + <li>Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas.</li> + <li>Una expresión que compara objetos solo es verdadera si los operandos hacen referencia al mismo objeto.</li> + <li>Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractivamente iguales entre sí.</li> +</ul> + +<h2 id="Operadores_de_igualdad">Operadores de igualdad</h2> + +<h3 id="Igualdad"><a name="Equality">Igualdad (==)</a></h3> + +<p>El operador de igualdad convierte los operandos si <strong>no son del mismo tipo</strong>, luego aplica una comparación estricta. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.</p> + +<h4 id="Sintaxis">Sintaxis</h4> + +<pre class="syntaxbox notranslate">x == y +</pre> + +<h4 id="Ejemplos">Ejemplos</h4> + +<pre class="brush: js notranslate">1 == 1 // true +'1' == 1 // true +1 == '1' // true +0 == false // true +0 == null // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 == object2 // false +0 == undefined // false +null == undefined // true +</pre> + +<h3 id="Desigualdad_!"><a name="Inequality">Desigualdad (!=)</a></h3> + +<p>El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos <strong>no son del mismo tipo</strong>, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.</p> + +<h4 id="Sintaxis_2">Sintaxis</h4> + +<pre class="syntaxbox notranslate">x != y</pre> + +<h4 id="Ejemplos_2">Ejemplos</h4> + +<pre class="brush: js notranslate">1 != 2 // true +1 != '1' // false +1 != "1" // false +1 != true // false +0 != false // false +</pre> + +<h3 id="Identidad_igualdad_estricta"><a name="Identity">Identidad / igualdad estricta (===)</a></h3> + +<p>El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) <strong>sin conversión de tipo</strong>.</p> + +<h4 id="Sintaxis_3">Sintaxis</h4> + +<pre class="syntaxbox notranslate">x === y</pre> + +<h4 id="Ejemplos_3">Ejemplos</h4> + +<pre class="brush: js notranslate">3 === 3 // true +3 === '3' // false +var object1 = {'key': 'value'}, object2 = {'key': 'value'}; +object1 === object2 // false</pre> + + + +<h3 id="Sin_identidad_desigualdad_estricta_!"><a name="Nonidentity">Sin identidad / desigualdad estricta (!==)</a></h3> + +<p>El operador sin identidad devuelve verdadero si los operandos <strong>no son iguales y / o no del mismo tipo</strong>.</p> + +<h4 id="Sintaxis_4">Sintaxis</h4> + +<pre class="syntaxbox notranslate">x !== y</pre> + +<h4 id="Ejemplos_4">Ejemplos</h4> + +<pre class="brush: js notranslate">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Operadores_relacionales">Operadores relacionales</h2> + +<p>Cada uno de estos operadores llamará a la función <code>valueOf()</code> en cada operando antes de realizar una comparación.</p> + +<h3 id="Operador_mayor_que_>"><a name="Greater_than_operator">Operador mayor que (>)</a></h3> + +<p>El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.</p> + +<h4 id="Sintaxis_5">Sintaxis</h4> + +<pre class="syntaxbox notranslate">x > y</pre> + +<h4 id="Ejemplos_5">Ejemplos</h4> + +<pre class="brush: js notranslate">4 > 3 // true +</pre> + +<h3 id="Operador_mayor_o_igual_>"><a name="Greater_than_or_equal_operator">Operador mayor o igual (>=)</a></h3> + +<p>El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.</p> + +<h4 id="Sintaxis_6">Sintaxis</h4> + +<pre class="syntaxbox notranslate"> x >= y</pre> + +<h4 id="Ejemplos_6">Ejemplos</h4> + +<pre class="brush: js notranslate">4 >= 3 // true +3 >= 3 // true +</pre> + +<h3 id="Operador_menor_que_<"><a name="Less_than_operator"> Operador menor que (<)</a></h3> + +<p>El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.</p> + +<h4 id="Sintaxis_7">Sintaxis</h4> + +<pre class="syntaxbox notranslate"> x < y</pre> + +<h4 id="Ejemplos_7">Ejemplos</h4> + +<pre class="brush: js notranslate">3 < 4 // true +</pre> + +<h3 id="Operador_menor_o_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor o igual (<=)</a></h3> + +<p>El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.</p> + +<h4 id="Sintaxis_8">Sintaxis</h4> + +<pre class="syntaxbox notranslate"> x <= y</pre> + +<h4 id="Ejemplos_8">Ejemplos</h4> + +<pre class="brush: js notranslate">3 <= 4 // true +</pre> + +<h2 id="Usando_los_operadores_de_igualdad">Usando los operadores de igualdad</h2> + +<p>Los operadores de igualdad estándar (<code>==</code> y <code>!=</code>) utilizan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparación de Igualdad Abstracta</a> para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión <code>5 == '5'</code>, la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.</p> + +<p>Los operadores de igualdad estricta (<code>===</code> y <code>!==</code>) usan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de Comparación de Igualdad Estricta</a> y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es <code>false</code>, entonces <code>5 !== '5'</code>.</p> + +<p>Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.</p> + +<p>Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:</p> + +<ul> + <li>Al comparar un número y una cadena, la cadena se convierte en un valor numérico. JavaScript intenta convertir el literal numérico de cadena a un valor de tipo <code>Number</code>. Primero, un valor matemático se deriva del literal numérico de cadena. A continuación, este valor se redondea al valor de tipo <code>Number</code> más cercano.</li> + <li>Si uno de los operandos es <code>Boolean</code>, el operando <code>Boolean</code> se convierte en 1 si es <code>true</code> y +0 si es <code>false</code>.</li> + <li>Si un objeto se compara con un número o cadena, JavaScript intenta devolver el valor predeterminado para el objeto. Los operadores intentan convertir el objeto a un valor primitivo, un valor <code>String</code> o <code>Number</code>, utilizando los métodos <code>valueOf</code> y <code>toString</code> de los objetos. Si falla este intento de convertir el objeto, se genera un error de tiempo de ejecución.</li> + <li>Tenga en cuenta que un objeto se convierte en una primitiva si, y solo si, su comparando es una primitiva. Si ambos operandos son objetos, se comparan como objetos, y la prueba de igualdad es verdadera solo si ambos refieren el mismo objeto.</li> +</ul> + +<div class="note"><strong>Nota:</strong> Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:</div> + +<pre class="brush:js notranslate">// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena): +'foo' === 'foo' + +var a = new String('foo'); +var b = new String('foo'); + +// false como a y b son tipo Objeto y referencia a diferentes objetos +a == b + +// false como a y b son tipo Objeto y referencia a diferentes objetos +a === b + +// true como a y 'foo' son de tipo diferente y, el Objeto (a) +// se convierte en cadena 'foo' antes de la comparación +a == 'foo'</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial. Implementado en JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> + <p>Agrega <code>===</code> y <code>!==</code> operadores. Implementado en JavaScript 1.3</p> + </td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdad</a></p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Operadores de Igualdad</a></p> + </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Operadores de Igualdad</a></p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + + + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y uniformidad</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html b/files/es/web/javascript/referencia/operadores/conditional_operator/index.html new file mode 100644 index 0000000000..6b48295902 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/decremento/index.html b/files/es/web/javascript/referencia/operadores/decremento/index.html new file mode 100644 index 0000000000..01fa5f0ee2 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/decremento/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/referencia/operadores/delete/index.html b/files/es/web/javascript/referencia/operadores/delete/index.html new file mode 100644 index 0000000000..99ec3e73dd --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/destructuring_assignment/index.html b/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html new file mode 100644 index 0000000000..b56e3d3b52 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/division/index.html b/files/es/web/javascript/referencia/operadores/division/index.html new file mode 100644 index 0000000000..d29816e37a --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/encadenamiento_opcional/index.html b/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html new file mode 100644 index 0000000000..06ccb5a999 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/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/referencia/operadores/expression_closures/index.html b/files/es/web/javascript/referencia/operadores/expression_closures/index.html new file mode 100644 index 0000000000..76fa278728 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/expression_closures/index.html @@ -0,0 +1,76 @@ +--- +title: Expression closures +slug: Web/JavaScript/Referencia/Operadores/Expression_closures +tags: + - Funciones + - JavaScript + - Referencia +translation_of: Archive/Web/JavaScript/Expression_closures +--- +<div class="warning"><strong>Non-standard. Do not use!</strong><br> +La sintaxis de cierre de la expresion es una caracteristica obsoleta de SpiderMonkey y <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083458">sera removida</a>. Par usos futuros, considere usar <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">funciones arrow</a>.</div> + +<div>{{jsSidebar("Operators")}}</div> + +<p>Los cierres de expresiones son una sintaxis de la función abreviada para escribir funciones simples.</p> + +<h2 id="Sintasis">Sintasis</h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) + <em>expression</em> +</pre> + +<h3 id="Parametros">Parametros</h3> + +<dl> + <dt><code>nombre</code></dt> + <dd>El nombre de la función. Puede ser omitido, en este caso la funcion es <em>anonima</em>. El nombre es unicamente local para el cuerpo de la función. </dd> + <dt><code>parametroN</code></dt> + <dd>El nombre de una argumento para pasar a la función. Una funcion puede tener hasta 255 argumentos. </dd> + <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">expresión</span></font></dt> + <dd>La expresion que comprende el cuerpo de la función. </dd> +</dl> + +<h2 id="Descripción">Descripción</h2> + +<p>Esta adición no es más que una abreviatura para escribir funciones simpres, dando al lenguage algo similar a un tipica <a class="external" href="http://en.wikipedia.org/wiki/Lambda_calculus#Lambda_calculus_and_programming_languages">Notacion Lambda</a>.</p> + +<p>JavaScript 1.7 y superiores:</p> + +<pre class="brush: js">function(x) { return x * x; }</pre> + +<p>JavaScript 1.8:</p> + +<pre class="brush: js">function(x) x * x</pre> + +<p>Esta sintasis le permite dejar de lado las llaves y la declaración 'return', haciendolos implicitos. No hay ningun beneficio adicional por escribir código de esta manera, aparte de que sea sintácticamente mas corto.</p> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Una abreviatura para binding event listeners:</p> + +<pre class="brush: js"> document.addEventListener('click', function() false, true); +</pre> + +<p>Usando esta notación con algunas de las funciones array desde JavaScript 1.6:</p> + +<pre class="brush: js">elems.some(function(elem) elem.type == 'text'); +</pre> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<div class="hidden">La tabla de compatibilidad en este pagina es generada desde una estructura de datos. Si le gustaria contribuir a la data, por favor valide esto <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envienos una solicitud de extracción.</div> + +<p>{{Compat("javascript.operators.expression_closures")}}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/function/index.html b/files/es/web/javascript/referencia/operadores/function/index.html new file mode 100644 index 0000000000..d5739239b2 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/function_star_/index.html b/files/es/web/javascript/referencia/operadores/function_star_/index.html new file mode 100644 index 0000000000..9c38872b7e --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/grouping/index.html b/files/es/web/javascript/referencia/operadores/grouping/index.html new file mode 100644 index 0000000000..ec78e8518f --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/in/index.html b/files/es/web/javascript/referencia/operadores/in/index.html new file mode 100644 index 0000000000..051056a25f --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/index.html b/files/es/web/javascript/referencia/operadores/index.html new file mode 100644 index 0000000000..dca4964faa --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/instanceof/index.html b/files/es/web/javascript/referencia/operadores/instanceof/index.html new file mode 100644 index 0000000000..3b9a45162d --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/miembros/index.html b/files/es/web/javascript/referencia/operadores/miembros/index.html new file mode 100644 index 0000000000..565a8b7f92 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/miembros/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/referencia/operadores/new.target/index.html b/files/es/web/javascript/referencia/operadores/new.target/index.html new file mode 100644 index 0000000000..0faa0f0878 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/new/index.html b/files/es/web/javascript/referencia/operadores/new/index.html new file mode 100644 index 0000000000..4635b12402 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/operador_coma/index.html b/files/es/web/javascript/referencia/operadores/operador_coma/index.html new file mode 100644 index 0000000000..a62701b3e1 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/operador_coma/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/referencia/operadores/operadores_lógicos/index.html b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html new file mode 100644 index 0000000000..87de8aad6d --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html @@ -0,0 +1,295 @@ +--- +title: Operadores lógicos +slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operadores_lógicos")}}</div> + +<p>Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores && y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.</p> + +<h2 id="Descripción">Descripción</h2> + +<p>Los operadores lógicos se describen en la tabla siguiente:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Operador</th> + <th>Uso</th> + <th>Descripción</th> + </tr> + <tr> + <td>AND (<code>&&</code>) lógico</td> + <td><code><em>expr1</em> && <em>expr2</em></code></td> + <td> + <p>Regresa <code>expr1 </code>si tal puede convertirse a false; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.</p> + </td> + </tr> + <tr> + <td>OR (<code>||</code>) lógico</td> + <td><code><em>expr1</em> || <em>expr2</em></code></td> + <td> + <p>Regresa<code> expr1</code> si tal puede convertirse a true; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".</p> + </td> + </tr> + <tr> + <td>NOT (<code>!</code>) lógico</td> + <td><code>!<em>expr</em></code></td> + <td> + <p>Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.</p> + </td> + </tr> + </tbody> +</table> + +<p>Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.</p> + +<p>A pesar de que los operadores && y || pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.</p> + +<h3 id="Evaluación_contra_corto_circuitos">Evaluación contra "corto circuitos"</h3> + +<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:</p> + +<ul> + <li><code>false && (<em>cualquier valor)</em></code> evalúa a "false".</li> + <li><code>true || (<em>cualquier valor)</em></code> evalúa a "true".</li> +</ul> + +<p>Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).</p> + +<p>Por ejemplo, las siguientes dos expresiones son equivalentes.</p> + +<pre class="brush: js">function shortCircuitEvaluation() { + doSomething() || doSomethingElse() +} + +function equivalentEvaluation() { + var flag = doSomething(); + if (!flag) { + doSomethingElse(); + } +} +</pre> + +<p>Sin embargo, las siguientes expresiones no son equivalentes debido a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).</p> + +<pre class="brush: js">false && true || true // regresa true +false && (true || true) // regresa false</pre> + +<h3 id="AND_()_lógico"><a name="Logical_AND">AND (<code>&&</code>) lógico</a></h3> + +<p>El siguiente código muestra ejemplos del operador && (AND lógico).</p> + +<pre class="brush: js">a1 = true && true // t && t regresa true +a2 = true && false // t && f regresa false +a3 = false && true // f && t regresa false +a4 = false && (3 == 4) // f && f regresa false +a5 = "Cat" && "Dog" // t && t regresa "Dog" +a6 = false && "Cat" // f && t regresa false +a7 = "Cat" && false // t && f regresa false +</pre> + +<h3 id="OR_()_lógico"><a name="Logical_OR">OR (<code>||</code>) lógico</a></h3> + +<p>El siguiente código muestra ejemplos del operador <code>||</code> (OR lógico).</p> + +<pre class="brush: js">o1 = true || true // t || t regresa true +o2 = false || true // f || t regresa true +o3 = true || false // t || f regresa true +o4 = false || (3 == 4) // f || f regresa false +o5 = "Cat" || "Dog" // t || t regresa "Cat" +o6 = false || "Cat" // f || t regresa "Cat" +o7 = "Cat" || false // t || f regresa "Cat" +</pre> + +<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3> + +<p>El siguiente código muestra ejemplos del operador <code>!</code> (NOT lógico).</p> + +<pre class="brush: js">n1 = !true // !t regresa false +n2 = !false // !f regresa true +n3 = !"Cat" // !t regresa false +</pre> + +<h3 id="Reglas_de_conversión">Reglas de conversión</h3> + +<h4 id="Convertir_de_AND_a_OR">Convertir de AND a OR</h4> + +<p>la siguiente operación que involucra Booleans:</p> + +<pre class="brush: js">bCondition1 && bCondition2</pre> + +<p>siempre es igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> + +<h4 id="Convertir_de_OR_a_AND">Convertir de OR a AND</h4> + +<p>la siguiente operación que involucra Booleans:</p> + +<pre class="brush: js">bCondition1 || bCondition2</pre> + +<p>siempre es igual a:</p> + +<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> + +<h4 id="Convertir_entre_operadores_NOT">Convertir entre operadores NOT</h4> + +<p>la siguiente operación que involucra Booleans:</p> + +<pre class="brush: js">!!bCondition</pre> + +<p>siempre es igual a:</p> + +<pre class="brush: js">bCondition</pre> + +<h3 id="Eliminando_paréntesis_anidados">Eliminando paréntesis anidados</h3> + +<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.</p> + +<h4 id="Eliminando_operadores_AND_anidados">Eliminando operadores AND anidados</h4> + +<p>La siguiente operación compleja que involucra Booleans:</p> + +<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> + +<p>siempre es igual a:</p> + +<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> + +<h4 id="Eliminando_operadores_OR_anidados">Eliminando operadores OR anidados</h4> + +<p>La siguiente operación compleja que involucra Booleans:</p> + +<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> + +<p>siempre es igual a:</p> + +<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definición inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> + <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></p> + </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>AND (<code>&&</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>OR (<code>||</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>NOT (<code>!</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>AND (<code>&&</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>OR (<code>||</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>NOT (<code>!</code>) lógico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Operaciones binarias</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html b/files/es/web/javascript/referencia/operadores/operator_precedence/index.html new file mode 100644 index 0000000000..2ff0464afd --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/pipeline_operator/index.html b/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html new file mode 100644 index 0000000000..cb671264cc --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/resto/index.html b/files/es/web/javascript/referencia/operadores/resto/index.html new file mode 100644 index 0000000000..1a6a7c56da --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/resto/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/referencia/operadores/sintaxis_spread/index.html b/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html new file mode 100644 index 0000000000..5a17cd05a2 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/sintaxis_spread/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/referencia/operadores/spread_operator/index.html b/files/es/web/javascript/referencia/operadores/spread_operator/index.html new file mode 100644 index 0000000000..28c75eb0f9 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/spread_operator/index.html @@ -0,0 +1,219 @@ +--- +title: Operador de propagación +slug: Web/JavaScript/Referencia/Operadores/Spread_operator +tags: + - Experimental + - Expérimental(2) + - JavaScript + - Operador +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>El operador de propagación <em><strong>spread operator</strong></em> permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Llamadas a funciones:</p> + +<pre class="brush: js">f(...iterableObj); +</pre> + +<p>Arrays literales:</p> + +<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre> + +<p>Desestructuración <em>destructuring</em>:</p> + +<pre class="brush: js">[a, b, ...iterableObj] = [1, 2, 3, 4, 5];</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Un_mejor_método_apply">Un mejor método apply</h3> + +<p><strong>Ejemplo:</strong> Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:</p> + +<pre class="brush: js">function f(x, y, z) { } +var args = [0, 1, 2]; +f.apply(null, args);</pre> + +<p>Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:</p> + +<pre class="brush: js">function f(x, y, z) { } +var args = [0, 1, 2]; +f(...args);</pre> + +<p>Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación <em>spread, </em>donde además puede ser usada varias veces.</p> + +<pre class="brush: js">function f(v, w, x, y, z) { } +var args = [0, 1]; +f(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Un_array_literal_mas_poderoso">Un array literal mas poderoso</h3> + +<p><strong>Ejemplo:</strong> La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis de propagación <em>spread</em> esta tarea resulta mucho mas concisa:</p> + +<pre class="brush: js">var parts = ['shoulder', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes'];</pre> + +<p>Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.</p> + +<h3 id="Combinación_del_método_apply_y_el_operador_new">Combinación del método apply y el operador new</h3> + +<p><strong>Ejemplo:</strong> En ES5 no es posible combinar <code>new</code> y <code>apply</code> (en ES5 el método <code>apply</code> crea un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). En ES6 la sintaxis de propagación <em>spread</em> soporta esto de forma natural:</p> + +<pre class="brush: js">var dateFields = readDateFields(database); +var d = new Date(...dateFields);</pre> + +<h3 id="Un_método_push_mejorado">Un método push mejorado</h3> + +<p><strong>Ejemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Agregar todos los elementos de arr2 a arr1 +Array.prototype.push.apply(arr1, arr2);</pre> + +<p>Usando el operador de propagación <em>spread</em> de ES6, este sería el resultado:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1.push(...arr2);</pre> + +<h3 id="Solo_funciona_para_iterables">Solo funciona para iterables</h3> + +<pre class="brush: js">var obj = {"key1":"value1"}; +function myFunction(x) { + console.log(x); // undefined +} +myFunction(...obj); +var args = [...obj]; +console.log(args, args.length) //[] 0</pre> + +<h2 id="Operador_Rest">Operador Rest</h2> + +<p>El operador <em>Rest</em> es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, <em>Rest</em> es lo contrario de <em>spread</em>. <em>Spread</em> 'expande' un array en sus elementos, y <em>Rest</em> recoge múltiples elementos y los 'condensa' en uno solo.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Commentario</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <p>{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}<br> + {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}</p> + </td> + <td>{{Spec2('ES6')}}</td> + <td> + <ul> + <li>12.2.4 Array Initializer</li> + <li>12.3.6 Argument Lists</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Operación de spread en arrays literales</td> + <td>{{CompatNo}}<br> + <a href="https://code.google.com/p/v8/issues/detail?id=3018">v8 issue 3018</a></td> + <td>{{ CompatGeckoDesktop("16") }}<br> + {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operación de spread en llamadas a funciones</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("27") }}<br> + {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operación de spread en desestructuración<br> + <em>destructuring</em></td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("34") }}<br> + {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en arrays literales</span></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("16") }}<br> + {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en llamadas a funciones</span></td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("27") }}<br> + {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>iOS 8</td> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en desestructuración</span><br> + <em>destructuring</em></td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("34") }}<br> + {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Temas_relacionados">Temas relacionados</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parámetros rest</a></li> +</ul> diff --git a/files/es/web/javascript/referencia/operadores/strict_equality/index.html b/files/es/web/javascript/referencia/operadores/strict_equality/index.html new file mode 100644 index 0000000000..0d09b1de71 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/super/index.html b/files/es/web/javascript/referencia/operadores/super/index.html new file mode 100644 index 0000000000..ff2ac5ae0e --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/sustracción/index.html b/files/es/web/javascript/referencia/operadores/sustracción/index.html new file mode 100644 index 0000000000..21bfd3a1ac --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/sustracción/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/referencia/operadores/this/index.html b/files/es/web/javascript/referencia/operadores/this/index.html new file mode 100644 index 0000000000..74ed62bb60 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/typeof/index.html b/files/es/web/javascript/referencia/operadores/typeof/index.html new file mode 100644 index 0000000000..088791f228 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/void/index.html b/files/es/web/javascript/referencia/operadores/void/index.html new file mode 100644 index 0000000000..0bf8048b21 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/yield/index.html b/files/es/web/javascript/referencia/operadores/yield/index.html new file mode 100644 index 0000000000..7237b6d689 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/operadores/yield_star_/index.html b/files/es/web/javascript/referencia/operadores/yield_star_/index.html new file mode 100644 index 0000000000..e2167b8c41 --- /dev/null +++ b/files/es/web/javascript/referencia/operadores/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/referencia/palabras_reservadas/index.html b/files/es/web/javascript/referencia/palabras_reservadas/index.html new file mode 100644 index 0000000000..32e0391e89 --- /dev/null +++ b/files/es/web/javascript/referencia/palabras_reservadas/index.html @@ -0,0 +1,98 @@ +--- +title: Palabras Reservadas +slug: Web/JavaScript/Referencia/Palabras_Reservadas +tags: + - JavaScript + - palabras reservadas +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +--- +<p> </p> + +<p>Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos. Las siguientes son reservadas como palabras claves existentes por la especificación ECMAScript:</p> + +<h3 id="Reserved_keywords_as_of_ECMAScript_6">Reserved keywords as of ECMAScript 6</h3> + +<div class="threecolumns"> +<ul> + <li>{{jsxref("Sentencias/break", "break")}}</li> + <li>{{jsxref("Sentencias/switch", "case")}}</li> + <li><code>class</code></li> + <li>{{jsxref("Sentencias/try...catch", "catch")}}</li> + <li>{{jsxref("Sentencias/const", "const")}}</li> + <li>{{jsxref("Sentencias/continue", "continue")}}</li> + <li>{{jsxref("Sentencias/debugger", "debugger")}}</li> + <li>{{jsxref("Sentencias/switch", "default")}}</li> + <li>{{jsxref("Operadores/delete", "delete")}}</li> + <li>{{jsxref("Sentencias/while", "do")}}</li> + <li>{{jsxref("Sentencias/if...else", "else")}}</li> + <li>{{jsxref("Sentencias/export", "export")}}</li> + <li><code>extends</code></li> + <li>{{jsxref("Sentencias/try...catch", "finally")}}</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> + <li>{{jsxref("Sentencias/function", "function")}}</li> + <li>{{jsxref("Sentencias/if...else", "if")}}</li> + <li>{{jsxref("Sentencias/import", "import")}}</li> + <li>{{jsxref("Sentencias/for...in", "in")}}</li> + <li>{{jsxref("Operadores/instanceof", "instanceof")}}</li> + <li>{{jsxref("Sentencias/let", "let")}}</li> + <li>{{jsxref("Operadores/new", "new")}}</li> + <li>{{jsxref("Sentencias/return", "return")}}</li> + <li>{{jsxref("Operadores/super", "super")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> + <li>{{jsxref("Operadores/this", "this")}}</li> + <li>{{jsxref("Sentencias/throw", "throw")}}</li> + <li>{{jsxref("Sentencias/try...catch", "try")}}</li> + <li>{{jsxref("Operadores/typeof", "typeof")}}</li> + <li>{{jsxref("Sentencias/var", "var")}}</li> + <li>{{jsxref("Operadores/void", "void")}}</li> + <li>{{jsxref("Sentencias/while", "while")}}</li> + <li>{{jsxref("Sentencias/with", "with")}}</li> + <li><code>yield</code></li> +</ul> +</div> + +<p>Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:</p> + +<ul> + <li><code>enum</code></li> +</ul> + +<p>Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:</p> + +<div class="threecolumns"> +<ul> + <li><code>implements</code></li> + <li><code>package</code></li> + <li><code>protected</code></li> + <li><code>static</code></li> + <li><code>interface</code></li> + <li><code>private</code></li> + <li><code>public</code></li> +</ul> +</div> + +<h4 id="Futuras_Palabras_Reservadas_en_estandares_antiguos">Futuras Palabras Reservadas en estandares antiguos</h4> + +<p>Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).</p> + +<div class="threecolumns"> +<ul> + <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>transient</code></li> + <li><code>volatile</code></li> +</ul> +</div> + +<p>Adicionalmente, los literales "<code>null"</code>, "<code>true"</code>, y "<code>false"</code> estan reservadas en ECMAScript para usos normales.</p> diff --git a/files/es/web/javascript/referencia/sentencias/block/index.html b/files/es/web/javascript/referencia/sentencias/block/index.html new file mode 100644 index 0000000000..36b2054d60 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/break/index.html b/files/es/web/javascript/referencia/sentencias/break/index.html new file mode 100644 index 0000000000..aff2a58733 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/class/index.html b/files/es/web/javascript/referencia/sentencias/class/index.html new file mode 100644 index 0000000000..c37b9ba43b --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/const/index.html b/files/es/web/javascript/referencia/sentencias/const/index.html new file mode 100644 index 0000000000..c55350fbd4 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/continue/index.html b/files/es/web/javascript/referencia/sentencias/continue/index.html new file mode 100644 index 0000000000..5371b4cdd7 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/debugger/index.html b/files/es/web/javascript/referencia/sentencias/debugger/index.html new file mode 100644 index 0000000000..bb36e356c0 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/default/index.html b/files/es/web/javascript/referencia/sentencias/default/index.html new file mode 100644 index 0000000000..5cc0eb9060 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/default/index.html @@ -0,0 +1,120 @@ +--- +title: default +slug: Web/JavaScript/Referencia/Sentencias/default +tags: + - JavaScript + - Palabra clave +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Sentencias")}}</div> + +<p>La palabra clave<strong> default, </strong>en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + +<p class="hidden">El codigo fuente para este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y mandenos un pull request.</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (expresion) { + case valor1: + //Declaración ejecutada cuando el resultado de la expresion conincida con valor1 + [break;] + default: + //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion + [break;] +}</pre> + +<p>Con una sentencia {{jsxref("Sentencias/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Descripción">Descripción</h2> + +<p>Para mas detalles vea las paginas:</p> + +<ul> + <li>Sentencia {{jsxref("Sentencias/switch", "switch")}} y</li> + <li>Sentencia {{jsxref("Sentencias/export", "export")}}.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usando_default_en_una_sentencia_switch">Usando <code>default</code> en una sentencia <code>switch</code></h3> + +<p>En el siguiente ejemplo, si se evalua <code>expr</code> como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave <code>default</code> ayudara en algun otro caso y ejecuta la declaración asociada.</p> + +<pre class="brush: js">switch (expr) { + case 'Naranjas': + console.log('Las Naranjas cuestan $0.59 el kilogramo.'); + break; + case 'Manzanas': + console.log('Las Manzanas cuestan $0.32 el kilogramo.'); + break; + default: + console.log('Lo esntimos, no tenemos ' + expr + '.'); +}</pre> + +<h3 id="Usando_default_con_export">Usando <code>default</code> con <code>export</code></h3> + +<p>Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:</p> + +<pre class="brush: js">// modulo "mi-modulo.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Entonces, en otro script, sera sencillo de importar el valor del modulo:</p> + +<pre class="brush: js">// modulo "otro-modulo.js" +import cubeArea from 'mi-modulo'; //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module' +console.log(cubeArea(3)); // 27 +</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-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</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 pagina es generada desde datos estruturados. si quieres contribuir con los datos, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div> + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Vea_tambien">Vea tambien</h2> + +<ul> + <li>{{jsxref("Sentencias/export", "export")}}</li> + <li>{{jsxref("Sentencias/switch", "switch")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/do...while/index.html b/files/es/web/javascript/referencia/sentencias/do...while/index.html new file mode 100644 index 0000000000..628c1458cd --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/empty/index.html b/files/es/web/javascript/referencia/sentencias/empty/index.html new file mode 100644 index 0000000000..627fd889c7 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/export/index.html b/files/es/web/javascript/referencia/sentencias/export/index.html new file mode 100644 index 0000000000..6016afd0ba --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/for-await...of/index.html b/files/es/web/javascript/referencia/sentencias/for-await...of/index.html new file mode 100644 index 0000000000..49349d7199 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/for...in/index.html b/files/es/web/javascript/referencia/sentencias/for...in/index.html new file mode 100644 index 0000000000..0680d69dea --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/for...of/index.html b/files/es/web/javascript/referencia/sentencias/for...of/index.html new file mode 100644 index 0000000000..572308b41a --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/for/index.html b/files/es/web/javascript/referencia/sentencias/for/index.html new file mode 100644 index 0000000000..875236ba2b --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/for_each...in/index.html b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html new file mode 100644 index 0000000000..bec1303e99 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/for_each...in/index.html @@ -0,0 +1,67 @@ +--- +title: for each...in +slug: Web/JavaScript/Referencia/Sentencias/for_each...in +tags: + - Deprecated + - E4X + - JavaScript + - Statement +translation_of: Archive/Web/JavaScript/for_each...in +--- +<p>{{jsSidebar("Statements")}} </p> + +<div class="warning"> +<p>La sentencia <code>for each ... in</code> ha quedado obsoleta como parte del estándar ECMA-357 (E4X). El soporte E4X ha sido quitado. Considere usar <code>for .. of</code> en su lugar. (Por favor, referirse al {{bug("791343")}}.)</p> +</div> + +<h2 id="Summary" name="Summary">Resumen</h2> + +<p>Itera una variable especifica por todos los valores de las propiedades del objeto. Para cada propiedad distinta, una sentencia especifica es ejecutada.</p> + +<h2 id="Syntax" name="Syntax">Sintaxis</h2> + +<pre class="syntaxbox">for each (<em>variable</em> in <em>objeto</em>) + <em>sentencia</em> +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Variable a iterar sobre los valores de las propiedades, opcionalmente declarado con la palabra reservada <code>var</code>. Esta variable es local a la función, no al bucle.</dd> +</dl> + +<dl> + <dt><code>objeto</code></dt> + <dd>Objeto por el cual las propiedades son iteradas.</dd> +</dl> + +<dl> + <dt><code>sentencia</code></dt> + <dd>Una sentencia a ejecutar para cada propiedad. Para ejecutar multiples sentencias dentro del bucle use una sentencia {{jsxref("Sentencias/block", "block")}} para agrupar esas sentencias.</dd> +</dl> + +<h2 id="Descripción" name="Descripción">Descripción</h2> + +<p>Algunas propiedades integradas no son iteradas. Estas incluyen todos los metodos integrados, p.ej.: el método <code>indexOf</code> de <code>String</code>. Sin embargo, todas las propiedades definidas por el usuario son iteradas.</p> + +<h2 id="Examples" name="Examples">Ejemplos</h2> + +<h3 id="Example_Using_for_each...in" name="Example:_Using_for_each...in">Ejemplo: Uso de <code>for each...in</code></h3> + +<p><strong>Atención:</strong> Nunca usar un bucle como este en arrays. Solamente usar en objetos. Más detalles: {{jsxref("Sentencias/for...in", "for...in")}}.</p> + +<p>El siguiente fragmento de código itera sobre las propiedades de un objeto, calculando su suma:</p> + +<pre class="brush: js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; +for each (var item in obj) { + sum += item; +} +print(sum); // imprime "26", que es 5+13+8 +</pre> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li>{{jsxref("Sentencias/for...in", "for...in")}} – una sentencia similar que itera sobre los nombres (<em>names</em>) de las propiedades.</li> + <li>{{jsxref("Sentencias/for", "for")}}</li> +</ul> diff --git a/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html new file mode 100644 index 0000000000..573c10fad8 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/funcion_asincrona/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/referencia/sentencias/function/index.html b/files/es/web/javascript/referencia/sentencias/function/index.html new file mode 100644 index 0000000000..36b02935d9 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/function_star_/index.html b/files/es/web/javascript/referencia/sentencias/function_star_/index.html new file mode 100644 index 0000000000..79ff51b7f2 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/if...else/index.html b/files/es/web/javascript/referencia/sentencias/if...else/index.html new file mode 100644 index 0000000000..3bac571218 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/import.meta/index.html b/files/es/web/javascript/referencia/sentencias/import.meta/index.html new file mode 100644 index 0000000000..8c09e97475 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/import/index.html b/files/es/web/javascript/referencia/sentencias/import/index.html new file mode 100644 index 0000000000..7d2c261d0e --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/index.html b/files/es/web/javascript/referencia/sentencias/index.html new file mode 100644 index 0000000000..bbf0ce42e8 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/label/index.html b/files/es/web/javascript/referencia/sentencias/label/index.html new file mode 100644 index 0000000000..03f3108e0e --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/let/index.html b/files/es/web/javascript/referencia/sentencias/let/index.html new file mode 100644 index 0000000000..8c450b37d4 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/return/index.html b/files/es/web/javascript/referencia/sentencias/return/index.html new file mode 100644 index 0000000000..6497e97632 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/switch/index.html b/files/es/web/javascript/referencia/sentencias/switch/index.html new file mode 100644 index 0000000000..9aa1f67dc0 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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>Si, ¡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_multiple-criterio">Metodos para casos con multiple-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 or 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/referencia/sentencias/throw/index.html b/files/es/web/javascript/referencia/sentencias/throw/index.html new file mode 100644 index 0000000000..d3e52f83ac --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/try...catch/index.html b/files/es/web/javascript/referencia/sentencias/try...catch/index.html new file mode 100644 index 0000000000..d429db6163 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/var/index.html b/files/es/web/javascript/referencia/sentencias/var/index.html new file mode 100644 index 0000000000..006e40a270 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/while/index.html b/files/es/web/javascript/referencia/sentencias/while/index.html new file mode 100644 index 0000000000..8eab047884 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/sentencias/with/index.html b/files/es/web/javascript/referencia/sentencias/with/index.html new file mode 100644 index 0000000000..d5dc78d600 --- /dev/null +++ b/files/es/web/javascript/referencia/sentencias/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/referencia/template_strings/index.html b/files/es/web/javascript/referencia/template_strings/index.html new file mode 100644 index 0000000000..708c879383 --- /dev/null +++ b/files/es/web/javascript/referencia/template_strings/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> diff --git a/files/es/web/javascript/shells/index.html b/files/es/web/javascript/shells/index.html new file mode 100644 index 0000000000..ac0e6f3443 --- /dev/null +++ b/files/es/web/javascript/shells/index.html @@ -0,0 +1,41 @@ +--- +title: JavaScript shells +slug: Web/JavaScript/Shells +translation_of: Web/JavaScript/Shells +--- +<div>{{JsSidebar}}</div> + +<p>Un shell(*) JavaScript te permite probar rápidamente fragmentos de código <a href="/es/docs/Web/JavaScript">JavaScript</a> si tener que recargar un sitio web. Éstos son extremadamente útiles para desarrollar y depurar código.</p> + +<p>*[N. del T.: Un "shell" es una ventana que muestra texto para ejecutar un comando; o en el caso de un lenguaje de programación, funciones en forma de texto, y el resultado se muestra también en formato de texto].</p> + +<h2 id="Shells_JavaScript_autónomas">Shells JavaScript autónomas</h2> + +<p>Las siguientes shells JavaScript son de entorno autónomos, como perl o python.</p> + +<ul> + <li><a href="http://nodejs.org/">Node.js</a> - Node.js es una plataforma para construir fácilmente aplicaciones de red rápidas y escalables.</li> + <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - Una shell JavaScript autónoma, con binarios compilados para Windows, Mac, y Linux.</li> + <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - Una shell JavaScript autónoma y extensible e incluye bibliotecas nativas y JavaScript.</li> + <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - Una shell JavaScript autónoma para escribir aplicaciones JavaScript multiplataforma. Se puede usar wxWidgets para aplicaciones GUI (del inglés "Interfaces Gráficas de Usuario"), que era conocido anteriormente como wxJavaScript.</li> + <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - Una shell JavaScript autónoma A standalone JavaScript shell mejorada por Perl. Puede usar módulos perl directamente desde JavaScript: DBI para integración de bases de datos, GTK2 para aplicaciones GUI, POSIX para programación de sistemas, etc. Lo mejor de CPAN ahoa para programadores JavaScript.</li> + <li><a class="external" href="http://shelljs.org">ShellJS</a> - Comandos de shell Unix portátiles para Node.js</li> +</ul> + +<h2 id="Listas_de_shells_JavaScript">Listas de shells JavaScript</h2> + +<p>Las siguientes shells JavaScript funcionan con Mozilla.</p> + +<ul> + <li>Firefox tiene una consola JavaScript incorporada, llamada <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, iniciando en la versión 6.</li> + <li><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - Un intérprete de líneas de comandos para JavaScript</li> + <li><a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> es un shell <a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a> habilitado, útil a veces para el desarrollo de Mozilla.</li> + <li><a class="external" href="http://jsconsole.com/">jsconsole.com</a> -- Una consola JavaScript de código abierto con la habilidad de enlazar fácilmente expresiones particulares</li> + <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - también disponible como parte de la <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extensión de Desarrolladores de Extensión</a></li> + <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - una shell basada en DHTML que te da el acceso a líneas de comando a una página web.</li> + <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Conecta a Firefox y otras aplicaciones Mozilla, explora y modifícalas desde adentro, mientras se ejecutan.</li> + <li><a class="external" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - (Ya no está mantenida) - Extensión de Firefox la cual proporciona una mejorada consola JavaScript, donde puedes cómodamente introducir y ejecutar arbitrariamente código JavaScript y modificar funciones.</li> + <li><a class="link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - Consola simple para Firefox.</li> + <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - Herramientas de desarrollador para Firefox, incluyendo consola.</li> + <li><a href="http://es6console.com">ES6Console.com</a> - Una consola JavaScript de código abierto para probar código ECMAScript 6 dentro del navegador.</li> +</ul> diff --git a/files/es/web/javascript/una_re-introducción_a_javascript/index.html b/files/es/web/javascript/una_re-introducción_a_javascript/index.html new file mode 100644 index 0000000000..b8f2756627 --- /dev/null +++ b/files/es/web/javascript/una_re-introducción_a_javascript/index.html @@ -0,0 +1,960 @@ +--- +title: Una reintroducción a JavaScript (Tutorial de JS) +slug: Web/JavaScript/Una_re-introducción_a_JavaScript +tags: + - Aprender + - Guía + - Intermedio + - Intro + - JavaScript + - Tutorial + - introducción +translation_of: Web/JavaScript/A_re-introduction_to_JavaScript +--- +<div>{{jsSidebar}}</div> + + +<p>¿Por qué una reintroducción? Porque {{Glossary("JavaScript")}} es conocido por ser <a href="http://crockford.com/javascript/javascript.html">el lenguaje de programación más incomprendido</a>. A menudo se le ridiculiza como un juguete, pero debajo de esa capa de engañosa simplicidad, aguardan poderosas características del lenguaje. Ahora un increíble número de aplicaciones de alto perfil utilizan JavaScript, lo cual demuestra que un conocimiento más profundo de esta tecnología es una habilidad importante para cualquier desarrollador web o móvil.</p> + +<p>Es útil comenzar con una descripción general de la historia del lenguaje. JavaScript fue creado en 1995 por Brendan Eich mientras era ingeniero en Netscape. JavaScript se lanzó por primera vez con Netscape 2 a principios de 1996. Originalmente se iba a llamar LiveScript, pero se le cambió el nombre en una desafortunada decisión de marketing que intentó capitalizar la popularidad del lenguaje Java de Sun Microsystem, a pesar de que los dos tienen muy poco en común. Esto ha sido una fuente de confusión desde entonces.</p> + +<p>Varios meses después, Microsoft lanzó JScript con Internet Explorer 3. Era un JavaScript prácticamente compatible. Varios meses después de eso, Netscape envió JavaScript a <a class="external" href="http://www.ecma-international.org/">Ecma International</a>, una organización europea de estándares, que resultó en la primera edición del estándar {{Glossary("ECMAScript")}} ese año. El estándar recibió una actualización significativa como <a class="external" href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript edición 3</a> en 1999, y se ha mantenido bastante estable desde entonces. La cuarta edición fue abandonada debido a diferencias políticas sobre la complejidad del lenguaje. Muchas partes de la cuarta edición formaron la base para la edición 5 de ECMAScript, publicada en diciembre de 2009, y para la sexta edición principal del estándar, publicada en junio de 2015.</p> + +<div class="note"> +<p>Debido a que es más familiar, nos referiremos a ECMAScript como "JavaScript" de ahora en adelante.</p> +</div> + +<p>A diferencia de la mayoría de los lenguajes de programación, el lenguaje JavaScript no tiene un concepto de entrada o salida. Está diseñado para ejecutarse como un lenguaje de <code>scripting</code> en un entorno hospedado, y depende del entorno para proporcionar los mecanismos para comunicarse con el mundo exterior. El entorno de alojamiento más común es el navegador, pero también se pueden encontrar intérpretes de JavaScript en una gran lista de otros lugares, incluidos Adobe Acrobat, Adobe Photoshop, imágenes SVG, el motor de widgets de Yahoo, entornos de lado del servidor como <a href="http://nodejs.org/">Node.js</a>, bases de datos NoSQL como <a href="http://couchdb.apache.org/">Apache CouchDB</a> de código abierto, computadoras integradas, entornos de escritorio completos como <a href="http://www.gnome.org/">GNOME</a> (una de las IGU —<em>Interfaz Gráfica de Usuario</em>— más populares para sistemas operativos GNU/Linux), y otros.</p> + +<h2 id="Información_general">Información general</h2> + +<p>JavaScript es un lenguaje dinámico múltiparadigma con tipos y operadores, objetos estándar integrados y métodos. Su sintaxis se basa en los lenguajes Java y C — muchas estructuras de esos lenguajes también se aplican a JavaScript. JavaScript admite la programación orientada a objetos con prototipos de objetos, en lugar de clases (consulta más información sobre {{jsxref("Inheritance_and_the_prototype_chain", "herencia prototípica")}} y ES2015 {{jsxref("Reference/Classes", "clases")}}. JavaScript también admite la programación funcional — debido a que son objetos, las funciones se pueden almacenar en variables y pasarse como cualquier otro objeto.</p> + +<p>Comencemos observando los componentes básicos de cualquier lenguaje: los tipos. Los programas JavaScript manipulan valores, y todos esos valores pertenecen a un tipo. Los tipos de JavaScript son:</p> + +<ul> + <li>{{jsxref("Number", "Números")}}</li> + <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li> + <li>{{jsxref("Boolean", "Booleanos")}}</li> + <li>{{jsxref("Function", "Funciones")}}</li> + <li>{{jsxref("Object", "Objetos")}}</li> + <li>{{jsxref("Symbol", "Símbolos")}} (nuevo en ES2015)</li> +</ul> + +<p>... oh, y {{jsxref("undefined")}} y {{jsxref("null")}}, que son ... ligeramente extraños. Y {{jsxref("Array")}}, que es un tipo de objeto especial. Y {{jsxref("Date", "Fechas (Date)")}} y {{jsxref("RegExp", "Expresiones regulares (RegExp)")}}, que son objetos que obtienes de forma gratuita. Y para ser técnicamente precisos, las funciones son solo un tipo especial de objeto. Por lo tanto, el diagrama de tipos se parece más a este:</p> + +<ul> + <li>{{jsxref("Number", "Números")}}</li> + <li>{{jsxref("String", "Cadenas de texto (Strings)")}}</li> + <li>{{jsxref("Boolean", "Booleanos")}}</li> + <li>{{jsxref("Symbol", "Símbolos")}} (nuevo en ES2015)</li> + <li>{{jsxref("Object", "Objetos")}} + <ul> + <li>{{jsxref("Function", "Funciones")}}</li> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Date")}}</li> + <li>{{jsxref("RegExp")}}</li> + </ul> + </li> + <li>{{jsxref("null")}}</li> + <li>{{jsxref("undefined")}}</li> +</ul> + +<p>Y también hay algunos tipos {{jsxref("Error")}} integrados. Sin embargo, las cosas son mucho más fáciles si nos atenemos al primer diagrama, por lo que discutiremos los tipos enumerados allí por ahora.</p> + +<h2 id="Números">Números</h2> + +<p>Los números en JavaScript son "valores IEEE 754 de formato de 64 bits de doble precisión", de acuerdo con las especificaciones. <strong><em>No existen números enteros</em></strong> en JavaScript (excepto {{jsxref("BigInt")}}), por lo que debes tener un poco de cuidado. Ve este ejemplo:</p> + +<pre class="syntaxbox notranslate">console.log(3 / 2); // 1.5, <em>not</em> 1 +console.log(Math.floor(3 / 2)); // 1</pre> + +<p>Entonces, un <em>entero aparente</em> de hecho <em>implícitamente es un <code>float</code></em>.</p> + +<p>Además, ten cuidado con cosas como:</p> + +<pre class="brush: js notranslate">0.1 + 0.2 == 0.30000000000000004; +</pre> + +<p>En la práctica, los valores enteros se tratan como enteros de 32 bits, y algunas implementaciones incluso los almacenan de esa manera hasta que se les pide que realicen una instrucción que sea válida en un Número pero no en un entero de 32 bits. Esto puede ser importante para operaciones bit a bit.</p> + +<p>Se admiten los {{jsxref("Operators", "operadores", "#Operadores_aritméticos")}} estándar, incluidas la aritmética de suma, resta, módulo (o resto), etc. También hay un objeto incorporado que no mencionamos anteriormente llamado {{jsxref("Math")}} que proporciona funciones matemáticas avanzadas y constantes:</p> + +<pre class="brush: js notranslate">Math.sin(3.5); +var circumference = 2 * Math.PI * r; +</pre> + +<p>Puedes convertir una cadena en un número entero usando la función {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} incorporada. Esta toma la base para la conversión como un segundo argumento opcional, que siempre debes proporcionar:</p> + +<pre class="brush: js notranslate">parseInt('123', 10); // 123 +parseInt('010', 10); // 10 +</pre> + +<p>En los navegadores más antiguos, se supone que las cadenas que comienzan con un "0" están en octal (raíz 8), pero este no ha sido el caso desde 2013 más o menos. A menos que estés seguro de tu formato de cadena, puedes obtener resultados sorprendentes en esos navegadores más antiguos:</p> + +<pre class="brush: js notranslate">parseInt('010'); // 8 +parseInt('0x10'); // 16 +</pre> + +<p>Aquí, vemos que la función {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} trata la primera cadena como octal debido al 0 inicial, y la segunda cadena como hexadecimal debido al "0x" inicial. La <em>notación hexadecimal todavía está en su lugar</em>; solo se ha eliminado el octal.</p> + +<p>Si deseas convertir un número binario en un entero, simplemente cambia la base:</p> + +<pre class="brush: js notranslate">parseInt('11', 2); // 3 +</pre> + +<p>De manera similar, puedes analizar números de coma flotante utilizando la función incorporada {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}}. A diferencia de su primo {{jsxref("Objetos_Globales/parseInt", "parseInt()")}}, <code>parseFloat()</code> siempre usa base 10.</p> + +<p>También puedes utilizar el operador <code>+</code> unario para convertir valores en números:</p> + +<pre class="brush: js notranslate">+ '42'; // 42 ++ '010'; // 10 ++ '0x10'; // 16 +</pre> + +<p>Se devuelve un valor especial llamado {{jsxref("NaN")}} (abreviatura de "Not a Number" o "No es un número") si la cadena no es numérica:</p> + +<pre class="brush: js notranslate">parseInt('hello', 10); // NaN +</pre> + +<p><code>NaN</code> es tóxico: si lo proporcionas como operando para cualquier operación matemática, el resultado también será <code>NaN</code>:</p> + +<pre class="brush: js notranslate">NaN + 5; // NaN +</pre> + +<p>Puedes probar si un valor es <code>NaN</code> utilizando la función incorporada {{jsxref("Objetos_Globales/isNaN", "isNaN()")}}:</p> + +<pre class="brush: js notranslate">isNaN(NaN); // true +</pre> + +<p>JavaScript también tiene los valores especiales {{jsxref("Infinity")}} e <code>-Infinity</code>:</p> + +<pre class="brush: js notranslate"> 1 / 0; // Infinity +-1 / 0; // -Infinity +</pre> + +<p>Puedes probar los valores <code>Infinity</code>, <code>-Infinity</code> y <code>NaN</code> utilizando la función integrada {{jsxref("Objetos_Globales/isFinite", "isFinite()")}}:</p> + +<pre class="brush: js notranslate">isFinite(1 / 0); // false +isFinite(-Infinity); // false +isFinite(NaN); // false +</pre> + +<div class="note">Las funciones {{jsxref("Objetos_Globales/parseInt", "parseInt()")}} y {{jsxref("Objetos_Globales/parseFloat", "parseFloat()")}} analizan una cadena hasta que alcancen un caracter que no es válido para el formato de número especificado, luego devuelve el número analizado hasta ese punto. Sin embargo, el operador "+" simplemente convierte la cadena a <code>NaN</code> si contiene un caracter no válido. Intenta analizar la cadena "10.2abc" con cada método tú mismo en la consola y comprenderás mejor las diferencias.</div> + +<h2 id="Strings">Strings)</h2> + +<p>Las cadenas en JavaScript son secuencias de <a href="/es/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Unicode">caracteres Unicode</a>. Esta debería ser una buena noticia para cualquiera que haya tenido que lidiar con la internacionalización. Exactamente, son secuencias de unidades de código UTF-16; cada unidad de código está representada por un número de 16 bits. Cada caracter Unicode está representado por 1 o 2 unidades de código.</p> + +<p>Si deseas representar un solo caracter, simplemente usa una cadena que consta de ese único caracter.</p> + +<p>Para encontrar la longitud de una cadena (en unidades de código), accede a su propiedad {{jsxref("Objetos_Globales/String/length", "lenght")}}:</p> + +<pre class="brush: js notranslate">'hello'.length; // 5 +</pre> + +<p>¡Aquí está nuestra primer pincelada con objetos JavaScript! ¿Mencionamos que también puedes usar cadenas como {{jsxref("Object", "objectos", "", 1)}}? También tienen {{jsxref("String", "métodos", "#Métodos", 1)}} que te permiten manipular la cadena y acceder a información sobre la cadena:</p> + +<pre class="brush: js notranslate">'hello'.charAt(0); // "h" +'hello, world'.replace('world', 'mars'); // "hello, mars" +'hello'.toUpperCase(); // "HELLO" +</pre> + +<h2 id="Otros_tipos">Otros tipos</h2> + +<p>JavaScript distingue entre {{jsxref("null")}}, que es un valor que indica un no valor deliberado (y solo se puede acceder a él mediante la palabra clave <code>null</code>), y {{jsxref("undefined")}}, que es un valor de tipo <code>undefined</code> que indica una variable no iniciada es decir, que aún no se le ha asignado un valor. Hablaremos de variables más adelante, pero en JavaScript es posible declarar una variable sin asignarle un valor. Si hace esto, el tipo de la variable es <code>undefined</code>. <code>undefined</code> en realidad es una constante.</p> + +<p>JavaScript tiene un tipo booleano, con valores posibles <code>true</code> y <code>false</code> (ambos son palabras clave). Cualquier valor se puede convertir a booleano de acuerdo con las siguientes reglas:</p> + +<ol> + <li><code>false</code>, <code>0</code>, cadenas vacías (<code>""</code>), <code>NaN</code>, <code>null</code>, y <code>undefined</code> todos se vuelven <code>false.</code></li> + <li>Todos los demás valores se vuelven <code>true.</code></li> +</ol> + +<p>Puedes realizar esta conversión explícitamente utilizando la función <code>Boolean()</code>:</p> + +<pre class="brush: js notranslate">Boolean(''); // false +Boolean(234); // true +</pre> + +<p>Sin embargo, esto rara vez es necesario, ya que JavaScript realizará silenciosamente esta conversión cuando espera un booleano, como en una declaración <code>if</code> (ve más adelante). Por esta razón, a veces hablamos simplemente de "valores verdaderos" y "valores falsos", es decir, valores que se convierten en <code>true</code> y <code>false</code>, respectivamente, cuando se convierten en booleanos. Alternativamente, estos valores se pueden llamar "veracidad" y "falsedad", respectivamente.</p> + +<p>Operaciones booleanas como <code>&&</code> (<em>and</em> lógico), <code>||</code> (<em>or</em> lógico) y <code>!</code> (<em>not</em> lógico) son compatibles; ve más adelante.</p> + +<h2 id="Variables">Variables</h2> + +<p>Las nuevas variables en JavaScript se declaran utilizando una de tres palabras clave: {{jsxref("Sentencias/let", "let")}}, {{jsxref("Sentencias/const", "const")}} o {{jsxref("Sentencias/var", "var")}}.<br> + <br> + <strong><code>let</code></strong> te permite declarar variables a nivel de bloque. La variable declarada está disponible en el <em>bloque</em> en el que está incluida.</p> + +<pre class="brush: js notranslate">let a; +let name = 'Simon'; +</pre> + +<p>El siguiente es un ejemplo de alcance con una variable declarada con <code><strong>let</strong></code>:</p> + +<pre class="brush: js notranslate">// myLetVariable *no* es visible aquí + +for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { + // myLetVariable solo es visible aquí +} + +// myLetVariable *no* es visible aquí + +</pre> + +<p><code><strong>const</strong></code> te permite declarar variables cuyos valores pretendes nunca cambiar. La variable está disponible en el <em>bloque</em> en el que se declara.</p> + +<pre class="brush: js notranslate">const Pi = 3.14; // establece la variable Pi +Pi = 1; // arrojará un error porque no puede cambiar una variable constante.</pre> + +<p><br> + <code><strong>var</strong></code> es la palabra clave declarativa más común. No tiene las restricciones que tienen las otras dos palabras clave. Esto se debe a que tradicionalmente era la única forma de declarar una variable en JavaScript. Una variable declarada con la palabra clave <strong><code>var</code></strong> está disponible en la <em>función</em> en la que se declara.</p> + +<pre class="brush: js notranslate">var a; +var name = 'Simon';</pre> + +<p>Un ejemplo de ámbito con una variable declarada con <strong><code>var</code>:</strong></p> + +<pre class="brush: js notranslate">// myVarVariable *es* visible aquí + +for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) { + // myVarVariable es visible para toda la función +} + +// myVarVariable *es* visible aquí +</pre> + +<p>Si declaras una variable sin asignarle ningún valor, su tipo es <code>undefined</code>.</p> + +<p>Una diferencia importante entre JavaScript y otros lenguajes como Java es que en JavaScript, los bloques no tienen alcance; solo las funciones tienen alcance. Entonces, si una variable se define usando <code>var</code> en una declaración compuesta (por ejemplo, dentro de una estructura de control <code>if</code>), será visible para toda la función. Sin embargo, a partir de ECMAScript 2015, las declaraciones {{jsxref("Sentencias/let", "let")}} y {{jsxref("Sentencias/const", "const")}} te permiten crear variables con alcance de bloque.</p> + +<h2 id="Operadores">Operadores</h2> + +<p>Los operadores numéricos de JavaScript son <code>+</code>, <code>-</code>, <code>*</code>, <code>/</code> y <code>%</code> que es el operador de residuo o resto (<a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_%28%29">que es lo mismo que módulo</a>). Los valores se asignan usando <code>=</code>, y también hay declaraciones de asignación compuestas como <code>+=</code> y <code>-=</code>. Estas se extienden hasta <code>x = x <em>operador</em> y</code>.</p> + +<pre class="brush: js notranslate">x += 5; +x = x + 5; +</pre> + +<p>Puedes usar <code>++</code> y <code>--</code> para incrementar y disminuir respectivamente. Estos se pueden utilizar como operadores prefijos o sufijos.</p> + +<p>El <a href="/es/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="/es/JavaScript/Reference/Operators/String_Operators">operador <code>+</code></a> también hace concatenación de cadenas:</p> + +<pre class="brush: js notranslate">'hello' + ' world'; // "hello world" +</pre> + +<p>Si agregas una cadena a un número (u otro valor), todo se convierte primero en cadena. Esto podría hacerte tropezar:</p> + +<pre class="brush: js notranslate">'3' + 4 + 5; // "345" + 3 + 4 + '5'; // "75" +</pre> + +<p>Agregar una cadena vacía a algo es una forma útil de convertirla en cadena.</p> + +<p><a href="/es/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/es/JavaScript/Reference/Operators/Comparison_Operators">Se pueden realizar comparaciones</a> en JavaScript utilizando <code><</code>, <code>></code>, <code><=</code> y <code>>=</code>. Estas funcionan tanto para cadenas como para números. La igualdad es un poco menos sencilla. El operador doble-igual realiza la coerción de tipos si le das diferentes tipos, con resultados a veces interesantes:</p> + +<pre class="brush: js notranslate">123 == '123'; // true +1 == true; // true +</pre> + +<p>Para evitar la coerción de tipos, usa el operador triple-igual:</p> + +<pre class="brush: js notranslate">123 === '123'; // false +1 === true; // false +</pre> + +<p>También hay operadores <code>!=</code> y <code>!==</code>.</p> + +<p>JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/es/JavaScript/Reference/Operators/Bitwise_Operators">operaciones bit a bit</a>. Si quieres usarlas, ahí están.</p> + +<h2 id="Estructuras_de_control">Estructuras de control</h2> + +<p>JavaScript tiene un conjunto de estructuras de control similar a otros lenguajes de la familia C. Las declaraciones condicionales son compatibles con <code>if</code> y <code>else</code>; las puedes encadenarlas si lo deseas:</p> + +<pre class="brush: js notranslate">var name = 'kittens'; +if (name == 'puppies') { + name += ' woof'; +} else if (name == 'kittens') { + name += ' meow'; +} else { + name += '!'; +} +name == 'kittens meow'; +</pre> + +<p>JavaScript tiene bucles <code>while</code> y bucles <code>do-while</code>. El primero es bueno para bucles básicos; el segundo bucle para donde deseas asegurarte de que el cuerpo del bucle se ejecute por lo menos una vez:</p> + +<pre class="brush: js notranslate">while (true) { + // ¡un bucle infinito! +} + +var input; +do { + input = get_input(); +} while (inputIsNotValid(input)); +</pre> + +<p>El <a href="/es/docs/Web/JavaScript/Reference/Statements/for">bucle <code>for</code></a> de JavaScript es igual que el de C y Java: te permite proporcione la información de control para tu bucle en una sola línea.</p> + +<pre class="brush: js notranslate">for (var i = 0; i < 5; i++) { + // Se ejecutará 5 veces +} +</pre> + +<p>JavaScript también contiene otros dos bucles <code>for</code> destacados: <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a></p> + +<pre class="brush: js notranslate">for (let value of array) { + // haz algo con valor +} +</pre> + +<p>y <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>:</p> + +<pre class="brush: js notranslate">for (let property in object) { + // hacer algo con la propiedad del objeto +} +</pre> + +<p>Los operadores <code>&&</code> y <code>||</code> utilizan lógica de cortocircuito, lo cual significa que si ejecutarán su segundo operando depende del primero. Esto es útil para verificar objetos nulos antes de acceder a sus atributos:</p> + +<pre class="brush: js notranslate">var name = o && o.getName(); +</pre> + +<p>O para almacenar en caché los valores (cuando los valores falsos no son válidos):</p> + +<pre class="brush: js notranslate">var name = cachedName || (cachedName = getName()); +</pre> + +<p>JavaScript tiene un operador ternario para expresiones condicionales:</p> + +<pre class="brush: js notranslate">var allowed = (age > 18) ? 'yes' : 'no'; +</pre> + +<p>La instrucción <code>switch</code> se puede usar para múltiples ramas según un número o cadena:</p> + +<pre class="brush: js notranslate">switch (action) { + case 'draw': + drawIt(); + break; + case 'eat': + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>Si no agregas una instrucción <code>break</code>, la ejecución "caerá" al siguiente nivel. Esto muy rara vez es lo que deseas; de hecho, vale la pena etiquetar específicamente la caída deliberada con un comentario si realmente lo pretendías para ayudar a la depuración:</p> + +<pre class="brush: js notranslate">switch (a) { + case 1: // caída deliberada + case 2: + eatIt(); + break; + default: + doNothing(); +} +</pre> + +<p>La cláusula <code>default</code> es opcional. Puedes tener expresiones tanto en la parte del switch como en los casos si lo deseas; las comparaciones tienen lugar entre los dos utilizando el operador <code>===</code>:</p> + +<pre class="brush: js notranslate">switch (1 + 3) { + case 2 + 2: + yay(); + break; + default: + neverhappens(); +} +</pre> + +<h2 id="Objetos">Objetos</h2> + +<p>Los objetos de JavaScript se pueden considerar como simples colecciones de pares nombre-valor. Como tal, son similares a:</p> + +<ul> + <li>Diccionarios en Python.</li> + <li>Hashes en Perl y Ruby.</li> + <li>Tablas hash en C y C++.</li> + <li>HashMaps en Java.</li> + <li>Arreglos asociativas en PHP.</li> +</ul> + +<p>El hecho de que esta estructura de datos se utilice tan ampliamente es un testimonio de su versatilidad. Dado que todo (el núcleo, tipos bar) en JavaScript es un objeto, cualquier programa de JavaScript implica naturalmente una gran cantidad de búsquedas en tablas hash. ¡Qué bueno que sean tan rápidas!</p> + +<p>La parte "name" es una cadena JavaScript, mientras que el valor puede ser cualquier valor de JavaScript, incluidos más objetos. Esto te permite construir estructuras de datos de complejidad arbitraria.</p> + +<p>Hay dos formas básicas de crear un objeto vacío:</p> + +<pre class="brush: js notranslate">var obj = new Object(); +</pre> + +<p>Y:</p> + +<pre class="brush: js notranslate">var obj = {}; +</pre> + +<p>Estas son semánticamente equivalentes; la segunda se llama sintaxis literal de objeto y es más conveniente. Esta sintaxis también es el núcleo del formato JSON y se debe preferir en todo momento.</p> + +<p>La sintaxis de objeto literal se puede utilizar para iniciar un objeto en su totalidad:</p> + +<pre class="brush: js notranslate">var obj = { + name: 'Carrot', + for: 'Max', // 'for' es una palabra reservada, use '_for' en su lugar. + details: { + color: 'orange', + size: 12 + } +}; +</pre> + +<p>El acceso a los atributos se puede encadenar:</p> + +<pre class="brush: js notranslate">obj.details.color; // orange +obj['details']['size']; // 12 +</pre> + +<p>El siguiente ejemplo crea un prototipo de objeto (<code>Person</code>) y una instancia de ese prototipo (<code>you</code>).</p> + +<pre class="brush: js notranslate">function Person(name, age) { + this.name = name; + this.age = age; +} + +// Define un objeto +var you = new Person('You', 24); +// Estamos creando una nueva persona llamada "You" de 24 años. + +</pre> + +<p><strong>Una vez creado</strong>, se puede volver a acceder a las propiedades de un objeto de dos formas:</p> + +<pre class="brush: js notranslate">// notación de puntos +obj.name = 'Simon'; +var name = obj.name; +</pre> + +<p>Y...</p> + +<pre class="brush: js notranslate">// notación de corchetes +obj['name'] = 'Simon'; +var name = obj['name']; +// puedes usar una variable para definir una clave +var user = prompt('¿cuál es su clave?') +obj[user] = prompt('¿cuál es su valor?') +</pre> + +<p>Estas también son semánticamente equivalentes. El segundo método tiene la ventaja de que el nombre de la propiedad se proporciona como una cadena, lo cual significa que se puede calcular en tiempo de ejecución. Sin embargo, el uso de este método evita que se apliquen algunas optimizaciones de minificación y del motor de JavaScript. También se puede utilizar para establecer y obtener propiedades con nombres <a href="/es/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords" title="/es/JavaScript/Reference/Reserved_Words">palabras reservadas</a>:</p> + +<pre class="brush: js notranslate">obj.for = 'Simon'; // Error de sintaxis, porque 'for' es una palabra reservada +obj['for'] = 'Simon'; // trabaja bien +</pre> + +<div class="note"> +<p>A partir de ECMAScript 5, las palabras reservadas se pueden utilizar como nombres de propiedad de objeto "en bruto". Esto significa que no necesitan "vestirse" entre comillas al definir objeto literales. Consulta la <a href="http://es5.github.io/#x7.6.1"> especificación</a> de ES5.</p> +</div> + +<p>Para obtener más información sobre objetos y prototipos, consulta {{jsxref("Objetos_Globales/Object/prototype", "Object.prototype")}}. Para obtener una explicación de los prototipos de objetos y las cadenas de prototipos de objetos, consulta <a href="/es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Herencia y la cadena de prototipos</a>.</p> + +<div class="note"> +<p>A partir de ECMAScript 2015, las claves de objeto se pueden definir mediante la variable en notación de corchetes al crearlas. <code>{[phoneType]: 12345}</code> es posible en lugar de solo <code>var userPhone = {}; userPhone[phoneType] = 12345</code>.</p> +</div> + +<h2 id="Arreglos">Arreglos</h2> + +<p>Los arreglos en JavaScript en son realidad un tipo especial de objeto. Funcionan de manera muy parecida a los objetos normales (las propiedades numéricas se pueden acceder naturalmente solo usando la sintaxis <code>[]</code>) pero tienen una propiedad mágica llamada '<code>length</code>'. Este siempre es uno más que el índice más alto de el arreglo.</p> + +<p>Una forma de crear arreglos es la siguiente:</p> + +<pre class="brush: js notranslate">var a = new Array(); +a[0] = 'dog'; +a[1] = 'cat'; +a[2] = 'hen'; +a.length; // 3 +</pre> + +<p>Una notación más conveniente es usar un arreglo literal:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a.length; // 3 +</pre> + +<p>Ten en cuenta que <code>array.length</code> no necesariamente es el número de elementos del arreglo. Considera lo siguiente:</p> + +<pre class="brush: js notranslate">var a = ['dog', 'cat', 'hen']; +a[100] = 'fox'; +a.length; // 101 +</pre> + +<p>Recuerda — la longitud de el arreglo es uno más que el índice más alto.</p> + +<p>Si consultas un índice de arreglo que no existe, obtendrás un valor de <code>undefined</code>:</p> + +<pre class="brush: js notranslate">typeof a[90]; // undefined +</pre> + +<p>Si tienes en cuenta lo anterior sobre <code>[]</code> y <code>length</code>, puedes iterar sobre un arreglo utilizando el siguiente bucle <code>for</code>:</p> + +<pre class="brush: js notranslate">for (var i = 0; i < a.length; i++) { + // Haz algo con a[i] +} +</pre> + +<p>ES2015 introdujo el bucle más conciso <a href="/es/docs/Web/JavaScript/Reference/Statements/for...of"><code>for</code>...<code>of</code></a> para objetos iterables como arreglos:</p> + +<pre class="brush:js notranslate">for (const currentValue of a) { + // Haz algo con currentValue +}</pre> + +<p>También puedes iterar sobre un arreglo utilizando el bucle <a href="/es/docs/Web/JavaScript/Reference/Statements/for...in" title="/es/JavaScript/Reference/Statements/for...in"><code>for</code>...<code>in</code></a>, sin embargo, este no itera sobre los elementos del arreglo, sino los índices del arreglo. Además, si alguien agrega nuevas propiedades a <code>Array.prototype</code>, también serán iteradas por dicho bucle. Por lo tanto, este tipo de bucle no se recomienda para arreglos.</p> + +<p>Otra forma de iterar sobre un arreglo que se agregó con ECMAScript 5 es {{jsxref("Objetos_Globales/Array/forEach", "arr.forEach()")}}:</p> + +<pre class="brush: js notranslate">['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) { + // Hacer algo con currentValue o array[index] +}); +</pre> + +<p>Si deseas agregar un elemento a un arreglo, simplemente hazlo así:</p> + +<pre class="brush: js notranslate">a.push(item);</pre> + +<p>Los arreglos vienen con varios métodos. Consulta también la {{jsxref("Objetos_Globales/Array", "documentación completa para métodos de arreglo")}}.</p> + +<table> + <thead> + <tr> + <th scope="col">Nombre del método</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>a.toString()</code></td> + <td>Devuelve una cadena con el <code>toString()</code> de cada elemento separado por comas.</td> + </tr> + <tr> + <td><code>a.toLocaleString()</code></td> + <td>Devuelve una cadena con el <code>toLocaleString()</code> de cada elemento separado por comas.</td> + </tr> + <tr> + <td><code>a.concat(item1[, item2[, ...[, itemN]]])</code></td> + <td>Devuelve un nuevo arreglo con los elementos agregados.</td> + </tr> + <tr> + <td><code>a.join(sep)</code></td> + <td>Convierte el arreglo en una cadena, con valores delimitados por el parámetro <code>sep</code></td> + </tr> + <tr> + <td><code>a.pop()</code></td> + <td>Elimina y devuelve el último elemento.</td> + </tr> + <tr> + <td><code>a.push(item1, ..., itemN)</code></td> + <td>Agrega elementos al final del arreglo.</td> + </tr> + <tr> + <td><code>a.shift()</code></td> + <td>Elimina y devuelve el primer elemento.</td> + </tr> + <tr> + <td><code>a.unshift(item1[, item2[, ...[, itemN]]])</code></td> + <td>Añade elementos al inicio del arreglo.</td> + </tr> + <tr> + <td><code>a.slice(start[, end])</code></td> + <td>Devuelve un subarreglo.</td> + </tr> + <tr> + <td><code>a.sort([cmpfn])</code></td> + <td>Toma una función de comparación opcional.</td> + </tr> + <tr> + <td><code>a.splice(start, delcount[, item1[, ...[, itemN]]])</code></td> + <td>Te permite modificar un arreglo eliminando una sección y reemplazándola con más elementos.</td> + </tr> + <tr> + <td><code>a.reverse()</code></td> + <td>Invierte el arreglo.</td> + </tr> + </tbody> +</table> + +<h2 id="Funciones">Funciones</h2> + +<p>Junto con los objetos, las funciones son el componente principal para comprender JavaScript. La función más básica no podría ser mucho más sencilla:</p> + +<pre class="brush: js notranslate">function add(x, y) { + var total = x + y; + return total; +} +</pre> + +<p>Esto demuestra una función básica. Una función de JavaScript puede tomar 0 o más parámetros con nombre. El cuerpo de la función puede contener tantas declaraciones como desees y puedes declarar tus propias variables que son locales para esa función. La declaración <code>return</code> se puede usar para devolver un valor en cualquier momento, terminando la función. Si no se utiliza una declaración <code>return</code> (o <code>return</code> vacía sin valor), JavaScript devuelve <code>undefined</code>.</p> + +<p>Los parámetros nombrados resultan ser más intuitivos que cualquier otra cosa. Puedes llamar a una función sin pasar los parámetros que espera, en cuyo caso se establecerán en <code>undefined</code>.</p> + +<pre class="brush: js notranslate">add(); // NaN +// No puedes realizar sumas en undefined +</pre> + +<p>También puedes pasar más argumentos de los que espera la función:</p> + +<pre class="brush: js notranslate">add(2, 3, 4); // 5 +// sumó los dos primeros; el 4 fue ignorado +</pre> + +<p>Eso puede parecer un poco tonto, pero las funciones tienen acceso a una variable adicional dentro de su cuerpo llamada <a href="/es/docs/Web/JavaScript/Reference/Functions/argument" title="/es/JavaScript/Reference/Functions_and_function_scope/arguments"><code>argumentos</code></a>, que es un objeto tipo arreglo que contiene todos los valores pasados a la función. Reescribamos la función de suma para tomar tantos valores como queramos:</p> + +<pre class="brush: js notranslate">function add() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum; +} + +add(2, 3, 4, 5); // 14 +</pre> + +<p>Sin embargo, eso no es más útil que escribir <code>2 + 3 + 4 + 5</code>. Creemos una función de promedio:</p> + +<pre class="brush: js notranslate">function avg() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<p>Esta es bastante útil, pero parece un poco detallada. Para reducir un poco más este código, podemos considerar la sustitución del uso del arreglo de argumentos a través de la <a href="/es/docs/Web/JavaScript/Reference/Functions/rest_parameters">sintaxis del parámetro <code>Rest</code></a>. De esta manera, podemos pasar cualquier número de argumentos a la función manteniendo nuestro código mínimo. El <strong>operador de parámetro <code>rest</code></strong> se usa en listas de parámetros de función con el formato: <strong>...variable</strong> e incluirá dentro de esa variable la lista completa de argumentos no capturados a los que se llamó la función. <code>with</code>. También reemplazaremos el bucle <strong>for</strong> con un bucle <strong>for...of</strong> para devolver los valores dentro de nuestra variable.</p> + +<pre class="brush: js notranslate">function avg(...args) { + var sum = 0; + for (let value of args) { + sum += value; + } + return sum / args.length; +} + +avg(2, 3, 4, 5); // 3.5 +</pre> + +<div class="note">En el código anterior, la variable <strong>args</strong> contiene todos los valores que se pasaron a la función.<br> +<br> +Es importante tener en cuenta que dondequiera que se coloque el operador de parámetro <code>rest</code> en una declaración de función, almacenará todos los argumentos <em>después</em> de su declaración, pero no antes. <em>es decir, function</em> <em>avg(</em><strong>firstValue, </strong><em>...args)</em> almacenará el primer valor pasado a la función en la variable <strong>firstValue</strong> y los argumentos restantes en <strong>args</strong>. Esa es otra característica útil del lenguaje, pero nos lleva a un nuevo problema. La función <code>avg() </code> toma una lista de argumentos separados por comas, pero ¿qué sucede si deseas encontrar el promedio de un arreglo? Simplemente, podrías reescribir la función de la siguiente manera:</div> + +<pre class="brush: js notranslate">function avgArray(arr) { + var sum = 0; + for (var i = 0, j = arr.length; i < j; i++) { + sum += arr[i]; + } + return sum / arr.length; +} + +avgArray([2, 3, 4, 5]); // 3.5 +</pre> + +<p>Pero sería bueno poder reutilizar la función que ya hemos creado. Afortunadamente, JavaScript te permite llamar a una función con un arreglo arbitrario de argumentos, usando el método {{jsxref("Function.apply", "apply()")}} de cualquier objeto función.</p> + +<pre class="brush: js notranslate">avg.apply(null, [2, 3, 4, 5]); // 3.5 +</pre> + +<p>El segundo argumento de <code>apply()</code> es el arreglo que se utilizará como <code>arguments</code>; el primero se explicará más adelante. Esto enfatiza el hecho de que las funciones también son objetos.</p> + +<div class="note"> +<p>Puedes lograr el mismo resultado utilizando el <a href="/es/docs/Web/JavaScript/Reference/Operators/Spread_operator">operador de propagación</a> en la llamada de función.</p> + +<p>Por ejemplo: <code>avg(...numbers) </code></p> +</div> + +<p>JavaScript te permite crear funciones anónimas.</p> + +<pre class="brush: js notranslate">var avg = function() { + var sum = 0; + for (var i = 0, j = arguments.length; i < j; i++) { + sum += arguments[i]; + } + return sum / arguments.length; +}; +</pre> + +<p>Esto semánticamente es equivalente a la forma <code>function avg()</code>. Es extremadamente poderosa, ya que te permite colocar una definición de función completa en cualquier lugar donde normalmente colocarías una expresión. Esto permite todo tipo de ingeniosos trucos. Aquí hay una forma de "ocultar" algunas variables locales — como alcance de bloque en C:</p> + +<pre class="brush: js notranslate">var a = 1; +var b = 2; + +(function() { + var b = 3; + a += b; +})(); + +a; // 4 +b; // 2 +</pre> + +<p>JavaScript te permite llamar a funciones de forma recursiva. Esto es particularmente útil para tratar con estructuras de árbol, como las que se encuentran en el DOM del navegador.</p> + +<pre class="brush: js notranslate">function countChars(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += countChars(child); + } + return count; +} +</pre> + +<p>Esto resalta un problema potencial con las funciones anónimas: ¿cómo las llama de forma recursiva si no tienen un nombre? JavaScript te permite nombrar expresiones de función para esto. Puedes utilizar {{Glossary("IIFE", "IIFE (expresiones de función invocadas inmediatamente)")}} con nombre como se muestra a continuación:</p> + +<pre class="brush: js notranslate">var charsInBody = (function counter(elm) { + if (elm.nodeType == 3) { // TEXT_NODE + return elm.nodeValue.length; + } + var count = 0; + for (var i = 0, child; child = elm.childNodes[i]; i++) { + count += counter(child); + } + return count; +})(document.body); +</pre> + +<p>El nombre proporcionado a una expresión de función como arriba solo está disponible para el alcance de la función. Esto permite que el motor realice más optimizaciones y da como resultado un código más legible. El nombre también aparece en el depurador y en algunos seguimientos de la pila, lo cual puede ahorrarte tiempo al depurar.</p> + +<p>Ten en cuenta que las funciones de JavaScript en sí mismas son objetos, como todo lo demás en JavaScript, y puedes agregar o cambiar propiedades en ellas tal como hemos visto anteriormente en la sección Objetos.</p> + +<h2 id="Objetos_personalizados">Objetos personalizados</h2> + +<div class="note">Para obtener una descripción más detallada de la programación orientada a objetos en JavaScript, consulta <a href="/es/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Introducción a JavaScript orientado a objetos</a>.</div> + +<p>En la programación clásica orientada a objetos, los objetos son colecciones de datos y métodos que operan sobre esos datos. JavaScript es un lenguaje basado en prototipos que no contiene una declaración de clase, como la encontrarías en C++ o Java (esto, a veces es confuso para los programadores acostumbrados a lenguajes con una declaración de clase). En cambio, JavaScript usa funciones como clases. Consideremos un objeto <code>person</code> con campos <code>first</code> y <code>last name</code>. Hay dos formas de mostrar el nombre: como "primero último" o como "último, primero". Usando las funciones y objetos que hemos explicado anteriormente, podríamos mostrar los datos de esta manera:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last + }; +} +function personFullName(person) { + return person.first + ' ' + person.last; +} +function personFullNameReversed(person) { + return person.last + ', ' + person.first; +} + +var s = makePerson('Simon', 'Willison'); +personFullName(s); // "Simon Willison" +personFullNameReversed(s); // "Willison, Simon" +</pre> + +<p>Esto funciona, pero es bastante feo. Terminas con docenas de funciones en tu espacio de nombres global. Lo que realmente necesitamos es una forma de enlazar una función a un objeto. Dado que las funciones son objetos, esto es fácil:</p> + +<pre class="brush: js notranslate">function makePerson(first, last) { + return { + first: first, + last: last, + fullName: function() { + return this.first + ' ' + this.last; + }, + fullNameReversed: function() { + return this.last + ', ' + this.first; + } + }; +} + +var s = makePerson('Simon', 'Willison'); +s.fullName(); // "Simon Willison" +s.fullNameReversed(); // "Willison, Simon" +</pre> + +<p>Nota sobre la palabra clave <code><a href="/es/docs/Web/JavaScript/Reference/Operators/this" title="/es/JavaScript/Reference/Operators/this">this</a></code>. Usada dentro de una función, <code>this</code> se refiere al objeto actual. Lo que realmente significa está especificado por la forma en que llamaste a esa función. Si lo llamaste usando <a href="/es/docs/Web/JavaScript/Reference/Operators/Object_initializer#Accessing_properties" title="/es/JavaScript/Reference/Operators/Member_Operators">notación de puntos o notación de corchetes</a> en un objeto, ese objeto se convierte en <code>this</code>. Si la notación de puntos no se usó para la llamada, <code>this</code> se refiere al objeto global.</p> + +<p>Ten en cuenta que <code>this</code> es una frecuente causa de errores. Por ejemplo:</p> + +<pre class="brush: js notranslate">var s = makePerson('Simon', 'Willison'); +var fullName = s.fullName; +fullName(); // undefined undefined +</pre> + +<p>Cuando llamamos a <code>fullName()</code> solo, sin usar <code>s.fullName()</code>, <code>this</code> está vinculado al objeto global. Debido a que no hay variables globales llamadas <code>first</code> o <code>last</code> obtenemos <code>undefined</code> para cada una.</p> + +<p>Podemos aprovechar la palabra clave <code>this</code> para mejorar nuestra función <code>makePerson</code>:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = function() { + return this.first + ' ' + this.last; + }; + this.fullNameReversed = function() { + return this.last + ', ' + this.first; + }; +} +var s = new Person('Simon', 'Willison'); +</pre> + +<p>Hemos introducido otra palabra clave: <code><a href="/es/docs/Web/JavaScript/Reference/Operators/new" title="/es/JavaScript/Reference/Operators/new">new</a></code>. <code>new</code> está fuertemente relacionado con <code>this</code>. Crea un nuevo objeto vacío y luego llama a la función especificada, con <code>this</code> configurado para ese nuevo objeto. Sin embargo, ten en cuenta que la función especificada con <code>this</code> no devuelve un valor, sino que simplemente modifica el objeto <code>this</code>. Es <code>new</code> que devuelve el objeto <code>this</code> al sitio que realiza la llamada. Las funciones que están diseñadas para ser llamadas por <code>new</code> se denominan funciones constructoras. La práctica común es poner en mayúscula estas funciones como recordatorio para llamarlas con <code>new</code>.</p> + +<p>La función mejorada todavía tiene el mismo error al llamar a <code>fullName()</code> sola.</p> + +<p>Nuestros objetos <code>person</code> están mejorando, pero todavía tienen algunos bordes desagradables. Cada vez que creamos un objeto <code>person</code>, estamos creando dos nuevos objetos de función dentro de él, ¿no sería mejor si este código fuera compartido?</p> + +<pre class="brush: js notranslate">function personFullName() { + return this.first + ' ' + this.last; +} +function personFullNameReversed() { + return this.last + ', ' + this.first; +} +function Person(first, last) { + this.first = first; + this.last = last; + this.fullName = personFullName; + this.fullNameReversed = personFullNameReversed; +} +</pre> + +<p>Eso es mejor: estamos creando las funciones como métodos solo una vez y asignándoles referencias dentro del constructor. ¿Podemos hacer algo mejor que eso? La respuesta es sí:</p> + +<pre class="brush: js notranslate">function Person(first, last) { + this.first = first; + this.last = last; +} +Person.prototype.fullName = function() { + return this.first + ' ' + this.last; +}; +Person.prototype.fullNameReversed = function() { + return this.last + ', ' + this.first; +}; +</pre> + +<p><code>Person.prototype</code> es un objeto compartido por todas las instancias de <code>Person</code>. Forma parte de una cadena de búsqueda (que tiene un nombre especial, "cadena de prototipos"): cada vez que intentes acceder a una propiedad de <code>Person</code> que no esté configurada, JavaScript revisará <code>Person.prototype</code> para ver si esa propiedad existe allí. Como resultado, todo lo asignado a <code>Person.prototype</code> pasa a estar disponible para todas las instancias de ese constructor a través del objeto <code>this</code>.</p> + +<p>Esta es una herramienta increíblemente poderosa. JavaScript te permite modificar el prototipo de algo en cualquier momento en tu programa, lo cual significa que —en tiempo de ejecución— puedes agregar métodos adicionales a los objetos existentes:</p> + +<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); +s.firstNameCaps(); // TypeError en la línea 1: s.firstNameCaps no es una función + +Person.prototype.firstNameCaps = function() { + return this.first.toUpperCase(); +}; +s.firstNameCaps(); // "SIMON" +</pre> + +<p>Curiosamente, también puedes agregar cosas al prototipo de objetos JavaScript integrados. Agreguemos un método a <code>String</code> que devuelva esa cadena a la inversa:</p> + +<pre class="brush: js notranslate">var s = 'Simon'; +s.reversed(); // TypeError en la línea 1: s.reversed no es una función + +String.prototype.reversed = function() { + var r = ''; + for (var i = this.length - 1; i >= 0; i--) { + r += this[i]; + } + return r; +}; + +s.reversed(); // nomiS +</pre> + +<p>¡Nuestro método <code>new<code> funciona incluso con cadenas literales!</code></code></p><code><code> + +<pre class="brush: js notranslate">'Esto ahora se puede revertir'.reversed(); // ritrever edeup es aroha otsE +</pre> + +<p>Como se mencionó anteriormente, el prototipo forma parte de una cadena. La raíz de esa cadena es <code>Object.prototype</code>, cuyos métodos incluyen <code>toString()</code>; es este método el que se llama cuando intentas representar un objeto como una cadena. Esto es útil para depurar nuestros objetos <code>Person</code>:</p> + +<pre class="brush: js notranslate">var s = new Person('Simon', 'Willison'); +s.toString(); // [object Object] + +Person.prototype.toString = function() { + return '<Person: ' + this.fullName() + '>'; +} + +s.toString(); // "<Person: Simon Willison>" +</pre> + +<p>¿Recuerda cómo <code>avg.apply()</code> tenía un primer argumento <code>null</code>? Ahora lo podemos revisar. El primer argumento de <code>apply()</code> es el objeto que se debe tratar como '<code>this</code>'. Por ejemplo, aquí hay una implementación trivial de <code>new</code>:</p> + +<pre class="brush: js notranslate">function trivialNew(constructor, ...args) { + var o = {}; // Crea un objeto + constructor.apply(o, args); + return o; +} +</pre> + +<p>Esta no es una réplica exacta de <code>new</code> ya que no configura la cadena de prototipos (sería difícil de ilustrar). Esto no es algo que use con mucha frecuencia, pero es útil conocerlo. En este fragmento, <code>...args</code> (incluidos los puntos suspensivos) se denomina "<a href="/es/docs/Web/JavaScript/Reference/Functions/rest_parameters">argumentos rest</a>" — como su nombre indica, contiene el resto de los argumentos.</p> + +<p>Llamar a...</p> + +<pre class="brush: js notranslate">var bill = trivialNew(Person, 'William', 'Orange');</pre> + +<p>...por tanto, casi es equivalente a</p> + +<pre class="brush: js notranslate">var bill = new Person('William', 'Orange');</pre> + +<p><code>apply()</code> tiene una función hermana llamada {{jsxref("Objetos_Globales/Function/call", "call()")}}, que nuevamente te permite establecer <code>this</code> pero toma una lista de argumentos expandida en lugar de un arreglo.</p> + +<pre class="brush: js notranslate">function lastNameCaps() { + return this.last.toUpperCase(); +} +var s = new Person('Simon', 'Willison'); +lastNameCaps.call(s); +// Es lo mismo que: +s.lastNameCaps = lastNameCaps; +s.lastNameCaps(); // WILLISON +</pre> + +<h3 id="Funciones_internas">Funciones internas</h3> + +<p>Las declaraciones de función de JavaScript están permitidas dentro de otras funciones. Hemos visto esto una vez antes, con la función <code>makePerson()</code> anterior. Un detalle importante de las funciones anidadas en JavaScript es que pueden acceder a las variables en el alcance de su función padre:</p> + +<pre class="brush: js notranslate">function parentFunc() { + var a = 1; + + function nestedFunc() { + var b = 4; // parentFunc no puede usar esto + return a + b; + } + return nestedFunc(); // 5 +} +</pre> + +<p>Esto proporciona una gran utilidad para escribir un código más fácil de mantener. Si una función llamada se basa en una o dos funciones que no son útiles para ninguna otra parte de tu código, puedes anidar esas funciones de utilidad dentro de ella. Esto mantiene baja la cantidad de funciones que están en el alcance global, lo cual siempre es bueno.</p> + +<p>Esto también contrarresta el atractivo de las variables globales. Al escribir código complejo, a menudo es tentador utilizar variables globales para compartir valores entre múltiples funciones, lo que conduce a un código difícil de mantener. Las funciones anidadas pueden compartir variables en su padre, por lo que puedes usar ese mecanismo para unir funciones cuando tenga sentido sin contaminar tu espacio de nombres global — "globales locales" si lo deseas. Esta técnica se debe usar con precaución, pero es una útil habilidad.</p> + +<h2 id="Cierres">Cierres</h2> + +<p>Esto nos lleva a una de las abstracciones más poderosas que JavaScript tiene para ofrecer — pero potencialmente, también la más confusa. ¿Qué hace esta?</p> + +<pre class="brush: js notranslate">function makeAdder(a) { + return function(b) { + return a + b; + }; +} +var add5 = makeAdder(5); +var add20 = makeAdder(20); +add5(6); // ? +add20(7); // ? +</pre> + +<p>El nombre de la función <code>makeAdder()</code> lo debería revelar: crea nuevas funciones '<code>adder</code>', cada una de las cuales, cuando se llama con un argumento, lo suma al argumento con el que fue creada.</p> + +<p>Lo que está sucediendo aquí es más o menos lo mismo que sucedía anteriormente con las funciones internas: una función definida dentro de otra función tiene acceso a las variables de la función externa. La única diferencia aquí es que la función externa ha regresado y, por lo tanto, el sentido común parece dictar que sus variables locales ya no existen. Pero <em>sí</em> existen todavía — de lo contrario, las funciones de suma no podrían funcionar. Además, hay dos diferentes "copias" de las variables locales de <code>makeAdder()</code>: una en la que <code>a</code> es 5 y la otra en la que <code>a</code> es 20. Entonces, el resultado de las llamadas a esa función es el siguiente:</p> + +<pre class="brush: js notranslate">add5(6); // returns 11 +add20(7); // devuelve 27 +</pre> + +<p>Esto es lo que está sucediendo realmente. Siempre que JavaScript ejecuta una función, se crea un objeto '<code>scope</code>' para contener las variables locales creadas dentro de esa función. Se inicia con cualquier variable pasada como parámetros de función. Esto es similar al objeto global en el que viven todas las variables y funciones globales, pero con un par de importantes diferencias: en primer lugar, se crea un objeto de alcance completamente nuevo cada vez que una función se comienza a ejecutar y, en segundo lugar, a diferencia del objeto global (que es accesible como <code>this</code> y en los navegadores como <code>window</code>) no se puede acceder directamente a estos objetos <code>scope</code> desde tu código JavaScript. No hay ningún mecanismo para iterar sobre las propiedades del objeto <code>scope</code> actual, por ejemplo.</p> + +<p>Entonces, cuando se llama a <code>makeAdder()</code>, se crea un objeto <code>scope</code> con una propiedad: <code>a</code>, que es el argumento que se pasa a la función <code>makeAdder()</code>. <code>makeAdder()</code> luego devuelve una función recién creada. Normalmente, el recolector de basura de JavaScript limpiaría el objeto <code>scope</code> creado para <code>makeAdder()</code> en este punto, pero la función devuelta mantiene una referencia a ese objeto de ámbito. Como resultado, el objeto <code>scope</code> no será recolectado como basura hasta que no haya más referencias al objeto función que <code>makeAdder()</code> devolvió.</p> + +<p>Los objetos <code>scope</code> forman una cadena llamada cadena de ámbito, similar a la cadena de prototipos utilizada por el sistema de objetos de JavaScript.</p> + +<p>Un <strong>cierre</strong> es la combinación de una función y el objeto <code>scope</code> en el que se creó. Los cierres te permiten guardar el estado — como tal, a menudo se pueden usar en lugar de objetos. Puedes encontrar <a href="http://stackoverflow.com/questions/111102/how-do-javascript-closures-work">varias presentaciones excelentes de los cierres</a>.</p></code></code> diff --git a/files/es/web/javascript/vectores_tipados/index.html b/files/es/web/javascript/vectores_tipados/index.html new file mode 100644 index 0000000000..ba82a49ebd --- /dev/null +++ b/files/es/web/javascript/vectores_tipados/index.html @@ -0,0 +1,272 @@ +--- +title: Arreglos tipados de JavaScript +slug: Web/JavaScript/Vectores_tipados +tags: + - Arreglo tipado + - Guía + - JavaScript +translation_of: Web/JavaScript/Typed_arrays +--- +<div>{{JsSidebar("Advanced")}}</div> + +<p><span class="seoSummary"><strong>Los arreglos tipados en JavaScript</strong> son objetos similares a arreglos que proporcionan un mecanismo para leer y escribir datos binarios sin procesar en búferes de memoria.</span> Como ya sabrás, los objetos {{jsxref("Array", "Arreglo")}} crecen y se encogen dinámicamente y pueden tener cualquier valor de JavaScript. Los motores de JavaScript realizan optimizaciones para que estos arreglos sean rápidos.</p> + +<p>Sin embargo, a medida que las aplicaciones web se vuelven cada vez más poderosas, agregando características como manipulación de audio y video, acceso a datos sin procesar usando <code>WebSockets</code>, etc., ha quedado claro que hay momentos en los que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar. Aquí es donde entran en juego los arreglos tipados. Cada entrada en un arreglo tipado de JavaScript es un valor binario sin procesar en uno de los formatos admitidos, desde números enteros de 8 bits hasta números de punto flotante de 64 bits.</p> + +<p>Sin embargo, los arreglos tipados <em>no</em> se deben confundir con los arreglos normales, ya que llamar a {{JSxRef("Array.isArray()")}} en un arreglo tipado devuelve <code>false</code>. Además, no todos los métodos disponibles para arreglos normales son compatibles con arreglos tipados (por ejemplo, <code>push</code> y <code>pop</code>).</p> + +<h2 id="Búferes_y_vistas_arquitectura_de_los_arreglos_tipados">Búferes y vistas: arquitectura de los arreglos tipados</h2> + +<p>Para lograr la máxima flexibilidad y eficiencia, los arreglos de JavaScript dividen la implementación en <em>búferes</em> y <em>vistas</em>. Un búfer (implementado por el objeto {{jsxref("ArrayBuffer")}} es un objeto que representa una porción de datos; no tiene ningún formato del que hablar y no ofrece ningún mecanismo para acceder a su contenido. Para acceder a la memoria contenida en un búfer, necesitas usar una vista. Una vista proporciona un contexto — es decir, un tipo de dato, un desplazamiento inicial y el número de elementos — que convierte los datos en un arreglo tipado.</p> + +<p><img alt="Arreglos tipados en ArrayBuffer" src="https://mdn.mozillademos.org/files/8629/typed_arrays.png" style="height: 278px; width: 666px;"></p> + +<h3 id="ArrayBuffer"><code>ArrayBuffer</code></h3> + +<p>{{jsxref("ArrayBuffer")}} es un tipo de dato que se utiliza para representar un búfer de datos binarios genérico de longitud fija. No puedes manipular directamente el contenido de un <code>ArrayBuffer</code>; en su lugar, crea una vista de arreglo tipado o un {{JSxRef("DataView")}} que representa el búfer en un formato específico, y lo usa para leer y escribir el contenido del búfer.</p> + +<h3 id="Vistas_de_arreglos_tipados">Vistas de arreglos tipados</h3> + +<p>Las vistas de arreglos tipados tienen nombres autodescriptivos y proporcionan vistas para todos los tipos numéricos habituales tal como <code>Int8</code>, <code>Uint32</code>, <code>Float64</code> y así sucesivamente. Hay una vista de arreglo tipado especial, la <code>Uint8ClampedArray</code>. Esta fija los valores entre 0 y 255. {{JSxRef("../Data_structures", "Tipos de datos JavaScript")}}</p> + +<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>1.2</code><span>×</span><code>10<sup>-38</sup></code> a <code>3.4</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> + +<h3 id="DataView"><code>DataView</code></h3> + +<p>{{jsxref("DataView")}} es una interfaz de bajo nivel que proporciona una API captadora (<code>getter</code>)/(<code>setter</code>) establecedora para leer y escribir datos arbitrarios en el búfer. Esto es útil cuando se trata de diferentes tipos de datos, por ejemplo. Las vistas de arreglos tipados están en el orden de bytes nativo (consulta {{Glossary("Endianness")}} de tu plataforma. Con un <code>DataView</code> puedes controlar el orden de bytes. Es <code>big-endian</code> de manera predeterminada y se puede establecer en <code>little-endian</code> en los métodos captadores/establecedores.</p> + +<h2 id="APIs_web_que_utilizan_arreglos_tipados">APIs web que utilizan arreglos tipados</h2> + +<p>Estos son algunos ejemplos de APIs que utilizan arreglos tipados; hay otras, y todo el tiempo surgen más.</p> + +<dl> + <dt>{{Link("/en-US/docs/Web/API/FileReader", "FileReader.prototype.readAsArrayBuffer()", "#readAsArrayBuffer()")}}</dt> + <dd>El método <code>FileReader.prototype.readAsArrayBuffer()</code> comienza a leer el contenido del {{Link("/es/docs/Web/API/Blob", "Blob")}} o {{Link("/es/docs/Web/API/File", "File")}}.</dd> + <dt><a href="/en-US/docs/Web/API/XMLHttpRequest#send()" title="/en-US/docs/Web/API/XMLHttpRequest#send()"><code>XMLHttpRequest.prototype.send()</code></a></dt> + <dd>El método <code>send()</code> de instancias de <code>XMLHttpRequest</code> ahora admiten arreglos tipados y objetos {{JSxRef("ArrayBuffer")}} como argumento.</dd> + <dt>{{Link("/en-US/docs/Web/API/ImageData", "ImageData.data")}}</dt> + <dd>Es un {{JSxRef("Uint8ClampedArray")}} que representa un arreglo unidimensional que contiene los datos en el orden RGBA, con valores enteros entre <code>0</code> y <code>255</code> inclusive.</dd> +</dl> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Usar_vistas_con_búferes">Usar vistas con búferes</h3> + +<p>En primer lugar, necesitaremos crear un búfer, aquí con una longitud fija de 16 bytes:</p> + +<pre class="brush:js notranslate">let buffer = new ArrayBuffer(16); +</pre> + +<p>En este punto, tenemos una porción de memoria cuyos bytes están todos preiniciados a 0. Sin embargo, no hay mucho que podamos hacer con él. Podemos confirmar que de hecho tiene 16 bytes de longitud, y eso es todo:</p> + +<pre class="brush:js notranslate">if (buffer.byteLength === 16) { + console.log("Sí, son 16 bytes"); +} else { + console.log("¡Oh no, es del tamaño incorrecto!"); +} +</pre> + +<p>Antes de que podamos trabajar realmente con este búfer, necesitamos crear una vista. Creemos una vista que trate los datos en el búfer como un arreglo de enteros de 32 bits con signo:</p> + +<pre class="brush:js notranslate">let int32View = new Int32Array(buffer); +</pre> + +<p>Ahora podemos acceder a los campos del arreglo como un arreglo normal:</p> + +<pre class="brush:js notranslate">for (let i = 0; i < int32View.length; i++) { + int32View[i] = i * 2; +} +</pre> + +<p>Esto completa las 4 entradas en el arreglo (4 entradas de 4 bytes cada una suman 16 bytes en total) con los valores <code>0</code>, <code>2</code>, <code>4</code> y <code>6</code>.</p> + +<h3 id="Múltiples_vistas_sobre_los_mismos_datos">Múltiples vistas sobre los mismos datos</h3> + +<p>Las cosas comienzan a ponerse realmente interesantes cuando consideras que puedes crear múltiples vistas sobre los mismos datos. Por ejemplo, dado el código anterior, podemos continuar así:</p> + +<pre class="brush:js notranslate">let int16View = new Int16Array(buffer); + +for (let i = 0; i < int16View.length; i++) { + console.log('Entrada ' + i + ': ' + int16View[i]); +} +</pre> + +<p>Aquí creamos una vista entera de 16 bits que comparte el mismo búfer que la vista existente de 32 bits y sacamos todos los valores en el búfer como enteros de 16 bits. Ahora obtenemos la salida <code>0</code>, <code>0</code>, <code>2</code>, <code>0</code>, <code>4</code>, <code>0</code>, <code>6</code>, <code>0</code>.</p> + +<p>Sin embargo, puedes dar un paso más. Considera esto:</p> + +<pre class="brush:js notranslate">int16View[0] = 32; +console.log('La entrada 0 en el arreglo de 32 bits ahora es ' + int32View[0]); +</pre> + +<p>La salida de esto es <code>"La entrada 0 en el arreglo de 32 bits ahora es 32"</code>.</p> + +<p>En otras palabras, los dos arreglos se ven simplemente en el mismo búfer de datos, tratándolo como formatos diferentes. Lo puedes hacer con cualquier {{JSxRef("Global_Objects/TypedArray", "tipo de vista", "#TypedArray_objects")}}.</p> + +<h3 id="Trabajar_con_complejas_estructuras_de_datos">Trabajar con complejas estructuras de datos</h3> + +<p>Al combinar un solo búfer con múltiples vistas de diferentes tipos, comenzando con diferentes desplazamientos en el búfer, puedes interactuar con objetos de datos que contienen múltiples tipos de datos. Esto te permite, por ejemplo, interactuar con complejas estructuras de datos {{Link("/es/docs/Web/WebGL", "WebGL")}}, archivos de datos o estructuras C que necesitas utilizar mientras usas {{Link("/en-US/docs/Mozilla/js-ctypes", "js-ctypes")}}.</p> + +<p>Considera esta estructura C:</p> + +<pre class="brush:cpp notranslate">struct someStruct { + unsigned long id; + char username[16]; + float amountDue; +};</pre> + +<p>Puedes acceder a un búfer que contiene datos en un formato como este:</p> + +<pre class="brush:js notranslate">let buffer = new ArrayBuffer(24); + +// ... lee los datos en el búfer ... + +let idView = new Uint32Array(buffer, 0, 1); +let usernameView = new Uint8Array(buffer, 4, 16); +let amountDueView = new Float32Array(buffer, 20, 1);</pre> + +<p>Luego puedes acceder, por ejemplo, al monto adeudado con <code>amountDueView[0]</code>.</p> + +<div class="note"><strong>Nota</strong>: La {{interwiki("wikipedia", "Data_structure_alignment")}} en una estructura C depende de la plataforma. Toma precauciones y consideraciones para estas diferencias de relleno.</div> + +<h3 id="Conversión_a_arreglos_normales">Conversión a arreglos normales</h3> + +<p>Después de procesar un arreglo con tipo, a veces es útil volver a convertirla en un arreglo normal para beneficiarse del prototipo {{jsxref("Array")}}. Esto se puede hacer usando {{JSxRef("Array.from()")}}, o usando el siguiente código donde <code>Array.from()</code> no es compatible.</p> + +<pre class="brush:js notranslate">let typedArray = new Uint8Array([1, 2, 3, 4]), + normalArray = Array.prototype.slice.call(typedArray); +normalArray.length === 4; +normalArray.constructor === Array; +</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.Int8Array")}}</p> + +<h2 id="Ve_también">Ve también</h2> + +<ul> + <li>{{Link("/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding", "Conseguir ArrayBuffers o arreglos tipados a partir de cadenas codificadas en Base64", "#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer")}}</li> + <li>{{Link("/en-US/docs/Code_snippets/StringView", "StringView: una representación en C de cadenas basadas en arreglos tipados")}}</li> + <li><a href="https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays">Rápida manipulación de píxeles en canvas con arreglos tipados</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/webgl/typed_arrays">Arreglos tipados: Datos binarios en el navegador</a></li> + <li>{{Glossary("Endianness")}}</li> +</ul> |