JavaScript リファクタリングのヒント

John Au-Yeung
出典:medium
翻訳者:フロントエンドのXiaozhi

「いいね！」と繰り返し読んで習慣を身につける

これ記事GitHub https://github.com/qq44924588... が含まれており、過去の高評価記事のさらに多くのカテゴリも編集され、私のドキュメントやチュートリアル資料の多くも編集されています。スターとパーフェクトへようこそ。面接中に試験ポイントを復習することができます。一緒に何かを学ぶことができれば幸いです。

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;

条件式のマージ

上記とは逆に、短い条件式が複数ある場合は、それらを 1 つにマージすることができます。たとえば、次のようなコードを書くことができます:

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();

この方法では、繰り返す必要がありません。 ＃＃＃＃ｃｏｍｐｌｅｔｅ＃＃＃関数を不必要に呼び出します。 制御フラグを削除します

ループ内で制御フラグを使用する場合、コードは次のようになります:

let done = false;
while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

上記のコードでは、

done

は制御フラグです。condition が true の場合、done を true に設定して、while を停止します。ループ。 上記と比較して、次のように

break

を使用してループを停止できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">let done = false; while (!done) {   if (condition) {     break;   }   //... }</pre><div class="contentsignin">ログイン後にコピー</div></div>ネストされた条件の代わりにガード ステートメントを使用します

Guardステートメント 複雑な条件式を複数の条件式に分割することです。たとえば、

if-then-else

ステートメントの複数の層でネストされた非常に複雑な式は、複数の に変換されます。これらの複数の if ステートメントはガード ステートメントです。 ネストされた条件ステートメントは読みにくいため、代わりに ガード ステートメント

を使用できます。たとえば、次のようなコードを作成できます:

const fn = () => {
  if (foo) {
    if (bar) {
      if (baz) {
        //...
      }
    }
  }
}

次のように最適化できます:

  if (!foo) {
    return;
  }
  if (!bar) {
    return;
  }
  if (baz) {
    //...
  }
}

上記のコードでは、ガード ステートメントは次のとおりです:

if (!foo) {
  return;
}

と

if (!bar) {
  return;
}

これらの条件が false の場合、関数が早期に返されるため、ネストする必要はありません。

条件をポリモーフィズムで置き換える

switch

ステートメントを使用する代わりに、

switch ステートメントを使用して、さまざまな種類の同じサブクラスを作成できます。 data 異なるタイプのデータに対して同じ操作を実行し、オブジェクトのタイプに応じて異なるメソッドを使用します。 たとえば、次のようなコードを書くことができます:

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 オブジェクトを取得します

null

または

unknown を繰り返しチェックすると、 class または、unknown バージョンをサブクラス化し、それを使用します。 たとえば、次のようなコードを記述します:

class Person {
  //...
}

次のようにリファクタリングできます:

class Person {
  //...
}
class NullPerson extends Person {
  //...
}

次に、

Person

を

に設定します。 null

または

unknown オブジェクト プロパティを、Nullperson インスタンスに設定する代わりに使用します。 これにより、これらの値を確認するために条件を使用する必要がなくなります。 推奨チュートリアル: 「

JS チュートリアル

」

以上がJavaScript リファクタリングのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。