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

改善Javascript开发的15个技巧

时间:2023-03-18 18:44:41 科技观察

现在,让我们来看看这些技巧。1.判断null与undefined我们很快将在JavaScript中学到的一件事是,并非一切都像它看起来的那样,在像这样的动态语言中,变量可以通过多种方式引导您出现问题。一个非常常见的测试是检查变量是否为空或未定义,甚至是“空”,如下例所示:letusername;if(name!==null||name!==undefined||name!==''){userName=name;}else{userName="";进行相同评估的更简单方法是:letuserName=name||"";不信你试试看!2.数组定义所以你必须创建一个数组对象,然后用它的元素填充它,对吧?您的代码可能如下所示:leta=newArray();a[0]="s1";a[1]="s2";a[2]="s3";在一行中做同样的事情如何让a=["s1","s2","s3"]看起来不错!注意:我知道这个技巧更简单,但它对我有用,它可能会帮助一些开始使用其他编程语言的人。3、三元运算符著名的“一行if/else”,三元运算符对于很多Java、C#等语言的程序员来说已经是老熟人了。它也存在于JS中,代码块可以像这样轻松转换:letbig;if(x>10){big=true;}else{big=false;}这里:letbig=x>10?真假;让大;或者更简单:让big=x>10;但它也适用于函数调用吗?如果我有两个不同的函数,如果为真我想调用一个,如果为假则调用一个,通常你会做这样的事情:functionx(){console.log('x')};functiony(){log('y')};letz=3;if(z==3){x();}else{y();}然而,你也可以使用三元进行同样的函数调用:functionx(){console.log('x')};functiony(){console.log('y')};让z=3;(z==3?x:y)();//Shortcut另外,值得一提的是ifs来测试一个变量是否为真,一些程序员仍然会这样做:if(likeJs===true)当他们可以这样做时:if(likeJs)4.声明变量是的,即使是变量的声明有它的怪癖。虽然这不是什么秘密,但您仍然会看到很多程序员使用如下语句:letx;lety;letz=3;当他们可以做的时候:设x,y,z=3;5。使用正则表达式当涉及到某些类型的网络爬虫的文本分析和验证以及数据提取时,正则表达式是创建优雅而强大的代码的绝佳工具。您可以在以下链接中了解有关如何使用正则表达式的更多信息:https://developer.mozilla.org/enUS/docs/Web/JavaScript/Guide/Regular_Expressionshttps://regexr.com/https://regex101.com/6。charAt()快捷方式您只想从字符串中的特定位置选择一个字符,对吗?我敢打赌,您的第一个想法是使用charAt函数,如下所示:"string".charAt(0);但是得到这个,通过记住String是一个字符数组的类比,你会得到相同的结果:"string"[0];//返回's'7。以10为底的幂这只是以10为底的指数或用零填充的众所周知的数字的更紧凑的表示法。对于那些接近数学的人来说,看到其中之一并不会太令人惊讶,但是在JS中数字10000可以很容易地替换为1e4,即1后跟4个零,如下所示:for(leti=0;i<1e4;i++){8.模板文字此语义功能是ECMAScript版本6或更高版本所独有的,它极大地简化了读取变量集中的字符串连接。例如下面的连接:constquestion="Mynumberis"+number+",ok?"这个很简单,你可能会做更糟糕的串联。从ES6开始,我们可以为这个连接使用模板文字:constquestion=`Mynumberis${number},ok?`9.箭头函数箭头函数是声明函数的一种简化方式。是的,自第一个JavaScript版本以来,有更多方法可以做同样的事情。例如,这里有一个求和函数:functionsum(n1,n2){returnn1+n2;}我们也可以这样声明这个函数:constsum=function(n1,n2){returnn1+n2;}但使用箭头函数:constsum=(n1,n2)=>n1+n2;10.参数解构这个技巧适用于充满参数的函数,你决定用一个对象替换所有参数。或者对于那些真正需要配置对象作为参数的函数。到目前为止没有问题,毕竟谁没有经历过呢?问题是我们必须一直访问参数传递的对象,然后是我们要读取的每个属性,对吧?像这样:functioninit(config){consts=config.s;constt=config.t;returns+t;//或config.s+config.t}init({s:"1",t:"2"});参数解构特性旨在简化这一点,同时通过将前面的语句替换为以下语句来帮助提高代码可读性:functioninit({s,t}){returns+t;}init({s:1,t:2});最重要的是,我们仍然可以在参数对象的属性中添加默认值:functioninit({s=10,t=20}){returns+t;}init({s:1});这样,s的值为1,但t的值将默认为属性,即20。11.键值名称一个非常令人上瘾的功能是为对象分配属性的缩写方式。假设您有一个person对象,该对象具有name属性,该属性将通过name变量分配。它看起来像这样:constname="Joseph"constperson={name:name}//{name:"Joseph"}虽然你可以这样做:constname="Joseph"constperson={name}//{name:"Joseph"}即如果你的变量与属性同名,则不需要调用,传递变量即可。多个属性也是如此:constname="Joseph"constcanCode=trueconstperson={name,canCode}//{name:"Joseph",canCode:true}12.Map考虑以下对象数组:constanimals=[{“名字”:“猫”,“大小”:“小”,“重量”:5},{“名字”:“狗”,“大小”:“小”,“重量”:10},{"name":"lion","size":"medium","weight":150},{"name":"elefante","size":"large","weight":5000}]现在想象一下我们只想将动物的名称添加到另一个数组中。通常我们会这么做::letanimalNames=animais.map((animal)=>{returnanimal.nome;})请注意,map接受最多三个参数的函数:第一个是当前对象(如foreach),第二个是当前对象迭代的第三个索引是整个数组显然这个函数将为动物数组中的每个对象调用一次。13.Filter如果我们想遍历与前一个技巧相同的动物对象数组,但这次只返回那些大小为“小”的对象怎么办?我们如何使用常规JS来做到这一点?让小动物=[];for(leti=0;i{returntotal+=animal.weight;},0)Reduce需要一个具有以下参数的函数:第一个是累加器变量的当前值(在所有迭代结束时它将包含最终值)第二个参数是当前迭代的对象第三个参数是当前迭代的索引第四个参数是所有要迭代的对象的数组该函数将对数组中的每个对象执行一次,并在其执行结束时返回聚合值。结论以上是我与您分享的关于JavaScript的15个技巧。如果大家还有其他更好的实现方法,欢迎在评论区与我们分享。另外,如果你觉得我今天分享的内容对你有用,请记得点赞我,关注我,分享给你的朋友,或许能对他有所帮助。最后,感谢您的阅读,欢迎您的关注,祝您编程愉快。