Rest-Parameter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die Syntax für Rest-Parameter erlaubt es einer Funktion, eine unbegrenzte Anzahl von Argumenten als Array zu akzeptieren. Dies bietet eine Möglichkeit, variadic functions in JavaScript darzustellen.

Probieren Sie es aus

function sum(...theArgs) {
  let total = 0;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2, 3));
// Expected output: 6

console.log(sum(1, 2, 3, 4));
// Expected output: 10

Syntax

js
function f(a, b, ...theArgs) {
  // …
}

Es gibt einige zusätzliche Syntaxbeschränkungen:

  • Eine Funktionsdefinition kann nur einen Rest-Parameter haben.
  • Der Rest-Parameter muss der letzte Parameter in der Funktionsdefinition sein.
  • Abschließende Kommata sind nach dem Rest-Parameter nicht erlaubt.
  • Der Rest-Parameter kann keinen Standardwert haben.

Beschreibung

Der letzte Parameter einer Funktionsdefinition kann mit ... (drei U+002E FULL STOP-Zeichen) versehen werden, wodurch alle verbleibenden (vom Benutzer übergebenen) Parameter innerhalb eines Array-Objekts platziert werden.

js
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// Console Output:
// a, one
// b, two
// manyMoreArgs, ["three", "four", "five", "six"]

Der Rest-Parameter kann mittels Destrukturierung verwendet werden, wodurch es möglich ist, bestimmte Parameterpositionen zu ignorieren.

js
function ignoreFirst(...[, b, c]) {
  return b + c;
}

Folgende Beispiele führen jedoch zu Syntaxfehlern:

js
function wrong1(...one, ...wrong) {}
function wrong2(...wrong, arg2, arg3) {}
function wrong3(...wrong,) {}
function wrong4(...wrong = []) {}

Der Rest-Parameter wird nicht in die length-Eigenschaft der Funktion einbezogen.

Der Unterschied zwischen Rest-Parametern und dem arguments-Objekt

Es gibt vier Hauptunterschiede zwischen Rest-Parametern und dem arguments-Objekt:

  • Das arguments-Objekt ist kein echtes Array, während Rest-Parameter Array-Instanzen sind. Methoden wie z. B. sort(), map(), forEach() oder pop() können direkt darauf angewendet werden.
  • Das arguments-Objekt hat die zusätzliche (veraltete) callee-Eigenschaft.
  • In einer nicht-strikten Funktion mit einfachen Parametern synchronisiert das arguments-Objekt seine Indizes mit den Werten der Parameter. Das Rest-Parameter-Array aktualisiert seinen Wert jedoch niemals, wenn benannte Parameter neu zugewiesen werden.
  • Der Rest-Parameter bündelt alle zusätzlichen Parameter in ein einzelnes Array, enthält jedoch keine benannten Argumente, die vorher dem ...restParam definiert sind. Das arguments-Objekt enthält alle Parameter — einschließlich der Parameter im ...restParam-Array — gebündelt in einem array-ähnlichen Objekt.

Beispiele

Verwendete Rest-Parameter

In diesem Beispiel wird das erste Argument a und das zweite b zugeordnet, sodass diese benannten Argumente wie gewohnt verwendet werden.

Das dritte Argument, manyMoreArgs, ist ein Array, das das dritte, vierte, fünfte, sechste, …, n-te – so viele Argumente wie der Benutzer angibt – enthält.

js
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// a, "one"
// b, "two"
// manyMoreArgs, ["three", "four", "five", "six"] <-- an array

Im folgenden Beispiel, selbst wenn nur ein Wert vorhanden ist, wird das letzte Argument in ein Array eingefügt.

js
// Using the same function definition from example above

myFun("one", "two", "three");

// a, "one"
// b, "two"
// manyMoreArgs, ["three"] <-- an array with just one value

Im nächsten Beispiel wird das dritte Argument nicht angegeben, aber manyMoreArgs ist weiterhin ein Array (wenn auch ein leeres).

js
// Using the same function definition from example above

myFun("one", "two");

// a, "one"
// b, "two"
// manyMoreArgs, [] <-- still an array

Im darunter stehenden Beispiel wird nur ein Argument übergeben, sodass b den Standardwert undefined erhält, aber manyMoreArgs ist weiterhin ein leeres Array.

js
// Using the same function definition from example above

myFun("one");

// a, "one"
// b, undefined
// manyMoreArgs, [] <-- still an array

Argumentanzahl

Da theArgs ein Array ist, kann die Anzahl der Elemente über die length-Eigenschaft ermittelt werden. Wenn der einzige Parameter der Funktion ein Rest-Parameter ist, entspricht restParams.length dem Wert von arguments.length.

js
function fun1(...theArgs) {
  console.log(theArgs.length);
}

fun1(); // 0
fun1(5); // 1
fun1(5, 6, 7); // 3

Nutzung von Rest-Parametern in Kombination mit normalen Parametern

Im nächsten Beispiel wird ein Rest-Parameter verwendet, um alle Parameter nach dem ersten Parameter in einem Array zu sammeln. Jeder der in das Array gesammelten Parameterwerte wird dann mit dem ersten Parameter multipliziert, und das Array wird zurückgegeben:

js
function multiply(multiplier, ...theArgs) {
  return theArgs.map((element) => multiplier * element);
}

const arr = multiply(2, 15, 25, 42);
console.log(arr); // [30, 50, 84]

Vom arguments-Objekt zu einem Array

Array-Methoden können auf Rest-Parameter angewendet werden, jedoch nicht auf das arguments-Objekt:

js
function sortRestArgs(...theArgs) {
  const sortedArgs = theArgs.sort();
  return sortedArgs;
}

console.log(sortRestArgs(5, 3, 7, 1)); // 1, 3, 5, 7

function sortArguments() {
  const sortedArgs = arguments.sort();
  return sortedArgs; // this will never happen
}

console.log(sortArguments(5, 3, 7, 1));
// throws a TypeError (arguments.sort is not a function)

Rest-Parameter wurden eingeführt, um den Boilerplate-Code zu reduzieren, der üblicherweise für die Umwandlung einer Menge von Argumenten in ein Array verwendet wurde.

Vor den Rest-Parametern musste arguments in ein normales Array umgewandelt werden, bevor Array-Methoden darauf angewendet werden konnten:

js
function fn(a, b) {
  const normalArray = Array.prototype.slice.call(arguments);
  // — or —
  const normalArray2 = [].slice.call(arguments);
  // — or —
  const normalArrayFrom = Array.from(arguments);

  const first = normalArray.shift(); // OK, gives the first argument
  const firstBad = arguments.shift(); // ERROR (arguments is not a normal array)
}

Jetzt kann man mithilfe eines Rest-Parameters leicht auf ein normales Array zugreifen:

js
function fn(...args) {
  const normalArray = args;
  const first = normalArray.shift(); // OK, gives the first argument
}

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-function-definitions

Browser-Kompatibilität

Loading…

Siehe auch