JavaScript重构技巧 — 条件

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

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

[[329554]]

在本文中,我们将介绍一些优化条件表达式相关的重构思路。

分解条件表达式

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

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

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

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

合并条件表达式

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

  1. const x = 5; 
  2. const bigEnough = x > 5; 
  3. const smallEnough = x < 6; 
  4. const inRange = bigEnough && smallEnough; 

我们可以这样合并:

  1. const x = 5; 
  2. const inRange = x > 5 && x < 6; 

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

合并重复的条件片段

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

  1. if (price > 100) { 
  2.   //... 
  3.   complete(); 
  4. else { 
  5.   //... 
  6.   complete(); 

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

  1. if (price > 100) { 
  2.   //... 
  3. else { 
  4.   //... 
  5. complete(); 

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

删除控制标志

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

  1. let done = false
  2. while (!done) { 
  3.   if (condition) { 
  4.     done = true
  5.   } 
  6.   //... 

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

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

  1. let done = false
  2. while (!done) { 
  3.   if (condition) { 
  4.     break; 
  5.   } 
  6.   //... 

用卫语句代替嵌套条件

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

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

  1. const fn = () => { 
  2.   if (foo) { 
  3.     if (bar) { 
  4.       if (baz) { 
  5.         //... 
  6.       } 
  7.     } 
  8.   } 

我们可以这样优化:

  1. if (!foo) { 
  2.     return
  3.   } 
  4.   if (!bar) { 
  5.     return
  6.   } 
  7.   if (baz) { 
  8.     //... 
  9.   } 

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

  1. if (!foo) { 
  2.   return

  1. if (!bar) { 
  2.   return

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

用多态替换条件

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

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

  1. class Animal { 
  2.   constructor(type) { 
  3.     this.type = type; 
  4.   } 
  5.   getBaseSpeed() { 
  6.     return 100; 
  7.   } 
  8.   getSpeed() { 
  9.     switch (this.type) { 
  10.       case ('cat'): { 
  11.         return getBaseSpeed() * 1.5 
  12.       } 
  13.       case ('dog'): { 
  14.         return getBaseSpeed() * 2 
  15.       } 
  16.       default: { 
  17.         return getBaseSpeed() 
  18.       } 
  19.     } 
  20.   } 

我们可以这样重构:

  1. class Animal { 
  2.   constructor(type) { 
  3.     this.type = type; 
  4.   } 
  5.   getBaseSpeed() { 
  6.     return 100; 
  7.   } 
  8. class Cat extends Animal { 
  9.   getSpeed() { 
  10.     return super.getBaseSpeed() * 1.5; 
  11.   } 
  12. class Dog extends Animal { 
  13.   getSpeed() { 
  14.     return super.getBaseSpeed() * 2; 
  15.   } 

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

采用空对象

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

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

  1. class Person { 
  2.   //... 

我们可以这样重构:

  1. class Person { 
  2.   //... 
  3. class NullPerson extends Person { 
  4.   //... 

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

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

John Au-Yeung 来源:medium 译者:前端小智

原文:https://levelup.gitconnected.com/javascript-refactoring-conditionals-6d74a1138c96

本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系 大迁世界公众号。

 

责任编辑:武晓燕 来源: 大迁世界
相关推荐

2020-06-08 08:46:59

JavaScript条件类名

2020-06-09 09:13:12

JavaScript重构对象

2022-04-21 07:20:39

Javascript重构逻辑

2020-06-01 08:42:11

JavaScript重构函数

2020-05-27 09:30:52

JavaScript重构函数

2022-07-04 08:51:43

条件语句JavaScript

2019-06-27 10:35:40

JavaScript条件式匹配条件

2011-06-03 13:48:18

JavaScript重构

2017-03-06 20:39:41

整洁代码Clean Code

2020-12-17 07:52:38

JavaScript

2011-06-09 15:27:01

JavaScript

2021-05-26 08:50:37

JavaScript代码重构函数

2020-09-23 10:09:43

Dockerfile

2021-08-26 05:04:53

JavaScript调试技巧

2020-09-29 08:14:46

JavaScript开发代码

2023-01-11 11:35:40

重构PythonPythonic

2023-09-26 12:04:15

重构技巧Pythonic

2023-10-19 08:00:00

2021-07-10 14:22:24

前端代码条件逻辑

2023-02-06 12:00:00

重构PythonPythonic
点赞
收藏

51CTO技术栈公众号