javaScrip

work常用小技巧

const task = timeout => new Promise((resolve) => setTimeout(() => {
         resolve(timeout);
      }, timeout))

      const taskList = [1000, 3000, 200, 1300, 800, 2000];
      async function startNoConcurrentControl() {
        console.time(NO_CONCURRENT_CONTROL_LOG);
        await.Promise.all(taskList.map(item=>task(item)));
        console.timeEnd(NO_CONCURRENT_CONTROL_LOG);
      }

      startNoConcurrentControl();

# 1. 获取当前时间及未来、以前时间是 周几

import dayjs from 'dayjs'
export default (n, timeStamp, type = 0) => {
  let _arr = Array.apply(null, Array(n))
  const distance = 24 * 60 * 60 * 1000
  let _target = _arr.map((element, index) => {
    let _time = !type
      ? timeStamp - index * distance
      : timeStamp + index * distance
    return {
      date: dayjs(_time).format('MM/DD'),
      ymd: dayjs(_time).format('YYYY-MM-DD'),
      week: `星期${isWeek(dayjs(_time).format('dddd'))}`,
      timeStamp: _time
    }
  })
  _target[0].value = '今天'
  return _target
}

function isWeek(val) {
  return (
    {
      Monday: '一',
      Tuesday: '二',
      Wednesday: '三',
      Thursday: '四',
      Friday: '五',
      Saturday: '六'
    }[val] || '日'
  )
}

/**
 * 使用
 */
// let getseven = time(
//   7, //需要获取的天数
//   new Date().getTime(),  //当前时间戳
//   1   // 非0是取当前时间及未来, 0是当前时间和过去时间
// )

# 2. 时间展示

const dayjs = require('dayjs')
export function timeDisplay(dateTimeStamp) {
  const timer = dayjs(dateTimeStamp).format('MM-DD HH:mm')
  let second = 1000 //秒
  let minute = 1000 * 60 //分
  let hour = minute * 60 //时
  let day = hour * 24 //天
  let halfamonth = day * 15 //半月
  let month = day * 30 //月
  let now = new Date().getTime() //当前时间戳
  let diffValue = now - dateTimeStamp
  if (diffValue < 0 || !dateTimeStamp) {
    return ''
  }

  let timestampDiff = (now - dateTimeStamp) / second
  let monthDiff = parseInt(diffValue / month)
  let weekDiff = diffValue / (7 * day)
  let dayDiff = diffValue / day
  let hourDiff = diffValue / hour
  let minDiff = diffValue / minute

  if (monthDiff >= 1 && monthDiff < 12) {
    return parseInt(monthDiff) + '月前'
  }
  if (weekDiff >= 1) {
    return parseInt(weekDiff) + '周前'
  }
  if (dayDiff >= 1 && dayDiff <= 30) {
    return parseInt(dayDiff) + '天前'
  }
  if (hourDiff >= 1 && hourDiff < 24) {
    return parseInt(hourDiff) + '小时前'
  }
  if (minDiff >= 1 && minDiff < 60) {
    return Math.floor(minDiff) + '分钟前'
  }
  if (timestampDiff < 60) {
    result = '刚刚'
  }
  return timer
}

# 3. 正常时间时间转时间戳

var startDate = '2019-04-04 14:01:55'
var startDate1 = new Date(
  startDate.replace(new RegExp('-', 'gm'), '/')
).getTime()
// console.log(startDate1)

# 4. 高亮匹配

// words: 要匹配的字符串, key:搜索的关键字,tag:标签
 HighLightKeywords (words, key, tag) {
    const _tag = tag || 'span'
    return words.toLowerCase().replace(new RegExp(key.toLowerCase()), '<' + _tag + ' style="color:#ff2d56;">' + key + '</' + _tag + '>')
  }

# 5. 数组转成对象

let fruits = ['banana', 'apple', 'orange', 'watermelon']
let newArr = fruits.map((item, index) => {
  let obj = {}
  obj['pic'] = item
  obj['id'] = index
  return obj
})
console.log(newArr)

# 6. 数组对象拆分(应用于轮播)

const emojiGroups = list => {
  return list.reduce((map, item, index) => {
    let page = parseInt(index / 3) //3是每一个列需要的个数
    if (!map[page]) {
      map[page] = []
    }
    map[page].push(item)
    return map
  }, {})
}

# 7. switch 优化方案

https://juejin.cn/post/6844904126057283592?utm_source=gold_browser_extension%3Futm_source%3Dgold_browser_extension#heading-1

let color = "red"
function printBlackBackground(){
    console.log('black')
}
function printRedBackground(){
    console.log('red')
}

function printBlueBackground(){
    console.log('blue')
}

function printGreenBackground(){
    console.log('green')
}

function printYellowBackground(){
    console.log('yellow')
}
switch(color) {
    case 'black':
        printBlackBackground();
        break;
    case 'red':
        printRedBackground();
        break;
    case 'blue':
        printBlueBackground();
        break;
    case 'green':
        printGreenBackground();
        break;
    default:
        printYellowBackground();
}

==================

let  colorMap = {
    'red': printYellowBackground,
    'blue': printBlueBackground,
}
let color = 'red'
colorMap[color]? colorMap[color]() : printYellowBackground() // colorMap[color]()  输出的是一个方法,如果不是:colorMap[color]即可

function printYellowBackground() {
   console.log('red')
}

function printBlueBackground() {
      console.log('blue')
}

# 8. 判断设备类型

//判断是移动端还是 pc 端 ,true 表示是移动端,false 表示是 pc 端
export function isMobileOrPc() {
  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    return true
  }
  return false
}

# 9. 发送验证码

function handleSend(msgTime = 60) {
  const MSGINIT = '发送验证码'
  const MSGSCUCCESS = '${time}秒后重发'
  let msgText = null
  let msgDisabled = false
  if (msgDisabled) return
  msgDisabled = true
  const time = setInterval(() => {
    msgTime--
    msgText = MSGSCUCCESS.replace('${time}', msgTime)
    if (msgTime === 0) {
      msgTime = msgTime
      msgText = MSGINIT
      msgDisabled = false
      clearInterval(time)
    }
  }, 1000)
}

# 10. 去除 html

export const removeHtmltag = str => {
  return str.replace(/<[^>]+>/g, '')
}

# 11. 获取 url 参数

export const getQueryString = name => {
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
  const search = window.location.search.split('?')[1] || ''
  const r = search.match(reg) || []
  return r[2]
}

# 12. 动态引入 js

export const injectScript = src => {
  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.async = true
  s.src = src
  const t = document.getElementsByTagName('script')[0]
  t.parentNode.insertBefore(s, t)
}

# 13. el 是否包含某个 class

export const hasClass = (el, className) => {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

# 14. el 添加某个 class

export const addClass = (el, className) => {
  if (hasClass(el, className)) {
    return
  }
  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

# 15. el 删除某个 class

export const removeClass = (el, className) => {
  if (!hasClass(el, className)) {
    return
  }
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
  el.className = el.className.replace(reg, ' ')
}

# 16. 获取滚动的坐标

export const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
})

# 17. 滚动页面顶部

export const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop)
    window.scrollTo(0, c - c / 8)
  }
}

# 18. el 是否在视口范围内

export const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect()
  const { innerHeight, innerWidth } = window
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
}

# 19. 深拷贝

export function deepClone(source) {
  const targetObj = source.constructor === Array ? [] : {} // 判断复制的目标是数组还是对象
  for (let keys in source) {
    // 遍历目标
    if (source.hasOwnProperty(keys)) {
      if (source[keys] && typeof source[keys] === 'object') {
        // 如果值是对象,就递归一下
        targetObj[keys] = source[keys].constructor === Array ? [] : {}
        targetObj[keys] = deepClone(source[keys])
      } else {
        // 如果不是,就直接赋值
        targetObj[keys] = source[keys]
      }
    }
  }
  return targetObj
}

# 20. :active 伪类在 ios safari 中失效的解决办法 ;移动端很有用

document.body.addEventListener('touchstart', function () {})

document.body.removeEventListener('touchstart', function () {})

# 21. 计算两个日期的相隔天数

const dayDiff = (date1, date2) =>
  Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDiff(new Date('2021-10-21'), new Date('2022-02-12'))
// Result: 114

# 22. 求平均数

const average = arr => arr.reduce((a, b) => a + b) / arr.length
average([1, 9, 18, 36]) //16

# 23. 将阿拉伯数字翻译成中文的大写数字

export const numberToChinese = num => {
  var AA = new Array(
    '零',
    '一',
    '二',
    '三',
    '四',
    '五',
    '六',
    '七',
    '八',
    '九',
    '十'
  )
  var BB = new Array('', '十', '百', '仟', '萬', '億', '点', '')
  var a = ('' + num).replace(/(^0*)/g, '').split('.'),
    k = 0,
    re = ''
  for (var i = a[0].length - 1; i >= 0; i--) {
    switch (k) {
      case 0:
        re = BB[7] + re
        break
      case 4:
        if (!new RegExp('0{4}//d{' + (a[0].length - i - 1) + '}$').test(a[0]))
          re = BB[4] + re
        break
      case 8:
        re = BB[5] + re
        BB[7] = BB[5]
        k = 0
        break
    }
    if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
      re = AA[0] + re
    if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re
    k++
  }

  if (a.length > 1) {
    // 加上小数部分(如果有小数部分)
    re += BB[6]
    for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)]
  }
  if (re == '一十') re = '十'
  if (re.match(/^一/) && re.length == 3) re = re.replace('一', '')
  return re
}

# 24. 将数字转换为大写金额

export const changeToChinese = Num => {
  //判断如果传递进来的不是字符的话转换为字符
  if (typeof Num == 'number') {
    Num = new String(Num)
  }
  Num = Num.replace(/,/g, '') //替换tomoney()中的“,”
  Num = Num.replace(/ /g, '') //替换tomoney()中的空格
  Num = Num.replace(//g, '') //替换掉可能出现的¥字符
  if (isNaN(Num)) {
    //验证输入的字符是否为数字
    //alert("请检查小写金额是否正确");
    return ''
  }
  //字符处理完毕后开始转换,采用前后两部分分别转换
  var part = String(Num).split('.')
  var newchar = ''
  //小数点前进行转化
  for (var i = part[0].length - 1; i >= 0; i--) {
    if (part[0].length > 10) {
      return ''
      //若数量超过拾亿单位,提示
    }
    var tmpnewchar = ''
    var perchar = part[0].charAt(i)
    switch (perchar) {
      case '0':
        tmpnewchar = '零' + tmpnewchar
        break
      case '1':
        tmpnewchar = '壹' + tmpnewchar
        break
      case '2':
        tmpnewchar = '贰' + tmpnewchar
        break
      case '3':
        tmpnewchar = '叁' + tmpnewchar
        break
      case '4':
        tmpnewchar = '肆' + tmpnewchar
        break
      case '5':
        tmpnewchar = '伍' + tmpnewchar
        break
      case '6':
        tmpnewchar = '陆' + tmpnewchar
        break
      case '7':
        tmpnewchar = '柒' + tmpnewchar
        break
      case '8':
        tmpnewchar = '捌' + tmpnewchar
        break
      case '9':
        tmpnewchar = '玖' + tmpnewchar
        break
    }
    switch (part[0].length - i - 1) {
      case 0:
        tmpnewchar = tmpnewchar + '元'
        break
      case 1:
        if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
        break
      case 2:
        if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
        break
      case 3:
        if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
        break
      case 4:
        tmpnewchar = tmpnewchar + '万'
        break
      case 5:
        if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
        break
      case 6:
        if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
        break
      case 7:
        if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
        break
      case 8:
        tmpnewchar = tmpnewchar + '亿'
        break
      case 9:
        tmpnewchar = tmpnewchar + '拾'
        break
    }
    var newchar = tmpnewchar + newchar
  }
  //小数点之后进行转化
  if (Num.indexOf('.') != -1) {
    if (part[1].length > 2) {
      // alert("小数点之后只能保留两位,系统将自动截断");
      part[1] = part[1].substr(0, 2)
    }
    for (i = 0; i < part[1].length; i++) {
      tmpnewchar = ''
      perchar = part[1].charAt(i)
      switch (perchar) {
        case '0':
          tmpnewchar = '零' + tmpnewchar
          break
        case '1':
          tmpnewchar = '壹' + tmpnewchar
          break
        case '2':
          tmpnewchar = '贰' + tmpnewchar
          break
        case '3':
          tmpnewchar = '叁' + tmpnewchar
          break
        case '4':
          tmpnewchar = '肆' + tmpnewchar
          break
        case '5':
          tmpnewchar = '伍' + tmpnewchar
          break
        case '6':
          tmpnewchar = '陆' + tmpnewchar
          break
        case '7':
          tmpnewchar = '柒' + tmpnewchar
          break
        case '8':
          tmpnewchar = '捌' + tmpnewchar
          break
        case '9':
          tmpnewchar = '玖' + tmpnewchar
          break
      }
      if (i == 0) tmpnewchar = tmpnewchar + '角'
      if (i == 1) tmpnewchar = tmpnewchar + '分'
      newchar = newchar + tmpnewchar
    }
  }
  //替换所有无用汉字
  while (newchar.search('零零') != -1) newchar = newchar.replace('零零', '零')
  newchar = newchar.replace('零亿', '亿')
  newchar = newchar.replace('亿万', '亿')
  newchar = newchar.replace('零万', '万')
  newchar = newchar.replace('零元', '元')
  newchar = newchar.replace('零角', '')
  newchar = newchar.replace('零分', '')
  if (newchar.charAt(newchar.length - 1) == '元') {
    newchar = newchar + '整'
  }
  return newchar
}

# 25. 去除空格,type: 1-所有空格 2-前后空格 3-前空格 4-后空格

export const trim = (str, type) => {
  type = type || 1
  switch (type) {
    case 1:
      return str.replace(/\s+/g, '')
    case 2:
      return str.replace(/(^\s*)|(\s*$)/g, '')
    case 3:
      return str.replace(/(^\s*)/g, '')
    case 4:
      return str.replace(/(\s*$)/g, '')
    default:
      return str
  }
}

# 26. 字符转换

  • type: 1:首字母大写 2:首字母小写 3:大小写转换 4:全部大写 5:全部小写
export const changeCase = (str, type) => {
  type = type || 4
  switch (type) {
    case 1:
      return str.replace(/\b\w+\b/g, function (word) {
        return (
          word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase()
        )
      })
    case 2:
      return str.replace(/\b\w+\b/g, function (word) {
        return (
          word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase()
        )
      })
    case 3:
      return str
        .split('')
        .map(function (word) {
          if (/[a-z]/.test(word)) {
            return word.toUpperCase()
          } else {
            return word.toLowerCase()
          }
        })
        .join('')
    case 4:
      return str.toUpperCase()
    case 5:
      return str.toLowerCase()
    default:
      return str
  }
}

# 27. 追加 url 参数

export const appendQuery = (url, key, value) => {
  var options = key
  if (typeof options == 'string') {
    options = {}
    options[key] = value
  }
  options = $.param(options)
  if (url.includes('?')) {
    url += '&' + options
  } else {
    url += '?' + options
  }
  return url
}

# 28. 进制颜色转 RGBA 字符串

export const colorToRGB = (val, opa) => {
  var pattern = /^(#?)[a-fA-F0-9]{6}$/ //16进制颜色值校验规则
  var isOpa = typeof opa == 'number' //判断是否有设置不透明度

  if (!pattern.test(val)) {
    //如果值不符合规则返回空字符
    return ''
  }

  var v = val.replace(/#/, '') //如果有#号先去除#号
  var rgbArr = []
  var rgbStr = ''

  for (var i = 0; i < 3; i++) {
    var item = v.substring(i * 2, i * 2 + 2)
    var num = parseInt(item, 16)
    rgbArr.push(num)
  }

  rgbStr = rgbArr.join()
  rgbStr =
    'rgb' + (isOpa ? 'a' : '') + '(' + rgbStr + (isOpa ? ',' + opa : '') + ')'
  return rgbStr
}

# 29. 数字转换成千分位格式(如:123,456,9.89)

function translateThree(num) {
  return num
    .split('')
    .reverse()
    .join('')
    .replace(/(\d{3}(?=\d)(?!\d+\.|$))/g, '$1,')
    .split('')
    .reverse()
    .join('')
}

# 30. 数字转化为中文数字

export const intToChinese = value => {
  const str = String(value)
  const len = str.length - 1
  const idxs = [
    '',
    '十',
    '百',
    '千',
    '万',
    '十',
    '百',
    '千',
    '亿',
    '十',
    '百',
    '千',
    '万',
    '十',
    '百',
    '千',
    '亿'
  ]
  const num = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
  return str.replace(/([1-9]|0+)/g, ($, $1, idx, full) => {
    let pos = 0
    if ($1[0] !== '0') {
      pos = len - idx
      if (idx == 0 && $1[0] == 1 && idxs[len - idx] == '十') {
        return idxs[len - idx]
      }
      return num[$1[0]] + idxs[len - idx]
    } else {
      let left = len - idx
      let right = len - idx + $1.length
      if (Math.floor(right / 4) - Math.floor(left / 4) > 0) {
        pos = left - (left % 4)
      }
      if (pos) {
        return idxs[pos] + num[$1[0]]
      } else if (idx + $1.length >= len) {
        return ''
      } else {
        return num[$1[0]]
      }
    }
  })
}
上次更新: