{#each} con índice y clave
Recorra matrices y objetos accediendo a los valores de índice y clave
{#each} con índice y clave es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
El bloque each
{#each list as item} itera sobre un array y renderiza el marcado una vez por cada elemento.
{#each colors as color}
<li>{color}</li>
{/each}Desestructuración
Desestructure la forma del elemento en línea para obtener plantillas más limpias.
{#each users as { id, name }}
<li>{name}</li>
{/each}Variable de índice
Añada una segunda vinculación para el índice basado en cero.
{#each items as item, i}
<li>{i + 1}. {item}</li>
{/each}each con clave
Proporcione una clave después del elemento con (item.id) para que Svelte pueda asociar los elementos entre actualizaciones.
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}Por qué importan las claves
Sin claves, reordenar o filtrar puede confundir a Svelte y restablecer el estado de los componentes hijos. Las claves mantienen estables los nodos del DOM.
Bloque else
{:else}, colocado después del cuerpo de la iteración, se renderiza cuando la lista está vacía.
{#each items as item}
<li>{item}</li>
{:else}
<li>No items yet.</li>
{/each}Iterar sobre objetos
Para iterar sobre un objeto, conviértalo primero en entradas.
{#each Object.entries(map) as [key, value]}
<li>{key}: {value}</li>
{/each}Sets y Maps
Envuélvalos en [...set] o [...map] para iterar sobre ellos.
each anidado
Anide bloques {#each} para datos bidimensionales.
{#each rows as row}
{#each row as cell}<td>{cell}</td>{/each}
{/each}Etiqueta de cierre
Cierre siempre con {/each}. Los cierres mal colocados provocan errores de compilación.
Consejo de rendimiento
Use claves en las listas que cambian con frecuencia. Hacen que el reordenamiento sea O(n) en lugar de O(n^2).
Comprobación rápida
¿Cuál es la función de (item.id) en un each?
Repaso
{#each} itera sobre arrays, admite vinculaciones de índice y clave, y renderiza un estado vacío con {:else}.
Preguntas frecuentes
¿La lección «{#each} con índice y clave» es gratis?
Sí — el texto completo de «{#each} con índice y clave» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «{#each} con índice y clave»?
Recorra matrices y objetos accediendo a los valores de índice y clave Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «{#each} con índice y clave»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- {#if} {#else if} {#else}
- {#each} con índice y clave
- {#key} para forzar el renderizado
- {#each} anidados y actualizaciones con clave