JS生成指定范围不重复随机数数组，原代码页面加载崩溃求解

崩溃原因 #

• 现有代码缺少边界校验：如果配置的随机范围最大值小于需要抽取的10个数值，会永远凑不齐符合要求的不重复值，陷入死循环导致页面崩溃
• 原有代码的随机范围是硬编码写死的，无法自定义配置

优化后可配置实现 #

$(window).on('load', function () {
    // 可配置参数：随机数最大取值范围，C=20即生成1~20的随机数，C=30即生成1~30的随机数
    const C = 20;
    // 需要抽取的不重复随机数数量，固定为10可直接写死，需要调整时修改即可
    const REQUIRED_NUM = 10;
    const resultArr = [];

    // 边界校验，避免死循环
    if (C < REQUIRED_NUM) {
        console.error('随机范围最大值不能小于需要抽取的数值数量，请调整参数C');
        return;
    }

    while(resultArr.length < REQUIRED_NUM) {
        const randomVal = Math.floor(Math.random() * C) + 1;
        if(resultArr.indexOf(randomVal) === -1) {
            resultArr.push(randomVal);
        }
    }
    // 生成完成，resultArr即为符合要求的数组
    console.log(resultArr);
})

实现说明 #

• 仅需修改C变量的取值即可自定义随机数的生成范围，不需要提前生成1到C的完整数组，完全符合需求
• 新增的边界校验逻辑从根源避免了死循环导致的页面崩溃问题
• 运行完成后resultArr中存储的就是10个指定范围内的不重复随机数，可直接后续使用

内容的提问来源于stack exchange，提问作者Thắng Trương Khắc