听起来你需要的只是取模。一旦你确定了一个特定元素的起始索引，就把索引取模数组长度。如果colors数组是colors，那么你可以这样做，

async function cycle(elm, index) {
  while (true) {
    elm.style.backgroundColor = colors[index];
    index = (index + 1) % colors.length;
    await delay(1000);
  }
}
cycle(someElement, 0);
// or
cycle(someOtherElement, 1);
// etc

字符串

只是为了好玩，这个动画在CSS。这个问题被标记为css

.color-change {
  --animation-duration: 5s;
  display: inline-block;
  height: 100px;
  width: 100px;
  animation: colors var(--animation-duration) steps(1, end) infinite;
}
.color-change:nth-child(4n+2) { animation-delay: calc(var(--animation-duration) * -.25) }
.color-change:nth-child(4n+3) { animation-delay: calc(var(--animation-duration) * -.5) }
.color-change:nth-child(4n+4) { animation-delay: calc(var(--animation-duration) * -.75) }

@keyframes colors {
  from,
  to  { background: red; }
  25% { background: blue; }
  50% { background: yellow; }
  75% { background: green; }
}

个字符

你不需要为每个div生成一个新的数组，所以虽然你提出的两个解决方案都可以工作，但第二个是更好的方法。
当为每个div设置初始颜色时，您只需根据当前div的索引选择颜色。
第一个月
由于div可以比颜色多，所以一旦div的索引超过颜色的数量，就需要从数组的开头开始。如CertainPerformance's answer所示，可以使用索引的模数轻松地将索引“循环”回到开头。因此赋值变为：
divs[index].style.backgroundColor = colors[index % colors.length];个
一旦你完成了初始的颜色分配，一种遍历颜色的方法是简单地找到当前颜色的索引并递增1，再次使用模数来遍历颜色。

var currentColor = doc.style.backgroundColor;
var colorIndex = (colors.indexOf(currentColor) + 1) % colors.length;
doc.style.backgroundColor = colors[colorIndex];

字符串
下面是一个完整的例子。

var colors = ['red', 'blue', 'yellow', 'green', 'purple'];

function assignInitialColors() {
  var divs = document.getElementsByClassName("color-change");
  for (var index in divs) {
    var colorIndex = index % colors.length;
    if(divs[index].style) {
      divs[index].style.backgroundColor = colors[colorIndex];
    }
  }

  setInterval(iterateColors, 2000);
}

function iterateColors() {
   var divs = document.getElementsByClassName("color-change");
    for (var index in divs) {
    var doc = divs[index];
    var currentColor = doc.style && doc.style.backgroundColor;
    if (currentColor) {
      var colorIndex = (colors.indexOf(currentColor) + 1) % colors.length;
      doc.style.backgroundColor = colors[colorIndex];
    }
  }
}

assignInitialColors();

div, .color-change {
  min-height: 60px;
  min-width: 60px;
  margin: 5px;
  float: left;
}

<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>
<div class="color-change"></div>