Transformströmmar
Ändra data när den flödar genom en pipeline.
Transformströmmar är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är en TransformStream
En TransformStream ligger mellan en läsbar och en skrivbar sida. Block som skrivs in transformeras och skickas ut — ett steg i en pipeline som mappar, filtrerar eller omformar data under tiden.
Struktur
Den har två ändar: writable (dit data går in) och readable (där transformerad data kommer ut).
const ts = new TransformStream();
console.log(ts.writable, ts.readable);Metoden transform
Definiera beteendet med en funktion av typen transform(chunk, controller). Anropa controller.enqueue() för att skicka utdata.
const upper = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk.toUpperCase());
}
});En in, flera ut
En transformering kan skicka ut noll, ett eller flera block per indata — perfekt för att dela upp eller utöka data.
const splitter = new TransformStream({
transform(line, controller) {
for (const word of line.split(" ")) controller.enqueue(word);
}
});Filtrera med transformeringar
Lägg helt enkelt inte de block som ska tas bort i kön.
const onlyEven = new TransformStream({
transform(n, controller) {
if (n % 2 === 0) controller.enqueue(n);
}
});Metoden flush
flush(controller) körs en gång när indata tar slut — perfekt för att skicka ut kvarvarande buffrad data eller ett sista block.
const ts = new TransformStream({
transform(c, ctrl) { ctrl.enqueue(c); },
flush(ctrl) { ctrl.enqueue("[END]"); }
});Buffra över flera block
Behåll tillstånd i en closure för att sammanfoga ofullständiga block, till exempel för att bygga kompletta rader från godtyckliga bytegränser.
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); }
});Inbyggda transformströmmar
Plattformen tillhandahåller TextDecoderStream, TextEncoderStream och CompressionStream/DecompressionStream — färdiga transformeringar.
const gzip = new CompressionStream("gzip");
const compressed = inputStream.pipeThrough(gzip);Ansluta med pipeThrough
readable.pipeThrough(transform) kopplar en källa till en transformering och returnerar transformeringens läsbara utdata, redo för nästa steg.
const out = sourceStream
.pipeThrough(new TextDecoderStream())
.pipeThrough(upper);Asynkrona transformeringar
transform kan vara asynkron — använd await i den för att anropa API:er eller utföra asynkront arbete för varje block. Strömmen väntar på löftet.
new TransformStream({
async transform(chunk, ctrl) {
const result = await process(chunk);
ctrl.enqueue(result);
}
});Felpropagering
Om du kastar ett fel i transform försätts strömmen i feltillstånd. Efterföljande konsumenter ser felet och pipelinen stängs ned.
new TransformStream({
transform(chunk, ctrl) {
if (!valid(chunk)) throw new Error("bad chunk");
ctrl.enqueue(chunk);
}
});Snabbtest
Testa transformströmmar.
Sammanfattning: transformströmmar
Du byggde transformeringar med transform och flush, mappade, filtrerade och expanderade chunkar, buffrade över chunkgränser, använde inbyggda funktioner som CompressionStream och kopplade samman steg med pipeThrough. Nästa steg: backpressure och pipelining.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Transformströmmar” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Transformströmmar”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Transformströmmar”?
Ändra data när den flödar genom en pipeline. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Transformströmmar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Läsbara strömmar
- fetch-svar som strömmar
- Transformströmmar
- Mottryck och pipelining