JavaScript中的随机函数Random的妙用

Math.random()函数想必大家都不陌生,它可以生成一个[0-1)的随机数,基于此可以根据需要对其进一步处理,例如生成特定范围内的随机整数等等。本篇文章为大家介绍的是 random 函数的一些妙用

生成随机颜色色值

我们都知道色值可以用#000000来表示,其中#为固定前缀,后面是 6 位 16 进制数,那么我们就可以通过Math.random()生成一个随机数,再通过toString(16)将整数转换为 16 进制字符串

然后我们再从第二位开始截取 6 位随机字符再拼上#就可以得到一个随机颜色色值啦

但是会有一些特殊情况,比如假如我们随机到的值是0.25

此时我们再对其截取返回的结果就是4,显然不符合预期,这时候我们可以使用padEnd函数让其不足 6 位则补0就行了

最后我们将其写成一个函数如下

js 复制代码
const getRandomColor = () => {
  return `#${Math.random().toString(16).substr(2, 6).padEnd(6, "0")}`;
};

生成随机字符串

看到这都知道我们可以用random函数来生成随机字符串,生成随机字符串其实很简单,我们只需要将random函数的结果转换 36 进制为字符串(包含 a-z,0-9)然后从下标为 2 开始截取需要的长度即可

同样的也有特殊情况,比如我们随机到的是0.25

所有和前面处理方式一样,不足位数则补 0

然后将其写成一个函数

js 复制代码
const getRandomStr = (len) => {
  return Math.random().toString(36).substr(2, len).padEnd(len, 0);
};

这时候聪明的你会发现Math.random().toString(32)返回的随机字符最多只有 11 位,但是如果我想生成大于 11 位的随机字符串该如何做?总不能后面都补 0 吧

这时候聪明的你一定想到了递归,没错,这里我们可以使用递归的方式来修改一下

js 复制代码
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

js 复制代码
const generateRandomBoolean = () => {
  return Math.random() >= 0.5;
};

// 生成随机布尔值
let randomBoolean = generateRandomBoolean();
console.log(randomBoolean);

random函数还有很多用法,比如可以用上面生成随机字符串的方式来生成随机验证码, 生成[min,max]之间的数Math.floor(Math.random() * (max - min + 1)) + min等等,这些常用的用法这里就不过多的展开介绍了

如果你觉得本篇文章对你有所帮助,那就点赞收藏加个关注!!!

相关推荐
前端小巷子25 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志1 小时前
typescript结构化类型应用两例
javascript
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js