这些JavaScript函数让您的工作更轻松！

作者：YoussefZidan译者：前端小智来源：dev有梦想，有干货，微信搜索【大千世界】关注这个洗碗盘的清晨智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。上个月花了1600搭建了一个高配置的阿里服务器，学习node和相应的框架。现：阿里云双十一活动1核2G1M，69元/1年，180元/3年这篇文章，分享一下我几乎每个项目都会用到的一些功能。randomNumber()获取指定区间内的随机数。***生成最小值和最大值之间的随机整数。*@param{number}min最小数*@param{number}max最大数*/exportconstrandomNumber=(min=0,max=1000)=>Math.ceil(min+Math.random()*(max-min));//示例console.log(randomNumber());//97capitalize()将字符串的首字母大写。/***大写字符串。*@param{string}s将被大写的字符串*/exportconstcapitalize=(s)=>{if(typeofs!=="string")return"";returns.charAt(0).toUpperCase()+s.slice(1);}//Exampleconsole.log(capitalize("cat"));//截断();这对于长字符串很有用，尤其是在表内。/***截断的字符串....*@param{string}要截断的文本字符串*@param{number}截断的长度*/exportconsttruncate=(text,num=10)=>{if(text.length>num){return`${text.substring(0,num-3)}...`}returntext;}//Exampleconsole.log(truncate("thisissomelongstringtobetruncated"));//这是...toTop();滚动到底部，可以通过behavior属性指定滚动速度状态。/***滚动到顶部*/exportconsttoTop=()=>{window.scroll({top:0,left:0,behavior:"smooth"});};softDeepClone()这个方法是经常用到的，因为有了它我们可以深度克隆嵌套的数组或者对象。但是，此函数不适用于newDate()、NaN、undefined、function、Number、Infinity等数据类型。如果想深度克隆以上数据类型，可以使用lodash中的cloneDeep()函数。/***深度克隆输入*@param{any}inputInput*/exportconstsoftDeepClone=(input)=>JSON.parse(JSON.stringify(input));appendURLParams()&getURLParams()快速添加和获取查询String的方法，我一般用它们来存储分页元数据到url。/***添加查询字符串并以查询字符串格式返回值。*@param{string}key*@param{string}value*/exportconstappendURLParams=(key,value)=>{constsearchParams=newURLSearchParams(window.location.search).set(key,value);returnsearchParams.toString();};//exampleconsole.log(appendURLParams("name","youssef"))//name=youssef/***从URL获取参数名称。*@param{string}name*/exportconstgetURLParams=(name)=>newURLSearchParams(window.location.search).get(name);//Exampleconsole.log(getURLParams(id))//5getInnerHTML()I每当服务器返回一串HTML元素时使用它。/***获取HTML字符串的内部文本*@param{string}strHTML字符串*/exportconstgetInnerHTML=(str)=>str.replace(/(<([^>]+)>)/gi,"");scrollToHide()向上滚动显示HTML元素，向下滚动隐藏它们。/***向下滚动时隐藏HTML元素。*@param{string}元素的id*@param{string}distanceinpxex:"100px"*/exportconstscrollToHide=(id,distance)=>{letprevScrollpos=window.pageYOffset;window.onscroll=()=>{constcurrentScrollPos=window.pageYOffset;if(prevScrollpos>currentScrollPos){document.getElementById(id).style.transform=`translateY(${distance})`;}else{document.getElementById(id).style.transform=`translateY(-${distance})`;}prevScrollpos=currentScrollPos;};};humanFileSize()以字节为单位传入文件，返回我们日常熟悉的单位。/***将字节转换为人类可读的文件大小。*@param{number}bytes字节数*/exportconsthumanFileSize=(bytes)=>{letBYTES=bytes;const阈值=1024；if(Math.abs(BYTES)=thresh&&u{consttimes=[];//时间数组constx=minutesInterval;//分钟间隔lettt=startTime;//开始时间constap=["AM","PM"];//AM-PM//循环增加时间并将结果推送到数组中for(leti=0;tt<24*60;i+=1){consthh=Math.floor(tt/60);//以0-24格式获取一天中的小时数constmm=tt%60;//以0-55格式获取小时的分钟数times[i]=`${`${hh===12?12:hh%12}`.slice(-2)}:${`0${mm}`.slice(-2)}${ap[Math.floor(hh/12)]}`;//以[00:00-12:00AM/PM格式]将数据推送到数组中tt+=x;}returntimes;};//Exampleconsole.log(getTimes());/*["1:00AM","1:15AM","1:30AM","1:45AM","2:00AM","2:15AM","2:30AM",//....]*/setLocalItem()&getLocalItem()给LocalStorage一个过期时间/***将具有到期日期的值缓存到LocalHost。*@param{string}keyLocalStorageKey*@param{any}valueLocalStorageValue*@param{number}ttl生存时间（MS中的到期日期）*/exportconstsetLocalItem=(key,value,ttl=duration.month)=>{constnow=newDate();//`item`是一个包含原始值的对象//以及它应该过期的时间??constitem={value,expiry:now.getTime()+ttl,};localStorage.setItem(key,JSON.stringify(item));};/***从使用`setLocalItem`存储的LocalHost获取具有到期日期的值。*@param{string}key本地存储键*/exportconstgetLocalItem=(key)=>{constitemStr=localStorage.getItem(key);//如果项目不存在，则返回nullif(!itemStr){returnnull;}constitem=JSON.parse(itemStr);常量现在=新日期（）；//比较item的过期时间和当前时间if(now.getTime()>item.expiry){//如果该项目已过期，则从存储中删除该项目//并返回nulllocalStorage.removeItem(key);返回空值；}返回item.value;};formatNumber()/***用分隔符格式化数字。*@param{number}num*/exportconstformatNumber=(num)=>num.toLocaleString();//Exampleconsole.log(formatNumber(78899985));//78,899,985我们还可以添加其他选项来获取其他数字格式，例如货币、距离、重量等exportconsttoEGPCurrency=(num)=>num.toLocaleString("ar-EG",{style:"currency",货币:"EGP"});exportconsttoUSDCurrency=(num)=>num.toLocaleString("en-US",{style:"currency",currency:"USD"});console.log(toUSDCurrency(78899985));//$78,899,985.00console.log(toEGPCurrency(78899985));//??????????????.?.toFormData()每当需要向服务器发送文件时，我都会使用此函数。/***将对象转换为表单数据格式。*@param{object}obj*/exportconsttoFormData=(obj)=>{constformBody=newFormData();Object.keys(obj).forEach((key)=>{formBody.append(key,obj[key])})returnformBody;}getScreenWidth()获取表示屏幕宽度的字符串。/***检测屏幕宽度并返回表示屏幕宽度的字符串。*/exportconstgetScreenWidth=()=>{constscreenWidth=window.screen.width;如果（屏幕宽度<=425）返回“移动”；如果（屏幕宽度<=768）返回“平板电脑”；如果（屏幕宽度<=1024）返回“laptopSm”；如果（屏幕宽度<=1440）返回“laptopLg”；如果（屏幕宽度<=2560）返回“HD”；;};检查数组中的每个元素是否存在于另一个数组中。exportconstcontainsAll=(baseArr,arr)=>{letall=false;for(leti=0;i