如何正确使用for循环？实现15个div循环取用数组背景色

你的问题出在当循环变量i超过颜色数组的最大索引（也就是4）时，color[i]会返回undefined。要实现颜色的循环复用，只需要用**取模运算符（%）**来计算数组的循环索引。

修改后的代码如下：

let color = ["yellow", "green", "red", "blue", "orange"];

for (var i = 0; i < 15; i++) { // 把<=15改成<15，刚好创建15个div
    document.write("<div style='background:" + color[i % color.length] + "'></div> ");
}

原理说明： #

• i % color.length会计算i除以数组长度的余数，数组长度是5，所以余数始终在0-4之间循环：
  • 当i=0 → 0%5=0 → 取yellow
  • 当i=5 →5%5=0 → 再次取yellow
  • 当i=6 →6%5=1 → 取green
  • 以此类推，直到创建完15个div，颜色会按数组顺序循环使用。

另外补充：原代码里i <=15会创建16个div（从i=0到i=15），如果需要刚好15个，改成i <15更准确。

内容的提问来源于stack exchange，提问作者Pasha