クリーンな JS コードを記述するにはどうすればよいですか?共有すべき 5 つの書き方のヒント

読書の負担を軽減し、創造的な思考を刺激し、JavaScript スキルを簡単に学習します。 Rigongyiping、jym、rush~

次のコードのように、数値を

定数として定義します。

const isOldEnough = (person) => {
  person.getAge() >= 100 を返します。

この 100 が具体的に何を指すのか誰にも分かりません

。

通常、この 100 が具体的にどのような値を表すかを推測して判断するには、関数コンテキストを組み合わせる必要があります。

このような番号が複数ある場合、より大きな混乱を引き起こしやすくなります。

クリーンな JavaScript を作成します。数値を定数として定義すると、

この問題は明確に解決されます。

const AGE_REQUIREMENT = 100;
const isOldEnough = (人) => {
  person.getAge() >= AGE_REQUIREMENT; を返します。
ここ

で、定数の名前を宣言すると、100 が「年齢要件」を意味することがすぐにわかります。変更する場合、すぐに見つけて 1 か所で変更し、複数の場所で反映させることができます。

2. ブール値を関数のパラメータとして使用することは避けてください。

ブール値をパラメータとして関数に渡すことは、コードの混乱を引き起こしやすい一般的な記述方法です。

const validateCreature = (クリーチャー, isHuman) => {
  if (isHuman) {
    // ...
  } それ以外 {
    // ...
  }

パラメータとして関数に渡されるブール値は、明確な意味を表現できません。この関数が判断を行って 2 つ以上の状況を生成することを読者に伝えることしかできません

。

ただし、私たちは関数に対して単一責任の原則を提唱しています。そのため、

クリーンな JavaScript を作成します。関数のパラメーターとしてブール値を使用しないようにします。

const validateperson = (person) => {
  // ...
}
const validateCreature = (クリーチャー) => {
  // ...
3.

複数の条件をカプセル化するには、

次のようなコードを書くことがよくあります:

if (
  person.getAge() > 30 &&
  person.getName() === "サイモン" &&
  person.getOrigin() === "スウェーデン"
) {
  // ...

、

時間が経つと、これらの判断が何のために行われているのか突然理解できなくなるため、これらの条件を変数または関数でカプセル化することをお勧めします。

クリーンな JavaScript を作成する: 複数の条件をカプセル化する

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "サイモン" &&
  person.getOrigin() === "スウェーデン";
if (isSimon) {
  // ...
}

または

const isSimon = (人) => {
  戻る （
    person.getAge() > 30 &&
    person.getName() === "サイモン" &&
    person.getOrigin() === "スウェーデン"
  );
};
if (isSimon(人)) {
  // ...
ああ

、これらの条件は、この人が Simon であるかどうかを判断するためのものであることがわかりました ~

この種のコードは宣言型コードなので、読みやすくなっています。

4. 否定的な判断を避ける

条件付きの判断では、否定的な判断を使用すると、思考にさらなる負担がかかります。

たとえば、以下のコードでは、条件!isCreatureNotHuman(creature)が二重否定になっているため、少し読みにくくなっています。

const isCreatureNotHuman = (クリーチャー) => {
  // ...
}

if (!isCreatureNotHuman(生き物)) {
  // ...

を

作成する: 読みやすくするために次の記述ルールに書き換えることにより、否定的な判断条件を回避します

。これはほんの小さなトリックですが、大量のコード ロジックでは、多くの場所でこの原則に従うことが非常に重要になります。役に立ちます。

コードを読んでいると、「悪い」書き方を目にすると我慢できなくなり、千マイルの堤防がアリの巣になって崩壊してしまうことがよくあります。

const isCreatureHuman = (生き物) => {
  // ...
}
if (isCreatureHuman(生き物)) {
  // ...
5.

if...else... の多くを避ける

この点は常に Bengua によって強調されてきました。

たとえば、次のコード:

if(x===a){
   レス=A
}else if(x===b){
   レス=B
}else if(x===c){
   レス=C
}else if(x===d){
    //...
マップ

として書き換えます:

let mapRes={
    あ：あ、
    b:B、
    c:C、
    //...
}
res=mapRes[x]

別の例は次のコードです:

const isMammal = (creature) => {
  if (生き物 === "人間") {
    true を返します。
  } else if (生き物 === "犬") {
    true を返します。
  } else if (生き物 === "猫") {
    true を返します。
  }
  // ...
false を返します。

const isMammal = (creature) => {

配列として書き換えられます

。

  const 哺乳類 = ["人間", "犬", "猫", /* ... */];
  哺乳類.includes(生き物)を返します;

を

書く: 大量の if...else... を避ける したがって

、コード内に大量の if...else... がある場合は、もう 1 ステップ考えて、少し変更できるかどうかを確認してください。コードをより「きれいに」見せるためです。

まとめ: 上記のテクニックは、例では言及する価値がないかもしれませんが、実際のプロジェクトでは、ビジネス ロジックが複雑になり、コードの量が多くなった場合、これらのヒントは間違いなくプラスの効果をもたらし、さらには想像を超える助けになります。

以上がきれいなJSコードの書き方でしょうか？詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。