JavaScript - 循环遍历一次只显示一个的非重复值

Question

我有一个带有按钮的页面，用户可以单击该按钮以生成随机报价。

我从这样的事情开始：

function randomize() {
var myrandom = Math.round(Math.random() * 4)
if (myrandom == 0)
document.getElementById("randomQuote").innerHTML = "Quote 01"
else if (myrandom == 1)
document.getElementById("randomQuote").innerHTML = "Quote 02"
else if (myrandom == 2)
document.getElementById("randomQuote").innerHTML = "Quote 03"
else if (myrandom == 3)
document.getElementById("randomQuote").innerHTML = "Quote 04"
else if (myrandom == 4)
document.getElementById("randomQuote").innerHTML = "Quote 05"
}

<p><button onclick="randomize()" type="button">Random Quote</button></p>
<p id="randomQuote"></p>

但是由于我不想重复引号(至少在所有这些引号都显示一次之前(，并且在看完这篇文章后，我尝试了以下内容：

function randomize() {
var quotes = ["Quote 01", "Quote 02", "Quote 03", "Quote 04", "Quote 05"],
ranQuotes = [],
i = quotes.length,
j = 0;
while (i--) {
j = Math.floor(Math.random() * (i + 1));
ranQuotes.push(quotes[j]);
quotes.splice(j, 1);
}
document.getElementById("randomQuote").innerHTML = ranQuotes;
}

<p><button onclick="randomize()" type="button">Random Quote</button></p>
<p id="randomQuote"></p>

但是这个解决方案，以及同一帖子中的替代解决方案，随机化并显示所有报价。我一次只想显示一个。

我该怎么做？

Answer 1

保留原始引号的持久数组和尚未使用的引号数组。每次单击按钮时，如果未使用的引号为空，请重新填充该引号，然后从中删除一个随机元素并显示：

const p = document.getElementById("randomQuote");
const origQuotes = ["Quote 01", "Quote 02", "Quote 03", "Quote 04", "Quote 05"];
let remainingQuotes = [];
function randomize() {
if (remainingQuotes.length === 0) remainingQuotes = origQuotes.slice();
const { length } = remainingQuotes;
const [quote] = remainingQuotes.splice(Math.floor(Math.random() * length), 1);
p.textContent = quote;
}

<p><button onclick="randomize()" type="button">Random Quote</button></p>
<p id="randomQuote"></p>

请注意，除非您有意插入 HTML 标记，否则您应该分配给.textContent，而不是.innerHTML- 它更安全、更快、更可预测。