当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 10个非常实用的JS工具函数

10个非常实用的JS工具函数

2020年07月22日  | 移动技术网IT编程  | 我要评论

生成一周时间

function getWeekTime(){
  return [...new Array(7)].map((j,i)=> new Date(Date.now()+i*8.64e7).toLocaleDateString())
}

类型判断

/**
 * @param {any} target
 * @param {string} type
 * @return {boolean}
 */
function isType(target, type) {
  let targetType = Object.prototype.toString.call(target).slice(8, -1).toLowerCase()
  return targetType === type.toLowerCase()
}
isType([], 'Array') // true
isType(/\d/, 'RegExp') // true
isType(new Date(), 'Date') // true
isType(function(){}, 'Function') // true
isType(Symbol(1), 'Symbol') // true

对象属性剔除

/**
 * @param {object} object
 * @param {string[]} props
 * @return {object}
 */
function omit(object, props=[]){
  let res = {}
  Object.keys(object).forEach(key=>{
    if(props.includes(key) === false){
      res[key] = typeof object[key] === 'object' && object[key] !== null ?
        jsON.parse(jsON.stringify(object[key])):
        object[key]
    }
  })
  return res
}

数组去重

/**
 * 
 * @desc 数组去重
 * @param {Array} arr
 */
function removeDupthird(arr) {
    var newArr = [];
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        obj[arr[i]] = arr[i];
    }
    var list = [];
    for ( var i in obj) {
        list.push(i);
    }
    return list;
};
let data = {
  id: 1,
  title: 'xxx',
  comment: []
}
omit(data, ['id']) // {title: 'xxx', comment: []}

日期格式化

/**
 * @param {string} format
 * @param {number} timestamp - 时间戳
 * @return {string}
 */
function formatDate(format='Y-M-D h:m', timestamp=Date.now()){
  let date = new Date(timestamp)
  let dateInfo = {
    Y: date.getFullYear(),
    M: date.getMonth()+1,
    D: date.getDate(),
    h: date.getHours(),
    m: date.getMinutes(),
    s: date.getSeconds()
  }
  let formatNumber = (n) => n > 10 ? n : '0' + n
  let res = format
    .replace('Y', dateInfo.Y)
    .replace('M', dateInfo.M)
    .replace('D', dateInfo.D)
    .replace('h', formatNumber(dateInfo.h))
    .replace('m', formatNumber(dateInfo.m))
    .replace('s', formatNumber(dateInfo.s))
  return res
}
formatDate() // "2020-2-24 13:44"
formatDate('M月D日 h:m') // "2月24日 13:45"
formatDate('h:m Y-M-D', 1582526221604) // "14:37 2020-2-24"

防抖

function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(fn,wait);
  }
}
/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @param {boolean} immediate - 是否立即执行
 * @return {function}
 */
function debounce(func, wait = 300, immediate = false){
  let timer, ctx;
  let later = (arg) => setTimeout(()=>{
    func.apply(ctx, arg)
    timer = ctx = null
  }, wait)
  return function(...arg){
    if(!timer){
      timer = later(arg)
      ctx = this
      if(immediate){
        func.apply(ctx, arg)
      }
    }else{
      clearTimeout(timer)
      timer = later(arg)
    }
  }
}
// 使用
let scrollHandler = debounce(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

节流

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}
let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

base64数据导出文件下载

/**
 * @param {string} filename - 下载时的文件名
 * @param {string} data - 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);
  }
}

检测是否为PC端浏览器

function isPCBroswer() {
  let e = window.navigator.userAgent.toLowerCase()
    , t = "ipad" == e.match(/ipad/i)
    , i = "iphone" == e.match(/iphone/i)
    , r = "midp" == e.match(/midp/i)
    , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
    , a = "ucweb" == e.match(/ucweb/i)
    , o = "android" == e.match(/android/i)
    , s = "windows ce" == e.match(/windows ce/i)
    , l = "windows mobile" == e.match(/windows mobile/i);
  return !(t || i || r || n || a || o || s || l)
}

识别浏览器及平台

function getPlatformInfo(){
  //运行环境是浏览器
  let inBrowser = typeof window !== 'undefined';
  //运行环境是微信
  let inWeex = typeof WXEnvironment !== 'undefined' && !!WXEnvironment.platform;
  let weexPlatform = inWeex && WXEnvironment.platform.toLowerCase();
  //浏览器 UA 判断
  let UA = inBrowser && window.navigator.userAgent.toLowerCase();
  if(UA){
    let platforms = {
      IE: /msie|trident/.test(UA),
      IE9: UA.indexOf('msie 9.0') > 0,
      Edge: UA.indexOf('edge/') > 0,
      Android: UA.indexOf('android') > 0 || (weexPlatform === 'android'),
      IOS: /iphone|ipad|ipod|ios/.test(UA) || (weexPlatform === 'ios'),
      Chrome: /chrome\/\d+/.test(UA) && !(UA.indexOf('edge/') > 0),
    }
    for (const key in platforms) {
      if (platforms.hasOwnProperty(key)) {
        if(platforms[key]) return key
      }
    }
  }
}

获取系统根路径

/**
 * @desc 获取系统根路径
 */
function getRootPath() {
    // 获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp
    var curWwwPath = window.document.location.href;
    // 获取主机地址之后的目录,如: uimcardprj/share/meun.jsp
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    // 获取主机地址,如: http://localhost:8083
    var localhostPaht = curWwwPath.substring(0, pos);
    // 获取带"/"的项目名,如:/uimcardprj
    var projectName = pathName.substring(0, pathName.substring(1).indexOf('/') + 1);
    //return (localhostPaht + projectName + "/");
    return (localhostPaht);
}

本文地址:https://blog.csdn.net/qq_28875189/article/details/107466581

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网