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

掌握20个JS技巧

时间:2023-03-28 17:17:15 HTML

1:求数组constarray=[5,4,7,8,9,2]中的和、最大值和最小值;console.log('sum',array.reduce((a,b)=>a+b));//35console.log('最大值',array.reduce((a,b)=>a>b?a:b));//9console.log('最小值',array.reduce((a,b)=>aa-b));//[1,5,10,25,40,100]//从大到小控制台.log('从大到小',array.sort((a,b)=>b-a));//[100,40,25,10,5,1]//对象数组排序constobjectArr=[{first_name:'Lazslo',last_name:'Jamf'},{first_name:'Pig',last_name:'Bodine'},{first_name:'Pirate',last_name:'Prentice'}];objectArr.sort((a,b)=>a.last_name.localeCompare(b.last_name));//输出(3)[{...},{...},{...}]0:{first_name:"Pig",last_name:"Bodine"}1:{first_name:"Lazslo",last_name:"Jamf"}2:{first_name:"Pirate",last_name:"Prentice"}length:33:删除重赋值constarray=[5,4,7,8,9,2,7,5];array.filter((item,idx,arr)=>arr.indexOf(item)===idx);//orconstnonUnique=[...newSet(array)];//输出:[5,4,7,8,9,2]4:合并多个对象constuser={name:'KapilRaghuwanshi',gender:'Male'};constcollege={primary:'ManiPrimarySchool',secondary:'LassSecondarySchool'};constskills={programming:'Extreme',swimming:'Average',sleeping:'Pro'};constsummary={...用户,...学院,...skills};console.log('summar',summary);//输出性别:"男"name:"KapilRaghuwanshi"primary:"ManiPrimarySchool"programming:"Extreme"secondary:"LassSecondarySchool“睡觉:”Pro“游泳:”Average"5:用??代替||,用于判断运算符左边的值为null或undefined,然后返回右边的值。其行为类似于||,但更严格的||运算符是左边为空,string或false或0等falsy值将返回背面的值,只有当左边的值返回右边的值时,才会返回右边的值运算符的一侧为null或undefined。因此,0||1的结果为1,0??1的结果为0constresponse={settings:{nullValue:null,height:400,animationDuration:0,headerText:'',showSplashScreen:false}};constundefinedValue=response.settings.undefinedValue??'someotherdefault';//结果:'someotherdefault'constnullValue=response.settings.nullValue??'someotherdefault';//result:''someotherdefault'constheaderText=response.settings.headerText??'Hello,world!';//result:''constanimationDuration=response.settings.anima持续时间??300;//结果:0constshowSplashScreen=response.settings.showSplashScreen??真的;//result:false6:使用String.prototype.replaceAll()Simplifiedreplace一次替换所有子串//之前的console.log('aaa'.replace(/a/g,'A'))//AAA//Simplifiedconsole.log('aaa'.replaceAll('a','A'))//AAA7:函数防抖:事件触发后n秒后执行回调,如果在这n秒内再次触发,重新计时。使用场景:输入框边打字边调用接口,用户频繁点击提交按钮,如服务器发送数据。onscroll、鼠标滑动事件等exportconstDebounce=(fn,t)=>{让延迟=t||500lettimer返回函数(){letargs=arguments;如果(计时器){clearTimeout(计时器)}让callNow=!timertimer=setTimeout(()=>{timer=null},延迟)如果(callNow)fn.apply(this,args)}}onSubmit:Debounce(函数(){letparamsData={...this.formList,authorization:this.token}//console.log('提交代码',paramsData)letthat=this;saveGlxx(paramsData).then((res)=>{if(res.success==true){that.formList=Object.assign({},that.formList,that.$options.data().formList)Toast.success('提交成功');}}).catch((错误)=>{Toast.fail('系统异常,请稍后重试!');})},1000),8:formatmoneyconstThousandNum=num=>num.toString().replace(/\B(?=(\d{3})+(?!\d))/g,",");constmoney=ThousandNum(20190214);//money=>"20,190,214"9:es6去重letuniqueArray=[...newSet([1,2,3,3,3,"school","school",'ball',false,false,true,true])];//>>>[1,2,3,"school","ball",false,true]10:如果多个条件判断包含()方法判断数组是否包含指定元素A:varx='ghi'//冗余if(x==='abc'||x==='def'||x==='ghi'||x==='jkl'){}//简写if(['abc','def','ghi','jkl'].includes(x)){console.log('established')}else{console.log('notestablished')}B:检查一个项目是否包含在数组中varfruits=["Banana","Orange","Apple","Mango"];varn=fruits.includes("Mango");console.log('n',n);//true11:Null,Undefined,null检查//冗余if(first!==null||first!==undefined||first!==''){letsecond=first;}//简洁letsecond=first||'';12:隐式返回//冗余函数getArea(diameter){return5*diameter}//简洁getArea=diameter=>(5*diameter)//shorthandgetArea=diameter=>5*diameter;13: