Rest- und Spread-Operationen

9.1 Spread (Entpackungsoperator)

Die rest und spread Operationen in JavaScript bieten großartige Möglichkeiten für das Arbeiten mit Arrays, Objekten und Funktionen. Diese Operationen helfen dabei, den Code zu vereinfachen und ihn ausdrucksstärker und flexibler zu gestalten. In dieser Vorlesung werden wir die grundlegenden Konzepte von rest und spread sowie Anwendungsbeispiele ausführlich besprechen.

Der spread (...) Operator ermöglicht das „Entpacken“ von Arrays und Objekten an Stellen, an denen null oder mehr Elemente erwartet werden. Dies kann nützlich sein beim Kopieren, Kombinieren von Arrays oder Objekten sowie beim Übergeben von Argumenten an Funktionen.

Beispiel 1: Kopieren von Arrays

In diesem Beispiel ist copiedArray eine Kopie von originalArray.

Hier entpackt der … Operator das Array in eine Liste von Variablen, während der Operator [] das Variablenset in ein neues Array verpackt:

    
      const originalArray = [1, 2, 3];
      const copiedArray = [...originalArray];

      console.log(copiedArray); // Ausgabe: [1, 2, 3]
    
  

Beispiel 2: Kombinieren von Arrays

In diesem Beispiel werden zwei Arrays array1 und array2 zu einem Array combinedArray kombiniert.

Hier entpackt der … Operator beide Arrays in eine Liste von Variablen, und der Operator [] verpackt das Variablenset in ein neues Array:

    
      const array1 = [1, 2, 3];
      const array2 = [4, 5, 6];
      const combinedArray = [...array1, ...array2];

      console.log(combinedArray); // Ausgabe: [1, 2, 3, 4, 5, 6]
    
  

Beispiel 3: Übergeben von Argumenten an eine Funktion

In diesem Beispiel wird das Array numbers in drei Argumente für die Funktion sum() entpackt:

    
      function sum(a, b, c) {
        return a + b + c;
      }

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Ausgabe: 6
    
  

Beispiel 4: Kopieren von Objekten

In diesem Beispiel ist copiedObject eine Kopie von originalObject:

    
      const originalObject = { a: 1, b: 2 };
      const copiedObject = { ...originalObject };

      console.log(copiedObject); // Ausgabe: { a: 1, b: 2 }
    
  

Beispiel 5: Kombinieren von Objekten

In diesem Beispiel werden zwei Objekte obj1 und obj2 zu einem Objekt combinedObject kombiniert:

    
      const obj1 = { a: 1, b: 2 };
      const obj2 = { c: 3, d: 4 };
      const combinedObject = { ...obj1, ...obj2 };

      console.log(combinedObject); // Ausgabe: { a: 1, b: 2, c: 3, d: 4 }
    
  

9.2 Rest (Operator für Restparameter)

Der rest (...) Operator ermöglicht das Sammeln mehrerer Elemente in ein Array. Dies ist besonders nützlich beim Arbeiten mit Funktionen, die eine variable Anzahl von Argumenten annehmen, sowie bei der Destrukturierung von Arrays und Objekten.

Beispiel 1: Restparameter in Funktionen

In diesem Beispiel nimmt die Funktion sum() eine beliebige Anzahl von Argumenten an und summiert diese:

    
      function sum(...numbers) {
        return numbers.reduce((acc, num) => acc + num, 0);
      }

      console.log(sum(1, 2, 3)); // Ausgabe: 6
      console.log(sum(4, 5, 6, 7)); // Ausgabe: 22
    
  

Beispiel 2: Destrukturierung von Arrays mit rest

In diesem Beispiel werden die ersten beiden Elemente des Arrays den Variablen first und second zugewiesen, während die restlichen Elemente in ein Array rest gesammelt werden:

    
      const [first, second, ...rest] = [1, 2, 3, 4, 5];

      console.log(first);  // Ausgabe: 1
      console.log(second); // Ausgabe: 2
      console.log(rest);   // Ausgabe: [3, 4, 5]
    
  

Beispiel 3: Destrukturierung von Objekten mit rest

In diesem Beispiel werden die Eigenschaften a und b in separate Variablen extrahiert, während die restlichen Eigenschaften in einem Objekt rest gesammelt werden:

    
      const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };

      console.log(a);  // Ausgabe: 1
      console.log(b);  // Ausgabe: 2
      console.log(rest); // Ausgabe: { c: 3, d: 4 }
    
  

9.3 Anwendung von rest und spread in realen Aufgaben

Beispiel 1: Kombinieren von Arrays mit Bedingung

In diesem Beispiel überschreiben die Benutzereinstellungen userSettings die Standardwerte defaultSettings:

    
      const defaultSettings = { theme: 'dark', showNotifications: true };
      const userSettings = { showNotifications: false, fontSize: 14 };
      const settings = { ...defaultSettings, ...userSettings };

      console.log(settings); // Ausgabe: { theme: 'dark', showNotifications: false, fontSize: 14 }
    
  

Beispiel 2: Aufteilen eines Arrays in Teile

In diesem Beispiel wird das Array numbers in zwei Teile aufgeteilt, nachdem die ersten beiden Elemente extrahiert wurden:

    
      const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [first, second, ...rest] = numbers;
      const firstHalf = rest.slice(0, Math.floor(rest.length / 2));
      const secondHalf = rest.slice(Math.floor(rest.length / 2));


      console.log(firstHalf); // Ausgabe: [3, 4, 5, 6]
      console.log(secondHalf); // Ausgabe: [7, 8, 9, 10]