如何优雅实现基于当前幻灯片索引的指定范围图片预加载？

针对你在幻灯片图片预加载场景中需要获取当前索引周边指定范围有效页面索引的需求，这里有几个简洁优雅的实现方案，比你现有的两种方式更高效易读：

方案一：先锁定有效范围再生成数组 #

这个方法先通过边界校验确定合法的起始和结束索引，再生成连续的索引数组，完全避免无效值：

const getPreloadPages = (currentIndex, range, totalPages) => {
  // 确保起始索引不小于0，结束索引不超过总页数-1
  const start = Math.max(0, currentIndex - range);
  const end = Math.min(totalPages - 1, currentIndex + range);
  // 生成从start到end的连续索引数组
  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
};

// 示例测试
console.log(getPreloadPages(23, 2, 50)); // 输出: [21, 22, 23, 24, 25]
console.log(getPreloadPages(0, 2, 50));  // 输出: [0, 1, 2]
console.log(getPreloadPages(49, 2, 50)); // 输出: [47, 48, 49]

这个方案的优势在于逻辑清晰，先做好边界控制，再生成有效数组，没有多余的过滤步骤，性能更优。

方案二：函数式过滤法 #

如果你偏好更紧凑的函数式写法，可以先生成所有候选索引，再过滤掉无效值：

const getPreloadPages = (currentIndex, range, totalPages) => {
  // 生成包含当前索引前后range的所有候选索引
  return Array.from({ length: 2 * range + 1 }, (_, i) => currentIndex - range + i)
    // 过滤掉小于0或超出总页数的无效索引
    .filter(index => index >= 0 && index < totalPages);
};

// 示例测试
console.log(getPreloadPages(23, 2, 50)); // 输出: [21, 22, 23, 24, 25]
console.log(getPreloadPages(0, 2, 50));  // 输出: [0, 1, 2]

这种写法代码更简洁，利用数组的filter方法快速剔除无效值，可读性也很好。

对比原有方案的优势 #

• 相比方案1（会返回undefined）：以上两种方案都能保证返回的数组全是有效索引，不会出现无效值。
• 相比方案2（冗长的循环）：封装成可复用的函数后，代码更简洁，逻辑更集中，后续修改范围或总页数时只需调整参数即可。

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