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
|
---
title: Rest Parameter
slug: Web/JavaScript/Reference/Functions/rest_parameter
tags:
- Functions
- JavaScript
- Rest
- Rest Parameter
translation_of: Web/JavaScript/Reference/Functions/rest_parameters
---
<div>{{jsSidebar("Functions")}}</div>
<p>Mit der <strong>Rest Parameter</strong> Syntax kann man beliebig viele Parameter als Array empfangen.</p>
<div>{{EmbedInteractiveExample("pages/js/functions-restparameters.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="brush: js">function f(a, b, ...restArgs) {
// ...
}
</pre>
<h2 id="Beschreibung">Beschreibung</h2>
<p>Wenn vor dem letzten Parameter einer Funktion <code>...</code> steht wird aus diesem Parameter ein Array von <code>0</code> (inklusiv) bis zu <code>restArgs.length</code> (exklusiv), welches weitere der Funktion übergebene Parameter enthält.</p>
<p>Im oberen Beispiel enthält das <code>restArgs</code> alle weiteren Argumente außer die ersten beiden, da diese bereits von den Variablen <code>a</code> und <code>b</code> erfasst werden.</p>
<h3 id="Unterschiede_zwischen_Rest_Parametern_und_dem_arguments_Objekt">Unterschiede zwischen Rest Parametern und dem <code>arguments</code> Objekt</h3>
<p>Es gibt drei Hauptunterschiede zwischen Rest Parametern und dem <a href="/de/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments"><code>arguments</code></a> Objekt:</p>
<ul>
<li>Rest Parameter sind nur die jenigen, die zu einem Namen gehören (z. B. in Funktionsausdrücken formal definierte Parameter), während das <code>arguments</code> Objekt alle übergebenen Argumente einer Funktion enthällt.</li>
<li>Das <code>arguments</code> Objekt ist kein echtes Array, während Rest Parameter eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array"><code>Array</code></a> sind, was bedeutet, dass Methoden wie <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort" title="Array sort method"><code>sort</code></a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map" title="Array map method"><code>map</code></a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" title="Array forEach method"><code>forEach</code></a> oder <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop" title="Array pop method"><code>pop</code></a> direkt angewendet werden können.</li>
<li>Das <code>arguments</code> Objekt hat zusätzliche, spezielle Funktionalität (wie die <code>callee</code> Eigenschaft).</li>
</ul>
<h3 id="Von_arguments_zu_einem_Array">Von <code>arguments</code> zu einem Array</h3>
<p>Rest Parameter wurden eingeführt, um Standardcode zu reduzieren, welche beim Einsatz von <code>arguments</code> anfällt</p>
<pre class="brush: js">// Before rest parameters, the following could be found:
function f(a, b) {
var args = Array.prototype.slice.call(arguments, f.length);
// …
}
// to be equivalent of
function f(a, b, ...args) {
}
</pre>
<h3 id="Destrukturierte_Rest_Parameter">Destrukturierte Rest Parameter</h3>
<p>Rest Parameter können destrukturiert werden, was bedeutet, dass sie in einzelne Variablen entpackt werden können. Siehe <a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destrukturierende Zuweisung</a>.</p>
<pre class="brush: js">function f(...[a, b, c]) {
return a + b + c;
}
f(1) // NaN (b and c are undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)</pre>
<h2 id="Beispiele">Beispiele</h2>
<p>Weil <code>theArgs</code> ein Array ist, ist die Anzahl der Argumente mit der <code>length</code> Eigenschaft gegeben:</p>
<pre class="brush: js">function fun1(...theArgs) {
console.log(theArgs.length);
}
fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3
</pre>
<p>Im nächsten Beispiel wird ein Rest Parameter eingesetzt, um alle Argumente außer dem ersten in einem Array zu sammeln. Jedes wird dann mit dem ersten Argument multipliziert und als Array zurückgegeben:</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>Das folgende Beispiel zeigt, dass <code>Array</code> Methoden auf Rest Parameter jedoch nicht auf <code>arguments</code> Objekten eingesetzt werden können:</p>
<pre class="brush: js">function sortRestArgs(...theArgs) {
var sortedArgs = theArgs.sort();
return sortedArgs;
}
console.log(sortRestArgs(5, 3, 7, 1)); // shows 1, 3, 5, 7
function sortArguments() {
var sortedArgs = arguments.sort();
return sortedArgs; // this will never happen
}
// throws a TypeError: arguments.sort is not a function
console.log(sortArguments(5, 3, 7, 1));
</pre>
<p>Um <code>Array</code> Methoden auf einem <code>arguments</code> Objekt zu benutzen, muss dieses in ein echtes Array konvertiert werden.</p>
<pre class="brush: js">function sortArguments() {
var args = Array.from(arguments);
var sortedArgs = args.sort();
return sortedArgs;
}
console.log(sortArguments(5, 3, 7, 1)); // 1, 3, 5, 7
</pre>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function Definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>Initiale Definition</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>
<div>
<p>{{Compat("javascript.functions.rest_parameters")}}</p>
</div>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="spread operator">Spread Syntax</a> (auch ‘<code>...</code>’)</li>
<li><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments" title="arguments">Arguments Objekt</a></li>
<li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array" title="Array">Array</a></li>
<li><a href="/de/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 Vorschlag von 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="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destrukturierte Zuweisungen</a></li>
</ul>
|
