JavaScript常用的工具函数分享

第JavaScript常用的工具函数分享目录格式化时间戳时间格式化几分钟前几小时前url参数转为对象对象序列化【对象转url参数】本地存储cookie操作数字格式化单位数字千位过滤过滤成版本号首字母大写class操作文本复制功能判断是否是一个数组判断是否是一个空数组克隆一个数组数组去重是否为PC端判断是否为微信设备判断：android、ios、web常见正则校验去除字符串空格过滤html代码生成随机数范围判断图片加载完成光标所在位置插入字符图片地址转base64base64图片下载功能浏览器是否支持webP格式图片H5软键盘缩回、弹起回调对象属性剔除深拷贝函数防抖函数节流前言;

JavaScript(JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中等等。

格式化时间戳

exportfunctionformatDateTimeStamp(date,fmt){

//格式化时间戳:formatDateTimeStamp(newDate(time),'yyyy-MM-ddhh:mm:ss')

if(/(y+)/.test(fmt)){

fmt=fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length))

}

leto={

'M+':date.getMonth()+1,

'd+':date.getDate(),

'h+':date.getHours(),

'm+':date.getMinutes(),

's+':date.getSeconds()

}

for(letkino){

if(newRegExp(`(${k})`).test(fmt)){

letstr=o[k]+''

fmt=fmt.replace(

RegExp.$1,(RegExp.$1.length===1)

str:

padLeftZero(str))

}

}

returnfmt

functionpadLeftZero(str){

return('00'+str).substr(str.length);

exportfunctionparseTime(time,cFormat){

if(arguments.length===0){

returnnull

}

constformat=cFormat||'{y}-{m}-{d}{h}:{i}:{s}'

letdate

if(typeoftime==='object'){

date=time

}else{

if((typeoftime==='string')(/^[0-9]+$/.test(time))){

time=parseInt(time)

}

if((typeoftime==='number')(time.toString().length===10)){

time=time*1000

}

date=newDate(time)

}

constformatObj={

y:date.getFullYear(),

m:date.getMonth()+1,

d:date.getDate(),

h:date.getHours(),

i:date.getMinutes(),

s:date.getSeconds(),

a:date.getDay()

}

consttime_str=format.replace(/{([ymdhisa])+}/g,(result,key)={

constvalue=formatObj[key]

//Note:getDay()returns0onSunday

if(key==='a'){

return['日','一','二','三','四','五','六'][value]

}

returnvalue.toString().padStart(2,'0')

})

returntime_str

}

时间格式化几分钟前几小时前

exportfunctionformatTime(time,option){

if((''+time).length===10){

time=parseInt(time)*1000

}else{

time=+time

}

constd=newDate(time)

constnow=Date.now()

constdiff=(now-d)/1000

if(diff30){

return'刚刚'

}elseif(diff3600){

//less1hour

returnMath.ceil(diff/60)+'分钟前'

}elseif(diff3600*24){

returnMath.ceil(diff/3600)+'小时前'

}elseif(diff3600*24*2){

return'1天前'

}

if(option){

returnparseTime(time,option)

}else{

return(

d.getMonth()+

1+

'月'+

d.getDate()+

'日'+

d.getHours()+

'时'+

d.getMinutes()+

'分'

)

}

functionpluralize(time,label){

if(time===1){

returntime+label+'ago'

}

returntime+label+'s'+'ago'

exportfunctiontimeAgo(time){

constbetween=Date.now()/1000-Number(time)

if(between3600){

returnpluralize(~~(between/60),'minute')

}elseif(between86400){

returnpluralize(~~(between/3600),'hour')

}else{

returnpluralize(~~(between/86400),'day')

}

}

url参数转为对象

exportfunctiongetQueryObject(url){

url=url==nullwindow.location.href:url

constsearch=url.substring(url.lastIndexOf('')+1)

constobj={}

constreg=/([^=]+)=([^=]*)/g

search.replace(reg,(rs,$1,$2)={

constname=decodeURIComponent($1)

letval=decodeURIComponent($2)

val=String(val)

obj[name]=val

returnrs

})

returnobj

exportfunctionparam2Obj(url){

constsearch=url.split('')[1]

if(!search){

return{}

}

returnJSON.parse(

'{"'+

decodeURIComponent(search)

.replace(/"/g,'\\"')

.replace(//g,'","')

.replace(/=/g,'":"')

.replace(/\+/g,'')+

'"}'

)

}

对象序列化【对象转url参数】

functioncleanArray(actual){

constnewArray=[]

for(leti=0;iactual.length;i++){

if(actual[i]){

newArray.push(actual[i])

}

}

returnnewArray

exportfunctionparam(obj){

if(!obj)return''

returncleanArray(

Object.keys(obj).map(key={

if(obj[key]===undefined)return''

returnencodeURIComponent(key)+'='+encodeURIComponent(obj[key])

})

).join('')

exportfunctionstringfyQueryStr(obj){

if(!obj)return'';

letpairs=[];

for(letkeyinobj){

letvalue=obj[key];

if(valueinstanceofArray){

for(leti=0;ivalue.length;++i){

pairs.push(encodeURIComponent(key+'['+i+']')+'='+encodeURIComponent(value[i]));

}

continue;`在这里插入代码片`

}

pairs.push(encodeURIComponent(key)+'='+encodeURIComponent(obj[key]));

}

returnpairs.join('

param({name:'1111',sex:'wwww'})

stringfyQueryStr({name:'1111',sex:'wwww'})

本地存储

exportconststore={//本地存储

set:function(name,value,day){//设置

letd=newDate()

lettime=0

day=(typeof(day)==='undefined'||!day)1:day//时间,默认存储1天

time=d.setHours(d.getHours()+(24*day))//毫秒

localStorage.setItem(name,JSON.stringify({

data:value,

time:time

}))

},

get:function(name){//获取

letdata=localStorage.getItem(name)

if(!data){

returnnull

}

letobj=JSON.parse(data)

if(newDate().getTime()obj.time){//过期

localStorage.removeItem(name)

returnnull

}else{

returnobj.data

}

},

clear:function(name){//清空

if(name){//删除键为name的缓存

localStorage.removeItem(name)

}else{//清空全部

localStorage.clear()

}

}

}

cookie操作

exportconstcookie={//cookie操作【set，get，del】

set:function(name,value,day){

letoDate=newDate()

oDate.setDate(oDate.getDate()+(day||30))

document.cookie=name+'='+value+';expires='+oDate+";path=/;"

},

get:function(name){

letstr=document.cookie

letarr=str.split(';')

for(leti=0;iarr.length;i++){

letnewArr=arr[i].split('=')

if(newArr[0]===name){

returnnewArr[1]

}

}

},

del:function(name){

this.set(name,'',-1)

}

}

数字格式化单位

exportfunctionnumberFormatter(num,digits)

constsi=[{

value:1E18,

symbol:'E'

},

{

value:1E15,

symbol:'P'

},

{

value:1E12,

symbol:'T'

},

{

value:1E9,

symbol:'G'

},

{

value:1E6,

symbol:'M'

},

{

value:1E3,

symbol:'k'

}

]

for(leti=0;isi.length;i++){

if(num=si[i].value){

return(num/si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/,'$1')+si[i].symbol

}

}

returnnum.toString()

}

数字千位过滤

exportfunctiontoThousandFilter(num){

lettargetNum=(num||0).toString()

if(targetNum.includes('.')){

letarr=num.split('.')

returnarr[0].replace(/^-\d+/g,m=m.replace(/(=(!\b)(\d{3})+$)/g,','))+'.'+arr[1]

}else{

returntargetNum.replace(/^-\d+/g,m=m.replace(/(=(!\b)(\d{3})+$)/g,','))

}

}

过滤成版本号

exportfunctionversionFilter(versions){

letv0=(versions0xff000000)24

letv1=(versions0xff0000)16

letv2=(versions0xff00)8

letv3=versions0xff

return`${v0}.${v1}.${v2}.${v3}`

}

首字母大写

exportfunctionuppercaseFirst(string){

returnstring.charAt(0).toUpperCase()+string.slice(1)

}

class操作

exportfunctionhasClass(ele,cls){

return!!ele.className.match(newRegExp('(\\s|^)'+cls+'(\\s|$)'))

exportfunctionaddClass(ele,cls){

if(!hasClass(ele,cls))ele.className+=''+cls

exportfunctionremoveClass(ele,cls){

if(hasClass(ele,cls)){

constreg=newRegExp('(\\s|^)'+cls+'(\\s|$)')

ele.className=ele.className.replace(reg,'')

}

}

文本复制功能

constcopyTxt=function(text,fn){//复制功能

if(typeofdocument.execCommand!=='function'){

console.log('复制失败，请长按复制')

return

}

vardom=document.createElement('textarea')

dom.value=text

dom.setAttribute('style','display:block;width:1px;height:1px;')

document.body.appendChild(dom)

dom.select()

varresult=document.execCommand('copy')

document.body.removeChild(dom)

if(result){

console.log('复制成功')

typeoffn==='function'fn()

return

}

if(typeofdocument.createRange!=='function'){

console.log('复制失败，请长按复制')

return

}

varrange=document.createRange()

vardiv=document.createElement('div')

div.innerhtml=text

div.setAttribute('style','height:1px;fontSize:1px;overflow:hidden;')

document.body.appendChild(div)

range.selectNode(div)

varselection=window.getSelection()

console.log(selection)

if(selection.rangeCount0){

selection.removeAllRanges()

}

selection.addRange(range)

document.execCommand('copy')

typeoffn==='function'fn()

console.log('复制成功')

}

判断是否是一个数组

exportconstcastArray=value=(Array.isArray(value)value:[value])

exportconstcastArray=arr=

Ototype.toString.call(arr)==='[objectArray]'

判断是否是一个空数组

exportconstisEmpty=(arr)=!Array.isArray(arr)||arr.length===0

克隆一个数组

/**

*@param{Array}arr

constclone=(arr)=arr.slice(0);

//Or

constclone=(arr)=[...arr];

//Or

constclone=(arr)=Array.from(arr);

//Or

constclone=(arr)=arr.map((x)=

//Or

constclone=(arr)=JSON.parse(JSON.stringify(arr));

//Or

constclone=(arr)=arr.concat([]);

数组去重

/**

*@param{Array}arr

*@returns{Array}

exportconstuniqueArray=(arr)=Array.from(newSet(arr))

//Or

exportconstuniqueArray=(arr)=arr.filter((el,i,array)=array.indexOf(el)===i)

//Or

exportconstuniqueArray=(arr)=arr.reduce((acc,el)=(acc.includes(el)acc:[...acc,el]),[])

是否为PC端

exportconstisPC=function(){//是否为PC端

letuserAgentInfo=navigator.userAgent

letAgents=['Android','iPhone','SymbianOS','WindowsPhone','iPad','iPod']

letflag=true

for(letv=0;vAgents.length;v++){

if(userAgentInfo.indexOf(Agents[v])0){

flag=false

break

}

}

returnflag

}

判断是否为微信

exportconstisWx=()={//判断是否为微信

varua=window.navigator.userAgent.toLowerCase()

if(ua.match(/MicroMessenger/i)==='micromessenger'){

returntrue

}

returnfalse

}

设备判断：android、ios、web

exportconstisDevice=function(){//判断是android还是ios还是web

varua=navigator.userAgent.toLowerCase()

if(ua.match(/iPhone\sOS/i)==='iphoneos'||ua.match(/iPad/i)==='ipad'){//ios

return'iOS'

}

if(ua.match(/Android/i)==='android'){

return'Android'

}

return'Web'

}

常见正则校验

/*正则匹配*/

exportconstnormalReg=(str,type)={

switch(type){

case'phone':

//手机号码

return/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);

case'tel':

//座机

return/^(0\d{2,3}-\d{7,8})(-\d{1,4})$/.test(str);

case'card':

//身份证

return/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);

case'pwd':

//密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线

return/^[a-zA-Z]\w{5,17}$/.test(str)

case'postal':

//邮政编码

return/[1-9]\d{5}(!\d)/.test(str);

case'QQ':

//QQ号

return/^[1-9][0-9]{4,9}$/.test(str);

case'email':

//邮箱

return/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);

case'money':

//金额(小数点2位)

return/^\d*(:\.\d{0,2})$/.test(str);

case'URL':

//网址

return/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@^=%:/~\+#]*[\w\-\@^=%/~\+#])/.test(str)

case'IP':

//IP

return/((:(:25[0-5]|2[0-4]\\d|[01]\\d\\d)\\.){3}(:25[0-5]|2[0-4]\\d|[01]\\d\\d))/.test(str);

case'date':

//日期时间

return/^(\d{4})\-(\d{2})\-(\d{2})(\d{2})(:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str)||/^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)

case'number':

//数字

return/^[0-9]$/.test(str);

case'positiveInteger':

//正整数

return/^[1-9]\d*$/.test(str);

case'price':

//价格

return/(^[1-9]\d*(\.\d{1,2})$)|(^0(\.\d{1,2})$)/.test(str);//价格非0则去掉''

case'english'://英文

return/^[a-zA-Z]+$/.test(str);

case'chinese'://中文

return/^[\u4E00-\u9FA5]+$/.test(str);

case'lower':

//小写

return/^[a-z]+$/.test(str);

case'upper':

//大写

return/^[A-Z]+$/.test(str);

case'HTML':

//HTML标记

return/("[^"]*"|'[^']*'|[^'"])*/.test(str);

default:

returntrue;

}

}

去除字符串空格

exportconsttrim=function(str,type){

type=type||1

switch(type){

case1:

returnstr.replace(/\s+/g,'')

case2:

returnstr.replace(/(^\s*)|(\s*$)/g,'')

case3:

returnstr.replace(/(^\s*)/g,'')

case4:

returnstr.replace(/(\s*$)/g,'')

default:

returnstr

}

}

过滤html代码

exportconstfilterTag=function(str){//过滤html代码(把转换)

str=str.replace(//ig,'')

str=str.replace(//ig,'')

str=str.replace(//ig,'')

str=str.replace('','')

returnstr

}

生成随机数范围

exportconstrandom=function(min,max){//生成随机数范围

if(arguments.length===2){

returnMath.floor(min+Math.random()*((max+1)-min))

}else{

returnnull

}

}

判断图片加载完成

exportconstimgLoadAll=function(arr,callback){//图片加载

letarrImg=[]

for(leti=0;iarr.length;i++){

letimg=newImage()

img.src=arr[i]

img.onload=function(){

arrImg.push(this)

if(arrImg.length==arr.length){

callbackcallback()

}

}

}

}

光标所在位置插入字符

exportconstinsertAtCursor=function(dom,val){//光标所在位置插入字符

if(document.selection){

dom.focus()

letsel=document.selection.createRange()

sel.text=val

sel.select()

}elseif(dom.selectionStart||dom.selectionStart=='0'){

letstartPos=dom.selectionStart

letendPos=dom.selectionEnd

letrestoreTop=dom.scrollTop

dom.value=dom.value.substring(0,startPos)+val+dom.value.substring(endPos,dom.value.length)

if(restoreTop0){

dom.scrollTop=restoreTop

}

dom.focus()

dom.selectionStart=startPos+val.length

dom.selectionEnd=startPos+val.length

}else{

dom.value+=val

dom.focus()

}

}

图片地址转base64

exportconstgetBase64=function(img){

//传入图片路径，返回base64，使用getBase64(url).then(function(base64){},function(err){});

letgetBase64Image=function(img,width,height){

//width、height调用时传入具体像素值，控制大小,不传则默认图像大小

letcanvas=document.createElement("canvas");

canvas.width=widthwidth:img.width;

canvas.height=heightheight:img.height;

letctx=canvas.getContext("2d");

ctx.drawImage(img,0,0,canvas.width,canvas.height);

letdataURL=canvas.toDataURL();

returndataURL;

}

letimage=newImage();

image.crossOrigin='';

image.src=img;

letdeferred=$.Deferred();

if(img){

image.onload=function(){

deferred.resolve(getBase64Image(image));

}

returnmise();

}

}

base64图片下载功能

exportconstdownloadFile

=(base64,fileName)={

letbase64ToBlob=(code)={

letparts=code.split(';base64,');

letcontentType=parts[0].split(':')[1];

letraw=window.atob(parts[1]);

letrawLength=raw.length;

letuInt8Array=newUint8Array(rawLength);

for(leti=0;irawLength;++i){

uInt8Array[i]=raw.charCodeAt(i);

}

returnnewBlob([uInt8Array],{

type:contentType

});

};

letaLink=document.createElement('a');

letblob=base64ToBlob(base64);//newBlob([content]);

letevt=document.createEvent("HTMLEvents");

evt.initEvent("click",true,true);

//initEvent不加后两个参数在FF下会报错

事件类型，是否冒泡，是否阻止浏览器的默认行为

aLink.download=fileName;

aLink.href=URL.createObjectURL(blob);

aLink.click();

}

浏览器是否支持webP格式图片

exportconstwebPBool=()=!![].map

document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp')==0

H5软键盘缩回、弹起回调

/*当软件键盘弹起会改变当前window.innerHeight

监听这个值变化[downCb当软键盘弹起后，缩回的回调,upCb当软键盘弹起的回调]*/

exportfunction(downCb,upCb){

varclientHeight=window.innerHeight

downCb=typeofdownCb==='function'downCb:function(){}

upCb=typeofupCb==='function'upCb:function(){}

window.addEventListener('resize',()={

varheight=window.innerHeight

if(height===clientHeight){

downCb()

}

if(heightclientHeight){

upCb()

}

})

}

对象属性剔除

functionomit(object,props=[]){

letres={}

Object.keys(object).forEach(key={

if(props.includes(key)===false){

res[key]=typeofobject[key]==='object'object[key]!==nulljsON.parse(jsON.stringify(object[key])):object[key]

}

})

returnres

//forexample

letdata={

id:1,

title:'12345',

name:'男'}

omit(data,['id'])

//data---{title:'xxx',name:'男'}

深拷贝

exportfunctiondeepClone(source){

if(!sourcetypeofsource!=='object'){

thrownewError