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

前端小知识点

时间:2023-03-28 17:07:04 HTML

1.解构技巧通常我们需要在嵌套的多层对象中使用一些属性,我们会使用letobj={part1:{name:'zeroone',age:23}}//解构const{part1:{name,age}}=obj//使用console.log(name,age)//零123在这种情况下,你从part1中解构name和age之后,你就不能使用变量obj中的part1属性,比如://....omitconst{part1:{name,age}}=objconsole.log(part1)//UncaughtReferenceError:part1isnotdefined其实可以多次解构,例如://....omitconst{part1:{name,age},part1}=objconsole.log(part1)//{name:"ZeroOne",age:23}2.一行代码生成随机字符串conststr=Math.random().toString(36).substr(2,10);控制台日志(海峡);//'w5jetivt7e'是Math.random()产生的数[0,1),即0.123312,0.982931等,然后调用number的toString方法将其转化为36进制。按照MDN的说法,36进制转换应该包括字母a~z和数字0~9,因为这样生成的是0.89kjna21sa和这个类似,所以我们需要截取小数部分,也就是截取从索引2开始10个字符,就是我们要的随机字符串3.合并数据consta=[1,2,3];constb=[1,5,6];constc=a.concat(b);//[1,2,3,1,5,6]constobj1={a:1,}constobj1={b:1,}constobj=Object.assgin({},obj1,obj2);//{a:1,b:1}改进consta=[1,2,3];constb=[1,5,6];constc=[...newSet([...a,...b])];//[1,2,3,5,6]constobj1={a:1,}constobj2={b:1,}constobj={...obj1,...obj2};//{a:1,b:1}4.拼接字符串constname='小明';constscore=59;letresult='';if(score>60){result=`${name}的测试结果通过`;}else{result=`${name}的testresultisnotPass`;}Improveconstname='小明';constscore=59;constresult=`${name}${score>60?'考试成绩通过':'考试成绩不合格'}`;5.列表搜索consta=[1,2,3,4,5];constresult=a.filter(item=>{returnitem===3})改进consta=[1,2,3,4,5];constresult=a.find(item=>{returnitem===3})6.判断输入框不为空if(value!==null&&value!==undefined&&value!==''){//...}改进if(value??''!==''){//...}7.时间戳到时分秒//时间转换函数timestampToTime(timestamp){vardate=newDate(parseInt(timestamp));//如果时间戳是10位,需要*1000,如果时间戳是13位,你不需要乘以1000varY=date.getFullYear()+'-';varM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'-';变量D=date.getDate()+'';varh=(date.getHours()>=10?date.getHours():'0'+date.getHours())+':';varm=(date.getMinutes()>=10?date.getMinutes():'0'+date.getMinutes())+':';vars=(date.getSeconds()>=10?date.getSeconds():'0'+date.getSeconds());returnY+M+D+h+m+s;}8.文本复制功能html:TestCopy

js://封装publicmethod:copyClick(content){var_input=document.createElement('input');//直接构建输入_input.value=content;//设置内容document.body.appendChild(_input);//添加一个临时实例_input.select();//选择实例内容document.execCommand('Copy');//执行复制document.body.removeChild(_input);//删除临时实例}//方法调用$('.detail').on('click','.copy',function(data){copyClick(this.previousSibling.previousSibling.innerHTML);});9.过滤单个数组重复值arrRepeat:function(arr){varhash=[],unhash=[];for(leti=0;i0?“正面”:“负面”;console.log(结果);//positive也可以嵌套更复杂的条件letage=30;letresult=age<18?“未成年人”:年龄>=18&&年龄<60?“成人”:“高级”;console.log(结果);//大人跟进,慢慢迭代》