(转载)Math.random()随机数的二三事

原文地址:http://www.soulteary.com/2014/07/05/js-math-random-trick.html

看到题目,如果大家在平时被问到:
如何生成一个怎么样怎么样的整数随机数,估计大家都会不屑,但是当你淡定的回答:

获取一个范围应该是随机数seeds和区间数值差的乘机与最小数相加然后再怎么怎么的时候…

有没有发现你的思维已经固化了呢。

这个知识点应该是玩JS肯定会碰到的之一吧。

先来掉书袋,看看MDN的文档
打开Node,进入终端命令行模式,输入Math.random():

 Math.random()
 0.436846193857491

结果是不是依旧如同往常一样稀松平常的小于1的一个伪随机数跳了出来呢。
这个时候,如果别人问你,还有什么其他方案可以生成随机数么,你会想到神马呢。
如果你继续在终端里输入new Date()-0:

 new Date()-0
1404488829907

我想你可以得到一个自增的数字,对,就是“秒”,如果你说这货哪里随机了,请别着急:

 (new Date()-0)%10086
8657

这里的取模%的数值可以是大于2且最好小于当前时间的数值,则可以得到你取模数值概率分之一的概率的随机数。

如果你取模的数值是随机数呢,那么产生这个随机数的可见的两个变量都是随机的,那么是不是近似真的“随机数”了呢?

当然,如果使用这招,还要考虑到硬件以及语言执行过程的耗时,因为我们知道计算机执行的时候,有一个时间的精度的范畴,所以需要使用一点点的延时抑制。

扯了一些没用的,你可能着急了,那么请保持好奇心,我们继续说点无聊的事情。

Math.random会提供给我们一个[0,1)之间的随机数,但是如果我们要[1,10]范围随机整数的话,可以使用以下三个函数:

  • Math.round
  • Math.ceil
  • Math.floor

我们先来生成一个随机数:

 Math.random()*(10-1)+1
8.26644050120376

接着我们来使用这三个Math内建函数:

 Math.round(8.26644050120376)
8
 Math.ceil(8.26644050120376)
9
 Math.floor(8.26644050120376)
8

把数值换成8.56644050120376后,再来看看:

Math.round(8.56644050120376)
9
 Math.ceil(8.56644050120376)
9
 Math.floor(8.56644050120376)
8

所以区别一目了然,对于浮点数,round会遵守四舍五入规则,ceil无论如何贪心进位+1,floor无论如何都小心翼翼的自断一臂-1,至于整数,自己试试看咯。

说到这里,接下来可以正常的描述内容了:

问:如何快速生成一段随机文本,比如验证码或者我们访问网站常见的随机数token。

答案很多,我说一个经典的,其实思路很简单,把刚刚生成随机数的方法随便选择一个.toString():

Math.random().toString(36).substring(7);
//当然也可以写成这样
Math.random().toString(36).slice(2);
//或者利用时间
(new Date()-0).toString(36)

随便输出一些,我们可以看到这货输出的字符串长短参次不齐的:

mptzulnb3xr
87jx7vkuik9
761qsolayvi
amqx2mx6r
ce5uyvkuik9
5ioufim5cdi
dirp4hiwwmi
ioe597ldi
ohn9izfr
sprsakk2o6r
5g3ruo6flxr

//单纯时间来做随机是不是生成的惨不忍睹
//而且不做随机延时抑制,重复太明显

hx7pom3y
hx7pom3z
hx7pom40
hx7pom41
hx7pom42
hx7pom43
hx7pom44
hx7pom45

我们先来看看为什么用toString()可以生成随机数:
首先前面的家伙不管是随机数seeds生成的,还是时间递增的长整型,它们都是Number构造器构造出来的[object Number],而在ecma.js中,Number的这个方法是这样的:

/**
@param {Number} [radix]
@return {string}
*/
Number.prototype.toString = function(radix) {};

作为一个好人,我给你指条明路,MDN的文档
看过之后是不是想到了parseInt
函数的第二个参数?我们发现,这个原生函数支持2~36(如果超出36,那么26个字母就不够用了亲)进制的转换,所以如果在生成的时候,随机切换进制,取结果的随机位置,效果会不会更好呢,你可以试一试。
如果你想获得字母多一点且平均一点,那么只有使用36进制了,但是不管怎么躲,都有可能出现一串数字。

xjuk0zxofen1xlxr

有没有好方法来解决这个问题呢,答:

Math.random().toString(36).replace(/[^a-z]+/g, '')
//或者这样
Math.random().toString(36).slice(2).replace(/\d/g, '')

这个时候,你或许会说,文章该就此结束了吧,这个方法看起来很爽很简洁。
不过,你有思考过一个问题么,回顾前文,随机数可以是0,1,...这些整数…

当随机数是这些数值的时候,很抱歉,返回值是原来的数值,即0,1,...,我们得到的最后的结果就会是一个空字符串,而如果是0.5这类某些以5结尾的浮点数的时候,结果依然如此。还有当数值是某些时候,生成的随机数位数会比较短…

解决这个问题,你当然可以重新生成这个随机数,直到它输出一个你心满意足的随机数再放过他,但是,我们刚刚了解到的生成一个大的随机数的方法是依赖时间,小学还是初中学过的用一个比较小的数值除以一个比较大的数值,得到的结果是一个更小的浮点数来解决这个问题呢。

(Math.random() / +new Date()).toString(36).replace(/\d/g, '').slice(1)

这样就得到了一个比较长,且比较公平的随机数。可以用node验证一下:

var c = {}, r;
for (var i = 0, j = 10000000; i < j; i++) {
r = (Math.random() / +new Date()).toString(36).replace(/\d/g, '').slice(1);
c[r] ? c[r] += 1 : c[r] = 1;}
for (var i in c) {if (c[i] === 1) {delete c[i];}}
console.log(c);

运行结果是没有任何冲突,当然这可能是小概率事件。如果你觉得你点很背,你可以试一试下面这段,手动执行几次,看看,有没有不是空数组这个结果的结果。

for(var i = 0,j=100;i<j;i++){
(function(){var c = {}, r;for (var i = 0, j = 1000; i < j; i++) {
r = (Math.random() / +new Date()).toString(36).replace(/\d/g, '').slice(1);
c[r] ? c[r] += 1 : c[r] = 1;}
for (var i in c) {if (c[i] === 1) {delete c[i];}}
console.log(c);}())}

当然,你也可以不用这两个测试例子上面的那段代码,改用下面这种方式,多输出几次随机字符串,然后拼合在一起。

for(var c = ''; c.length < 5;) c += Math.random().toString(36).substr(2)

这个把戏估计你看腻了,我们来看下面这个系列的示例,从固定的字典中抽取字符构成随机字符串:

依赖Array的map方法,要注意兼容性,当然,你从MDN那边copy一段hacks也可以无缝兼容,是不是看起来高大上一点:

Array.apply(0, Array(5)).map(function () {
    return (function (charset) {
        return charset.charAt(Math.floor(Math.random() * charset.length))
    }('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'));
}).join('');

不过或许你更容易接受这种多一点:

function rand(length, current) {
    current = current ? current : '';
    return length ? rand(--length, "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz".charAt(Math.floor(Math.random() * 60)) + current) : current;
}

或者更传统的:

function rand() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < 5; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}

或许你以为这样把戏就玩完了,too young too simple,之前玩过了Number的原生函数,我们还可以动手脚的是String的原生函数,比如我们知道,字母的ASCII码是[65,97],那么当这个区间是字典,我们随机抽取这个区间是不是会有一些好玩的事情发生呢。

function rand(x) {
    var s = "";
    while (s.length < x && x > 0) {
        var r = Math.random();
        s += String.fromCharCode(Math.floor(r * 26) + (r > 0.5 ? 97 : 65));
    }
    return s;
}

随便输入一个电话号码(推荐输入短一点的数),然后等等看,是不是会出现下面的结果:

JrxKnxrHwJzGCKoKCzrpFxMxDBFqBrpAEGvpvMtCIHIHFCxtMxrHtpEGDyxzxwMBBqDvEBwxprwHqDMCErIzLwuyFApnxpxJoxBAFEoHsAEqvIxBIJvpFBoLnvurHJsvDFwGtFvDsELMLwzowvqBJtCwrGCsCHGvsxCLunGxtrtnyvvwyFqEsstotxnsrqLHAIyCxzLxDqtuzsoFJAGHyxrwxJusJrtpuvIyIILoJrGLKnptqHLBAKwGEpnIwzCtFAnrHIqLHynGwuyupsDpLJFGxBuJBouwCDGKsKFCLKnAzoupsxFqIynKFCoBApyBsJKzJpKwEFCyGywrBoFpvorMzBrBAFowrKxvuJLoKtzpEoDsEsBExyGBMssnADnBwrvJDGunJsMyFGCxIFApEnoLyGxBrHroBsLAICGLDIwvqp

这个话题,好像说的有点麻木了,换个需求吧。有的网站会玩一些随机背景色的小花样。有没有优雅的解决方案呢:

遵守随机数函数的定义,获取颜色数值之间的数值就好,看过了上面的代码,这句,很好懂了伐:

'#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);

当然,你可以写一个更加直观的方案:

//用十进制数据来代替16进制数据运算,请注意因为右边是开区间,要比上面的0xffffff +1,最后将结果转换回十六进制,然后修剪一下字符串,输出
Math.floor(Math.random() * 16777216).toString(16);
'#000000'.slice(0, -color.length) + color;

//或者更简短的样子如下
"#" + ("000000" + Math.floor(Math.random() * 16777216).toString(16)).substr(-6);

还有一类花样,如下:

function randomColor() {
    var r = function () { return Math.floor(Math.random()*256) };
    return "rgb(" + r() + "," + r() + "," + r() + ")";
}

输出如下:

rgb(29,236,191)

时间不早了,最后说一下随机排序数组吧。

关于洗牌算法,网上流传很多,随便选择一种模拟一下就好,比如随便写的全重排:

var i = 0, data = [], r;
for (; i < 10; data[i++] = i);
while (--i) {
    r = Math.round(Math.random() * 9 + 1) - 1;
    data[i] = data[i] + data[r], data[r] = data[i] - data[r], data[i] = data[i] - data[r];
}
console.log(data)

或者利用Array.prototype.sort()函数,这里可以不把里面的数值带进来运算。

首先Math.random()会生成一个[0,1)之间的数值,用0.5这个比较公平的数值减去它,概率得到小于0,等于0,大于0三种状况,而Array.prototype.sort()期待的数值恰好是[-1,0,1],是不是很省事。

var i = 0, data = [], r;
for (; i < 10; data[i++] = i);
data.sort(function () {
    return .5 - Math.random();
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容

  • 方法1 (数据类型)(最小值+Math.random()*(最大值-最小值+1)) 例: (int)(1+Math...
    GB_speak阅读 40,904评论 2 6
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,196评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,497评论 18 139
  • 1. 常用那几种浏览器测试?有哪些内核(Layout Engine)?(Q1)浏览器:IE,Chrome,Fire...
    猿分让我们相遇阅读 236评论 0 0
  • 那是柱子最酷的一晚,单枪匹马,手举板凳,大脚破门,以一敌四,如天神下凡,把徐峰一伙打得嗷嗷直叫,就像高举大剑怒吼着...
    阿姆斯特高阅读 811评论 9 5