0Pricing
Sveltejs Academy · Lektion

{#each} mit Index und Schlüssel

Durchlaufen Sie Arrays und Objekte und greifen Sie auf Index- und Schlüsselwerte zu.

{#each} mit Index und Schlüssel ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.

Der each-Block

{#each list as item} durchläuft ein Array und rendert das Markup einmal pro Element.

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

Destrukturierung

Destrukturieren Sie die Struktur des Elements direkt im Template, um übersichtlicheren Code zu erhalten.

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

Indexvariable

Fügen Sie eine zweite Bindung für den nullbasierten Index hinzu.

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

Keyed each

Geben Sie nach dem Element mit (item.id) einen Schlüssel an, damit Svelte Elemente bei Aktualisierungen zuordnen kann.

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

Warum Schlüssel wichtig sind

Ohne Schlüssel können Umordnen oder Filtern Svelte verwirren und den Zustand untergeordneter Komponenten zurücksetzen. Schlüssel halten DOM-Knoten stabil.

Else-Block

{:else} nach dem Iterationskörper wird gerendert, wenn die Liste leer ist.

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

Objekte durchlaufen

Um ein Objekt zu durchlaufen, wandeln Sie es zunächst in Einträge um.

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

Sets und Maps

Umschließen Sie sie mit [...set] oder [...map], um sie zu durchlaufen.

Verschachteltes each

Verschachteln Sie {#each}-Blöcke für zweidimensionale Daten.

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

Schließendes Tag

Schließen Sie immer mit {/each}. Falsch platzierte schließende Tags führen zu Compilerfehlern.

Leistungstipp

Verwenden Sie Schlüssel für Listen, die sich häufig ändern. Dadurch wird das Umordnen zu O(n) statt O(n^2).

Kurze Überprüfung

Welche Rolle spielt (item.id) in einem each-Block?

Zusammenfassung

{#each} durchläuft Arrays, unterstützt Bindungen für Index und Schlüssel und rendert mit {:else} einen Zustand für leere Listen.

Häufig gestellte Fragen

Ist die Lektion „{#each} mit Index und Schlüssel“ kostenlos?

Ja — der vollständige Text von „{#each} mit Index und Schlüssel“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „{#each} mit Index und Schlüssel“?

Durchlaufen Sie Arrays und Objekte und greifen Sie auf Index- und Schlüsselwerte zu. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Sveltejs Academy zu starten?

Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „{#each} mit Index und Schlüssel“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?

Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. {#if} {#else if} {#else}
  2. {#each} mit Index und Schlüssel
  3. {#key} zum Erzwingen eines erneuten Renderns
  4. Verschachtelte {#each}-Blöcke und schlüsselbasierte Aktualisierungen
← Zurück zu Sveltejs Academy