Wofür werden die Spread- und Rest-Operatoren in JavaScript verwendet?

Der Operator spread (...) wird verwendet, um iterierbare Objekte (wie Arrays oder Strings) an Stellen zu "erweitern", an denen null oder mehr Argumente (beim Aufrufen von Funktionen) oder Elemente (beim Erstellen von Arrays) erwartet werden. Er wird auch verwendet, um Eigenschaften von Objekten in ein neues Objekt zu kombinieren.

// Verwendung von spread beim Funktionsaufruf
const numbers = [1, 2, 3];
console.log(...numbers); // 1 2 3

// Verwendung von spread zum Zusammenführen von Arrays
const arr1 = [1, 2];
const arr2 = [3, 4];
const combinedArr = [...arr1, ...arr2]; // [1, 2, 3, 4]

// Verwendung von spread zum Zusammenführen von Objekten
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }

Der Operator rest (...) wird in der Syntax von Funktionsparametern verwendet, um alle verbleibenden Argumente in einem Array zu sammeln. Dies ermöglicht es der Funktion, eine unbestimmte Anzahl von Argumenten zu erhalten. Er wird auch bei der Destrukturierung von Arrays oder Objekten verwendet, um die restlichen Elemente oder Eigenschaften zu sammeln.

// Verwendung von rest in Funktionsparametern
function sum(...args) {
  // args ist jetzt ein Array [1, 2, 3]
  return args.reduce((total, current) => total + current, 0);
}
console.log(sum(1, 2, 3)); // 6

// Verwendung von rest bei der Destrukturierung eines Arrays
const [first, second, ...restOfArray] = [1, 2, 3, 4, 5];
// first = 1, second = 2, restOfArray = [3, 4, 5]

// Verwendung von rest bei der Destrukturierung eines Objekts
const { a, b, ...restOfObject } = { a: 1, b: 2, c: 3, d: 4 };
// a = 1, b = 2, restOfObject = { c: 3, d: 4 }

Hauptunterschied:

• Spread "erweitert" Elemente oder Eigenschaften.
• Rest "sammelt" Elemente oder Eigenschaften in einem Array/Objekt.