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

Question

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

{#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 目前没有用于分隔符或范围的特殊语法。 (here's a pending proposal) 一个常见的习惯用法是使用 {length: N} 对象作为 #each 参数，这通常比每次渲染都创建新数组的效果更好。

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

以下是一些其他有效的模式：

<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>

Answer 3

我只是使用 {#each myItems as item}{#if yourtruevalue} {item} {/if} {/each} 我不知道性能影响，但它非常简单。如果 yourtruevalue 为真 - 无论项目呈现的条件是什么 - 它都会呈现，如果不是则跳过该项目。

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

Break iteration (each) in Svelte?

svelte