Math.random()除了能生成随机数,还有什么其他的应用?

209 阅读2分钟

在开发中,对Math.random()这个函数并不陌生,如果我们直接使用Math.random()的话可以看到会生成一个0-1之间的随机数。

image.png

生成随机的16进制颜色

有时候我们开发的时候,需要用到一个随机的颜色,那么颜色用的是16进制的,我们就可以用到这个随机数来创造一个随机的颜色。应该怎么去操作呢?

首先我们使用Math.random()函数得到的是一个Number类型,我们需要转换成String类型,所以必不可少用到的一个toString()函数。toString()函数可以传入一个参数,决定这个数字要转换的进制。

image.png

得到了这一串字符串之后,我们需要的是小数点后面的六位,然后在前面加上'#'。截取字符串我们可以使用slice()函数,传入需要截取的位置。

image.png

那这样真的就大功告成了嘛?

我们想想,它是一个随机数,那如果有时候它随机出来的数是0.25?0.5?0.3之类的呢?那就凑不齐六位数了,那显然是有点问题的。

如果这个数字不满6位,我们可以在后面加上足够的0,去补齐六位数。使用padEnd()函数,在末尾补充足够的0,这样就不会有什么大问题了。

image.png

生成随机的字符串

除了能生成一个随机的颜色以外,还可以生成一个随机的字符串,还是使用toString()函数。toString()函数里面,传入36进制。(36进制:数字是10个,字母是26个。26+10就是36进制)。

image.png

假设我们需要6位,还是使用padEnd()函数去截取,这里就不放截图了。

但是这里也会有一个问题,用这种方式产生的随机数是有长度限制的,只能存11位。那如果我们超过11位的话,我们应该怎么做呢?我们可以封装一个函数,可以递归调用11位。这样封装,我们就可以生成任意的随机字符串了。

function test (len) {
    if(len <= 11){
        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')
    }else{
        return test(11) + test(len-11)
    }
}

image.png

本文章参考渡一教育的小例子,仅供记笔记学习。