35个前端硬核工具函数

song854601134

已于 2023-01-12 09:34:12 修改

阅读量755

点赞数 1

分类专栏： javascript 文章标签：前端 javascript 开发语言

于 2021-12-26 22:03:20 首次发布

本文链接：https://blog.csdn.net/song854601134/article/details/122161818

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

工具函数篇

表单序列化

export const serialize = data => {
  let list = []
  Object.keys(data).forEach(ele => {
    list.push(`${ele}=${data[ele]}`)
  })
  return list.join('&')
}

获取对象的类型

export const getObjType = obj => {
  var toString = Object.prototype.toString
  var map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Function]': 'function',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regExp',
    '[object Undefined]': 'undefined',
    '[object Null]': 'null',
    '[object Object]': 'object'
  }
  if (obj instanceof Element) {
    return 'element'
  }
  return map[toString.call(obj)]
}

对象深拷贝

function deepClone(obj){
    let objClone = Array.isArray(obj)?[]:{};
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}

判断路由是否相等

export const diff = (obj1, obj2) => {
  delete obj1.close
  var o1 = obj1 instanceof Object
  var o2 = obj2 instanceof Object
  if (!o1 || !o2) { /*  判断不是对象  */
    return obj1 === obj2
  }

  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    return false
    // Object.keys() 返回一个由对象的自身可枚举属性(key值)组成的数组,例如：数组返回下标：let arr = ["a", "b", "c"];console.log(Object.keys(arr))->0,1,2;
  }

  for (var attr in obj1) {
    var t1 = obj1[attr] instanceof Object
    var t2 = obj2[attr] instanceof Object
    if (t1 && t2) {
      return diff(obj1[attr], obj2[attr])
    } else if (obj1[attr] !== obj2[attr]) {
      return false
    }
  }
  return true
}

递归寻找子类的父类

export const findParent = (menu, id) => {
  for (let i = 0; i < menu.length; i++) {
    if (menu[i].children.length != 0) {
      for (let j = 0; j < menu[i].children.length; j++) {
        if (menu[i].children[j].id == id) {
          return menu[i]
        } else {
          if (menu[i].children[j].children.length != 0) {
            return findParent(menu[i].children[j].children, id)
          }
        }
      }
    }
  }
}

动态插入css

export const loadStyle = url => {
  const link = document.createElement('link')
  link.type = 'text/css'
  link.rel = 'stylesheet'
  link.href = url
  const head = document.getElementsByTagName('head')[0]
  head.appendChild(link)
}
复制代码

根据字典的value查找对应的index

export const findArray = (dic, value) => {
  for (let i = 0; i < dic.length; i++) {
    if (dic[i].value == value) {
      return i
    }
  }
  return -1
}

根据字典的value显示label

export const findByvalue = (dic, value) => {
  let result = ''
  if (validatenull(dic)) return value
  if (typeof (value) === 'string' || typeof (value) === 'number' || typeof (value) === 'boolean') {
    let index = 0
    index = findArray(dic, value)
    if (index != -1) {
      result = dic[index].label
    } else {
      result = value
    }
  } else if (value instanceof Array) {
    result = []
    let index = 0
    value.forEach(ele => {
      index = findArray(dic, ele)
      if (index != -1) {
        result.push(dic[index].label)
      } else {
        result.push(value)
      }
    })
    result = result.toString()
  }
  return result
}

生成随机len位数字

export const randomLenNum = (len, date) => {
  let random = ''
  random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, len || 4)
  if (date) random = random + Date.now()
  return random
}

解决ie9不兼容placeholder问题

export function compatiblePlaceholder() {
  if (!('placeholder' in document.createElement('input'))) {
    // 将返回的nodeList对象转为数组
    var nodes = Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))
    nodes.forEach(function (item, index) {
      if (item.nextElementSibling) {

      } else {
        item.addEventListener('focus', function () {
          this.nextSibling.style.display = 'none'
        })
        item.addEventListener('blur', function () {
          if (!this.value) {
            this.style.display = 'none'
            this.nextSibling.style.display = 'inline'
          }
        })
        var cloneNode = item.cloneNode()
        // 如果[type='password']类型，则转为text
        if (cloneNode.getAttribute('type').toLowerCase() === 'password') {
          cloneNode.setAttribute('type', 'text')
        }
        cloneNode.setAttribute('value', cloneNode.getAttribute('placeholder'))
        cloneNode.style.display = 'none'
        item.insertAdjacentHTML('afterend', cloneNode.outerHTML)
        item.nextSibling.addEventListener('focus', function () {
          this.style.display = 'none'
          this.previousSibling.style.display = 'inline'
          this.previousSibling.focus()
        })
        if (!item.value) {
          item.style.display = 'none'
          item.nextSibling.style.display = 'inline'
        }
      }

    })
  }
}

精度丢失转换（乘法）

export function accMul(arg1, arg2) {
  let m = 0, s1 = arg1.toString(), s2 = arg2.toString();
  try { m += s1.split(".")[1].length } catch (e) { }
  try { m += s2.split(".")[1].length } catch (e) { }
  return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}

节流函数

/**
 * 节流函数，在一段时间内，回调函数只执行一次
 * @param {Function} fun 需要节流的函数
 * @param {number} delay 节流的时间，单位为毫秒
 */
export function throttle(fun, delay) {
  let valid = true;
  return function() {
    let context = this;
    let args = arguments;
    if (!valid) {
      return;
    }
    valid = false;
    setTimeout(() => {
      fn.apply(context, args);
      valid = true;
    }, delay);
  }
}

防抖函数

/**
*防抖函数,多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行
*@param fn 事件触发的操作
*@param delay 多少毫秒内连续触发事件，不会执行
*@returns {Function}
*/
function debounce(fn, delay){
    let timer = null; //借助闭包
    return function(){
      let context = this,
          args = arguments;
      timer && clearTimeout(timer);
      timer = setTimeout(function(){
        fn.apply(context, args);
      },delay);
    } 
}

计算时间和当前时间的差值

export const spaceTime = function (atime) {
  atime = atime.replace(/-/g, '/'); //IE出现兼容问题，带“-”格式的时间无法被new Date()转成时间格式，返回NaN.
  let byTime = [365 * 24 * 60 * 60 * 1000, 24 * 60 * 60 * 1000, 60 * 60 * 1000, 60 * 1000, 1000];
  let unit = ["年", "天", "小时", "分钟", "秒钟"];
  var ct = new Date().getTime() - new Date(atime).getTime();
  if (ct <= 1000) {
    // return "时间数据出错!"
    return "刚刚"
  }
  var sb = [];
  for (var i = 0; i < byTime.length; i++) {
    if (ct < byTime[i]) {
      continue;
    }
    var temp = Math.floor(ct / byTime[i]);
    ct = ct % byTime[i];
    if (temp > 0) {
      sb.push(temp + unit[i]);
    }


    /*一下控制最多输出几个时间单位：
    	一个时间单位如：N分钟前
    	两个时间单位如：M分钟N秒前
    	三个时间单位如：M年N分钟X秒前
    以此类推
    */
    if (sb.length >= 1) {
      break;
    }
  }
  return (sb.join("") + "前");
}

获取当前年月

export const getNowFormatDate = function() {
  var date = new Date();
  var seperator1 = "-";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
      month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
  }
  var currentdate = year + seperator1 + month;
  return currentdate;
}

获取指定时间年月日

export const getFormatDate = function(data) {
  var date = new Date(data);
  var seperator1 = "-";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
      month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
  }
  var currentdate = year + seperator1 + month+strDate;
  return currentdate;
}

获取距离当前时间多久的时间

/**
 * 获取距离当前时间多久的时间
 * @param type year年/month月/week周/day日 
 * @param number -为之前/+为之后
 */
export const getBeforAfterTime = function(type=null,number=0) {
  var nowdate = new Date();
  switch (type) {
      case "day":   //取number天前、后的时间
          nowdate.setTime(nowdate.getTime() + (24 * 3600 * 1000) * number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = y + '/' + m + '/' + d;
          break;
      case "week":  //取number周前、后的时间
          nowdate.setTime(nowdate.getTime() + (7 * 24 * 3600 * 1000) * number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = y + '/' + m + '/' + d;
          break;
      case "month":  //取number月前、后的时间
          nowdate.setMonth(nowdate.getMonth() + number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = y + '/' + m + '/' + d;
          break;
      case "year":  //取number年前、后的时间
          nowdate.setFullYear(nowdate.getFullYear() + number);
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = y + '/' + m + '/' + d;
          break;
      default:     //取当前时间
          var y = nowdate.getFullYear();
          var m = nowdate.getMonth() + 1;
          var d = nowdate.getDate();
          var retrundate = y + '/' + m + '/' + d;
  }
  return retrundate;
}

正则校验篇

邮箱

export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

手机号码

export function isMobile (s) {
  return /^1[0-9]{10}$/.test(s)
}

电话号码

export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

匹配腾讯QQ号

export function isQQ (s) {
  return /[1-9][0-9]{4,}/.test(s)
}

URL地址

export function isURL (s) {
  return /^http[s]?:\/\/.*/.test(s)
}

合法uri

export function validateURL (textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

小写字母

export function validateLowerCase (str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

大写字母

export function validateUpperCase (str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

大小写字母

export function validatAlphabets (str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

验证pad还是pc

export const vaildatePc = function () {
  const userAgentInfo = navigator.userAgent
  const Agents = ['Android', 'iPhone',
    'SymbianOS', 'Windows Phone',
    'iPad', 'iPod'
  ]
  let flag = true
  for (var v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

判断姓名是否正确

export function validatename (name) {
  var regName = /^[\u4e00-\u9fa5]{2,4}$/
  if (!regName.test(name)) return false
  return true
}
复制代码

匹配8-16位数字和字母密码的正则表达式

export function validatePwd (pwd) {
  var regName = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
  if (!regName.test(pwd)) return false
  return true
}
复制代码

密码匹配（至少数字、字母、特殊符号两组组合）

export function validatePwd (pwd) {
  var regName = /(^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S+$)/
  if (!regName.test(pwd)) return false
  return true
}

密码匹配（密码由8位数字、大小写字母和特殊符号组成!）

export function validatePwd (pwd) {
  var regName =  /(^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,}$)/
  if (!regName.test(pwd)) return false
  return true
}
复制代码

判断是否为整数

export function validatenum (num, type) {
  let regName = /[^\d.]/g
  if (type == 1) {
    if (!regName.test(num)) return false
  } else if (type == 2) {
    regName = /[^\d]/g
    if (!regName.test(num)) return false
  }
  return true
}
复制代码

判断是否为小数

export function validatenumord (num, type) {
  let regName = /[^\d.]/g
  if (type == 1) {
    if (!regName.test(num)) return false
  } else if (type == 2) {
    regName = /[^\d.]/g
    if (!regName.test(num)) return false
  }
  return true
}

判断是否为空

export function validatenull (val) {
  if (typeof val === 'boolean') {
    return false
  }
  if (typeof val === 'number') {
    return false
  }
  if (val instanceof Array) {
    if (val.length == 0) return true
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === '{}') return true
  } else {
    if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true
    return false
  }
  return false
}

判断身份证号码

export function cardid (code) {
  let list = []
  let result = true
  let msg = ''
  var city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江 ',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北 ',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏 ',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外 '
  }
  if (!validatenull(code)) {
    if (code.length == 18) {
      if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
        msg = '证件号码格式错误'
      } else if (!city[code.substr(0, 2)]) {
        msg = '地址编码错误'
      } else {
        // 18位身份证需要验证最后一位校验位
        code = code.split('')
        // ∑(ai×Wi)(mod 11)
        // 加权因子
        var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
        // 校验位
        var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x']
        var sum = 0
        var ai = 0
        var wi = 0
        for (var i = 0; i < 17; i++) {
          ai = code[i]
          wi = factor[i]
          sum += ai * wi
        }
        if (parity[sum % 11] != code[17]) {
          msg = '证件号码校验位错误'
        } else {
          result = false
        }
      }
    } else {
      msg = '证件号码长度不为18位'
    }
  } else {
    msg = '证件号码不能为空'
  }
  list.push(result)
  list.push(msg)
  return list
}

song854601134

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
35个前端硬核工具函数

工具函数篇表单序列化export const serialize = data => { let list = [] Object.keys(data).forEach(ele => { list.push(`${ele}=${data[ele]}`) }) return list.join('&')}复制代码获取对象的类型export const getObjType = obj => { var toString = Object.p
复制链接

扫一扫