在本文中,我们将介绍一些优化条件表达式相关的重构思路。
分解条件表达式
我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:
- 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
本文转载自微信公众号「 大迁世界」,可以通过以下二维码关注。转载本文请联系 大迁世界公众号。