如何控制JS随机生成图片的出现次数以满足自定义数量需求

核心思路是预先生成完全符合次数规则的图片队列，打乱后按顺序取用，这种方式可以完全规避随机概率导致的次数偏差，所有自定义规则都能100%满足。

实现代码 #

// 自定义规则配置，可按需修改
const imageConfig = {
  // 可选：指定总生成图片数量，不足部分会从无规则限制的图片中随机填充
  totalCount: 20,
  // 单张图片固定出现次数规则：key为图片编号，value为要求的出现次数
  singleRule: {
    1: 4 // 对应1.png恰好渲染4次的需求
  },
  // 多图合计出现次数规则：每个分组指定图片列表和合计要求次数
  groupRule: [
    {
      images: [5,6],
      total: 10 // 对应5.png与6.png合计出现10次的需求
    }
  ],
  // 所有可选图片的编号范围
  allImages: Array.from({length:10}, (_,i)=>i+1)
}

// 内部方法：生成符合所有规则的随机图片队列
function generateImageQueue(config) {
  const queue = []
  // 处理单图固定次数规则
  Object.entries(config.singleRule).forEach(([imgId, count]) => {
    queue.push(...Array(count).fill(`${imgId}.png`))
  })
  // 处理多图合计次数规则，分组内随机分配次数
  config.groupRule.forEach(group => {
    let remainingCount = group.total
    const groupImgLength = group.images.length
    group.images.forEach((imgId, index) => {
      // 最后一张图分配剩余所有次数，保证合计数准确
      const currentCount = index === groupImgLength - 1 
        ? remainingCount 
        : Math.floor(Math.random() * (remainingCount + 1))
      queue.push(...Array(currentCount).fill(`${imgId}.png`))
      remainingCount -= currentCount
    })
  })
  // 配置了总张数时补全空位
  if(config.totalCount && queue.length < config.totalCount) {
    // 筛选出没有规则限制的可用图片
    const usedImages = new Set([
      ...Object.keys(config.singleRule).map(Number),
      ...config.groupRule.flatMap(g => g.images)
    ])
    const availableImages = config.allImages.filter(id => !usedImages.has(id))
    // 随机填充到总张数
    const needFillCount = config.totalCount - queue.length
    for(let i=0; i<needFillCount; i++) {
      const randomImgId = availableImages[Math.floor(Math.random() * availableImages.length)]
      queue.push(`${randomImgId}.png`)
    }
  }
  // Fisher-Yates 洗牌算法打乱队列顺序，实现随机效果
  for(let i = queue.length - 1; i > 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1))
    ;[queue[i], queue[randomIndex]] = [queue[randomIndex], queue[i]]
  }
  return queue
}

// 初始化队列
let imageQueue = generateImageQueue(imageConfig)
// 对外调用方法，和原有RandomImage用法完全兼容
function RandomImage() {
  // 队列用完自动重新生成符合规则的新队列
  if(imageQueue.length === 0) {
    imageQueue = generateImageQueue(imageConfig)
  }
  return imageQueue.pop()
}

配置说明 #

• 新增单图固定次数要求直接在singleRule中添加键值对即可
• 新增多图合计次数要求直接在groupRule中添加新的分组配置即可
• 不需要补全到固定总张数时，删除totalCount配置项即可，生成的队列长度就是所有规则指定的总次数

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