JavaScriptの条件判断活用スキルまとめ

この記事は、javascript に関する関連知識を提供します。主に JavaScript の条件判断の使用テクニックについて詳しく説明しています。必要な友人は参考にしてください。見てみましょう。助けなければなりません。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

この記事では、非常に短い時間 よりシンプルで読みやすいコードを書くために、JavaScript でより単純な条件判断を記述する方法を紹介します。

色の値を 16 進エンコーディングに変換する関数があるとします。

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

この関数の機能は非常に単純です。つまり、色の文字列を渡し、対応する 16 進数を返します。渡されたものが文字列でない場合、または何も渡されない場合は、白が返されます。 ten が返されます。16 進数です。

次に、このコードの最適化を開始します。

文字列を条件として直接使用することは避ける

文字列を条件として直接使用することには問題があります。つまり、スペルを間違えると恥ずかしいことになります。

convertToHex("salte")

このエラーを回避するには、定数を使用します。

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

typescript を使用している場合は、列挙型を直接使用できます。

オブジェクトの使用

実際、上記のコードから、16 進値をオブジェクトの値に直接格納できることを見つけるのは難しくありません。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

こうすることで、コードがより簡潔になり、読みやすくなります。

期待を満たさない状況を事前に返す

もう 1 つのベスト プラクティスは、期待を満たさない状況を関数の先頭に記述し、事前に返すことで、戻り忘れを避けることができます。 。

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

この方法では他に何も必要ありません。この手法を使用すると、コード内の他の多くの部分を削除できます。

オブジェクトで Map を使用する

map はあらゆる種類のキーを格納でき、Map.prototype を継承し、より便利なメソッドとプロパティを備えているため、map を使用する方がより専門的になります。

そして、プロパティにアクセスするには Object の方が便利なので、引き続き Object を使用して列挙を実装できます。

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

マップは関数も保存できます

多くの色 (最大数千色) を保存し、バックエンド構成もサポートする必要があり、結果は何らかの方法で取得できるとします。計算プロセスの。

次に、Map を使用して関数を保存できます。

return Colors.get(color)()

三項式とスイッチは避けてください

三項式は短いですが、可読性が大幅に低下し、複数レベルの条件になると非常に読みにくくなります。

switch には if に比べて明らかな利点はありませんが、場合によっては戻りやすくなり、コードが期待どおりに実行されなくなることがあります。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がJavaScriptの条件判断活用スキルまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。