Javascript 使用循环随机获取新颜色

我试图通过生成随机数，然后应用 将其转换为数组以获取包含字体颜色和背景颜色的颜色数组

在每一个“技能”我想有独特的配色方案。所以每次我循环技能数组，我循环颜色数组来获取颜色方案。如果此配色方案编号（与随机编号相同）已在使用中，我将再次使用随机编号。我使用do/while循环来实现这一点。当找不到颜色时，它将其推送到usedColors数组并绘制图片

由于某种原因，我仍然得到相同的颜色。我在底部贴了两张照片。Console.log映像是关于usedColors数组（随机生成的数字）

var usedColors=[]；
$.each（知识，（i，知识）=>{
做{
var r=Math.floor（Math.random（）*Math.floor（colors.length）），
r颜色=颜色[r]；
}而（$.inArray（r，usedColors）==0）；
使用颜色。推（r）；
$（“#知识部”）。附加（
$（“
”）addClass（“知识”）.text（knowledge）.css（{“背景色”：rColors[0]，“颜色”：rColors[1]}）
);
});

---

inaray

给出匹配元素的位置。因此，请与-1进行比较，以了解元素不存在于usedColors数组中

var usedColors=[]；
$.each（知识，（i，知识）=>{
做{
var r=Math.floor（Math.random（）*Math.floor（colors.length）），
r颜色=颜色[r]；
}而（$.inArray（r，usedColors）！=-1）；
使用颜色。推（r）；
$（“#知识部”）。附加（
$（“
”）addClass（“知识”）.text（knowledge）.css（{“背景色”：rColors[0]，“颜色”：rColors[1]}）
);
});在while循环中，是否检查数组是否唯一？如果是这样，看起来您可能没有正确使用$.inArray

将其放入while循环：
$。inArray（r，usedColors）！=-1

要从特定间隔生成唯一数字数组，可以这样做。
在您的情况下，范围为
0，arr.length-1


//将在开始和结束之间生成随机唯一随机数的函数
//结束，并将已生成的编号存储在闭包中
函数generateUniqueRandom（开始、结束）{
使用的常量=[]；
函数生成器（）{
让r；
而（！r）{
r=Math.floor（Math.random（）*（结束-开始）+1）+开始；
如果（已使用，包括（r））{
r=null；
}否则{
使用。推（r）；
}
}
返回r；
}
返回发生器；
}
const random1=generateUniqueRandom（0,20）；
常量nums1=[]；
for（设i=0；i<10；i++）{
nums1.push（random1（））；
}
console.log（nums1）；
const random2=generateUniqueRandom（0,20）；
常量nums2=[]；
for（设i=0；i<20；i++）{
nums2.push（random2（））；
}
console.log（nums2）我认为你的循环方法有很多交互作用，我的意思是你的循环太频繁了，直到你找到数组中不存在的随机数为止（
一个短期性能问题
）。另一种方法是使数组元素是随机的：


函数shufflearlay（a）{
对于（设i=a.length-1；i>0；i--）{
常数j=数学楼层（数学随机（）*（i+1））；
[a[i]，a[j]=[a[j]，a[i]]；
}
返回a；
}
常量颜色=[“黑色”、“绿色”]、[“白色”、“蓝色”]、[“粉色”、“白色”]；
让usedColors=shuffleArray（颜色）；
//您现在可以执行以下操作：
$.each（知识，（i，知识）=>{
$（“#知识部”）。附加（
$（“
”）addClass（“知识”）.text（knowledge）.css（{“背景色”：usedColors[i][0]，“颜色”：usedColors[i][1]}）
);
});
我没有使用jQuery
inArray
函数，但是文档说：“如果数组中的第一个元素与值匹配，$.inArray（）返回0。”看起来您只是在检查值是否与第一个元素匹配。您需要检查它是否不等于（或大于）-1。其他人已经为您的问题提供了可能的解决方案。另一种算法是重新排列颜色数组，然后只使用颜色[i]获得随机颜色
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]})
          );
    });