Demistyfikacja protokołu iteratora JavaScript i niestandardowych iteratorów

Protokół iteratora w JavaScript zapewnia standardowy sposób przechodzenia przez struktury danych. Zrozumienie tego protokołu pozwala programistom na efektywną pracę z wbudowanymi obiektami iterowalnymi, takimi jak tablice i ciągi znaków, oraz na tworzenie własnych, niestandardowych obiektów iterowalnych, dostosowanych do konkretnych struktur danych i wymagań aplikacji. Ten przewodnik zawiera kompleksowe omówienie protokołu iteratora i sposobu implementacji niestandardowych iteratorów.

Czym jest protokół iteratora?

Protokół iteratora definiuje, w jaki sposób obiekt może być iterowany, czyli jak jego elementy mogą być dostępne sekwencyjnie. Składa się on z dwóch części: protokołu Iterable (iterowalnego) i protokołu Iterator.

Protokół Iterable (Iterowalny)

Obiekt jest uważany za iterowalny (Iterable), jeśli posiada metodę z kluczem Symbol.iterator. Metoda ta musi zwracać obiekt zgodny z protokołem Iterator.

W istocie, obiekt iterowalny wie, jak stworzyć dla siebie iterator.

Protokół Iterator

Protokół Iterator definiuje, jak pobierać wartości z sekwencji. Obiekt jest uważany za iterator, jeśli posiada metodę next(), która zwraca obiekt z dwiema właściwościami:

value: Następna wartość w sekwencji.
done: Wartość logiczna (boolean) wskazująca, czy iterator dotarł do końca sekwencji. Jeśli done ma wartość true, właściwość value może zostać pominięta.

Metoda next() jest siłą napędową protokołu iteratora. Każde wywołanie next() przesuwa iterator i zwraca następną wartość w sekwencji. Gdy wszystkie wartości zostaną zwrócone, next() zwraca obiekt z właściwością done ustawioną na true.

Wbudowane obiekty iterowalne

JavaScript dostarcza kilka wbudowanych struktur danych, które są z natury iterowalne. Należą do nich:

Tablice (Arrays)
Ciągi znaków (Strings)
Mapy (Maps)
Zbiory (Sets)
Obiekt arguments funkcji
Tablice typowane (TypedArrays)

Te obiekty iterowalne mogą być bezpośrednio używane z pętlą for...of, składnią spread (...) i innymi konstrukcjami, które opierają się na protokole iteratora.

Przykład z tablicami:


const myArray = ["apple", "banana", "cherry"];

for (const item of myArray) {
  console.log(item); // Wynik: apple, banana, cherry
}

Przykład z ciągami znaków:


const myString = "Hello";

for (const char of myString) {
  console.log(char); // Wynik: H, e, l, l, o
}

Pętla `for...of`

Pętla for...of to potężna konstrukcja do iterowania po obiektach iterowalnych. Automatycznie obsługuje złożoność protokołu iteratora, ułatwiając dostęp do wartości w sekwencji.

Składnia pętli for...of wygląda następująco:


for (const element of iterable) {
  // Kod do wykonania dla każdego elementu
}

Pętla for...of pobiera iterator z obiektu iterowalnego (używając Symbol.iterator) i wielokrotnie wywołuje metodę next() iteratora, aż done stanie się true. W każdej iteracji zmienna element otrzymuje wartość właściwości value zwróconej przez next().

Tworzenie niestandardowych iteratorów

Chociaż JavaScript dostarcza wbudowane obiekty iterowalne, prawdziwa siła protokołu iteratora leży w możliwości definiowania niestandardowych iteratorów dla własnych struktur danych. Pozwala to kontrolować sposób, w jaki dane są przeglądane i dostępne.

Oto jak stworzyć niestandardowy iterator:

Zdefiniuj klasę lub obiekt, który reprezentuje Twoją niestandardową strukturę danych.
Zaimplementuj metodę Symbol.iterator w swojej klasie lub obiekcie. Metoda ta powinna zwracać obiekt iteratora.
Obiekt iteratora musi mieć metodę next(), która zwraca obiekt z właściwościami value i done.

Przykład: Tworzenie iteratora dla prostego zakresu

Stwórzmy klasę o nazwie Range, która reprezentuje zakres liczb. Zaimplementujemy protokół iteratora, aby umożliwić iterowanie po liczbach w tym zakresie.


class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  [Symbol.iterator]() {
    let currentValue = this.start;
    const that = this; // Przechwycenie 'this' do użycia wewnątrz obiektu iteratora

    return {
      next() {
        if (currentValue <= that.end) {
          return {
            value: currentValue++,
            done: false,
          };
        } else {
          return {
            value: undefined,
            done: true,
          };
        }
      },
    };
  }
}

const myRange = new Range(1, 5);

for (const number of myRange) {
  console.log(number); // Wynik: 1, 2, 3, 4, 5
}

Wyjaśnienie:

Klasa Range przyjmuje w konstruktorze wartości start i end.
Metoda Symbol.iterator zwraca obiekt iteratora. Ten obiekt iteratora ma swój własny stan (currentValue) i metodę next().
Metoda next() sprawdza, czy currentValue mieści się w zakresie. Jeśli tak, zwraca obiekt z bieżącą wartością i done ustawionym na false. Inkrementuje również currentValue na potrzeby następnej iteracji.
Gdy currentValue przekroczy wartość end, metoda next() zwraca obiekt z done ustawionym na true.
Zwróć uwagę na użycie that = this. Ponieważ metoda `next()` jest wywoływana w innym zakresie (przez pętlę `for...of`), `this` wewnątrz `next()` nie odnosiłoby się do instancji `Range`. Aby rozwiązać ten problem, przechwytujemy wartość `this` (instancję `Range`) w zmiennej `that` poza zakresem `next()`, a następnie używamy `that` wewnątrz `next()`.

Przykład: Tworzenie iteratora dla listy połączonej

Rozważmy inny przykład: tworzenie iteratora dla struktury danych listy połączonej. Lista połączona to sekwencja węzłów, gdzie każdy węzeł zawiera wartość i odwołanie (wskaźnik) do następnego węzła na liście. Ostatni węzeł na liście ma odwołanie do null (lub undefined).


class LinkedListNode {
    constructor(value, next = null) {
        this.value = value;
        this.next = next;
    }
}

class LinkedList {
    constructor() {
        this.head = null;
    }

    append(value) {
        const newNode = new LinkedListNode(value);
        if (!this.head) {
            this.head = newNode;
            return;
        }

        let current = this.head;
        while (current.next) {
            current = current.next;
        }
        current.next = newNode;
    }

    [Symbol.iterator]() {
        let current = this.head;

        return {
            next() {
                if (current) {
                    const value = current.value;
                    current = current.next;
                    return {
                        value: value,
                        done: false
                    };
                } else {
                    return {
                        value: undefined,
                        done: true
                    };
                }
            }
        };
    }
}

// Przykład użycia:
const myList = new LinkedList();
myList.append("Londyn");
myList.append("Paryż");
myList.append("Tokio");

for (const city of myList) {
    console.log(city); // Wynik: Londyn, Paryż, Tokio
}

Wyjaśnienie:

Klasa LinkedListNode reprezentuje pojedynczy węzeł na liście połączonej, przechowując value i odwołanie (next) do następnego węzła.
Klasa LinkedList reprezentuje samą listę połączoną. Zawiera właściwość head, która wskazuje na pierwszy węzeł na liście. Metoda append() dodaje nowe węzły na koniec listy.
Metoda Symbol.iterator tworzy i zwraca obiekt iteratora. Ten iterator śledzi aktualnie odwiedzany węzeł (current).
Metoda next() sprawdza, czy istnieje bieżący węzeł (current nie jest nullem). Jeśli tak, pobiera wartość z bieżącego węzła, przesuwa wskaźnik current do następnego węzła i zwraca obiekt z wartością oraz done: false.
Gdy current staje się nullem (co oznacza, że dotarliśmy do końca listy), metoda next() zwraca obiekt z done: true.

Funkcje generatorów

Funkcje generatorów zapewniają bardziej zwięzły i elegancki sposób tworzenia iteratorów. Używają słowa kluczowego yield do produkowania wartości na żądanie.

Funkcję generatora definiuje się za pomocą składni function*.

Przykład: Tworzenie iteratora za pomocą funkcji generatora

Napiszmy ponownie iterator Range, używając funkcji generatora:


class Range {
  constructor(start, end) {
    this.start = start;
    this.end = end;
  }

  *[Symbol.iterator]() {
    for (let i = this.start; i <= this.end; i++) {
      yield i;
    }
  }
}

const myRange = new Range(1, 5);

for (const number of myRange) {
  console.log(number); // Wynik: 1, 2, 3, 4, 5
}

Wyjaśnienie:

Metoda Symbol.iterator jest teraz funkcją generatora (zwróć uwagę na *).
Wewnątrz funkcji generatora używamy pętli for do iterowania po zakresie liczb.
Słowo kluczowe yield wstrzymuje wykonanie funkcji generatora i zwraca bieżącą wartość (i). Przy następnym wywołaniu metody next() iteratora, wykonanie jest wznawiane od miejsca, w którym zostało przerwane (po instrukcji yield).
Gdy pętla się zakończy, funkcja generatora niejawnie zwraca { value: undefined, done: true }, sygnalizując koniec iteracji.

Funkcje generatorów upraszczają tworzenie iteratorów, automatycznie obsługując metodę next() i flagę done.

Przykład: Generator ciągu Fibonacciego

Innym świetnym przykładem użycia funkcji generatorów jest generowanie ciągu Fibonacciego:


function* fibonacciSequence() {
  let a = 0;
  let b = 1;

  while (true) {
    yield a;
    [a, b] = [b, a + b]; // Przypisanie destrukturyzujące do jednoczesnej aktualizacji
  }
}

const fibonacci = fibonacciSequence();

for (let i = 0; i < 10; i++) {
  console.log(fibonacci.next().value); // Wynik: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34
}

Wyjaśnienie:

Funkcja fibonacciSequence jest funkcją generatora.
Inicjalizuje dwie zmienne, a i b, do dwóch pierwszych liczb w ciągu Fibonacciego (0 i 1).
Pętla while (true) tworzy nieskończoną sekwencję.
Instrukcja yield a produkuje bieżącą wartość a.
Instrukcja [a, b] = [b, a + b] jednocześnie aktualizuje a i b do dwóch następnych liczb w sekwencji za pomocą przypisania destrukturyzującego.
Wyrażenie fibonacci.next().value pobiera następną wartość z generatora. Ponieważ generator jest nieskończony, musisz kontrolować, ile wartości z niego pobierasz. W tym przykładzie pobieramy pierwsze 10 wartości.

Korzyści z używania protokołu iteratora

Standaryzacja: Protokół iteratora zapewnia spójny sposób iterowania po różnych strukturach danych.
Elastyczność: Możesz definiować niestandardowe iteratory dostosowane do swoich specyficznych potrzeb.
Czytelność: Pętla for...of sprawia, że kod iteracyjny jest bardziej czytelny i zwięzły.
Wydajność: Iteratory mogą być "leniwe", co oznacza, że generują wartości tylko wtedy, gdy są potrzebne, co może poprawić wydajność dla dużych zbiorów danych. Na przykład, powyższy generator ciągu Fibonacciego oblicza następną wartość tylko wtedy, gdy wywoływana jest metoda `next()`.
Kompatybilność: Iteratory bezproblemowo współpracują z innymi funkcjami JavaScript, takimi jak składnia spread i destrukturyzacja.

Zaawansowane techniki iteratorów

Łączenie iteratorów

Możesz połączyć wiele iteratorów w jeden. Jest to przydatne, gdy musisz przetwarzać dane z wielu źródeł w ujednolicony sposób.


function* combineIterators(...iterables) {
  for (const iterable of iterables) {
    for (const item of iterable) {
      yield item;
    }
  }
}

const array1 = [1, 2, 3];
const array2 = ["a", "b", "c"];
const string1 = "XYZ";

const combined = combineIterators(array1, array2, string1);

for (const value of combined) {
  console.log(value); // Wynik: 1, 2, 3, a, b, c, X, Y, Z
}

W tym przykładzie funkcja `combineIterators` przyjmuje dowolną liczbę obiektów iterowalnych jako argumenty. Iteruje po każdym z nich i zwraca (yield) każdy element. Rezultatem jest pojedynczy iterator, który produkuje wszystkie wartości ze wszystkich wejściowych obiektów iterowalnych.

Filtrowanie i transformowanie iteratorów

Możesz również tworzyć iteratory, które filtrują lub transformują wartości produkowane przez inny iterator. Pozwala to na przetwarzanie danych w potoku, stosując różne operacje do każdej wartości w miarę jej generowania.


function* filterIterator(iterable, predicate) {
  for (const item of iterable) {
    if (predicate(item)) {
      yield item;
    }
  }
}

function* mapIterator(iterable, transform) {
  for (const item of iterable) {
    yield transform(item);
    }
}

const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = filterIterator(numbers, (x) => x % 2 === 0);
const squaredEvenNumbers = mapIterator(evenNumbers, (x) => x * x);

for (const value of squaredEvenNumbers) {
    console.log(value); // Wynik: 4, 16, 36
}

W tym przypadku `filterIterator` przyjmuje obiekt iterowalny i funkcję predykatu. Zwraca (yield) tylko te elementy, dla których predykat zwraca `true`. `mapIterator` przyjmuje obiekt iterowalny i funkcję transformującą. Zwraca (yield) wynik zastosowania funkcji transformującej do każdego elementu.

Zastosowania w świecie rzeczywistym

Protokół iteratora jest szeroko stosowany w bibliotekach i frameworkach JavaScript i jest cenny w różnych zastosowaniach w świecie rzeczywistym, zwłaszcza przy pracy z dużymi zbiorami danych lub operacjami asynchronicznymi.

Przetwarzanie danych: Iteratory są przydatne do wydajnego przetwarzania dużych zbiorów danych, ponieważ pozwalają pracować z danymi w fragmentach bez ładowania całego zbioru do pamięci. Wyobraź sobie parsowanie dużego pliku CSV zawierającego dane klientów. Iterator może pozwolić na przetwarzanie każdego wiersza bez ładowania całego pliku do pamięci naraz.
Operacje asynchroniczne: Iteratory mogą być używane do obsługi operacji asynchronicznych, takich jak pobieranie danych z API. Możesz użyć funkcji generatorów, aby wstrzymać wykonanie do czasu, gdy dane będą dostępne, a następnie wznowić je z następną wartością.
Niestandardowe struktury danych: Iteratory są niezbędne do tworzenia niestandardowych struktur danych o specyficznych wymaganiach dotyczących przechodzenia. Rozważ strukturę danych drzewa. Możesz zaimplementować niestandardowy iterator, aby przejść przez drzewo w określonej kolejności (np. w głąb lub wszerz).
Tworzenie gier: W tworzeniu gier iteratory mogą być używane do zarządzania obiektami gry, efektami cząsteczkowymi i innymi dynamicznymi elementami.
Biblioteki interfejsu użytkownika: Wiele bibliotek UI wykorzystuje iteratory do wydajnego aktualizowania i renderowania komponentów w oparciu o zmiany w danych bazowych.

Dobre praktyki

Poprawnie implementuj Symbol.iterator: Upewnij się, że Twoja metoda Symbol.iterator zwraca obiekt iteratora zgodny z protokołem iteratora.
Dokładnie obsługuj flagę done: Flaga done jest kluczowa do sygnalizowania końca iteracji. Upewnij się, że ustawiasz ją poprawnie w swojej metodzie next().
Rozważ użycie funkcji generatorów: Funkcje generatorów zapewniają bardziej zwięzły i czytelny sposób tworzenia iteratorów.
Unikaj efektów ubocznych w next(): Metoda next() powinna skupiać się głównie na pobieraniu następnej wartości i aktualizowaniu stanu iteratora. Unikaj wykonywania złożonych operacji lub efektów ubocznych wewnątrz next().
Dokładnie testuj swoje iteratory: Testuj swoje niestandardowe iteratory z różnymi zestawami danych i scenariuszami, aby upewnić się, że działają poprawnie.

Podsumowanie

Protokół iteratora w JavaScript zapewnia potężny i elastyczny sposób przechodzenia przez struktury danych. Rozumiejąc protokoły Iterable i Iterator oraz wykorzystując funkcje generatorów, możesz tworzyć niestandardowe iteratory dostosowane do swoich specyficznych potrzeb. Pozwala to na efektywną pracę z danymi, poprawę czytelności kodu i zwiększenie wydajności aplikacji. Opanowanie iteratorów otwiera drogę do głębszego zrozumienia możliwości JavaScript i pozwala pisać bardziej elegancki i wydajny kod.

Demistyfikacja protokołu iteratora JavaScript i niestandardowych iteratorów

Czym jest protokół iteratora?

Protokół Iterable (Iterowalny)

Protokół Iterator

Wbudowane obiekty iterowalne

Pętla for...of

Tworzenie niestandardowych iteratorów

Przykład: Tworzenie iteratora dla prostego zakresu

Przykład: Tworzenie iteratora dla listy połączonej

Funkcje generatorów

Przykład: Tworzenie iteratora za pomocą funkcji generatora

Przykład: Generator ciągu Fibonacciego

Korzyści z używania protokołu iteratora

Zaawansowane techniki iteratorów

Łączenie iteratorów

Filtrowanie i transformowanie iteratorów

Zastosowania w świecie rzeczywistym

Dobre praktyki

Podsumowanie

Pętla `for...of`