【JS】804- 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 的魅力。

霓虹燈六角形粒子動畫

（圖檔來源：https://codepen.io/towc/pen/mJzOWJ）

生成音樂

（圖檔來源：https://codepen.io/jakealbaugh/pen/zxoOjG）

文字打亂效果

（圖檔來源：https://codepen.io/soulwire/pen/mErPAK）

手頭剪刀布遊戲

（圖檔來源：https://codepen.io/studiojvla/pen/ONjyMo）

随機密碼生成器

（圖檔來源：https://codepen.io/nourabusoud/pen/YeMOVv）

随機背景顔色

（圖檔來源：https://codepen.io/meodai/pen/RerqjG）

生成藝術圖案

（圖檔來源：https://codepen.io/tjoen/pen/iCgfj）

看完以上的示例，你是不是覺得挺好玩的。其實這些示例是阿寶哥從 “lots-of-ways-to-use-math-random-in-javascript” 這篇文章中介紹的例子裡挑選出來的，感謝作者 Jwahir Sundai 為我們提供了那麼👍  的使用示例。如果你對其他的示例感興趣的話，可以自行閱讀一下該文章喲。

雖然 Math.random 函數能幫助我們實作很酷炫的動畫或很好玩的功能，但該函數并不是真的随機，對應的算法被稱為 僞随機數生成器（Pseudo Random Number Generator）。

參考資源

• MDN - Math.random
• Stackoverflow - how-to-create-a-guid-uuid
• lots-of-ways-to-use-math-random-in-javascript