乐趣区

关于前端:Mathrandom-还能这样玩

jiezi

置信大家对 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 的魅力。

关注「全栈修仙之路」浏览阿宝哥原创的 3 本收费电子书（累计下载近 2 万）及 50 几篇“重学 TS”教程。

霓虹灯六角形粒子动画

（图片起源：https://codepen.io/towc/pen/m…）

生成音乐

（图片起源：https://codepen.io/jakealbaug…）

文字打乱成果

（图片起源：https://codepen.io/soulwire/p…）

手头剪刀布游戏

（图片起源：https://codepen.io/studiojvla…）

随机明码生成器

（图片起源：https://codepen.io/nourabusou…）

随机背景色彩

（图片起源：https://codepen.io/meodai/pen…）

生成艺术图案

（图片起源：https://codepen.io/tjoen/pen/…）

看完以上的示例，你是不是感觉很诧异。其实这些示例是阿宝哥从“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
退出移动版