0Pricing
Sveltejs Academy · Ders

Dizin ve Anahtarla {#each}

Diziler ve nesneler üzerinde döngü kurarak dizin ve anahtar değerlerine erişin.

Dizin ve Anahtarla {#each}, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.

each Bloğu

{#each list as item}, bir dizi üzerinde yinelenir ve işaretlemeyi her öğe için bir kez görüntüler.

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

Yapı Çözme

Daha temiz şablonlar için öğenin yapısını satır içinde yapı çözerek ayırın.

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

Dizin Değişkeni

Sıfır tabanlı dizin için ikinci bir bağlama ekleyin.

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

Anahtarlı each

Svelte'nin güncellemeler arasında öğeleri eşleştirebilmesi için öğeden sonra (item.id) anahtarı sağlayın.

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

Anahtarlar Neden Önemlidir

Anahtarlar olmadan yeniden sıralama veya filtreleme Svelte'nin kafasını karıştırabilir ve alt bileşen durumunu sıfırlayabilir. Anahtarlar DOM düğümlerini kararlı tutar.

else Bloğu

Yineleme gövdesinden sonraki {:else}, liste boş olduğunda görüntülenir.

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

Nesneler Üzerinde Yineleme

Bir nesne üzerinde yineleme yapmak için önce onu entries değerine dönüştürün.

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

Kümeler ve Eşlemeler

Yinelemek için bunları [...set] veya [...map] içine sarın.

İç İçe each

İki boyutlu veriler için {#each} bloklarını iç içe yerleştirin.

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

Kapatma Etiketi

Her zaman {/each} ile kapatın. Yanlış konumlandırılmış kapatmalar derleme hatalarına neden olur.

Performans İpucu

Sık değişen listelerde anahtar kullanın. Bunlar yeniden sıralamayı O(n^2) yerine O(n) hâline getirir.

Hızlı Kontrol

each bloğunda (item.id) ifadesinin rolü nedir?

Özet

{#each} diziler üzerinde yinelenir, dizin ve anahtar bağlamalarını destekler ve boş durum için {:else} görüntüler.

Sıkça Sorulan Sorular

“Dizin ve Anahtarla {#each}” dersi ücretsiz mi?

Evet — “Dizin ve Anahtarla {#each}” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.

“Dizin ve Anahtarla {#each}” dersinde ne öğreneceğim?

Diziler ve nesneler üzerinde döngü kurarak dizin ve anahtar değerlerine erişin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Dizin ve Anahtarla {#each}” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. {#if} {#else if} {#else}
  2. Dizin ve Anahtarla {#each}
  3. Yeniden Oluşturmayı Zorlamak için {#key}
  4. İç İçe {#each} ve Anahtarlı Güncellemeler
← Sveltejs Academy Sayfasına Dön