如何实现非均匀数组循环轮播，每次获取后续4个元素？

我有一个包含13个元素的数组，希望每次展示其中4个元素：首次展示[0,1,2,3]，刷新后展示[4,5,6,7]，在[8,9,10,11]之后需展示[12,0,1,2]，即每次获取包含4个元素的子数组。我需要持续循环遍历该数组，始终获取后续4个元素，但在循环回绕部分遇到了问题——难以在重置到起始位置时将剩余元素补充到后续元素中。我尝试过使用%运算符取余，但仍毫无头绪，希望得到JavaScript或类似语言的解决方案。

我参考帮助尝试了以下代码，但显然存在问题：

const [offSetIndex, setOffSetIndex] = useState<number>(0);  

const handleRefreshMeals = () => {
  const end = (offSetIndex + 4) % meals.length;
  let result = []

  if(end < offSetIndex) {
    result = meals.slice(offSetIndex).concat(meals.slice(0, end))
  } else {
    result = meals.slice(offSetIndex, offSetIndex + 4);
  }

  setOffSetIndex(offSetIndex + 4)
  setCurrentMeals(result)
};

问题分析 #

你的代码核心问题是偏移量未做取余处理：当offSetIndex + 4超过数组长度（13）后，偏移量会持续增大，后续的切片逻辑会完全失效。此外，end的计算逻辑虽然思路正确，但依赖未重置的偏移量，导致回绕判断出错。

修正方案 #

方案一：基于切片的直观实现

通过判断剩余元素数量，决定是否从数组首尾拼接结果，同时对偏移量做取余处理，确保其始终在数组索引范围内：

const [offSetIndex, setOffSetIndex] = useState<number>(0);  
const takeCount = 4; // 提取固定长度，便于维护

const handleRefreshMeals = () => {
  let result = [];
  const remaining = meals.length - offSetIndex;

  if (remaining >= takeCount) {
    // 剩余元素足够，直接截取连续子数组
    result = meals.slice(offSetIndex, offSetIndex + takeCount);
  } else {
    // 剩余元素不足，截取末尾剩余部分 + 开头补全剩余数量
    result = meals.slice(offSetIndex).concat(meals.slice(0, takeCount - remaining));
  }

  // 更新偏移量，取余保证循环滚动
  setOffSetIndex(prev => (prev + takeCount) % meals.length);
  setCurrentMeals(result);
};

方案二：基于索引映射的简洁实现

直接生成目标元素的索引（利用取余实现循环），再通过索引映射获取数组元素，逻辑更简洁：

const [offSetIndex, setOffSetIndex] = useState<number>(0);  
const takeCount = 4;

const handleRefreshMeals = () => {
  // 生成当前要提取的4个元素的索引，取余实现循环回绕
  const targetIndices = Array.from({ length: takeCount }, (_, idx) => (offSetIndex + idx) % meals.length);
  // 根据索引获取对应元素
  const result = targetIndices.map(index => meals[index]);
  
  setOffSetIndex(prev => (prev + takeCount) % meals.length);
  setCurrentMeals(result);
};

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