这个简单的数学技巧可以让你无需任何 if 语句就能创建图片轮播。

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

如果你是一名网页开发者或网页开发专业的学生，​​那么你的职业生涯中很可能至少制作过一个图片轮播图。事实上，你可能制作过好几个。虽然市面上有很多图片轮播图库，但有时你还是想要（或需要）从零开始制作。

大多数图片轮播图都是由图像数据数组构成的。当某个事件触发更改（例如超时、按钮点击等）时，当前图像数据会被数组中的下一个元素替换。对许多人来说，棘手之处在于当数据到达数组末尾时该怎么办？如果你一直在编写复杂的 if 语句来检查这种情况，那么我来告诉你，还有更好的方法。

请看下面的代码：

const imageData = [ 'image1.png', 'img2.png', 'img3.png' ];
let currentImage = 0;

const handleImageChange = () => {
  currentImage = (currentImage + 1) % imageData.length;
}

就是这样。事情就是这样。（下面的解释让基努感到惊讶。）

工作原理

假设我们有一个包含 10 个元素的数组。取模运算（即使用%取模运算符）返回除法的余数。如果currentImage10 为 0，那么 10除以 10(0 + 1) % 10的余数1/10就是 1。这是因为 1 不能被 10 整除，所以余数就是 1。2 到 9 的情况也一样。这些数字都不能被 10 整除，所以 9 本身就是余数。神奇之处在于，当 10 被整除时，情况就不同了。

由于我们的数组索引从零开始，所以没有第十个元素。这对我们来说很有利！一个数除以自身，余数为 0，这意味着我们的currentImage索引将被设置为 0。也就是说，一旦我们遍历到数组末尾，索引就会自动回到开头。很巧妙，对吧？

在计算机科学中，这被称为循环数组。数组本身只是一个普通的数组，但我们使用这种数学技巧使其可以无限循环。

等等！如果我们想反方向走呢？别担心，我来帮你！

我们可以反过来做同样的事情。公式是…… (currentValue - 1 + totalElements) % totalElements。如果我们把这个公式添加到上面的例子里，它可能看起来像这样。

const imageData = [ 'image1.png', 'img2.png', 'img3.png' ];
const currentImage = 0;

const handleImageChange = (direction) => {
  if (direction == 'forward')
    currentImage = (currentImage + 1) % imageData.length;
  else
    currentImage = (currentImage - 1 + imageData.length) % imageData.length;
}

我知道，我知道，我说过不会有任何if声明，也确实没有，至少没有关于如何推进或回顾各个要素的声明。我们只需要知道该往哪个方向走。

这不仅适用于图片轮播。任何时候你需要逐个遍历数组元素，它都能帮你省去检查是否到达末尾的条件判断。

封面图片由 Michael 和 Sherry Martin 提供（flickr）