当前位置: 首页 > Web前端 > HTML5

开发中常用的25个JavaScript单行

时间:2023-04-05 19:46:33 HTML5

25个开发中常用的JavaScript单行下面是我在开发中常用的30个JavaScript单行,排名不分先后。1.CoerceBoolean将变量强制转换为布尔值而不改变其值:constmyBoolean=!!myVariable;!!null//false!!undefined//false!!false//false!!ture//true!!""//false!!"string"//true!!0//false!!1//true!!{}//true!![]//true2。根据条件设置对象的属性要使用展开运算符有条件地设置对象的属性:constmyObject={...myProperty&&{propName:myPoperty}};letmyProperty='Jhon'constmyObject={...myProperty&&{propName:myProperty}};//{propName:"Jhon"}letmyProperty=''constmyObject={...myProperty&&{propName:myProperty}};//{}如果myProperty的计算结果为false,则&&失败并且不设置新属性;否则,如果不为空,&&将设置新属性并覆盖原始值。3.constmergedObject={...objectOne,...objectTwo};constmergedObject={...{name:'Jhon',age:'18'},...{name1:'jhon1',age1:'12'}};//{name:"Jhon",age:"18",name1:"jhon1",age1:"12"}constmergedObject={...{name:'Jhon',age:'18'},...{name:'jhon1',age:'12'}};//{name:"jhon1",age:"12"}支持无限合并,但是如果有属性相同的话,后面的属性会覆盖前面的属性。*请注意,这仅适用于浅合并。4.交换变量不使用中间变量交换两个变量的值:[varA,varB]=[varB,varA];让一个=1;让b=2;[a,b]=[b,a]//a=2b=15。将布尔值删除为假值constclean=dirty.filter(Boolean);constclean=[0,false,true,undefined,null,'',12,15].filter(Boolean);//[true,12,15]这将删除等于:null,undefined,false的值,0和空字符串('')。6.要转换元素类型,将Number元素转换为String元素:conststringArray=numberArray.map(String);conststringArray=[1,2,3].map(String);["1","2","3"]如果数组包含字符串,则字符串保持原样。这也可用于将String元素转换为Number类型:constnumberArray=stringArray.map(Number);conststringArray=["1","2","3"].map(String);//[1,2,3]7.将对象格式化为JSON代码要以可读格式显示JSON代码:constformatted=JSON.stringify(myObj,null,4);constformatted=JSON.stringify({name:'Jhon',age:18,address:'sz'},null,4);/*{"name":"Jhon","age":18,"address":"sz"}*/这个字符串化命令有三个参数。第一个是Javascript对象。第二个是一个可选函数,可用于在JSON被字符串化时对它执行操作。最后一个参数指示要添加多少个空格作为缩进以格式化JSON。省略最后一个参数,JSON将返回一长行。如果myObj中存在循环引用,则格式会失败。8.快速创建一个数字数组创建一个数组并用数字填充它,索引为零:constnumArray=Array.from(newArray(10),(x,i)=>i);//[0,1,2,3,4,5,6,7,8,9]9。随机生成一个六位验证码constcode=Math.floor(Math.random()*1000000).toString().padStart(6,"0");//94237710.身份证正则constIDReg=/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;11.window.location.search转JS对象有时候我们会查询URL从问号(?)开始的URL(查询部分)进行转换constsearchObj=search=>JSON.parse(`{"${decodeURIComponent(search.substring(1)).replace(/"/g,'\\"').replace(/&/g,'","').replace(/=/g,'":"')}"}`);//Iftherequesturlis//'https://www.baidu.com?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'//那么window.location.search就为:letsearch='?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=a86b5e5f0007bceb&rsv_t=1e1fAVan%2BVlnkhJHFB0BIGLdLM2slszYMJBTTfFkmyyBUzBpw0ggeuVDE50&rqlang=cn&rsv_enter=0&inputT=1287&rsv_sug3=5&rsv_sug1=3&rsv_sug7=101&rsv_sug2=0&rsv_sug4=1907'searchObj(search)格式化查询字符串得到如下对象:12.JS对象到url查询字符串constobjectToQueryString=(obj)=>Object.keys(obj).map((key)=>`${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`).join('&');objectToQueryString({name:'Jhon',age:18,address:'beijing'})//姓名=Jhon&年龄=18&地址=北京13.获取数组交集constsimilarity=(arr,values)=>arr.filter(v=>values.includes(v));similarity([1,2,3],[1,2,4]);//[1,2]14.检测设备类型使用正则表达式检测navigator.userAgent属性来判断设备是在移动设备上打开还是在台式机/笔记本电脑上打开constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)?'移动':'桌面';15.将数字转换为千位FormatconsttoDecimalMark=num=>num.toLocaleString('en-US');toDecimalMark(12305030388.9087);//"12,305,030,388.909"16位多维数组转一维数组constdeepFlatten=arr=>[].concat(...arr.map(v=>(Array.isArray(v)?deepFlatten(v):v)));deepFlatten([1,[2],[[3],4],5]);//[1,2,3,4,5]17.过滤对象数组constreducedFilter=(data,keys,fn)=>data.filter(fn).map(el=>keys.reduce((acc,key)=>{acc[key]=el[key];returnacc;},{}));constdata=[{id:1,name:'john',age:24},{id:2,name:'mike',age:50}];leta=reducedFilter(data,['id','name'],item=>item.age>24);//[{id:2,name:'mike'}]18.CamelCase字符串格式化将camelCase字符串转换为特定格式。使用String.replace()删除下划线、连字符和空格,并将驼峰式单词转换为全部小写。省略第二个参数分隔符,默认使用_分隔符。constfromCamelCase=(str,separator='_')=>str.replace(/([a-z\d])([A-Z])/g,'$1'+分隔符+'$2').replace(/([A-Z]+)([A-Z][a-z\d]+)/g,'$1'+分隔符+'$2').toLowerCase();fromCamelCase('someDatabaseFieldName','');//'一些数据库字段名称'fromCamelCase('someLabelThatNeedsToBeCamelized','-');//'some-label-that-needs-to-be-camelized'fromCamelCase('someJavascriptProperty','_');//'some_javascript_property'19.是不是绝对地址constisAbsoluteURL=str=>/^[a-z][a-z0-9+.-]*:/.test(str);isAbsoluteURL('https://google.com');//trueisAbsoluteURL('ftp://www.myserver.net');//trueisAbsoluteURL('/foo/bar');//错误20。获取两个日期之间的天数constgetDaysDiffBetweenDates=(dateInitial,dateFinal)=>(dateFinal-dateInitial)/(1000*3600*24);getDaysDiffBetweenDates(newDate('2017-12-13'),new日期('2017-12-22'));//921.数组去重constdeDupe=(myArray)=>[...newSet(myArray)];deDupe([1,1,2,1,3,3,4])//[1,2,3,4]22.数组对象去重constuniqueElementsBy=(arr,fn)=>arr.reduce((acc,v)=>{if(!acc.some(x=>fn(v,x)))acc.push(v);returnacc;},[]);uniqueElementsBy([{id:1,name:'Jhon'},{id:2,name:'sss'},{id:1,name:'Jhon'}],(a,b)=>a.id==b.id)//[{id:1,name:'Jhon'},{id:2,name:'sss'}]23.RGB颜色到十六进制颜色constRGBToHex=(r,g,b)=>((r<<16)+(g<<8)+b).toString(16).padStart(6,'0');RGBToHex(255,165,1);//'ffa501'24.常用密码组合正则constpasswordReg=/(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,20}$/;//-长度为8~20个字符,支持大小写字母、数字和符号中任意两个字符的组合25。判断一个dom元素是否有某个classNameconsthasClass=(el,className)=>newRegExp(`(^|\\s)${className}(\\s|$)`).test(el.classNameFinally,给大家推荐一个前端学习进阶内推交流群685910553(前端资料分享),无论你在地球的哪个角落,无论你工作了多少年,都欢迎你入驻!(本群会定期免费提供一些群主收藏的免费学习书籍资料和精心整理的面试题及答案文档!)如果您对本文有异议,请在评论区留言文章评论,如果你觉得这篇文章有意思,欢迎分享转发,也可以关注一下,表达对我们文章的认可和鼓励,希望大家在编程的道路上越走越远。