JavaScript Academy · Lektion

Transform-Streams

Ändern Sie Daten, während sie durch eine Pipeline fließen.

Transform-Streams ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein TransformStream?

Ein TransformStream befindet sich zwischen einer lesbaren und einer beschreibbaren Seite. Hineingeschriebene Datenblöcke werden umgewandelt und ausgegeben – eine Pipeline-Stufe, die Daten direkt beim Durchlaufen abbildet, filtert oder umformt.

Aufbau

Er hat zwei Enden: writable (hier werden Daten hineingeschrieben) und readable (hier kommen umgewandelte Daten heraus).

const ts = new TransformStream();
console.log(ts.writable, ts.readable);

Die transform-Methode

Definieren Sie das Verhalten mit einer Funktion transform(chunk, controller). Rufen Sie controller.enqueue() auf, um eine Ausgabe zu erzeugen.

const upper = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(chunk.toUpperCase());
  }
});

Eine Eingabe, viele Ausgaben

Eine Transformation kann pro Eingabe null, einen oder mehrere Datenblöcke ausgeben – ideal zum Aufteilen oder Erweitern von Daten.

const splitter = new TransformStream({
  transform(line, controller) {
    for (const word of line.split(" ")) controller.enqueue(word);
  }
});

Mit Transformationsstreams filtern

Reihen Sie Datenblöcke, die Sie verwerfen möchten, einfach nicht in die Warteschlange ein.

const onlyEven = new TransformStream({
  transform(n, controller) {
    if (n % 2 === 0) controller.enqueue(n);
  }
});

Die flush-Methode

flush(controller) wird einmal ausgeführt, wenn die Eingabe endet – ideal, um gepufferte Restdaten oder einen letzten Datenblock auszugeben.

const ts = new TransformStream({
  transform(c, ctrl) { ctrl.enqueue(c); },
  flush(ctrl) { ctrl.enqueue("[END]"); }
});

Über Datenblöcke hinweg puffern

Speichern Sie den Zustand in der Closure, um unvollständige Datenblöcke zusammenzufügen, etwa beim Zusammensetzen vollständiger Zeilen aus beliebigen Byte-Grenzen.

let buffer = "";
new TransformStream({
  transform(chunk, ctrl) {
    buffer += chunk;
    const parts = buffer.split("\n");
    buffer = parts.pop();
    for (const line of parts) ctrl.enqueue(line);
  },
  flush(ctrl) { if (buffer) ctrl.enqueue(buffer); }
});

Integrierte Transform-Streams

Die Plattform stellt TextDecoderStream, TextEncoderStream und CompressionStream/DecompressionStream als fertige Transformationen bereit.

const gzip = new CompressionStream("gzip");
const compressed = inputStream.pipeThrough(gzip);

Mit pipeThrough verbinden

readable.pipeThrough(transform) verbindet eine Quelle mit einer Transformation und gibt deren lesbare Ausgabe zurück, die für die nächste Stufe bereitsteht.

const out = sourceStream
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(upper);

Asynchrone Transformationen

transform kann asynchron sein. Verwenden Sie darin await, um APIs aufzurufen oder pro Datenblock asynchrone Aufgaben auszuführen. Der Stream wartet auf das Promise.

new TransformStream({
  async transform(chunk, ctrl) {
    const result = await process(chunk);
    ctrl.enqueue(result);
  }
});

Fehlerweitergabe

Wenn innerhalb von transform ein Fehler ausgelöst wird, tritt im Stream ein Fehler auf. Nachgelagerte Verbraucher sehen den Fehler, und die Pipeline wird abgebaut.

new TransformStream({
  transform(chunk, ctrl) {
    if (!valid(chunk)) throw new Error("bad chunk");
    ctrl.enqueue(chunk);
  }
});

Schnelltest

Testen Sie Transform-Streams.

Zusammenfassung: Transform-Streams

Sie haben mit transform und flush Transformationen erstellt, Chunks abgebildet, gefiltert und erweitert, Daten über Chunk-Grenzen hinweg gepuffert, integrierte Funktionen wie CompressionStream verwendet und mit pipeThrough mehrere Stufen verbunden. Als Nächstes geht es um Backpressure und das Weiterleiten von Streams.

Häufig gestellte Fragen

Ist die Lektion „Transform-Streams“ kostenlos?

Ja — der vollständige Text von „Transform-Streams“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Transform-Streams“?

Ändern Sie Daten, während sie durch eine Pipeline fließen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Transform-Streams“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy