JavaScript Academy · Урок

Потоки преобразования

Изменяйте данные по мере их прохождения через конвейер.

«Потоки преобразования» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое TransformStream

TransformStream располагается между читаемой и записываемой сторонами. Записанные в него части преобразуются и выдаются наружу — это этап конвейера, который на лету отображает, фильтрует или изменяет форму данных.

Устройство

У него два конца: writable (куда поступают данные) и readable (откуда выходят преобразованные данные).

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

Метод transform

Определите поведение с помощью функции transform(chunk, controller). Вызовите controller.enqueue(), чтобы выдать результат.

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

Один вход, несколько выходов

Преобразование может выдавать для одного входа ноль, одну или несколько частей — это идеально подходит для разделения или расширения данных.

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

Фильтрация с помощью преобразований

Просто не помещайте в очередь части, которые хотите удалить.

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

Метод flush

flush(controller) выполняется один раз после завершения ввода — это удобно для выдачи оставшихся в буфере данных или последней части.

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

Буферизация между частями

Храните состояние в замыкании, чтобы объединять неполные части, например собирать полные строки из данных с произвольными границами.

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

Встроенные преобразующие потоки

Платформа предоставляет готовые преобразования: TextDecoderStream, TextEncoderStream, CompressionStream и DecompressionStream.

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

Соединение с помощью pipeThrough

readable.pipeThrough(transform) соединяет источник с преобразованием и возвращает читаемый результат преобразования, готовый для следующего этапа.

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

Асинхронные преобразования

transform может быть асинхронным: используйте внутри него ожидание, чтобы вызывать интерфейсы или выполнять асинхронную работу с каждой частью. Поток ждёт разрешения обещания.

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

Распространение ошибок

Исключение внутри transform переводит поток в состояние ошибки; следующие потребители видят ошибку, и конвейер останавливается.

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

Быстрая проверка

Проверьте потоки преобразования.

Итоги: потоки преобразования

Вы создали преобразования с помощью transform и flush, отображали, фильтровали и разворачивали фрагменты, буферизовали данные между границами фрагментов, использовали встроенные средства, такие как CompressionStream, и соединили этапы с помощью pipeThrough. Далее: обратное давление и передача данных по потокам.

Часто задаваемые вопросы

Урок «Потоки преобразования» бесплатный?

Да — полный текст урока «Потоки преобразования» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Потоки преобразования»?

Изменяйте данные по мере их прохождения через конвейер. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Потоки преобразования»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy