JavaScript が関数の複雑さを軽減する方法の詳細な説明

JavaScript は習得しやすいプログラミング言語であり、特定のアクションを実行するプログラムを簡単に作成できます。ただし、きれいな JavaScript コードを記述するのは困難です。

この記事では、関数の複雑さを軽減する方法を見ていきます。

重複したコードを同じ場所に移動します

重複したコードを抽出して同じ場所にマージする必要があります。変更するには 1 か所を変更するだけで済み、エラー率も下がります。

次のコードを簡単に記述できるとします。

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';
  }
})

上記のコードには 2 つの 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;

上の 3 つは何を表しているのかわかりません。したがって、次のように、重複コードの削除を移動し、適切な変数名で表すことができます。

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

したがって、

numPeople の値が 1 であることがわかります。人数を表します。

簡略化された関数

関数はできるだけ単純である必要があります。実行することは 1 つだけであることが最善です。行数は制限されません。最大数は 30 行を超えてはなりません。

ES5 クラスや

IIFE をモジュールやブロックに使用すべきではありません。代わりに、クラス内にクラスの複数のインスタンス メソッドを含めることができるクラス構文を使用する必要があります。これにより、関数のサイズが大幅に削減されます。

同様に、関数を定義できる限り、関数は純粋関数である必要があります。つまり、関数には副作用があってはなりません。

たとえば、最も単純な関数は次のとおりです。

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

上記の関数は、関数の外部の変数を変更しないため、副作用はありません。また、これも純粋関数であり、同じ入力に対しては出力結果も同じになります。

#ネストされたステートメントの代わりにガード ステートメントを使用するガード ステートメントの定義と使用法

ガード ステートメントは複雑ですステートメント 条件式は複数の条件式に分割されます。たとえば、複数の層の if-then-else ステートメントでネストされた非常に複雑な式は、ロジックを実装するために複数の if ステートメントに変換されます。これらの複数の if ステートメントはガード ステートメントです

場合によっては、条件文が実際に実行される前にネストに n 回出現することがあります。他のブランチは単にエラーを報告して戻ります。この場合、エラーを報告するブランチを個別にチェックする必要があります。条件が true の場合はすぐに戻ります。このような個別のチェックはガード句 (ガード句) です。ガード句を使用すると、例外処理から目を解放し、通常のコード処理に集中できます。

たとえば、次のコードを記述できます:

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}`;
}

2 番目の例では、各パラメータが文字列でない場合、スローされます。エラーが発生するため、ネストされた

if

ステートメントが削除されます。 これにより、同じ操作を実行しながら、ネストされた

if

ステートメントがネストされていない if ステートメントに削減されます。 巣は読みにくく、理解しにくいため、どこからでも取り除く必要があります。

概要重複コードは常に悪影響を及ぼします。私たちは常に「Don't Reply Yourself (DRY)」原則を覚えておく必要があります。

さらに、ES5 時代の書き込み方法を置き換えるために、いくつかの新しい方法を使用する必要があります。

最後に、ネストされた

if

ステートメントは、ネストされた if ステートメントと同じチェックを実行できるため、読み取りが容易になるガード ステートメントに置き換える必要があります。 プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がJavaScript が関数の複雑さを軽減する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。