带索引和键的 {#each}
遍历数组和对象，并访问索引和值。
带索引和键的 {#each} 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
each 块
{#each list as item} 会遍历数组，并为每个元素渲染一次标记。
{#each colors as color}
<li>{color}</li>
{/each}解构
在模板中直接解构项目结构，让模板更加简洁。
{#each users as { id, name }}
<li>{name}</li>
{/each}索引变量
添加第二个绑定来获取从零开始的索引。
{#each items as item, i}
<li>{i + 1}. {item}</li>
{/each}带键的 each 块
在项目后使用 (item.id) 提供键，让 Svelte 能够在更新过程中匹配项目。
{#each todos as todo (todo.id)}
<Todo {todo} />
{/each}为什么键很重要
没有键时，重新排序或过滤可能会使 Svelte 混淆并重置子组件状态。键可以保持 DOM 节点稳定。
else 块
迭代主体之后的 {:else} 会在列表为空时进行渲染。
{#each items as item}
<li>{item}</li>
{:else}
<li>No items yet.</li>
{/each}遍历对象
要遍历对象，请先将其转换为条目。
{#each Object.entries(map) as [key, value]}
<li>{key}: {value}</li>
{/each}集合与映射
请将它们包裹在 [...set] 或 [...map] 中进行遍历。
嵌套 each 块
嵌套 {#each} 块以处理二维数据。
{#each rows as row}
{#each row as cell}<td>{cell}</td>{/each}
{/each}结束标签
请始终使用 {/each} 结束。错误放置的结束标签会导致编译错误。
性能提示
请为经常变化的列表使用键。这样可以将重新排序的复杂度从 O(n^2) 降为 O(n)。
快速检查
(item.id) 在 each 块中起什么作用？
回顾
{#each} 可以遍历数组，支持索引和键绑定，并通过 {:else} 渲染空状态。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「带索引和键的 {#each}」课时是免费的吗？
是的 — 「带索引和键的 {#each}」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「带索引和键的 {#each}」这节课中我会学到什么？
遍历数组和对象，并访问索引和值。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「带索引和键的 {#each}」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。