javascript - 在 .forEach() 循环中调用唯一的随机值

Question

我有一个函数可以从颜色数组中选择随机颜色。

const dynamicColors = () => {
  const colors = ['#FFC100', '#FF7400', '#FF0000', '#4BBDAD', '#0C1938', '#848483'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  return randomColor;
};

然后我从 .forEach() 循环中调用此函数。

traitInfo.forEach((t) => {
    const trait = {
      id: t.id,
      label: t.label,
      lineTension: 0.1,
      fill: false,
      backgroundColor: dynamicColors(),
      borderCapStyle: 'square',
      borderJoinStyle: 'miter',
      pointHoverRadius: 8,
      pointRadius: 4,
      pointHitRadius: 10,
      data: [],
    };
    traitDatasets.push(trait);
  });

我正在创建一个图表，使用上述技术当然会渲染图表中相同的两种或多种颜色，这会导致用户体验不佳。

所需的输出是让 backgroundColor 依次显示数组中的每种颜色。 traitInfo 的值永远不会超过六个。

Answer 1

const randomly = () => Math.random() - 0.5;
const colors = ['#FFC100','#FF7400','#FF0000','#4BBDAD','#0C1938','#848483'];

const traitInfo = Array(6).fill({}); // for the snippet.
const dynamicColors = [].concat(colors).sort(randomly);

traitInfo.forEach((t, i) => {
  console.info(dynamicColors[i]);
});