循环生成唯一配色方案时出现重复颜色问题求助

我尝试通过生成随机数来实现随机配色，将随机数映射到颜色数组，以获取包含字体颜色与背景色的配色数组。
我希望每个「技能项」都拥有独特的配色方案。因此每次遍历knowledges数组时，我会通过随机数从colors数组中获取配色方案；若该配色对应的编号（即随机数）已在usedColors数组中，则重新生成随机数，此逻辑通过do/while循环实现。当找到未使用的配色时，将其编号存入usedColors数组并为技能项应用样式。

但目前仍出现重复颜色的问题，控制台截图显示了usedColors数组（生成的随机数）。

现有代码： #

var usedColors = []; 
$.each(knowledges, (i, knowledge) => { 
    do { 
        var r = Math.floor(Math.random() * Math.floor(colors.length)), 
        rColors = colors[r]; 
    } while ($.inArray(r, usedColors) == 0); 
    usedColors.push(r); 
    $("#knowledges div").append( 
        $("<p />").addClass("knowledge").text(knowledge).css({"background-color": rColors[0], "color": rColors[1]}) 
    ); 
}); 

问题截图： #

• 技能项重复配色展示：
  
• 控制台usedColors数组输出：
  

核心问题：do/while循环的判断逻辑完全搞反了 #

你写的while ($.inArray(r, usedColors) == 0)逻辑刚好和需求相反！

先回忆下$.inArray()的返回规则：

• 如果目标值在数组里，返回它的索引值（>=0）
• 如果目标值不在数组里，返回-1

你的循环现在的意思是：当随机数r不在usedColors数组里（返回-1，不等于0），就跳出循环；只有当r已经被用过且是数组第一个元素（返回0）时，才会重新生成随机数。这就导致绝大多数重复的r被直接加入了usedColors，自然出现重复配色。

修正后的代码 #

把循环条件改成while ($.inArray(r, usedColors) !== -1)，意思是：只要r已经在usedColors里，就一直重新生成随机数，直到找到未使用的编号为止：

var usedColors = []; 
$.each(knowledges, (i, knowledge) => { 
    let r; // 用let声明避免变量提升导致的意外问题
    let rColors;
    do { 
        r = Math.floor(Math.random() * colors.length); // colors.length是整数，无需额外Math.floor
        rColors = colors[r]; 
    } while ($.inArray(r, usedColors) !== -1); // 判断r是否已被使用
    usedColors.push(r); 
    $("#knowledges div").append( 
        $("<p />").addClass("knowledge").text(knowledge).css({
            "background-color": rColors[0], 
            "color": rColors[1]
        }) 
    ); 
}); 

额外优化建议 #

1. 变量声明规范：原来用var在do块里声明变量会被提升到函数顶部，改成let能避免块级作用域的变量覆盖问题。
2. 简化随机数生成：Math.floor(Math.random() * Math.floor(colors.length))可以简化为Math.floor(Math.random() * colors.length)，因为colors.length本身就是整数。
3. 边界情况处理：如果knowledges的长度大于colors的长度，循环会无限执行（没有足够的独特色号），可以提前加判断做降级处理：

if (knowledges.length > colors.length) {
    console.warn("技能项数量超过配色方案数量，无法实现完全独特的配色！");
    // 这里可以添加降级逻辑，比如允许重复配色或截断技能项列表
}

这样修改后，就能保证每个技能项都拿到独一无二的配色啦～

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