javascript - JavaScript - 循环遍历一次只显示一个的非重复值
问题描述
我有一个带有按钮的页面,用户可以单击以生成随机报价。
我从这样的事情开始:
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>
但是这个解决方案以及同一篇文章中的替代解决方案会随机化并显示所有引用。我想一次只显示一个。
我怎样才能做到这一点?
解决方案
保留原始引号的持久数组和尚未使用的引号数组。每次单击按钮时,如果它为空,则重新填充未使用的引号,然后从中删除一个随机元素并显示:
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
, not .innerHTML
- 它更安全、更快且更可预测。
推荐阅读
- html - 在反应中使用搜索栏 css
- javascript - 通知显示完全完成后重新加载页面
- c# - HttpClient PostAsync System.Net.Http.HttpRequestException:发送请求时出错
- redis - 如何在异步 tokio 运行时中将 future::join_all 与多路复用的 redis 一起使用
- cython - Cython:如何为包含枚举的代码创建 .pxd 文件?
- c++ - C++、嵌套类、交叉引用
- java - 我怎样才能让我的 JLabel 自动将位置调整到窗口的中心?
- java - DTO有@NotNull时,用ModelMapper映射不抛出异常?
- c++ - 提升多线程异常
- ansible - 如何将变量传递给 Jinja2 2.11.x 包含上下文?