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
|
---
title: Rest parameters
slug: Web/JavaScript/Reference/Functions/rest_parameters
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
---
<div>{{jsSidebar("Functions")}}</div>
<p>De <strong>rest parameter</strong> syntax laat ons toe om een onbepaald aantal argumenten te vertegenwoordigen als een array.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">function(a, b, ...theArgs) {
// ...
}
</pre>
<h2 id="Beschrijving">Beschrijving</h2>
<p>Als het laatst genoemd argument van een functie wordt voorafgegaan door ..., dan wordt dit een array waarvan de elementen van 0 tot theArgs.length worden doorgegeven als eigenlijke argumenten aan de functie.</p>
<p>In het bovestaande voorbeeld, verzameld theArgs als derde argument van de functie. Alle opeenvolgende argumenten die na a en b zijn toegevoegd in de argumenten lijst.</p>
<h3 id="Verschillen_tussen_de_rest_parameter_en_het_arguments_object">Verschillen tussen de rest parameter en het arguments object</h3>
<p>Er zijn drie belangrijke verschillen tussen de rest parameters en het <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> object:</p>
<ul>
<li>rest parameters zijn alleen de argumenten die niet via een andre naam aan de functie zijn doorgegeven, terwijl het arguments object wel alle argumenten bevat die zijn doorgegeven.</li>
<li>het <code>arguments</code> object is niet echt een array, terwijl de rest parameters wel een instantie van een <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> zijn, waardoor je methodes zoals <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> en <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method">pop</a></code> rechtstreeks kan gebruiken.</li>
<li>de argumenten object heeft extra functionaliteit specifiek voor zichzelf (zoals de <code>callee</code> property).</li>
</ul>
<h3 id="Van_arguments_tot_een_array">Van arguments tot een array</h3>
<p>Rest parameters zijn ingevoerd om de standaardcode die werd veroorzaakt door het arguments object te verminderen.</p>
<pre class="brush: js">// Voor rest parameters, kwam je het volgende wel eens tegen:
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length);
// …
}
// Wat net hetzelfde is als:
function f(a, b, ...args) {
}
</pre>
<h2 id="Voorbeelden">Voorbeelden</h2>
<p>Aangezien theArgs een array is, kunt u de telling van de elementen verkrijgen met het behulp van de eigenschap <strong>.length</strong>:</p>
<pre class="brush: js">function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
</pre>
<p>In het volgende voorbeeld, gebruiken we de <strong>rest parameter</strong> voor het verzamelen vanaf het tweede argument tot het einde. We vermenigvuldigen deze vervolgens met de eerste:</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>Het volgende voorbeeld toont aan dat je Array methodes kan gebruiken op <strong>rest parameters</strong> maar niet op het <strong>arguments</strong> object:</p>
<pre class="brush: js">function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(5,3,7,1)); // toont 1,3,5,7
function sortArguments() {
var sortedArgs = arguments.sort();
return sortedArgs; // dit zal nooit gebeuren
}
// gooit een TypeError: arguments.sort is not a function
console.log(sortArguments(5,3,7,1));
</pre>
<p>Om Array methodes op het <strong>arguments</strong> object te gebruiken, moet je het eerst converteren naar een echte array.</p>
<h2 id="Specificatie">Specificatie</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_compatibiliteit">Browser compatibiliteit</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>34</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(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="Bekijk_ook">Bekijk ook</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>
|
