前言什么是技巧，指在文学、工艺、体育等方面的巧妙技巧。Code作为现代先进技术，促进了人类科技的发展，同时支持人类文化的进步就像文字一样。每写一篇好文章，都会用到很多写作技巧。强调、夸张、悬念、伏笔、呼应、伏笔、联想、想象、抑扬顿挫、点面结合、动静结合、叙事结合、情景交融、前后呼应、衬托对比，白描与详图，隐喻与象征，借古讽今，死与章显志，承前启后，开门见山，动静相映，虚实结合，写实写实还有虚写、寓意、咏物、抒情等等，这些应该是我们从小接触到的写作技巧。作为程序员，编写代码也需要大量的写作技巧。好的代码可以让人耳目一新，通俗易懂，舒服自然，同时给自己带来成就感（哈哈，这就是重点）。因此，我整理了近三年自己使用过的一些JS开发技巧，希望能让你写出清爽、易懂、舒服、自然的代码。下面的demo都是用ES6版本写的。有了Webpack和Babel的加持，难道你写ES6还不行吗？ES3、ES5又如何，更不用说弱智的IE浏览器了，快被淘汰了。微软已经宣布放弃使用自研浏览器内核，转而使用谷歌开源的Chromium内核。既然写文章有这么多的写作技巧，我也要把JS开发技巧梳理一下，给它们起个好记的名字。StringSkill:StringSkillNumberSkill:NumericalSkillBooleanSkill:BooleanValueSkillArraySkill:ArraySkillObjectSkill:ObjectSkillFunctionSkill:FunctionSkillDOMSkill:DOMSkill备注代码仅做演示，不对ES6进行讲解语法详解有什么不懂的语法题可以参考阮一峰老师的《ES6标准入门》《ES6标准入门》一直更新，建议收藏，平时查一下StringSkill比较时间和个位数格式需要加上0consttime1="2019-02-1421:00:00";consttime2="2019-05-0109:00:00";constovertime=time1>time2;//overtime=>false格式moneyconstThousandNum=num=>num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");constmoney=ThousandNum(20190214);//money=>"20,190,214"生成一个随机IDconstRandomId=len=>Math.random().toString(36).substr(3,len);constid=RandomId(10);//id=>"jg7zpgiqva"生成随机HEX颜色值constRandomColor=()=>"#"+Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,"0");constcolor=RandomColor();//color=>"#f03665"生成星级constStartScore=rate=>"★★★★★☆☆☆☆☆".slice(5-rate,10-rate);conststart=StartScore(3);//start=>"★★★"操作URL查询参数constparams=newURLSearchParams(location.search.replace(/\?/ig,""));//location.search="?name=young&sex=male"params.has("young");//trueparams.get("sex");//"male"Number技能轮次替换正数Math.floor(),替换负数Math.ceil()constnum1=~~1.69;constnum2=1.69|0;constnum3=1.69>>0;//num1num2num3=>111零填充constFillZero=(num,len)=>num.toString().padStart(len,"0");constnum=FillZero(169,5);//num=>"00169"转换值只对null,"",false,和数字字符串有效constnum1=+null;constnum2=+"";constnum3=+false;constnum4=+"169";//num1num2num3num4=>000169时间戳consttimestamp=+newDate("2019-02-14");//时间戳=>1550102400000精确十进制constRoundNum=(num,decimal)=>Math.round(num*10**decimal)/10**decimal;constnum=RoundNum(1.69,1);//num=>1.7判断奇偶性constOddEven=num=>!!(num&1)?"odd":"even";constnum=OddEven(2);//num=>"even"取最小值和最大值constarr=[0,1,2];constmin=Math.min(...arr);constmax=Math.max(...arr);//minmax=>02生成范围随机数constRandomNum=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;constnum=RandomNum(1,10);BooleanSkill短路运算符consta=d&&1;//满足条件赋值：false运算，从左开始依次向右判断，如果遇到假值，返回一个假值，后面不再执行，否则返回最后一个真值constb=d||1;//默认赋值：真操作，从左判断向右，遇到true值返回true值，后面不执行，否则返回最后一个false值constc=!d;//假赋值：如果单个表达式转为true，则返回false，否则返回true判断数据类型。类型可以确定：undefined,null,string,number,boolean,array,object,symbol,date,regexp,function,asyncfunction,arguments,set,map,weakset,weakmapfunctionDataType(tgt,type){constdataType=Object.prototype.toString.call(tgt).replace(/\[object/g,"").replace(/\]/g,"").toLowerCase();returntype?dataType===type:dataType;}DataType("young");//"string"DataType(20190214);//"number"DataType(true);//"boolean"DataType([],"array");//trueDataType({},"array");//false是一个空数组constarr=[];constflag=Array.isArray(arr)&&!arr.length;//flag=>true是一个空对象constobj={};constflag=DataType(obj,"object")&&!Object.keys(obj).length;//flag=>true满足条件时执行constflagA=true;//条件AconstflagB=false;//条件B(flagA||flagB)&&Func();//满足A或B时执行(flagA||!flagB)&&Func();//当A或B都不满足时ExecuteflagA&&flagB&&Func();//当A和B都满足时执行flagA&&!flagB&&Func(),false,NaN!flag&&Func();当数组不为空时，执行constarr=[0,1,2];arr.length&&Func();当对象不为空时，执行constobj={a:0,b:1,c:2};Object.keys(obj).length&&Func();函数退出而不是条件分支退出if(flag){Func();returnfalse;}//改为if(flag){returnFunc();}switch/caseuseIntervalconsstage=26;switch(true){caseisNaN(age):console.log("notanumber");break;case(age<18):console.log("underage");break;case(age>=18):console.log("adult");break;default:console.log("pleasesetyourage");break;}数组技能克隆数组const_arr=[0,1,2];constarr=[..._arr];//arr=>[0,1,2]组合数组constarr1=[0,1,2];constarr2=[3,4,5];constarr=[...arr1,...arr2];//arr=>[0,1,2,3,4,5];去重数组constarr=[...newSet([0,1,1,null,null])];//arr=>[0,1,null]混淆数组constarr=[0,1,2,3,4,5].slice().sort(()=>Math.random()-.5);//arr=>[3,4,0,5,1,2]清空数组constarr=[0,1,2];arr.length=0;//arr=>[]截断数组constarr=[0,1,2];arr.length=2;//arr=>[0,1]交换赋值leta=0;letb=1;[a,b]=[b,a];//ab=>10过滤空值nullvalue:undefined,null,"",0,false,NaNconstarr=[undefined,null,"",0,false,NaN,1,2].filter(Boolean);//arr=>[1,2]异步累加asyncfunctionFunc(deps){returneps.reduce(async(t,v)=>{constdep=awaitt;constversion=awaitTodo(v);dep[v]=version;returndep;},Promise.resolve({}));}constresult=awaitFunc();//需要使用数组头插入成员letarr=[1,2]underasyncsurround;//选择以下方法之一arr.unshift(0);arr=[0].concat(arr);arr=[0,...arr];//arr=>[0,1,2]在数组末尾插入成员letarr=[0,1];//选择以下方法之一arr.push(2);arr.concat(2);arr[arr.length]=2;arr=[...arr,2];//arr=>[0,1,2]统计数组成员个数constarr=[0,1,1,2,2,2];常量计数=arr.reduce((t,c)=>{t[c]=t[c]?++t[c]:1;return;},{});//计数=>{0:1,1:2,2:3}解构数组成员嵌套constarr=[0,1,[2,3,[4,5]]];const[a,b,[c,d,[e,f]]]=arr;//abcdef=>012345解构数组成员aliasconstarr=[0,1,2];const{0:a,1:b,2:c}=arr;//abc=>012解构数组成员Defaultvalueconstarr=[0,1,2];const[a,b,c=3,d=4]=arr;//abcd=>0124得到随机数组成员constarr=[0,1,2,3,4,5];constrandomItem=arr[Math.floor(Math.random()*arr.length)];//randomItem=>1创建指定长度的数组constarr=[...newArray(3).keys()];//arr=>[0,1,2]创建指定长度等值的数组constarr=newArray(3).fill(0);//arr=>[0,0,0]reduce代替map和filterconst_arr=[0,1,2];//mapconstarr=_arr.map(v=>v*2);constarr=_arr.reduce((t,c)=>{t.push(c*2);return;},[]);//arr=>[0,2,4]//filterconstarr=_arr.filter(v=>v>0);constarr=_arr.reduce((t,c)=>{c>0&&t.push(c);return;},[]);//arr=>[1,2]//mapandfilterconstarr=_arr.map(v=>v*2).filter(v=>v>2);constarr=_arr.reduce((t,c)=>{cc=c*2;c>2&&t.push(c);return;},[]);//arr=>[4]对象技能克隆对象缺点t_obj={a:0,b:1,c:2};//选择以下方法之一constobj={..._obj};constobj=JSON.parse(JSON.stringify(_obj));//obj=>{a:0,b:1,c:2}合并对象constobj1={a:0,b:1,c:2};constobj2={c:3,d:4,e:5};constobj={...obj1,...obj2};//obj=>{a:0,b:1,c:3,d:4,e:5}用object获取环境变量时必须使用该方法文字，用起来总是很酷，用起来总是很酷>“ProductionAddress”对象变量属性constflag=false;constobj={a:0,b:1,[flag?"c":"d"]:2};//obj=>{a:0,b:1,d:2}创建一个纯空对象constobj=Object.create(null);Object.prototype.a=0;//obj=>{}删除对象无用属性constobj={a:0,b:1,c:2};//只想取b和cconst{a,...rest}=obj;//rest=>{b:1,c:2}解构对象属性嵌套constobj={a:0,b:1,c:{d:2,e:3}};const{c:{d,e}}=obj;//de=>23解构对象属性aliasconstobj={a:0,b:1,c:2};const{a,b:d,c:e}=obj;//ade=>012解构对象属性默认值constobj={a:0,b:1,c:2};const{a,b=2,d=3}=obj;//abd=>013Function技能函数自执行constFunc=function(){}();//普通(function(){})();//普通(ffunction(){}());//常用[function(){}()];+function(){}();-function(){}();~function(){}();!function(){}();newfunction(){};newfunction(){}();voidfunction(){}();typeofffunction(){}();deletefunction(){}();1,function(){}();1^function(){}();1>function(){}();隐式返回值只能用于单语句返回值箭头函数，如果返回值必须是对象use()WrapconstFunc=function(name){return"ILove"+name;};//换成constFunc=name=>"ILove"+name;一次性函数适用于运行一些只需要执行一次的初始化代码functionFunc(){console.log("x");Func=function(){console.log("y");}}懒加载function函数在函数中有很多判断分支时可以大大节省资源开销functionFunc(){if(a===b){console.log("x");}else{console.log("y");}}//更改为functionFunc(){if(a===b){Func=function(){console.log("x");}}else{Func=function(){console.log("y");}}returnFunc();}检测非空参数);//"paramisrequired"Func("你");//"ILoveYou"字符串创建函数constFunc=newFunction("name","console.log(\"ILove\"+name)");优雅地处理错误消息try{Func();}catch(e){location.href="https://stackoverflow.com/search?q=[js]+"+e.message;}优雅地处理Async/Await参数functionAsyncTo(promise){returnpromise.then(data=>[null,data]).catch(err=>[err]);}const[err,res]=awaitAsyncTo(Func());优雅地处理多个函数返回值functionFunc(){returnPromise.all([fetch("/user"),fetch("/comment")]);}const[user,comment]=awaitFunc();//需要使用DOMSkill在asyncsurround下显示所有DOM边框，使用[].forEach.call($$("*"),dom=>{dom.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16);});自适应页面页面为基于一张设计图，需要适配多种机型，使用remfunctionAutoResponse(width=750){consttarget=document.documentElement;target.clientWidth>=600?(target.style.fontSize="80px"):(targettarget.style.fontSize=target.clientWidth/width*100+"px");}过滤器XSSfunctionFilterXss(content){letelem=document.createElement("div");elem.innerText=content;constresult=elem.innerHTML;elem=null;returnresult;}访问LocalStorage反序列化，序列化存储constlove=JSON.parse(localStorage.getItem("love"));localStorage.setItem("love",JSON.stringify("ILoveYou"));最后的结论几乎是一样的。如果后面想到有什么我遗漏的JS开发技巧，我会在本文中继续写完，也希望各位小伙伴能够对文章中的要点进行补充或者提出自己的看法。欢迎在下方评论或补充。喜欢就点赞或者收藏，方便开发使用。最后送大家一个键盘！(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x
