元素分配唯一且不重复的随机颜色
" />
本文介绍如何确保列表项（<li>）逐一获得来自预设颜色数组的不同颜色，避免重复，核心是先对颜色数组进行真正随机打乱，再按顺序一一赋值。
本文介绍如何确保列表项（`
在前端开发中，常需为一组列表项赋予视觉区分度——例如用不同颜色高亮每个 <li>。但若直接在循环中每次调用 Math.random() 从固定颜色池中随机选取，极易导致颜色重复（如多个 <li> 同时变成 red），失去“唯一性”设计初衷。
正确做法是：先对颜色数组做一次真正随机的洗牌（shuffle），再按索引顺序依次分配。这样既保证每个 <li> 获得确定颜色，又确保所有颜色互不重复（前提是颜色数量 ≥ 列表项数量）。
以下是推荐实现方案（使用 Fisher-Yates 算法思想的稳定随机排序）：
const myList = document.querySelector('.myList');
const listItems = myList.querySelectorAll('li');
const itemColors = ['red', 'green', 'royalblue', 'purple', 'cornflowerblue', 'sienna', 'palevioletred', 'orange'];
// ✅ 安全、稳定的随机打乱：避免 sort() 的非规范行为
const shuffledColors = [...itemColors]
.map(color => ({ color, random: Math.random() }))
.sort((a, b) => a.random - b.random)
.map(obj => obj.color);
// 逐项分配，一一对应
listItems.forEach((item, index) => {
item.style.color = shuffledColors[index] || '#333'; // 防御性兜底
});⚠️ 注意事项：
- 不要直接使用 arr.sort(() => Math.random() - 0.5)：该写法依赖引擎对 sort() 比较函数返回值的非标准解释，可能导致分布不均或重复倾向，尤其在 Chrome/V8 中已被证实存在偏差。
- 确保颜色数组长度 ≥ <li> 数量：若颜色少于列表项（如 5 种颜色配 8 个 <li>），则必然重复；此时建议补充颜色、截断列表，或启用循环映射（需额外逻辑）。
- 样式优先级问题：item.style.color 直接设置内联样式，会覆盖 CSS 中的 color 声明；若需兼顾可维护性，推荐改用 CSS 自定义属性或 class 动态切换。
总结：唯一性 ≠ 每次随机，而是「随机一次，顺序分配」。通过先打乱后映射的方式，兼顾简洁性、可预测性与视觉多样性，是处理此类需求的专业实践。
