JavaScript Academy · Leçon

Flux de transformation

Modifiez les données lorsqu’elles transitent par un pipeline.

Flux de transformation est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce qu’un TransformStream ?

Un TransformStream se place entre un côté lisible et un côté inscriptible. Les blocs qui y sont écrits sont transformés puis émis — c’est une étape de traitement qui associe, filtre ou remodèle les données à la volée.

Structure

Il possède deux extrémités : writable (l’endroit où les données entrent) et readable (l’endroit où les données transformées sortent).

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

La méthode de transformation

Définissez le comportement avec une fonction transform(chunk, controller). Appelez controller.enqueue() pour émettre le résultat.

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

Une entrée, plusieurs sorties

Une transformation peut émettre zéro, un ou plusieurs blocs pour chaque entrée — ce qui est idéal pour diviser ou développer les données.

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

Filtrer avec des transformations

Il suffit de ne pas mettre en file d’attente les blocs que vous souhaitez supprimer.

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

La méthode de vidage

flush(controller) s’exécute une fois lorsque l’entrée se termine — c’est l’idéal pour émettre les éléments restants en mémoire tampon ou un dernier bloc.

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

Mettre en mémoire tampon entre les blocs

Conservez l’état dans la fermeture pour réunir les blocs partiels, par exemple afin de reconstituer des lignes complètes à partir de limites d’octets arbitraires.

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

Flux de transformation intégrés

La plateforme fournit TextDecoderStream, TextEncoderStream et CompressionStream/DecompressionStream — des transformations prêtes à l’emploi.

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

Connecter avec pipeThrough

readable.pipeThrough(transform) relie une source à une transformation et renvoie la sortie lisible de cette transformation, prête pour l’étape suivante.

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

Transformations asynchrones

transform peut être asynchrone : utilisez await à l’intérieur pour appeler des API ou effectuer un traitement asynchrone pour chaque bloc. Le flux attend la résolution de la promesse.

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

Propagation des erreurs

Une exception dans transform met le flux en erreur ; les consommateurs en aval reçoivent l’erreur et la chaîne de traitement est arrêtée.

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

Vérification rapide

Testez les flux de transformation.

Récapitulatif : flux de transformation

Vous avez créé des transformations avec transform et flush, appliqué un mappage, un filtrage et une expansion aux blocs, mis des données en mémoire tampon entre les limites de blocs, utilisé des fonctionnalités intégrées comme CompressionStream et relié les étapes avec pipeThrough. Ensuite : la rétropression et l’acheminement.

Questions Fréquemment Posées

La leçon « Flux de transformation » est-elle gratuite ?

Oui — le texte complet de « Flux de transformation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Flux de transformation » ?

Modifiez les données lorsqu’elles transitent par un pipeline. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Flux de transformation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy