前端一些实用的函数

Lewis
2021-10-21 / 0 评论 / 7 阅读 / 正在检测是否收录...
/**
 * @description: 滚动至页面顶部
 * @param {*}
 * @return {*}
 */
const goToTop = () => window.scrollTo(0, 0);

/**
 * @description: 校验身份证
 * @param {*}
 * @return {*}
 */
export const validateIDCard = value => /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value);

/**
 * @description: 校验支付宝账号
 * @param {*}
 * @return {*}
 */
export const validateAlipay = value => /^1\d{10}$|^[a-zA-Z\d._-]*\@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20}$/.test(value);

/**
 * @description: 校验银行卡
 * @param {*}
 * @return {*}
 */
export const validateBankCode = value => /^\d{13,19}$/.test(value);

/**
 * @description: 校验手机号
 * @param {*}
 * @return {*}
 */
export const validatePhone = value => /^1\d{10}$/.test(value);

/**
 * @description: 函数节流
 * @param {*}
 * @return {*}
 */
export const throttle = function (fn, delay = 1000) {
  let prev = 0;
  return function () {
    const now = Date.now();
    if (now - prev > delay) {
      fn.apply(this, arguments);
      prev = Date.now();
    }
  }
}


/**
 * @description: 获取随机字符串
 * @param {*}
 * @return {*}
 */
export const randomString = () => Math.random().toString(36).substr(2);

/**
 * @description: 将 BASE64 转换文件
 * @param {*}
 * @return {*}
 */
export const dataURLtoFile = (dataurl, filename) => {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  if (!filename) filename = `${Date.parse(new Date())}.jpg`;
  const bstr = window.atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

/**
 * @description: 压缩图片
 * @param {*}
 * @return {*}
 */
export const compressImg = file => {
  const fileSize = parseFloat(Number.parseInt(file.size, 10) / 1024 / 1024).toFixed(2);
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return new Promise((resolve) => {
    reader.onload = e => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const w = img.width;
        const h = img.height;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let base64;
        canvas.setAttribute('width', w);
        canvas.setAttribute('height', h);
        ctx.drawImage(img, 0, 0, w, h);
        if (fileSize <= 1) {
          base64 = canvas.toDataURL(file.type, 1);
        } else if (fileSize <= 3) {
          base64 = canvas.toDataURL(file.type, 0.8);
        } else if (fileSize <= 5) {
          base64 = canvas.toDataURL(file.type, 0.5);
        } else {
          base64 = canvas.toDataURL(file.type, 0.1);
        }
        let fileName = file.name;
        fileName = fileName.replace(/^(.+)\.(.+)$/, (fullName, name, suffix) => name + Math.floor(Math.random() * (9999 - 1000) + 1000) + '.' + suffix);
        resolve(dataURLtoFile(base64, fileName));
      };
    };
  });
}

/*  防抖原理:在一定时间内,只有最后一次操作,再过wait毫秒后才执行函数
    @param {Function} func 要执行的回调函数
    @param {Number} wait 延迟的时间
    @param{Boolean} immediate 是否要立即执行
*/
let timeout = null;
function debounce(func, wait = 500, immediate = false) {
  // 清除定时器
  if (timeout !== null) clearTimeout(timeout);
  // 立即执行,此类情况一般用不到
  if (immediate) {
    var callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait);
    if (callNow) typeof func === "function" && func();
  } else {
    // 设置定时器,当最后一次操作后,timeout不会再被清除,所以在延时wait毫秒后执行func回调方法
    timeout = setTimeout(() => {
      typeof func === "function" && func();
    }, wait);
  }
}

export default debounce;


 /**
 * @description: 节流
 * 节流原理:在一定时间内,只能触发一次
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
let timer, flag;
function throttle(func, wait = 500, immediate = true) {
    if (immediate) {
        if (!flag) {
            flag = true;
            // 如果是立即执行,则在wait毫秒内开始时执行
            typeof func === 'function' && func();
            timer = setTimeout(() => {
                flag = false;
            }, wait);
        }
    } else {
        if (!flag) {
            flag = true
            // 如果是非立即执行,则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func();
            }, wait);
        }
        
    }
};
export default throttle

/**
  * time 任何合法的时间格式、秒或毫秒的时间戳
  * format 时间格式,可选。默认为yyyy-mm-dd,年为"yyyy",月为"mm",日为"dd",时为"hh",分为"MM",秒为"ss",格式可以自由搭
**/
function timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') {
    // 如果为null,则格式化当前时间
    if (!dateTime) dateTime = Number(new Date());
    // 如果dateTime长度为10或者13,则为秒和毫秒的时间戳,如果超过13位,则为其他的时间格式
    if (dateTime.toString().length == 10) dateTime *= 1000;
    let date = new Date(dateTime);
    let ret;
    let opt = {
        "y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "h+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "s+": date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加,必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
export default timeFormat

/**
 *手机号加密
 */
export const phoneFormat = (phone = 0) => {
  return String(phone).replace(/^(\d{3})\d{4}(\d+)$/, '$1****$2');
};

/**
 * 验证手机号
 */
const REGEXP_PHONE = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;

/**
 * 验证身份证号
 */
const REGEXP_IDCARD = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
 
 /**
 * 验证电子邮箱格式
 */
 function email(value) {
    return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value);
}

/**
 * 验证手机格式
 */
 function mobile(value) {
    return /^1[23456789]\d{9}$/.test(value)
}

/**
 * 验证URL格式
 */
 function url(value) {
    return /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/.test(value)
}

/**
 * 验证日期格式
 */
 function date(value) {
    return !/Invalid|NaN/.test(new Date(value).toString())
}

/**
 *  是否车牌号
 */
function carNo(value) {
    // 新能源车牌
    const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
    // 旧车牌
    const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
    if (value.length === 7) {
        return creg.test(value);
    } else if (value.length === 8) {
        return xreg.test(value);
    } else {
        return false;
    }
}

/**
 * 金额,只允许2位小数
 */
function amount(value) {
    //金额,只允许保留两位小数
    return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value);
}

 /**
 *只能输入字母
 */
function letter(value) {
    return /^[a-zA-Z]*$/.test(value);
}

 /**
 *只能是字母或者数字
 */
function enOrNum(value) {
    //英文或者数字
    let reg = /^[0-9a-zA-Z]*$/g;
    return reg.test(value);
}

 /**
 * 是否固定电话
 */
function landline(value) {
    let reg = /^\d{3,4}-\d{7,8}(-\d{3,4})?$/;
    return reg.test(value);
}

 /**
 * 是否json字符串
 */
 function jsonString(value) {
    if (typeof value == 'string') {
        try {
            var obj = JSON.parse(value);
            if (typeof obj == 'object' && obj) {
                return true;
            } else {
                return false;
            }
        } catch (e) {
            return false;
        }
    }
    return false;
}

/**
 * 密码强度校验
 * 说明:密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符
 */
const passwordReg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}/

const password1 = 'sunshine_Lin12345..'
console.log(passwordReg.test(password1)) // true

const password2 = 'sunshineLin12345'
console.log(passwordReg.test(password2)) // false

/**
 * 全局唯一标识符
 * guid(length = 32, firstU = true, radix = 62)
 * length <Number | null> guid的长度,默认为32,如果取值null,则按rfc4122标准生成对应格式的随机数
 * firstU 首字母是否为"u",如果首字母为数字情况下,不能用作元素的id或者class,默认为true
 * radix 生成的基数,默认为62,用于生成随机数字符串
 */
 function guid(len = 32, firstU = true, radix = null) {
    let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
    let uuid = [];
    radix = radix || chars.length;

    if (len) {
        // 如果指定uuid长度,只是取随机的字符,0|x为位运算,能去掉x的小数位,返回整数位
        for (let i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
    } else {
        let r;
        // rfc4122标准要求返回的uuid中,某些位为固定的字符
        uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
        uuid[14] = '4';

        for (let i = 0; i < 36; i++) {
            if (!uuid[i]) {
                r = 0 | Math.random() * 16;
                uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
            }
        }
    }
    // 移除第一个字符,并用u替代,因为第一个字符为数值时,该guuid不能用作id或者class
    if (firstU) {
        uuid.shift();
        return 'u' + uuid.join('');
    } else {
        return uuid.join('');
    }
}

export default guid;

/**
 * 对象转URL参数
 * queryParams(data, isPrefix = true, arrayFormat = 'brackets')
 */ 
/**
 * 对象转url参数
 * @param {*} data,对象
 * @param {*} isPrefix,是否自动加上"?"
 */
function queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') {
    let prefix = isPrefix ? '?' : ''
    let _result = []
    if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets';
    for (let key in data) {
        let value = data[key]
        // 去掉为空的参数
        if (['', undefined, null].indexOf(value) >= 0) {
            continue;
        }
        // 如果值为数组,另行处理
        if (value.constructor === Array) {
            // e.g. {ids: [1, 2, 3]}
            switch (arrayFormat) {
                case 'indices':
                    // 结果: ids[0]=1&ids[1]=2&ids[2]=3
                    for (let i = 0; i < value.length; i++) {
                        _result.push(key + '[' + i + ']=' + value[i])
                    }
                    break;
                case 'brackets':
                    // 结果: ids[]=1&ids[]=2&ids[]=3
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
                    break;
                case 'repeat':
                    // 结果: ids=1&ids=2&ids=3
                    value.forEach(_value => {
                        _result.push(key + '=' + _value)
                    })
                    break;
                case 'comma':
                    // 结果: ids=1,2,3
                    let commaStr = "";
                    value.forEach(_value => {
                        commaStr += (commaStr ? "," : "") + _value;
                    })
                    _result.push(key + '=' + commaStr)
                    break;
                default:
                    value.forEach(_value => {
                        _result.push(key + '[]=' + _value)
                    })
            }
        } else {
            _result.push(key + '=' + value)
        }
    }
    return _result.length ? prefix + _result.join('&') : ''
}

export default queryParams;

console.log(queryParams({name:'li',age:20}))
// 结果:?name=li&age=20

const data = {name: '冷月夜',fruits: ['apple', 'banana', 'orange']}
queryParams(this.data, true, 'indices');
// 结果为:?name=冷月夜&fruits[0]=apple&fruits[1]=banana&fruits[2]=orange

queryParams(this.data, true, 'brackets');
// 结果为:?name=冷月夜&fruits[]=apple&fruits[]=banana&fruits[]=orange

queryParams(this.data, true, 'repeat');
// 结果为:?name=冷月夜&fruits=apple&fruits=banana&fruits=orange

queryParams(this.data, true, 'comma');
// 结果为:?name=冷月夜&fruits=apple,banana,orange


/**
 * 数组排序
 * sort排序
 */ 
// 对数字进行排序,简写
const arr = [3, 2, 4, 1, 5]
arr.sort((a, b) => a - b)
console.log(arr) // [1, 2, 3, 4, 5]

// 对字母进行排序,简写
const arr = ['b', 'c', 'a', 'e', 'd']
arr.sort()
console.log(arr) // ['a', 'b', 'c', 'd', 'e']

/**
 * 数组排序
 * 冒泡排序
 */ 
// 对数字进行排序,简写
const arr = [3, 2, 4, 1, 5]
arr.sort((a, b) => a - b)
console.log(arr) // [1, 2, 3, 4, 5]

// 对字母进行排序,简写
const arr = ['b', 'c', 'a', 'e', 'd']
arr.sort()
console.log(arr) // ['a', 'b', 'c', 'd', 'e']

/**
 * 获取URL参数
 * URLSearchParams 方法
 */ 
// 创建一个URLSearchParams实例
const urlSearchParams = new URLSearchParams(window.location.search);
// 把键值对列表转换为一个对象
const params = Object.fromEntries(urlSearchParams.entries());

// split方法
function getParams(url) {
  const res = {}
  if (url.includes('?')) {
    const str = url.split('?')[1]
    const arr = str.split('&')
    arr.forEach(item => {
      const key = item.split('=')[0]
      const val = item.split('=')[1]
      res[key] = decodeURIComponent(val) // 解码
    })
  }
  return res
}

// 测试
const user = getParams('http://www.baidu.com?user=%E9%98%BF%E9%A3%9E&age=16')
console.log(user) // { user: '阿飞', age: '16' }
0

评论 (0)

取消