Iterables i Iterators

1.1 Podstawowe pojęcia

Iteratory i iterowalne obiekty (iterables) w JavaScript to podstawowe koncepty, które pozwalają obiektom być przeglądanymi. Te koncepty są szeroko wykorzystywane we współczesnym JavaScript, szczególnie w konstrukcjach takich jak pętle for...of, operator rozprzestrzeniający (spread operator), destrukturyzacja i wiele innych. W tym wykładzie przyjrzymy się, czym są iterables i iterators, jak działają, jak je tworzyć i używać.

Iterables (Iterowalne obiekty)

Iterowalne obiekty to obiekty, które implementują protokół iteracji. Muszą mieć specjalną metodę z kluczem [Symbol.iterator], która zwraca obiekt-iterator.

Iterators (Iteratory)

Iterator to obiekt z metodą next(), która zwraca obiekt z dwoma właściwościami:

• value — wartość następnego elementu sekwencji
• done — wartość logiczna wskazująca, czy sekwencja się skończyła (true) czy nie (false)

Przyjrzymy się przykładom użycia.

Wbudowane iterowalne obiekty

JavaScript ma kilka wbudowanych iterowalnych obiektów, w tym tablice, ciągi, obiekty Set i Map.

Przykład 1: Iterowanie tablicy

    
      const array = [1, 2, 3, 4, 5];

      for (const item of array) {
        console.log(item);
      }

      // Wyświetli: 1 2 3 4 5
    
  

Przykład 2: Iterowanie ciągu

    
      const string = 'hello';

      for (const char of string) {
        console.log(char);
      }

      // Wyświetli: h e l l o
    
  

1.2 Tworzenie własnych iteratorów

Możesz stworzyć własny iterator, realizując protokół iteracji — tworzenie metody next().

Przykład 1: Tworzenie iteratora

    
      function createIterator(array) {
        let index = 0;

        return {
          next: function() {
            if (index < array.length) {
              return { value: array[index++], done: false };
            } else {
              return { done: true };
            }
          }
        };
      }

      const myIterator = createIterator([1, 2, 3]);

      console.log(myIterator.next()); // { value: 1, done: false }
      console.log(myIterator.next()); // { value: 2, done: false }
      console.log(myIterator.next()); // { value: 3, done: false }
      console.log(myIterator.next()); // { done: true }
    
  

Tworzenie iterowalnych obiektów

Żeby obiekt stał się iterowalny, musi zrealizować metodę [Symbol.iterator]. Tak, to taka sprytna nazwa. Oto jak ją stworzyć.

Przykład 2: Tworzenie iterowalnego obiektu

    
      const myIterable = {
        *[Symbol.iterator]() {
          yield 1;
          yield 2;
          yield 3;
        }
      };

      for (const value of myIterable) {
        console.log(value);
      }

      // Wyświetli: 1 2 3
    
  

1.3 Wbudowane metody

Przyjrzymy się wbudowanym metodom i operatorom do pracy z iterowalnymi obiektami.

Przykład 1: Operator spread

Operator spread (...) może być używany do kopiowania lub łączenia iterowalnych obiektów.

    
      const array = [1, 2, 3];
      const newArray = [...array, 4, 5, 6];

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

Przykład 2: Destrukturyzacja

Destrukturyzacja pozwala na wyciąganie wartości z iterowalnych obiektów.

    
      const [first, second, third] = [1, 2, 3];

      console.log(first);  // Wyświetli: 1
      console.log(second); // Wyświetli: 2
      console.log(third);  // Wyświetli: 3
    
  

Przykład 3: Metody Array.from i Array.of

Metoda Array.from() pozwala na stworzenie tablicy z iterowalnego obiektu.

    
      const set = new Set([1, 2, 3, 4, 5]);
      const array = Array.from(set);

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

1

Zadanie

Frontend SELF PL, poziom 45, lekcja 0

Niedostępne

Iterator liczb

Iterator liczb

Otwórz

1

Zadanie

Frontend SELF PL, poziom 45, lekcja 0

Niedostępne

Iterator Fibonacciego

Iterator Fibonacciego

Otwórz