文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript中优化条件表达式相关的重构思路是怎样的

2024-04-02 19:55

关注

JavaScript中优化条件表达式相关的重构思路是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。

分解条件表达式

我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:

let ieIEMac = navigator.userAgent.toLowerCase().includes("mac") && navigator.userAgent.toLowerCase().includes("ie")

上面的代码太过冗长了,不利于阅读,我们可以把它分解成几个短小且有名字的条件表达式,如下所示:

let userAgent = navigator.userAgent.toLowerCase(); let isMac = userAgent.includes("mac"); let isIE = userAgent.toLowerCase().includes("ie"); let isMacIE = isMac && isIE;

合并条件表达式

与上面相反的,如果有多个简短的条件表达式,则可以将它们合并成一个。例如我们可能会写这样的代码:

const x = 5; const bigEnough = x > 5; const smallEnough = x < 6; const inRange = bigEnough && smallEnough;

我们可以这样合并:

const x = 5; const inRange = x > 5 && x < 6;

因为表达式很短,即使把它们组合在一起也不会使表达式变长,所以我们可以这样做。

合并重复的条件片段

如果我们在条件块中有重复的表达式或语句,则可以将它们移出。例如我们可能会写这样的代码:

if (price > 100) {   //...   complete(); } else {   //...   complete(); }

我们可以把重复的内容移到条件表达式外面,如下所示:

if (price > 100) {   //... } else {   //... } complete();

这样,我们不必重复不必要地调用complete函数。

删除控制标志

如果我们在循环中使用了控制标志,那应该会这样代码:

let done = false; while (!done) {   if (condition) {     done = true;   }   //... }

在上面的代码中,done 是控制标,在condition为true时,将done设置为true停止while循环。

相对于上面,我们可以使用break来停止循环,如下所示:

let done = false; while (!done) {   if (condition) {     break;   }   //... }

用卫语句代替嵌套条件

卫语句就是把复杂的条件表达式拆分成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层的if-then-else语句,转换为多个if语句,实现它的逻辑,这多条的if语句就是卫语句。

嵌套条件语句很难阅读,所以我们可以使用「卫语句」代替它们。例如我们可能会写这样的代码:

const fn = () => {   if (foo) {     if (bar) {       if (baz) {         //...       }     }   } }

我们可以这样优化:

if (!foo) {     return;   }   if (!bar) {     return;   }   if (baz) {     //...   } }

在上面的代码中,卫语句是:

if (!foo) {   return; }

if (!bar) {   return; }

如果这些条件为假,它们会提前返回函数,这样,我们就不需要嵌套了。

用多态替换条件

我们可以使用switch语句为不同种类的数据创建相同的子类,而不是使用switch语句对不同类型的数据执行相同的操作,然后针对对象的类型使用不同的方法。

例如我们可能会写这样的代码:

class Animal {   constructor(type) {     this.type = type;   }   getBaseSpeed() {     return 100;   }   getSpeed() {     switch (this.type) {       case ('cat'): {         return getBaseSpeed() * 1.5       }       case ('dog'): {         return getBaseSpeed() * 2       }       default: {         return getBaseSpeed()       }     }   } }

我们可以这样重构:

class Animal {   constructor(type) {     this.type = type;   }   getBaseSpeed() {     return 100;   } } class Cat extends Animal {   getSpeed() {     return super.getBaseSpeed() * 1.5;   } } class Dog extends Animal {   getSpeed() {     return super.getBaseSpeed() * 2;   } }

当switch语句很长时,应该为不同类型的对象定制case块。

采用空对象

如果我们重复检查null或undefined,则可以定义一个代表该类的null或undefined版本的子类,然后使用它。

例如我们可能会写这样的代码:

class Person {   //... }

我们可以这样重构:

class Person {   //... } class NullPerson extends Person {   //... }

然后,我们将Person设置为null或undefined 的对象属性,而不是将其设置为NullPerson实例。

这样就无需使用条件检查这些值。

看完上述内容,你们掌握JavaScript中优化条件表达式相关的重构思路是怎样的的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯