JavaScript：使用Set高效生成不重复随机数的教程-html教程-PHP中文网

JavaScript：使用Set高效生成不重复随机数的教程

聖光之護

发布： 2025-11-11 11:56:42

原创

235人浏览过

JavaScript：使用Set高效生成不重复随机数的教程

在javascript中生成指定范围内不重复的随机数是常见的开发需求，但传统的随机数生成方法容易导致重复。本文将深入探讨如何利用es6的set数据结构，高效且简洁地实现这一功能。通过结合set自动维护元素唯一性的特性，我们可以轻松解决随机数重复问题，并提供完整的代码示例及重要注意事项，确保生成的随机数列表始终包含唯一的数字。

理解随机数生成中的重复问题

在Web开发中，例如进行抽奖、生成验证码或游戏逻辑时，我们经常需要生成一组随机数。然而，如果仅仅依赖Math.random()和Math.floor()来生成，当需要生成多个随机数时，很可能会遇到重复的数字。

考虑以下一个简单的抽奖函数示例：

function sorteio() {
  const numeroAleatorio = (min, max) => {
    // 原始实现，直接生成一个随机数，不检查重复
    return Math.floor(Math.random() * 59 + 1)
  };

  const gerarNumerosEntre1a60 = n => {
    const resultado = [];
    for (let i = 0; i < n; ++i) {
      // 每次循环都向数组添加一个随机数
      resultado.push(numeroAleatorio(1, 60));
    }
    return resultado;
  }

  document.getElementById("resultado").innerHTML = gerarNumerosEntre1a60(6);
}

登录后复制

以及对应的HTML：

<button onclick="sorteio()">Sortear numeros!</button>
<h1 id="resultado"></h1>

登录后复制

上述代码中，gerarNumerosEntre1a60函数通过循环调用numeroAleatorio来生成指定数量的随机数，并将它们添加到resultado数组中。然而，这种方法并没有任何机制来检查新生成的数字是否已经存在于resultado数组中，因此，多次点击按钮很可能会看到输出结果中包含重复的数字。

立即学习“Java免费学习笔记（深入）”；

使用Set解决重复问题

为了解决随机数重复的问题，我们可以利用JavaScript ES6引入的Set数据结构。Set是一种不允许存储重复值的数据集合。当你尝试向Set中添加一个已经存在的值时，Set会忽略这个操作，从而天然地保证了其内部元素的唯一性。

这使得Set成为生成不重复随机数的理想工具。我们可以持续生成随机数，并尝试将它们添加到Set中，直到Set的大小达到我们所需的数量为止。

以下是使用Set重构后的解决方案：

function sorteio() {
  /**
   * 生成指定范围内不重复的随机数
   * @param {number} min - 随机数的最小值（包含）
   * @param {number} max - 随机数的最大值（包含）
   * @param {number} count - 需要生成的随机数数量
   * @returns {Array<number>} 包含不重复随机数的数组
   */
  const getRandom = (min, max, count) => {
    const result = new Set(); // 使用Set来存储结果，自动处理重复

    // 循环直到Set的大小达到所需的数量
    while (result.size < count) {
      // 生成一个介于min和max（包含）之间的随机整数
      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
      result.add(randomNumber); // 将随机数添加到Set中，如果已存在则不添加
    }

    // 将Set转换回数组并返回
    return [...result]; 
  };

  const gerarNumerosEntre1a60 = n => {
    // 调用新的getRandom函数来生成不重复的随机数
    const resultado = getRandom(1, 60, n);
    return resultado;
  }

  document.getElementById("resultado").innerHTML = gerarNumerosEntre1a60(6).join(', '); // 使用join美化输出
}

登录后复制

对应的HTML部分保持不变：

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

<button onclick="sorteio()">Sortear numeros!</button>
<h1 id="resultado"></h1>

登录后复制

在这个优化后的sorteio函数中：

getRandom(min, max, count)函数：
- 初始化一个空的Set对象 result。
- 使用while (result.size < count)循环。只要Set中的元素数量未达到count，就继续生成随机数。
- 在循环内部，Math.floor(Math.random() * (max - min + 1)) + min 用于生成一个介于min和max（包含）之间的随机整数。max - min + 1确保了max值也能被选中。
- result.add(randomNumber)尝试将生成的随机数添加到Set中。如果randomNumber已经存在于Set中，add操作将不会有任何效果，Set的大小也不会改变，从而保证了唯一性。
- 一旦result.size达到count，循环结束。
- [...result]是一个ES6的扩展运算符用法，它将Set对象转换回一个数组并返回。
gerarNumerosEntre1a60函数：
- 现在它直接调用getRandom函数，传入所需的范围（1到60）和数量（n），并接收一个保证不重复的随机数数组。
输出优化：
- gerarNumerosEntre1a60(6).join(', ')将生成的数组元素用逗号和空格连接起来，使得在<h1>标签中的显示更加清晰易读。

注意事项

在使用Set生成不重复随机数时，需要注意一个重要方面：

count与可能值范围的关系： getRandom函数是一个“朴素”的实现，它没有检查 count 是否大于 max - min + 1（即所有可能的唯一值的总数）。如果 count 设置得比 max - min + 1 还大，那么 while (result.size < count) 循环将永远无法满足条件，导致无限循环。例如，如果你尝试在1到5的范围内生成10个不重复的随机数，这是不可能实现的，因为该范围只有5个唯一的数字。在这种情况下，程序将陷入死循环。

最佳实践：在调用getRandom之前，应该添加一个检查来确保count不超过max - min + 1。

const getRandom = (min, max, count) => {
  const possibleValuesCount = max - min + 1;
  if (count > possibleValuesCount) {
    console.warn(`警告：请求生成${count}个不重复随机数，但可能范围（${min}到${max}）只有${possibleValuesCount}个唯一值。将返回所有可能的值。`);
    // 或者抛出错误：throw new Error("请求数量超出可能值的范围");
    count = possibleValuesCount; // 限制为所有可能的值
  }

  const result = new Set();
  while (result.size < count) {
    const randomNumber = Math.floor(Math.random() * possibleValuesCount) + min;
    result.add(randomNumber);
  }
  return [...result];
};

登录后复制

总结

通过利用JavaScript Set数据结构自动维护元素唯一性的特性，我们可以非常高效和简洁地实现指定范围内不重复随机数的生成。这种方法比手动检查数组中是否存在重复值要更为优雅和性能更优。在实际应用中，请务必考虑请求生成数量与可能值范围的关系，以避免潜在的无限循环问题，从而构建出更健壮的随机数生成功能。

以上就是JavaScript：使用Set高效生成不重复随机数的教程的详细内容，更多请关注php中文网其它相关文章！