如何从JavaScript数组中随机选取多个不重复元素？

要实现从数组里选多个不重复的随机元素，你可以用下面两种实用方法修改代码：

方法一：动态移除已选元素 #

这种方法会复制原数组，每次选中元素后就从临时数组里移除，确保不会重复选取。

var textArray = [
  "Hello I'm Fred1",
  "Hello I'm Jimmy1",
  "Hello I'm Terry1",
  "Hello I'm Fred2",
  "Hello I'm Jimmy2",
  "Hello I'm Terry2",
  "Hello I'm Fred3",
  "Hello I'm Jimmy3",
  "Hello I'm Terry3"
];

// 获取指定数量的不重复随机元素
function getRandomUniqueElements(arr, count) {
  const tempArr = [...arr]; // 复制原数组，避免修改原数据
  const result = [];
  
  for (let i = 0; i < count; i++) {
    if (tempArr.length === 0) break; // 防止数组元素不足的情况
    const randomIndex = Math.floor(Math.random() * tempArr.length);
    result.push(tempArr.splice(randomIndex, 1)[0]); // 移除并添加到结果
  }
  
  return result;
}

// 选取3个不重复元素（可自行修改数量）
const randomElements = getRandomUniqueElements(textArray, 3);
// 将结果换行显示在页面
document.getElementById("randomNumber").innerHTML = randomElements.join('<br>');

对应的HTML代码不变：

<p id="randomNumber"></p>

方法二：洗牌后截取前N个（Fisher-Yates算法） #

先用经典的Fisher-Yates洗牌算法打乱数组，再截取前N个元素，简单高效。

var textArray = [
  "Hello I'm Fred1",
  "Hello I'm Jimmy1",
  "Hello I'm Terry1",
  "Hello I'm Fred2",
  "Hello I'm Jimmy2",
  "Hello I'm Terry2",
  "Hello I'm Fred3",
  "Hello I'm Jimmy3",
  "Hello I'm Terry3"
];

// Fisher-Yates洗牌算法，打乱数组
function shuffleArray(arr) {
  const tempArr = [...arr];
  for (let i = tempArr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    // 交换两个元素的位置
    [tempArr[i], tempArr[j]] = [tempArr[j], tempArr[i]];
  }
  return tempArr;
}

// 打乱数组后取前3个元素
const shuffledArray = shuffleArray(textArray);
const randomElements = shuffledArray.slice(0, 3);
// 显示结果
document.getElementById("randomNumber").innerHTML = randomElements.join('<br>');

两种方法的适用场景 #

• 方法一：适合需要保留原数组完整性，且可能多次分批选取元素的场景。
• 方法二：适合一次性获取多个随机元素，效率更高，代码逻辑简洁。

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