JavaScript Academy · Pelajaran

Stream Transformasi

Ubah data saat mengalir melalui pipeline.

Stream Transformasi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu TransformStream?

TransformStream berada di antara sisi yang dapat dibaca dan sisi yang dapat ditulis. Chunk yang ditulis ke dalamnya diubah lalu dikeluarkan — tahap alur pemrosesan yang memetakan, memfilter, atau membentuk ulang data secara langsung.

Struktur

Aliran ini memiliki dua ujung: writable (tempat data masuk) dan readable (tempat data yang telah diubah keluar).

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

Metode transformasi

Tentukan perilaku dengan fungsi transform(chunk, controller). Panggil controller.enqueue() untuk mengeluarkan hasil.

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

Satu Masuk, Banyak Keluar

Satu transformasi dapat menghasilkan nol, satu, atau beberapa chunk untuk setiap masukan — sangat cocok untuk membagi atau memperluas data.

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

Memfilter dengan Transformasi

Cukup jangan masukkan ke antrean chunk yang ingin Anda buang.

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

Metode Pengosongan

flush(controller) dijalankan sekali saat masukan berakhir — ideal untuk mengeluarkan sisa data yang disimpan sementara atau chunk terakhir.

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

Menyimpan Data Sementara di Antara Chunk

Simpan keadaan dalam closure untuk menggabungkan chunk yang belum lengkap, seperti menyusun baris lengkap dari batas bita yang berubah-ubah.

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

Aliran Transformasi Bawaan

Platform menyediakan TextDecoderStream, TextEncoderStream, dan CompressionStream/DecompressionStream — transformasi siap pakai.

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

Menghubungkan dengan pipeThrough

readable.pipeThrough(transform) menghubungkan sumber ke transformasi dan mengembalikan keluaran yang dapat dibaca dari transformasi tersebut, siap untuk tahap berikutnya.

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

Transformasi Asinkron

transform dapat bersifat asinkron — gunakan await di dalamnya untuk memanggil API atau melakukan pekerjaan asinkron pada setiap chunk. Aliran menunggu janji tersebut.

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

Penyebaran Kesalahan

Pelemparan kesalahan di dalam transform membuat aliran mengalami kesalahan; konsumen di hilir melihat kesalahan tersebut dan alur pemrosesan dihentikan.

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

Uji Cepat

Uji aliran transformasi.

Rangkuman: Aliran Transformasi

Anda membangun transformasi dengan transform dan flush, memetakan, menyaring, dan memperluas potongan, menyangga data di seluruh batas potongan, menggunakan fitur bawaan seperti CompressionStream, serta menghubungkan tahapan dengan pipeThrough. Berikutnya: tekanan balik dan pengaliran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Stream Transformasi” gratis?

Ya — teks lengkap “Stream Transformasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Stream Transformasi”?

Ubah data saat mengalir melalui pipeline. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Stream Transformasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy