JavaScriptの条件判断の使い方スキルを話しましょう

この記事では、JavaScript に関する関連知識を紹介します。主に JavaScript の条件判断の使用スキルについて説明します。興味のある友達は一緒に見てください。皆さんのお役に立てれば幸いです。ヘルプ。

この記事では、より簡潔なコードを書くために、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 色 = { スレート: '#64748b', グレー: '#6b7280', // ... } 関数convertToHex(color) { if (!color in Colors) { '#ffffff' を返します } カラーを返す[カラー] } ConvertToHex(Colors.SLATE)

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

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

オブジェクトでマップを使用する

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

そして、プロパティにアクセスするには 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の条件判定活用テクニックの詳細説明でした。

推奨学習: 「JavaScript ビデオ チュートリアル 」

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