Spread-Syntax vs. Rest-Parameter: Den Unterschied verstehen

In ES2015 bieten zwei neue Funktionen, Spread-Syntax und Rest-Parameter, leistungsstarke Möglichkeiten dazu Manipulieren von Arrays und Objekten. Obwohl beide ähnlich erscheinen mögen, dienen sie unterschiedlichen Zwecken und jede hat ihre eigene einzigartige Funktionalität.

Spread-Syntax

Spread-Syntax (dargestellt durch drei Punkte „…“ ) ermöglicht es Ihnen, ein Iterable (z. B. ein Array oder ein Objekt) in einzelne Elemente innerhalb eines anderen Iterables zu verteilen oder zu erweitern. Mit dieser Funktion können Sie bequem mehrere Arrays oder Objekte zu einem neuen zusammenführen oder kombinieren.

Betrachten wir beispielsweise den folgenden Code:

var abc = ['a', 'b', 'c'];
var def = ['d', 'e', 'f'];
var alpha = [ ...abc, ...def ];
console.log(alpha); // alpha == ['a', 'b', 'c', 'd', 'e', 'f'];

In diesem Snippet sind ...abc und ... Die def-Spread-Syntax erweitert die abc- und def-Arrays in einzelne Elemente und erstellt so ein neues Alpha-Array, das alle Elemente aus beiden Arrays enthält.

Rest Parameter

Auf der anderen Seite , ein Rest-Parameter (gekennzeichnet durch drei Punkte „…“ mit vorangestelltem Bezeichner) sammelt alle verbleibenden Argumente, die an eine Funktion übergeben werden, in einem einzelnen Array. Der Rest-Parameter muss der letzte Parameter in der Parameterliste der Funktion sein.

Ein Beispiel für einen Rest-Parameter in Aktion ist wie folgt:

function sumAll(...numbers) {
  let total = 0;
  for (let num of numbers) {
    total  = num;
  }
  return total;
}

let result = sumAll(1, 2, 3, 4, 5);
console.log(result); // result == 15

In diesem Code sammelt der Parameter ...numbers rest die verbleibenden Argumente, die an die Funktion sumAll übergeben werden (in diesem Fall 1, 2, 3, 4 und 5) und erstellt ein einzelnes Zahlenarray.