如何从颜色阵列中随机选择而不重复?

时间:2019-05-10 20:47:31

标签: javascript arrays

我正在映射15个用户的数组,并为每个用户创建一个表格行,并希望能够从我主题的颜色数组中为每个用户选择随机颜色(总共4种颜色)。获得唯一颜色以使两种相同颜色最终不会相邻出现的最有效方法是什么?

还可以使其在更大范围内看起来尽可能随机吗?我的意思是说,看起来好像我没有按顺序浏览4种颜色,而最终每隔4个用户我得到的图案相同。

1 个答案:

答案 0 :(得分:0)

问题用不同的措词是:

  

如何选择Array中的随机索引,而不是先前选择的索引?

解决方案是简单地记住上一个,并选择一个不同的索引直到它不相同为止。这是执行此操作的某种通用解决方案:

function randomOver(arr) {
  let last = 0 
  return () => {
    let i = last
    while (i == last) i = Math.floor(Math.random() * arr.length)
    return last = i
  }
}

const colors = ['pink', 'violet', 'coral', 'khaki'],
      getIndex = randomOver(colors),
      list = document.getElementById('list')
for (let i = 0; i < 15; i++) {
  const e = document.createElement('tr'),
        x = getIndex()
  e.textContent = 'user' + i 
  e.style.backgroundColor = colors[x]
  list.appendChild(e)
}
<table id='list'></table>

这是尽可能随机的。不过,外观好吗?我不确定