0Pricing
Sveltejs Academy · Lekcja

{#each} z indeksem i kluczem

Iteruj po tablicach i obiektach, uzyskując dostęp do wartości indeksu i klucza.

{#each} z indeksem i kluczem to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Blok each

{#each list as item} iteruje po tablicy i renderuje kod znaczników raz dla każdego elementu.

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

Destrukturyzacja

Destrukturyzuj strukturę elementu bezpośrednio w szablonie, aby zwiększyć jego czytelność.

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

Zmienna indeksu

Dodaj drugie powiązanie reprezentujące indeks liczony od zera.

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

Iteracja each z kluczem

Podaj klucz za elementem, używając (item.id), aby Svelte mogło dopasowywać elementy podczas aktualizacji.

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

Dlaczego klucze mają znaczenie

Bez kluczy zmiana kolejności lub filtrowanie może zmylić Svelte i zresetować stan komponentów podrzędnych. Klucze utrzymują stabilność węzłów DOM.

Blok else

{:else} umieszczony po treści iteracji renderuje się, gdy lista jest pusta.

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

Iterowanie po obiektach

Aby iterować po obiekcie, najpierw przekształć go w tablicę wpisów.

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

Zbiory i mapy

Opakuj je w [...set] lub [...map], aby móc po nich iterować.

Zagnieżdżone each

Zagnieżdżaj bloki {#each} w przypadku danych dwuwymiarowych.

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

Znacznik zamykający

Zawsze zamykaj blok za pomocą {/each}. Nieprawidłowo umieszczone znaczniki zamykające powodują błędy kompilacji.

Wskazówka dotycząca wydajności

Używaj kluczy na listach, które często się zmieniają. Dzięki nim zmiana kolejności ma złożoność O(n), a nie O(n^2).

Szybkie sprawdzenie

Jaką rolę pełni (item.id) w bloku each?

Podsumowanie

{#each} iteruje po tablicach, obsługuje powiązania indeksu i klucza oraz renderuje stan pusty za pomocą {:else}.

Często zadawane pytania

Czy lekcja „{#each} z indeksem i kluczem” jest bezpłatna?

Tak — pełny tekst „{#each} z indeksem i kluczem” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „{#each} z indeksem i kluczem”?

Iteruj po tablicach i obiektach, uzyskując dostęp do wartości indeksu i klucza. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?

Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „{#each} z indeksem i kluczem”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?

Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. {#if} {#else if} {#else}
  2. {#each} z indeksem i kluczem
  3. {#key} do wymuszania ponownego renderowania
  4. Zagnieżdżone {#each} i aktualizacje z kluczami
← Powrót do Sveltejs Academy