JavaScript가 함수 복잡성을 줄이는 방법에 대한 자세한 설명

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

이 글에서는 함수 복잡성을 줄이는 방법을 살펴보겠습니다.

중복 코드를 같은 위치로 이동

중복 코드를 추출하여 같은 위치에 병합해야 수정해야 할 부분이 있을 때 한 곳만 변경하면 되므로, 동시에 실수할 가능성도 줄어듭니다.

다음 코드를 쉽게 작성할 수 있다고 가정해 보겠습니다.

const button = document.querySelector('button');
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    document.querySelector("p").style.color = 'red';
  } else {
    document.querySelector("p").style.color = 'green';
  }
})

위 코드에는 두 개의 document.querySelector(“p”)가 있는데, document를 넣으면 이렇게 최적화할 수 있습니다. querySelector("p")를 변수에 추가한 다음 다음과 같이 해당 변수를 사용합니다. document.querySelector(“p”)，我们可以这样优化，把document.querySelector(“p”) 保存到一个变量中，然后使用该变量即可，如下所示：

const button = document.querySelector('button');
const p = document.querySelector("p");
let toggled = true;
button.addEventListener('click', () => {
  toggled = !toggled;
  if (toggled) {
    p.style.color = 'red';
  } else {
    p.style.color = 'green';
  }
}

这样我们就不必写长长的document.querySelector("p")，只需写个变量 p 就行了。

另一个常见的代码实例中的数字，光看数字我们很难知道其表示的含义：

let x = 1;
let y = 1;
let z = 1;

我们不知道上面这三个一表示什么，所以我们可以移除重复的代码，并用一个合适的变量名来表示，如下所示：

const numPeople = 1;
let x = numPeople;
let y = numPeople;
let z = numPeople;

这样我们就可以知道 numPeople 的值为1，其表示的人的数量。

简化函数

函数应尽可能简单，最好只做一件事，行数也不要太多，最多不能超过 30 行。

我们不应该使用 ES5 类的方式，也不应将IIFE用于模块或块。相反，我们应该使用类语法，其中可以在类中包含该类的多个实例方法。这会大大减少了函数的体量。

同样，只要我们可以定义函数，函数就应该是纯函数，这意味着他们不应该产生副作用。

例如，最好的简单函数是如下：

const add = (a, b) => a + b;

上面的函数没有任何副作用，因为它不会在函数外部修改任何变量。 另外，它也是一个纯函数，对于相同的输入，输出的结果也都一样的。

使用卫语句代替嵌套语句

卫语句的定义用法

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

有时候条件式可能出现在嵌套n次才能真正执行，其他分支只是简单报错返回的情况，对于这种情况，应该单独检查报错返回的分支，当条件为真时立即返回，这样的单独检查就是卫语句（guard clauses).卫语句可以把我们的视线从异常处理中解放出来，集中精力到正常处理的代码中。

比如我们可能会编写如下的代码 ：

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName === 'string') {
    if (typeof lastName === 'string') {
      if (typeof greeting === 'string') {
        return `${greeting}, ${firstName}${lastName}`;
      }
    }
  }
}

我们可以这样优化

const greet = (firstName, lastName, greeting) => {
  if (typeof firstName !== 'string') {
    throw new Error('first name is required');
  }
  if (typeof lastName !== 'string') {
    throw new Error('last name is required');
  }
  if (typeof greeting !== 'string') {
    throw new Error('greeting is required');
  }
  return `${greeting}, ${firstName}${lastName}`;
}

在第二个示例中，如果每个参数都不是字符串，则抛出错误，从而消除了嵌套的if语句。

这将嵌套的if语句在执行相同操作时减少为没有嵌套的if语句。

嵌套很难阅读和理解，我们应该在所有地方都摆脱它们。

总结

重复的代码总是不好的。 我们应该永远记住“不要重复自己（DRY）”的原则。

另外应该使用一些新的方式来代替 ES5 时代的写法。

最后，应将嵌套的if语句替换为卫语句，因为它们可以执行与嵌套的ifrrreee

이렇게 하면 긴 document.querySelector("p") 코드를 작성할 필요가 없습니다. >, 변수 p를 작성하면 됩니다.

코드에 있는 숫자의 또 다른 일반적인 예는 숫자만 보고는 숫자가 무엇을 의미하는지 알기 어렵습니다. rrreee

위의 세 가지가 무엇을 의미하는지 알 수 없으므로 중복된 코드를 제거하고 적합한 코드를 사용할 수 있습니다. one 변수명은 다음과 같이 표현됩니다. 🎜rrreee🎜그러므로 numPeople의 값이 사람 수를 나타내는 1임을 알 수 있습니다. 🎜🎜🎜🎜간단한 기능🎜🎜🎜🎜기능은 최대한 단순해야 하며, 한 가지 작업만 수행하는 것이 바람직하며, 줄 수는 너무 많아도 안 되고 최대 30줄을 넘지 않아야 합니다. 🎜🎜ES5 클래스를 사용해서는 안 되며, 모듈이나 블록에 🎜IIFE🎜을 사용해서도 안 됩니다. 대신, 클래스 내에 클래스의 여러 인스턴스 메서드를 포함할 수 있는 클래스 구문을 사용해야 합니다. 이렇게 하면 함수의 크기가 크게 줄어듭니다. 🎜🎜또한 함수를 정의할 수 있는 한 함수는 순수 함수여야 하며, 이는 부작용이 없어야 함을 의미합니다. 🎜🎜예를 들어 가장 간단한 함수는 다음과 같습니다. 🎜rrreee🎜위 함수는 함수 외부의 변수를 수정하지 않으므로 부작용이 없습니다. 또한 동일한 입력에 대해 출력 결과도 동일합니다. 🎜🎜🎜🎜중첩 문 대신 가드 문을 사용하세요🎜🎜🎜🎜가드 문의 정의 및 사용법🎜

🎜가드 문은 복잡한 조건식을 매우 복잡한 표현식과 같은 여러 조건식으로 분할하는 것입니다. if-then-else 문의 여러 레이어는 논리를 구현하기 위해 여러 if 문으로 변환됩니다. 이러한 여러 if 문은 보호 문입니다🎜

🎜때때로 조건식이 중첩되어 n번 나타날 수 있으며 다른 분기도 실행될 수 있습니다. 이 경우 오류와 함께 반환된 분기를 별도로 확인하고 조건이 true인 경우 즉시 반환해야 합니다. 이러한 별도의 확인은 보호 절이므로 예외 처리 및 집중에서 벗어날 수 있습니다. 정상적인 처리 코드에서. 🎜🎜예를 들어 다음과 같은 코드를 작성할 수 있습니다. 🎜rrreee🎜다음과 같이 최적화할 수 있습니다🎜rrreee🎜두 번째 예에서는 각 매개변수가 문자열이 아니면 오류가 발생하므로 중첩된 if가 제거됩니다. 코드>문. 🎜🎜이렇게 하면 동일한 작업을 수행하는 동안 중첩된 <code>if 문이 중첩되지 않은 if 문으로 줄어듭니다. 🎜🎜둥지는 읽고 이해하기 어렵습니다. 모든 곳에서 제거해야 합니다. 🎜🎜🎜🎜 요약 🎜🎜🎜🎜중복 코드는 항상 나쁩니다. 우리는 “Don’t Repeat Yourself(DRY)” 원칙을 항상 기억해야 합니다. 🎜🎜또한 ES5 시대에는 작성 방법을 대체하기 위해 몇 가지 새로운 방법이 사용되어야 합니다. 🎜🎜마지막으로, 중첩된 if 문은 가드 문으로 대체되어야 합니다. 이는 중첩된 if 문과 동일한 검사를 수행할 수 있기 때문에 읽기 쉽습니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 JavaScript가 함수 복잡성을 줄이는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!