Skip to main content

​
Spread Operator

Die Spread (...)-Syntax ermöglicht es, ein Iterable, wie z. B. ein Array oder einen String, an Stellen zu erweitern, an denen null oder mehr Argumente (bei Funktionsaufrufen) oder Elemente (bei Array-Literalen) erwartet werden. In einem Objektliteral zählt die Spread-Syntax die Eigenschaften eines Objekts auf und fügt die Schlüssel-Wert-Paare dem zu erstellenden Objekt hinzu.

​
Beispiele

​
Funktionsaufrufe

Wir können über die Spread-Syntax einer Funktion die Argumente innerhalb eines Arrays mitgeben. 
const sum = (x, y, z) => {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers));

​
Array-Literals

Wir können mit der Spread-Syntax Arrays mit Arrays kombinieren und so Elemente hinzufügen. 
const parts = ["shoulders", "knees"];
const lyrics = ["head", ...parts, "and", "toes"];
Wir können mit dem Spread Operator ausserdem einen Array kopieren. 
const arr2 = [...arr];
Mit der Spread-Syntax können wir Arrays verketten. 
let arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2];

​
Objekt-Literals

Mit dem Spread Operator können wir Objekte ganz einfach zusammenführen. 
const obj1 = { foo: "bar", x: 42 };
const obj2 = { bar: "baz", y: 13 };

const mergedObj = { ...obj1, ...obj2 };
Wie auch bei Arrays, können wir Objekte mit der Spread-Syntax klonen. 
const clonedObj = { ...obj1 };
Mit dem Spread Operator können wir Properties überschreiben. 
const obj1 = { foo: "bar", x: 42 };
const obj2 = { foo: "baz", y: 13 };

const mergedObj = { x: 41, ...obj1, ...obj2, y: 9 };

​
Rest Operator

Du kannst ein Destructuring Pattern mit dem Rest Operator ...rest beenden. Dieses Pattern speichert alle verbleibenden Eigenschaften des Objekts oder Arrays in einem neuen Objekt oder Array. 
const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(others); // { b: 2, c: 3 }

const [first, ...others2] = [1, 2, 3];
console.log(others2); // [2, 3]