如何创建一个列表项目随机化器，但只显示一次项目

Question

我想制作一个只显示该项一次的列表项随机化器。我有一个基本的随机发生器，可以从数组中提取，但当我点击按钮时，它会继续循环遍历每个项目。有没有一种方法可以让每个项目只显示一次，然后停止和/或显示类似"；列表覆盖"；一旦完成？我的js技能非常基础。。。

js随机化器代码：

var techniques = [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
]
function newTechnique() {
var randomNumber = Math.floor(Math.random() * (techniques.length));
document.getElementById('techDisplay').innerHTML = techniques[randomNumber];
}

和html

<div id="techDisplay"></div>
<button onclick="newTechnique()">New Technique</button>

我还想知道是否有更好的方法来提取数据，比如使用xml之类的？我打算在列表中可能有50多个项目，这在js中可能会变得很麻烦。请提前通知我并表示感谢！

Answer 1

只需先打乱数组即可。这被称为"杜斯滕菲尔德洗牌"。

为了回答您是否应该通过XML或其他方式获取数据，我想考虑一下是否只制作一个JSON文件。在提取1000条记录中的100条之前，您绝对不会遇到性能问题，因此，如果您使用的数据量如此之少，甚至不用担心性能问题。就我个人而言，我通常会保留一个单独的文件，其中包含返回我所需的所有初始数据的函数，或者您可以创建一个JSON文件，并在打开应用程序后立即导入它。

如何随机化(搅乱)JavaScript数组？

let techniques = [
"item 1",
"item 2",
"item 3",
"item 4",
"item 5"
];
let techniquesRandom = shuffleArray(techniques);
console.log(techniquesRandom);
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

Answer 2

以下是您正在寻找的功能的代码

const techniques = [
'Currently showing item 1',
'Currently showing item 2',
'Currently showing item 3',
'Currently showing item 4',
'Currently showing item 5',
'Currently showing item 6'
];
let flags = techniques.map(() => false);
function getNotShownNumber() {
let whichItemToShow;
const allAreTrue = flags.every((v) => v === true);
if (!allAreTrue) {
let value = true;
do {
const randomNumber = Math.floor(Math.random() * techniques.length);
const alreadyShown = flags[randomNumber];
if (!alreadyShown) {
flags[randomNumber] = true;
whichItemToShow = randomNumber;
value = false;
}
} while (value);
} else {
whichItemToShow = 'Completed';
}
return whichItemToShow;
}
function newTechnique() {
const number = getNotShownNumber();
const content =
number === 'Completed' ? 'List Over' : techniques[number];
document.getElementById('techDisplay').innerHTML = content;
}

<div id="techDisplay"></div>
<button onclick="newTechnique()">New Technique</button>

Answer 3

如果我理解你的意思，你的意思是你想随机化数组项：这是代码

function shuffle(array) {
randoms = [Math.trunc(Math.random() * array.length)];
let length = array.length;
while (randoms.length != length) {
for (let i = 0; i < array.length; i++) {
r = Math.trunc(Math.random() * array.length);
if (!randoms.includes(r)) {
randoms.push(r);
}
}
}
let result = [];
for (let b = 0; b < array.length; b++) {
result.push(array[randoms[b]]);
}
return result;
}