Math.random()
函数想必大家都不陌生,它可以生成一个[0-1)
的随机数,基于此可以根据需要对其进一步处理,例如生成特定范围内的随机整数等等。本篇文章为大家介绍的是 random 函数的一些妙用
生成随机颜色色值
我们都知道色值可以用#000000
来表示,其中#
为固定前缀,后面是 6 位 16 进制数,那么我们就可以通过Math.random()
生成一个随机数,再通过toString(16)
将整数转换为 16 进制字符串
然后我们再从第二位开始截取 6 位随机字符再拼上#
就可以得到一个随机颜色色值啦
但是会有一些特殊情况,比如假如我们随机到的值是0.25
此时我们再对其截取返回的结果就是4
,显然不符合预期,这时候我们可以使用padEnd
函数让其不足 6 位则补0
就行了
最后我们将其写成一个函数如下
const getRandomColor = () => { return `#${Math.random().toString(16).substr(2, 6).padEnd(6, "0")}`; };
生成随机字符串
看到这都知道我们可以用random
函数来生成随机字符串,生成随机字符串其实很简单,我们只需要将random
函数的结果转换 36 进制为字符串(包含 a-z,0-9)然后从下标为 2 开始截取需要的长度即可
同样的也有特殊情况,比如我们随机到的是0.25
所有和前面处理方式一样,不足位数则补 0
然后将其写成一个函数
const getRandomStr = (len) => { return Math.random().toString(36).substr(2, len).padEnd(len, 0); };
这时候聪明的你会发现Math.random().toString(32)
返回的随机字符最多只有 11 位,但是如果我想生成大于 11 位的随机字符串该如何做?总不能后面都补 0 吧
这时候聪明的你一定想到了递归,没错,这里我们可以使用递归的方式来修改一下
const getRandomStr = (len) => { return len <= 11 ? Math.random().toString(36).substr(2, len).padEnd(len, 0) : getRandomStr(11) + getRandomStr(len - 11); };
此时我们便可以生成任意长度字符串啦
生成随机布尔值
要生成随机的布尔值,可以利用 Math.random()
方法生成一个随机数,然后根据这个随机数的大小来决定返回 true
还是 false
。最简单的方法是生成一个小数,然后判断这个小数是否大于等于0.5
,如果是则返回 true
,否则返回 false
。
const generateRandomBoolean = () => { return Math.random() >= 0.5; }; // 生成随机布尔值 let randomBoolean = generateRandomBoolean(); console.log(randomBoolean);
random函数还有很多用法,比如可以用上面生成随机字符串的方式来生成随机验证码, 生成[min,max]
之间的数Math.floor(Math.random() * (max - min + 1)) + min
等等,这些常用的用法这里就不过多的展开介绍了