js 小案例 --- 多参数函数的封装之随机验证码的生成

需求

    封装函数 返回值是 生成的随机验证码 
        参数1   验证码内容字符串 
            默认值是 '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'

        参数2   验证码长度
            默认值是 6 

        参数3   true/false  
            默认值是 true
                true    可以有重复字符
                false   不能有重复字符

/*
多参数函数的封装
    如果一个函数有多个参数 只需要设定其中某一个参数
    如果设定的是多个参数的形式 那么需要一个一个的设定好每一个参数

    实际项目中 会 将所有的参数设定成一个 对象形式


*/
        // 数据1    验证码内容
        // 数据2    验证码长度
        // 数据3    验证码能不能重复
        // 形参默认值是 {} 空对象 
        function setVcStr(obj = {}) {
        // 设定一个对象 存储 需要参数的默认值
            var valObj = {
                str: '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
                length: 6,
                flag: true,
            }
            // 循环遍历默认值对象
            for (var key in valObj) {
            // 变量key 存储 默认值对象valObj 的 键名 str length flag
             // 使用默认值对象valObj 的键名 去 形参对象obj 中调用数据
            // 如果 调用结果 不是 undefined 
            // 证明 形参对象中 存储了这个键名对应的数据
            // 证明 这个属性 赋值了实参数据 
            // 需要使用 实参数据 赋值覆盖 默认值数据
                if (obj[key] !== undefined) valObj[key] = obj[key];
            }
            // 设定变量存储验证码字符串结果
            var vcStr = '';
            //如果验证码字符串长度不是需要的验证码字符串长度, 就进入循环拼接生成验证码字符
            while (vcStr.length !== valObj.length) {
            // 生成随机索引下标
                var index = parseInt(Math.random() * valObj.str.length);
                if (valObj.flag) {
                // flag 如果 存储 true 验证码字符串内容可以重复
                    vcStr += valObj.str[index];
                } else {
                // flag 如果 存储 false 验证码字符串内容不能重复
                    if (vcStr.indexOf(valObj.str[index]) === -1) vcStr += valObj.str[index];
                }
            }
            return vcStr;
        }
        
        // 调用函数
        var res1 = setVcStr();
        console.log(res1);

        var res2 = setVcStr({ str: 'abcdefghijklmn' });
        console.log(res2);

        var res3 = setVcStr({ length: 4 });
        console.log(res3);