如何使用 Math.random() 在 JavaScript 中生成随机数

JavaScript 中的随机性

能够在程序中添加随机元素总是很有用的。您可能希望通过添加一些随机样式、生成随机短语或在游戏中添加机会元素来为您的网站增添趣味。

不幸的是,实际上很难创建一个真正的随机值。

JavaScript 有random函数,它是内置Math对象的一个​​方法。ECMAScript 标准没有指定这个函数应该如何生成一个随机数,所以它留给浏览器供应商来实现。在撰写本文时,目前所有主流浏览器都在后台使用xorshift128+算法生成伪随机数。

要使用它,只需输入Math.random(),它将返回一个介于 0(包括)和 1(不包括)之间的伪随机浮点十进制数:

const x = Math.random();

这可以表示为以下不等式:

0 <= x < 1

但是如果你想要一个大于 1 的随机数呢?简单:您需要做的就是乘以一个比例因子来放大它——例如,将结果乘以 10 将产生一个介于 0(包括)和 10(不包括)之间的值:

const y = Math.random()*10

如果我们将前面不等式的两边都乘以 10,就可以看出其原因:

0 <= y < 10

但结果仍然是一个浮点十进制数。如果我们想要一个随机整数怎么办?很简单:我们需要做的就是使用Math.floor函数将返回值向下舍入到下面的整数。以下代码将为变量分配一个从 0 到 9 的随机整数(包括 0 到 9)z

const z = Math.floor(Math.random()*10)

请注意,即使我们乘以 10,返回的值也只会上升到 9。

我们可以将此方法推广到创建一个函数,该函数将返回一个介于 0 和最多但不包括作为参数提供的数字的随机整数:

function randomInt(number){
  return Math.floor(Math.random()*(number))
}  

我们现在可以使用此函数返回 0 到 9 之间的随机数字:

const randomDigit= randomInt(10)

所以现在我们有了一种创建随机整数的方法。但是两个不同值之间的随机整数,并不总是从零开始呢?我们需要做的就是使用上面的代码并添加我们希望范围开始的值。例如,如果我们想生成一个介于 6 和 10 之间的随机整数,我们将首先使用上面的代码生成一个介于 0 和 4 之间的随机整数,然后将 6 添加到结果中:

const betweenSixAnd10 = Math.floor(Math.random()*5) + 6

请注意,为了生成 和 之间的随机整数04我们实际上必须乘以5

我们可以推广这种方法来创建一个函数,该函数将返回两个值之间的随机整数:

function randomIntBetween(min,max){
  Math.floor(Math.random()*(max - min + 1)) + min
}   

这只是我们编写的代码的通用形式,用于获取 6 到 10 之间的随机数,但将 6 替换为min参数,将 10 替换为max参数。要使用它,只需输入两个参数来表示随机数的下限和上限(包括)。因此,要模拟掷六面骰子,我们可以使用以下代码返回 1 到 6 之间的整数:

const dice = randomIntBetween(1,6)

加载随机图像

首先,我们将使用我们的randomInt函数从Lorem Picsum 网站加载随机照片。该站点提供了一个占位符图像数据库,每个图像都有唯一的整数 ID。这意味着我们可以通过在 URL 中插入一个随机整数来创建一个指向随机图像的链接。

我们需要做的就是设置以下 HTML 来显示 ID 为 0 的图像:

<button id="randomPhoto">Random Photo</button>
<p id="photo"><img src="https://picsum.photos/id/0/200/200"></p>

然后我们可以连接以下 JavaScript 为 ID 生成一个随机整数,并更新 HTML 以在单击按钮时随机显示新图像:

document.getElementById("randomPhoto").addEventListener("click",e => document.getElementById("photo").innerHTML = `<img src="https://picsum.photos/id/${randomInt(100)}/200/200">`)

生成随机颜色

在 HTML 和 CSS 中,颜色由 0 到 255 之间的三个整数表示,以十六进制(以 16 为基数)编写。第一个代表红色,第二个代表绿色,第三个代表蓝色。这意味着我们可以使用我们的randomInt函数通过生成 0 到 255 之间的三个随机数并将它们转换为以 16 为基数来创建随机颜色。要将数字转换为不同的基数,您可以为该toString方法提供一个参数,因此以下代码将返回一个介于 0 和 FF 之间的随机十六进制数(十六进制为 255):

randomInt(0,255).toString(16)
<< 2B

我们现在可以编写一个randomColor返回 HTML 颜色代码的函数:

function randomColor(){ 
  return `#${randomInt(1,255).toString(16)}${randomInt(1,255).toString(16)}${randomInt(1,255).toString(16)}`
}

这将返回一个模板文字,该模板文字以所有 HTML 颜色代码开头的哈希字符开头,然后将三个以 16 为底的 0 到 255 之间的随机整数连接到末尾。

调用该randomColor函数将返回一个随机的 HTML 颜色字符串:

randomColor()
<< #c2d699

生成随机字母

我们已经有了一个创建随机整数的函数,但是随机字母呢?幸运的是,有一种使用数字基数将整数转换为字母的好方法。在基数 36 中,从 10 到 35 的整数由字母“a”到“z”表示。toString您可以通过使用以下方法在控制台中将一些值转换为 base 36 来检查这一点:

(24).toString(36)
(16).toString(36)

现在我们知道了这一点,应该很容易编写一个randomLetter函数,使用我们的randomInt函数生成一个 10 到 35 之间的随机整数并返回其基数 36 字符串表示:

function randomLetter(){
 return randomInt(10,35).toString(36)
}

调用randomLetter应该返回一个从“a”到“z”的随机小写字母:

randomLetter()
<< "o"

randomLetter()
<< "g"

生成随机字符串

现在我们可以创建随机字母,我们可以将它们放在一起创建随机的字母串。让我们编写一个randomString接受单个参数的函数,n它表示我们希望返回的字符串中随机字母的数量。我们可以通过创建一个数组或长度n然后使用该map方法将每个元素更改为一个随机字母来创建一串随机字母。然后我们可以使用该join方法将数组转换为一串随机字母:

function randomString(numberOfLetters){
  return [...Array(numberOfLetters)].map(randomLetter).join``
}

调用randomString(n)应该返回一个随机的n字母串:

randomString(5)
<< "xkibb"

randomLetter(3)
<< "bxd"

从数组中选择一个随机元素

能够从数组中选择随机元素通常很有用。randomInt使用我们的函数很容易做到这一点。我们可以随机选择数组中的一个索引,使用数组的长度作为参数,并从数组中返回该索引处的元素:

function randomPick(array){
 return array[randomInt(array.length)]
}

例如,采用以下表示水果列表的数组:

const fruits = ["🍏",🍌","🍓","🥝","🍋","🍐","🫐","🍉"]

您可以使用以下代码随机挑选一块水果:

randomPick(fruits)
<< "🍉"

生成随机短语

现在我们有了一个从数组中选择随机元素的函数,我们可以使用它来创建随机短语。您经常会在网站上看到这种技术用作占位符用户名。首先,创建三个数组,一个包含形容词字符串,一个包含颜色,另一个是名词,如下所示:

const adjectives = ["Quick","Fierce","Ugly","Amazing","Super","Spectacular","Dirty","Funky","Scary"]
const colors = ["Brown","Red","Orange","Black","White","Purple","Pink","Yellow","Green","Blue"]
const nouns = ["Fox","Bear","Monkey","Hammer","Table","Door","Apple","Banana","Chair","Chicken"]

现在我们有了这三个数组,使用我们的randomPick函数很容易创建一个随机短语。我们只需从每个数组中选择一个随机元素并将它们连接起来,它们之间有空格来组成一个短语:

function randomPhrase(a,c,n){
  return `${randomPick(a)} ${randomPick(c)} ${randomPick(n)}`
}

调用randomPhrase应该返回一个听起来有点滑稽的随机短语——带有颜色、形容词和名词:

randomPhrase()
<< "Funky Pink Chicken"

生成随机密码

我们将看到的最后一次使用随机整数是生成随机密码字符串。密码的常见规则是它至少包含:

  • 八字
  • 一个数字字符
  • 一个特殊的非字母数字字符

符合这些规则的示例可能是:

secret!1

我们已经拥有可以为我们生成这些元素中的每一个的功能。首先,我们将使用randomString(6)创建一个由六个字母组成的随机字符串。然后我们将使用该randomPick函数从数组中选择一个特殊字符,然后我们将使用randomInt(9)它返回一个随机数字。然后我们需要做的就是连接它们,我们将有一个随机生成的密码!

我们可以将它放在一个函数中,该函数将返回一个随机密码字符串:

function generatePassword(){
  return randomString(6) + randomPick(["!","%","?","&","@","£","$","#"]) + randomInt(9)
}

调用generatePassword应该返回一个通过上述三个规则的随机密码:

generatePassword()
<< "ykkefn@8"

需要注意的一点是,我们编写的所有函数如何使用randomInt我们一开始编写的函数。比如我们刚才写的generatePassword函数,就是由randomInt,randomPickrandomString函数组成的……而randomString函数使用randomLetter函数!这是编程的基石:使用函数作为更复杂函数的构建块。

总结

我们已经讨论了如何在 JavaScript 中生成有用的随机数。我希望您发现本指南有用。该randomInt功能在您的储物柜中无疑是一个有用的功能,它将帮助您为您的项目添加一些随机性。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何使用 Math.random() 在 JavaScript 中生成随机数