前言 {#%E5%89%8D%E8%A8%80}

日常开发中，面对各种不同的需求，我们经常会用到以前开发过的一些工具函数，把这些工具函数收集起来，将大大提高我们的开发效率。

校验数据类型 {#%E6%A0%A1%E9%AA%8C%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B}

export const typeOf = function(obj) {
  return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
}

eg：

typeOf('JS 工具函数')  // string
typeOf([])  // array
typeOf(new Date())  // date
typeOf(null) // null
typeOf(true) // boolean
typeOf(() => { }) // function

手机号脱敏 {#%E6%89%8B%E6%9C%BA%E5%8F%B7%E8%84%B1%E6%95%8F}

export const hideMobile = (mobile) => {
  return mobile.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
}

大小写转换 {#%E5%A4%A7%E5%B0%8F%E5%86%99%E8%BD%AC%E6%8D%A2}

参数
str 待转换的字符串
type 1-全大写 2-全小写 3-首字母大写

export const turnCase = (str, type) => {
  switch (type) {
    case 1:
      return str.toUpperCase()
    case 2:
      return str.toLowerCase()
    case 3:
      //return str[0].toUpperCase() + str.substr(1).toLowerCase() // substr 已不推荐使用
      return str[0].toUpperCase() + str.substring(1).toLowerCase()
    default:
      return str
  }
}

解析URL参数 {#%E8%A7%A3%E6%9E%90url%E5%8F%82%E6%95%B0}

export const getSearchParams = () => {
  const searchPar = new URLSearchParams(window.location.search)
  const paramsObj = {}
  for (const [key, value] of searchPar.entries()) {
    paramsObj[key] = value
  }
  return paramsObj
}

eg:

// 假设目前位于 https://wxy97.com/index?id=1&age=23;
getSearchParams(); // {id: "1", age: "23"}

数组对象根据字段去重 {#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E6%A0%B9%E6%8D%AE%E5%AD%97%E6%AE%B5%E5%8E%BB%E9%87%8D}

参数
arr 要去重的数组
key 根据去重的字段名

export const uniqueArrayObject = (arr = [], key = 'id') => {
  if (arr.length === 0) return
  let list = []
  const map = {}
  arr.forEach((item) => {
    if (!map[item[key]]) {
      map[item[key]] = item
    }
  })
  list = Object.values(map)
`return list
}
`

eg:

const responseList = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
    { id: 1, name: '李四' },
    { id: 2, name: '王五' },
    { id: 3, name: '张三' },
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
]
`uniqueArrayObject(responseList, 'id')
// [{ id: 1, name: '张三' },{ id: 2, name: '李四' },{ id: 3, name: '王五' }]
`

滚动到页面顶部 {#%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8}

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

滚动到元素位置 {#%E6%BB%9A%E5%8A%A8%E5%88%B0%E5%85%83%E7%B4%A0%E4%BD%8D%E7%BD%AE}

export const smoothScroll = element =>{
    document.querySelector(element).scrollIntoView({
        behavior: 'smooth'
    });
};

eg:

smoothScroll('#target'); // 平滑滚动到 ID 为 target 的元素

uuid {#uuid}

export const uuid = () => {
  const temp_url = URL.createObjectURL(new Blob())
  const uuid = temp_url.toString()
  URL.revokeObjectURL(temp_url) //释放这个url
  return uuid.substring(uuid.lastIndexOf('/') + 1)
}

eg:

uuid() // a640be34-689f-4b98-be77-e3972f9bffdd

下载文件 {#%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6}

参数
api 接口
params 请求参数
fileName 文件名

const downloadFile = (api, params, fileName, type = 'get') => {
  axios({
    method: type,
    url: api,
    responseType: 'blob', 
    params: params
  }).then((res) => {
    let str = res.headers['content-disposition']
    if (!res || !str) {
      return
    }
    let suffix = ''
    // 截取文件名和文件类型
    if (str.lastIndexOf('.')) {
      fileName ? '' : fileName = decodeURI(str.substring(str.indexOf('=') + 1, str.lastIndexOf('.')))
      suffix = str.substring(str.lastIndexOf('.'), str.length)
    }
    //  如果支持微软的文件下载方式(ie10+浏览器)
    if (window.navigator.msSaveBlob) {
      try {
        const blobObject = new Blob([res.data]);
        window.navigator.msSaveBlob(blobObject, fileName + suffix);
      } catch (e) {
        console.log(e);
      }
    } else {
      //  其他浏览器
      let url = window.URL.createObjectURL(res.data)
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', fileName + suffix)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      window.URL.revokeObjectURL(link.href);
    }
  }).catch((err) => {
    console.log(err.message);
  })
}`

eg:

downloadFile('/api/download', {id}, '文件名')

模糊搜索 {#%E6%A8%A1%E7%B3%8A%E6%90%9C%E7%B4%A2}

参数
list 原数组
keyWord 查询的关键词
attribute 数组需要检索属性

export const fuzzyQuery = (list, keyWord, attribute = 'name') => {
  const reg = new RegExp(keyWord)
  const arr = []
  for (let i = 0; i < list.length; i++) {
    if (reg.test(list[i][attribute])) {
      arr.push(list[i])
    }
  }
  return arr
}

eg:

const list = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' }
]
fuzzyQuery(list, '三', 'name') // [{id: 1, name: '张三'}]

时间操作 Day.js {#%E6%97%B6%E9%97%B4%E6%93%8D%E4%BD%9C-day.js}

Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，下载、解析和执行的JavaScript更少，为代码留下更多的时间。
github地址