javascript 常用工具类

数组

判断是否是数组

/**
 * @desc 判断是否是数组
 * @param {Array}} arr 数组
 */
export const arrJudge = (arr) => {
  if (Array.isArray(arr)) {
    return true
  }
}

数组去重

/**
 * @desc 数组去重
 * @param {Array} arr  数组
 */
export const arrRemoveRepeat = (arr) => {
  return Array.from(new Set(arr))
}

数组对象去重

/**
 * @desc 数组对象去重
 * @param {Array} arr1 数组对象  [{ id: 1 }, { id: 2 }, { id: 3 }];
 * @param {Array} arr2 数组对象  [{ id: 3 }, { id: 4 }, { id: 5 }];
 * @retrun {Array} [ { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 } ]
 */
export const mergeArray = (arr1, arr2) => {
  // 克隆
  const cloneArr1 = arr1.slice(0)
  let v
  for (let i = 0; i < arr2.length; i++) {
    v = arr2[i]
    // 能找到相同 id 属性值的数据则进入判断
    // ~按位非 ~~双非
    if (~cloneArr1.findIndex((el) => el.id === v.id)) {
      continue
    }
    cloneArr1.push(v)
  }
  return cloneArr1
}

数组排序

/**
 * @desc 数组排序
 * @param {Array} arr  数组
 * @param {Boolean} ascendFlag   升序,默认为 true
 */
export const arrOrderAscend = (arr, ascendFlag = true) => {
  return arr.sort((a, b) => {
    return ascendFlag ? a - b : b - a
  })
}

数组最大值

/**
 * @desc 数组最大值
 * @param {Array} arr  数组
 */
export const arrMax = (arr) => {
  return Math.max(...arr)
}

数组求和

/**
 * @desc 数组求和
 * @param {Array} arr 数组
 */
export const arrSum = (arr) => {
  return arr.reduce((prev, cur) => {
    return prev + cur
  }, 0)
}

数组对象求和

/**
 * @desc 数组对象求和
 * @param {Object} arrObj 数组对象
 * @param {String} key 数组对应的 key 值
 */
// eslint-disable-next-line no-unused-vars
export const arrObjSum = (obj, key) => {
  // eslint-disable-next-line no-undef
  return arrObj.reduce((prev, cur) => prev + cur.key, 0)
}

数组合并,目前合并一维

/**
 * @desc 数组合并,目前合并一维
 * @param {Array} arrOne 数组
 * @param {Array} arrTwo 数组
 */
export const arrConcat = (arrOne, arrTwo) => {
  return [...arrOne, ...arrTwo]
}

数组是否包含某值

/**
 * @desc 数组是否包含某值
 * @param {Array} arr 数组
 * @param {}  value 值,目前只支持 String,Number,Boolean
 */
export const arrIncludeValue = (arr, value) => {
  return arr.includes(value)
}

数组并集,只支持一维数组

/**
 * @desc 数组并集,只支持一维数组
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrAndSet = (arrOne, arrTwo) => {
  return arrOne.concat(arrTwo.filter((v) => !arrOne.includes(v)))
}

数组交集,只支持一维数组

/**
 * @desc 数组交集,只支持一维数组
 * @param {Array} arrOne
 * @param {Array} arrTwo
 */
export const arrIntersection = (arrOne, arrTwo) => {
  return arrOne.filter((v) => arrTwo.includes(v))
}

数组差集,只支持一维数组

/**
 * @desc 数组差集,只支持一维数组
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * eg: [1, 2, 3] [2, 4, 5] 差集为[1,3,4,5]
 */
export const arrDifference = (arrOne, arrTwo) => {
  return arrOne
    .concat(arrTwo)
    .filter((v) => !arrOne.includes(v) || !arrTwo.includes(v))
}

两个数组合并成一个对象数组,考虑到复杂度,所以目前支持两个一维数组

/**
 * @desc 两个数组合并成一个对象数组,考虑到复杂度,所以目前支持两个一维数组
 * @param {Array} arrOne
 * @param {Array} arrTwo
 * @param {oneKey} oneKey 选填,如果两个都未传,直接以 arrOne 的值作为 key,arrTwo 作为 value
 * @param {twoKey} twoKey
 */
export const arrTwoToArrObj = (arrOne, arrTwo, oneKey, twoKey) => {
  if (!oneKey && !twoKey) {
    return arrOne.map((oneKey, i) => ({ [oneKey]: arrTwo[i] }))
  } else {
    return arrOne.map((oneKey, i) => ({ oneKey, twoKey: arrTwo[i] }))
  }
}

将对象转化为对象数组

/**
 * @desc 将对象转化为对象数组
 * @param {Object} objData
 */
export const objToArr = (objData) => {
  var arr = []
  for (let i in objData) {
    let o = {}
    // eslint-disable-next-line no-undef
    o[i] = obj[i] //即添加了key值也赋了value值 o[i] 相当于o.name 此时i为变量
    arr.push(o)
  }
  return arr
}

多数组相加

/**
 * @desc 多数组相加
 * @param {arr} arr 二维数组
 * [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 4, 5, 6 ] ]
 */
export const arrTotalArray = (arr) => {
  let result = []
  for (let i = 0; i < arr.length; i++) {
    arr[i].forEach((value, index) => {
      if (result[index] == null || result[index] == '') {
        result[index] = 0
      }
      result[index] += parseInt(value)
    })
  }
  return result //[ 9, 12, 15 ]
}

优化高频率执行代码

节流

/**
 * @desc 节流
 * @param {*} func 执行函数
 * @param {*} delay 节流时间,毫秒
 */
export const throttle = function (func, delay) {
  let timer = null
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments)
        // 或者直接 func()
        timer = null
      }, delay)
    }
  }
}

防抖

/**
 * @desc 防抖
 * @param {*} fn 执行函数
 * @param {*} wait 防抖时间,毫秒
 */
export const debounce = function (fn, wait) {
  let timeout = null
  return function () {
    if (timeout !== null) clearTimeout(timeout) // 如果多次触发将上次记录延迟清除掉
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
      // 或者直接 fn()
      timeout = null
    }, wait)
  }
}

URL

获取 url 后面通过?传参的参数

/**
 * @desc 获取 url 后面通过?传参的参数
 * @param {String} name
 */
export function getQueryString(name) {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  const url = window.location.href
  const search = url.substring(url.lastIndexOf('?') + 1)
  const r = search.match(reg)
  if (r != null) return unescape(r[2])
  return null
}

url 参数转对象

/**
 * @desc   url参数转对象
 * @param  {String} url  default: window.location.href
 * @return {Object}
 */
export function parseQueryString(url) {
  url = !url ? window.location.href : url
  if (url.indexOf('?') === -1) {
    return {}
  }
  var search =
    url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1)
  if (search === '') {
    return {}
  }
  search = search.split('&')
  var query = {}
  for (var i = 0; i < search.length; i++) {
    var pair = search[i].split('=')
    query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '')
  }
  return query
}

正则

判断是否是数字

/**
 * @desc 判断是否是数字
 * @param {Number} data
 */
export const checkNum = (data) => {
  const reg = /^\d{1,}$/g
  if (reg.test(data)) return true
}

判断是否是字母

/**
 * @desc 判断是否是字母
 * @param {Number} data
 */
export const checkLetter = (data) => {
  const reg = /^[a-zA-Z]+$/g
  if (reg.test(data)) return true
}

判断是否全部是小写字母

/**
 * @desc 判断是否全部是小写字母
 * @param {Number} data
 */
export const checkLowercaseLetter = (data) => {
  const reg = /^[a-z]+$/g
  if (reg.test(data)) return true
}

判断是否是大写字母

/**
 * @desc  判断是否是大写字母
 * @param {Number} data
 */
export const checkCapitalLetter = (data) => {
  const reg = /^[A-Z]+$/g
  if (reg.test(data)) return true
}

判断是否是字母或数字

/**
 * @desc 判断是否是字母或数字
 * @param {Number || String} data  字符或数字
 */
export const checkNumOrLetter = (data) => {
  const reg = /^[0-9a-zA-Z]*$/g
  if (reg.test(data)) return true
}

判断是否是中文

/**
 * @desc 判断是否是中文
 * @param {String} data  中文
 */
export const checkChinese = (data) => {
  const reg = /^[\u4E00-\u9FA5]+$/g
  if (reg.test(data)) return true
}

判断是否是中文，数字或字母

/**
 * @desc 判断是否是中文，数字或字母
 * @param {String} data  中文，数字或字母
 */
export const checkChineseNumberLettter = (data) => {
  const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/g
  if (reg.test(data)) return true
}

判断是否是邮箱地址

/**
 * @desc 判断是否是邮箱地址
 * @param {String} data
 */
export const checkEmail = (data) => {
  const reg =
    /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g
  if (reg.test(data)) return true
}

判断是否是手机号

/**
 * @desc 判断是否是手机号，只要是13,14,15,16,17,18,19开头即可
 * @param {String} data
 */
export const checkTelphone = (data) => {
  const reg = /^((\+|00)86)?1[3-9]\d{9}$/g
  if (reg.test(data)) return true
}

判断是否是正确的网址

/**
 * @desc 判断是否是正确的网址
 * @param {String} url 网址
 */
export const checkUrl = (url) => {
  const a = document.createElement('a')
  a.href = url
  return (
    [
      /^(http|https):$/.test(a.protocol),
      a.host,
      a.pathname !== url,
      a.pathname !== `/${url}`
    ].find((x) => !x) === undefined
  )
}

判断是否为 16 进制颜色

/**
 * @desc 判断是否为16进制颜色，rgb 或 rgba
 * @param  {String}  str
 * @return {Boolean}
 */
export const isColor = (str) => {
  return /^(#([0-9a-fA-F]{3}){1,2}|[rR][gG][Bb](\((\s*(2[0-4]\d|25[0-5]|[01]?\d{1,2})\s*,){2}\s*(2[0-4]\d|25[0-5]|[01]?\d{1,2})\s*\)|[Aa]\((\s*(2[0-4]\d|25[0-5]|[01]?\d{1,2})\s*,){3}\s*([01]|0\.\d+)\s*\)))$/.test(
    str
  )
}

判断是否为身份证号

/**
 * @desc  判断是否为身份证号
 * @param  {String|Number} str
 * @return {Boolean}
 */
export const isIdCard = (str) => {
  return /^(^[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])$)$/.test(
    str
  )
}

客户端环境检测

判断是浏览器内核

/**
 * @desc 判断是浏览器内核
 */
export const checkBrowser = () => {
  const u = navigator.userAgent
  const obj = {
    trident: u.indexOf('Trident') > -1, //IE内核
    presto: u.indexOf('Presto') > -1, //opera内核
    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1 //火狐内核
  }
  return Object.keys(obj)[Object.values(obj).indexOf(true)]
}

判断是终端类型,值有 ios,android,iPad

/**
 * @desc 判断是终端类型,值有ios,android,iPad
 */
export const checkIosAndroidIpad = () => {
  const u = navigator.userAgent
  const obj = {
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
    iPad: u.indexOf('iPad') > -1 //是否iPad
  }
  return Object.keys(obj)[Object.values(obj).indexOf(true)]
}

判断是否是微信,qq 或 uc

/**
 * @desc 判断是否是微信,qq 或 uc
 */
export const checkWeixinQqUc = () => {
  const u = navigator.userAgent
  const obj = {
    weixin: u.indexOf('MicroMessenger') > -1, //是否微信
    qq: u.match(/QQ/i) == 'qq' && !u.indexOf('MQQBrowser') > -1, //是否QQ
    uc: u.indexOf('UCBrowser') > -1
  }
  return Object.keys(obj)[Object.values(obj).indexOf(true)]
}

检查是否是 IphoneX

/**
 * @desc 检查是否是 IphoneX
 */
export const checkIsIphoneX = () => {
  const u = navigator.userAgent
  const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
  if (isIOS && screen.height >= 812) {
    return true
  }
}

判断浏*览器是否支持 webP 格式图片

/**
 * @desc 判断浏*览器是否支持webP格式图片
 * @return {Boolean}
 */
export const isSupportWebP = () => {
  return (
    !![].map &&
    document
      .createElement('canvas')
      .toDataURL('image/webp')
      .indexOf('data:image/webp') == 0
  )
}

时间/日期

获取年份

/**
 * @desc 获取年份
 */
export const getYear = () => {
  return new Date().getFullYear()
}

获取当前月份

/**
 * @desc 获取当前月份
 * @param {Boolean} fillFlag 布尔值,是否补 0,默认为 true
 */
export const getMonth = (fillFlag = true) => {
  const mon = new Date().getMonth() + 1
  const monRe = mon
  if (fillFlag) mon < 10 ? `0${mon}` : mon
  return monRe
}

获取日

/**
 * @desc 获取日
 * @param {Boolean} fillFlag 布尔值,是否补 0
 */
export const getDay = (fillFlag = true) => {
  const day = new Date().getDate()
  const dayRe = day
  if (fillFlag) day < 10 ? `0${day}` : day
  return dayRe
}

获取星期几

/**
 * @desc 获取星期几
 */
export const getWhatDay = () => {
  return new Date().getDay() ? new Date().getDay() : 7
}

获取当前月天数

/**
 * @desc 获取当前月天数
 * @param {String} year 年份
 * @param {String} month 月份
 */
export const getMonthNum = (year, month) => {
  var d = new Date(year, month, 0)
  return d.getDate()
}

获取当前时间 yyyy-mm-dd,hh:mm:ss

/**
 * @desc 获取当前时间 yyyy-mm-dd,hh:mm:ss
 */
export const getYyMmDdHhMmSs = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minu = date.getMinutes()
  const second = date.getSeconds()
  const arr = [month, day, hours, minu, second]
  arr.forEach((item) => {
    item < 10 ? '0' + item : item
  })
  return (
    year +
    '-' +
    arr[0] +
    '-' +
    arr[1] +
    ' ' +
    arr[2] +
    ':' +
    arr[3] +
    ':' +
    arr[4]
  )
}

时间戳转化为年月日

function getzf(time) {
  return +time < 10 ? `0${time}` : time
}

/**
 * @desc 时间戳转化为年月日
 * @param times 时间戳
 * @param ymd 格式类型(yyyy-mm-dd,yyyy/mm/dd)
 * @param hms 可选,格式类型(hh,hh:mm,hh:mm:ss)
 * @returns {年月日}
 */
export const timesToYyMmDd = (times, ymd, hms) => {
  const oDate = new Date(times)
  const oYear = oDate.getFullYear()
  const oMonth = oDate.getMonth() + 1
  const oDay = oDate.getDate()
  const oHour = oDate.getHours()
  const oMin = oDate.getMinutes()
  const oSec = oDate.getSeconds()
  let oTime // 最后拼接时间
  // 年月日格式
  switch (ymd) {
    case 'yyyy-mm-dd':
      oTime = oYear + '-' + getzf(oMonth) + '-' + getzf(oDay)
      break
    case 'yyyy/mm/dd':
      oTime = oYear + '/' + getzf(oMonth) + '/' + getzf(oDay)
      break
  }
  // 时分秒格式
  switch (hms) {
    case 'hh':
      oTime = ' ' + oTime + getzf(oHour)
      break
    case 'hh:mm':
      oTime = oTime + getzf(oHour) + ':' + getzf(oMin)
      break
    case 'hh:mm:ss':
      oTime = oTime + getzf(oHour) + ':' + getzf(oMin) + ':' + getzf(oSec)
      break
  }
  return oTime
}

将年月日转化成时间戳

/**
 * @desc 将年月日转化成时间戳
 * @param {String} time yyyy/mm/dd 或yyyy-mm-dd 或yyyy-mm-dd hh:mm 或yyyy-mm-dd hh:mm:ss
 */
export const YyMmDdToTimes = (time) => {
  return new Date(time.replace(/-/g, '/')).getTime()
}

比较时间 1 小于时间 2

/**
 *  @desc 比较时间 1 小于时间 2
 * @param {String} timeOne  时间 1
 * @param {String} timeTwo  时间 2
 */
export const compareTimeOneLessTwo = (timeOne, timeTwo) => {
  // 判断 timeOne 和 timeTwo 是否
  return (
    new Date(timeOne.replace(/-/g, '/')).getTime() <
    new Date(timeTwo.replace(/-/g, '/')).getTime()
  )
}

时间戳转化为年月日

/**
 * @desc 时间戳转化为年月日
 * @param {Date} startTime
 * @return {String}
 */
export const formatPassTime = (startTime) => {
  const currentTime = Date.parse(new Date()),
    time = currentTime - startTime,
    day = parseInt(time / (1000 * 60 * 60 * 24)),
    hour = parseInt(time / (1000 * 60 * 60)),
    min = parseInt(time / (1000 * 60)),
    month = parseInt(day / 30),
    year = parseInt(month / 12)
  if (year) return year + '年前'
  if (month) return month + '个月前'
  if (day) return day + '天前'
  if (hour) return hour + '小时前'
  if (min) return min + '分钟前'
  else return '刚刚'
}

格式化现在距${endTime}的剩余时间

/**
 * @desc   格式化现在距${endTime}的剩余时间
 * @param  {Date} endTime
 * @return {String}
 */
export const formatRemainTime = (endTime) => {
  var startDate = new Date() //开始时间
  var endDate = new Date(endTime) //结束时间
  var t = endDate.getTime() - startDate.getTime() //时间差
  var d = 0,
    h = 0,
    m = 0,
    s = 0
  if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24)
    h = Math.floor((t / 1000 / 60 / 60) % 24)
    m = Math.floor((t / 1000 / 60) % 60)
    s = Math.floor((t / 1000) % 60)
  }
  return d + '天 ' + h + '小时 ' + m + '分钟 ' + s + '秒'
}

判断是否为同一天

/**
 * @desc   判断是否为同一天
 * @param  {Date} date1
 * @param  {Date} date2 可选／默认值：当天
 * @return {Boolean}
 */
export const isSameDay = (date1, date2) => {
  if (!date2) {
    date2 = new Date()
  }
  var date1_year = date1.getFullYear(),
    date1_month = date1.getMonth() + 1,
    date1_date = date1.getDate()
  var date2_year = date2.getFullYear(),
    date2_month = date2.getMonth() + 1,
    date2_date = date2.getDate()

  return (
    date1_date === date2_date &&
    date1_month === date2_month &&
    date1_year === date2_year
  )
}

计算${startTime - endTime}的剩余时间

/**
 * @desc 计算${startTime - endTime}的剩余时间 ，startTime大于endTime时，均返回0
 * @param { Date | String } startTime
 * @param { Date | String } endTime
 * @returns { Object } { d, h, m, s } 天 时 分 秒
 */
export const timeLeft = (startTime, endTime) => {
  if (!startTime || !endTime) {
    return
  }
  var startDate, endDate
  if (startTime instanceof Date) {
    startDate = startTime
  } else {
    startDate = new Date(startTime.replace(/-/g, '/')) //开始时间
  }
  if (endTime instanceof Date) {
    endDate = endTime
  } else {
    endDate = new Date(endTime.replace(/-/g, '/')) //结束时间
  }
  var t = endDate.getTime() - startDate.getTime()
  var d = 0,
    h = 0,
    m = 0,
    s = 0
  if (t >= 0) {
    d = Math.floor(t / 1000 / 3600 / 24)
    h = Math.floor((t / 1000 / 60 / 60) % 24)
    m = Math.floor((t / 1000 / 60) % 60)
    s = Math.floor((t / 1000) % 60)
  }
  return { d, h, m, s }
}