Fassen Sie die Fähigkeiten zur Verwendung bedingter JavaScript-Beurteilungen zusammen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er führt Sie hauptsächlich in die detaillierte Erklärung der Verwendungstechniken von JavaScript ein. Ich hoffe, dass er Ihnen gemeinsam hilft alle. .

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

In diesem Artikel wird kurz vorgestellt, wie Sie einfachere bedingte Urteile in JavaScript schreiben, damit Sie prägnanteren und besser lesbaren Code schreiben können Code.

Angenommen, wir haben eine Funktion, die Farbwerte in eine hexadezimale Kodierung umwandelt.

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'
  }
}

Die Funktion dieser Funktion ist sehr einfach: Sie übergibt die Farbzeichenfolge und gibt dann die entsprechende Hexadezimalzahl zurück. Wenn die übergebene Zeichenfolge keine Zeichenfolge ist oder nichts übergeben wird, wird die weiße Hexadezimalzahl zurückgegeben.

Als nächstes beginnen wir mit der Optimierung dieses Codes.

Vermeiden Sie die direkte Verwendung von Zeichenfolgen als Bedingungen

Es gibt ein Problem bei der direkten Verwendung von Zeichenfolgen als Bedingungen, das heißt, es wird peinlich, wenn wir Rechtschreibfehler machen.

convertToHex("salte")

Um diesen Fehler zu vermeiden, können wir Konstanten verwenden.

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)

Wenn Sie Typoskript verwenden, können Sie Aufzählungen direkt verwenden.

Objekt verwenden

Tatsächlich ist es nicht schwer, anhand des obigen Codes herauszufinden, dass wir den Hexadezimalwert direkt im Wert des Objekts speichern können.

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

Auf diese Weise wird der Code prägnanter und einfacher zu lesen.

Wenn die Erwartungen nicht erfüllt werden, kehren Sie im Voraus zurück.

Eine weitere bewährte Methode besteht darin, dass wir die Situation, die nicht den Erwartungen entspricht, an den Anfang der Veranstaltung schreiben und im Voraus zurückkehren können, um zu vermeiden, dass wir die Rückkehr vergessen.

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

Auf diese Weise ist nichts anderes nötig. Mit dieser Technik können wir viele andere Dinge in unserem Code eliminieren.

Map mit Objekt verwenden

Die Verwendung von Map ist professioneller, da Map jede Art von Schlüssel speichern kann, von Map.prototype erbt und über praktischere Methoden und Eigenschaften verfügt.

Und Object ist bequemer für den Zugriff auf Eigenschaften. Wir können Object weiterhin zum Implementieren der Aufzählung verwenden.

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 kann auch Funktionen speichern

Angenommen, wir speichern viele Farben, bis zu Tausenden von Farben, und müssen auch die Back-End-Konfiguration unterstützen, und die Ergebnisse können durch einen Berechnungsprozess erhalten werden.

Dann können wir Map zum Speichern von Funktionen verwenden.

return Colors.get(color)()

Versuchen Sie, ternäre Ausdrücke und Schalter zu vermeiden.

Obwohl ternäre Ausdrücke kurz sind, ist ihre Lesbarkeit stark eingeschränkt. Wenn es sich um eine mehrstufige Bedingung handelt, ist sie sehr schwer zu lesen.

switch hat keine offensichtlichen Vorteile gegenüber if. Stattdessen ist es manchmal einfach, zurückzukehren, was dazu führt, dass der Code nicht wie erwartet ausgeführt wird.

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Das obige ist der detaillierte Inhalt vonFassen Sie die Fähigkeiten zur Verwendung bedingter JavaScript-Beurteilungen zusammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!