切换语言为:繁体

JavaScript中的随机函数Random的妙用

  • 爱糖宝
  • 2024-09-29
  • 2035
  • 0
  • 0

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

生成随机颜色色值

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

JavaScript中的随机函数Random的妙用

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

JavaScript中的随机函数Random的妙用

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

JavaScript中的随机函数Random的妙用

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

JavaScript中的随机函数Random的妙用

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

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

JavaScript中的随机函数Random的妙用

生成随机字符串

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

JavaScript中的随机函数Random的妙用

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

JavaScript中的随机函数Random的妙用

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

然后将其写成一个函数

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

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

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

const getRandomStr = (len) => {
  return len <= 11
    ? Math.random().toString(36).substr(2, len).padEnd(len, 0)
    : getRandomStr(11) + getRandomStr(len - 11);
};

此时我们便可以生成任意长度字符串啦

JavaScript中的随机函数Random的妙用

生成随机布尔值

要生成随机的布尔值,可以利用 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等等,这些常用的用法这里就不过多的展开介绍了

0条评论

您的电子邮件等信息不会被公开,以下所有项均必填

OK! You can skip this field.