Heim > Web-Frontend > js-Tutorial > Vermeidung der Fallstricke ungenauer boolescher Auswertungen in JS/TS

Vermeidung der Fallstricke ungenauer boolescher Auswertungen in JS/TS

WBOY
Freigeben: 2024-07-21 12:25:38
Original
718 Leute haben es durchsucht

Éviter les pièges des évaluations booléennes imprécises en JS/TS

In der Welt der Webentwicklung stehen wir oft vor Herausforderungen, die auf den ersten Blick einfach erscheinen, sich aber schnell in komplexe Rätsel verwandeln können. Kürzlich hatte ich während eines Angular-Projekts ein interessantes Erlebnis, das mich daran erinnerte, wie wichtig Präzision bei der Auswertung boolescher Bedingungen in TypeScript ist. Ich möchte diese Lektion mit Ihnen teilen und hoffe, dass sie Ihnen hilft, dieselben Fallstricke zu vermeiden.

Der Kontext des Problems

Die Ausgangssituation

In meinem Angular-Projekt wurde ich mit einer Bedingung konfrontiert, die vier boolesche Variablen betraf. Von diesen vier waren zwei auf asynchrone Daten angewiesen, die über Observables vom Backend kamen. Das Ziel war einfach: Die Bedingung sollte nur dann wahr sein, wenn diese beiden spezifischen Variablen falsch waren.

Der anfängliche Ansatz und seine Grenzen

Zunächst habe ich mich für einen Ansatz entschieden, der mir logisch und prägnant erschien:

if (terrainPret && arbitreArrive && 
    !equipeLocaleAbsente && !equipeVisiteuseAbsente) {
  // Commencer le match
}
Nach dem Login kopieren

Dieser Ansatz erschien elegant: Die Verwendung des Ausrufezeichens (!) sollte sicherstellen, dass asynchrone Variablen falsch waren. Allerdings stellte ich schnell fest, dass diese Methode eine subtile Falle verbarg.

Die boolesche Auswertungsfalle

Die Offenbarung

Das Problem trat auf, als mir klar wurde, dass sich mein Code nicht wie erwartet verhielt. Nach einer Untersuchung wurde mir klar, dass ich einen entscheidenden Aspekt der booleschen Auswertung in TypeScript übersehen hatte.

Die technische Erklärung

In TypeScript gelten mehrere Werte als „falsch“, das heißt, sie werden in einem booleschen Kontext als falsch ausgewertet. Zu diesen Werten gehören:

  • falsch
  • 0
  • "" (leerer String)
  • null
  • undefiniert
  • NaN

In meinem Fall könnten asynchrone Variablen undefiniert sein, bevor sie einen Wert vom Backend erhalten. Folglich war die Bedingung !equipeLocaleAbsente beispielsweise nicht nur wahr, wenn die Variable falsch war, sondern auch, wenn sie undefiniert war.

Die Lösung: Seien Sie explizit

Der korrigierte Ansatz

Um dieses Problem zu lösen, musste ich meinen Zustand deutlicher formulieren:

if (terrainPret && arbitreArrive && 
    equipeLocaleAbsente === false && equipeVisiteuseAbsente === false) {
  // Commencer le match
}
Nach dem Login kopieren

Dieser Ansatz stellt sicher, dass asynchrone Variablen speziell falsch sind und nicht einfach nur ein „falscher“ Wert.

Die Vorteile der Präzision

Diese Lösung hat mehrere Vorteile:

  1. Es beseitigt Unklarheiten bei der Bewertung der Bedingungen.
  2. Dadurch wird der Code lesbarer und seine Absichten werden deutlicher.
  3. Es verhindert unerwartetes Verhalten im Zusammenhang mit der Auswertung „falscher“ Werte.

Abschluss

Diese Erfahrung hat mich daran erinnert, wie wichtig Präzision und Klarheit im Code sind, insbesondere bei der Arbeit mit asynchronen Operationen und booleschen Auswertungen. Es unterstreicht auch die Notwendigkeit, die Nuancen der von uns verwendeten Sprache zu verstehen.

Das obige ist der detaillierte Inhalt vonVermeidung der Fallstricke ungenauer boolescher Auswertungen in JS/TS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage