JavaScript Academy · Lección

Streams de transformación

Modifique los datos mientras fluyen por un pipeline.

Streams de transformación es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué es un TransformStream?

Un TransformStream se sitúa entre un extremo legible y uno escribible. Los fragmentos que entran se transforman y se emiten por el otro extremo: una etapa de canalización que asigna, filtra o remodela los datos sobre la marcha.

Anatomía

Tiene dos extremos: writable (por donde entran los datos) y readable (por donde salen los datos transformados).

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

El método transform

Defina el comportamiento con una función transform(chunk, controller). Llame a controller.enqueue() para emitir la salida.

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

Una entrada, varias salidas

Una transformación puede emitir cero, uno o varios fragmentos por cada entrada, lo que resulta perfecto para dividir o expandir datos.

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

Filtrar con transforms

Simplemente no ponga en cola los fragmentos que desee descartar.

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

El método flush

flush(controller) se ejecuta una vez cuando termina la entrada, por lo que es ideal para emitir los restos almacenados en el búfer o un fragmento final.

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

Almacenar datos en el búfer entre fragmentos

Mantenga el estado en el cierre para unir fragmentos parciales, como al ensamblar líneas completas a partir de límites de bytes arbitrarios.

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

Transform streams integrados

La plataforma incluye TextDecoderStream, TextEncoderStream y CompressionStream/DecompressionStream: transforms listos para usar.

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

Conectar con pipeThrough

readable.pipeThrough(transform) conecta una fuente a un transform y devuelve la salida legible del transform, lista para la siguiente etapa.

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

Transforms asíncronos

transform puede ser asíncrono: utilice await en su interior para llamar a APIs o realizar trabajo asíncrono con cada fragmento. El stream espera a que se resuelva la promesa.

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

Propagación de errores

Si se produce una excepción dentro de transform, el stream falla; los consumidores posteriores reciben el error y la canalización se desmantela.

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

Comprobación rápida

Pruebe los streams de transformación.

Repaso: streams de transformación

Ha creado transformaciones con transform y flush, ha aplicado mapeos, filtros y expansiones a fragmentos, ha almacenado datos en búfer entre límites de fragmentos, ha utilizado elementos integrados como CompressionStream y ha conectado etapas con pipeThrough. A continuación: contrapresión y canalización.

Preguntas frecuentes

¿La lección «Streams de transformación» es gratis?

Sí — el texto completo de «Streams de transformación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Streams de transformación»?

Modifique los datos mientras fluyen por un pipeline. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «Streams de transformación»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy