JavaScript 随机数

JavaScript 随机数简介

在实际开发中，随机数扮演着非常重要的角色，无论是用于游戏逻辑、数据模拟、测试、动画效果，还是安全领域，都离不开随机数的支持。

在 JavaScript 中，我们可以使用 Math 对象的 random() 方法来生成 0~1 之间的一个随机数。random，就是 “随机” 的意思。特别注意一下，这里的 0~1 是包含 0 但不包含 1 的，也就是 [0, 1)。

语法：

Math.random()

说明：

随机数在实际开发是非常有用的，到处都可以捡到。比如随机验证码、随机动画等，都是使用随机数来实现的。

绿叶网的随机验证码

下面给小伙伴们介绍一下随机数方面的使用技巧，这些技巧非常有用，要认真掌握喔。

JavaScript 生成某个范围内的 “随机浮点数”

1. Math.random() * m

表示生成 0 ~ m 之间的随机浮点数，例如 “Math.random() * 10” 表示生成 0 ~ 10 之间的随机浮点数。

2. Math.random() * m + n

表示生成 n ~ m + n 之间的随机浮点数，例如 “Math.random() * 10 + 8” 表示生成 8 ~ 18 之间的随机浮点数。

3. Math.random() * m - n

表示生成 -n ~ m - n 之间的随机浮点数，例如 “Math.random() * 10 - 8” 表示生成 -8 ~ 2 之间的随机浮点数。

4. Math.random() * m - m

表示生成 -m ~ 0 之间的随机浮点数，例如 “Math.random() * 10 - 10” 表示生成 -10 ~ 0 之间的随机浮点数。

JavaScript 生成某个范围内的 “随机整数”

上面介绍的都是随机生成某个范围内的任意数（包括整数和小数），但是很多时候我们需要随机生成某个范围内的整数，此时前面学到的 floor() 和 ceil() 这 2 个方法就能派上用场了。

对于 Math.random() * 5 来说，由于 floor() 是向下取整，因此 Math.floor(Math.random() * 5) 生成的是 0 ~ 4 之间的随机整数。如果你想生成 0 ~ 5 之间的随机整数，应该写成：

Math.floor(Math.random() * (5 + 1))

也就是说，如果你想生成 0 到 m 之间的随机整数，应该这样写：

Math.floor(Math.random() * (m + 1))

如果你想生成 1 到 m 之间的随机整数（包括 1 和 m），应该这样写：

Math.floor(Math.random() * m) + 1

如果你想生成 n 到 m 之间的随机整数（包括 n 和 m），应该这样写：

Math.floor(Math.random() * (m - n + 1)) + n

上面是用 floor() 来生成想要的随机整数，当然我们也可以使用 ceil() 来实现。只不过呢，我们只需要掌握 2 个方法中的任意一个就可以了。

怎么样？现在应该很清楚如何去生成你需要的随机数了吧？上面这些技巧是非常棒的，一定要记住。当然我们不需要去死记硬背，这些技巧稍微推理一下就可以得出来了。在实际开发中，我们一般会封装一个通用函数，用于生成 [min, max] 之间的随机整数：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

最后还有一点要跟大家说一下的，网上很多有关生成随机数的公式其实都是错的，小伙伴们最好是自己动手测试一下。当然，这些技巧暂时还用不上啦，等我们学到更高级的知识时就会知道了。

提示：很多小伙伴不理解为什么 Math.floor(Math.random() * 5) 生成的是 0 ~ 4 之间的整数，而不是 0 ~ 5 之间的整数，是因为他们没有意识到 Math.random() 生成随机数范围是 [0, 1) （即不包含 1）而不是 [0, 1]。

JavaScript 随机数示例

随机验证码在实际开发中经常用到，看似复杂，实则非常简单。我们只需要用到前面学到的生成随机数的技巧，然后结合字符串与数组操作就可以轻松实现。

示例：生成随机验证码

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        const str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
        let result = "";

        for(let i = 0; i < 4; i++) {
            const n = Math.floor(Math.random() * str.length);
            result += str[n];
        }
        console.log(result);
    </script>
</head>
<body>
</body>
</html>

运行结果如下。

y3xh

分析：

在这个例子中，我们使用 Math.random() 来生成了随机验证码，每一次的运行结果都是不一样的。这里注意一点，由于数组下标是从 0 开始的，因此写成下面这样是错误的。

const n = Math.floor(Math.random() * (arr.length + 1));

正确写法应该是：

const n = Math.floor(Math.random() * arr.length);