JavaScript随机数生成全攻略

本文深入解析了 JavaScript 中生成随机数的多种方法，重点介绍了 `Math.random()` 函数的核心作用及其局限性。文章详细讲解了如何利用 `Math.random()` 生成指定范围内的浮点数和整数，包括生成 [0, 1) 范围浮点数、[min, max] 范围内整数等实用技巧，并着重强调了包含边界值的整数生成方法。此外，文章还探讨了 `Math.random()` 生成伪随机数的本质，以及在加密安全场景下使用 `window.crypto.getRandomValues()` 等加密级 API 的必要性。最后，文章列举了随机数在游戏开发、数据模拟、UI 设计、抽奖系统等常见应用场景，旨在帮助开发者根据实际需求选择合适的随机数生成方案，为程序增添趣味性和不确定性。

JavaScript中实现随机数生成的核心方法是使用Math.random()函数，它返回一个[0, 1)区间内的伪随机浮点数。1. 生成[0, 1)范围内的浮点数：直接调用Math.random()即可；2. 生成指定范围内的浮点数：使用公式Math.random() (max - min) + min；3. 生成指定范围内的整数：通过Math.floor(Math.random() (max - min + 1)) + min实现[min, max]区间内包含边界的整数。需要注意的是，Math.random()生成的是伪随机数，基于确定性算法和初始种子，适用于一般场景如游戏、UI随机效果或数据模拟，但不适用于加密安全场景。对于高安全需求，应使用window.crypto.getRandomValues()等加密级随机数生成API。随机数在实际开发中广泛应用于游戏机制、数据测试、UI动态变化、抽奖系统、验证码生成和唯一标识构建等场景，为程序增加不确定性与趣味性，但需根据用途选择合适的生成方式。

JavaScript 中实现随机数生成的核心方法是使用内置的 Math.random() 函数。这个函数会返回一个浮点数，其值大于等于 0 且小于 1（即 [0, 1) 区间）。它不接受任何参数，每次调用都会产生一个看似随机的新数字。

解决方案

要生成随机数，我们主要依赖 Math.random()。但仅仅得到一个 [0, 1) 的浮点数通常不够，我们更常需要的是特定范围内的整数或浮点数。

1. 生成 [0, 1) 范围内的浮点数： 这是 Math.random() 的默认行为。

const randomNumber = Math.random();
console.log(randomNumber); // 比如：0.7382910472819273

2. 生成指定范围内的浮点数： 如果你需要一个在 min (包含) 和 max (不包含) 之间的浮点数：

function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

console.log(getRandomFloat(10, 20)); // 比如：13.56789

3. 生成指定范围内的整数： 这是最常见的需求。我们通常会结合 Math.floor() 或 Math.ceil() 来实现。

• 生成 [0, max) 范围内的整数 (不包含 max)：

  function getRandomIntUpTo(max) {
    return Math.floor(Math.random() * max);
  }
  
  console.log(getRandomIntUpTo(10)); // 比如：0, 1, ..., 9 中的任意一个

• 生成 [min, max] 范围内的整数 (包含 min 和 max)： 这个是我个人觉得最实用，也最容易出错的地方。很多人会忘记那个 +1。

  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);   // 确保min是整数
    max = Math.floor(max);  // 确保max是整数
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  console.log(getRandomIntInclusive(1, 6)); // 模拟骰子，比如：1, 2, ..., 6 中的任意一个
  console.log(getRandomIntInclusive(10, 20)); // 比如：10, 11, ..., 20 中的任意一个

  这里 (max - min + 1) 是为了确保包含 max 本身。例如，如果你想在 1 到 6 之间取一个数，max - min 是 5，但我们需要 6 个可能性 (1, 2, 3, 4, 5, 6)，所以要 +1。

Math.random() 生成的随机数真的“随机”吗？（关于伪随机性）

说实话，当我第一次接触到“伪随机数”这个概念时，有点被震撼到。我们平时用 Math.random() 随手一写，感觉它就是完全随机的。但实际上，它生成的是“伪随机数”。

所谓的伪随机数，是指它们并非真正的随机，而是通过一个确定性的算法（一个种子值）计算出来的。如果你知道算法和初始种子，理论上你可以预测接下来的所有“随机”数。在 JavaScript 运行时环境中，这个种子通常是由系统时间或其他不易预测的因素来初始化的，所以对我们普通开发者来说，它看起来是足够随机的。

这有什么影响呢？对于大多数日常应用，比如游戏里的骰子、随机背景颜色、简单的抽奖或者模拟一些非关键数据，Math.random() 提供的伪随机性是完全足够的。它的性能很好，用起来也方便。

但是，如果你的应用场景涉及到加密安全，比如生成密钥、安全的令牌或者需要高度不可预测性的数据，那么 Math.random() 就显得力不从心了。因为它的可预测性，可能被恶意用户利用。在这些情况下，我们通常会转向更专业的加密级随机数生成器。在浏览器环境中，这意味着使用 window.crypto.getRandomValues() API，它会利用浏览器底层操作系统的熵源来生成真正意义上的加密安全随机数。

// 举个例子，生成一个安全的随机字节数组
const array = new Uint32Array(10);
window.crypto.getRandomValues(array);
console.log("加密安全的随机数:", array);
// 注意：这个API返回的是字节数组，需要进一步处理才能得到数字或字符串

不过，对于大多数“如何实现随机数”的问题，大家想的还是 Math.random() 这种简单直接的用法。

随机数在实际开发中有哪些常见的应用场景？

随机数在编程里简直无处不在，很多时候我们甚至没意识到自己正在使用它。我个人在开发中就经常碰到需要随机数的地方，它们能让应用变得更有趣、更灵活。

• 游戏开发： 这是最直观的场景。

  • 骰子模拟： getRandomIntInclusive(1, 6)，简单直接。
  • 卡牌洗牌： Fisher-Yates 洗牌算法就大量依赖随机数来打乱数组顺序。
  • 敌人AI行为： 让敌人随机选择攻击方式或移动路径，增加游戏的可玩性。
  • 掉落物品： 某个怪物掉落稀有物品的概率计算。
  • 地图生成： 程序化生成地形或关卡。

• 数据模拟与测试：

  • 生成测试数据： 当你需要大量模拟用户数据、订单数据或者其他业务数据进行测试时，随机数能快速填充各种可能的值。
  • 性能测试： 模拟随机的用户请求，测试系统在高并发下的表现。

• 用户界面 (UI) 和用户体验 (UX)：

  • 随机背景色/主题： 每次刷新页面或点击按钮，给用户一个新鲜感。
  • 随机格言/提示： 在加载页面时显示不同的励志语录或使用技巧。
  • 验证码生成： 无论是图片验证码还是短信验证码，核心都是随机生成一串字符或数字。

• 抽奖与选择：

  • 在线抽奖系统： 从参与者列表中随机抽取中奖者。
  • 广告轮播： 随机展示不同的广告内容，确保公平性。
  • 随机推荐： 在一个商品列表里随机推荐几款给用户。

• 唯一标识符 (ID) 生成：

  • 虽然 UUID/GUID 有更专业的生成方式，但在某些简单场景下，结合时间戳和随机数也能生成一个在短时间内足够“唯一”的字符串作为临时ID。

随机数就像是程序世界里的一点点“不确定性”，正是这一点不确定性，让我们的应用变得更加生动和有趣。但记住，用对地方才是关键。

本篇关于《JavaScript随机数生成全攻略》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！