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

在本文中，我们将了解如何在 JavaScript 中使用 生成随机数Math.random()，构建一个可用于多种用途的函数——例如加载随机图像、生成随机颜色、字母、字符串。

JavaScript 中的随机性

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

JavaScript 有random函数，它是内置Math对象的一个​​方法。ECMAScript 标准没有指定这个函数应该如何生成一个随机数，所以它留给浏览器供应商来实现。

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

const x = Math.random();

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

0 <= y < 10

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

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

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

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

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

所以现在我们有了一种创建随机整数的方法。但是两个不同值之间的随机整数，并不总是从零开始呢？我们需要做的就是使用上面的代码并添加我们希望范围开始的值。例如，如果我们想生成一个介于 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)

为了展示该randomIntBetween函数的工作原理，我在下面的演示，因此您可以通过单击按钮更改 和 的值min并max生成一个随机整数

现在我们有了一些生成随机整数的函数，我们可以用它们来做一些有趣的事情

加载随机图像

首先，我们将使用我们的randomInt函数从某网站中加载随机照片。每个图像都有唯一的整数 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

我已经将该函数连接到一个 HTML 按钮，以便在下面的演示中每次单击该按钮时它都会更改文档的背景颜色。

生成随机字母

我们已经有了一个创建随机整数的函数，但是随机字母呢？幸运的是，有一种使用数字基数将整数转换为字母的好方法。在基数 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"

我已经将该功能连接到一个 HTML 按钮，因此您可以在下面的演示中看到它是如何工作的。

生成随机字符串

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

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

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

randomString(5)
// "xkibb"

randomLetter(3)
// "bxd"

我已经将该功能连接到一个 HTML 按钮，因此您可以在下面的演示中看到它是如何工作的。

总结

我们已经讨论了如何在 JavaScript 中生成有用的随机数。我希望你看到本文章对你有用。该randomInt方法无疑是一个有用的功能，它将帮助您在项目中添加一些随机性。