JavaScript重构技巧 — 条件-重构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实例。

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

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

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

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