Rest-Parameter

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

Es gibt einige zusätzliche Einschränkungen in der Syntax:

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

Der letzte Parameter einer Funktionsdefinition kann mit ... (drei U+002E FULL STOP Zeichen) versehen werden, wodurch alle übrigen (vom Benutzer bereitgestellten) Parameter in ein Array-Objekt gesetzt werden.

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 destrukturiert werden, was es Ihnen ermöglicht, bestimmte Parameterpositionen zu ignorieren.

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

Die folgenden Beispiele sind jedoch alle Syntaxfehler:

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

Der Rest-Parameter wird nicht zur length-Eigenschaft der Funktion gezählt.

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, was bedeutet, dass Methoden wie sort(), map(), forEach() oder pop() direkt darauf angewendet werden können.
• Das arguments-Objekt besitzt 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 nie, wenn die benannten Parameter neu zugewiesen werden.
• Der Rest-Parameter packt alle zusätzlichen Parameter in ein einzelnes Array, enthält jedoch keine benannten Argumente, die vor dem ...restParam definiert sind. Das arguments-Objekt enthält alle Parameter – einschließlich der Parameter im ...restParam-Array – in einem array-ähnlichen Objekt gebündelt.

In diesem Beispiel wird das erste Argument a zugeordnet und das zweite b, sodass diese benannten Argumente normal verwendet werden können.

Jedoch wird das dritte Argument, manyMoreArgs, ein Array sein, das das dritte, vierte, fünfte, sechste, …, n-te Argument – so viele Argumente, wie der Nutzer angibt – enthält.

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, obwohl nur ein Wert vorhanden ist, wird das letzte Argument immer noch in ein Array gesetzt.

// 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 folgenden Beispiel wird das dritte Argument nicht bereitgestellt, aber manyMoreArgs ist immer noch ein Array (wenn auch ein leeres).

// Using the same function definition from example above

myFun("one", "two");

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

Im folgenden Beispiel wird nur ein Argument bereitgestellt, sodass b den Standardwert undefined erhält, aber manyMoreArgs immer noch ein leeres Array ist.

// Using the same function definition from example above

myFun("one");

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

Da theArgs ein Array ist, wird die Anzahl seiner Elemente durch die length-Eigenschaft angegeben. Wenn der einzige Parameter der Funktion ein Rest-Parameter ist, wird restParams.length gleich arguments.length sein.

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

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

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 aufgenommenen Parameterwerte wird dann mit dem ersten Parameter multipliziert, und das Array wird zurückgegeben:

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

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

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

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 häufig für die Umwandlung einer Menge von Argumenten in ein Array verwendet wurde.

Vor den Rest-Parametern mussten arguments in ein normales Array umgewandelt werden, bevor array-Methoden darauf aufgerufen werden konnten:

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 können Sie mithilfe eines Rest-Parameters einfach auf ein normales Array zugreifen:

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

• Funktions-Leitfaden
• Funktionen
• Spreizsyntax (...)
• Standardparameter
• arguments
• Array