JavaScript 리팩토링 팁

John Au-Yeung
출처: Medium
번역자: front-end Xiaozhi

좋아요를 누르고 다시 읽어 습관을 형성하세요

이 글 GitHub https://github.com/qq44924588. . Star and Perfect에 오신 것을 환영합니다. 인터뷰 중에 검토할 수 있는 시험 포인트를 참고하시면서 함께 배울 수 있기를 바랍니다. GitHub https://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

JavaScript는 배우기 쉬운 프로그래밍 언어이며 실행하고 작업을 수행하는 프로그램을 작성하기 쉽습니다. 그러나 깔끔한 JavaScript 코드를 작성하는 것은 어렵습니다.

---

이 기사에서는 조건식 최적화와 관련된 몇 가지 재구성 아이디어를 소개합니다.

조건식 분해

긴 조건식을 짧고 명명된 조건식으로 분해할 수 있어 읽기에 좋습니다. 예를 들어 다음과 같은 코드를 작성할 수 있습니다.

rrreee🎜위 코드는 너무 길어서 읽기에 적합하지 않습니다. 아래와 같이 여러 개의 짧고 이름이 지정된 조건식으로 나눌 수 있습니다. 🎜rrreee

조건식 병합

🎜위와 반대로 짧은 조건식이 여러 개인 경우 하나로 병합할 수 있습니다. 예를 들어 다음과 같은 코드를 작성할 수 있습니다. 🎜rrreee🎜 다음과 같이 병합할 수 있습니다. 🎜rrreee🎜 표현식이 짧기 때문에 이들을 결합해도 표현식이 길어지지 않으므로 이렇게 할 수 있습니다. 🎜

중복된 조건부 조각 병합

🎜조건부 블록에 중복된 표현식이나 문이 있는 경우 이를 제거할 수 있습니다. 예를 들어 다음과 같은 코드를 작성할 수 있습니다.🎜rrreee🎜아래와 같이 반복되는 내용을 조건식 외부로 이동할 수 있습니다.🎜rrreee🎜이런 방식으로 complete를 호출할 필요가 없습니다. > 반복적이고 불필요하게 기능합니다. 🎜

제어 플래그 삭제

🎜루프에서 제어 플래그를 사용하는 경우 코드는 다음과 같아야 합니다. 🎜rrreee🎜위 코드에서 done은 제어 플래그입니다. condition이 true인 경우 done을 true로 설정하여 while 루프를 중지합니다. . 🎜🎜위와 비교하면 아래와 같이 break를 사용하여 루프를 중지할 수 있습니다. 🎜rrreee

guard 문을 사용하여 중첩 조건 대체

🎜Guard 문은 복잡한 표현 조건 표현식은 여러 조건식으로 분할됩니다. 예를 들어 여러 수준의 중첩된 if-then-else 문이 있는 매우 복잡한 표현식은 여러 if 문으로 변환되어 구현됩니다. 이러한 여러 if 문은 보호 문입니다. 🎜🎜중첩된 조건문은 읽기 어렵기 때문에 대신 🎜guard 문🎜을 사용할 수 있습니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다: 🎜rrreee🎜 다음과 같이 최적화할 수 있습니다: 🎜rrreee🎜 위 코드에서 가드 문은 🎜rrreee🎜 및 🎜rrreee🎜 이러한 조건이 false인 경우 함수를 반환합니다. 초기에는 이렇게 중첩이 필요하지 않습니다. 🎜

조건을 다형성으로 대체

🎜 switch 문을 사용하여 다양한 종류의 데이터에 대해 동일한 하위 클래스를 생성하는 대신 switch 문을 사용할 수 있습니다. 다른 유형의 데이터에 대해 동일한 작업을 수행한 다음 개체 유형에 대해 다른 방법을 사용합니다. 🎜🎜예를 들어 다음과 같은 코드를 작성할 수 있습니다.🎜rrreee🎜다음과 같이 리팩터링할 수 있습니다.🎜rrreee🎜 switch 문이 매우 길면 case를 사용자 정의해야 합니다. 다양한 유형의 객체.코드>블록. 🎜<h2>null 객체 가져오기</h2>🎜 <code>null 또는 undefine을 반복적으로 확인하면 다음을 나타내는 null을 정의할 수 있습니다. 클래스 또는 서브클래스의 undefine 버전을 사용하세요. 🎜🎜예를 들어 다음과 같은 코드를 작성할 수 있습니다: 🎜rrreee🎜 다음과 같이 리팩터링할 수 있습니다: 🎜rrreee🎜 그런 다음 Person을 null 또는 undefine 객체 속성을 NullPerson 인스턴스로 설정하는 대신. 🎜🎜이렇게 하면 이러한 값을 확인하기 위해 조건을 사용할 필요가 없습니다. 🎜🎜🎜추천 튜토리얼: "🎜JS Tutorial🎜"🎜

위 내용은 JavaScript 리팩토링 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!