diff options
Diffstat (limited to 'files/es/web/javascript/reference/operators/spread_syntax/index.html')
| -rw-r--r-- | files/es/web/javascript/reference/operators/spread_syntax/index.html | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/files/es/web/javascript/reference/operators/spread_syntax/index.html b/files/es/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..5a17cd05a2 --- /dev/null +++ b/files/es/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,242 @@ +--- +title: Sintáxis Spread +slug: Web/JavaScript/Referencia/Operadores/Sintaxis_Spread +tags: + - ECMAScript6 + - Iteradores + - JavaScript +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<div>{{jsSidebar("Operators")}}</div> + +<div><strong>La sintaxis extendida o spread</strong> <strong>syntax</strong> permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales_Array">Array literales</a>) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales">literales Tipo Objeto</a>) son esperados.</div> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<div></div> + +<p class="hidden">La fuente para este ejemplo interactivo está almacenada en el repositorio de GitHub. Si quieres contribuir al proyecto interactivo de ejemplos, por favor clona <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíanos una solicitud de descarga (pull).</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p>Para llamadas de funciones:</p> + +<pre class="syntaxbox notranslate">myFunction(...iterableObj); +</pre> + +<p>Para arreglos literales o cadenas de caracteres:</p> + +<pre class="syntaxbox notranslate">[...iterableObj, '4', 'five', 6];</pre> + +<p>Para objetos literales (nuevo en ECMAScript 2018):</p> + +<pre class="syntaxbox notranslate">let objClone = { ...obj };</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Spread_en_llamadas_de_función">Spread en llamadas de función</h3> + +<h4 id="Reemplaza_apply">Reemplaza "apply"</h4> + +<p>Es frecuente usar {{jsxref( "Function.prototype.apply")}} en casos donde quieres usar los elementos de un arreglo como argumentos de una función.</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>Con la sintaxis expandida (spread syntax), el código anterior puede ser escrito como:</p> + +<pre class="brush: js notranslate">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Cualquier argumento en la lista de argumentos puede usar la sintáxis expandida y esto puede ser usado varias veces.</p> + +<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Apply_para_new">"Apply" para "new"</h4> + +<p>Cuando se llama un constructor con <code>new</code>, no es posible usar <strong>directamente</strong> un arreglo y <code>apply</code> (<code>apply</code> hace un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). Sin embargo, un arreglo puede ser fácilmente usado con un new gracias a la sintáxis expandida:</p> + +<pre class="brush: js notranslate">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>Para usar <strong>new </strong>con un arreglo de parámetros sin la sintáxis expandida, podrías tener que hacerlo <strong>indirectamente </strong>a través de una aplicación parcial:</p> + +<pre class="brush: js notranslate">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Expandir_Array_literales">Expandir Array literales</h3> + +<h4 id="Un_literal_Array_más_poderoso">Un literal Array más poderoso</h4> + +<p>Sin <code><strong>sintaxis expandida (spread syntax)</strong></code>, para crear un nuevo arreglo usando un arreglo existente como parte de él,no es suficiente la sintaxis de Array literal y en su lugar se debe usar código imperativo con una combinación de <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis expandida, esto se vuelve mucho mas práctico:</p> + +<pre class="brush: js notranslate">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Así como para expandir listas de argumentos, <code>...</code> puede ser usado en cualquier parte dentro del Array literal, y múltiples veces.</p> + +<h4 id="Copiar_un_arreglo">Copiar un arreglo</h4> + +<pre class="brush: js notranslate">var arr = [1, 2, 3]; +var arr2 = [...arr]; // like arr.slice() +arr2.push(4); + +// arr2 becomes [1, 2, 3, 4] +// arr remains unaffected +</pre> + +<p><strong>Nota:</strong> La sintaxis expandida efectivamente va a un nivel de profundidad mientras copia un arreglo. Por lo tanto, esto no permite copiar arreglos multidimensionales como se muestra en los siguientes ejemplos (es lo mismo con {{jsxref("Object.assign()")}} y sintaxis spread).</p> + +<pre class="brush: js notranslate">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Now array a is affected as well: [[], [2], [3]] +</pre> + +<h4 id="Una_forma_mejor_para_concatenar_arreglos">Una forma mejor para concatenar arreglos</h4> + +<p>{{jsxref("Array.concat")}} es usada a menudo para concatenar un arreglo al final de un arreglo ya existente. Sin la sintaxis spread se realiza:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Append all items from arr2 onto arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>Con la sintaxis spread se transforma en:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; +</pre> + +<p>{{jsxref("Array.unshift")}} es a menudo usada para insertar un arreglo de valores al inicio de un arreglo existente. Sin la sintáxis spread, esto es hecho como:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Prepend all items from arr2 onto arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]</pre> + +<p>Con la sintaxis spread se convierte en [Observa, sin embargo, que esto crea un nuevo arreglo <code>arr1</code>. Diferente a {{jsxref("Array.unshift")}}, esto no modifica el arreglo original en sitio <code>arr1</code>]:</p> + +<pre class="brush: js notranslate">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2] +</pre> + +<h3 id="Spread_en_literales_tipo_Objeto">Spread en literales tipo Objeto</h3> + +<p>La propuesta <a href="https://github.com/tc39/proposal-object-rest-spread">Propiedades Rest/Spread para ECMAScript</a> (etapa 4) agrega propiedades spread a los <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">literales Tipo Objeto</a>. Esto copia sus propiedades enumerables desde un objeto provisto dentro de un nuevo objeto.</p> + +<p>Shallow-cloning (excluyendo prototype) o la combinación de objetos es ahora posible usando una sintaxis más corta que {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 }</pre> + +<p>Observa que {{jsxref("Object.assign()")}} desencadena <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> mientras que la sintaxis spread no lo hace.</p> + +<p>Observa que tú no puedes reemplazar o replicar la función {{jsxref("Object.assign()")}}:</p> + +<pre class="brush: js notranslate">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>En el ejemplo de arriba, el operador spread no trabaja como uno podría esperar: este dispersa un <em>arreglo</em> de argumentos en el literal Tipo Objeto, debido al parámetro rest.</p> + +<h3 id="Sólo_para_iterables">Sólo para iterables</h3> + +<p>La sintaxis Spread (otra que en el caso de las propiedades spread) puede ser aplicada sólo a los objetos <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">iterables</a>:</p> + +<pre class="brush: js notranslate">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj is not iterable +</pre> + +<h3 id="Spread_con_muchos_valores">Spread con muchos valores</h3> + +<p>Cuando se usa la sintaxis spread para llamados de funciones, tenga en cuenta la posibilidad de exceder el límite de longitud de argumentos del motor de JavaScript. Vea <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply" title="The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)."><code>apply()</code></a> para más detalles.</p> + +<h2 id="Sintaxis_Rest_parámetros">Sintaxis Rest (parámetros)</h2> + +<p>La sintaxis Rest luce exactamente como la sintaxis spread, pero esto es usado por la desestructuración de arreglos y objetos. De cierta forma, la sintaxis rest es la opuesta a la sintaxis spread: spread 'expande' un arreglo en sus elementos, mientras rest agrupa múltiples elementos y los 'condensa' en un único elemento. Consulta <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">parámetros rest.</a></p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Sin cambios.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Definido en <a href="https://tc39.github.io/ecma262/2018/#sec-object-initializer">Object Initializer</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<div class="hidden">La tabla de compatibilidad en esta página es generada a partir de datos estructurados. Si quieres contribuir con esta información, consulta <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una solicitud (pull).</div> + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (también ‘<code>...</code>’)</li> +</ul> |