如何修改JS随机图片抽取函数，用splice移除已选图片避免重复重试

解决方案 #

你一开始的思路完全正确，用splice移除已选中的元素是最高效的方案，之前出错大概率是随机索引还在使用初始的固定数组长度，数组缩短后出现索引越界导致的。修改后的完整代码如下：

// 图片数组初始化
let theImages = [];
for (let i = 0; i <= 25; i++) {
    theImages[i] = "stevejohnson_" + i + ".jpg";
}

// 复制原数组作为待抽取池，不直接修改原数组方便后续重置使用
let remainingImages = [...theImages];

// 随机展示图片函数
function showImage() {
    // 先判断是否还有剩余图片，避免空数组操作报错
    if (remainingImages.length === 0) {
        console.log("所有图片已展示完毕");
        // 如需循环展示可以放开下面的注释重置抽取池
        // remainingImages = [...theImages];
        return;
    }
    // 基于当前剩余图片的长度生成随机索引，不会出现越界问题
    const randomIndex = Math.floor(Math.random() * remainingImages.length);
    // splice返回被删除元素组成的数组，取第一位就是选中的图片
    const selectedImage = remainingImages.splice(randomIndex, 1)[0];
    console.log("选中图片：" + selectedImage);
    document.write('<img src="' + selectedImage + '" alt="A random painting of Steve Johnson">');
}

额外优化建议 #

不建议使用document.write，页面加载完成后调用该方法会清空整个原有页面重写。可以提前在页面中放置画廊容器<div id="gallery"></div>，把插入图片的逻辑替换为：

const gallery = document.getElementById('gallery');
const img = document.createElement('img');
img.src = selectedImage;
img.alt = 'A random painting of Steve Johnson';
gallery.appendChild(img);

不会覆盖原有页面内容，使用体验更好。

内容的提问来源于stack exchange，提问作者Tom