Spread und Rest Operator

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);

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