【JS】804- Math.random() 还能这样玩?
共 1490字,需浏览 3分钟
· 2020-12-12
相信大家对 Math.random 函数都不会陌生,调用该函数后会返回一个伪随机数,对应的取值范围是 [0, 1)
。在日常工作中,应用的比较多的场景是生成 UUID,比如:
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
当然除了上述方法外,还有其他的方法可以用来生成 UUID,感兴趣的小伙伴可以参考一下 Stack Overflow 上 “how-to-create-a-guid-uuid” 这一篇问答。Math.random 除了上述的应用场景之外,还可以应用在游戏、动画、随机数据、生成音乐或艺术图片等场景。
好的,废话不多说,接下来我们马上来一起感受一下 Math.random 的魅力。
霓虹灯六角形粒子动画
![](https://filescdn.proginn.com/39515b8e404894e7b15098218b0c6c3e/94619366837209e15dceaf0a0fd4806e.webp)
(图片来源:https://codepen.io/towc/pen/mJzOWJ)
生成音乐
![](https://filescdn.proginn.com/b175229b8405cd6fa6f3f2d20e465f85/7afa9fe8d2294b99fee76482c985ae74.webp)
(图片来源:https://codepen.io/jakealbaugh/pen/zxoOjG)
文字打乱效果
![](https://filescdn.proginn.com/1c3ec8355ca7ae66d54ea318b130884e/29430de521c9b59b55d13c58e29c898d.webp)
(图片来源:https://codepen.io/soulwire/pen/mErPAK)
手头剪刀布游戏
![](https://filescdn.proginn.com/38deb642188dcc0319ae1d7d803c9b1a/09d20398a8581fe94203a2dfd444ede5.webp)
(图片来源:https://codepen.io/studiojvla/pen/ONjyMo)
随机密码生成器
![](https://filescdn.proginn.com/3bd0055904b57bc245339a857c7f942b/43a89e216d1acee6f1abf763d1fb3d6b.webp)
(图片来源:https://codepen.io/nourabusoud/pen/YeMOVv)
随机背景颜色
![](https://filescdn.proginn.com/89d774e84719041605ea4ad079d1c393/9bfe86d92080569478b9aacf771e1649.webp)
(图片来源:https://codepen.io/meodai/pen/RerqjG)
生成艺术图案
![](https://filescdn.proginn.com/110836df717bdae2f4bb40eca6b4582b/93ae4deebfcba9d941f1d13f840502ac.webp)
(图片来源:https://codepen.io/tjoen/pen/iCgfj)
看完以上的示例,你是不是觉得挺好玩的。其实这些示例是阿宝哥从 “lots-of-ways-to-use-math-random-in-javascript” 这篇文章中介绍的例子里挑选出来的,感谢作者 Jwahir Sundai 为我们提供了那么? 的使用示例。如果你对其他的示例感兴趣的话,可以自行阅读一下该文章哟。
虽然 Math.random 函数能帮助我们实现很酷炫的动画或很好玩的功能,但该函数并不是真的随机,对应的算法被称为 伪随机数生成器(Pseudo Random Number Generator)。
因为 Math.random 不能提供像密码一样安全的随机数字,所以不要使用它来处理有关安全的事情。针对信息安全的场景,你可以使用 Web Crypto API 来代替,并使用更精确的 window.crypto.getRandomValues()
方法。
参考资源
MDN - Math.random Stackoverflow - how-to-create-a-guid-uuid lots-of-ways-to-use-math-random-in-javascript