JavaScript 中 Math.random() 的多种用法

Math.random() 是 JavaScript 中的一个 API。它是一个函数，可以生成一个随机数。返回的数字将在 0（包含，即可能返回实际的 0）和 1（不包含，即不可能返回实际的 1）之间。

Math.random(); // returns a random number lower than 1

这对于游戏、动画、随机数据、生成艺术、随机文本生成等非常有用！它可用于 Web 开发、移动应用程序、计算机程序和视频游戏。

无论何时需要在工作中进行随机化，我们都可以使用此函数！让我们看看可以使用它的八种不同方法。这些示例均来自不同作者，他们使用此 API 做了一些有趣的事情。

动画

为了生成一个对象并对其进行动画处理，我们使用Math.random。霓虹灯线形成自发的六边形，但随机性也存在于其生成的火花中。

计算机生成的音乐

此程序采用 “友谊地久天长” 的传统旋律，并用钢琴演奏其中的随机音符。从计数数据中创建更改包，并生成随机数以选择值。八度音阶也是随机选择的。

显示随机图像

图像存储在数组中。生成一个数字，并通过array.length将其乘以数组中的图像数量。然后Math.floor将值四舍五入为圆数，并在页面加载或单击按钮时设置 HTML 中的图像 src。

随机背景颜色

这就是魔法发生的地方

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

第一行代码随机打乱数组，第二行代码返回 0 到 10 之间的随机数。在随机颜色背景的示例中，可以设置颜色范围和色调、饱和度和阴影等细节。

有关生成随机十六进制颜色的另一种方法，请查看 Chris Coyer 的 这篇文章。

生成艺术

在此变形分形曲线中，Math.random 用于两次设置渐变的颜色，并再次用于曲线的最大半径。这是一种在每次迭代中构建全新外观的好方法！

单词生成器

我们使用Math.random用数组中随机选择的单词替换标题。

var word = words[Math.floor(Math.random() * words.length)] + "!";

这非常类似于随机图像示例——非常适合初学者的练习！

API 密钥生成器

这是一个关于随机数的超级现实世界实用案例！演示生成 16 个随机数以创建通用唯一标识符 (UUID)，该标识符可用作提供对 API 访问权限的密钥。

文本加扰

存储了一些短语并按顺序显示，它们之间由一个动画隔开，该动画似乎用 Math.random 选择的短语之间的随机字符来加扰字母。

石头剪刀布

在这个童年经典游戏石头剪刀布中，Math.random 用于为扮演对手的计算机生成随机动作。它从三个可用动作中进行选择。

强密码生成器

此密码生成器使用 Math.random 获取一个包含大写和小写字母的密码数组，然后将随机数字添加到生成的密码中。这是一个很棒的实用示例！

一些说明…

在查看了这些示例中的 Math.random 之后，您可能会有疑问。有一些问题我经常看到…

Math.random() 真的随机吗？

不完全是。Math.random() 返回一个伪随机数。此算法称为伪随机数生成器 (或 PRNG)。这意味着在某些情况下可以重现其随机性。

随机化基于算法 xorshift128+，该算法可能正在您的浏览器上运行。

所以，它是有点随机的。

如何处理重复值？

有许多方法可以实现不重复的唯一值。Fisher-Yates 是一种通过打乱序列来防止两次获得相同数字的好方法。Math.random 将从下面代码片段所示的有限序列的已打乱数组中选择一个值。

function shuffle (array) {
  var i = 0
    , j = 0
    , temp = null

  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

Math.random() 与 WebCrypto 相同吗？

正如您从本文中所看到的，Math.random() 非常棒！但是，如果您正在处理敏感应用程序并需要更安全的方法进行随机化，我建议您使用 WebCrypto。您可能希望使用 WebCrypto 的原因包括临时验证码、随机密码生成、随机彩票号码等。

如果您出于网络安全、密码学或统计目的需要随机化，请使用函数window.crypto.getRandomValues，并查看 Mozilla 关于 WebCrypto API 的文档。