使用模运算符在数组周围进行无限循环

Question

我能够使用取模运算符编写简单的代码，并且我在抽象层面上理解它，但我无法在实际代码中看到 concept/idea。任何人都可以使用我为无限循环更改背景所做的这个简单版本向我解释吗？我真的很感激一些帮助。这和递归真的让我很难受。当我阅读代码时，我根本看不到他们做了什么

let i = 0;

function mud() {
  const doc = document.body;
  let colour = ["#5FA4FF", "#5DA3FF", "#02C2F1", "#2982F8"];
  doc.style.backgroundColor = colour[i];
  i = (i + 1) % colour.length;
}
setInterval(mud, 2000);

Answer 1

正是在这段代码中，它作为无限循环工作，因为 % colour.length 总是会给出一个小于 colour.length 的数字，当你添加 1 时，你只是从 0 至 colour.length（不包括）

Answer 2

% 占据了 division 的剩余部分。这是一个基于您的代码的交互式示例。变量被添加到 div 中，因此您可以看到它们的值随着颜色的变化而变化。

var mod = document.querySelector("#mod");
let i = 0;

function mud() {
    let colour = ["#5FA4FF", "#5DA3FF", "#02C2F1", "#2982F8"];
    mod.style.backgroundColor = colour[i];
    let dividend = (i + 1);
    
    //get the remainder of dividend (i+1) divided by color.length (4)
    i =  dividend % colour.length;
    mod.innerText = JSON.stringify({
        dividend,
        divisor: colour.length,
        remainder:i,
        colorHex: colour[i]
    }, null, 2);
}

setInterval(mud, 2000);

div {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    white-space: pre;
    font-family: monospace;
    padding: 10px;
}

<html>
<body>
    <div id="mod"></div>
</body>

</html>

使用模运算符在数组周围进行无限循环

Using the modulo operator to get an infinite loop around an array

javascript

loops

recursion

modulo