JavaScript Academy · Pelajaran

Protokol Iterable dan for...of

Pelajari protokol iterable: Symbol.iterator, iterator.next(), serta penggunaan for...of, spread, dan Array.from melalui contoh khusus kecil

Pelajaran 1 dari 38 langkah

Protokol Iterable dan for...of adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 3 pelajaran total.

Gambaran besar

Tujuan: Membaca dan membangun iterable kecil.

  • Arti iterable
  • Symbol.iterator dan iterator.next()
  • for...of, spread, Array.from
  • Membangun contoh penghitung 0..N
Protokol Iterable dan for...of — ilustrasi 1

for...of pada bawaan

for...of bekerja pada iterable bawaan seperti larik dan string, lalu menghasilkan item sesuai urutan.

// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
  console.log("arr item:", n);
}

const word = "JS";
for (const ch of word) {
  console.log("char:", ch);
}
Protokol Iterable dan for...of — ilustrasi 2

Iterable khusus

Sebuah iterable memiliki [Symbol.iterator]() yang mengembalikan iterator, dengan next() yang menghasilkan { value, done }.

// A tiny iterable that counts 0..max-1
const Counter = {
  make: function (max) {
    return {
      max: max,
      // Symbol.iterator returns an iterator object
      [Symbol.iterator]: function () {
        let i = 0;
        return {
          next: function () {
            if (i < max) {
              const out = { value: i, done: false };
              i = i + 1;
              return out;
            }
            return { value: undefined, done: true };
          }
        };
      }
    };
  }
};

for (const x of Counter.make(3)) {
  console.log("count:", x);
}
Protokol Iterable dan for...of — ilustrasi 3

Iterasi manual

Di balik layar, for...of memanggil next() berulang kali sampai done: true.

// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();

console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
Protokol Iterable dan for...of — ilustrasi 4

Spread dan Array.from

Spread dan Array.from juga menggunakan protokol iterable untuk mengumpulkan nilai.

// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));

console.log("spread:", a1);
console.log("from :", a2);
Protokol Iterable dan for...of — ilustrasi 5

Kebiasaan baik

Kiat:

  • Kembalikan iterator baru setiap kali dalam [Symbol.iterator].
  • Selalu akhiri dengan done: true agar tidak terjadi perulangan tanpa akhir.
  • Simpan keadaan secara lokal di dalam penutupan iterator.
Protokol Iterable dan for...of — ilustrasi 6

Kuis protokol iterable

Cek cepat: Membuat objek menjadi iterable.

Protokol Iterable dan for...of — ilustrasi 7

Ringkasan

Ringkasan: Bawaan seperti larik bersifat iterable. Untuk membuatnya sendiri, tambahkan [Symbol.iterator]() yang mengembalikan iterator dengan next(). Gunakan for...of, spread, atau Array.from untuk menggunakan nilai.

Protokol Iterable dan for...of — ilustrasi 8
Gratis untuk memulai

Belajar JavaScript dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
59
Pelajaran
200

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Protokol Iterable dan for...of” gratis?

Ya — teks lengkap “Protokol Iterable dan for...of” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Protokol Iterable dan for...of”?

Pelajari protokol iterable: Symbol.iterator, iterator.next(), serta penggunaan for...of, spread, dan Array.from melalui contoh khusus kecil 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 1 dari 3.

Berapa lama pelajaran “Protokol Iterable dan for...of” 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

  1. Protokol Iterable dan for...of
  2. Fungsi Generator, yield, dan Alur Kecil
  3. Iterator Async — for await...of dan Generator Async
← Kembali ke JavaScript Academy