Javascript 模算子的混淆

我最近要求一个脚本的快速解决方案，该脚本在每次单击时都会更改背景颜色。来自数组的颜色。在第一个解决方案中，我必须在第一个循环后单击两次才能重新启动它。在第二个解决方案中，它最终只需单击一下就可以工作，这可能是因为模运算符在起作用。即使经过彻底检查，我也无法理解它是如何工作的。代码如下：-

//SCRIPT

 let backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'], i = 0
    document.querySelector('button').addEventListener('click', () => {
    document.body.style.backgroundColor = backgrounds[i%backgrounds.length];
    i++;
    })
       

a%b将a除以b，并将余数作为其结果。例如，0%5是0，因为0/5是0。1%5是1，因为1/5的整数除法是0余数1。最终我们得到了5%的5，这给了我们1个余数0。这就是为什么当i为0、5、10、15等时，i%backgrounds.length返回到数组的开头时产生0

此图可能有助于：

让背景=[‘红色’、‘蓝色’、‘绿色’、‘紫色’、‘黄色’]； 设i=0； 对于let计数器=0；计数器<10++柜台{ console.logi，backgrounds[i%backgrounds.length]； ++一,； } .as控制台-包装器{ 最大高度：100%！重要；

---

} 模最常用的性质是它是圆形的。这意味着它将从0变为xy%x，然后跳回到零。当需要设置一些边界时，或者在您的情况下，需要从具有恒定长度的数组中获取有效值时，使用它是一种很好的做法