Rest-Parameter

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

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

Es gibt einige zustzliche Syntaxbeschrnkungen:

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

Beschreibung

Der letzte Parameter einer Funktionsdefinition kann mit ... (drei U+002E FULL STOP Zeichen) vorangestellt werden, wodurch alle verbleibenden (vom Benutzer angegebenen) Parameter innerhalb eines Array-Objekts platziert 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 ermglicht, bestimmte Parameterpositionen zu ignorieren.

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

Allerdings sind die folgenden 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 gezhlt.

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, whrend Rest-Parameter Array-Instanzen sind, was bedeutet, dass Methoden wie sort(), map(), forEach() oder pop() direkt darauf angewendet werden knnen.
• Das arguments-Objekt hat die zustzliche (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 bndelt alle zustzlichen Parameter in einem einzelnen Array, enthlt jedoch keine benannten Argumente, die vor dem ...restParam definiert sind. Das arguments-Objekt enthlt alle Parameter einschlielich der Parameter im ...restParam Array gebndelt in einem array-hnlichen Objekt.

Beispiele

Verwendung von Rest-Parametern

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

Das dritte Argument, manyMoreArgs, wird jedoch ein Array sein, das das dritte, vierte, fnfte, sechste, , n-te so viele Argumente, wie der Benutzer angibt enthlt.

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

Unten, auch wenn es nur einen Wert gibt, 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

Unten wird das dritte Argument nicht bereitgestellt, aber manyMoreArgs ist dennoch 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

Unten wird nur ein Argument bereitgestellt, sodass b den Standardwert undefined erhlt, aber manyMoreArgs ist dennoch ein leeres Array.

// Using the same function definition from example above

myFun("one");

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

Argumentlnge

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

Verwendung von Rest-Parametern in Kombination mit normalen Parametern

Im nchsten Beispiel wird ein Rest-Parameter verwendet, um alle Parameter nach dem ersten Parameter in ein Array zu sammeln. Jeder der in das Array gesammelten Parameterwerte wird dann mit dem ersten Parameter multipliziert und das Array wird zurckgegeben:

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

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

Von arguments zu einem Array

Array-Methoden knnen bei Rest-Parametern verwendet werden, nicht jedoch beim 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 eingefhrt, um den Boilerplate-Code zu reduzieren, der hufig zum Umwandeln 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 wurden:

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 knnen Sie leicht Zugriff auf ein normales Array mit einem Rest-Parameter erhalten:

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Funktionen Leitfaden
• Funktionen
• Spread-Syntax (...)
• Standardparameter
• arguments
• Array