JS开发常用工具函数（小结）

JS开发常用工具函数(小结)

1'isStatic:检测数据是不是除了symbol外的原始数据

functionisStatic(value)

{return(

typeofvalue==='string'||

typeofvalue==='number'||

typeofvalue==='boolean'||

typeofvalue==='undefined'||

value===null

)

)

2、isPrimitive:检测数据是不是原始数据

functionisPrimitive(value){

returnisStatic(value)||typeofvalue==='symbol'

)

3'isObject:判断数据是不是引用类型的数据(例如：arrays,functions,objects,regexes,newNumber(O)以及newStringf'))

functionisObject(value)

{lettype=typeofvalue;

returnvalue!=null&&(type=='object'||type=='function');

)

4'isObjectLike:检查value是否是类对象。如果一个值是类对象•那么它不应该是null•而且typeof后的结果是"object"

functionisObjectLike(value){

returnvalue!=null&&typeofvalue=='object';

)

5、getRawType:获取数据类型*返回结果为Number、String、Object、Array等

functiongetRawType(value){

returnOtotype.toString.call(value).slice(8,-1)

)

//getoRawType([])==>Array

6'isPlainObject:判断数据是不是Object类型的数据

functionisPlainObject(obj){

returnOtotype.toString.call(obj)==='[objectObject]'

)

7-isArray:判断数据是不是数组类型的数据

functionisArray(arr){

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

)

将isArray挂载到Array上

Array.isArray=Array.isArray||isArray;

8'isRegExp:判断数据是不是正则对象

functionisRegExp(value){

returnOtotype.toString.call(value)==='[objectRegExp]'

)

9'isDate:判断数据是不是时间对象

functionisDate(value){

returnOtotype.toString.call(value)==='[objectDate]'

)

10、isNative:判断value是不是浏览器内置函数

内置函数toString后的主体代码块为mativecode]•而非内置函数则为相关代码,所以非内置函数可以进行拷贝（toString后掐

头去尾再由Function转）

functionisNative(value){

returntypeofvalue==='function'&&/nativecode/.test(value.toString())

11'isFunction:检查value是不是函数

functionisFunction(value){

returnOtotype.toString.call(value)==='[objectFunction]'

)

12'isLength:检查value是否为有效的类数组长度

functionisLength(value){

returntypeofvalue=='number'&&value>-1&&value%1==0&&value<=Number.MAX_SAFE_INTEGER;

)

13'isArrayLike:检查value是否是类数组

如果一个值被认为是类数组,那么它不是一个函数,并且value.length是个整数,大于等于0,小于或等于

Number.MAX_SAFE_INTEGER。这里字符串也将被当作类数组

functionisArrayLike(value){

returnvalue!=null&&isLength(value.length)&&!isFunction(value);

)

14'isEmpty:检查value是否为空

如果是null•直接返回true;如果是类数组■判断数据长度；如果是Object对象，判断是否具有属性；如果是其他数据•直接

返回false(也可改为返回true)

functionisEmpty(value)

{if(value==null)

{returntrue;

)

if(isArrayLike(value))

{returnIvalue.length;

}else

if(isPlainObject(value)){for

(letkeyinvalue){

if(hasOwnProperty.call(value,key))

{returnfalse;

)

)

returntrue;

)

returnfalse;

)

15-cached:记忆函数：缓存函数的运算结果

functioncached(fn){

letcache=Object.create(null);

returnfunctioncachedFn(str)

{lethit=cache[str];

returnhit||(cache[str]=fn(str))

)

)

16、camelize:横线转驼峰命名

letcamelizeRE=/-(\w)/g;

functioncamelize(str){

returnstr.replace(camelizeRE,function(_,c)

{returnc?c.toUpperCase():

))

}

//ab-cd-ef==>abCdEf

//使用记忆函数

let_camelize=cached(camelize)

17-hyphenate:驼峰命名转横线命名：拆分字符串,使用-相连•并且转换为小写

lethyphenateRE=AB([A-Z])/g;

functionhyphenate(str){

returnstr.replace(hyphenateRE,'-$1').toLowerCase()

//abCd==>ab-cd

〃使用记忆函数

let.hyphenate=cached(hyphenate);

18、capitalize:字符串首位大写

functioncapitalize(str){

returnstr.charAt(0).tollpperCase()+str.slice(l)

)

//abc==>Abe

〃使用记忆函数

letcapitalize=cached(capitalize)

19、extend:将属性混合到目标对象中

functionextend(to,_from)

{for(letkeyin_from)

{to[key]=_from[key];

)

returnto

)

20、Object.assign:对象属性复制，浅拷贝

Object.assign=Object.assign||function(){

if(arguments.length==0)thrownewTypeError('Cannotconvertundefinedornulltoobject*);

lettarget=arguments[0],

args=Atotype.slice.call(arguments,1),

key

args.forEach(function(item){for(

keyinitem){

item.hasOwnProperty(key)&&(target[key]=item[key])

}

})

returntarget

)

使用Object.assign可以浅克隆一个对象：

letclone=Object.assign({},target)

简单的深克隆可以使用JSON.parse()和JSON.stringify()•这两个api是解析json数据的•所以只能解析除symbol外的原始类型及

数组和对象

letclone=JSON.parse(JSON.stringify(target))

21'clone:克隆数据，可深度克隆

这里列出了原始类型•时间、正则、错误、数组、对象的克隆规则,其他的可自行补充

functionclone(value,

deep){if(isPrimitive(value)

){returnvalue

if(isArrayLike(value)){//是类数组

value=Atotype.slice.call(value)

returnvalue.map(item=>deep?clone(item,deep):item)

}elseif(isPlainObject(value)){//是对象

lettarget={},key;

for(keyinvalue){

value.hasOwnProperty(key)&&(target[key]=deep?clone(value[key],deep):value[key])

)

)

lettype=getRawType(value)

switch(type){c

ase'Date':

case'RegExp':

case'Error':value=newwindow[type](value);break;

)

returnvalue

22、识别各种浏览器及平台

//运行环境是浏览器

letinBrowser=typeofwindow!=='undefined';

〃运行环境是微信

letinWeex=typeofWXEnvironment!=='undefined'&&!!WXEnvironment.platform;

letweexPlatform=inWeex&&WXEnvironment.platform.toLowerCase();

〃浏览器UA判断

letUA=inBrowser&&window.navigator.userAgent.toLowerCase();

letislE=UA&&/msie|trident/.test(UA);

letislE9=UA&&UA.indexOfCmsie9.0')>0;

letisEdge=UA&&UA.indexOf('edge/')>0;

letisAndroid=(UA&&IIA.indexOf('android')>0)||(weexPlatform==='android');

letislOS=(UA&&/iphone|ipad|ipod|ios/.test(UA))||(weexPlatform===*ios');

letisChrome=UA&&ZchromeV\d+/.test(UA)&&JisEdge;

23'getExplorerlnfo:获取浏览器信息

functiongetExplorerlnfo(){

lett=navigator.userAgent.toLowerCase();

return0<=t.indexOf("msie")?{//ie<11

type:"IE",

version:Number(t.match(/msie([\d]+)/)[1])

}:!!t.match(/tridentV.+?rv:(([\d.]+))/)?{//ie11

type:"IE",

version:11

}:0<=t.indexOf("edge")?

{type:,'Edge';

version:Number(t.match(/edgeV([\d]+)/)[1])

}:0<=t.indexOf("firefox")?

{type:"Firefox",

version:Number(t.match(/firefoxV([\d]+)/)[1])

}:0<=t.indexOf("chrome")?

{type:"Chrome",

version:Number(t.match(/chrome\/([\d]+)/)[1])

}:0<=t.indexOf("opera")?

{type:"Opera",

version:Number(t.match(/opera.([\d]+)/)[1])

}:0<=t.indexOf("SafariM)?

{type:"Safari",

version:Number(t.match(/versionV((\d]+)/)[1])

)：{

type:t,

version:-1

)

)

24、isPCBroswer:检测是否为PC端浏览器模式

functionisPCBroswer(){

lete=navigator.userAgent.toLowerCase()

,t="ipad"==e.match(/ipad/i)

,i=Miphone"==e.match(/iphone/i)

,r="midp”==e.match(/midp/i)

,n="rv:"==e.match(/rv:/i)

,a="ucweb"==e.match(/ucweb/i)

,o="android"==e.match(/android/i)

,s="windowsce"==e.match(/windowsce/i)

,I="windowsmobile"==e.match(/windowsmobile/i);

return!(t||i||r||n||a||o||s||I)

)

25、unique:数组去重•返回一个新数组

function

unique(arr){if(!isArrayLink(arr)){//不

是类数组对象returnarr

)

letresult=[]

letobjarr=口

letobj=Object.create(null)

arr.forEach(item=>{

if(isStatic(item)){//是除了symbol外的原始数据

letkey=item++getRawType(item);

if(!obj[key]){

obj[key]=true

result.push(item)

)

}else{//引用类型及symbol

if(!objarr.includes(item)){obja

rr.push(item)

result.push(item)

)

)

})

returnresulte

)

26、Set简单实现

window.Set=window.Set||(function()

{functionSet(arr){

this.items=arr?unique(arr):口；

this.size=this.items.length;//Array的大小

)

Stotype={

add:function(value){

//添加元素,若元素已存在，则跳过,返回Set结构本身。

if(Ithis.has(value))

{this.items.push(value);

this.size++;

)

returnthis;

},

clear:function(){

//清除所有成员•没有返回值。

this.items=[]

this.size=0

}，

delete:function(value){

//删除某个值•返回一个布尔值•表示删除是否成功。

returnthis.items.some((v,i)=>{

if(v===

value){this.items.spl

ice(i,1)returntrue

)

returnfalse

})

}，

has:function(value){

//返回一个布尔值,表示该值是否为Set的成员。

returnthis.items.some(v=>v===value)

}，

values:function()

{returnthis.items

),

)

returnSet;

}())；

27'repeat:生成一个重复的字符串,有n个str组成,可修改为填充为数组等

functionrepeat(str,n)

{letres=

while(n){

if(n%2===1){

res+=str;

)

if(n>1)

{str+=

str;

)

n»=1;

)

returnres

)；

//repeat('123',3)==>123123123

28'dateFormater:格式化时间

functiondateFormater(formater,t){

letdate=t?newDate(t):newDate(),

Y=date.getFullYear()+",

M=date.getMonth()+1,

D=date.getDate(),

H=date.getHours(),

m=date.getMinutes(),

s=date.getSeconds();

returnformater.replace(/YYYY|yyyy/g,Y)

.replace(/YY|yy/g,Y.substr(2,2))

.replace(/MM/g,(M<10?'0':")+M)

.replace(/DD/g,(D<10?,0,:")+D)

,replace(/HH|hh/g,(H<10?'O':U)+H)

.replace(/mm/g,(m<10?'O':H)+m)

.replace(/ss/g,(s<10?'O':")+s)

)

//dateFormater('YYYY-MM-DDt)==>2019-06-2618:30

//dateFormater('YYYYMMDDHHmm',t)==>201906261830

29dateStrForma:将指定字符串由一种时间格式转化为另一种

from的格式应对应str的位置

functiondateStrForma(str,from,to){

//'20190626''YYYYMMDD''YYYY^MM^DDB'

str+="

letY="

if(~(Y=

from.indexOf('YYYY'))){Y=

str.substr(Y,4)

to=to.replace(/YYYY|yyyy/g,Y)

}elseif(~(Y=

from.indexOf('YY'))){Y=

str.substr(Y,2)

to=to.replace(/YY|yy/g,Y)

letk,i

i=from.indexOf(s+s)

k=~i?str.substr(i,2):"

to=to.replace(s+s,k)

})

returnto

)

//dateStrForma('20190626','YYYYMMDD','YYYY^MM^DDS1)==>2019年06月26曰

//dateStrForma('121220190626','—YYYYMMDDTYYYY年MM月DD日)==>2019年06月26日

//(^尼$1尸0m12('2019年06月26日'，'丫丫丫丫年MM月DD日'，'YYYYMMDD')==>20190626

//一般的也可以使用正则来实现

"2019年06月26日」eplace(/(\d{4})年(\d{2})月(\d{2})日/,'$1-$2-$3')==>2019-06-26

30、getPropByPath:根据字符串路径获取对象属性:'obj[0].count,

functiongetPropByPath(obj,path,strict)

{lettempObj=obj;

path=path.replace(A[(\w+)\]/g,'.$1')；//将[0]转化为.0

path=path.replace(/A\./,");//去除井头的.

letkeyArr=path.split。);//根据.切割

leti=0;

for(letlen=keyArr.length;i<len-1;++i)

{if(itempObj&&(strict)break;

letkey=keyArr[i];

if(keyintempObj){

tempObj=tempObj[key];

}else{

if(strict){//开启严格模式•没找到对应key值,抛出错误

thrownewError('pleasetransferavalidproppathtoformitem!');

)

break;

)

)

return{

o:tempObj,//原始数据

k:keyArrfi],//key值

v:tempObj?tempObj[keyAir[i]]:null//key值对应的值

};

};

31'GetUrlParam:获取Uri参数,返回一个对象

functionGetUrlParam(){

leturl=document.location.toStringO；

letarrObj=url.split("?H);

letparams=Object.create(null)

if(arrObj.length>1){

arrObj=arrObj[1].split(n&");

arrObj.forEach(item=>{ite

m=item.split(M=M);

params[item[O]]=item[1]

})

}

returnparams;

)

//?a=1&b=2&c=3==>{a:N1",b:"2",c:"3"}

32'downloadFile:base64数据导出文件•文件下载

functiondownloadFile(filename,data){

letDownloadLink=document.createElement('a');

if

(DownloadLink){document.body.appendChild(D

ownloadLink);DownloadLink.style='display:

none';DownloadLink.download=filename;

DownloadLink.href=data;

if(document.createEvent){

letDownloadEvt=document.createEvent('MouseEvents');

DownloadEvt.initEventCclick,,true,false);

DownloadLink.dispatchEvent(DownloadEvt);

}

elseif(document.createEventObject)

DownloadLink.fireEvent('onclick,);

elseif(typeofDownloadLink.onclick=='function')

DownloadLink.onclick();

document.body.removeChild(DownloadLink);

)

)

33'toFullScreen:全屏

functiontoFullScreen(){

letelem=document.body;

elem.webkitRequestFullScreen

elem.webkitRequestFullScreenO

:elem.mozRequestFullScreen

elem.mozRequestFullScreen()

:elem.msRequestFullscreen

elem.msRequestFullscreenO

:elem.requestFullScreen

elem.requestFullScreen()

：alert("浏览器不支持全屏")；

}

34、exitFullscreen:退出全屏

functionexitFullscreen(){

letelem=parent.document;

elem.webkitCancelFullScreen

elem.webkitCancelFullScreen()

:elem.mozCancelFullScreen

elem.mozCancelFullScreenO

:elem.cancelFullScreen

elem.cancelFullScreen()

:elem.msExitFullscreen

elem.msExitFullscreen()

:elem.exitFullscreen

elem.exitFullscreen()

：alertf切换失败,可尝试Esc退出)

}

35、requestAnimationFrame:window动画

window.requestAnimationFrame=window.requestAnimationFrame||

window.webkitRequestAnimationFrame||

window.mozRequestAnimationFrame||

window.msRequestAnimationFrame||

window.oRequestAnimationFrame||

function(callback){

//为了使setTimteout的尽可能的接近每秒60帧的效果

window.setTimeout(callback,1000/60);

)；

window.cancelAnimationFrame=window.cancelAnimationFrame||

Window.webkitCancelAnimationFrame||

window.mozCancelAnimationFrame||

window.msCancelAnimationFrame||

window.oCancelAnimationFrame||

function(id){

//为了使setTimteout的尽可能的接近每秒60帧的效果

window.clearTimeout(id);

}

36'JsNaN:检查数据是否是非数字值

原生的isNaN会把参数转换成数字(value。。,inull、true、false以及长度小于等于1的数组(元素为非NaN数据)会被转换成数字•

这不是我想要的。Symbol类型的数据不具有valueof接口,所以isNaN会抛出错误•这里放在后面•可避免错误

function_isNaN(v){

return!(typeofv==='string'||typeofv==='number1)||isNaN(v)

)

37、max:求取数组中非NaN数据中的最大值

functionmax(arr){

arr=arr.filter(item=>!JsNaN(item))

returnarr.length?Math.max.apply(null,arr):undefined

)

//max([1,2,'11',null,'fdf',[]])==>11

38-min:求取数组中非NaN数据中的最小值

functionmin(arr){

arr=arr.filter(item=>!_isNaN(item))

returnarr.length?Math.min.apply(null,arr):undefined

)

//min([1,2,'11',null,'fdf,[]])==>1

39'random:返回一个lower-upper之间的随机数

lower'upperS论正负与大小，但必须是券NaN的数据

functionrandom(lower,

upper){lower=+lower||0

upper=+upper||0

returnMath.random()*(upper-lower)+lower;

)

//random(0,0.5)==>0.3567039135734613

//random(2,1)===>1.6718418553475423

//random(-2,-1)==>-1.4474325452361945

40'Object.keys:返回一个由一个给定对象的自身可枚举属性组成的数组

Object.keys=Object.keys||functionkeys(object)

{if(object===null||object===undefined))

thrownewTypeError('Cannotconvertundefinedornulltoobject');

)

letresult=[]

if(isArrayLike(object)||

isPlainObject(object)){for(letkeyinobject){

object.hasOwnProperty(key)&&(result.push(key))

returnresult

}

41'Object.values:返回一个给定对象自身的所有可枚举属性值的数组

Object.values=Object.values||functionvalues(object)

{if(object===null||object===undefined)(

thrownewTypeError('Cannotconvertundefinedornulltoobject')；

)

letresult=口

if(isArrayLike(object)||

isPlainObject(object)){for(letkeyinobject){

object.hasOwnProperty(key)&&(result.push(object[key]))

)

}

returnresult

42、arr.fill:使用value值来填充array-从start位置开始，至Uend位置结束(但不包含end位置)•返回原数组

Atotype.fill=Atotype.fill||functionfill(value,start,end)

{letctx=this

letlength=ctx.length;

start=parselnt(start)

if(isNaN(start)){

start=0

}elseif(start<0){

start="start>length?0:(length+start);

)

end=parselnt(end)

if(isNaN(end)||end>

length){end=length

}elseif(end<0)

{end+=length;

)

while(start<end)

{ctx[start++]=value;

)

returnctx;

)

//Array(3).fill(2)===>[2,2,2]

43'arr.includes:用来判断一个数组是否包含一个指定的值•如果是返回true•否则false•可指定开始查询的位置

Atotype.includes=Atotype.includes||functionincludes(value,

start){letctx=this

letlength=ctx.length;

start=parselnt(start)

if(isNaN(start)){

start=0

}elseif(start<0){

start=-start>length?0:(length+start);

)

letindex=ctx.indexOf(value)

returnindex>=start;

)

44、arr.find:返回数组中通过测试(函数fn内判断)的第一个元素的值

Atotype.find=Atotype.find||functionfind(fn,

ctx){fn=fn.bind(ctx)

letresult;

this.some((value,index,arr),thisValue)=>{

returnfn(value,index,arr)?(result=value,true):false

})

returnresult

45、arr.findlndex:返回数组中通过测试(函数fn内判断)的