时间戳

首页 > 解决方案 > 与模运算符混淆

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++;
    })

标签： javascriptarraysdommodulo

解决方案

a % b进行整数除法并a取b余数作为结果。例如，0 % 5是0因为0 / 5是0余数0。1 % 5是1因为整数除法1 / 5是0余数1。最终我们得到了5 % 5which 给了我们1余数0。这就是为什么在is 、、、等时i % backgrounds.length产生0（回到数组的开头）的原因。i051015

此插图可能会有所帮助：

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;

回到i到达0时5。

i但两种方式都有效（嗯......如果变得非常大，第一种方式会失败，但这很少是问题）。

推荐阅读