JavaScript常用工具函数

1. 检测数据是不是除了symbol外的原始数据

function isStatic(value) {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    typeof value === 'boolean' ||
    typeof value === 'undefined' ||
    value === null
  )
}

2. 检查数据是否为有效的类数组长度

function isLength(value) {
  return (
    typeof value == 'number' &&
    value > -1 &&
    value % 1 == 0 &&
    value <= Number.MAX_SAFE_INTEGER
  )
}

3. 检查数据是否为函数

function isFunction(value) {
  return Object.prototype.toString.call(value) === '[object Function]'
}

4. 判断数据是否为时间对象

function isDate(value) {
  return Object.prototype.toString.call(value) === '[object Date]'
}

5. 判断数据是否为正则对象

function isRegExp(value) {
  return Object.prototype.toString.call(value) === '[object RegExp]'
}

6. 判断数据是否为数组类型的数据

function isArray(arr) {
  return Object.prototype.toString.call(arr) === '[object Array]'
}

7. 获取数组中非undefined数据中的最大值

function max(arr) {
  arr = arr.filter(item => !_isNaN(item))
  return arr.length ? Math.max.apply(null, arr) : undefined
}

8. 获取数组中非undefined数据中的最小值

function min(arr) {
  arr = arr.filter(item => !_isNaN(item))
  return arr.length ? Math.min.apply(null, arr) : undefined
}

9. 横线转驼峰命名

let camelizeRE = /-(\w)/g
function camelize(str) {
  return str.replace(camelizeRE, function (_, c) {
    return c ? c.toUpperCase() : ''
  })
}

10. 驼峰命名转横线命名：拆分字符串，使用 - 相连，并且转换为小写

let hyphenateRE = /\B([A-Z])/g
function hyphenate(str) {
  return str.replace(hyphenateRE, '-$1').toLowerCase()
}

11. 字符串首位大写

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

12. 深拷贝

function deepCopy(obj, hash = new WeakMap()) {
  // 日期对象直接返回一个新的日期对象
  if (obj.constructor === Date) return new Date(obj)
  // 正则对象直接返回一个新的正则对象
  if (obj.constructor === RegExp) return new RegExp(obj)
  // 如果循环引用了就用WeakMap解决
  if (hash.has(obj)) return hash.get(obj)
 
  // 遍历传图参数所有键的特性
  let allDesc = Object.getOwnPropertyDescriptor(obj)
  // 继承原型链
  let copyObj = Object.create(Object.getPrototypeOf(obj), allDesc)
  hash.set(obj, copyObj)
  for (let key of Reflect.ownKeys(obj)) {
    copyObj[key] =
      isComplexDataType(obj[key]) && typeof obj[key] !== 'function'
        ? deepCopy(obj[key], hash)
        : obj[key]
  }
  function isComplexDataType(obj) {
    return (
      (typeof obj === 'object' || typeof obj === 'function') && obj !== null
    )
  }
  return copyObj
}

13. 数据深、浅拷贝

function deepCLone(obj) {
  // 定义变量检测传递参数是对象还是数组
  let objClone = Array.isArray(obj) ? [] : {}
 
  if (obj && typeof obj === 'object' && obj != null) {
    // 判断obju存在且类型为对象时，因为null也是
    for (let key in obj) {
      // 遍历对象类型的obj,判断obj中是否存在key属性
      if (obj.hasOwnProperty(key)) {
        // 判断如果obj[key]存在且是对象类型时应进行深拷贝,即在堆内存中开辟新的内存
        if (obj[key] && typeof obj[key] === 'object') {
          // 递归实现深拷贝
          objClone[key] = deepCLone(obj[key])
        } else {
          // 浅拷贝
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
}

14. 获取数据类型，返回结果为 Number、String、Object、Array等

function getRawType(value) {
  return Object.prototype.toString.call(value).slice(8, -1)
}

15. 格式化时间

/**
 * @name: dateFormater
 * @msg: 格式化时间
 * @param {*} formater 预期时间格式
 * @param {*} t 时间，可为空
 * @return {*}
 */
function dateFormater(formater, t) {
  let date = t ? new Date(t) : new Date(),
    Y = date.getFullYear() + '',
    M = date.getMonth() + 1,
    D = date.getDate(),
    H = date.getHours(),
    m = date.getMinutes(),
    s = date.getSeconds()
  return formater
    .replace(/YYYY|yyyy/g, Y)
    .replace(/YY|yy/g, Y.substring(2, 2))
    .replace(/MM/g, (M < 10 ? '0' : '') + M)
    .replace(/DD/g, (D < 10 ? '0' : '') + D)
    .replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
    .replace(/mm/g, (m < 10 ? '0' : '') + m)
    .replace(/ss/g, (s < 10 ? '0' : '') + s)
}

16. 获取url参数，返回一个对象

function GetUrlParam() {
  let url = document.location.toString()
  let arrObj = url.split('?')
  let params = Object.create(null)
  if (arrObj.length > 1) {
    arrObj = arrObj[1].split('&')
    arrObj.forEach(item => {
      item = item.split('=')
      params[item[0]] = item[1]
    })
  }
  return params
}
// ?a=1&b=2&c=3 ==> {a: "1", b: "2", c: "3"}
 

17. base64转blob

/**
 * @desc base64转blob
 * @param {String} data base64
 * @return {Blob} blob
 */
function dataURLtoBlob(data) {
  const dataAtob = atob(data)
  let dataLength = dataAtob.length
  const u8arr = new Uint8Array(dataLength)
  while (dataLength--) {
    u8arr[dataLength] = dataAtob.charCodeAt(dataLength)
  }
  return new Blob([u8arr])
}

18. base64数据导出文件。文件下载

function downloadFile(filename, data) {
  let DownloadLink = document.createElement('a')
 
  if (DownloadLink) {
    document.body.appendChild(DownloadLink)
    DownloadLink.style = 'display: none'
    DownloadLink.download = filename
    DownloadLink.href = data
 
    if (document.createEvent) {
      let DownloadEvt = document.createEvent('MouseEvents')
 
      DownloadEvt.initEvent('click', true, false)
      DownloadLink.dispatchEvent(DownloadEvt)
    } else if (document.createEventObject) DownloadLink.fireEvent('onclick')
    else if (typeof DownloadLink.onclick == 'function') DownloadLink.onclick()
 
    document.body.removeChild(DownloadLink)
  }
}

19. 下载文件

/**
 * @desc 下载文件
 * @param {String} data 二进制流文件
 * @param {String} fileName 文件名
 * @param {boolean} transformBlob 是否是Blob,默认不传无需转换
 */
export function download(data, fileName, transformBlob) {
  const blob = !transformBlob ? data : dataURLtoBlob(data)
 
  const blobUrl = window.URL.createObjectURL(blob)
 
  // desc:兼容IE浏览器blob文件下载
  if (navigator.msSaveOrOpenBlob) {
    navigator.msSaveOrOpenBlob(blob, fileName)
  } else {
    const a = document.createElement('a')
    a.style.display = 'none'
    a.href = blobUrl
    a.download = fileName
    document.body.appendChild(a)
    a.click()
 
    document.body.removeChild(a)
    window.URL.revokeObjectURL(blobUrl)
  }
}

20. 页面全屏

function toFullScreen() {
  let el = document.documentElement
  let rfs =
    el.requestFullScreen ||
    el.webkitRequestFullScreen ||
    el.mozRequestFullScreen ||
    el.msRequestFullScreen
 
  //typeof rfs != "undefined" && rfs
  if (rfs) {
    rfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
    let wscript = new ActiveXObject('WScript.Shell')
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  } else {
    alert('浏览器不支持全屏')
  }
}

21. 退出全屏

function exitFullscreen() {
  let el = parent.document
  let cfs =
    el.cancelFullScreen ||
    el.webkitCancelFullScreen ||
    el.mozCancelFullScreen ||
    el.exitFullScreen
 
  //typeof cfs != "undefined" && cfs
  if (cfs) {
    cfs.call(el)
  } else if (typeof window.ActiveXObject !== 'undefined') {
    //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
    let wscript = new ActiveXObject('WScript.Shell')
    if (wscript != null) {
      wscript.SendKeys('{F11}')
    }
  } else {
    alert('切换失败,可尝试Esc退出')
  }
}

22. 利用performance.timing进行性能分析

window.onload = function () {
  setTimeout(function () {
    let t = performance.timing
    console.log(
      'DNS查询耗时 ：' + (t.domainLookupEnd - t.domainLookupStart).toFixed(0)
    )
    console.log('TCP链接耗时 ：' + (t.connectEnd - t.connectStart).toFixed(0))
    console.log(
      'request请求耗时 ：' + (t.responseEnd - t.responseStart).toFixed(0)
    )
    console.log(
      '解析dom树耗时 ：' + (t.domComplete - t.domInteractive).toFixed(0)
    )
    console.log(
      '白屏时间 ：' + (t.responseStart - t.navigationStart).toFixed(0)
    )
    console.log(
      'domready时间 ：' +
        (t.domContentLoadedEventEnd - t.navigationStart).toFixed(0)
    )
    console.log(
      'onload时间 ：' + (t.loadEventEnd - t.navigationStart).toFixed(0)
    )
 
    if ((t = performance.memory)) {
      console.log(
        'js内存使用占比 ：' +
          ((t.usedJSHeapSize / t.totalJSHeapSize) * 100).toFixed(2) +
          '%'
      )
    }
  })
}

23. 禁止某些键盘事件

document.addEventListener('keydown', function (event) {
  return (
    !(
      (
        112 == event.code || //F1
        123 == event.code || //F12
        (event.ctrlKey && 82 == event.code) || //ctrl + R
        (event.ctrlKey && 78 == event.code) || //ctrl + N
        (event.shiftKey && 121 == event.code) || //shift + F10
        (event.altKey && 115 == event.code) || //alt + F4
        ('A' == event.srcElement.tagName && event.shiftKey)
      ) //shift + 点击a标签
    ) || (event.returnValue = false)
  )
})

24. 禁止右键、选择、赋值

['contextmenu', 'selectstart', 'copy'].forEach(function (ev) {
  document.addEventListener(ev, function (event) {
    return (event.returnValue = false)
  })
})

常用js工具函数，长期维护更新