Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
216 lines (154 loc) · 6.41 KB
/
Copy pathindex.md
File metadata and controls
216 lines (154 loc) · 6.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
---
title: Parámetros Rest
slug: Web/JavaScript/Reference/Functions/rest_parameters
---
{{jsSidebar("Functions")}}
La sintaxis de los **parámetros rest** nos permiten representar un número indefinido de argumentos como un array.
{{InteractiveExample("JavaScript Demo: Functions Rest Parameters")}}
```js interactive-example
function sum(...theArgs) {
let total = 0;
for (const arg of theArgs) {
total += arg;
}
return total;
}
console.log(sum(1, 2, 3));
// Expected output: 6
console.log(sum(1, 2, 3, 4));
// Expected output: 10
```
## Sintaxis
```js
function(a, b, ...theArgs) {
// ...
}
```
## Descripción
El último parámetro de una función se puede prefijar con `...`, lo que hará que todos los argumentos restantes (suministrados por el usuario) se coloquen dentro de un array de javascript "estándar".
Sólo el último parámetro puede ser un "parámetro rest".
```js
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]
```
### Diferencia entre los parámetros rest y el objeto `arguments`
Hay tres principales diferencias entre los parámetros rest y el objeto [`arguments`](/es/docs/Web/JavaScript/Reference/Functions/arguments):
- los parámetros rest son sólo aquellos a los que no se les ha asignado un nombre, mientras que el objeto `arguments` contiene todos los argumentos que se le han pasado a la función;
- el objeto `arguments` no es un array real, mientras que los parámetros rest son instancias de [`Array`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array) , lo que significa que lo los métodos como [`sort`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), [`map`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [`forEach`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) o [`pop`](/es/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) pueden aplicarse directamente;
- el objeto `arguments` tiene una funcionalidad adicional específica para sí mismo (como la propiedad `callee`).
### De argumentos a array
Los parámetros rest han sido agregados para reducir el código repetitivo que se usaba en los parámetros.
```js
// 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
}
```
### Desestructuración de los parametros rest
Los parámetros rest pueden ser desestructurados, eso significa que sus datos pueden ser desempaquetados dentro de distintas variables. Ver [Destructuring assignment](/es/docs/Web/JavaScript/Reference/Operators/Destructuring).
```js
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)
```
## Ejemplos
### Usando parámetros rest
En este ejemplo, el primer argumento es mapeado con 'a' y el segundo con 'b', entonces, esos argumentos nombrados, son usados normalmente
De todas formas, el tercer argumento, `manyMoreArgs`, será un array que contendrá tantos argumentos como el usuario incluya (3er, 4to, 5to ...).
```js
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]
```
Debajo... incluso si hay solo un valor, el ultimo argumento seguirá siendo colocado dentro de un array.
```js
// usando la misma definición de función del ejemplo anterior
myFun("one", "two", "three");
// a, one
// b, two
// manyMoreArgs, [three]
```
Debajo, el tercer argumento no esta provisto, pero `manyMoreArgs` continúa siendo un array (aunque uno vacío).
```js
//usando la misma definición de función del ejemplo anterior
myFun("one", "two");
// a, one
// b, two
// manyMoreArgs, []
```
### Argument length
Puesto que `theArgs` es un array, su tamaño (un conteo de sus elementos) es dado por la propiedad `length` :
```js
function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
```
### Ordinary parameter and rest parameters
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:
```js
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]
```
El siguiente ejemplo muestra que se puede usar los métodos de `Array` en los parámetros rest , pero no en el objeto `arguments`:
```js
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));
```
Para poder usar los métodos de `Array` en el objeto `arguments`, se debe convertir a un `Array` primero.
## Especificaciones
{{Specifications}}
## Compatibilidad con navegadores
{{Compat}}
## Ver también
- [Spread Operator](/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [Arguments object](/es/docs/Web/JavaScript/Reference/Functions/arguments)
- [Array](/es/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [Functions](/es/docs/Web/JavaScript/Reference/Functions)
- [Original proposal at ecmascript.org](http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters)
- [JavaScript arguments object and beyond](https://javascriptweblog.wordpress.com/2011/01/18/javascripts-arguments-object-and-beyond/)
- [Destructuring assignment](/es/docs/Web/JavaScript/Reference/Operators/Destructuring)