JS随机数生成方法全解析

珍惜时间，勤奋学习！今天给大家带来《JS生成随机数方法大全》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

JavaScript中生成随机数最核心的工具是Math.random()，它返回一个[0,1)之间的浮点数，通过结合Math.floor()或Math.ceil()可生成指定范围的整数或浮点数，例如生成0到9的整数使用Math.floor(Math.random() 10)，生成1到6的整数则用Math.floor(Math.random() 6) + 1，生成[min, max]范围内的整数可通过Math.floor(Math.random() (max - min + 1)) + min实现，而生成[min, max)之间的浮点数则使用Math.random() (max - min) + min；需要注意的是Math.random()生成的是伪随机数，基于确定性算法和种子值，不具备密码学安全性，因此不适用于加密场景，此时应使用window.crypto.getRandomValues()从系统熵源获取真随机数；此外，在需要权重随机选择时可实现加权算法，使不同选项按概率被选中，而数组洗牌推荐使用Fisher-Yates算法以确保均匀随机排列；这些技术广泛应用于游戏开发、UI随机效果、数据模拟、验证码生成、内容推荐等场景。

JavaScript中生成随机数，最核心的工具就是Math.random()。它会给你一个浮点数，范围在0（包含）到1（不包含）之间。如果需要整数或者特定范围内的数字，就需要在这个基础上做一些数学运算。

解决方案

Math.random()本身返回的是一个[0, 1)区间的浮点数。要把它变成我们想要的整数或特定范围的数字，通常会结合Math.floor()（向下取整）或Math.ceil()（向上取整）。

• 生成0到指定最大值（不含）的整数： 比如，想生成0到9之间的整数（也就是10个数字），你可以这样做：

  const maxExclusive = 10; // 0-9
  const randomNumber = Math.floor(Math.random() * maxExclusive);
  console.log(randomNumber); // 输出0到9之间的整数

• 生成1到指定最大值（含）的整数： 如果你的需求是像掷骰子一样，从1开始计数，到6结束，那么：

  const maxInclusive = 6; // 1-6
  const randomNumber = Math.floor(Math.random() * maxInclusive) + 1;
  console.log(randomNumber); // 输出1到6之间的整数

• 生成指定最小值（含）到最大值（含）的整数： 这是最常用的场景之一，比如在某个价格区间内随机选择一个数值。

  function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; // 含最大值，含最小值
  }
  console.log(getRandomIntInclusive(10, 20)); // 输出10到20之间的整数

• 生成指定最小值（含）到最大值（不含）的浮点数： 如果你需要一个特定范围内的浮点数，比如随机生成一个0.5到1.5之间的值：

  function getRandomFloat(min, max) {
      return Math.random() * (max - min) + min;
  }
  console.log(getRandomFloat(0.5, 1.5)); // 输出0.5到1.5之间的浮点数（不含1.5）

JavaScript随机数是真随机吗？如何理解伪随机性？

说到Math.random()，很多人会问，这生成的数是“真随机”的吗？说白了，它不是。JavaScript中的Math.random()生成的是伪随机数。这意味着什么呢？它其实是通过一个确定性的算法计算出来的，这个算法基于一个初始的“种子”（seed）值。如果你知道这个种子和算法，理论上你就能预测出接下来会生成的所有随机数序列。

在浏览器环境中，这个种子通常是基于系统时间或其他一些难以预测的因素初始化的，所以对于我们日常的Web应用，比如抽奖、显示随机图片、游戏中的随机事件，它的随机性已经足够了。你几乎不可能通过观察几个结果来推断出它的模式。

但如果涉及到高安全性需求，比如生成加密密钥、安全令牌，Math.random()就显得力不从心了。因为它不是密码学安全的。一旦攻击者能够获取到种子或者推断出生成算法，那么安全性就荡然无存了。这就像一个熟练的魔术师，虽然看起来变出了随机的东西，但实际上每一步都在他的掌控之中。

在特定范围内生成随机数有哪些实用场景？

生成特定范围的随机数在前端开发中简直无处不在，比你想象的要多得多。

• 游戏开发： 这是最直观的例子。比如模拟掷骰子（1-6）、卡牌游戏中的洗牌（随机排列数组）、敌人AI的随机行为选择、生成地图上的随机资源点。设想一下，如果你的游戏里每次怪物刷新都在同一个地方，那得多无聊？
• UI/UX设计： 随机背景色、随机头像、随机展示一些用户评价。比如给用户一个随机的欢迎语，或者在加载页面时显示一些随机的小提示。

  // 随机生成一个十六进制颜色
  function getRandomHexColor() {
      return '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
  }
  document.body.style.backgroundColor = getRandomHexColor(); // 每次刷新页面背景色都可能不同

• 数据模拟与测试： 在没有真实数据时，我们需要生成一些模拟数据来测试前端界面或后端接口。比如生成随机的用户ID、订单金额、日期范围内的交易时间等。这对于快速构建原型和进行压力测试非常有帮助。
• 安全验证： 生成验证码（数字、字母的随机组合）、一次性密码（OTP）的辅助生成。当然，这里通常会结合更安全的随机数源。
• 内容展示： 网站首页随机展示热门文章、广告位随机轮播、博客文章列表随机排序。这些都能增加用户探索的乐趣和网站的动态感。

除了基础的随机数，JS还有哪些高级随机数生成需求？

除了上面提到的基本需求，有些场景会要求更“高级”的随机性或者特定分布的随机数。

• 密码学安全的随机数：window.crypto.getRandomValues() 前面提到Math.random()不适用于加密。幸运的是，现代浏览器提供了window.crypto.getRandomValues()这个API。它从操作系统底层的熵源（比如鼠标移动、键盘输入、磁盘活动、网络活动等）获取真正的随机性，因此生成的随机数是密码学安全的。 它的用法略有不同，需要传入一个类型化数组作为参数，然后它会用随机字节填充这个数组。

  const array = new Uint32Array(10); // 创建一个包含10个32位无符号整数的数组
  window.crypto.getRandomValues(array); // 用密码学安全的随机数填充数组
  console.log(array); // 数组中的每个元素都是一个随机的32位整数
  // 如果你需要一个安全的随机字符串，可以进一步处理这些字节

  这个方法在生成CSRF令牌、Session ID、临时密码等场景下是首选。

• 带权重的随机选择 有时我们需要的不是均匀分布的随机数，而是某些选项被选中的概率更高。比如，一个游戏里，普通道具掉落率高，稀有道具掉落率低。这需要我们自己实现一个逻辑：

  function weightedRandom(items, weights) {
      let i;
      for (i = 0; i < weights.length; i++) {
          weights[i] += weights[i - 1] || 0; // 计算累积权重
      }
      const random = Math.random() * weights[weights.length - 1]; // 生成一个在总权重内的随机数
      for (i = 0; i < weights.length; i++) {
          if (random < weights[i]) {
              return items[i]; // 找到对应的项
          }
      }
  }
  
  const lootItems = ['普通武器', '稀有盔甲', '史诗项链'];
  const lootWeights = [0.7, 0.25, 0.05]; // 70%普通，25%稀有，5%史诗
  console.log(weightedRandom(lootItems, lootWeights)); // 随机掉落一个物品

  这种方式在模拟真实世界事件或游戏经济系统中非常有用。

• 数组洗牌（Fisher-Yates Shuffle） 当我们有一个数组，想打乱它的顺序，比如扑克牌洗牌，或者随机展示用户列表，最常用且有效的方法是Fisher-Yates（或Knuth）洗牌算法。

  function shuffleArray(array) {
      let currentIndex = array.length, randomIndex;
      // 当还有元素需要洗牌时
      while (currentIndex !== 0) {
          // 随机选择一个剩余的元素
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex--;
          // 和当前元素交换
          [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
      }
      return array;
  }
  
  const cards = ['A♠', 'K♠', 'Q♠', 'J♠', '10♠'];
  console.log(shuffleArray(cards)); // 每次运行都会得到不同的牌序

  这个算法保证了每个元素被放置到任何位置的概率都是相等的，是真正意义上的“均匀洗牌”。在需要随机化列表顺序时，它几乎是标准答案。

以上就是《JS随机数生成方法全解析》的详细内容，更多关于随机数,Math.random(),伪随机,crypto.getRandomValues,数组洗牌的资料请关注golang学习网公众号！