如何使用JavaScript按指定循环规则为数组元素分配对应颜色

• switch语法使用错误：switch语句的核心逻辑是将switch()括号内的值和每个case后的值做全等匹配，你当前代码中switch(i)但case后写的是i%1/i%2这类动态计算值，逻辑完全不成立。而且i%1的计算结果永远为0，所以所有元素都会命中第一个case，全部被设置为红色。
• 取模逻辑不符合需求：你需要的是每4个元素为一组循环分配颜色，应该统一用索引对4取模，而非分别对1/2/3/4取模。同时JS数组的forEach回调索引i默认从0开始计数，正好和你预定义的colors数组顺序（红/绿/蓝/黄）一一对应。

简化写法（推荐） #

直接通过取模运算获取colors数组下标，省略冗余的switch语句：

const colors = ['red', 'green', 'blue', 'yellow'];
const arr = [1, 'a', 3, 'b', 55, 69, 71, 8, 91, 10];

arr.forEach((el, i) => {
  const color = colors[i % 4];
  console.log('color:', el, i, color);
});

switch实现版本 #

如果需要保留switch写法，调整判断逻辑即可：

const arr = [1, 'a', 3, 'b', 55, 69, 71, 8, 91, 10];
let color;

arr.forEach((el, i) => {
  switch (i % 4) {
    case 0:
      color = 'red';
      break;
    case 1:
      color = 'green';
      break;
    case 2:
      color = 'blue';
      break;
    case 3:
      color = 'yellow';
      break;
    default:
      color = 'red';
  }
  console.log('color:', el, i, color);
});

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