aboutsummaryrefslogtreecommitdiff
path: root/files/nl/web/javascript/reference/functions/rest_parameters
diff options
context:
space:
mode:
Diffstat (limited to 'files/nl/web/javascript/reference/functions/rest_parameters')
-rw-r--r--files/nl/web/javascript/reference/functions/rest_parameters/index.html183
1 files changed, 183 insertions, 0 deletions
diff --git a/files/nl/web/javascript/reference/functions/rest_parameters/index.html b/files/nl/web/javascript/reference/functions/rest_parameters/index.html
new file mode 100644
index 0000000000..e4c2acae46
--- /dev/null
+++ b/files/nl/web/javascript/reference/functions/rest_parameters/index.html
@@ -0,0 +1,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>