Iterables und Iterators

1.1 Grundlegende Konzepte

Iterators und iterierbare Objekte (Iterables) in JavaScript sind grundlegende Konzepte, die es Objekten ermöglichen, durchlaufen zu werden. Diese Konzepte werden häufig im modernen JavaScript verwendet, insbesondere in Konstruktionen wie for...of-Schleifen, dem Spread-Operator, Destrukturierung und vielen anderen. In dieser Vorlesung werden wir uns ansehen, was Iterables und Iterators sind, wie sie funktionieren und wie man sie erstellt und verwendet.

Iterables (Iterierbare Objekte)

Iterierbare Objekte sind Objekte, die das Iterationsprotokoll implementieren. Sie müssen eine spezielle Methode mit dem Schlüssel [Symbol.iterator] haben, die ein Iterator-Objekt zurückgibt.

Iterators (Iteratoren)

Ein Iterator ist ein Objekt mit der Methode next(), die ein Objekt mit zwei Eigenschaften zurückgibt:

• value — der Wert des nächsten Elements in der Sequenz
• done — ein boolescher Wert, der angibt, ob die Sequenz zu Ende ist (true) oder nicht (false)

Schauen wir uns einige Anwendungsbeispiele an.

Eingebaute iterierbare Objekte

JavaScript hat mehrere eingebaute iterierbare Objekte, darunter Arrays, Strings, Set und Map Objekte.

Beispiel 1: Iteration über ein Array

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

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

      // Gibt aus: 1 2 3 4 5
    
  

Beispiel 2: Iteration über einen String

    
      const string = 'hello';

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

      // Gibt aus: h e l l o
    
  

1.2 Erstellen eigener Iterators

Du kannst deinen eigenen Iterator erstellen, indem du das Iterationsprotokoll implementierst — die Erstellung der Methode next().

Beispiel 1: Erstellen eines Iterators

    
      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 }
    
  

Erstellen von iterierbaren Objekten

Damit ein Objekt iterierbar wird, muss es die Methode [Symbol.iterator] implementieren. Ja, der Name ist etwas speziell. So erstellt man eines.

Beispiel 2: Erstellen eines iterierbaren Objekts

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

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

      // Gibt aus: 1 2 3
    
  

1.3 Eingebaute Methoden

Schauen wir uns die eingebauten Methoden und Operatoren zur Arbeit mit iterierbaren Objekten an.

Beispiel 1: Spread-Operator

Der Spread-Operator (...) kann verwendet werden, um iterierbare Objekte zu kopieren oder zu kombinieren.

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

      console.log(newArray); // Gibt aus: [1, 2, 3, 4, 5, 6]
    
  

Beispiel 2: Destrukturierung

Destrukturierung ermöglicht es, Werte aus iterierbaren Objekten herauszuziehen.

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

      console.log(first);  // Gibt aus: 1
      console.log(second); // Gibt aus: 2
      console.log(third);  // Gibt aus: 3
    
  

Beispiel 3: Methoden Array.from und Array.of

Die Methode Array.from() ermöglicht es, ein Array aus einem iterierbaren Objekt zu erstellen.

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

      console.log(array); // Gibt aus: [1, 2, 3, 4, 5]