0Pricing
Sveltejs Academy · Aula

{#each} com índice e chave

Percorra matrizes e objetos acessando os valores de índice e chave.

{#each} com índice e chave é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.

O bloco each

{#each list as item} percorre uma lista e renderiza a marcação uma vez para cada elemento.

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

Desestruturação

Desestruture o formato do item em linha para deixar os modelos mais limpos.

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

Variável de índice

Adicione uma segunda vinculação para o índice baseado em zero.

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

each com chave

Forneça uma chave após o item com (item.id) para que o Svelte possa associar os itens entre atualizações.

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

Por que as chaves são importantes

Sem chaves, reordenar ou filtrar pode confundir o Svelte e redefinir o estado dos componentes filhos. As chaves mantêm os nós do DOM estáveis.

Bloco else

{:else} depois do corpo da iteração é renderizado quando a lista está vazia.

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

Percorrer objetos

Para percorrer um objeto, primeiro converta-o em entries.

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

Conjuntos e mapas

Coloque-os entre [...set] ou [...map] para percorrê-los.

each aninhado

Aninhe blocos {#each} para dados bidimensionais.

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

Tag de fechamento

Sempre feche com {/each}. Tags de fechamento mal posicionadas causam erros de compilação.

Dica de desempenho

Use chaves em listas que mudam com frequência. Elas tornam a reordenação O(n), em vez de O(n^2).

Verificação rápida

Qual é a função de (item.id) em um each?

Recapitulação

{#each} percorre listas, aceita vinculações de índice e chave e renderiza um estado vazio com {:else}.

Perguntas Frequentes

A aula “{#each} com índice e chave” é grátis?

Sim — o texto completo de “{#each} com índice e chave” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.

O que vou aprender em “{#each} com índice e chave”?

Percorra matrizes e objetos acessando os valores de índice e chave. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Sveltejs Academy?

Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “{#each} com índice e chave”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Sveltejs Academy?

Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. {#if} {#else if} {#else}
  2. {#each} com índice e chave
  3. {#key} para forçar uma nova renderização
  4. {#each} aninhado e atualizações por chave
← Voltar para Sveltejs Academy