Svelte中能否限制{#each}循环的结果数量？

首先明确：你尝试的{#each objects as object, i, limit 3}这种语法Svelte并不支持，不过有两种常用方式可以实现只输出前N个元素的需求：

1. 数组切片（推荐） #

直接对原数组使用slice()方法截取前3个元素，把切片后的数组传给{#each}循环：

<script>
  const objects = [1, 2, 3, 4, 5];
</script>

{#each objects.slice(0, 3) as object, i}
  <div>{object}</div>
{/each}

slice(0, 3)会返回原数组的前3个元素（索引0到2），循环只会遍历这部分内容，性能更优，因为不需要处理整个数组。

2. 索引条件判断 #

如果需要遍历整个数组但只渲染前3个元素，可以在循环内部通过索引i做条件判断：

<script>
  const objects = [1, 2, 3, 4, 5];
</script>

{#each objects as object, i}
  {#if i < 3}
    <div>{object}</div>
  {/if}
{/each}

这种方式会遍历整个数组，但只渲染索引小于3的元素，适合需要在循环里处理其他逻辑（比如记录所有元素状态）但只显示部分内容的场景。

内容的提问来源于stack exchange，提问作者Sam Sabin