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
|
---
title: Parâmetros Rest
slug: Web/JavaScript/Reference/Functions/rest_parameters
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
---
<div>{{jsSidebar("Functions")}}</div>
<p>A sintaxe de <strong>rest parameter (parâmetros rest)</strong> nos permite representar um número indefinido de argumentos como um array.</p>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="brush: js">function(a, b, ...theArgs) {
// ...
}
</pre>
<h2 id="Descrição">Descrição</h2>
<p>Se o último argumento nomeado de uma função tiver prefixo com <code>...</code>, ele irá se tornar um array em que os elemento de 0 (inclusive) até theArgs.length (exclusivo) são disponibilizados pelos argumentos atuais passados à função.</p>
<p>No exemplo acima, <code>theArgs</code> irá coletar o terceiro argumento da função (porquê o primeiro é mapeado para <code>a</code>, e o segundo para <code>b</code>) e assim por diante em todos os argumentos consecutivos.</p>
<h3 id="Diferença_entre_rest_parameters_e_arguments_object">Diferença entre <em>rest parameters</em> e <em><code>arguments</code> object</em></h3>
<p>Há três diferenças principais entre <em>rest parameters</em> e os <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> objects:</p>
<ul>
<li><em>rest parameters</em> são os únicos que não foram atribuidos a um nome separado, enquanto os <code>arguments</code> object contêm todos os argumentos passados para a função;</li>
<li>o objeto <code>arguments</code> não é um array, enquanto rest parameters são instâncias <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a>, isso significa que 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> ou <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> podem ser aplicados diretamente;</li>
<li> o objeto <code>arguments</code> possui a funcionalidade adicional de especificar ele mesmo (como a propriedade <code>callee</code>). </li>
</ul>
<h3 id="De_arguments_para_array">De arguments para array</h3>
<p>Rest parameters foram criados para reduzir o <span id="result_box" lang="pt"><span>código padrão</span> <span>que</span> <span>foi induzida</span> <span>pelos argumentos</span></span></p>
<pre class="brush: js">// Antes rest parameters, o seguinte codigo pode ser encontrado
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length);
// ...
}
// esse é o equivalente
function(a, b, ...args) {
}
</pre>
<h2 id="Exemplos">Exemplos</h2>
<p>Como <code>theArgs</code> é um array, você pode pegar número de elementos usando a propriedade <code>length</code>:</p>
<pre class="brush: js">function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
</pre>
<p>No próximo exemplo, nós usamos o rest parâmetro para buscar argumentos do segundo parâmetro para o fim. Nós multiplicamos eles pelo primeiro parâmetro:</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>O próximo exemplo mostra como você pode usar metodos do Array em rest params, mas não no objeto <code>arguments</code>:</p>
<pre class="brush: js">function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(5,3,7,1)); // Exibe 1,3,5,7
function sortArguments() {
var sortedArgs = arguments.sort();
return sortedArgs; // isso nunca irá ocorrer
}
// throws a TypeError: arguments.sort is not a function
console.log(sortArguments(5,3,7,1));
</pre>
<p>a fim de usar o objeto <code>arguments</code>, você precisará converte-lo para um array antes.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade">Compatibilidade</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(47)}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("15.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>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(45)}}</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="Veja_também">Veja também</h2>
<ul>
<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 href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Operator</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>
</ul>
|
