使用Set实现JavaScript不重复随机数生成

使用Set实现JavaScript不重复随机数生成

本文将探讨在javascript中生成指定数量不重复随机数的方法。针对传统随机数生成可能出现重复的问题,我们将介绍如何利用javascript的set数据结构高效地确保生成数字的唯一性,并提供详细的代码示例及实现解析,帮助开发者构建可靠的随机数生成器。

在许多应用场景中,我们需要生成一系列随机数,并且要求这些随机数是唯一的,例如抽奖号码、验证码或游戏中的随机事件选择。然而,直接使用 Math.random() 结合 Math.floor() 生成随机数时,在多次调用后很有可能产生重复的数字,尤其是在生成数量相对较多的随机数时。

传统随机数生成的问题

考虑以下一个简单的随机数生成函数:

function sorteio() {  const numeroAleatorio = (min, max) => {    // 原始代码中此处为 Math.floor(Math.random() * 59 + 1),    // 这将生成1到59的随机数。    // 如果目标是1到60,则应为 Math.floor(Math.random() * (max - min + 1)) + min    return Math.floor(Math.random() * 59 + 1);   };  const gerarNumerosEntre1a60 = n => {    const resultado = [];    for (let i = 0; i < n; ++i) {      resultado.push(numeroAleatorio(1, 60)); // 这里的(1, 60)参数并未被numeroAleatorio函数实际使用    }    return resultado;  }  document.getElementById("resultado").innerHTML = gerarNumerosEntre1a60(6);}

上述代码尝试生成6个1到59之间的随机数。问题在于,numeroAleatorio 函数每次调用都是独立的,它不关心之前生成过哪些数字。因此,在循环中多次调用时,很有可能出现相同的数字被多次添加到 resultado 数组中的情况。为了确保生成的数字是唯一的,我们需要一种机制来跟踪已经生成的数字。

使用 Set 解决唯一性问题

JavaScript 中的 Set 对象是一种非常有用的数据结构,它允许你存储任何类型的唯一值。Set 的关键特性是,当你尝试向它添加一个已经存在的值时,Set 不会执行任何操作,即它只保留每个值的单个实例。这使得 Set 成为解决随机数唯一性问题的理想选择。

立即学习“Java免费学习笔记(深入)”;

我们可以利用 Set 的这一特性来构建一个高效的不重复随机数生成器:持续生成随机数并将其添加到 Set 中,直到 Set 的大小达到我们所需的数量。

实现不重复随机数生成器

以下是使用 Set 实现不重复随机数生成功能的完整代码:

function sorteio() {  /**   * 生成指定范围内指定数量的不重复随机数   * @param {number} min - 随机数的最小值(包含)   * @param {number} max - 随机数的最大值(包含)   * @param {number} count - 需要生成的随机数数量   * @returns {Array} 包含不重复随机数的数组   */  const getRandom = (min, max, count) => {    // 校验参数:确保count不大于可能值的总数    if (count > (max - min + 1)) {      console.warn("请求的随机数数量超过了可能值的总数,将返回所有可能值。");      count = max - min + 1; // 调整count为最大可能值    }    if (count <= 0) {        return [];    }    const result = new Set(); // 使用Set来存储唯一的随机数    while (result.size < count) {      // 生成一个介于min和max之间的随机整数(包含min和max)      const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;      result.add(randomNumber); // 将随机数添加到Set中。如果已存在,Set不会重复添加    }    return [...result]; // 将Set转换为数组并返回  };  /**   * 生成1到60之间指定数量的不重复随机数   * @param {number} n - 需要生成的随机数数量   * @returns {Array} 包含不重复随机数的数组   */  const gerarNumerosEntre1a60 = n => {    // 调用getRandom函数,指定范围为1到60    const resultado = getRandom(1, 60, n);    return resultado;  };  // 将生成的结果显示在页面上  document.getElementById("resultado").innerHTML = gerarNumerosEntre1a60(6).join(', ');}

HTML 结构:

点击按钮后,sorteio 函数将被调用,并在 h1 标签中显示6个1到60之间不重复的随机数。

代码解析

getRandom(min, max, count) 函数:

参数校验: 在函数开头添加了简单的参数校验,确保 count 不会超过 min 到 max 之间所有可能数字的总数。如果 count 过大,会发出警告并调整 count 为最大可能值。const result = new Set();: 创建一个空的 Set 对象,用于存储最终的不重复随机数。while (result.size 这是一个核心循环。它会一直执行,直到 Set 中存储的元素数量达到 count 所需的值。*`const randomNumber = Math.floor(Math.random() (max – min + 1)) + min;:** 这是生成指定范围内(包含min和max`)随机整数的标准公式。Math.random() 生成一个 [0, 1) 范围内的浮点数。*(max – min + 1) 将范围扩大到 [0, max – min + 1)。Math.floor() 向下取整,得到 [0, max – min] 范围内的整数。+ min 将整个范围平移到 [min, max]。result.add(randomNumber);: 将生成的随机数添加到 Set 中。Set 会自动处理重复项,如果 randomNumber 已经存在于 result 中,add 方法将不会有任何效果,Set 的大小也不会改变。return […result];: 当 while 循环结束时,result Set 中包含了 count 个唯一的随机数。使用扩展运算符 (…) 可以方便地将 Set 转换为一个数组并返回。

gerarNumerosEntre1a60(n) 函数:

这是一个封装函数,专门用于生成1到60之间的随机数。它简单地调用 getRandom 函数,并传入固定的 min (1) 和 max (60) 值。

页面显示:

document.getElementById(“resultado”).innerHTML = gerarNumerosEntre1a60(6).join(‘, ‘);:获取 ID 为 “resultado” 的元素,并将其 innerHTML 设置为生成的6个随机数,使用逗号和空格连接成字符串显示。

注意事项与性能考量

范围与数量的平衡: 尽管 Set 方法非常有效,但在极端情况下仍需注意。如果 count(需要生成的数量)非常接近 max – min + 1(可能值的总数),while 循环可能需要更多次迭代才能找到所有剩余的唯一数字。在最坏的情况下,如果 count 等于 max – min + 1,并且随机数生成器总是先生成重复的数字,性能会下降。极端情况的替代方案:小范围、大数量: 如果随机数的范围很小,但你需要几乎所有可能的数字(例如,从1到100中取90个不重复的数字),一个更高效的方法是创建一个包含所有可能数字的数组,然后对其进行 Fisher-Yates 洗牌算法,最后取出前 count 个元素。大范围、小数量: 对于大范围(例如,1到1,000,000)但只需要少量(例如,10个)不重复随机数的情况,Set 方法通常是最佳选择,因为它避免了创建和洗牌一个巨大的数组。

总结

通过巧妙地利用 JavaScript 的 Set 数据结构,我们可以轻松且高效地解决在生成随机数时遇到的重复问题。Set 的唯一性保证机制使得代码逻辑清晰、易于理解和维护。在实际开发中,根据随机数的范围和所需数量,选择最合适的生成策略,可以进一步优化性能。上述 Set 的实现提供了一个健壮且广泛适用的解决方案,适用于大多数不重复随机数生成的需求。

以上就是使用Set实现JavaScript不重复随机数生成的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1595305.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 10:11:39
下一篇 2025年12月20日 16:23:38

相关推荐

  • 响应式 blockquote 引用块尾部引号的精确对齐技巧

    本教程详细探讨了如何利用 css 伪元素 `::before` 和 `::after`,结合绝对定位技术,实现 `blockquote` 元素中开闭引号的精确对齐,特别是在内容长度不确定或响应式布局下。文章将提供具体的 css 和 html 示例,帮助开发者解决尾部引号定位不准确的问题,确保引用块的…

    好文分享 2025年12月23日
    000
  • Structr中HTML Select组件的数据绑定与关系管理教程

    本教程旨在指导用户如何在Structr 4.1.2社区版中高效使用HTML select组件。内容涵盖如何正确查询数据以填充下拉列表、显示指定属性值,以及如何通过REST API更新单对一和一对多关系。通过实例代码,帮助理解StructrScript和JavaScript在数据操作中的应用,从而优化…

    2025年12月23日
    000
  • WordPress 子主题产品页面布局优化:实现图像与表单的并排显示

    本教程旨在指导用户如何在WordPress WooCommerce子主题(以Kaffa为例)中,通过CSS调整产品页面的布局,将原先堆叠显示的商品图片和表单(如购买按钮、数量选择等)改为并排显示。文章将详细阐述如何定位元素、编写CSS样式,并强调响应式设计与主题兼容性等关键注意事项。 理解WordP…

    2025年12月23日
    000
  • JavaScript教程:为动态生成的列表项添加顺序编号

    本文将指导您如何在javascript中,利用for循环的索引为动态生成的列表或数组元素添加连续的序号。通过一个简单的城市列表示例,您将学习如何修改循环逻辑,使其输出形如“城市 #1 是洛杉矶”的带有唯一编号的文本,从而提升用户界面的可读性和信息呈现的清晰度。 引言:动态内容编号的需求 在Web开发…

    2025年12月23日
    000
  • HTML手机工具在线入口 免费HTML工具手机版平台

    答案:HTML手机工具在线入口为https://www.wusiwu.com/,该平台支持代码一键导入、实时编辑、本地项目管理与云端备份,专为移动端优化,兼容安卓和iOS,具备轻量级浏览器引擎与低资源占用优势,同时提供社区共享、开源协作与模板推荐功能,便于用户学习交流与快速开发。 HTML手机工具在…

    2025年12月23日
    000
  • CSS响应式文本与定位:利用视口单位(vw)实现动态布局

    本文深入探讨了在css中实现响应式文本大小和元素定位的有效策略。通过详细介绍视口宽度单位(`vw`)的原理与应用,文章展示了如何利用`vw`单位动态调整字体大小和元素位置,以确保内容在不同屏幕尺寸下均能保持良好的可读性和布局稳定性。教程提供了实际代码示例,并讨论了相关注意事项,旨在帮助开发者构建更具…

    2025年12月23日
    000
  • 构建单页应用:URL路径、嵌套页面与数据传递实战指南

    本文旨在深入探讨单页应用(spa)中url管理的核心策略,涵盖如何实现url无扩展名、构建嵌套路径以及通过url传递数据。我们将通过服务器端路由配置(如nginx)和客户端路由框架(如barba.js)的结合使用,展示如何优化用户体验和应用结构。此外,文章还将介绍javascript中解析url路径…

    2025年12月23日 好文分享
    000
  • 使用jQuery实现点击父元素动态切换图片并还原的教程

    本教程详细讲解如何利用jquery实现点击父级div时动态切换其内部图片,并在再次点击时将其还原至原始状态。核心策略是巧妙地利用data属性来动态存储当前显示的图片源,从而在每次点击时交换并更新图片路径,确保图片能够在两种状态间准确无误地切换。 在网页开发中,我们经常需要实现交互式的UI效果,例如点…

    2025年12月23日
    000
  • 基于URL参数实现页面条件加载:动态填充表单与默认显示控制

    本教程旨在解决web开发中一个常见问题:如何根据用户导航方式,使目标页面(如预订表单)加载时动态填充数据或显示默认空白状态。文章将详细介绍如何利用url查询参数作为导航标识,并结合javascript的`urlsearchparams` api,实现对`sessionstorage`数据的条件性读取…

    2025年12月23日
    000
  • CSS背景图像图标自适应尺寸与宽高比维护教程

    在css中为元素定义png背景图像图标时,若想使其自动适应容器尺寸并保持原始宽高比,避免手动设置宽高或计算比例,最佳实践是利用`background-size: contain`、`background-repeat: no-repeat`和`background-position: center`…

    2025年12月23日
    000
  • 纯CSS替换标签文本内容的教程

    本教程详细介绍了如何利用纯%ignore_a_1%技术替换html ` `标签的文本内容。我们将探讨两种主要方法:通过`text-indent`将原始文本移出视口,或通过`font-size`将其隐藏,然后结合`::before`伪元素插入新的可见文本。文章将提供具体的css代码示例,并强调这种纯c…

    2025年12月23日
    000
  • 使用HTML拖放API获取文件/文件夹名称(无需上传)

    本文详细介绍了如何利用html drag and drop api,在不实际上传文件的情况下,获取用户拖放到网页区域的文件或文件夹名称。这对于仅需文件元信息(如名称)而无需传输文件内容的内部业务应用尤其有用,避免了不必要的上传操作,同时提供了交互式用户体验。 引言:无需上传,仅获取文件/文件夹名称的…

    2025年12月23日
    000
  • Gulp项目部署到CPanel/共享主机的实战指南

    本教程详细介绍了如何将gulp构建的前端项目部署到cpanel或共享主机环境。核心步骤包括执行gulp构建命令、打包生成目录、上传至`public_html`并解压,以及确保根目录下存在标准的`index.html`文件,这是网站成功上线显示的关键。 对于初次接触Gulp项目部署到传统共享主机(如C…

    2025年12月23日
    000
  • 使用Flexbox实现固定宽度组件居中并避免动态滚动条引发的布局偏移

    本教程探讨了在使用flexbox布局时,如何确保固定宽度的组件始终保持居中,并解决因页面内容动态变化导致滚动条出现而引发的布局偏移问题。核心解决方案是通过css强制浏览器始终显示垂直滚动条,从而预留空间,避免不必要的布局重绘和视觉抖动。 引言:Flexbox居中与布局稳定性挑战 Flexbox作为现…

    2025年12月23日
    000
  • 如何为特定DIV元素应用模拟媒体查询规则

    本文旨在探讨在不使用iframe的情况下,如何为网页中的特定div元素模拟应用独立的媒体查询规则,尤其适用于a/b测试或集成不同响应式组件的场景。通过结合使用css的`max-width`属性和全局媒体查询,我们可以有效地控制单个元素的尺寸和行为,使其在特定视窗大小下呈现出预期的响应式布局,同时不影…

    2025年12月23日
    000
  • JavaScript 精准元素样式修改:避免全局操作影响局部组件

    本文旨在解决javascript事件处理中常见的子元素样式全局修改问题。通过分析使用`document.getelementsbyclassname`的局限性,我们将演示如何利用`element.queryselector`方法,在父元素被点击时,精准地定位并修改其内部特定子元素的样式,从而避免不必…

    2025年12月23日
    000
  • 将JavaScript函数结果显示到HTML页面

    本文旨在指导开发者如何在html页面中正确显示javascript函数的计算结果。我们将重点解决常见的初学者错误,包括javascript代码的放置、html输入字段类型的选择,以及如何正确地将值赋给表单元素。通过详细的代码示例和解释,帮助读者避免常见陷阱,实现js结果的无缝展示。 在Web开发中,…

    2025年12月23日
    000
  • 在HTML中显示JavaScript函数结果:常见错误与正确实践

    本教程旨在指导开发者如何在html页面中正确显示javascript函数的计算结果。文章将重点解析初学者常犯的三个关键错误:javascript代码未封装在“标签内、结果显示元素类型选择不当,以及混淆了`innerhtml`与`value`属性的使用场景。通过详细的解释和修正后的示例代码…

    2025年12月23日
    000
  • PHP与MySQL:安全地更新数据库中现有数值(累加操作)

    本教程详细讲解如何使用php和mysql安全地更新数据库中已有的数值字段,通过将新提交的值累加到现有值上。我们将重点介绍如何利用sql的算术操作以及php的预处理语句(prepared statements)来防止sql注入,确保数据操作的准确性和安全性。 数据库数值字段的累加更新 在Web应用开发…

    2025年12月23日
    000
  • Python网络爬虫进阶:应对动态加载内容并获取结构化数据

    当使用beautifulsoup爬取如binance p2p等动态加载内容的网站时,常会遇到无法获取完整数据的困境,因为实际数据由javascript异步加载。解决之道是利用浏览器开发者工具识别并直接调用网站后台api接口。通过python的requests库模拟api请求,获取json格式的原始数…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信