妙用JS随机函数Random

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);