目录既然写文章有这么多的写作技巧，我也需要整理一下《JS开发技巧》，起个好记的名字。《字符串技能》：字符串技能《数字技能》：数值技能《布尔技能》：布尔技能《数组技能》：数组技能《对象技能》：对象技能《函数技能》：函数技能《DOM技能》：DOM技能remark代码仅作演示之用，不会对ES6语法进行详细讲解。有不懂的语法问题，请参考阮一峰老师的《ES6标准入门》《ES6标准入门》，持续更新。建议保存。通常，查看StringSkill比较时间?需要补充时间的个位数形式0?consttime1="2019-02-1421:00:00";consttime2="2019-05-0109:00:00";constovertime=time1>time2;//overtime=>falseformatmoneyconstThousandNum=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"生成随机十六进制颜色值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");//"男性"数字舍入?代替Math.floor()用于正数和Math.ceil()用于负数?constnum1=~~1.69;常数num2=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,valuestring有效?constnum1=+null;constnum2=+"";constnum3=+false;constnum4=+"169";//num1num2num3num4=>000169timestampconsttimestamp=+newDate("2019-02-14");//timestamp=>1550102400000精确小数constRoundNum=(num,decimal)=>Math.round(num*10**decimal)/10**decimal;constnum=RoundNum(1.69,1);//num=>1.7判断奇偶性constOddEven=num=>!!(num&1)?“奇偶”;constnum=OddEven(2);//num=>"even"取最小值和最大值constarr=[0,1,2];constmin=Math.min(...arr);constmax=Math.max(...arr);//最小最大值=&g吨;02生成范围随机数constRandomNum=(min,max)=>Math.floor(Math.random()*(max-min+1))+min;constnum=RandomNum(1,10);BooleanSkillshort-电路运算符consta=d&&1;//满足条件赋值：取假操作，从左到右判断，遇到假值返回假值，后面不执行，否则返回最后一个真值constb=d||1;//默认赋值：真操作，从左到右判断，遇到真值返回真值，后面不执行，否则返回最后一次假值constc=!d;//对false赋值：单个表达式转为true则返回false，否则返回true判断数据类型?可判断类型：undefined,null,string,number,boolean,array,object,symbol,date,regexp,function,asyncfunction,arguments,set,map,weakset,weakmap?functionDataType(tgt,type){constdataType=Object.prototype.toString.call(tgt).replace(/\[object(\w+)\]/,"$1").toLowerCase();返回类型？数据类型===类型：数据类型；}数据类型（“年轻”）；//"字符串"DataType(20190214);//"数字"DataType(true);//"布尔值"DataType([],"数组");//trueDataType({},"数组");//false是一个空数组constarr=[];constflag=Array.isArray(arr)&&!arr.length;//flag=>true是一个空对象constobj={};constflag=DataType(obj,"对象")&&!Object.keys(obj).length;//flag=>满足条件时为真constflagA=true;//条件AconstflagB=false;//条件B(flagA||flagB)&&Func();//当满足A或B时执行(flagA||!flagB)&&Func();//当A或B不满足时执行flagA&&flagB&&Func()；//当A和B都满足时执行flagA&&!flagB&&Func();//当A满足，B不满足，且为非false值时执行constflag=false;//undefined,null,"",0,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/caseuseintervalconstage=26;switch(true){caseisNaN(age):console.log("notanumber");休息;案例（年龄<18）：console.log("underage");休息;案例（年龄>=18）：console.log("成人");休息;默认值：console.log("请设置您的年龄");打破;}到达ay技能克隆数组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过滤空值?null值：undefined,null,"",0,false,NaN?constarr=[undefined,null,"",0,false,NaN,1,2].filter(Boolean);//arr=>[1,2]异步累积asyncfunctionFunc(deps){returndeps.reduce(async(t,v)=>{constdep=awaitt;constversion=awaitTodo(v);dep[v]=version;returndep;},Promise.resolve({}));}constresult=awaitFunc();//asyncsurround下需要使用数组头插入成员letarr=[1,2];//选择以下方法之一：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];constcount=arr.reduce((t,v)=>{t[v]=t[v]?++t[v]:1;returnt;},{});//count=>{0:1,1:2,2:3}解构数组成员Nestedconstarr=[0,1,[2,3,[4,5]]];const[a,b,[c,d,[e,f]]]=arr;//abcdef=>012345解构数组成员别名constarr=[0,1,2];const{0:a,1:b,2:c}=arr;//abc=>012解构数组成员默认值constarr=[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]reducemap和filterconst_arr=[0,1,2];//mapconstarr=_arr.map(v=>v*2);constarr=_arr.reduce((t,v)=>{t.push(v*2);returnt;},[]);//arr=>[0,2,4]//filterconstarr=_arr.filter(v=>v>0);constarr=_arr.reduce((t,v)=>{v>0&&t.push(v);returnt;},[]);//arr=>[1,2]//映射和过滤constarr=_arr.map(v=>v*2).filter(v=>v>2);constarr=_arr.reduce((t,v)=>{v=v*2;v>2&&t.push(v);returnt;},[]);//arr=>[4]对象技能克隆对象const_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}对象字面量?必须使用这个方法获取环境变量时，用起来总是爽，用起来总是爽?constenv="prod";constlink={dev:"开发地址",test:"测试地址",prod:"生产地址"}[zhv];//链接=>“生产地址”对象变量属性constflag=false;constobj={a:0,b:1,[标志?"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解构对象属性别名constobj={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(){})();//常用(function(){}());//常用[function(){}()];+function(){}();-function(){}();~function(){}();!function(){}();newfunction(){};newfunction(){}();voidfunction(){}();typeofffunction(){}();deletefunction(){}();1,function(){}();1^function(){}();1>func化（）{}（）;隐式返回值?只能用于单语句返回值箭头函数，如果返回值是对象，则必须用()包裹?constFunc=function(name){return"ILove"+name;};//替换为constFunc=name=>"ILove"+name;一次性函数?适用于运行一些只需要执行一次的初始化代码?functionFunc(){console.log("x");Func=function(){console.log("y");}}懒加载函数?函数中的判断分支多且复杂，可以大大节省资源开销?functionFunc(){if(a===b){console.log("x");}else{console.log("y");}}//替换为函数Func(){if(a===b){Func=function(){console.log("x");}}else{Func=function(){console.log("y");}}returnFunc();}检测非空参数}函数();//"参数是必需的"Func("你");//"ILoveYou"字符串创建函数constFunc=newFunction("name","console.log(\"ILove\"+name)");优雅地处理错误信息try{Func();}catch(e){location.href="https://stackoverflow.com/search?q=[js]+"+e.message;}优雅地处理异步/等待参数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();//asyncsurround下需要使用DOMSkill显示所有DOM边框?调试页面时使用?[].forEach.call($元素边框$("*"),dom=>{dom.style.outline="1pxsolid#"+(~~(Math.random()*(1<<24))).toString(16);});自适应页面?页面基于一张设计图，需要适配多种机型，使用rem设置元素大小?functionAutoResponse(width=750){consttarget=document.documentElement;target.clientWidth>=600?(target.style.fontSize="80px"):(target.style.fontSize=target.clientWidth/width*100+"px");}filterXSSfunctionFilterXss(content){letelem=document.createElement(“股利”）;元素。innerText=内容；常量结果=元素。内部HTML；元素=空；返回结果t;}访问本地存储?反序列化，序列化?constlove=JSON.parse(localStorage.getItem("love"));localStorage.setItem("love",JSON.stringify("ILoveYou"));最后的总结几乎是一样的。后面如果想到有什么遗漏的“JS开发技巧”，我会继续补完这篇文章，最后给大家送个键盘！(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x
