JavaScript Academy · Lezione

Stream di trasformazione

Modifichi i dati mentre attraversano una pipeline.

Stream di trasformazione è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Che cos'è un TransformStream?

Un TransformStream si trova tra un lato leggibile e uno scrivibile. I blocchi scritti in ingresso vengono trasformati ed emessi in uscita — uno stadio della pipeline che mappa, filtra o ristruttura i dati al volo.

Anatomia

Ha due estremità: writable (dove entrano i dati) e readable (da dove escono i dati trasformati).

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

Il metodo transform

Definisca il comportamento con una funzione transform(chunk, controller). Chiami controller.enqueue() per emettere l'output.

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

Un ingresso, molte uscite

Una trasformazione può emettere zero, uno o diversi blocchi per ogni ingresso: è ideale per suddividere o espandere i dati.

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

Filtrare con le trasformazioni

È sufficiente non accodare i blocchi che desidera eliminare.

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

Il metodo flush

flush(controller) viene eseguito una volta quando termina l'input — è ideale per emettere gli elementi rimanenti nel buffer o un blocco finale.

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

Memorizzare temporaneamente i dati tra i blocchi

Mantenga lo stato nella closure per unire blocchi parziali, ad esempio per assemblare righe complete a partire da confini arbitrari tra i byte.

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); }
});

Stream di trasformazione integrati

La piattaforma fornisce TextDecoderStream, TextEncoderStream e CompressionStream/DecompressionStream: trasformazioni già pronte all'uso.

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

Collegare con pipeThrough

readable.pipeThrough(transform) collega una sorgente a una trasformazione e restituisce l'output leggibile della trasformazione, pronto per lo stadio successivo.

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

Trasformazioni asincrone

transform può essere asincrona: utilizzi await al suo interno per chiamare API o eseguire operazioni asincrone su ogni blocco. Lo stream attende la promise.

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

Propagazione degli errori

Un'eccezione all'interno di transform manda in errore lo stream; i consumer a valle ricevono l'errore e la pipeline viene arrestata.

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

Verifica rapida

Verifichi i transform stream.

Riepilogo: transform stream

Ha creato trasformazioni con transform e flush, ha mappato, filtrato ed espanso i chunk, ha gestito il buffering oltre i confini dei chunk, ha usato elementi integrati come CompressionStream e ha collegato gli stadi con pipeThrough. Prossimo argomento: backpressure e piping.

Domande Frequenti

La lezione «Stream di trasformazione» è gratuita?

Sì — il testo completo di «Stream di trasformazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Stream di trasformazione»?

Modifichi i dati mentre attraversano una pipeline. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Stream di trasformazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a JavaScript Academy