使用javascript math.floor(math.random)函数从文件夹中随机加载图像，但不重复

Question

我是javascript和webdev的新手。我也是新来的stackoverflow。太棒了！

我发现了一段javascript代码，它对我正在努力实现的目标非常有效。脚本显示文件夹中的随机图像，但我需要它不重复图像。

这就是剧本。

var random_images_array = ["smile.gif", "frown.gif", "grim.gif", "bomb.gif"];
function getRandomImage(imgAr, path) {
path = path || "images/";
// default path here
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}

我只是不知道如何使它不重复图像。我在网上读过一些解决方案，但我想我还没有完全掌握并重新创建一个有效的解决方案。

Answer 1

拾取后从阵列中移除图像

var random_images_array = ["smile.gif", "frown.gif", "grim.gif", "bomb.gif"];
function getRandomImage(path) {
path = path || "images/";
// default path here
var num = Math.floor(Math.random() * random_images_array.length);
var img = random_images_array[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
/* remove  1 item from index <num> */
random_images_array.splice(num, 1);
document.body.innerHTML += imgStr;

}

或者打乱数组，每次调用函数时，只使用pop()检索一个元素，直到数组不为空。

Answer 2

试试这个：每次输出图像时，它都会被添加到usedImages阵列中，然后在输出新图像之前，通过与新阵列(usedImages(进行比较来检查是否已经使用

var random_images_array = [
"smile.gif",
"frown.gif",
"grim.gif",
"bomb.gif",
];
let usedImages = [];
function getRandomImage(imgAr, path) {
path = path || "images/";
// default path here
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
if (usedImages.includes(imgStr)) {
console.log("in there");
} else {
usedImages.push(imgStr);
console.log(`Used Images: ${usedImages}`);
}
document.close();
}