Math.random() 還能這樣玩？

相信你們對 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