我有一些代码循环遍历列表元素的集合和颜色的集合。它确保每个列表元素都被指定为一种颜色。
除了模数运算符，我了解这一切。我知道它会找到并使用剩余的号码，但我一生都无法理解它在这里做什么？
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?
}
由于数组中有（可能）更多的项目li，这可以防止i超出colors数组的范围，因为i % colorsCount永远不会结束colorsCount。
例如，如果我们有 10 个元素li和 5 种颜色，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
i % colorsCount会将索引的边界设置在 0 和 colorsCount-1 之间，从而确保您永远不会索引超出数组的末尾。
因为 mod 是余数，所以余数永远不能大于除数（在这种情况下，是数组的长度）。
您从 0 迭代直到您拥有多少个li元素。对于此示例，假设为 10。
然后，您查看数组并通过数组中有多少项来colors查找该迭代的元素 ( ) 和模数。icolors
简而言之，这就是正在发生的事情：
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];
ETC
如果你想知道为什么它永远不会访问数组之外的元素，答案是因为 asi越大，结果就越小。
例如，采取迭代8：
8 % 5 = 3
（迭代 8 次，数组中有 5 个元素）
因此，您正在访问colors[3];
也许这个片段可以帮助你理解：
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
...
它在循环你的颜色。因为您只有有限数量的颜色和任意数量的可能列表项，所以它确保i不会溢出colors数组的边界。
模运算符返回除法的余数。它允许您循环并重用颜色数组，即使数组中的颜色可能少于列表中要着色的元素。
如果长度是 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 运算符返回的，它们总是小于颜色数组的长度。
为什么
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
模运算的结果是左操作数除以右操作数后的余数。
因此，有问题的代码行将始终返回 0 和 colorsCount-1 之间的某个数字。