与模运算符混淆

Question

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

//SCRIPT

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

Answer 1

a % b 将 a 除以 b 并取余数作为结果。例如，0 % 5 是 0，因为 0 / 5 是 0 余数 0。 1 % 5 是 1 因为 1 / 5 的整数除法是 0 余数 1。最终我们得到 5 % 5，这给了我们 1 余数 0。这就是为什么当 i 是 0、5、10、[= 时 i % backgrounds.length 产生 0（回到数组的开头） 35=]，依此类推。

此图可能有所帮助：

let backgrounds = ['red', 'royalblue', 'green', 'purple', 'yellow'];
let i = 0;

for (let counter = 0; counter < 10; ++counter) {
    console.log(i, backgrounds[i % backgrounds.length]);
    ++i;
}

.as-console- wrapper {
    max-height: 100% !important;
}

当我这样做时，我通常在增量上执行 % 而不是使用：

console.log(i, backgrounds[i]);
i = (i + 1) % backgrounds.length;

当它达到 5 时将 i 设置回 0。

但这两种方法都有效（好吧...如果 i 变得非常大，第一种方法会失败，但这很少成为问题）。

Answer 2

模数最常用的属性是它是循环的。这意味着它将从 0 到 x (y%x) 然后跳回零。当需要设置一些边界时，或者在您的情况下，从具有恒定长度的数组中获取有效值时，我不是一个好习惯。

与模运算符混淆

Confusion with modulo operator

javascript

arrays

dom

modulo