Svelte中如何限制数组展示的对象数量？

方法一：数组切片后遍历 #

直接通过slice(0, 4)截取数组的前4个元素，再用Svelte的each循环渲染：

<script>
let data = [
    {id:1, name: 'John'},
    {id:2, name: 'Peter'},
    {id:3, name: 'Stev'},
    {id:4, name: 'Clar'},
    {id:5, name: 'Eyad'},
    {id:6, name: 'Vector'}
];
// 截取前4个元素
const filteredData = data.slice(0, 4);
</script>

{#each filteredData as item}
    {item.name}
{/each}

方法二：利用循环索引判断 #

在each循环中获取元素索引，通过条件判断只渲染索引小于4的元素：

<script>
let data = [
    {id:1, name: 'John'},
    {id:2, name: 'Peter'},
    {id:3, name: 'Stev'},
    {id:4, name: 'Clar'},
    {id:5, name: 'Eyad'},
    {id:6, name: 'Vector'}
];
</script>

{#each data as item, index}
    {#if index < 4}
        {item.name}
    {/if}
{/each}

两种方法都能实现需求，第一种提前过滤数组，性能更优；第二种适合需要保留完整数组遍历逻辑但仅展示前几项的场景。

内容的提问来源于stack exchange，提问作者Eyad Farah