如何为每个<li>元素分配随机且不重复的颜色

嘿，我看你现在的代码会出现重复颜色的问题，这是因为每次循环都直接从原颜色数组里随机选取，并没有把已经用过的颜色排除掉。想要实现每个列表项颜色唯一且随机，咱们可以用「洗牌算法」先把颜色数组打乱顺序，再依次分配给列表项，这样就完美解决重复问题啦！

解决方案思路 #

1. 先实现一个可靠的数组洗牌函数（推荐用Fisher-Yates洗牌算法，它能真正随机打乱数组元素，比简单的sort(() => Math.random() - 0.5)更稳定）
2. 用洗牌函数打乱你的颜色数组
3. 遍历列表项，按打乱后的数组顺序逐个分配颜色

修改后的完整代码 #

<ul class="myList">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Soup</li>
  <li>Juice</li>
  <li>Beer</li>
  <li>Wine</li>
  <li>Soda</li>
</ul>

<script>
const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple','cornflowerblue', 'sienna','palevioletred','orange'];

// Fisher-Yates 洗牌函数：打乱数组顺序
function shuffleArray(array) {
  const newArray = [...array]; // 复制原数组，避免修改原数据
  for (let i = newArray.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
  }
  return newArray;
}

// 打乱颜色数组
const shuffledColors = shuffleArray(itemColors);

// 逐个分配颜色
listItems.forEach((item, index) => {
  item.style.color = shuffledColors[index];
});
</script>

为什么原来的代码会重复？ #

你原来的写法每次循环都从原数组里随机选一个元素，相当于每次都有概率选中已经用过的颜色。而洗牌后，颜色数组变成了一个随机排列的新数组，每个颜色只会出现一次，按顺序分配就不会有重复啦～

备注：内容来源于stack exchange，提问作者Ahmed