20个JS工具函数助力高效开发

　　1、校验数据类型exportconsttypeOffunction（obj）｛returnObject。prototype。toString。call（obj）。slice（8，1）。toLowerCase（）｝
　　示例：typeOf（树哥）stringtypeOf（〔〕）arraytypeOf（newDate（））datetypeOf（null）nulltypeOf（true）booleantypeOf（（）｛｝）function2、防抖exportconstdebounce（（）｛lettimernullreturn（callback，wait800）｛timerclearTimeout（timer）timersetTimeout（callback，wait）｝｝）（）
　　示例：
　　如vue中使用methods：｛loadList（）｛debounce（（）｛console。log（加载数据）｝，500）｝｝3、节流exportconstthrottle（（）｛letlast0return（callback，wait800）｛letnownewDate（）if（nowlastwait）｛callback（）lastnow｝｝｝）（）4、手机号脱敏exportconsthideMobile（mobile）｛returnmobile。replace（（d｛3｝）d｛4｝（d｛4｝），12）｝5、开启全屏exportconstlaunchFullscreen（element）｛if（element。requestFullscreen）｛element。requestFullscreen（）｝elseif（element。mozRequestFullScreen）｛element。mozRequestFullScreen（）｝elseif（element。msRequestFullscreen）｛element。msRequestFullscreen（）｝elseif（element。webkitRequestFullscreen）｛element。webkitRequestFullScreen（）｝｝6、关闭全屏exportconstexitFullscreen（）｛if（document。exitFullscreen）｛document。exitFullscreen（）｝elseif（document。msExitFullscreen）｛document。msExitFullscreen（）｝elseif（document。mozCancelFullScreen）｛document。mozCancelFullScreen（）｝elseif（document。webkitExitFullscreen）｛document。webkitExitFullscreen（）｝｝7、大小写转换
　　参数：str待转换的字符串type1全大写2全小写3首字母大写exportconstturnCase（str，type）｛switch（type）｛case1：returnstr。toUpperCase（）case2：returnstr。toLowerCase（）case3：returnstr〔0〕。toUpperCase（）str。substr（1）。toLowerCase（）substr已不推荐使用returnstr〔0〕。toUpperCase（）str。substring（1）。toLowerCase（）default：returnstr｝｝
　　示例：turnCase（vue，1）VUEturnCase（REACT，2）reactturnCase（vue，3）Vue8、解析URL参数exportconstgetSearchParams（）｛constsearchParnewURLSearchParams（window。location。search）constparamsObj｛｝for（const〔key，value〕ofsearchPar。entries（））｛paramsObj〔key〕value｝returnparamsObj｝
　　示例：假设目前位于https：comindex？id154513age18；getSearchParams（）；｛id：154513，age：18｝9、判断手机是Andoird还是IOS1：ios2：android3：其它exportconstgetOSType（）｛letunavigator。userAgent，appnavigator。appVersion；letisAndroidu。indexOf（Android）1u。indexOf（Linux）1；letisIOS！！u。match（（i〔；〕；（U；）？CPU。MacOSX）；if（isIOS）｛return1；｝if（isAndroid）｛return2；｝return3；｝10、数组对象根据字段去重
　　参数：arr要去重的数组key根据去重的字段名exportconstuniqueArrayObject（arr〔〕，keyid）｛if（arr。length0）returnletlist〔〕constmap｛｝arr。forEach（（item）｛if（！map〔item〔key〕〕）｛map〔item〔key〕〕item｝｝）listObject。values（map）returnlist｝
　　示例：constresponseList〔｛id：1，name：树哥｝，｛id：2，name：黄老爷｝，｛id：3，name：张麻子｝，｛id：1，name：黄老爷｝，｛id：2，name：张麻子｝，｛id：3，name：树哥｝，｛id：1，name：树哥｝，｛id：2，name：黄老爷｝，｛id：3，name：张麻子｝，〕uniqueArrayObject（responseList，id）〔｛id：1，name：树哥｝，｛id：2，name：黄老爷｝，｛id：3，name：张麻子｝〕11、滚动到页面顶部exportconstscrollToTop（）｛constheightdocument。documentElement。scrollTopdocument。body。scrollTop；if（height0）｛window。requestAnimationFrame（scrollToTop）；window。scrollTo（0，heightheight8）；｝｝12、滚动到元素位置exportconstsmoothScrollelement｛document。querySelector（element）。scrollIntoView（｛behavior：smooth｝）；｝；
　　示例：smoothScroll（target）；平滑滚动到ID为target的元素13、uuidexportconstuuid（）｛consttempurlURL。createObjectURL（newBlob（））constuuidtempurl。toString（）URL。revokeObjectURL（tempurl）释放这个urlreturnuuid。substring（uuid。lastIndexOf（）1）｝
　　示例：uuid（）a640be34689f4b98be77e3972f9bffdd
　　不过要吐槽一句的是，uuid一般应由后端来进行生成14、金额格式化
　　参数：｛number｝number：要格式化的数字｛number｝decimals：保留几位小数｛string｝decpoint：小数点符号｛string｝thousandssep：千分位符号exportconstmoneyFormat（number，decimals，decpoint，thousandssep）｛number（number）。replace（〔09Ee。〕g，）constn！isFinite（number）？0：numberconstprec！isFinite（decimals）？2：Math。abs（decimals）constseptypeofthousandssepundefined？，：thousandssepconstdectypeofdecpointundefined？。：decpointletsconsttoFixedFixfunction（n，prec）｛constkMath。pow（10，prec）returnMath。ceil（nk）k｝s（prec？toFixedFix（n，prec）：Math。round（n））。split（。）constre（？d）（d｛3｝）while（re。test（s〔0〕））｛s〔0〕s〔0〕。replace（re，1sep2）｝if（（s〔1〕）。lengthprec）｛s〔1〕s〔1〕s〔1〕newArray（precs〔1〕。length1）。join（0）｝returns。join（dec）｝
　　示例：moneyFormat（10000000）10，000，000。00moneyFormat（10000000，3，。，）10000000。00015、存储操作classMyCache｛constructor（isLocaltrue）｛this。storageisLocal？localStorage：sessionStorage｝setItem（key，value）｛if（typeof（value）object）valueJSON。stringify（value）this。storage。setItem（key，value）｝getItem（key）｛try｛returnJSON。parse（this。storage。getItem（key））｝catch（err）｛returnthis。storage。getItem（key）｝｝removeItem（key）｛this。storage。removeItem（key）｝clear（）｛this。storage。clear（）｝key（index）｛returnthis。storage。key（index）｝length（）｛returnthis。storage。length｝｝constlocalCachenewMyCache（）constsessionCachenewMyCache（false）export｛localCache，sessionCache｝
　　示例：localCache。getItem（user）sessionCache。setItem（name，树哥）sessionCache。getItem（token）localCache。clear（）16、下载文件
　　参数：api接口params请求参数fileName文件名constdownloadFile（api，params，fileName，typeget）｛axios（｛method：type，url：api，responseType：blob，params：params｝）。then（（res）｛letstrres。headers〔contentdisposition〕if（！res！str）｛return｝letsuffix截取文件名和文件类型if（str。lastIndexOf（。））｛fileName？：fileNamedecodeURI（str。substring（str。indexOf（）1，str。lastIndexOf（。）））suffixstr。substring（str。lastIndexOf（。），str。length）｝如果支持微软的文件下载方式（ie10浏览器）if（window。navigator。msSaveBlob）｛try｛constblobObjectnewBlob（〔res。data〕）；window。navigator。msSaveBlob（blobObject，fileNamesuffix）；｝catch（e）｛console。log（e）；｝｝else｛其他浏览器leturlwindow。URL。createObjectURL（res。data）letlinkdocument。createElement（a）link。style。displaynonelink。hrefurllink。setAttribute（download，fileNamesuffix）document。body。appendChild（link）link。click（）document。body。removeChild（link）window。URL。revokeObjectURL（link。href）；｝｝）。catch（（err）｛console。log（err。message）；｝）｝
　　使用：downloadFile（apidownload，｛id｝，文件名）17、时间操作
　　关于时间操作，没必要自己再写一大串代码了，强烈推荐使用day。js〔2〕
　　Day。js是一个仅2kb大小的轻量级JavaScript时间日期处理库，下载、解析和执行的JavaScript更少，为代码留下更多的时间。18、深拷贝exportconstcloneparent｛判断类型constisType（obj，type）｛if（typeofobj！object）returnfalse；consttypeStringObject。prototype。toString。call（obj）；letflag；switch（type）｛caseArray：flagtypeString〔objectArray〕；break；caseDate：flagtypeString〔objectDate〕；break；caseRegExp：flagtypeString〔objectRegExp〕；break；default：flagfalse；｝returnflag；｝；处理正则constgetRegExpre｛varflags；if（re。global）flagsg；if（re。ignoreCase）flagsi；if（re。multiline）flagsm；returnflags；｝；维护两个储存循环引用的数组constparents〔〕；constchildren〔〕；constcloneparent｛if（parentnull）returnnull；if（typeofparent！object）returnparent；letchild，proto；if（isType（parent，Array））｛对数组做特殊处理child〔〕；｝elseif（isType（parent，RegExp））｛对正则对象做特殊处理childnewRegExp（parent。source，getRegExp（parent））；if（parent。lastIndex）child。lastIndexparent。lastIndex；｝elseif（isType（parent，Date））｛对Date对象做特殊处理childnewDate（parent。getTime（））；｝else｛处理对象原型protoObject。getPrototypeOf（parent）；利用Object。create切断原型链childObject。create（proto）；｝处理循环引用constindexparents。indexOf（parent）；if（index！1）｛如果父数组存在本对象，说明之前已经被引用过，直接返回此对象returnchildren〔index〕；｝parents。push（parent）；children。push（child）；for（letiinparent）｛递归child〔i〕clone（parent〔i〕）；｝returnchild；｝；returnclone（parent）；｝；
　　此方法存在一定局限性：一些特殊情况没有处理：例如Buffer对象、Promise、Set、Map。
　　如果确实想要完备的深拷贝，推荐使用lodash中的cloneDeep方法。19、模糊搜索
　　参数：list原数组keyWord查询的关键词attribute数组需要检索属性exportconstfuzzyQuery（list，keyWord，attributename）｛constregnewRegExp（keyWord）constarr〔〕for（leti0；ilist。length；i）｛if（reg。test（list〔i〕〔attribute〕））｛arr。push（list〔i〕）｝｝returnarr｝
　　示例：constlist〔｛id：1，name：树哥｝，｛id：2，name：黄老爷｝，｛id：3，name：张麻子｝，｛id：4，name：汤师爷｝，｛id：5，name：胡万｝，｛id：6，name：花姐｝，｛id：7，name：小梅｝〕fuzzyQuery（list，树，name）〔｛id：1，name：树哥｝〕20、遍历树节点exportconstforeachTree（data，callback，childrenNamechildren）｛for（leti0；idata。length；i）｛callback（data〔i〕）if（data〔i〕〔childrenName〕data〔i〕〔childrenName〕。length0）｛foreachTree（data〔i〕〔childrenName〕，callback，childrenName）｝｝｝
　　示例：
　　假设我们要从树状结构数据中查找id为9的节点consttreeData〔｛id：1，label：一级1，children：〔｛id：4，label：二级11，children：〔｛id：9，label：三级111｝，｛id：10，label：三级112｝〕｝〕｝，｛id：2，label：一级2，children：〔｛id：5，label：二级21｝，｛id：6，label：二级22｝〕｝，｛id：3，label：一级3，children：〔｛id：7，label：二级31｝，｛id：8，label：二级32｝〕｝〕，letresultforeachTree（data，（item）｛if（item。id9）｛resultitem｝｝）console。log（result，result）｛id：9，label：三级111｝