当前位置: 首页 > 科技观察

既然知道了这些JavaScript小技巧,我就早点下班了!

时间:2023-03-17 18:25:13 科技观察

谁要说JavaScript是世界上最好的语言,估计要被吐槽了。但如果JavaScript是世界上使用最广泛的编程语言,估计大多数人都没有意见。特别是对于NodeJS,JavaScript无处不在。阿特伍德定律:“任何可以用JavaScript编写的应用程序最终都将用JavaScript编写。”尽管如此,JavaScript还是有一些鲜为人知的特性和技巧,它们不太常见,但非常有用。本文无意介绍那些稀奇古怪的功能,因为除了饭后聊天外,没有实际用途。本文要介绍的5个技能,学完即用,用完即走(下班)!1、加号运算符+就一定会出错吗?我小学一年级的侄子就知道了!是的,基本算术你必须知道运算符+:consttwo=1+1;但这不是加数字,而是将表达式转换为数字的运算符。console.log(+newDate());//1592102280555console.log(+true);//1console.log(+false);//0constrandom={valueOf:()=>Math.floor(Math.random()*100),};console.log(+random);//4console.log(+random);//26console.log(+random);//47刚接触JavaScript的新手可能会发现这种写法有点奇怪,Number类型转换往往使用Number()函数。结果是一样的,但是用+不是更简洁吗?还值得注意的是,如果对象包含valueOf方法,+运算符将返回此方法的结果。就像上面的例子。2.debugger语句在浏览器DevTools上断点调试,基本上大家都知道。但是你知道如何在代码中打断点吗?是的,使用调试器语句。当您想要快速断点到特定代码位置时,此技术更为方便。constbubbleSort=(arr)=>{constlength=arr.length;for(leti=0;iarr[j+1]){调试器;[arr[j],arr[j+1]]=[arr[j+1],arr[j]];}}}returnarr;};console.log(bubbleSort([8,2,19,8,4,5,2]));//2,2,4,5,8,8,19debugger3.逗号运算符逗号?我觉得你在跟我开玩笑!真的没骗你,这里说的逗号不是数组中的逗号,也不是对象属性之间的逗号,而是表达式中的逗号运算符。例如consta=(1,2),a的值为2。逗号运算符使多个表达式依次执行,并返回最后一个表达式的值。这有什么用?它可以使代码更简洁。例如:letmoney=10;consthasStudied=false;constrelax=()=>console.log('relax');conststudy=()=>console.log('study');//完成变量赋值,执行方法hasStudied?(money++,relax()):((money/=2),study());console.log(money);//study5//批量定义多个变量for(leti=1,j=2;i+j<10;i++,j++){console.log(i,j);}//12;23;34;45;//不改变现有方法实现,增加逻辑确定<按钮>4.集合对象Set这是ES6引入的一种数据结构,集合类型Set。学过数学的人都知道,集合的特点是不包含重复的元素。有一道很常见的面试题,就是数组去重的问题。当然,面试题的初衷可能不是让你直接使用Set,而是自己去实现去重的逻辑。但是在实际工作中用来去重,是不是很爽?也可以用来计算两个集合的交集://数组去重constarr=[1,1,7,5,6,6,6,8,7];//传统方式letnoDup=arr.filter((a,b)=>arr.indexOf(a)===b);//使用SetnoDup=[...newSet(arr)]更方便console.log(noDup);//17568//设置操作leta=newSet('helloworld!');//"h","e","l","o","","w","r","d","!"letb=newSet('jianshuiscool!');//"j","i","a","n","s","h","u","","c","o","l","!"//交点constintersection=(a,b)=>{letintersection=newSet();for(letelemofb){if(a.has(elem)){intersection.add(elem);}}returnintersection;};console.log(intersection(a,b));//"h","","o","l","!"5。原生日期操作我遇到过很多前端开发,所有的日期操作都必须使用moment.js等库。不是不能用,而是如果只有几个地方用到几个API,比如简单的格式化,有必要引入库吗?另外遇到一些API不支持的自定义需求怎么办?其实,nativeoperations并没有你想的那么麻烦,理解原理和逻辑后很快就可以自己写一个了。例如格式:functionformatDate(date,format){varcalendar=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];format=格式||'Y-m-d';vardateObj=newDate(date);if(isNaN(+dateObj)){return'InvalidDate';}varyear=dateObj.getFullYear(),month=dateObj.getMonth()+1,date=dateObj.getDate();returnformat.replace('Y',year).replace('m',month).replace('d',日期).replace('M',calendar[month-1]);}几行代码而已!再比如,获取上个月的最后一天,可能moment.js有相关的API,懒得去查了,原来也很简单:constday1=newDate();day1.setDate(-1);//难以置信,就是这么简单!总结没什么可总结的,就是做!