如何从JavaScript数组中获取多个随机唯一元素?

The JavaScript is a very versatile language and it has a function almost everything that you want.

JavaScript是一种非常通用的语言,它几乎具有您想要的所有功能。

Here, we will show you how to generate random unique elements from an array in JavaScript?

在这里,我们将向您展示如何从JavaScript数组中生成随机的唯一元素?

The random() function does this work for you. It is a powerful function that can generate multiple random unique numbers. The random() function generates a float number between o and 1. Including only 1. So, we will use this random number to find random elements of the JavaScript array.

random()函数可以为您完成此工作。 它是一个强大的功能,可以生成多个随机唯一数random()函数生成一个介于o和1之间的浮点数。仅包含1。因此,我们将使用此随机数查找JavaScript数组的随机元素。

JavaScript code to get multiple random unique elements from an array

JavaScript代码从数组中获取多个随机唯一元素

<html>
<body>
<div id="one">
<p>one</p>
</div>
<div id="two">
<p>two</p>
</div>
<script>
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
var arr = [
"<span class=\"booklink\"><a href=\"/one\">one</a></span>",
"<span class=\"booklink\"><a href=\"/one\">two</a></span>",
"<span class=\"booklink\"><a href=\"/one\">three</a></span>",
"<span class=\"booklink\"><a href=\"/one\">four</a></span>",
"<span class=\"booklink\"><a href=\"/one\">five</a></span>"
]
/* note: the JavaScript that updates the div had to be near the end
* of the body to work (probably just after the div)
*/
shuffle(arr);
document.getElementById("one").innerHTML = arr.slice(0, 3).toString();
</script>
</body>
</html>

Output

输出量

get multiple random unique elements from an array in JavaScript

Explanation:

说明:

This program finds the random number and then uses the index of the array to fetch elements of the array and then displays the content. Here the content is a link with the index number.

该程序找到随机数,然后使用数组的索引来获取数组的元素,然后显示内容。 这里的内容是带有索引号的链接。

翻译自: https://www.includehelp.com/code-snippets/how-to-get-multiple-random-unique-elements-from-an-array-in-javascript.aspx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/376896.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是ACID理论(二阶段、三阶段提交、TCC)

目录二阶段提交协议TCC&#xff08;Try-Confirm-Cancel&#xff09;预留成功预留失败三阶段提交协议总结Some questionsreferenceACID理论时对事务特性的抽象和总结&#xff0c;想要实现ACID需要掌握二阶段提交协议以及TCC 这里是有关协议的论文PDF链接&#xff1a; CONCURRENC…

oracle安装后新建数据库实例及配置

ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法 (2011-01-20 13:50:37) 转载▼标签&#xff1a; it 分类&#xff1a; 技术早上同事用PL/SQL连接虚拟机中的Oracle数据库&#xff0c;发现又报了“ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务…

html5游戏开发--动静结合(二)-用地图块拼成大地图 初探lufylegend

一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图&#xff0c;以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画&#xff0c;毕竟“动静结合”是先有动再有静。看了上一章的内容&#xff0c;或许你就有了…

BASE理论(基本可用策略+ 最终一致性实现)

目录实现基本可用的几个策略1、流量削峰&#xff08;不同地区售票时间错峰出售&#xff09;2、延迟响应&#xff0c;异步处理&#xff08;买票排队&#xff0c;基于队列先收到用户买票请求&#xff0c;排队异步处理&#xff0c;延迟响应&#xff09;3、体验降级&#xff08;看到…

Paxos算法(Basic Paxos 与 Multi-Paxos思想)

目录Basic Paxos三个角色达成共识的方法对于Basic Paxos的总结Multi-Paxos领导者优化 Basic Paxos 执行referencePaxos 算法包含 2 个部分&#xff1a; 1、Basic Paxos &#xff1a; 描述多节点之间如何就某个值达成共识 2、Multi-Paxos &#xff1a; 描述执行多个Basic Paxos实…

vs2012下调试mvc4源代码

当前流行的应该是mvc3才对。然后在研究mvc3的源代码时候&#xff0c;Html这个属性下的扩展方法Partial()都没有。IntelliSense不会提示该方法&#xff0c;找了半天的资料也问了一些博友&#xff0c;没看到好的解决棒法。最后没辙另辟蹊跷&#xff0c;就开始着手研究mvc4的源代码…

JAVA UDP网络编程学习笔记

一、UDP网络编程概述 采用TCP协议通信时&#xff0c;客户端的Socket必须先与服务器建立连接&#xff0c;连接建立成功后&#xff0c;服务器端也会持有客户端连接的Socket&#xff0c;客户端的Socket与服务器端的Socket是对应的&#xff0c;它们构成了两个端点之间的虚拟通信链路…

(转)页游安全攻与防,SWF加密和隐藏密匙

原文链接&#xff1a;http://netsecurity.51cto.com/art/201211/364775.htm 页游&#xff0c;最最核心的就是客户端&#xff08;swf&#xff09;与服务端的游戏通信了。游戏通信产生的封包&#xff0c;内容是否可识别&#xff0c;可篡改&#xff0c;可重放&#xff0c;处理逻辑…

linux 命令案例学习——文件搜索

两个搜索文件的工具 locate ——仅仅通过文件名查找文件find ——依据文件的各种属性在既定目录&#xff08;包括子目录&#xff09;里查找一个通常与文件搜索命令一起使用、处理搜索结果文件列表的命令 xargs1 locate 1.1 查找文件名中含有zip的文件名 locate zip 看下结…

Redis 缓存击穿、缓存穿透、缓存雪崩的处理方法

常用的分布式缓存Redis单机并发量能达到万级&#xff0c;常用的关系型数据库MySQL一般并发量是千级&#xff0c;他们支持的并发量可能差十倍&#xff0c;所以要尽可能把流量拦截在缓存层。 缓存击穿 一个并发访问量比较大的key在某个时间过期&#xff0c;导致所有的请求直接打…

图像处理基础

图像处理基础 在计算机中&#xff0c;按照颜色和灰度的多少可以将图像分为二值图像、灰度图像、索引图像和真彩色RGB图像四种基本类型。目前&#xff0c;大多数图像处理软件都支持这四种类型的图像。 (1) 二值图像&#xff1a;一幅二值图像的二维矩阵仅由0、1两个值构成&#x…

缓存一致性解决方法

对于缓存 数据库读写&#xff0c;有个经典的Cache Aside Pattern&#xff1a; 读取&#xff1a;先读取缓存&#xff0c;缓存里没有&#xff0c;读取数据库&#xff0c;然后返回响应&#xff0c;顺便保存缓存&#xff1a; 更新&#xff1a;先更新数据库&#xff0c;然后删除缓…

使用SpringMVC的表单验证

上一篇搭建了基本项目&#xff0c;这一篇在此基础上加入表单验证功能。 第一步&#xff0c;添加command类 Java代码 package test.bean; import javax.validation.constraints.Size; public class User { Size(min3,max30) private String username; …

单体、分布式、微服务、Serverless软件架构一览

目录软件架构单体架构分布式应用微服务架构Serverless架构总结Reference软件架构 软件架构就是软件的基本结构&#xff0c;合适的架构是软件成功的最重要因素之一。这里列举了目前流行的4种软件架构。 单体架构 典型的三级架构&#xff1a;前端&#xff08;web/手机端&#…

Midjourney V6刷屏,但它最可怕的地方居然不是那些神图?

Midjourney在沉寂九个月后推出了Midjourney V6&#xff0c;这个文生图产品体现出的更细腻的细节处理&#xff0c;更强大的语言理解能力和更加“不像AI”的图片效果在过去几天引发一片惊呼。 作为一个闭源的模型产品&#xff0c;Midjourney的魔法配方并不为人所知&#xff0c;但…

连续内存分区式内存管理

目录前言分区式内存管理动态分区内存管理总结本笔记参考黄工的https://mp.weixin.qq.com/s/k0W_LqI1zBAYC1GU1U2HQA 前言 内存管理模块主要负责内存的初始化、分配以及释放。 从分配内存是否连续可以分为两大类&#xff1a; 1、连续内存管理 为进程分配的内存空间是连续的&a…

用DEVC++作图

小海豚学NOIP&#xff0c;老师说要用DEV C。 小海豚喜欢画图&#xff0c;记得以前用C#编些程序给她看。可前一阵打开看&#xff0c;我的免费Visual Studio过期了。可恶的Microsoft &#xff0c;不想用盗版难道就要每个月就下载一次&#xff1f; 于是就用DEV C的Windows调用吧。…

Python服务器开发三:Socket

Python服务器开发三&#xff1a;Socket socket是操作系统中I/O的延续&#xff0c;它可以使进程和机器之间的通信成为可能。socket可以看成一个标准的文件描述符。不同的是文件需要用open()函数打开&#xff0c;而socket用socket() 函数建立.recv()、send()函数和read()、write(…

Linux命令常见

摘自&#xff1a; 常考的 21 条 Linux 命令 目录&#xff09;cd,切换路径ls,查看文件与目录的命令cp,用于复制文件mv,用于移动文件、目录cat,查看文件内容find&#xff0c;文件搜索文件权限命令&#xff0c; 设置权限&#xff0c;-取消权限文本处理命令打包和压缩文件命令进程相…

OSGi.NET 学习笔记 [模块化和插件化][小结]

【目录】-【模块化和插件化】-【小结】 现在我们来对OSGi.NET的“模块化和插件化”做一个小结&#xff0c;再次把官方的说明拿出来  1&#xff09; 物理隔离&#xff1a;基于UIOSP开发的模块是一个物理隔离的可单独部署的模块&#xff0c;每一个模块拥有独立的文件夹、类型空…