如何使用 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
请注意,为了生成 和 之间的随机整数0
,4
我们实际上必须乘以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
,randomPick
和randomString
函数组成的……而randomString
函数使用randomLetter
函数!这是编程的基石:使用函数作为更复杂函数的构建块。
总结
我们已经讨论了如何在 JavaScript 中生成有用的随机数。我希望您发现本指南有用。该randomInt
功能在您的储物柜中无疑是一个有用的功能,它将帮助您为您的项目添加一些随机性。