共计 2619 个字符，预计需要花费 7 分钟才能阅读完成。
John Au-Yeung
来源：medium
译者：前端小智
点赞再看，养成习惯
本文
GitHubhttps://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎 Star 和完善，大家面试可以参照考点复习，希望我们一起有点东西。
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 实例。
这样就无需使用条件检查这些值。
代码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。
原文：https://levelup.gitconnected….
交流
文章每周持续更新，可以微信搜索「大迁世界」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎 Star 和完善，大家面试可以参照考点复习，另外关注公众号，后台回复 福利，即可看到福利，你懂的。
