写了一个查询域名资料的小项目，需要用户输入查询域名的顶级域名，为了保证用户输入的域名为顶级域名，就写一个通过JS脚本代码来判断输入的域名是否为顶级域名的方法，下面站三界导航就来分享一下，大家可以做个参考！js判断是否为顶级域名的方法示例代码：注：以下代码来自网络，稍微做了一些修改，已测试正常可用！/***判断输入的地址是否为顶级域名*站三界导航www.zhansanjie.com*是顶级域名返回true否则返回false**/functionis_url(str){str=str.toLowerCase();varhz='.com,.net,.org,.biz,.info,.name,.mobi,.tel,.xxx,.ac,.ag,.am,.asia,.at,.co,.be,.bz,.ca,.cc,.ch,.cm,.cx,.cz,.de,.ac.cn,.bj.cn,.sh.cn,.tj.cn,.cq.cn,.he.cn,.sx.cn,.nm.cn,.ln.cn,.jl.cn,.hl.cn,.js.cn,.zj.cn,.ah.cn,.fj.cn,.jx.cn,.sd.cn,.ha.cn,.hb.cn,.hn.cn,.gd.cn,.gx.cn,.hi.cn,.sc.cn,.gz.cn,.yn.cn,.xz.cn,.gs.cn,.qh.cn,.nx.cn,.xj.cn,.tw.cn,.mo.cn,.com.cn,.net.cn,.sn.cn,.org.cn,.hk.vc,.hk.cn,.sale,.wang,.xyz,.pro,.xin,.app,.vip,.top,.cn,.tv,.hk,.ng,.la,.in,.pw,.sx,.me,.gg,.gs,.st,.us,.dk,.ec,.es,.eu,.fm,.fr,.gd,.gl,.gr,.gy,.hn,.ht,.im,.io,.it,.je,.jp,.ki,.lc,.li,.lu,.lv,.md,.mg,.mn,.ms,.mu,.mx,.my,.nl,.nu,.pe,.ph,.pl,.pm,.se,.sh,.so,.tc,.tf,.tk,.tl,.tm,.to,.tw,.co.uk,.uk,.vc,.vg,.wf,.ws,.yt,.ltd,.men,.bid,.fi,.lt,.games,.news,.work,.space,.win,.link,.store,.co.jp,.edu,.ren,.date,.site,.red,.kim,.cn.com,.club,.gp,.is,.pt,.one,.tt,.ai,.ma,.ee,.su,.run,.car,.fish';hz=hz.split(",");varqm=str.substr(0,str.indexOf("\."));varhm=str.substr(str.indexOf("\."));returnstr.length>0&&hz.includes(hm)&&qm.match(/^[a-z0-9\u4e00-\u9fa5]+([a-z0-9\u4e00-\u9fa5-]*(?:[a-z0-9\u4e00-\u9fa5]+))?$/i)?true:false;}函数调用console.log(is_url('zhansanjie.com'));//trueconsole.log(is_url('zhansanjie.com/'));//falseconsole.log(is_url('zhansanjie.com/index.html'));//falseconsole.log(is_url('www.zhansanjie.com'));//false
使用history.back()可以创建一个浏览器“返回”按钮。<buttononclick="history.back()">返回</button>
以下这些是项目中用到的，封装的方法，如果有问题虚心求教。截取url参数functiongetQueryObject(url){url=url==null?window.location.href:urlconstsearch=url.substring(url.lastIndexOf('?')+1)constobj={}constreg=/([^?&=]+)=([^?&=]*)/gsearch.replace(reg,(rs,$1,$2)=>{constname=decodeURIComponent($1)letval=decodeURIComponent($2)val=String(val)obj[name]=valreturnrs})returnobj}getQueryObject('https//www.zhansanjie.com?id=1111&type=edit')格式化时间(方法1)functionparseTime(time,cFormat){if(arguments.length===0){returnnull}constformat=cFormat||'{y}-{m}-{d}{h}:{i}:{s}'letdateif(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(/{(y|m|d|h|i|s|a)+}/g,(result,key)=>{letvalue=formatObj[key]//Note:getDay()returns0onSundayif(key==='a'){return['日','一','二','三','四','五','六'][value]}if(result.length>0&&value<10){value='0'+value}returnvalue||0})returntime_str}//使用parseTime(newDate(),'{y}-{m}-{d}{h}:{i}:{s}')格式化时间(方法2)/***格式化时间*/functionNewTime(time){if(!time)time=newDate()constt=newDate(time)//你已知的时间t.setTime(t.setMinutes(t.getMinutes()))//设置新时间比旧时间多一分钟constY=t.getFullYear()letM=t.getMonth()+1letD=t.getDate()letHH=t.getHours()letMM=t.getMinutes()letSS=t.getSeconds()if(M<10)M='0'+Mif(D<10)D='0'+Dif(HH<10)HH='0'+HHif(MM<10)MM='0'+MMif(SS<10)SS='0'+SS//letdate_value=Y+'-'+M+'-'+D+''+HH+':'+MM+':'+SS;constdate_value=Y+'-'+M+'-'+D+''+HH+':'+MM+':'+SSreturndate_value}存储、获取、删除sessionStoragefunction__setItem(name,content){if(!name)return;if(typeofcontent!=='string'){content=JSON.stringify(content);}window.sessionStorage.setItem(name,content);};function__getItem(name){if(!name)return;returnwindow.sessionStorage.getItem(name);};function__removeItem(name){if(!name)return;window.sessionStorage.removeItem(name);};检测手机号function_isMobile(mobile){varreg=/^[1][3,4,5,7,8][0-9]{9}$/;if(reg.test(mobile))returntrue;elsereturnfalse;};将base64转换为文件functiondataURLtoFile(dataurl,filename){vararr=dataurl.split(','),mime=arr[0].match(/:(.*?);/)[1],bstr=atob(arr[1]),n=bstr.length,u8arr=newUint8Array(n);while(n--){u8arr[n]=bstr.charCodeAt(n);}returnnewFile([u8arr],filename,{type:mime});}替换电话号码中间四位functionreplacePhone(num){letmphone=num;if(_isMobile(num)){mphone=num.substr(0,3)+'****'+num.substr(7);}returnmphone;};去除内容中的空格functiondeblank(str){str=str.replace(/\s*/g,'');returnstr;};电话号码格式344替换functionphoneSeparated(num){letmphone=num;if(_isMobile(num)){mphone=num.substring(0,3)+''+num.substring(3,7)+''+num.substring(7,11);}returnmphone;};银行卡格式4444替换functioncardSeparated(num){letindex=num?num.length/4:0;letresult='';for(leti=0;i<index;i++){result+=num.substring(i*4,(i+1)*4)+'';}returnresult;};身份证格式生日替换functionidentityCardSeparated(num){if(num.length===18){varstr=num.substr(0,6)+'********'+num.substr(14);returnstr;}else{returnnum;}};护照号替换functionpassportSeparated(num){if(num.length>4){varstr=num.substr(0,num.length-4)+'****';returnstr;}else{returnnum;}};卡号每隔四位加短线functioncardNoFormat(cardNo){if(typeofcardNo=='number'){cardNo=String(cardNo).replace(/\D/g,'').replace(/....(?!$)/g,'$&-');}else{cardNo=cardNo.replace(/\D/g,'').replace(/....(?!$)/g,'$&-');}returncardNo;};console.log(cardNoFormat('124141251512'))console.log(cardNoFormat(1233124124124124))每隔四位加空格functionfourSpace(num){varvalue=num.replace(/\D/g,'').replace(/....(?!$)/g,'$&');returnvalue;};fourSpace('13122223333')身份证校验functionIdentityCodeValid(code){letcity={11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉林',23:'黑龙江',31:'上海',32:'江苏',33:'浙江',34:'安徽',35:'福建',36:'江西',37:'山东',41:'河南',42:'湖北',43:'湖南',44:'广东',45:'广西',46:'海南',50:'重庆',51:'四川',52:'贵州',53:'云南',54:'西藏',61:'陕西',62:'甘肃',63:'青海',64:'宁夏',65:'新疆',71:'台湾',81:'香港',82:'澳门',91:'国外'};lettip='';letpass=true;if(!code||!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)){tip='身份证号格式错误';pass=false;}elseif(!city[code.substr(0,2)]){tip='地址编码错误';pass=false;}if(!pass)message.error(tip);returnpass;};HmacSHA256加密functionencryptHmacSHA256(value){constuserInfo=getUserInfo();letkey='';if(userInfo.data){key=userInfo.data.publicKey;}letciphertext=CryptoJS.HmacSHA256(value,key);lethashInBase64=CryptoJS.enc.Base64.stringify(ciphertext);returnhashInBase64;};对象中的null转为空字符串function_replaceNull(obj){if(typeofobj==='object'){Object.keys(obj).forEach(element=>{letvalue=obj[element];if(value===null||value===undefined){//obj[element]='';deleteobj[element];}elseif(typeofvalue==='object'){_replaceNull(value);}});}returnobj;};文件导出function_checkoutFile(fileName,response){console.log('response');console.log(response);letblob=newBlob([response],{type:'application/vnd.ms-excel'});letobjectUrl=URL.createObjectURL(blob);consta=document.createElement('a');a.setAttribute('href',objectUrl);a.setAttribute('download',fileName);a.click();URL.revokeObjectURL(objectUrl);};url文件导出function_urlExportFile(url){consta=document.createElement('a');a.setAttribute('href',url);a.click();};url校验functionvalidateURL(url,list){leti=0;if(list){list.forEach(el=>{if(url===el){i=1;}});}if(i!==0)returnfalse;if(i===0)returntrue;};页面可视高度、页面可视宽度functionclientHeight(){letclientHeight=document.getElementById('root').clientHeight;letoffsetHeight=document.getElementById('root').offsetHeight;returnclientHeight||offsetHeight;};functionclientWidth(){letclientWidth=document.getElementById('root').clientWidth;letoffsetWidth=document.getElementById('root').offsetWidth;returnclientWidth||offsetWidth;};格式化金额functionformatMoney(val){varvalStr=String(Number(val).toFixed());varprefix_val,suffix_val,prefix_result,prefix_arr=null;varj,t,i=0;letnegativeFlag=false;//负数if(isNaN(Number(valStr))){returnval}if(Number(valStr)<0){negativeFlag=true;valStr=String(Math.abs(valStr))}if(valStr.length<3){valStr=prefix(valStr,3)}prefix_val=valStr.slice(0,-2)suffix_val=valStr.slice(-2)prefix_result=[]prefix_arr=prefix_val.split("")j=0t=3for(i=prefix_arr.length-1;i>=0;i--){j++if(j===t||i===0){prefix_result.unshift(prefix_arr.splice(i).join(""))j=0}}if(negativeFlag){return'-'+prefix_result.join(",")+"."+suffix_val}else{returnprefix_result.join(",")+"."+suffix_val}}formatMoney(1111111)
1、转换成大写：toUpperCase()2、转换成小写：toLowerCase()3、举例：1、vara="aBcD";a=a.toUpperCase();alert(a);提示出来的就是ABCD/2、vara="accd";a=a.toUpperCase();alert(a);提示出来的就是ACCD3、vara="aBcD";a=a.toLowerCase();alert(a);提示出来的就是abcd
关于JavaScript的JSON的一些小技巧1、格式化默认的字符串化器还会缩小JSON，看起来很难看constuser={name:'John',age:30,isAdmin:true,friends:['Bob','Jane'],address:{city:'NewYork',country:'USA'}};console.log(JSON.stringify(user));//=>{"name":"John","age":30,"isAdmin":true,"friends":["Bob","Jane"],"address":{"city":"NewYork","country":"USA"}}JSON.stringify也有一个内置的格式化程序！console.log(JSON.stringify(user,null,2));//{//"name":"John",//"age":30,//"isAdmin":true,//"friends":[//"Bob",//"Jane"//],//"address":{//"city":"NewYork",//"country":"USA"//}//}（如果你想知道那个null是什么，我们稍后会谈到）在此示例中，JSON格式为2个缩进空格。我们还可以指定用于缩进的自定义字符。console.log(JSON.stringify(user,null,'lol'));//{//lol"name":"John",//lol"age":30,//lol"isAdmin":true,//lol"friends":[//lollol"Bob",//lollol"Jane"//lol],//lol"address":{//lollol"city":"NewYork",//lollol"country":"USA"//lol}//}2、隐藏字符串化数据中的某些属性JSON.stringify第二个参数，这在很大程度上是未知的。它被称为replacer，它是一个函数或数组，用于决定哪些数据保留在输出中，哪些不保留。这是一个简单的示例，我们可以在其中隐藏password用户。constuser={name:'John',password:'12345',age:30};console.log(JSON.stringify(user,(key,value)=>{if(key==='password'){return;}returnvalue;}));这是输出：{"name":"John","age":30}我们可以进一步重构：functionstripKeys(...keys){return(key,value)=>{if(keys.includes(key)){return;}returnvalue;};}constuser={name:'John',password:'12345',age:30,gender:'male'};console.log(JSON.stringify(user,stripKeys('password','gender')))输出：{"name":"John","age":30}还可以传递一个数组来仅获取某些键：constuser={name:'John',password:'12345',age:30}console.log(JSON.stringify(user,['name','age']))输出相同的东西。这也适用于数组。如果你有一大堆蛋糕：constcakes=[{name:'ChocolateCake',recipe:['Mixflour,sugar,cocoapowder,bakingpowder,eggs,vanilla,andbutter','Mixinmilk','Bakeat350degreesfor1hour',//...],ingredients:['flour','sugar','cocoapowder','bakingpowder','eggs','vanilla','butter']},//tonsofthese];我们可以轻松地做同样的事情，并且替换器将应用于每个蛋糕：constcakes=[{name:'ChocolateCake',recipe:['Mixflour,sugar,cocoapowder,bakingpowder,eggs,vanilla,andbutter','Mixinmilk','Bakeat350degreesfor1hour',//...],ingredients:['flour','sugar','cocoapowder','bakingpowder','eggs','vanilla','butter']},//tonsofthese];console.log(JSON.stringify(cakes,['name']))我们得到这个：[{"name":"ChocolateCake"},{"name":"VanillaCake"},...]3、使用toJSON创建自定义输出格式如果一个对象实现了该toJSON函数，JSON.stringify将使用它来对数据进行字符串化。考虑一下：classFraction{constructor(n,d){this.numerator=n;this.denominator=d;}}console.log(JSON.stringify(newFraction(1,2)))这将输出{"numerator":1,"denominator":2}.但是如果我们想用一个字符串替换它1/2呢？进入toJSONclassFraction{constructor(n,d){this.numerator=n;this.denominator=d;}toJSON(){return`${this.numerator}/${this.denominator}`}}console.log(JSON.stringify(newFraction(1,2)))JSON.stringify尊重toJSON财产和产出"1/2"。4、恢复数据我们上面的分数示例效果很好。但是如果我们想恢复数据呢？当我们再次解析JSON时，如果分数能神奇地返回，那不是很酷吗？我们可以！进入复活者！classFraction{constructor(n,d){this.numerator=n;this.denominator=d;}toJSON(){return`${this.numerator}/${this.denominator}`}staticfromJSON(key,value){if(typeofvalue==='string'){constparts=value.split('/').map(Number);if(parts.length===2)returnnewFraction(parts);}returnvalue;}}constfraction=newFraction(1,2);conststringified=JSON.stringify(fraction);console.log(stringified);//"1/2"constrevived=JSON.parse(stringified,Fraction.fromJSON);console.log(revived);//Fraction{numerator:1,denominator:2}我们可以传递第二个参数JSON.parse来指定reviver函数。恢复器的工作是将字符串化数据“恢复”回其原始形式。在这里，我们传递了一个reviver，它是类的静态fromJSON属性Fraction。在这种情况下，reviver检查该值是否是一个有效的分数，如果是，它会创建一个新Fraction对象并返回它。有趣的事实：此功能用于内置的Date对象。尝试查找Date.prototype.toJSON这就是为什么它有效：console.log(JSON.stringify(newDate()))//=>'"2022-03-01T06:28:41.308Z"'要恢复日期，我们可以使用JSON.parse：functionreviveDate(key,value){constregex=/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{1,}|)Z$/;if(typeofvalue==="string"&®ex.test(value)){returnnewDate(value);}returnvalue;}console.log(JSON.parse('"2022-03-01T06:28:41.308Z"',reviveDate))//=>TueMar01202206:28:41GMT-0700(PacificDaylightTime)5、使用revivers隐藏数据与解析器一样，恢复器也可用于隐藏数据。它以相同的方式工作。这是一个例子：constuser=JSON.stringify({name:'John',password:'12345',age:30});console.log(JSON.parse(user,(key,value)=>{if(key==='password'){return;}returnvalue;}));这是输出：{name:'John',age:30}
for循环在平时开发中使用频率最高的，前后端数据交互时，常见的数据类型就是数组和对象，处理对象和数组时经常使用到for遍历，因此下班前花费几分钟彻底搞懂这5种for循环。它们分别为：forfor...infor...offorawait..offorEachmap一、各个for介绍1、forfor循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历数组、对象、字符串，示例：//遍历数组vararr=[1,2,3]for(vari=0;i<arr.length;i++){console.log(arr[i]);}//遍历对象varobj={job:'webworker',name:'前端代码女神'}for(vari=0,keys=Object.keys(obj);i<keys.length;i++){console.log(obj[keys[i]])}//遍历字符串letstr='abc'for(vari=0;i<str.length;i++){console.log(str[i])}2、for...infor...in是在ES5中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。//遍历数组vararr=[1,2,3]for(variinarr){console.log(i);//012console.log(arr[i]);//123}//遍历对象varobj={job:'webworker',name:'前端代码女神'}for(varkeyinobj){console.log(key)//jobnameconsole.log(obj[key])//webworker前端代码女神}//遍历字符串letstr='abc'for(variinstr){console.log(i)//012console.log(str[i])//abc}3、for...offor...of语句在可迭代对象(包括Array、Map、Set、String、TypedArray、arguments对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。//迭代Arrayvararr=[1,2,3]for(varvalofarr){console.log(val);//123}//迭代Stringletstr='abc'for(varvalofstr){console.log(val)//abc}//迭代TypedArray-一个类型化数组，描述了一个底层的二进制数据缓冲区！letiterable=newUint8Array([0x00,0xff]);for(letvalueofiterable){console.log(value);//0255}//迭代Map-对象保存键值对，能够记住键的原始插入顺序letmap=newMap([['a',1],['b',2]])for(letkeyofmap){console.log('key',key)//['a',1]['b',2]}for(let[key,value]ofmap){console.log(key)//abconsole.log(value)//12}//迭代Setletset=newSet([1,2,3,2,1])for(letvalofset){console.log(val)//123}4、forawait...of创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的String、Array，类数组对象(arguments或nodeList)，TypedArray,Map,Set和用户定义的异步/同步迭代器。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。类似于await运算符一样，该语句只能在一个asyncfunction内部使用。asyncfunction*asyncGenerator(){vari=0;while(i<3){yieldi++;}}(asyncfunction(){forawait(numofasyncGenerator()){console.log(num);//012}})();5、forEachforEach是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)，一般认为是普通for循环的加强版。//遍历数组vararr=[1,2,3]arr.forEach((item,index)=>{console.log(index);//012console.log(item);//123})//遍历对象varobj={job:'webworker',name:'前端代码女神'}varkeys=Object.keys(obj)keys.forEach((key)=>{console.log(key)//jobnameconsole.log(obj[key])//webworker前端代码女神})6、map遍历时可以返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。//遍历数组vararr=[1,2,3]letnewArr=arr.map((item)=>item*2)console.log(newArr);//[2,4,6]二、多个for之间区别1、使用场景差异for循环是最早最原始的循环遍历语句，for内部定义一个变量，按照条件进行循环遍历，通常是数组的长度，当超过长度时就停止循环，一般遍历的都是数组或类数组。遍历对象时，由于对象没有长度，所以使用Object.keys()获取对象的所有属性，以数组形式返回。for/in主要是用来遍历对象上的可枚举属性，包括原型对象上的属性，按任意顺序进行遍历，遍历对象时获取到的是属性的键值，遍历的是数组，数组的下标当做键值。for/of用于遍历可迭代对象的数据，包括Array、Map、Set、String、TypedArray、arguments对象等等。forawait...of用于遍历异步可迭代对象，该语句只能在一个asyncfunction内部使用。forEach是for的加升级版，使用更简单，携带参数更多，但本质还是数组的循环，每个元素都执行一次回调，不会改变原数组。map是给原数组每个元素都执行一次回调，返回一个新数组，不会改变原数组。2、功能差异forEach、map不支持跳出循环，其他不支持。forawait...of能够支持异步操作，其他的不支持。对于纯对象的遍历，for...in枚举更方便。对于数组遍历，如果不需要索引，可以直接使用for...of获取值，还可支持break或return;如果还需要索引，使用forEach更适合，但不支持return。如果是一个数组映射成另一个数组，使用map最合适。3、性能差异在测试环境、测试数据条件一致的情况下，性能排序为：for>forof>forEach>map>forin。for因为没有额外的函数调用和上下文，所以性能是最快的。for...of具有iterator接口的数据结构，可以使用它来迭代成员，直接读取键值。forEach是for的语法糖，还有许多的参数和上下文，因此会慢一些。map因为它返回的是一个等长的全新数组，数组创建和赋值产生的性能开销较大。for...in性能最差，因为需要列举对象的所有属性，有转化过程，开销比较大。三、for的使用在项目开发中，我们应该根据实际需求，去选择一个合适的for遍历。以下是一些使用建议：如果需要把数据映射成另外一个数组，如变成对应布尔值，推荐使用map，不会修改原数组，使用语法简单。数组遍历时，可以使用for、forEach或for...of。遍历的是纯对象时，推荐使用for...in。如果是需要对迭代器遍历，推荐使用for...of。如果是在数组中筛选符合条件的数组，使用fillter。
JavaScript是目前最流行的编程语言之一，正如大多数人所说：“如果你想学一门编程语言，请学JavaScript。”FreeCodeCamp的创始人QuincyLarson在最近的一次采访中被问到哪种语言开发人员应该首先学习。他回答：“JavaScript。”“软件正在吞噬世界，JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位，而且没人知道最终会取代它的是什么。"如果您没有充分的理由学习一种新语言（例如您的工作要求您维护非JavaScript代码库），那么我的建议是着重于提高JavaScript的水平。”听我说这么多，你是不是很激动呢。这里有127个常用的JS代码片段，方便你学习和使用。1、all如果数组所有元素满足函数条件，则返回true。调用时，如果省略第二个参数，则默认传递布尔值。constall=(arr,fn=Boolean)=>arr.every(fn);all([4,2,3],x=>x>1);//trueall([1,2,3]);//true2、allEqual判断数组中的元素是否都相等constallEqual=arr=>arr.every(val=>val===arr[0]);allEqual([1,2,3,4,5,6]);//falseallEqual([1,1,1,1]);//true3、approximatelyEqual此代码示例检查两个数字是否近似相等，差异值可以通过传参的形式进行设置constapproximatelyEqual=(v1,v2,epsilon=0.001)=>Math.abs(v1-v2)<epsilon;approximatelyEqual(Math.PI/2.0,1.5708);//true4、arrayToCSV此段代码将没有逗号或双引号的元素转换成带有逗号分隔符的字符串即CSV格式识别的形式。constarrayToCSV=(arr,delimiter=',')=>arr.map(v=>v.map(x=>`"${x}"`).join(delimiter)).join('\n');arrayToCSV([['a','b'],['c','d']]);//'"a","b"\n"c","d"'arrayToCSV([['a','b'],['c','d']],';');//'"a";"b"\n"c";"d"'5、arrayToHtmlList此段代码将数组元素转换成<li>标记，并将此元素添加至给定的ID元素标记内。constarrayToHtmlList=(arr,listID)=>(el=>((el=document.querySelector('#'+listID)),(el.innerHTML+=arr.map(item=>`<li>${item}</li>`).join(''))))();arrayToHtmlList(['item1','item2'],'myListID');6、attempt此段代码执行一个函数，将剩余的参数传回函数当参数，返回相应的结果，并能捕获异常。constattempt=(fn,...args)=>{try{returnfn(...args);}catch(e){returneinstanceofError?e:newError(e);}};varelements=attempt(function(selector){returndocument.querySelectorAll(selector);},'>_>');if(elementsinstanceofError)elements=[];//elements=[]7、average此段代码返回两个或多个数的平均数。constaverage=(...nums)=>nums.reduce((acc,val)=>acc+val,0)/nums.length;average(...[1,2,3]);//2average(1,2,3);//28、averageBy一个map()函数和reduce()函数结合的例子，此函数先通过map()函数将对象转换成数组，然后在调用reduce()函数进行累加，然后根据数组长度返回平均值。constaverageBy=(arr,fn)=>arr.map(typeoffn==='function'?fn:val=>val[fn]).reduce((acc,val)=>acc+val,0)/arr.length;averageBy([{n:4},{n:2},{n:8},{n:6}],o=>o.n);//5averageBy([{n:4},{n:2},{n:8},{n:6}],'n');//59、bifurcate此函数包含两个参数，类型都为数组，依据第二个参数的真假条件，将一个参数的数组进行分组，条件为真的放入第一个数组，其它的放入第二个数组。这里运用了Array.prototype.reduce()和Array.prototype.push()相结合的形式。constbifurcate=(arr,filter)=>arr.reduce((acc,val,i)=>(acc[filter[i]?0:1].push(val),acc),[[],[]]);bifurcate(['beep','boop','foo','bar'],[true,true,false,true]);//[['beep','boop','bar'],['foo']]10、bifurcateBy此段代码将数组按照指定的函数逻辑进行分组，满足函数条件的逻辑为真，放入第一个数组中，其它不满足的放入第二个数组。这里运用了Array.prototype.reduce()和Array.prototype.push()相结合的形式，基于函数过滤逻辑，通过Array.prototype.push()函数将其添加到数组中。constbifurcateBy=(arr,fn)=>arr.reduce((acc,val,i)=>(acc[fn(val,i)?0:1].push(val),acc),[[],[]]);bifurcateBy(['beep','boop','foo','bar'],x=>x[0]==='b');//[['beep','boop','bar'],['foo']]11、bottomVisible用于检测页面是否滚动到页面底部。constbottomVisible=()=>document.documentElement.clientHeight+window.scrollY>=(document.documentElement.scrollHeight||document.documentElement.clientHeight);bottomVisible();//true12、byteSize此代码返回字符串的字节长度。这里用到了Blob对象，Blob（BinaryLargeObject）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的API（比如File对象），都是建立在Blob对象基础上的，继承了它的属性和方法。生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。constbyteSize=str=>newBlob([str]).size;byteSize('????');//4byteSize('HelloWorld');//1113、capitalize将字符串的首字母转成大写,这里主要运用到了ES6的展开语法在数组中的运用。constcapitalize=([first,...rest])=>first.toUpperCase()+rest.join('');capitalize('fooBar');//'FooBar'capitalize('fooBar',true);//'FooBar'14、capitalizeEveryWord将一个句子中每个单词首字母转换成大写字母，这里中要运用了正则表达式进行替换。constcapitalizeEveryWord=str=>str.replace(/\b[a-z]/g,char=>char.toUpperCase());capitalizeEveryWord('helloworld!');//'HelloWorld!'15、castArray此段代码将非数值的值转换成数组对象。constcastArray=val=>(Array.isArray(val)?val:[val]);castArray('foo');//['foo']castArray([1]);//[1]16、compact将数组中移除值为false的内容。constcompact=arr=>arr.filter(Boolean);compact([0,1,false,2,'',3,'a','e'*23,NaN,'s',34]);//[1,2,3,'a','s',34]17、countOccurrences统计数组中某个值出现的次数constcountOccurrences=(arr,val)=>arr.reduce((a,v)=>(v===val?a+1:a),0);countOccurrences([1,1,2,1,2,3],1);//318、CreateDirectory此代码段使用existSync()检查目录是否存在，然后使用mkdirSync()创建目录（如果不存在）。constfs=require('fs');constcreateDirIfNotExists=dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);createDirIfNotExists('test');//createsthedirectory'test',ifitdoesn'texist19、currentURL返回当前访问的URL地址。constcurrentURL=()=>window.location.href;currentURL();//'https://www.zhansanjie.com/'20、dayOfYear返回当前是今年的第几天constdayOfYear=date=>Math.floor((date-newDate(date.getFullYear(),0,0))/1000/60/60/24);dayOfYear(newDate());//27221、decapitalize将字符串的首字母转换成小写字母constdecapitalize=([first,...rest])=>first.toLowerCase()+rest.join('')decapitalize('FooBar');//'fooBar'小节今天的内容就和大家分享到这里，感谢你的阅读，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享剩余的代码片段，欢迎持续关注。
分享了一些常用JavaScript代码，有：1.手机类型判断、2.字符串长度、3.获取url中的参数、4.js绑定事件、5.当前浏览器JS的版本、6.全选/全不选、7.移除事件、8.回车提交、9.ajax提交等。经常使用的JS方法，今天记下，以便以后查询手机类型判断varBrowserInfo={userAgent:navigator.userAgent.toLowerCase()isAndroid:Boolean(navigator.userAgent.match(/android/ig)),isIphone:Boolean(navigator.userAgent.match(/iphone|ipod/ig)),isIpad:Boolean(navigator.userAgent.match(/ipad/ig)),isWeixin:Boolean(navigator.userAgent.match(/MicroMessenger/ig)),}返回字符串长度，汉子计数为2functionstrLength(str){vara=0;for(vari=0;i<str.length;i++){if(str.charCodeAt(i)>255)a+=2;//按照预期计数增加2elsea++;}returna;}获取url中的参数functionGetQueryStringRegExp(name,url){varreg=newRegExp("(^|\\?|&)"+name+"=([^&]*)(\\s|&|$)","i");if(reg.test(url))returndecodeURIComponent(RegExp.$2.replace(/\+/g,""));return"";}js绑定事件适用于任何浏览器的元素绑定functioneventBind(obj,eventType,callBack){if(obj.addEventListener){obj.addEventListener(eventType,callBack,false);}elseif(window.attachEvent){obj.attachEvent('on'+eventType,callBack);}else{obj['on'+eventType]=callBack;}};eventBind(document,'click',bodyClick);获得当前浏览器JS的版本functiongetjsversion(){varn=navigator;varu=n.userAgent;varapn=n.appName;varv=n.appVersion;varie=v.indexOf('MSIE');if(ie>0){apv=parseInt(i=v.substring(ie+5));if(apv>3){apv=parseFloat(i);}}else{apv=parseFloat(v);}varisie=(apn=='MicrosoftInternetExplorer');varismac=(u.indexOf('Mac')>=0);varjavascriptVersion="1.0";if(String&&String.prototype){javascriptVersion='1.1';if(javascriptVersion.match){javascriptVersion='1.2';vartm=newDate;if(tm.setUTCDate){javascriptVersion='1.3';if(isie&&ismac&&apv>=5)javascriptVersion='1.4';varpn=0;if(pn.toPrecision){javascriptVersion='1.5';a=newArray;if(a.forEach){javascriptVersion='1.6';i=0;o=newObject;tcf=newFunction('o','vare,i=0;try{i=newIterator(o)}catch(e){}returni');i=tcf(o);if(i&&i.next){javascriptVersion='1.7';}}}}}}returnjavascriptVersion;}获取当前点击事件的Object对象functiongetEvent(){if(document.all){returnwindow.event;//如果是ie}func=getEvent.caller;while(func!=null){vararg0=func.arguments[0];if(arg0){if((arg0.constructor==Event||arg0.constructor==MouseEvent)||(typeof(arg0)=="object"&&arg0.preventDefault&&arg0.stopPropagation)){returnarg0;}}func=func.caller;}returnnull;};字符串截取方法getCharactersLen:function(charStr,cutCount){if(charStr==null||charStr=='')return'';vartotalCount=0;varnewStr='';for(vari=0;i<charStr.length;i++){varc=charStr.charCodeAt(i);if(c<255&&c>0){totalCount++;}else{totalCount+=2;}if(totalCount>=cutCount){newStr+=charStr.charAt(i);break;}else{newStr+=charStr.charAt(i);}}returnnewStr;}JS弹出新窗口全屏vartmp=window.open("about:blank","","fullscreen=1")tmp.moveTo(0,0);tmp.resizeTo(screen.width+20,screen.height);tmp.focus();tmp.location.href='http://www.che168.com/pinggu/eva_'+msgResult.message[0]+'.html';varconfig_="left=0,top=0,width="+(window.screen.Width)+",height="+(window.screen.Height);window.open('http://www.che168.com/pinggu/eva_'+msgResult.message[0]+'.html',"winHanle",config_);//模拟form提交打开新页面varf=document.createElement("form");f.setAttribute('action','http://www.che168.com/pinggu/eva_'+msgResult.message[0]+'.html');f.target='_blank';document.body.appendChild(f);f.submit();全选/全不选functionselectAll(objSelect){if(objSelect.checked==true){$("input[name='chkId']").attr("checked",true);$("input[name='chkAll']").attr("checked",true);}elseif(objSelect.checked==false){$("input[name='chkId']").attr("checked",false);$("input[name='chkAll']").attr("checked",false);}}js判断浏览器判断是否是IE浏览器if(document.all){alert(”IE浏览器”);}else{alert(”非IE浏览器”);}if(!!window.ActiveXObject){alert(”IE浏览器”);}else{alert(”非IE浏览器”);}判断是IE几varisIE=!!window.ActiveXObject;varisIE6=isIE&&!window.XMLHttpRequest;varisIE8=isIE&&!!document.documentMode;varisIE7=isIE&&!isIE6&&!isIE8;if(isIE){if(isIE6){alert(”ie6″);}elseif(isIE8){alert(”ie8″);}elseif(isIE7){alert(”ie7″);}}判断浏览器functiongetOs(){if(navigator.userAgent.indexOf("MSIE8.0")>0){return"MSIE8";}elseif(navigator.userAgent.indexOf("MSIE6.0")>0){return"MSIE6";}elseif(navigator.userAgent.indexOf("MSIE7.0")>0){return"MSIE7";}elseif(isFirefox=navigator.userAgent.indexOf("Firefox")>0){return"Firefox";}if(navigator.userAgent.indexOf("Chrome")>0){return"Chrome";}else{return"Other";}}JS判断两个日期大小适合2012-09-09与2012-9-9两种格式的对比//得到日期值并转化成日期格式，replace(/\-/g,"\/")是根据验证表达式把日期转化成长日期格式，这样再进行判断就好判断了functionValidateDate(){varbeginDate=$("#t_datestart").val();varendDate=$("#t_dateend").val();if(beginDate.length>0&&endDate.length>0){varsDate=newDate(beginDate.replace(/\-/g,"\/"));vareDate=newDate(endDate.replace(/\-/g,"\/"));if(sDate>eDate){alert('开始日期要小于结束日期');returnfalse;}}}移除事件this.moveBind=function(objId,eventType,callBack){varobj=document.getElementById(objId);if(obj.removeEventListener){obj.removeEventListener(eventType,callBack,false);}elseif(window.detachEvent){obj.detachEvent('on'+eventType,callBack);}else{obj['on'+eventType]=null;}}回车提交$("id").onkeypress=function(event){event=(event)?event:((window.event)?window.event:"")keyCode=event.keyCode?event.keyCode:(event.which?event.which:event.charCode);if(keyCode==13){$("SubmitLogin").onclick();}}JS执行计时器timeStart=newDate().getTime();timesEnd=newDate().getTime();document.getElementById("time").innerHTML=timesEnd-timeStart;JS写CookiefunctionsetCookie(name,value,expires,path,domain){if(!expires)expires=-1;if(!path)path="/";vard=""+name+"="+value;vare;if(expires<0){e="";}elseif(expires==0){varf=newDate(1970,1,1);e=";expires="+f.toUTCString();}else{varnow=newDate();varf=newDate(now.getTime()+expires*1000);e=";expires="+f.toUTCString();}vardm;if(!domain){dm="";}else{dm=";domain="+domain;}document.cookie=name+"="+value+";path="+path+e+dm;};JS读CookiefunctionreadCookie(name){varnameEQ=name+"=";varca=document.cookie.split(';');for(vari=0;i<ca.length;i++){varc=ca[i];while(c.charAt(0)=='')c=c.substring(1,c.length);if(c.indexOf(nameEQ)==0){returndecodeURIComponent(c.substring(nameEQ.length,c.length))}}returnnull}Ajax请求C.ajax=function(args){varself=this;this.options={type:'GET',async:true,contentType:'application/x-www-form-urlencoded',url:'about:blank',data:null,success:{},error:{}};this.getXmlHttp=function(){varxmlHttp;try{xmlhttp=newXMLHttpRequest();}catch(e){try{xmlhttp=newActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}}if(!xmlhttp){alert('您的浏览器不支持AJAX');returnfalse;}returnxmlhttp;};this.send=function(){C.each(self.options,function(key,val){self.options[key]=(args[key]==null)?val:args[key];});varxmlHttp=newself.getXmlHttp();if(self.options.type.toUpperCase()=='GET'){xmlHttp.open(self.options.type,self.options.url+(self.options.data==null?"":((/[?]$/.test(self.options.url)?'&':'?')+self.options.data)),self.options.async);}else{xmlHttp.open(self.options.type,self.options.url,self.options.async);xmlHttp.setRequestHeader('Content-Length',self.options.data.length);}xmlHttp.setRequestHeader('Content-Type',self.options.contentType);xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){if(xmlHttp.status==200||xmlHttp.status==0){if(typeofself.options.success=='function')self.options.success(xmlHttp.responseText);xmlHttp=null;}else{if(typeofself.options.error=='function')self.options.error('ServerStatus:'+xmlHttp.status);}}};xmlHttp.send(self.options.type.toUpperCase()=='POST'?self.options.data.toString():null);};this.send();};JSStringBuilder用法functionStringBuilder(){this.strings=newArray;};StringBuilder.prototype.append=function(str){this.strings.push(str);};StringBuilder.prototype.toString=function(){returnthis.strings.join('');};JS加载到顶部LoadJS functionloadJS(url,fn){varss=document.getElementsByName('script'),loaded=false;for(vari=0,len=ss.length;i<len;i++){if(ss[i].src&&ss[i].getAttribute('src')==url){loaded=true;break;}}if(loaded){if(fn&&typeoffn!='undefined'&&fninstanceofFunction)fn();returnfalse;}vars=document.createElement('script'),b=false;s.setAttribute('type','text/javascript');s.setAttribute('src',url);s.onload=s.onreadystatechange=function(){if(!b&&(!this.readyState||this.readyState=='loaded'||this.readyState=='complete')){b=true;if(fn&&typeoffn!='undefined'&&fninstanceofFunction)fn();}};document.getElementsByTagName('head')[0].appendChild(s);},bind:function(objId,eventType,callBack){//适用于任何浏览器的绑定varobj=document.getElementById(objId);if(obj.addEventListener){obj.addEventListener(eventType,callBack,false);}elseif(window.attachEvent){obj.attachEvent('on'+eventType,callBack);}else{obj['on'+eventType]=callBack;}}functionJSLoad(args){s=document.createElement("script");s.setAttribute("type","text/javascript");s.setAttribute("src",args.url);s.onload=s.onreadystatechange=function(){if(!s.readyState||s.readyState=="loaded"||s.readyState=="complete"){if(typeofargs.callback=="function")args.callback(this,args);s.onload=s.onreadystatechange=null;try{s.parentNode&&s.parentNode.removeChild(s);}catch(e){}}};document.getElementsByTagName("head")[0].appendChild(s);}清空LoadJS加载到顶部的js引用functionClearHeadJs(src){varjs=document.getElementsByTagName('head')[0].children;varobj=null;for(vari=0;i<js.length;i++){if(js[i].tagName.toLowerCase()=="script"&&js[i].attributes['src'].value.indexOf(src)>0){obj=js[i];}}document.getElementsByTagName('head')[0].removeChild(obj);};JS替换非法字符主要用在密码验证上出现的特殊字符functionURLencode(sStr){returnescape(sStr).replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27').replace(/\//g,'%2F');};按Ctrl+Entert直接提交表单document.body.onkeydown=function(evt){evt=evt?evt:(window.event?window.event:null);if(13==evt.keyCode&&evt.ctrlKey){evt.returnValue=false;evt.cancel=true;PostData();}};获取当前时间functionGetCurrentDate(){vard=newDate();vary=d.getYear()+1900;month=add_zero(d.getMonth()+1),days=add_zero(d.getDate()),hours=add_zero(d.getHours());minutes=add_zero(d.getMinutes()),seconds=add_zero(d.getSeconds());varstr=y+'-'+month+'-'+days+''+hours+':'+minutes+':'+seconds;returnstr;};functionadd_zero(temp){if(temp<10)return"0"+temp;elsereturntemp;}Js去掉空格方法String.prototype.Trim=function(){returnthis.replace(/(^\s*)|(\s*$)/g,"");}String.prototype.LTrim=function(){returnthis.replace(/(^\s*)/g,"");}String.prototype.RTrim=function(){returnthis.replace(/(\s*$)/g,"");} js动态移除head里的js引用this.ClearHeadJs=function(src){varjs=document.getElementsByTagName('head')[0].children;varobj=null;for(vari=0;i<js.length;i++){if(js[i].tagName.toLowerCase()=="script"&&js[i].attributes['src'].value.indexOf(src)>0){obj=js[i];}}document.getElementsByTagName('head')[0].removeChild(obj);};整个UL点击事件加在UL里的onclick里functionCreateFrom(url,params){varf=document.createElement("form");f.setAttribute("action",url);for(vari=0;i<params.length;i++){varinput=document.createElement("input");input.setAttribute("type","hidden");input.setAttribute("name",params[i].paramName);input.setAttribute("value",params[i].paramValue);f.appendChild(input);}f.target="_blank";document.body.appendChild(f);f.submit();};判断浏览器使用的是哪个JS版本<scriptlanguage="javascript">varjsversion=1.0;</script><scriptlanguage="javascript1.1">jsversion=1.1;</script><scriptlanguage="javascript1.2">jsversion=1.2;</script><scriptlanguage="javascript1.3">jsversion=1.3;</script><scriptlanguage="javascript1.4">jsversion=1.4;</script><scriptlanguage="javascript1.5">jsversion=1.5;</script><scriptlanguage="javascript1.6">jsversion=1.6;</script><scriptlanguage="javascript1.7">jsversion=1.7;</script><scriptlanguage="javascript1.8">jsversion=1.8;</script><scriptlanguage="javascript1.9">jsversion=1.9;</script><scriptlanguage="javascript2.0">jsversion=2.0;</script>alert(jsversion);
页面跳转：window.location.href('地址')window.open('地址','_self')打开新窗口：window.open('地址','_blank')只显示地址栏：window.open('地址','title','location=1,height=200,width=500')只显示状态栏：window.open('地址','title','status=1')只显示工具栏：window.open('地址','title','toolbar=1')只显示菜单栏：window.open('地址','title','menubar=1')一个不少：window.open('地址','title)光棍但可以调整大小：window.open('地址','title','resizable=1')去掉所有空格：Object.replace(/^\s+|\s+$/g,"")屏蔽鼠标：οncοntextmenu="window.event.returnValue=false"取消选取：onselectstart="returnfalse"不允许粘贴：οnpaste="returnfalse"得到上一页来源：document.referrer回车转换Tab键：if(window.event.keyCode==13){event.keyCode=9}返回上一页：history.go(-1)重新加载页面：window.location.reload()子页面中调父页面中的方法：window.opener.function()子页面中访问父页面中名为name的控件值：window.opener.name.value子页面中访问父页面中表单中名为name的控件值：window.opener.formName.nam.value得到控件的绝对位置：functiongetIE(){vart=e.offsetTop;varl=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}alert("top="+t+"andleft="+l);}光标停在文本框文字的最后：functiontoEnd(){vare=event.srcElement;varr=e.createTextRange();r.moveStart("character",e.value.length);r.collapse(true);r.select();}<inputtype="text"value="end">屏蔽功能键(Shift,Alt,Ctrl) functiontestKey(){if(event.shiftKey){ //altKey;ctrlKeyalert("Shift");}}不要滚动条：<bodyscroll="no">在子窗体中刷新父窗体：window.opener.location.reload()得到窗体大小：document.body.clientWidth;document.body.clientHeight;屏蔽脚本错误：functionkillErrors(){returntrue;}window.οnerrοr=killErrors();判断是否是字符：if(/[^/x00-/xff]/g.test(str)){alert("有汉字");}else{alert("全是字符");}得到div的height值：div.offsetHeight(带滚动条的完整高度)div.clientHeight(内容的高度)
事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture();event.srcElement.releaseCapture();事件按键event.keyCodeevent.shiftKeyevent.altKeyevent.ctrlKey事件返回值event.returnValue鼠标位置event.xevent.y窗体活动元素document.activeElement绑定事件document.captureEvents(Event.KEYDOWN);访问窗体元素document.all("txt").focus();document.all("txt").select();窗体命令document.execCommand窗体COOKIEdocument.cookie菜单事件document.oncontextmenu创建元素document.createElement("SPAN");根据鼠标获得元素：document.elementFromPoint(event.x,event.y).tagName=="TDdocument.elementFromPoint(event.x,event.y).appendChild(ms)窗体图片document.images[索引]窗体事件绑定document.οnmοusedοwn=scrollwindow;元素document.窗体.elements[索引]对象绑定事件document.all.xxx.detachEvent('onclick',a);插件数目navigator.plugins取变量类型typeof($js_libpath)=="undefined"下拉框下拉框.options[索引]下拉框.options.length查找对象document.getElementsByName("r1");document.getElementById(id);定时timer=setInterval('scrollwindow()',delay);clearInterval(timer);UNCODE编码escape(),unescape父对象obj.parentElement(dhtml)obj.parentNode(dom)交换表的行TableID.moveRow(2,1)替换CSSdocument.all.csss.href="a.css";自动刷新<metaHTTP-EQUIV="refresh"C>快速转到位置obj.scrollIntoView(true)锚<aname="first"><ahref="#first">anchors</a>网页传递参数location.search();可编辑obj.contenteditable=true执行菜单命令obj.execCommand获得style内容obj.style.cssTextHTML标签document.documentElement.innerHTML第一个style标签document.styleSheets[0]style标签里的第一个样式document.styleSheets[0].rules[0]防止点击空链接时，页面往往重置到页首端。<ahref="javascript:function()">word</a>上一网页源asp:request.servervariables("HTTP_REFERER")javascript:document.referrer释放内存CollectGarbage();禁止右键document.oncontextmenu=function(){returnfalse;}禁止保存<noscript><iframesrc="*.htm"></iframe></noscript>禁止选取<bodyShortcutIcon"href="favicon.ico">favicon.ico名字最好不变16*16的16色,放虚拟目录根目录下获得时间所代表的微秒varn1=newDate("2004-10-10".replace(/-/g,"\/")).getTime()窗口是否关闭win.closed获取选中内容document.selection.createRange().duplicate().text自动完成功能<inputtype=textautocomplete=on>打开该功能<inputtype=textautocomplete=off>关闭该功能关闭窗口window.close();返回history.back();无关闭按钮IEwindow.open("aa.htm","meizz","fullscreen=7");
中国互联网举报中心