JS点击复制按钮随机获取数组不重复元素的实现问题求助

问题根因 #

现有代码每次触发点击事件时，都会从完整的原始数组myArray中随机取值，未对已选中的项目做排除处理，因此会出现重复选中的情况。

修复逻辑 #

• 新增独立的剩余可选项目池，初始状态完整复制原始数组内容，不会修改原始数据源
• 每次点击先校验可选池是否为空：为空则提示所有内容已复制完成，终止后续逻辑避免报错
• 随机取值仅从剩余可选池中获取，选中后立刻将该项从可选池中移除，从根源上避免重复选中
• 补全原代码中未声明的button元素变量，修复潜在的运行报错

修复后可直接运行的代码 #

// 原始数据源
const myArray = ['name1', 'name2', 'name3','name4', 'name5', 'name6', 'name7', 'name8', 'name9', 'name10'];
// 初始化剩余可选池，浅拷贝原始数组不改动源数据
let remainingPool = [...myArray];
// 提前获取按钮DOM元素
const button = document.getElementById('button');

function copyFunction() {
  // 可选池为空时的提示逻辑
  if (remainingPool.length === 0) {
    button.innerText = "所有内容已复制完成";
    return;
  }
  // 从剩余可选池中生成随机索引取数
  const randomIndex = ~~(Math.random() * remainingPool.length);
  const selectedText = remainingPool[randomIndex];
  // 将已选中项从可选池中移除，后续不会再被选中
  remainingPool.splice(randomIndex, 1);

  // 保留原有剪贴板复制逻辑
  const textArea = document.createElement('textarea');
  textArea.textContent = selectedText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  button.innerText = "Text copied";
  textArea.remove();
}

button.addEventListener('click', copyFunction);

可选功能扩展 #

如果需要在所有选项选完后支持重置、开启新一轮随机，只需要修改可选池为空时的判断逻辑即可：

if (remainingPool.length === 0) {
  remainingPool = [...myArray]; // 重新加载原始数据到可选池
  button.innerText = "已重置，可重新点击复制";
  return;
}

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