Svelte中能否修改#each逻辑块的步长？

Svelte的#each块本身不支持直接设置遍历步长，它是基于可迭代对象进行遍历的，不像普通for循环那样能直接通过i+=2控制步长。要实现类似效果，得先把原数组处理成符合需求的新数组，再用#each遍历这个新数组，下面是几种常用方法：

方法1：提取指定步长的元素 #

如果只是想按步长提取元素（比如取索引为0、2、4...的元素），可以用数组的filter方法生成新数组：

<script>
  const items = [1, 2, 3, 4, 5, 6];
  // 步长为2，筛选索引为偶数的元素
  const stepItems = items.filter((_, index) => index % 2 === 0);
</script>

{#each stepItems as item}
  <div>{item}</div>
{/each}

方法2：将数组按步长分组 #

如果需要把元素按步长分组处理（比如每两个元素一组渲染），可以手动循环生成二维数组：

<script>
  const items = [1, 2, 3, 4, 5, 6];
  const groupedItems = [];
  // 每2个元素为一组
  for (let i = 0; i < items.length; i += 2) {
    groupedItems.push(items.slice(i, i + 2));
  }
</script>

{#each groupedItems as group}
  <div class="item-group">
    <span>{group[0]}</span>
    {group[1] && <span>{group[1]}</span>}
  </div>
{/each}

方法3：用Array.from生成步长数组 #

还可以通过Array.from直接构造出按步长提取的新数组，适合更灵活的步长设置：

<script>
  const items = [1, 2, 3, 4, 5, 6];
  const step = 2;
  // 计算新数组长度，再按步长取原数组元素
  const stepItems = Array.from(
    { length: Math.ceil(items.length / step) },
    (_, i) => items[i * step]
  );
</script>

{#each stepItems as item}
  <div>{item}</div>
{/each}

简单来说，#each的核心是遍历“已经处理好的数据源”，所以只要先把原数组转换成你需要的结构，就能实现类似普通for循环的步长效果。

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