在Svelte中中断迭代（每个）？

Question

是否有可能中断Svelte中的迭代或像angular（ng-repeat="items in item | limitTo:4"）中那样限制？例如：

{#each items as item, i}
  ...
  {#if i > 4}
    {:break}  <--- break here
  {/if}
  ...
{/each}

Answer 1

没有{:break}块，但您可以slice在迭代数组之前取出数组中的前 4 个元素。

{#each items.slice(0, 4) as item, i} ... {/each}

Answer 2

Svelte currently has no special syntax for breaks or ranges. (here's a pending proposal) A common idiom is to use a {length: N} object as the #each parameter, which usually performs better than creating new arrays every render.

{#each {length: 4} as _, i} {items[i]} {/each}

Here are some other patterns that work:

<script>
    let items = ['a', 'b', 'c', 'd', 'e'];
    $: filteredItems = items.slice(0, 4);
    const filterItems = (i) => i.slice(0, 4);
</script>

<div>
    {#each {length: 4} as _, i}
        {items[i]}
    {/each}
</div>
<div>
    {#each items.slice(0, 4) as item}
        {item}
    {/each}
</div>
<div>
    {#each filteredItems as item}
        {item}
    {/each}
</div>
<div>
    {#each filterItems(items) as item}
        {item}
    {/each}
</div>