js-工具类处理函数

最新推荐文章于 2024-08-09 11:17:31 发布

秋天1014童话

最新推荐文章于 2024-08-09 11:17:31 发布

阅读量1.2k

点赞数

分类专栏： web前端 javaScript 公司学习

本文链接：https://blog.csdn.net/u013217071/article/details/80862844

版权

web前端同时被 3 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

公司学习

5 篇文章 0 订阅

订阅专栏

#一、 js-时间处理函数 #

项目需要，会用到很多时间处理函数，总结至此。有未提及的相关工具类方法或者有更高效的方法，希望大家留言补充。

##时间格式化##

//很给力的函数，几乎覆盖所有日期格式输出
//时间格式化
function formatDate(date,fmt){
    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){    
        let str = o[k]+'';
        if(new RegExp(`(${k})`).test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length===1)?str:padLeftZero(str));
        }
    }
    return fmt;
};

function padLeftZero(str){
    return ('00'+str).substr(str.length);
}

//测试代码
console.log(formatDate(new Date(),'yyyyMMdd'))
console.log(formatDate(new Date(),'yyyy-MM-dd'))
console.log(formatDate(new Date(),'yyyy/MM/dd'))
console.log(formatDate(new Date(),'yyyyMd hh:mm:ss'))

##计算几个月前的当天日期 ##

//计算几个月前的当天日期，date为日期对象，onthSpace为月份间隔，返回格式 yyyyMMdd
        function getLastMonthDate(date, monthSpace) {
            let d = new Date(date.getTime());
            let newD = new Date(d.setMonth(d.getMonth() - monthSpace));
            return formatDate(newD, 'yyyyMMdd');
        };

        //测试代码
         console.log(getDays(new Date('2018/09/10'),new Date('2018/09/12')))
         console.log(getLastMonthDate(new Date('2018/01/01'),1))

##日期加减##

		//日期加减 date为日期对象，num为日期加减数目
        function daysAddSub(date, num) {
            let d = new Date(date.getTime());
            let newD = new Date(d.setDate(d.getDate() + num));//设置天数 +1 天
            return formatDate(newD, 'yyyyMMdd');
        }
		//测试代码
		 console.log(daysAddSub(new Date('2018/08/01'), -1));
         console.log(daysAddSub(new Date('2018/06/28'),3));

##获得两个日期之间相差的天数##

//获得两个日期之间相差的天数，date1，date2为日期对象
        function getDays(date1, date2) {
            const dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
            const minusDays = Math.floor(((date2.getTime() - date1.getTime()) / dateTime));//计算出两个日期的天数差
            return Math.abs(minusDays);
        }

##得到date当月第一天或最后一天##

		//获取date当月的第一天或者最后一天，last为ture表示获取最后一天
        function getMonthSomeDay(date, last=false) {
            let d = new Date();
            if(!last){
                d= new Date(date.getFullYear(), date.getMonth() , 1);                
            }else{
                d = new Date(date.getFullYear(), date.getMonth() +1, 0);
            }
            return formatDate(d, 'yyyyMMdd');
        }

		//测试代码
		console.log(getMonthSomeDay(new Date('2018/01/01')));
		console.log(getMonthSomeDay(new Date('2018/01/01'), false));
		console.log(getMonthSomeDay(new Date('2018/01/31'), true));

#二、 js–json相关处理函数 #

##封装 JSON.parse 防止发生错误页面白屏##

// 封装 JSON.parse 防止发生错误页面白屏
import { Modal } from 'antd';

function parseJson(str, name) {
  let obj = null;
  if (str && str != '') {
    try {
      obj = JSON.parse(str);
    } catch (err) {
      Modal.error({
        title: '解析 json 字符串出错',
        content: `变量名为 ${name}, 字符串为: ${str}, 错误: ${JSON.stringify(err)}`
      });
    }
  }
  return obj;
}

export default parseJson;

##判断是否为JSON字符串##

//判断是否为JSON字符串
function isJsonString(str) {
  try {
    if (typeof JSON.parse(str) == "object") {
      return true;
    }
  } catch (e) {
    return false;
  }
  return false;
}

三、Math类

##生成随机字符串##

//length为随机字符串的长度（范围为1～12）
function randomId() {
  return (Math.random() * 1e18)
    .toString(36)
    .slice(0, length)
    .toUpperCase();
}

 //测试代码
 console.log(randomId(1));
 console.log(randomId(3));
 console.log(randomId(12));
 console.log(randomId(13)); //若length超出12，也返回12位字符串。如需要长度超出12的随机字符串，可以修改1e18的值，一般1～12位足够用。

四、数组类

##伪数组转为数组##

		function fakeToArray(obj) {
            /*方法一：*/
            // const arr = [].slice.call(obj);
            /*方法二：*/
            // const arr = [].concat.apply([], obj);
            /*方法三*/
            let arr = [];
            arr.push.apply(arr, obj);
            return arr;
        }

        //测试代码
        let fakeArrayObj = { 0: 'a', 1: 'b', length: 2 };//这是一个标准的伪数组对象 
        console.log(fakeToArray(fakeArrayObj));

数组去重


//1. 遍历，数组下标去重法
        //时间复杂度：O(n^2),indexOf本身也消耗了O(n)的复杂度，空间复杂度：O(n)
        //IE8以下不支持indexOf
        Array.prototype.removeRepeat1 = function() {
            var res =[this[0]];
            for(var i=1; i<this.length;i++){ //从第二项开始遍历
                if(this.indexOf(this[i])==i){
                    res.push(this[i]);
                }
            }
            return res;
        };
        
		//2。hash去重法
		//时间复杂度：O(n)，空间复杂度：O(n)
        Array.prototype.removeRepeat2 = function() {
            var h= {};  //哈希表
            var res = [];
            for(var i=0; i<this.length;i++){
                if(!h[this[i]]){    //如果hash表中没有当前项
                    h[this[i]]=true; //存入hash表
                    res.push(this[i]);
                }
            }
            return res;
        };

哈希去重法，相比较于使用传统数组遍历，再使用indexOf判断是否存在的方法（时间复杂度O(n2), 空间复杂度O(n)），更高效些。此外，还可以使用es6的Set方法，参见博客：js数组去重的五个方法

更多关于数组的问题，可参见js-基本数据类型-你不知道的趣味题

五、URL相关

读取URL参数值

		 /**
            * 得到通过get方式在URL中传入的参数值
        **/
        function getUrlParam(url, name) {
            //构造一个含有目标参数的正则表达式对象
            const reg = new RegExp("(^|&)*" + name + "=([^&]*)(&|$)");
            //匹配目标参数
            let r = url.match(reg);
            //返回参数值
            if (r != null) return decodeURIComponent(r[2]);
            return null;
        };
        
		//测试代码
        let url = '/625306/issue?projectId=625306&';
        let url1 = 'history.get/1.0/?jsv=2.4.0&appKey=246&t=1530450922488&sign=8554910562a874dd127ff7b9e00dcdba&api=history.get&ecode=1&v=1.0&data=%7B%22requestStr%22%3A%22%7B%5C%22header%5C%22%3A%7B%7D%2C%5C%22model%5C%22%3A%7B%5C%22from%5C%22%3A%5C%222018-05-01%5C%22%2C%5C%22to%5C%22%3A%5C%222018-06-30%5C%22%7D%7D%22%7D';
        console.log(getUrlParam(url,'akProjectId'));
        console.log(getUrlParam(url,'akProjectId1'));
        console.log(getUrlParam(url1,'appKey'));
        console.log(getUrlParam(url1,'api'));
        console.log(getUrlParam(url1,'data'));

解析url参数，返回参数对象##

function parseURI(uri){
    var obj = {};
    var query = uri.split("?")[1];
    var queryArr = query.split("&");
    queryArr.forEach(function(item){
      var key = item.split("=")[0];
      var value = item.split("=")[1];
      obj[key] = value;
    });
    return obj;
  }

//正则表达式：
function getQueryObject(url) {
        url = url == null ? window.location.href : url;
        let search = url.substring(url.lastIndexOf("?") + 1);
        let obj = {};
        let reg = /([^?&=]+)=([^?&=]*)/g;
        // [^?&=]+表示：除了？、&、=之外的一到多个字符
        // [^?&=]*表示：除了？、&、=之外的0到多个字符（任意多个）
        search.replace(reg, function (rs, $1, $2) {
            let name = decodeURIComponent($1);
            let val = decodeURIComponent($2);
            obj[name] = val+'';
            return rs;
        });
        return obj;
    }
    console.log(getQueryObject('https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=12306%E7%81%AB%E8%BD%A6%E7%A5%A8%E7%BD%91%E4%B8%8A%E8%AE%A2%E7%A5%A8%E5%AE%98%E7%BD%91'));
    // Object {tn: "monline_3_dg", ie: "utf-8", wd: "12306火车票网上订票官网"}

改变url参数，替换指定传入参数的值

  //改变url参数，替换指定传入参数的值,paramName为参数,replaceWith为新值
  function replaceParamVal(url, paramName,replaceWith) {
    let reg=new RegExp('('+ paramName+'=)([^&]*)','gi');
    let nUrl = url.replace(reg, paramName+'='+replaceWith);
    return nUrl;
  }
//测试代码
var url = "http://guyulei.html?a=1&b=2&c=3&d=4&d=9";
console.log(replaceParamVal("a",888));
console.log(replaceParamVal("b",999));
console.log(replaceParamVal("d","sdf")); //全局替换，忽略大小写
console.log(replaceParamVal("a","er"));

六、字符串类

数字格式化–三个数字一个逗号

//方法一
var num_s = "1232134456.546 ";
parseFloat(num_s).toLocaleString();

//方法二
function format_number(n){
   var b=parseInt(n).toString();
   var len=b.length;
   if(len<=3){return b;}
   var r=len%3;
   return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
 }
 
var a="53669988.000";
alert(format_number(a));
alert(format_number("wahh"));
alert(format_number(0));
alert(format_number(6698.0023));

html命名实体转换为字符

function entityToString(entity){
  var div=document.createElement('div');
  div.innerHTML=entity;
  var res=div.innerText||div.textContent;
  console.log(entity,'->',res);
  return res;
}
//test
entityToString('&lt;hello&nbsp;world&gt;')
//output:  &lt;hello&nbsp;world&gt; -> <hello world>
//output:  "<hello world>"

七、性能类

##throttling ##

 throttling(fn, wait, maxTimelong) {
      let timeout = null,
        startTime = Date.parse(new Date());

      return function() {
        if (timeout !== null) clearTimeout(timeout);
        var curTime = Date.parse(new Date());
        if (curTime - startTime >= maxTimelong) {
          fn();
          startTime = curTime;
        } else {
          timeout = setTimeout(fn, wait);
        }
      };
    }
//使用
window.addEventListener(
      "scroll",
      this.throttling(this.handleScroll, 1000, 300)
);