首页 > 其他分享 >值得收藏的前端开发必备工具类函数

值得收藏的前端开发必备工具类函数

时间:2023-10-23 12:06:53浏览次数:26  
标签:const 必备 value 收藏 export let return 前端开发 metric

 

值得收藏的前端开发必备工具类函数_Math

/**
 * 空值: [undefined, null, NaN, [], {}], 注意非空:0, false;
 * @param {*} value 
 * @returns Boolean
 */
function isEmpty(value) {
    switch (Object.prototype.toString.call(value)) {
      case '[object Undefined]':
        return value === void 0;
      case '[object Null]':
        return value === null;
      case '[object Number]':
        return isNaN(value);
      case '[object String]':
        return value === "";
      case '[object Boolean]':
        return false;
      case '[object Object]':
        return Object.keys(value).length === 0;
      case '[object Array]':
        return value.length === 0;
      default:
        return false;
    }
  }
  /**
  * el是否包含某个class
  */
  export const hasClass = (el, className) => {    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')    return reg.test(el.className)}
  
  /**
  *el添加某个class
  */
  export const addClass = (el, className) => {    if (hasClass(el, className)) {        return    }    let newClass = el.className.split(' ')    newClass.push(className)    el.className = newClass.join(' ')}
  
  /**
  * 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, ' ')}
  
  
  /**
  *去除html标签
  */
  
  export const removeHtmltag = (str) => {
      return str.replace(/<[^>]+>/g, '')
  }
  
  /**
   * 判断当前环境是否是手机端
   * 
   * @return {Boolean}  返回结果
   * 
   */
   export const isMobile=() =>{
       if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
              return true
          } else {
              return false
        }
     }
     
        
  /**
   * 断当前环境是否是微信环境
   * 
   * @return {Boolean}  返回结果
   * 
   */
  export const isWeixin =() =>{      
        const ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)==="micromessenger") {
             return true;
       } else {
              return false;
        }
    }
  
  
  /**
   * 检测浏览器是否放大
   * 
   * @param {Boolean } rsize  是否返回具体放大数值,默认否
   * @return {Boolean | Number}  返回结果
   * 
   */
  export const detectZoom=rsize =>{
    let ratio = 0
    const screen = window.screen
    const ua = navigator.userAgent.toLowerCase()
  
    if (window.devicePixelRatio) {
      ratio = window.devicePixelRatio
    } else if (~ua.indexOf('msie')) {
      if (screen.deviceXDPI && screen.logicalXDPI) ratio = screen.deviceXDPI / screen.logicalXDPI
    } else if (window.outerWidth&& window.innerWidth) {
      ratio = window.outerWidth / window.innerWidth
    }
  
    if (ratio) ratio = Math.round(ratio * 100)
  
    return rsize ? ratio : ratio === 100
  }
  
  /**
   * 获取普通地址url参数
   * 例如:http://localhost:8080/?token=rTyJ7bcRb7KU4DMcWo4216&roleId=512213631174180864
   * 
   * @param {String} name 
   * @return {Boolean | String} 返回获取值 
   * 
   */
  export const getUrlParam = name =>{
    const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
    const r = window.location.search.substr(1).match(reg);  
    if (r != null) return decodeURI(r[2]); return false; 
  }
  
  
  /**
   * 获取hash模式地址url参数
   * 例如:http://localhost:8080/#/?token=rTyJ7bcRb7KU4DMcWo4216&roleId=512213631174180864
   * 
   * @param {String} name 
   * @return {Boolean | String} 返回获取值 
   * 
   */
  export const getUrlHashParam =name =>{
    const w = window.location.hash.indexOf("?");
    const query = window.location.hash.substring(w + 1);
    const vars = query.split("&");
    for (let i = 0; i < vars.length; i++) {
      const pair = vars[i].split("=");
      if (pair[0] == name) {
        return pair[1];
      }
    }
  
    return false;
  }
  
  /**
   * 时间戳转换
   * 
   * @param {Number} date 时间戳
   * @param {String} fmt  时间显示格式,例如 yyyy-MM-dd HH:mm:ss
   * @return {String} fmt 返回转换后的时间 ,formatDate(value, "yyyy-MM-dd  hh: mm : ss")
   * 
   */
  export const formatDate = (date, fmt) => {
    date = new Date(date);
    if (isNaN(date.getDate())) return date;
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    }
    let o = {
      "M+": date.getMonth() + 1,
      "d+": date.getDate(),
      "h+": date.getHours(),
      "m+": date.getMinutes(),
      "s+": date.getSeconds()
    };
    for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        let str = o[k] + "";
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
        );
      }
    }
    return fmt;
  };
  
  /**
   * 时间戳转换成什么之前
   * 
   * @param {Number} times 时间戳
   * @return {String} 返回结果,timeAgoLabel(1606273724459) 输出:刚刚
   * 
   */
  export const timeAgoLabel = times => {
    let nowTimes = new Date().getTime()
    let diffSecond = (nowTimes - times) / 1000
    let agoLabel = ''
    if (diffSecond < 60) {
      agoLabel = '刚刚'
    } else if (diffSecond < 60 * 60) {
      agoLabel = Math.floor(diffSecond / 60) + '分钟前'
    } else if (diffSecond < 60 * 60 * 24) {
      agoLabel = Math.floor(diffSecond / 3600) + '小时前'
    } else if (diffSecond < 60 * 60 * 24 * 30) {
      agoLabel = Math.floor(diffSecond / (3600 * 24)) + '天前'
    } else if (diffSecond < 3600 * 24 * 30 * 12) {
      agoLabel = Math.floor(diffSecond / (3600 * 24 * 30)) + '月前'
    } else {
      agoLabel = Math.floor(diffSecond / (3600 * 24 * 30 * 12)) + '年前'
    }
    return agoLabel
  }
  
  
  /**
   * 生成任意位数随机数(数字)
   * 
   * @param {Number} n 可选长度位数
   * @return {Number} 返回随机值
   * 
   */
  export const randomNumber =n =>{
        let rnd = '';
        for (let i = 0; i < n; i++) {
          rnd += Math.floor(Math.random() * 10);
        }
        return rnd;
  }
  /**
   * 随机生成一个自定义长度,不重复的字母加数字组合,可用来做id标识
   * 
   * @param {Number} randomLength 可选长度位数,默认10
   * @return {String} 返回随机值
   * 
   */
  export const randomId =(randomLength = 10) =>{
      return Number(Math.random().toString().substr(3,randomLength) + Date.now()).toString(36)
  }
  
   /** 
   * 文件大小换算成单位
   * 
   * @param {Number} bytes 大小
   * @param {String} units 可选单位,默认metric
   * @param {Number} precision 可选位数,数值精度保留几位小数点,默认1
   * @return {String} 返回带单位值,byteSize(1580),输出1.6 kB
   * 
  */
  export const byteSize = (bytes, units='metric', precision=1) => {
      let value='',
          unit=''
      const base = units === 'metric' || units === 'metric_octet' ? 1000 : 1024
      const table = [
          { expFrom: 0, expTo: 1, metric: 'B', iec: 'B', metric_octet: 'o', iec_octet: 'o' },
          { expFrom: 1, expTo: 2, metric: 'kB', iec: 'KiB', metric_octet: 'ko', iec_octet: 'Kio' },
          { expFrom: 2, expTo: 3, metric: 'MB', iec: 'MiB', metric_octet: 'Mo', iec_octet: 'Mio' },
          { expFrom: 3, expTo: 4, metric: 'GB', iec: 'GiB', metric_octet: 'Go', iec_octet: 'Gio' },
          { expFrom: 4, expTo: 5, metric: 'TB', iec: 'TiB', metric_octet: 'To', iec_octet: 'Tio' },
          { expFrom: 5, expTo: 6, metric: 'PB', iec: 'PiB', metric_octet: 'Po', iec_octet: 'Pio' },
          { expFrom: 6, expTo: 7, metric: 'EB', iec: 'EiB', metric_octet: 'Eo', iec_octet: 'Eio' },
          { expFrom: 7, expTo: 8, metric: 'ZB', iec: 'ZiB', metric_octet: 'Zo', iec_octet: 'Zio' },
          { expFrom: 8, expTo: 9, metric: 'YB', iec: 'YiB', metric_octet: 'Yo', iec_octet: 'Yio' }
      ]
  
      for (let i = 0; i < table.length; i++) {
          const lower = Math.pow(base, table[i].expFrom)
          const upper = Math.pow(base, table[i].expTo)
          if (bytes >= lower && bytes < upper) {
              const retUnit = table[i][units]
              if (i === 0) {
                  value = String(bytes)
                  unit = retUnit
                  break;
              } else {
                  value = (bytes / lower).toFixed(precision)
                  unit = retUnit
                  break;
              }
          }
      }
      return `${value} ${unit}`.trim()  
  }
  
  /**
   * 平滑滚动到页面顶部
   * 
   */
  export const scrollToTop = () => {  
      const c = document.documentElement.scrollTop || document.body.scrollTop;  
      if (c > 0) {  
      window.requestAnimationFrame(scrollToTop);  
      window.scrollTo(0, c - c / 8);  
      }  
  }
  
   /**
  * 滚动到页面底部
  */
  export const scrollToBottom = () => {
    window.scrollTo(0, document.documentElement.clientHeight);  
  }
  /**
  *获取可视窗口高度
  */
  export const getClientHeight = () => {
      let clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
          clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
      }
      else {
          clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
      }
      return clientHeight;
  }
  
  
  /**
  *数字千分位分隔
  */
  export const format = (n) => {
      let num = n.toString();
      let len = num.length;
      if (len <= 3) {
          return num;
      } else {
          let temp = '';
          let remainder = len % 3;
          if (remainder > 0) { // 不是3的整数倍
              return num.slice(0, remainder) + ',' + num.slice(remainder, len).match(/\d{3}/g).join(',') + temp;
          } else { // 3的整数倍
              return num.slice(0, len).match(/\d{3}/g).join(',') + temp; 
          }
      }
  }
  
  /**
  * 全角转换为半角
  */
  export const toCDB = (str) => {
    let result = "";
    for (let i = 0; i < str.length; i++) {
      code = str.charCodeAt(i);
      if (code >= 65281 && code <= 65374) {
        result += String.fromCharCode(str.charCodeAt(i) - 65248);
      } else if (code == 12288) {
        result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32);
      } else {
        result += str.charAt(i);
      }
    }
    return result;
  }
  
  /**
  * 半角转换为全角
  */
  export const toDBC = (str) => {
    let result = "";
    for (let i = 0; i < str.length; i++) {
      code = str.charCodeAt(i);
      if (code >= 33 && code <= 126) {
        result += String.fromCharCode(str.charCodeAt(i) + 65248);
      } else if (code == 32) {
        result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32);
      } else {
        result += str.charAt(i);
      }
    }
    return result;
  }
  
  
  /**
  * 数字转化为大写金额
  */
  export const digitUppercase = (n) => {
      const fraction = ['角', '分'];
      const digit = [
          '零', '壹', '贰', '叁', '肆',
          '伍', '陆', '柒', '捌', '玖'
      ];
      const unit = [
          ['元', '万', '亿'],
          ['', '拾', '佰', '仟']
      ];
      n = Math.abs(n);
      let s = '';
      for (let i = 0; i < fraction.length; i++) {
          s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      }
      s = s || '整';
      n = Math.floor(n);
      for (let i = 0; i < unit[0].length && n > 0; i++) {
          let p = '';
          for (let j = 0; j < unit[1].length && n > 0; j++) {
              p = digit[n % 10] + unit[1][j] + p;
              n = Math.floor(n / 10);
          }
          s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
      }
      return s.replace(/(零.)*零元/, '元')
          .replace(/(零.)+/g, '零')
          .replace(/^整$/, '零元整');
  };
  
  /**
  * 数字转化为中文数字
  */
  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]]
        }
      }
     });
  }
  
  /**
  * 存储loalStorage
  */
  export const loalStorageSet = (key, value) => {
      if (!key) return;
      if (typeof value !== 'string') {
          value = JSON.stringify(value);
      }
      window.localStorage.setItem(key, value);
  };
  export const loalStorageGet = (key) => {
      if (!key) return;
      return window.localStorage.getItem(key);
  };
  export const loalStorageRemove = (key) => {
      if (!key) return;
      window.localStorage.removeItem(key);
  };
  export const sessionStorageSet = (key, value) => {
     if (!key) return;
      if (typeof value !== 'string') {
        value = JSON.stringify(value);
      }
      window.sessionStorage.setItem(key, value)
  };
  export const sessionStorageGet = (key) => {
     if (!key) return;
      return window.sessionStorage.getItem(key)
  };
  export const sessionStorageRemove = (key) => {
     if (!key) return;
      window.sessionStorage.removeItem(key)
  };

 

标签:const,必备,value,收藏,export,let,return,前端开发,metric
From: https://blog.51cto.com/u_15311558/7985369

相关文章

  • 无痕视频去水印怎么去?值得收藏的三个方法
    怎么无痕视频去水印?喜欢剪视频的你是不是经常碰到这种烦人的事?就是每次在网上找到好看的视频素材,下载下来却总是带着各种各样的水印,这些水印不仅影响美观,还挡住了视频里重要的内容,如果你也遇到这种情况,是不是超想知道怎么无痕无痕视频去水印?别急,今天我就给你介绍几个超便利的方法,让......
  • 03前端开发【css结束】
    伪元素选择器'''通过css操作文本内容'''1.修改首个字体样式p:first-letter{color:red;font-size:48px;}2.在文本开头添加内容p:before{content:'哈哈';color:bule;......
  • CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属
    CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表(CascadingStyleSheets)。下面是一些常用的CSS3属性及其详细解释:border-radius:设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径,也可以只使用一个值来设置统一的圆角。box-shadow:创建一个元素的阴影效果......
  • HTML5+CSS3+移动web 前端开发入门笔记(一)
    千古前端图文教程千古前端图文教程git的使用Git是一个分布式版本控制系统,它的作用主要包括以下几个方面:版本管理:Git可以跟踪文件的修改历史,记录每次提交的内容、时间和作者等信息。通过Git,开发人员可以轻松地查看和比较不同版本之间的差异,回滚到历史版本或者创建新的分支。多人协作......
  • 【前端开发】跨标签页广播通信教程,可方便新窗口修改原窗口实时更新
    日常业务开发中我们常常会碰到如下的场景,即两个标签页之间的通信问题。我们在第一个标签页如何执行操作后在第二个标签页获取到信息。 BroadcastChannelAPI为我们提供了一种快捷且高效的途径创建useTagMessage.ts文件//跨标签页通信方案‘Msg’即通道名称,可以是任何你想......
  • PCB打板省钱小妙招,强烈建议收藏!
    很多PCB采购或工程师找PCB制造商做板的时候,觉得价格高,但是却不知道贵在哪里。是通过货比三家,选择价格最低的供应商?还是通过牺牲部分质量换取更低的成本?这些都不是最省钱的方式。如何在保证PCB高可靠的前提下合理优化成本?众所周知,PCB的制造成本取决多个因素,除在设计产品时应考虑这......
  • 招前端开发
    职责:负责小程序界面设计和开发。与产品团队密切合作,了解产品需求,确保用户界面的友好性和可用性。与后端工程师合作,确保前端与后端之间的数据交互和接口调用的高效与稳定。对性能进行调优,确保小程序在各种设备上的流畅运行。对代码进行维护、测试和调试。基本要求:3年以上前......
  • 最新整理的网络术语大全,强烈建议收藏!
    ACL(AccessControlList)英文全称:AccessControlList中文含义:访问控制列表原理:ACL是一种网络设备(如路由器、防火墙)上的规则集,用于控制数据包的流动。它基于IP地址、端口号和协议等规则,决定哪些数据包被允许通过,哪些被拒绝。用途:用于网络安全和控制,可以限制特定IP地址或协议......
  • 律师必备软件Alpha系统,为专业律师提供高效解决方案!
        Alpha法律智能操作系统由iCourt开发,是一款集大数据、市场拓展、律所管理等功能于一体的智能操作系统,它旨在通过强大的法律科技赋能法律人,更快速地获取同类型案件的办理经验,进而减轻律师工作负担、提升工作效率。目前,这一系统业已成为了国内法律人士必备的软件工具。......
  • 企业IT部门管理者必备:CIO工作指南 P120
       本人从事咨询工作多年,二十年一线数字化规划咨询经验,提供制造业数智化转型规划服务,顶层规划/企业架构/数据治理/数据安全解决方案资料干货.   【智能制造数字化咨询】该PPT共120页,由于篇幅有限,以下为部分资料,如需完整原版 方案,点击关注下方。人们经常建议CIO将IT......