30 Synchrone Iteration

30.1 Worum geht es bei synchroner Iteration?

Synchrone Iteration ist ein Protokoll (Schnittstellen plus Regeln für deren Verwendung), das zwei Gruppen von Entitäten in JavaScript verbindet.

• Datenquellen: Einerseits kommen Daten in allen Formen und Größen. In der Standardbibliothek von JavaScript gibt es die lineare Datenstruktur Array, die geordnete Sammlung Set (Elemente sind nach ihrer Hinzufügungszeit geordnet), das geordnete Wörterbuch Map (Einträge sind nach ihrer Hinzufügungszeit geordnet) und mehr. In Bibliotheken finden Sie baumförmige Datenstrukturen und mehr.

• Datenkonsumenten: Andererseits gibt es eine ganze Klasse von Konstrukten und Algorithmen, die nur sequentiell auf ihre Eingaben zugreifen müssen: ein Wert nach dem anderen, bis alle Werte besucht wurden. Beispiele hierfür sind die for-of-Schleife und das Sprengen in Funktionsaufrufe (über ...).

Das Iterationsprotokoll verbindet diese beiden Gruppen über die Schnittstelle Iterable: Datenquellen liefern ihre Inhalte sequentiell „durch sie“; Datenkonsumenten erhalten ihre Eingaben über sie.

Abb. 18 veranschaulicht, wie Iteration funktioniert: Datenkonsumenten verwenden die Schnittstelle Iterable; Datenquellen implementieren sie.

Sowohl Datenquellen als auch -konsumenten profitieren von dieser Regelung.

• Wenn Sie eine neue Datenstruktur entwickeln, müssen Sie nur Iterable implementieren, und eine Fülle von Werkzeugen kann sofort darauf angewendet werden.

• Wenn Sie Code schreiben, der Iteration verwendet, funktioniert dieser automatisch mit vielen Datenquellen.

30.2 Kernkonstrukte der Iteration: Iterables und Iteratoren

Zwei Rollen (beschrieben durch Schnittstellen) bilden den Kern der Iteration (Abb. 19).

• Ein Iterable ist ein Objekt, dessen Inhalt sequentiell durchlaufen werden kann.
• Ein Iterator ist der Zeiger, der für die Durchquerung verwendet wird.

Dies sind Typdefinitionen (in der Notation von TypeScript) für die Schnittstellen des Iterationsprotokolls.

interface Iterable<T> {
  [Symbol.iterator]() : Iterator<T>;
}

interface Iterator<T> {
  next() : IteratorResult<T>;
}

interface IteratorResult<T> {
  value: T;
  done: boolean;
}

Die Schnittstellen werden wie folgt verwendet:

• Sie fragen ein Iterable über die Methode mit dem Schlüssel Symbol.iterator nach einem Iterator.
• Der Iterator gibt die iterierten Werte über seine Methode .next() zurück.
• Die Werte werden nicht direkt zurückgegeben, sondern in Objekte mit zwei Eigenschaften verpackt:
  • .value ist der iterierte Wert.
  • .done gibt an, ob das Ende der Iteration erreicht wurde. Sie ist nach dem letzten iterierten Wert true und davor false.

30.3 Manuelles Iterieren

Dies ist ein Beispiel für die Verwendung des Iterationsprotokolls.

const iterable = ['a', 'b'];

// The iterable is a factory for iterators:
const iterator = iterable[Symbol.iterator]();

// Call .next() until .done is true:
assert.deepEqual(
  iterator.next(), { value: 'a', done: false });
assert.deepEqual(
  iterator.next(), { value: 'b', done: false });
assert.deepEqual(
  iterator.next(), { value: undefined, done: true });

30.3.1 Iterieren über ein Iterable mit while

Der folgende Code zeigt, wie eine while-Schleife verwendet wird, um über ein Iterable zu iterieren.

function logAll(iterable) {
  const iterator = iterable[Symbol.iterator]();
  while (true) {
    const {value, done} = iterator.next();
    if (done) break;
    console.log(value);
  }
}

logAll(['a', 'b']);
// Output:
// 'a'
// 'b'

30.4 Iteration in der Praxis

Wir haben gesehen, wie das Iterationsprotokoll manuell verwendet wird, und es ist relativ umständlich. Aber das Protokoll ist nicht dafür gedacht, direkt verwendet zu werden – es ist dafür gedacht, über höherstufige Sprachkonstrukte verwendet zu werden, die darauf aufbauen. Dieser Abschnitt zeigt, wie das aussieht.

30.4.1 Iterieren über Arrays

JavaScript-Arrays sind iterierbar. Das ermöglicht uns die Verwendung der for-of-Schleife.

const myArray = ['a', 'b', 'c'];

for (const x of myArray) {
  console.log(x);
}
// Output:
// 'a'
// 'b'
// 'c'

Die Destrukturierung über Array-Muster (später erklärt) verwendet ebenfalls Iteration im Hintergrund.

const [first, second] = myArray;
assert.equal(first, 'a');
assert.equal(second, 'b');

30.4.2 Iterieren über Sets

Die Set-Datenstruktur von JavaScript ist iterierbar. Das bedeutet, dass for-of funktioniert.

const mySet = new Set().add('a').add('b').add('c');

for (const x of mySet) {
  console.log(x);
}
// Output:
// 'a'
// 'b'
// 'c'

Ebenso wie die Array-Destrukturierung.

const [first, second] = mySet;
assert.equal(first, 'a');
assert.equal(second, 'b');

30.5 Kurzübersicht: Synchrone Iteration

30.5.1 Iterable Datenquellen

Die folgenden integrierten Datenquellen sind iterierbar:

• Arrays
• Strings
• Maps
• Sets
• (Browser: DOM-Datenstrukturen)

Um über die Eigenschaften von Objekten zu iterieren, benötigen Sie Hilfsmittel wie Object.keys() und Object.entries(). Dies ist notwendig, da Eigenschaften auf einer anderen Ebene existieren, die unabhängig von der Ebene der Datenstrukturen ist.

30.5.2 Synchron iterierende Sprachkonstrukte

Dieser Abschnitt listet Konstrukte auf, die synchrone Iteration verwenden.

30.5.2.1 Iterierende Sprachkonstrukte

• Destrukturierung über ein Array-Muster

  const [x,y] = iterable;

• Spreading (über ...) in Funktionsaufrufe und Array-Literale

  func(...iterable);
  const arr = [...iterable];

• Die for-of-Schleife

  for (const x of iterable) { /*···*/ }

• yield*:

  function* generatorFunction() {
    yield* iterable;
  }

30.5.2.2 Iterables in Datenstrukturen umwandeln

• Object.fromEntries():

  const obj = Object.fromEntries(iterableOverKeyValuePairs);

• Array.from():

  const arr = Array.from(iterable);

• new Map() und new WeakMap()

  const m  = new Map(iterableOverKeyValuePairs);
  const wm = new WeakMap(iterableOverKeyValuePairs);

• new Set() und new WeakSet()

  const s  = new Set(iterableOverElements);
  const ws = new WeakSet(iterableOverElements);

30.5.2.3 Sonstiges

• Promise-Kombinatorfunktionen: Promise.all() usw.

  const promise1 = Promise.all(iterableOverPromises);
  const promise2 = Promise.race(iterableOverPromises);
  const promise3 = Promise.any(iterableOverPromises);
  const promise4 = Promise.allSettled(iterableOverPromises);