Operacje rest i spread

9.1 Spread (operator rozpakowywania)

Operacje rest i spread w JavaScript oferują szerokie możliwości pracy z tablicami, obiektami i funkcjami. Te operacje pomagają uprościć kod, czyniąc go bardziej wyrazistym i elastycznym. Na tym wykładzie szczegółowo omówimy podstawowe pojęcia rest i spread, a także ich przykłady użycia.

Operator spread (...) pozwala "rozpakowywać" tablice i obiekty w miejscach, gdzie oczekiwane są zero lub więcej elementów. To może być przydatne przy kopiowaniu, łączeniu tablic lub obiektów, a także przy przekazywaniu argumentów do funkcji.

Przykład 1: Kopiowanie tablicy

W tym przykładzie copiedArray jest kopią originalArray.

Tutaj operator … rozpakowuje tablicę jako listę zmiennych, a operator [] pakuje zestaw zmiennych w nową tablicę:

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

      console.log(copiedArray); // Wyświetli: [1, 2, 3]
    
  

Przykład 2: Łączenie tablic

W tym przykładzie dwie tablice array1 i array2 są łączone w jedną tablicę combinedArray.

Tutaj operator … rozpakowuje obie tablice jako listę zmiennych, a operator [] pakuje zestaw zmiennych w nową tablicę:

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

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

Przykład 3: Przekazywanie argumentów do funkcji

W tym przykładzie tablica numbers jest rozpakowywana jako trzy argumenty dla funkcji sum():

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

      const numbers = [1, 2, 3];

      console.log(sum(...numbers)); // Wyświetli: 6
    
  

Przykład 4: Kopiowanie obiektu

W tym przykładzie copiedObject jest kopią originalObject:

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

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

Przykład 5: Łączenie obiektów

W tym przykładzie dwa obiekty obj1 i obj2 są łączone w jeden obiekt combinedObject:

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

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

9.2 Rest (operator parametry końcowych)

Operator rest (...) pozwala zbierać wiele elementów w tablicę. To jest szczególnie przydatne przy pracy z funkcjami, które przyjmują zmienną ilość argumentów, a także przy destrukturyzacji tablic i obiektów.

Przykład 1: Parametry końcowe w funkcjach

W tym przykładzie funkcja sum() przyjmuje dowolną liczbę argumentów i sumuje je:

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

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

Przykład 2: Destrukturyzacja tablic z rest

W tym przykładzie pierwsze dwa elementy tablicy są przypisywane zmiennym first i second, a pozostałe elementy zbierane są w tablicę rest:

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

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

Przykład 3: Destrukturyzacja obiektów z rest

W tym przykładzie właściwości a i b są wyciągane do osobnych zmiennych, a pozostałe właściwości są zbierane w obiekt rest:

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

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

9.3 Zastosowanie rest i spread w praktycznych zadaniach

Przykład 1: Łączenie tablic z warunkiem

W tym przykładzie ustawienia użytkownika userSettings nadpisują wartości domyślne defaultSettings:

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

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

Przykład 2: Podział tablicy na części

W tym przykładzie tablica numbers jest podzielona na dwie części po wyjęciu pierwszych dwóch elementów:

    
      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); // Wyświetli: [3, 4, 5, 6]
      console.log(secondHalf); // Wyświetli: [7, 8, 9, 10]