JS 開発効率を上げる4つの超実践的なヒント

1. 短絡判定

この方法は、単純なif条件のみが必要な場合に使用できます。

x = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 の場合
  関数foo()
}

同じ if 関数は&&演算子を使用して実現できます。 && の前の条件がfalseの場合、 && の後のコードは実行されません。

x = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 && foo()

さらに if 条件を追加することもできますが、これによってもステートメントの複雑さが増すため、2 つ以上の条件を追加することはお勧めしません。

x = 0 とします。
y = 0 とします。
foo = () とすると、 console.log('実行されました');

x === 0 && y === 0 && foo()

2. オプション連鎖演算子 (?)

バックグラウンド API によって返されるデータが正しいかどうかわからないことがあるため、JS オブジェクトにkeyが存在するかどうかを頻繁に確認します。

userオブジェクトには、属性nameを持つオブジェクトが含まれています。name nameには、属性firstNameがありますuser.name.firstName直接判定に使用した場合、name 属性が存在しない場合はエラーが報告されます。したがって、判定を行う前に、user.name が存在するかどうかも判定する必要があり、2 層のネストされた if 判定が必要になります。

ユーザー = {
  名前 ： {
    名 : 'あおふかおし'
  }
}

if(ユーザー名){
  if(ユーザー名.firstName){
    console.log('ユーザーオブジェクトにfirstNameフィールドが含まれています')
  }
}

このとき、 ? user.nameを使用して操作を簡略化できます。user.name が存在しない場合はfalseも返されるため、1 層の判断を直接使用できます。

ユーザー = {
  名前 ： {
    名 : 'あおふかおし'
  }
}

if(user.name?.firstName){
  console.log('ユーザーオブジェクトにfirstNameフィールドが含まれています')
}

3. ヌル合体演算子 (??)

if/else と比較すると、三項演算子ははるかに短くなります。ロジックが単純であれば、使用するのに便利です。

例えば：

ユーザー = {
  名前 ： {
    名 : 'あおふかおし'
  }
}

foo = () => {とする
  user.name?.firstName を返します。 
    ユーザー名: 
    「firstName が存在しません」
}

コンソールログ(foo())

まず、? 演算子を使用して存在するかどうかを判断します。存在する場合は false を返します。存在しない場合は false を返します。次に、次のロジックに進みます。

?? アルゴリズムを使用してコードをより簡潔にします

ユーザー = {
  名前 ： {
    名 : 'あおふかおし'
  }
}

foo = () => {とする
  user.name?.firstName ?? を返します。 
  「firstName が存在しません」
}
  
コンソールログ(foo())

4. 終了関数を返す

次の関数は、 if elseネストを多用してxの値を決定します。

x = 1 とします。
foo = () => {とする
  x < 1の場合{
    'x は 1 未満' を返します
  } それ以外 {
    もし(x > 1){
      'xは1より大きい'を返す
    }それ以外{
      'xは1に等しい'を返す
    }
  }
}

コンソールログ(foo())

このif elseネストにより、 returnステートメントがコードの実行を終了して関数に戻るため、 else条件を削除してコードを簡素化できます。

x = 1 とします。
foo = () => {とする
  x < 1の場合{
    'x は 1 未満' を返します
  }
  もし(x > 1){
    'x はより大きい' を返す
  }
  'xは1に等しい'を返す
}

コンソールログ(foo())

これで、開発効率を向上させる 4 つの超実用的な JS のヒントに関するこの記事は終了です。開発効率を向上させる 4 つの実用的な JS のヒントの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: