10 Häufige JavaScript Bugs und wie man sie vermeidet - Dummies

Selbst die besten JavaScript-Programmierer machen Fehler. Manchmal verursachen diese Fehler, dass Ihr Programm nicht die gewünschten Ergebnisse liefert, und manchmal bewirken sie, dass das Programm überhaupt nicht ausgeführt wird. Hier sind zehn häufige Fehler, die JavaScript-Programmierer auf allen Ebenen häufig machen.

Gleichheitswirren

Ist x gleich y ? Ist x wahr? Die Fragen der Gleichheit sind zentral für JavaScript und können ziemlich verwirrend wirken. Sie drehen sich in JavaScript um drei Bereiche: namentlich um bedingte Anweisungen und Operatoren (if, && usw.), um den Gleichheitsoperator (==) und um den strikten Gleichheitsoperator (===).

Um das Programmieren noch komplizierter zu machen, sieht der Zuweisungsoperator (=) - scheinbar ähnlich wie das, was die meisten Leute als Gleichheitszeichen bezeichnen. Lass dich nicht täuschen!

Missbrauch der Zuweisung vermeiden

Der Zuweisungsoperator ordnet den Operanden rechts dem Operanden links zu. Zum Beispiel:

var a = 3;

Diese Anweisung gibt der neuen Variablen mit dem Namen a den Wert von 3.

Ein -Operand ist alles in einem Programm. Betrachten Sie es als ein Substantiv in -language, während Operatoren (+, -, *, / und so weiter) wie Verben sind.

Zuweisungsoperatoren können auch Ausdrücke auf der rechten Seite haben, die ausgewertet und dann der Variablen auf der linken Seite zugewiesen werden.

Ein häufiger Fehler, den Anfänger in der Sprache machen, ist die Zuordnungsverwechslung zum Vergleich - zum Beispiel:

if (a = 4) {…}

Dieser Code wird nicht wie erwartet ausgeführt, wenn das, was Sie erwartet haben, um den Wert von a mit der Zahl 4 zu vergleichen.

Den gleichen Fallstricken ausweichen

Der Operator equals (==) und sein böser Zwilling der Operator ungleich (! =) Können sehr flexibel, aber auch sehr gefährlich sein. Verwenden Sie es so wenig wie möglich, wenn überhaupt. Hier ist der Grund:

0 == '0'

Jeder, der eine Zeitlang programmiert hat, weiß, dass eine Zahl innerhalb von Anführungszeichen nicht wirklich eine Zahl ist. Der Operator == betrachtet sie jedoch als identisch, da die beiden Werte vor dem Vergleich denselben Typ annehmen. Dies kann zu allen Arten von Problemen führen, die schwer aufzuspüren sind.

Wenn Sie eine Zeichenkette mit einer Zahl vergleichen und ein Ergebnis von true erhalten wollen, wenn sie gleich aussieht, ist es viel sicherer, dies explizit wie folgt zu tun:

parseInt (0) = == parseInt ("0")

Diese Anweisung wird ebenfalls als wahr ausgewertet, es ist jedoch keine Voodoo-Magie beteiligt. Die strikte Gleichheit (===) und die strikte Gleichheit (! ==) werden genau das tun, was Sie erwarten würden.

0 === '0'

Die beiden Operanden sind eindeutig unterschiedliche Typen und das Ergebnis ist falsch.

Nicht übereinstimmende Klammern

Wenn ein Programm komplizierter wird und besonders wenn Sie mit JavaScript-Objekten arbeiten, beginnen sich die Klammern zu häufen. Hier ist ein JavaScript-Objekt mit nicht übereinstimmenden Klammern:

{"status": "OK", "results": [{"id": 12, "title": "Codierung von JavaScript für Dummies", "author": "Chris Minnick und Eva Holland "," publication_date ":" "," summary_short ":" "," link ": {" Typ ":" Rezension "," URL ":" "," link_text ":" Lesen Sie den New York Times Review 

der Kodierung von JavaScript für Dummies "}," awards ": [{" type ":" Nobelpreis "," url ":" ",}]}

Können Sie die Probleme hier sehen? Wenn dies geschieht, kann ein guter Code-Editor von unschätzbarem Wert sein! Sublime Text verfügt über eine Funktion, die Ihnen eine Klammer-Übereinstimmung zeigt, wenn Sie den Cursor neben einer Start- oder End-Klammer platzieren.

Übereinstimmende Klammern in Sublime Text hervorheben.

Nicht übereinstimmende Anführungszeichen

JavaScript ermöglicht es Ihnen, einfache Anführungszeichen oder doppelte Anführungszeichen zum Definieren von Zeichenfolgen zu verwenden. Mit der Regel, dass Sie Ihre Zeichenfolge mit der gleichen Art von Anführungszeichen beenden müssen, mit der Sie begonnen haben, ist JavaScript jedoch überhaupt nicht flexibel. Achten Sie auch auf Anführungszeichen und Apostrophe in Zeichenketten, die die gleichen Zeichen wie die Anführungszeichen um die Zeichenkette sind! Zum Beispiel:

var movieName = "Popeye '; // Error! var welcomeMessage = 'Danke,' + Vorname + ', lass uns JavaScript lernen! ' // Error!

Fehlende Klammern

Dieser Fehler taucht am häufigsten in bedingten Anweisungen auf, insbesondere in solchen, in denen mehrere Bedingungen vorliegen. Betrachten Sie dieses Beispiel:

if (x> y) && (y <1000) {…}

Überprüfen Sie, ob beide Bedingungen erfüllt sind. Es gibt jedoch drei Bedingungen, die alle in Klammern stehen. Was im vorhergehenden Beispiel fehlt, sind die Klammern um die große Bedingung &&, die besagt, dass beide anderen Bedingungen wahr sein müssen, um mit dem Code zwischen den Klammern fortfahren zu können.

Um richtig zu sein, sollte diese Anweisung wie folgt lauten:

if ((x> y) && (y <1000)) {…}

Fehlendes Semikolon

JavaScript-Anweisungen sollten immer mit einem Semikolon enden. Wenn Sie jedoch jede Anweisung in eine eigene Zeile schreiben und das Semikolon weglassen, wird der Code trotzdem so ausgeführt, als wären die Semikolons da. Obwohl der Code immer noch ausgeführt wird, kann das Weglassen des Semikolons zu Problemen führen, wenn Sie Code neu anordnen oder wenn zwei Anweisungen irgendwie auf derselben Zeile landen.

Der beste Weg, diesen Fehler zu vermeiden, besteht darin, am Ende einer Anweisung immer ein Semikolon zu verwenden.

Großschreibung

Bei JavaScript wird zwischen Groß- und Kleinschreibung unterschieden. Das bedeutet, dass die von Ihnen erstellten Variablen bei jeder Verwendung genau gleich groß geschrieben werden müssen. Es bedeutet auch, dass Funktionen richtig kapitalisiert werden müssen, um zu funktionieren.

Einer der häufigsten Orte, an dem dieser Fehler auftritt, ist die getElementByld-Methode des Document-Objekts.Sie würden denken, dass es getElementBylD geschrieben würde, weil das mehr grammatikalischen Sinn machen würde, aber es ist nicht korrekt!

Code vor dem Laden referenzieren

JavaScript-Code wird normalerweise in der Reihenfolge geladen und ausgeführt, in der er in einem Dokument vorkommt. Dies kann Probleme verursachen, wenn Sie auf HTML verweisen, die später im Dokument von einem Skript platziert wird, das sich im Kopf des Dokuments befindet.

Das Referenzieren von HTML vor dem Laden führt zu einem Fehler.

Dokument. getElementById ("MeinDiv"). innerHTML = "Dieses div ist mein div"; Dieses div ist dein div.

Dieser Code führt zu einem Fehler, weil der Browser zum Zeitpunkt der Ausführung des JavaScript noch nicht über das div mit der id = "myDiv" informiert, die später auf der Webseite erscheint.

Um dieses Problem zu vermeiden, haben Sie einige Möglichkeiten:

• Platzieren Sie Ihr JavaScript am Ende Ihrer HTML-Datei, kurz vor

• Setzen Sie Ihren JavaScript-Code in eine Funktion ein. Dann können Sie die Funktion mit einem onload-Ereignisattribut im Start-Body-Tag aufrufen.

Das Problem wurde hier mit der zweiten Methode gelöst.

Warten Sie, bis der HTML-Code geladen ist, bevor Sie das Skript ausführen.

Funktion nameMyDiv () {Dokument. getElementById ("MeinDiv"). innerHTML = "Dieses div ist mein div";} Dieses div ist dein div

Schlechte Variablennamen

Eine besonders schwer nachvollziehbare Regel ist das Verbot, reservierte Wörter als Variablennamen zu verwenden.

Interessanterweise verfügt JavaScript über mehr als 60 reservierte Wörter und viele andere, die Sie nicht als Variablennamen verwenden sollten. Anstatt alle reservierten Wörter zu speichern, besteht der beste Weg, diese Arten von Benennungsfehlern zu vermeiden, darin, einfach ein beschreibenderes Benennungsschema zu finden, das höchst unwahrscheinlich ist, jemals Pfade mit einem reservierten Wort zu kreuzen.

Beispielsweise ist der Wortname eines der reservierten Wörter von JavaScript. Wenn Sie sich angewöhnen, mit dem, was Sie benennen, spezifisch zu sein, benennen Sie Variablen zum Speichern von Dingen wie firstName, lastName, dogName und nameOfTheWind; damit vermeiden Sie Konflikte mit reservierten Wörtern.

Bereichsfehler

JavaScript hat einen Funktionsumfang und einen globalen Gültigkeitsbereich. Wenn Sie eine Variable deklarieren, ohne das Schlüsselwort var zu verwenden, hat diese Variable globalen Gültigkeitsbereich und kann überall in Ihrem Programm verwendet werden. Die Ergebnisse können sich nachteilig auf Ihr Programm auswirken. Um Bereichsfehler zu vermeiden, stellen Sie sicher, dass Sie immer das Schlüsselwort var verwenden, um neue Variablen zu erstellen.

Fehlende Parameter in Funktionsaufrufen

Wenn Sie eine Funktion erstellen, deklarieren Sie die Anzahl der Parameter, die beim Aufruf an diese Funktion übergeben werden sollen. Das Aufrufen der falschen Anzahl von Funktionen führt nicht immer zu einem Fehler in JavaScript, aber es kann zu unerwarteten Ergebnissen führen, wenn der Code in der Funktion Parameter erfordert, die nicht vorhanden sind.

Stellen Sie sicher, dass Sie Ihren Parametern beschreibende Namen geben, wenn Sie eine Funktion erstellen, und überprüfen Sie jedes Mal, wenn eine Funktion aufgerufen wird, um sicherzustellen, dass die richtige Anzahl von Parametern übergeben wird.

Zählfehler: Vergessen, dass JavaScript von 0 zählt

Wenn Sie in einem JavaScript-Array bis 10 zählen, haben Sie tatsächlich 11 Elemente. Vergessen Sie nie, dass das erste Element in einem Array den Index 0 hat.

Wenn Sie vergessen, dass JavaScript von 0 zählt, kann dies zu unerwarteten Ergebnissen führen.

var myArray = neues Array (); myArray [10] = "Liste von 10 häufigen Fehlern"; meinArray. Länge; // produziert 11!