做前端这些年如果统计我写过的API调用次数Math.random()绝对能排进前三。抽奖、洗牌、生成随机ID、跑测试数据、做A/B分组到处都有它的影子。很多入行不久的同学会把Math当成一个普通类把Math.random()当成“随机数发生器”随用随取结果一遇到边界条件、分布均匀性、安全等级这些需求就翻车。这篇就把math和random这两件事掰开揉碎讲清楚顺便把与之强相关的日期解析、异常处理也带出来——因为在真实项目里随机数往往和日期字符串、异常边界搅在一起单独看任何一环都像懂合在一起就报错。这篇文章适合刚学完JavaScript语法、正在做第一个完整小项目的读者也适合写了好几年业务代码但没抠过随机数细节的开发者。我会按照“Math对象本身 → random工作原理 → 整数边界 → 进阶玩法 → 第三方random库 → 日期与异常处理”的顺序展开把我实际踩过的坑、写工具函数时做的取舍以及为什么有些看起来很对的写法其实是错的全部交代清楚。1. Math对象它不是类而是一台内置计算器1.1 为什么说Math是对象而不是类所有JavaScript初学者几乎都踩过这样的坑看到Math首字母大写下意识觉得它跟Date、Array一样是个类于是尝试new Math()。结果浏览器直接报Math is not a constructor。这其实是一个很重要的认知点。Math是JavaScript内置的一个全局对象它不像Array、Date那样需要实例化。你可以把它理解成一台系统自带的计算器不需要买一台新的直接调上面的按钮就能用。它的所有属性和方法都是静态的所以Math.PI、Math.round()这种写法才是合法的。如果非要用生活类比Date是“一张空白日历纸”你需要先买一张new Date()然后往上面填写时间而Math是“挂在墙上的计算器”你直接走过来按按钮就行。这也解释了为什么你永远看不到Math.integer 1这种实例字段——因为Math根本没有实例。1.2 最常用的Math方法盘点我实际用到的那些日常业务代码里下面这些方法的使用频率最高方法作用实际场景Math.round()四舍五入取整价格分转元、评分展示Math.floor()向下取整分页计算、生成随机整数Math.ceil()向上取整计算总页数、计算需加载的分批次数Math.abs()取绝对值差值计算、表单距离校验Math.max()/Math.min()取最大/最小值求极值、限制数值范围Math.pow()幂运算计算面积、货币单位换算Math.sqrt()开平方两点距离计算、图形校验这里我想重点提一个大家不太注意的点Math.round()对负数并不是“四舍五入”这么简单。Math.round(-2.5)的结果是-2而不是-3因为它遵循的规则是“向正无穷方向取整”。很多做数据可视化、坐标计算的开发者在这里栽过跟头。如果想让负数也按绝对值四舍五入需要自己写逻辑比如Math.sign(n) * Math.round(Math.abs(n))。另一个容易被忽略的是Math.trunc()。这个方法直接截断小数部分不会做任何四舍五入。Math.trunc(2.9)是2Math.trunc(-2.9)是-2。它跟Math.floor在负数上的表现完全不同Math.floor(-2.9)是-3。在需要“去掉小数不关心正负方向”的场景里用Math.trunc更语义化。1.3 Math对象里那些冷门但救命的方法除了高频方法还有几个冷门方法在特定场景下非常有用我几乎每年都能在同事代码里看到可以替代的写法。Math.hypot()是我最近几年越来越爱用的方法。它可以一次性计算多个数的平方和的平方根最典型的场景就是计算二维坐标距离Math.hypot(x1 - x2, y1 - y2)。以前我会自己写Math.sqrt(Math.pow(x1-x2, 2) Math.pow(y1-y2, 2))又长又容易漏括号。Math.hypot还有一个隐藏优势它能避免中间值过大导致的精度溢出。比如两个很大的数做平方和中间结果可能超过Number.MAX_SAFE_INTEGER用Math.hypot就不会出现这个问题。Math.sign()用来判断一个数的正负返回1、-1、0或NaN。做拖拽方向的判断、涨跌颜色的赋值时这方法比if (n 0) ... else ...清晰得多。Math.fround()是对数值做32位单精度浮点数舍入处理WebGL颜色值、音频波形数据时很有用。我做过一个音频可视化项目音频样本本来就是Float32Array但拿出来的数值被引擎当成了普通Number喂给WebGL之前必须用Math.fround绕一圈否则颜色会偏得离谱。2. 深入理解Math.random它到底是怎么产生随机数的2.1 Math.random并不是“真正随机”很多人以为Math.random()就像掷骰子一样每一次独立、不可预测。实际不是这样。JavaScript引擎里的Math.random()几乎都是“伪随机数生成器”PRNG本质是一个极其复杂的数学函数。它内部维护一个状态每次调用时根据当前状态计算出一个数然后更新状态。这个计算过程是确定的如果初始状态相同后续产生的序列也完全相同。现代V8引擎使用的算法通常是xorshift128这类高性能伪随机算法。它有很好的统计均匀性生成速度极快但你只要拿到足够多的输出样本、知道算法细节理论上是可以反推出下一个值的。换句话说Math.random()适合做游戏道具掉落、测试数据生成、UI随机展示但不适合做加密、抽奖防作弊、Token生成。这个认知特别重要。我见过一个外包项目用Math.random()做优惠券码结果被用户发现规律后批量刷券最后甲方只能紧急换方案。不是Math.random()这个API写错了而是它被用在了错误的安全等级上。2.2 均匀性的现实意义和常见误解Math.random()声称返回[0, 1)区间的浮点数也就是说它可能返回0但永远不会返回1。这个左闭右开的区间设计是后续所有随机整数公式能成立的基础。从统计角度看只要样本量足够大Math.random()产生的浮点数在整个区间内分布是近似均匀的。均匀性在这里的意思是任意两个长度相等的小区间落入其中的样本数期望相等。但要注意这个“均匀”是指统计意义上的均匀不意味着你连续调用10次就一定会出现5个小数和5个大数。现实中连续出现10次大于0.5的情况完全可能这并不代表算法有问题。我在做分组实验平台时经常要用随机数把用户分到A、B两组。当时就有同事质疑为什么我连续刷新页面好几轮都分到了A组是不是随机算法有bug其实用Math.random()分组的本质是把[0,1)切成两个等宽区间每次调用互相独立连续分到同一边的概率为0.5^n连续5次都同一边的概率大约是3%。在大量实验下这种“连续相同”的观感非常容易出现并不是算法偏心。2.3 伪随机种子的误解别再把new Date()当种子很多从其他语言转过来的开发者会问JavaScript需不需要像C语言那样手动设置随机种子比如seed new Date().getTime()然后传给某个函数。这里要澄清原生Math.random()不提供设置种子的API引擎在启动时会根据系统熵源自动初始化种子状态。所以你不需要也无法手动重置种子。如果你想要“同样的种子产生同样随机序列”的可复现效果原生Math.random()做不到需要借助第三方库比如seedrandom。这种情况下用new Date().getTime()作为种子传给seedrandom是很常见的做法但注意这是库自己的机制跟原生Math.random()无关。我当年刚开始写代码时误以为给Math.random()传入一个日期参数就能影响随机结果于是写出了Math.random(new Date().getTime())这种代码。运行后发现参数根本没人理查了规范才明白Math.random()是零参方法传入任何值都被忽略。这个误解在老教程里特别常见建议大家看到类似写法时先怀疑一下。3. 从Math.random到随机整数边界问题详解3.1 经典公式为什么是那个样子最经典的“取min到max之间的随机整数”公式长这样function randomInt(min, max) { return Math.floor(Math.random() * (max - min 1)) min; }很多新手背下了这个公式却不知道为什么要1。我用一个最简单的例子拆解如果我想随机得到0、1、2其中一个数max 2, min 0那么max - min 1 3。Math.random()产生的数在[0,1)区间乘3之后结果落在[0,3)区间也就是最小为0最大无限接近3但永远不到3。对这个结果做Math.floor()相当于取整数部分只可能得到0、1、2不可能得到3。如果不加这个1乘数就是2结果落在[0,2)Math.floor之后只能得到0、1永远取不到最大值2。这就是1的来历它把闭区间[min, max]的长度换算成了乘数。理解了这个原理你就不会再死记公式万一真的忘了也能现场推出来。3.2 为什么Math.ceil和Math.round做随机整数都是坑网上有一部分代码会用Math.ceil或Math.round配合Math.random()生成随机整数这两条路都有隐患。Math.ceil(Math.random() * max)的问题在于当Math.random()恰巧返回0时结果是0。如果业务要求“从1到max之间取数最小是1”这种写法就会出现0这个非法值。虽然没有人会故意用ceil去生成从0开始的数但在“最小值为1”的场景里这种坑特别隐蔽。我见过一个用Math.ceil做1~6掷骰子模拟的代码掷出来0的概率虽然不高但那一瞬间整个游戏逻辑就崩了。Math.round(Math.random() * max)的问题更严重它会产生不均匀的分布。以max2为例Math.random()*2落在[0,2)区间如果四舍五入结果0对应[0, 0.5)区间长度0.5结果1对应[0.5, 1.5)区间长度1结果2对应[1.5, 2)区间长度0.5。中间的数出现概率是两边的两倍这完全破坏了随机均匀性。只有Math.floor配合[0,1)随机浮点数才能保证每个整数出现的概率严格相等。这是所有随机整数实现里最应该优先选择的组合。3.3 我自己封装随机整数工具函数的完整过程我平时不直接裸写公式而是封装成一个带边界校验的工具函数。因为裸写公式遇到min和max传反、传小数、传NaN的情况得到的结果会非常莫名其妙。function randomInt(min, max) { if (!Number.isInteger(min) || !Number.isInteger(max)) { throw new TypeError(min和max都必须是整数); } if (min max) { [min, max] [max, min]; } return Math.floor(Math.random() * (max - min 1)) min; }这里有三处细节值得说明。第一用Number.isInteger而不是typeof number因为typeof NaN number也是真但NaN一旦参与运算结果必然是NaN这种错误应该在入口就被拦截。第二交换min和max是一种“宽容式设计”我在内部测试脚本里经常不自觉地传反参数与其让函数抛错不如自己把顺序纠正过来。第三Math.floor是最后一道保险它保证在极端情况下也不会返回小数。如果项目里需要的是安全随机数我不会用这个函数而是单独封装一个基于crypto.getRandomValues的版本后面第4章会说到。4. 随机洗牌、抽样与安全红线进阶玩法4.1 Fisher-Yates洗牌为什么优于sort排序随机洗牌是前端非常常见的需求比如音乐播放器的随机播放、试卷题目乱序、抽奖名单打乱。网上流传最广、代码最简单的写法是const shuffled arr.slice().sort(() Math.random() - 0.5);这个写法代码确实短但随机性有很大问题。sort回调的返回值只代表“两个元素谁在前谁在后”的相对关系并不等价于对每个元素赋予一个独立的随机权重。大量实验证明用这种排序法产生的排列顺序并不均匀一些元素会系统性偏前或偏后。此外不同浏览器对sort的稳定性处理不同V8在数组长度超过一定阈值时排序算法会切换导致随机分布进一步偏移。业内标准的做法是Fisher-Yates洗牌也叫Knuth洗牌。核心思路是从后往前遍历每次在当前未处理区间里随机选一个位置与当前位置交换function shuffle(arr) { const result [...arr]; for (let i result.length - 1; i 0; i--) { const j Math.floor(Math.random() * (i 1)); [result[i], result[j]] [result[j], result[i]]; } return result; }这个算法的时间复杂度是O(n)而且每个排列出现的概率完全均等。我第一次把项目里的sorter改成Fisher-Yates之后测试环境里“第一题永远是同一道”的现象直接消失了。原理上它为什么有效因为每一轮都从“尚未确定的元素集合”里等概率抽取一个放到最后最后一步操作结束时就保证了每个排列是等概率的。4.2 从数组里随机抽样区分“不重复抽”和“可重复抽”随机抽样的需求也很多比如从100道题里抽5道不重复的题目。这里的关键是抽完之后允不允许再次被抽到。允许重复抽取的场景相对简单每次用Math.floor(Math.random() * arr.length)取下标就行。不允许重复的场景我推荐先做一次Fisher-Yates部分洗牌然后取前n个元素function sampleWithoutReplacement(arr, n) { if (n arr.length) { throw new RangeError(n不能大于数组长度); } const shuffled shuffle(arr); return shuffled.slice(0, n); }另一种常见的做法是用Set记录已抽下标然后while循环一直抽到数量足够。这种写法在n远小于数组长度时问题不大但如果要抽的数量接近数组长度越到后面越难命中未抽中的下标性能会指数级恶化。我看到过有人在1000条数据里抽999条用这个写法跑了近10万次循环才抽满页面直接卡死。部分洗牌法不存在这个问题因为抽取次数永远和n成正比。4.3 安全红线所有跟钱、账号、Token相关的随机数都不要用Math.random这一点我在第2章提过但这里必须再单独划一条红线密码重置Token、优惠券码、邀请码、API密钥、抽奖防作弊全部都不能用Math.random()。原因在于Math.random()是伪随机种子状态可能被预测。浏览器的crypto.getRandomValues()和Node.js的crypto.randomInt()、crypto.randomBytes()才是基于操作系统熵源的真随机数生成器。以加密安全级别来划分Math.random()属于“够看不够用”的等级任何一个安全评审环节都会直接否决它。写一个安全的随机整数获取方式其实很简单function secureRandomInt(min, max) { const range max - min 1; const maxValid Math.floor(0xFFFFFFFF / range) * range; const array new Uint32Array(1); let value; do { crypto.getRandomValues(array); value array[0]; } while (value maxValid); return (value % range) min; }这里用一个do...while循环的原因是消除模偏差。如果0xFFFFFFFF不能被range整除直接用%会让某些数字出现的概率略高于其他数字。循环把落在“多出来”区间的值丢弃再重新取就能保证每个数字严格等概率。5. 第三方random库到底解决了什么问题5.1 random库和Math.random的核心差异npm上的random库是一套更丰富的随机数工具集底层在浏览器环境仍然依赖Math.random()或crypto.getRandomValues()但它把常见需求都封装成了语义化API。比如random.int(1, 100)、random.float(0, 1)、random.bool()、random.shuffle(arr)、random.pick(arr)、random.string(16)。相比自己写工具函数这个库最大的价值不是“更随机”而是“更不容易写错”。它内部帮你处理了边界校验、整数区间、分布均匀等问题还支持自定义随机数生成器。如果你需要可复现的随机序列可以给它注入一个seedrandom生成器这样同一套种子在测试环境能稳定复现问题。我之前在一个可视化大屏项目里用它生成模拟数据一行random.pick(statusList)就能随机切换订单状态比原来自己写randomInt(0, statusList.length - 1)要直观得多。团队成员接手时看到代码就能立刻明白意图。5.2 什么场景值得引库什么场景不值得如果你的项目只用到一处随机整数我建议不要因为这点需求引一个库。前端包体积虽然已经没那么敏感但多一个依赖就多一个维护点而且库本身不会比3行原生代码更快。但如果项目里有密集的随机数据生成需求——比如报表系统的模拟数据模块、游戏开发里的掉落表配置、测试平台的数据生成器——引入random库代码可读性和维护性会明显提升。我现在的原则是超过3个不同场景需要随机数就考虑引库只有1个场景就手写。还有一点要提醒random库默认在Node.js和浏览器环境下的行为略有差别引库之前先确认目标运行环境。Node.js端它可能会尝试使用crypto模块这在某些边缘运行时如部分小程序容器会兼容性问题。5.3 用random库生成随机密码的完整流程工程项目里还有一个高频需求是“生成随机字符串”。我用random库实现过一个密码重置场景下的临时密码生成器const random require(random); function generateTempPassword(length 12) { if (length 8) { throw new RangeError(临时密码长度不能小于8); } const hasUpper random.bool(); const hasNumber random.bool(); let charset abcdefghijklmnopqrstuvwxyz; if (hasUpper) { charset ABCDEFGHIJKLMNOPQRSTUVWXYZ; } if (hasNumber) { charset 0123456789; } let password ; for (let i 0; i length; i) { const index random.int(0, charset.length - 1); password charset[index]; } return password; }这个场景里我用random.int而不是裸写Math.floor(Math.random()*charset.length)更重要的是它天然支持注入安全随机数生成器。如果项目要求临时密码达到加密安全级别可以通过配置让random库底层使用crypto而不是默认的Math.random。只改一行配置工具函数内部完全不用动这正是库封装带来的好处。6. 绕不开的边界随机数场景下的日期与异常处理6.1 为什么随机数代码里总会冒出日期在做随机数相关项目时日期几乎总是会一起出现。一个很典型的场景是生成可复现的随机序列测试环境要求每次跑同一套随机数据这时候需要用种子很多人的第一反应就是用Date.now()作为种子因为它是每毫秒变化一次的数字看起来天然适合当种子。用Date.now()作为seedrandom的种子本身没有大问题但要注意它带来一个新隐患如果同一次测试过程中连续多次调用seedrandom(Date.now())而两次调用发生在同一毫秒内种子的值完全一样生成的序列就完全一样。我在一个跑批量回归测试的脚本里踩过这个坑同一批次测试用例拿到的“随机”数据竟然一模一样排查了半天才发现是因为测试并行执行时好几个用例恰好落在同一个毫秒里初始化了同一个种子。解决方案是给种子附加一个自增序号或者随机盐值比如Date.now() : (counter)确保同一毫秒内也能区分。另外Date.parse()解析日期字符串时在不同浏览器里的表现并不一致。比如new Date(2024-01-01)在现代浏览器里是标准行为解析结果可靠但new Date(2024/01/01)在旧版浏览器就可能被解析成无效日期进而产生NaN。如果随机种子要跟日期字符串挂钩比如“依据用户生日生成随机推荐主题”务必先用Date.parse验证一下或统一使用ISO格式字符串。6.2 Math计算过程中最常见的NaN和Infinity来源Math.random()本身几乎不会返回NaN和Infinity但随机数参与后续计算时边界问题就会暴露。最常见的是随机数作为分母1 / Math.random()虽然Math.random()可以返回0所以结果可能变成Infinity。如果这个结果再参与加减乘除最终可能得到NaN。另一个来源是随机索引访问数组时索引计算出错。比如Math.floor(Math.random() * arr.length)本身没问题但如果你错误地写成Math.ceil(Math.random() * arr.length)就有小概率得到一个等于arr.length的下标访问arr[arr.length]得到undefined。这个undefined被后续逻辑使用后Number(undefined)会变成NaN然后所有计算全部被污染。排查这类问题有一个很实用的经验遇到NaN不要从上到下逐行读代码先检查所有出现Math.random的公式和所有Math.floor/ceil/round的组合把边界情况写几组测试用例打出来。90%的NaN问题都出在某个取整函数的不当选择或数组越界访问上。6.3 封装随机数工具时的异常处理风格我在给团队封装随机数工具模块时对异常处理有比较明确的分层模块内部接口比如randomInt、shuffle使用严格校验参数非法就抛TypeError或RangeError这样调用方能在开发阶段立刻发现错误而不是把错误数据传递到更深层最后变成一个说不清的NaN或错乱结果。业务层调用时我不吞异常但会做兜底。比如在线答题页面加载时如果随机规则的参数配置错误我不希望整页白屏会捕获异常后走默认题库顺序。这种情况下用try...catch是合理的。function getQuestionIds(questionPool, count) { try { return sampleWithoutReplacement(questionPool, count); } catch (error) { console.warn(随机抽取失败使用默认顺序, error); return questionPool.slice(0, count); } }这个兜底策略有明确的前提题目顺序随机只是增强体验不是核心正确性。如果抽奖、防作弊这类场景兜底反而会掩盖真正的随机性故障。异常处理的本质是“这个失败是否可容忍”判断清楚这一点比用什么语法更重要。我在实际项目里最常遇到的情况是同事为了省事把工具函数里的校验全部删掉依赖调用方自觉传参。但现实是人都会手滑randomInt(1)这种漏参数的调用在团队里反复出现。我不想用“你有没有看文档”去责备人直接在函数入口做一次友好报错比任何口头约定都管用。这也是我在这一章里反复强调边界校验的原因——代码不是给自己看的是要在真实世界里扛住各种手误的。