如何为9个按钮分配数组中无重复的颜色？已用洗牌仍重复

问题根源 #

1. 重复洗牌导致重复分配：你在forEach循环里每次都调用shuffleArray，相当于每次循环都重新打乱原数组，然后取第一个元素。这种操作属于随机重复抽取，必然会出现颜色重复的情况。
2. 洗牌函数实现错误：你的shuffleArray里，j的取值范围是0到arr.length-2，最后一个元素永远不会被交换到其他位置，属于错误的Fisher-Yates洗牌实现，打乱效果不彻底。

修正方案 #

第一步：修复洗牌函数

使用标准的Fisher-Yates洗牌算法，确保每个元素都有均等的概率被打乱，同时复制原数组避免污染原始数据：

function shuffleArray(arr) {
  // 复制原数组，避免修改原始数组
  const shuffled = [...arr];
  for (let i = shuffled.length - 1; i > 0; i--) {
    // j的取值范围是0到i（包含i），确保每个元素都能被交换
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
}

第二步：一次性洗牌后分配颜色

只需要打乱一次数组，然后遍历按钮时依次取数组中的对应元素，确保每个颜色仅被使用一次：

// 先得到一次打乱后的无重复颜色数组
const shuffledColors = shuffleArray(wordsForTheGame);
// 遍历按钮，按索引分配对应颜色
batons.forEach((btn, index) => {
  btn.style.backgroundColor = shuffledColors[index];
});

为什么这样有效 #

• 一次性洗牌后，shuffledColors是一个完全打乱的无重复数组（原数组本身无重复）。
• 通过forEach的index参数，每个按钮对应数组里唯一的元素，自然不会出现颜色重复。
• 复制原数组的操作可以保留原始的wordsForTheGame数组，后续需要使用原始颜色列表时不会受影响。

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