如何编写循环随机生成器：遍历完消息数组前不重复抽取条目

实现逻辑 #

• 保留原始名言数组作为不可修改的基准数据源，用于重置抽取池
• 额外维护一个动态的剩余可抽取列表，每次抽取后移除已展示的条目
• 剩余列表为空时，自动用基准数据源重置列表，开启新一轮抽取

修复后完整代码 #

JS代码 #

let btn = document.getElementById('btn');
let output = document.getElementById('output');

// 原始名言基准库，固定不做修改
const originalQuotes = [
  '人无完人——这就是铅笔自带橡皮擦的原因。- 沃尔夫冈·里贝',
  '不要惧怕完美，你永远都达不到它。- 萨尔瓦多·达利',
  '再高的山也是由小石头堆成的。- 《一拳超人》引言',
  '先跑通，再优化，最后提性能，永远遵守这个顺序！- kiraa',
  '优秀的程序员即使过单行道也会左右都看一眼。- 道格·林德',
  '如果说调试是移除软件bug的过程，那编程就是把bug写进去的过程。- 艾兹格·W·迪杰斯特拉',
];
// 剩余可抽取列表，初始为基准库的拷贝
let availableQuotes = [...originalQuotes];

btn.addEventListener('click', function() {
  // 剩余列表为空时自动重置
  if (availableQuotes.length === 0) {
    availableQuotes = [...originalQuotes];
  }
  // 随机生成剩余列表范围内的索引
  const randomIndex = Math.floor(Math.random() * availableQuotes.length);
  // 取出对应名言
  const randomQuote = availableQuotes[randomIndex];
  // 展示内容
  output.innerHTML = randomQuote;
  // 从剩余列表中移除已抽取的条目，避免重复
  availableQuotes.splice(randomIndex, 1);
})

CSS代码（修复了原代码中output选择器缺失#导致样式不生效的问题） #

#container {
  background-color: mediumpurple;
  border: 5px solid white;
  height: 300px;
  width: 700px;
  margin: 0 auto;
  text-align: center;
  border-radius: 25px;
}
#btn {
  margin:  50px auto;
  height: 50px;
  width: 250px;
  font-size: 20px;
  background-color: white;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  border-radius: 30px;
}

#output {
  margin: 25px auto;
  font-size: 20px;
  color: white
}

HTML代码 #

<div id="container">
  <button id="btn">获取你的今日寄语</button>

  <div id="output">点击按钮试试 :)</div>
</div>

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