JavaScript遍历图片数组首尾索引处占位图问题解决方案咨询

当然可以实现，两种方式都能搞定这个循环索引的问题：

1. 条件判断方式（直观易懂） #

直接针对边界情况做判断，当处于数组首项时，上一张取最后一项；处于末项时，下一张取首项：

// 假设你的图片数组是images，当前索引是currentIndex
// 获取上一张的索引
const prevIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
// 获取下一张的索引
const nextIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;

// 之后用这两个索引去取对应的图片
const prevImage = images[prevIndex];
const nextImage = images[nextIndex];

把这段逻辑放到你渲染缩略图的代码里，替换原来直接用currentIndex-1和currentIndex+1的地方，就能解决越界显示占位图的问题。

2. 取模运算方式（更简洁优雅） #

用取模运算可以省去条件判断，自动处理循环逻辑，代码更简洁：

// 获取上一张索引：加数组长度是为了避免负数取模的问题
const prevIndex = (currentIndex - 1 + images.length) % images.length;
// 获取下一张索引
const nextIndex = (currentIndex + 1) % images.length;

const prevImage = images[prevIndex];
const nextImage = images[nextIndex];

原理很简单：

• 当currentIndex是0时，0-1=-1，加上数组长度后变成images.length-1，取模数组长度结果还是images.length-1，正好是最后一项
• 当currentIndex是最后一个索引（images.length-1）时，currentIndex+1等于images.length，取模数组长度结果为0，正好是首项

你可以根据自己的习惯选其中一种方式，两种都能完美解决你遇到的问题。

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