Question

我有一些代码循环遍历一系列列表元素和一组颜色。它确保每个列表元素都指定为一种颜色。

除模数运算符外，我对此一无所知。我知道它找到并使用剩余的数字，但我不能为我的生活理解它在做什么这里？

var li = document.getElementsByTagName('li');
var colors = ["salmon", "teal", "orange", "grey", "blue"];
var colorsCount = colors.length;

for ( var i = 0; i < li.length; i++ ) {
    li[i].style.backgroundColor = colors[ i % colorsCount  ]; // why does this work?
}

Answer 1

由于li数组中（可能）有大量项目，因此这会阻止i超出colors数组的范围，因为i % colorsCount永远不能超过colorsCount。

例如，如果我们在li和5种颜色中有10个元素，那么i % colorsCount将是：

i     i % colorsCount     Color
-------------------------------
0     0                   salmon
1     1                   teal
2     2                   orange
3     3                   grey
4     4                   blue
5     0                   salmon
6     1                   teal
7     2                   orange
8     3                   grey
9     4                   blue

More Information on Modulo Operations.

Answer 2

i % colorsCount会将索引的边界设置为介于0和colorsCount-1之间，从而确保您永远不会索引超出数组的末尾。

因为mod是余数，所以余数永远不会大于除数（在这种情况下，它是数组的长度）。

Answer 3

您从0迭代到您拥有的li个元素。对于这个例子，比如10。

然后查看colors数组，找到该迭代的元素（i）和模数colors数组中的项目数。

简而言之，这就是发生的事情：

var colorsCount = 10;

1 % 10 = 1 // ... Access colors[1]; (teal)
2 % 10 = 2 // .... Access colors[2]; (orange)
3 % 10 = 3 // .... Access colors[3]; (grey)
4 % 10 = 4 // .... Access colors[4]; (blue)
5 % 10 = 5 // .... Access colors[5];

等

如果您想知道它为什么永远不会访问数组之外的元素，那么答案是因为i越大，结果就越小。

例如，进行迭代8：

   8 % 5 = 3

（迭代8，数组中的5个元素）

因此您正在访问colors[3];

Answer 4

也许这段代码可以帮助您理解：

var s = ''
for (var i = 0; i < 20; i ++) {
    s += (i % 5) + ', '
}
console.log(s)

结果是：

0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0, 1, 2, 3, 4,

请注意每次到达0时，该号码会重置为5。 % colors.length只是确保索引永远不会超过数组的长度。

更具描述性的理解方式：

0 % 5: 0/5 = 0, remainder 0
1 % 5: 1/5 = 1/5, remainder 1
...
5 % 5: 5/5 = 1, remainder 0
6 % 5: 6/5 = 1 1/5, remainder 1
7 % 5: 7/5 = 1 2/5, remainder 2
...

Answer 5

它会循环你的颜色。由于您只有有限数量的颜色和任意数量的可能列表项，因此确保i不会溢出colors数组的范围。

Answer 6

模数运算符返回除法的余数。它允许您循环并重用颜色数组，即使数组中的颜色可能比列表中的元素颜色要少。

如果长度为8，

5 % 1 == (5 / 1) = 0 remainder 1
5 % 2 == (5 / 2) = 0 remainder 2
5 % 3 == (5 / 3) = 0 remainder 3
5 % 4 == (5 / 4) = 0 remainder 4
5 % 5 == (5 / 5) = 1 remainder 0
5 % 6 == (5 / 6) = 1 remainder 1
5 % 8 == (5 / 7) = 1 remainder 2
5 % 7 == (5 / 8) = 1 remainder 3

正如你所看到的，余数是mod运算符返回的，它们总是小于colors数组的长度。

Answer 7

为什么i % colorsCount有效？

它做什么

此代码循环显示colors。它使用模数运算符来确保您始终在数组的范围内。

它是如何做到的

模数运算找到一个数除以另一个数的余数。

在您的情况下，将i模数colorsCount：

0 % 5; // 0
1 % 5; // 1
1 % 5; // 2
3 % 5; // 3
4 % 5; // 4
5 % 5; // 0
8 % 5; // 3

Answer 8

模运算的结果是左操作数除以右操作数后的余数。

因此，有问题的代码行将始终返回介于0和colorsCount-1之间的某个数字。

理解模数运算符

8 个答案:

它做什么

它是如何做到的