aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/javascript/referencia/funciones/parametros_rest/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/es/web/javascript/referencia/funciones/parametros_rest/index.html')
-rw-r--r--files/es/web/javascript/referencia/funciones/parametros_rest/index.html266
1 files changed, 266 insertions, 0 deletions
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>