js-工具类处理函数
Posted 秋天1014童话
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js-工具类处理函数相关的知识，希望对你有一定的参考价值。
#一、 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(/\\d3/g).join(","):b.slice(r,len).match(/\\d3/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('<hello world>')
//output: <hello world> -> <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)
);
八、待补充
…
以上是关于js-工具类处理函数的主要内容，如果未能解决你的问题，请参考以下文章