0Pricing
Sveltejs Academy · Pelajaran

{#each} dengan Indeks dan Kunci

Ulangi array dan objek sambil mengakses nilai indeks dan kunci.

{#each} dengan Indeks dan Kunci adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Blok each

{#each list as item} melakukan iterasi pada array dan merender markup satu kali untuk setiap elemen.

{#each colors as color}
  <li>{color}</li>
{/each}

Destrukturisasi

Lakukan destrukturisasi bentuk item secara sebaris agar templat lebih rapi.

{#each users as { id, name }}
  <li>{name}</li>
{/each}

Variabel Indeks

Tambahkan binding kedua untuk indeks yang dimulai dari nol.

{#each items as item, i}
  <li>{i + 1}. {item}</li>
{/each}

each dengan Kunci

Berikan kunci setelah item dengan (item.id) agar Svelte dapat mencocokkan item di antara pembaruan.

{#each todos as todo (todo.id)}
  <Todo {todo} />
{/each}

Mengapa Kunci Penting

Tanpa kunci, pengurutan ulang atau pemfilteran dapat membingungkan Svelte dan mengatur ulang status komponen anak. Kunci menjaga node DOM tetap stabil.

Blok else

{:else} setelah isi iterasi akan dirender ketika daftar kosong.

{#each items as item}
  <li>{item}</li>
{:else}
  <li>No items yet.</li>
{/each}

Melakukan Iterasi pada Objek

Untuk melakukan iterasi pada objek, ubah objek tersebut menjadi entries terlebih dahulu.

{#each Object.entries(map) as [key, value]}
  <li>{key}: {value}</li>
{/each}

Set dan Map

Bungkus keduanya dalam [...set] atau [...map] untuk melakukan iterasi.

each Bersarang

Sarangkan blok {#each} untuk data dua dimensi.

{#each rows as row}
  {#each row as cell}<td>{cell}</td>{/each}
{/each}

Tag Penutup

Selalu tutup dengan {/each}. Penutup yang salah tempat menyebabkan galat kompilasi.

Kiat Performa

Gunakan kunci pada daftar yang sering berubah. Kunci membuat pengurutan ulang menjadi O(n), bukan O(n^2).

Pemeriksaan Singkat

Apa peran (item.id) dalam each?

Ringkasan

{#each} melakukan iterasi pada array, mendukung binding indeks dan kunci, serta merender keadaan kosong dengan {:else}.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “{#each} dengan Indeks dan Kunci” gratis?

Ya — teks lengkap “{#each} dengan Indeks dan Kunci” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “{#each} dengan Indeks dan Kunci”?

Ulangi array dan objek sambil mengakses nilai indeks dan kunci. Kamu berlatih Sveltejs 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 Sveltejs Academy?

Tidak diperlukan pengalaman sebelumnya. Sveltejs 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 2 dari 4.

Berapa lama pelajaran “{#each} dengan Indeks dan Kunci” 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 Sveltejs Academy ini?

Ya. Setiap pelajaran Sveltejs 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. {#if} {#else if} {#else}
  2. {#each} dengan Indeks dan Kunci
  3. {#key} untuk Memaksa Render Ulang
  4. {#each} Bersarang dan Pembaruan Berkunci
← Kembali ke Sveltejs Academy