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
|
---
title: Paràmetres rest
slug: Web/JavaScript/Reference/Functions/rest_parameters
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
original_slug: Web/JavaScript/Reference/Functions/parameters_rest
---
<div>{{jsSidebar("Functions")}}</div>
<p>El <strong>paràmetre rest</strong> ens permet representar un nombre indefinit d'arguments en forma d 'array.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">function f(a, b, ...theArgs) {
// ...
}
</pre>
<h2 id="Descripció">Descripció</h2>
<p>Si l'últim argument d'una funció, està prefixat amb l'operador <code>...</code>, aquest esdevé un array el qual té com a elements des de <code>0</code> (inclòs) fins a <code>theArgs.length</code> (no inclòs) els arguments passats a la funció.</p>
<p>A l'exemple de sobre, <code>theArgs</code> aglutina el tercer argument de la funció, ja que el primer està mapejat a <code>a</code> i el segon està mapejat a <code>b</code> , i tota la resta d'arguments consecutius. </p>
<h3 id="Diferència_entre_els_paràmetres_rest_i_l'objecte_arguments">Diferència entre els paràmetres rest i l'objecte <code>arguments</code></h3>
<p>Existeixen tres diferències principals entre els paràmetres rest i l'objecte <code>arguments</code></p>
<ul>
<li>Els paràmetres rest són aquells als que no s' ha donat un nom per separat, mentre que l' objecte <code>arguments</code> conté tots els paràmetres passats a la funció</li>
<li>L' objecte <code>arguments</code> no és un array real, mentre que els paràmetres rest són instàncies d' <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> , el qual significa que els hi podem aplicar directamaent els mètodes <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 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a>.</code></li>
<li>L' objecte <code>arguments</code> té funcionalitat específica a sí mateix (com la propietat <code>calle</code>).</li>
</ul>
<h3 id="Des_d'_arguments_fins_a_un_array">Des d' arguments fins a un array</h3>
<p>El paràmetre rest ha estat introduit per tal de reduir la quantitat de codi utilitzat que es introduit per els arguments</p>
<pre class="brush: js">// Anteriorment a l' existència del paràmetre rest el s' utilitzava seguent codi
function f(a, b) {
var args = Array.prototype.slice.call(arguments, f.length);
// …
}
// equivalent a
function f(a, b, ...args) {
}
</pre>
<h3 id="Desestructurant_paràmetres_rest">Desestructurant paràmetres rest</h3>
<p>Els paràmetres rest es poden desestructurar, que vol dir que els valors que contenen es poden desenpaquetar en variables diferents i separades. Vegeu <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a>.</p>
<pre class="brush: js">function f(...[a, b, c]) {
return a + b + c;
}
f(1) // NaN (bi c són undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (el quart paràmetre no està desetructurat)</pre>
<h2 id="Exemples">Exemples</h2>
<p>Com que <code>theArgs</code> és un array, la propietat <code>length</code> en retorna el recompte:</p>
<pre class="brush: js">function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
</pre>
<p>En el seguent exemple el paràmetre rest s' utilitza per aglutinar tots els paràmetres passats a la funcció després del primer en un array. Després cadascun d' ells és multiplicat per el primer paràmetre passat a la funció i es retorna l' array.</p>
<pre class="brush: js">function multiply(multiplier, ...theArgs) {
return theArgs.map(function(element) {
return multiplier * element;
});
}
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
</pre>
<p>El seguent exemple mostra com els mètodes d' <code>Array</code> es poden utilitzar am paràmetres rest, però no amb l' objecte <code>arguments</code> :</p>
<pre class="brush: js">function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(5, 3, 7, 1)); // mostra 1, 3, 5, 7
function sortArguments() {
var sortedArgs = arguments.sort();
return sortedArgs; // aquesta línia mai s' executarà
}
// genera el TypeError: arguments.sort no és una funció
console.log(sortArguments(5, 3, 7, 1));
</pre>
<p>Per tal de poder usar els mètodes d' <code>Array</code> amb l' objecte <code>arguments</code> , aquest s' ha de convertir primer en un array.</p>
<pre class="brush: js">function sortArguments() {
var args = Array.prototype.slice.call(arguments);
var sortedArgs = args.sort();
return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // shows 1, 3, 5, 7
</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-function-definitions', 'Function Definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Initial definition</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("javascript.functions.rest_parameters")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread operator</a> (also ‘<code>...</code>’)</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="Array">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="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring assignment</a></li>
</ul>
|
