如何使用 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功能在您的储物柜中无疑是一个有用的功能，它将帮助您为您的项目添加一些随机性。