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

JavaScript重构技巧——条件

时间:2023-03-30 15:47:52 CSS

JohnAu-Yeung来源:medium译者:前端小智喜欢再看,养成习惯本文已收录到GitHubhttps://github.com/qq44924588...之前高度分类好评文章也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。JavaScript是一种易于学习的编程语言,很容易编写可以运行并执行某些操作的程序。但是,很难写出一段干净的JavaScript代码。在本文中,我们将介绍一些与优化条件表达式相关的重构思想。分解条件表达式我们可以将长的条件表达式分解成命名的短条件表达式,这样方便阅读。比如我们可能会这样写代码:'t为了方便阅读,我们可以把它分解成几个简短的、有名字的条件表达式,如下:().includes("即");让isMacIE=isMac&&isIE;组合条件表达式与上面相反,如果有多个短条件表达式,可以将它们组合成一个。例如,我们可能会这样写代码:constx=5;constbigEnough=x>5;constsmallEnough=x<6;constinRange=bigEnough&&smallEnough;我们可以这样合并:constx=5;constinRange=x>5&&x<6;由于表达式很短,即使将它们组合在一起也不会使表达式变长,所以我们可以这样做。合并重复的条件片段如果我们在条件块中有重复的表达式或语句,我们可以将它们移出。例如,我们可能会这样写代码:if(price>100){//...complete();}else{//...complete();}我们可以把重复的内容移出条件表达式,像这样:if(price>100){//...}else{//...}complete();这样,我们就不必不必要地重复调用完整的函数。移除控制标志如果我们在循环中使用了控制标志,它应该是这样的代码:letdone=false;while(!done){if(condition){done=true;}//...}在上面的代码中,done是控制符号,当条件为真时,设置done为true,停止while循环。与上面相比,我们可以使用break来停止循环,如下所示:letdone=false;while(!done){if(condition){break;}//...}Replacenestedconditionalguardstatementswithguardstatements就是把复杂的条件表达式拆成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层if-then-else语句,转换成多个if语句来实现其逻辑。多个if语句是保护语句。嵌套的条件语句很难阅读,所以我们可以使用guard语句来代替。例如我们可以这样写代码:constfn=()=>{if(foo){if(bar){if(baz){//...}}}}我们可以这样优化:if(!foo){返回;}if(!bar){返回;}if(baz){//...}}在上面的代码中,守卫语句是:if(!foo){return;}和if(!bar){return;}如果这些条件为假,它们返回函数早,所以我们不需要嵌套。我们可以使用switch语句为不同种类的数据创建相同的子类,然后针对不同类型的对象使用不同的方法,而不是使用switch语句对不同类型的数据进行相同的操作。例如,我们可以这样写代码:classAnimal{constructor(type){this.type=type;}getBaseSpeed(){返回100;}getSpeed(){switch(this.type){case('cat'):{returngetBaseSpeed()*1.5}case('dog'):{returngetBaseSpeed()*2}default:{returngetBaseSpeed()}}}}我们可以这样重构:classAnimal{constructor(type){this.类型=类型;}getBaseSpeed(){返回100;}}classCatextendsAnimal{getSpeed(){returnsuper.getBaseSpeed()*1.5;}}classDogextendsAnimal{getSpeed(){returnsuper.getBaseSpeed()*2;}}当switch语句很长时,case块应该针对不同类型的对象进行定制。获取空对象如果我们反复检查null或undefined,我们可以定义一个子类来表示该类的null或undefined版本,并使用它来代替。例如,我们可以这样写代码:classPerson{//...}我们可以这样重构:classPerson{//...}classNullPersonextendsPerson{//...}然后,我们设置Person为null或未定义的对象属性,而不是将其设置为NullPerson实例。这消除了使用条件检查值的需要。代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文:https://levelup.gitconnected....每周更新交流文章。可以微信搜索“大千世界”阅读即时更新(比博文早一两篇)。这篇文章在GitHub上https://github.com/qq449245884/xiaozhi已经收录,整理了很多我的文档。欢迎明星和完美。面试可以参考考点。另外,关注公众号,后台会回复福利,看到福利就知道了。