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>

但是因为我不想重复这些引号(至少在所有引号都显示一次之前)，并且在查看 this post 之后我尝试了以下方法:

        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 - 它更安全、更快且更可预测。