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

使用这11个代码,我们可以大大简化我们的代码

时间:2023-03-14 23:51:16 科技观察

在这篇文章中,我将与您分享一些关于JS的技巧,可以提高您的JS技能。1、避免if太长如果判断值满足多个条件,我们可以这样写:if(value==='a'||value==='b'||value==='c'){。..}如果有多个这样的条件,if条件会很尴尬,可读性会降低。我们可以这样简化它:if(['a','b','c'].includes(value)){...}2.双倍!运算符将任何变量转换为布尔值!(NOT)运算符可以使用两次!!,这样就可以将任何变量转换为布尔值(如布尔函数),当你需要处理之前检查一个值时非常方便。consttoto=null!!toto//falseBoolean(toto)//falseif(!!toto){}//totoisnotnullorundefined3.可选(?)在JS中,我们需要经常检查对象的某些属性是否存在,然后才能Handle否则会报错。在早期我们可能会这样做:consttoto={a:{b:{c:5}}}if(!!toto.a&&!!toto.a.b&&!!toto.a.b.c){...}//toto.a.b.cexist如果对象嵌套很深,我们的写法就很难阅读了。这时候,我们可以使用吗?简化:if(!!toto.a?.b?.c){...}//toto.a.b.cexist//如果key不存在,返回`undefined`。consttest=toto.a?.b?.c?.d//undefined4.if里面if有返回值,不要写else经常看到这种写法:if(...){return'toto'}else{return'tutu'}如果if有返回值,可以这样写:if(...){return'toto'}return'tutu'5.避免使用forEach,使用filter、map、reduce、every、somemore作为初学者,我们使用了很多forEach函数,但是JS为我们提供了很多选择,而这些函数就是FP(函数式编程)。filterfilter()方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。consttoto=[1,2,3,4]//过滤奇数constevenValue=toto.filter(currentValue=>{returncurrentValue%2==0})//[2,4]mapmap()方法创建一个新数组,其结果是这个数组中的每个元素都是对所提供函数的一次调用的返回值。consttoto=[1,2,3,4]constvalueMultiplied=toto.map(currentValue=>{returncurrentValue*2})//[2,4,6,8]reducereduce()方法对数组A中的每个元素执行一次您提供的reducer函数(按升序执行),它将其结果聚合为单个返回值。consttoto=[1,2,3,4]constsum=toto.reduce((accumulator,currentValue)=>{returnaccumulator+=currentValue},0)//10Some&Everysome()方法测试是否至少有1个元素array通过提供的功能测试。它返回一个布尔类型的值。every()方法测试数组中的所有元素是否通过指定函数的测试。它返回一个布尔值。什么时候使用?所有满足条件的项都可以使用everyconsttoto=[2,4]toto.every(val=>val%2===0)//trueconstfalsyToto=[2,4,5]falsyToto.every(val=>val%2===0)//只要满足条件就为false,用someconsttoto=[2,4,5]toto.some(val=>val%2!==0)//返回true6。不要使用delete来删除属性从对象中删除属性是非常糟糕的(性能差),此外,它还有很多副作用。但是如果你需要移除一个属性,你应该怎么做呢?您可以以功能方式创建没有此属性的新对象,如下所示:constremoveProperty=(target,propertyToRemove)=>{const{[propertyToRemove]:_,...newTarget}=targetreturnnewTarget}consttoto={a:55,b:66}consttotoWithoutB=removeProperty(toto,'b')//{a:55}7.只有在对象存在的情况下才给对象添加属性有时候,如果对象已经定义了属性,我们需要给对象添加一个属性对象,我们可以这样写:consttoto={name:'toto'}constother={other:'other'}//Theconditionisnotimportantconstcondition=trueif(condition){other.name=toto.name}?不是很好的代码?可以使用一些东西更优雅!constcondition=trueconstother={other:'other',...condition&&{name:'toto'}}8.在JS中使用模板字符串在学习字符串的时候,我们需要用变量拼接consttoto='toto'constmessage='hellofrom'+toto+'!'//hellofromtoto!如果还有其他变量,我们要写一个很长的表达式,然后可以使用模板字符串进行优化。consttoto='toto'constmessage=`hellofrom${toto}!`//hellofromtoto!9.条件简写当条件为真时,进行一些操作,我们可以这样写:if(condition){toto()}this这个方法可以简写为&&:condition&&toto()10.设置一个变量的默认值如果需要给一个变量设置一个默认值,可以这样做:lettotoconsole.log(toto)//undefinedtoto=toto??'defaultvalue'console.log(toto)//defaultvaluetoto=toto??'newvalue'console.log(toto)//默认值11。如果你需要知道使用控制台定时器的函数的执行时间,你可以这样做:for(i=0;i<100000;i++){//somecode}console.timeEnd()//xms作者:CodeOz译者:前端小智来源:dev原文:https://dev.to/codeoz/improve-your-js-skls-with-theses-tips-52ia