Rest- und Spread-Operator in

Über Rest- und Spread-Operator

JavaScript hat einen eingebauten ...-Operator, der den Umgang mit einer unbestimmten Anzahl von Elementen erleichtert. Je nach Kontext heißt er Rest-Operator oder Spread-Operator.

Rest-Operator

Rest-Elemente

Wenn ... auf der linken Seite einer Zuweisung steht, bezeichnet man diese drei Punkte als rest-Operator. Die drei Punkte zusammen mit einem Variablennamen heißen Rest-Element. Es sammelt null oder mehr Werte und speichert sie in einem einzelnen Array.

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

Beachte, dass ein rest-Element in JavaScript, anders als in manchen anderen Sprachen, kein abschließendes Komma haben darf. Es muss das letzte Element einer Destrukturierung sein. Das folgende Beispiel wirft einen SyntaxError:

const [...items, last] = [2, 4, 8, 16]

Rest-Eigenschaften

Ähnlich wie bei Arrays kann der Rest-Operator auch verwendet werden, um eine oder mehrere Objekteigenschaften zu sammeln und in einem einzelnen Objekt zu speichern.

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Rest-Parameter

Wenn ... in einer Funktionsdefinition neben dem letzten Argument steht, heißt dieser Parameter Rest-Parameter. Er ermöglicht es der Funktion, eine unbestimmte Anzahl von Argumenten als Array entgegenzunehmen.

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Spread

Spread-Elemente

Wenn ... auf der rechten Seite einer Zuweisung steht, nennt man es spread-Operator. Er entfaltet ein Array zu einer Liste von Elementen. Anders als das Rest-Element kann er an jeder Stelle in einem Array-Literal stehen, und es kann mehr als einen davon geben.

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

Spread-Eigenschaften

Ähnlich wie bei Arrays kann der Spread-Operator auch verwendet werden, um Eigenschaften von einem Objekt in ein anderes zu kopieren.

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }