Häufige JavaScript -Fehler
Dieses Kapitel weist auf einige häufige JavaScript-Fehler hin.
Versehentliche Verwendung des Zuweisungsoperators
JavaScript-Programme können unerwartete Ergebnisse erzeugen, wenn ein Programmierer versehentlich einen Zuweisungsoperator ( =) anstelle eines Vergleichsoperators ( ==) in einer if-Anweisung verwendet.
Diese ifAnweisung gibt false(wie erwartet) zurück, da x nicht gleich 10 ist:
let x = 0;
if (x == 10)
Diese ifAnweisung gibt true(vielleicht nicht wie erwartet) zurück, weil 10 wahr ist:
let x = 0;
if (x = 10)
Diese ifAnweisung gibt false(vielleicht nicht wie erwartet) zurück, weil 0 falsch ist:
let x = 0;
if (x = 0)
Eine Zuweisung gibt immer den Wert der Zuweisung zurück.
Wir erwarten einen lockeren Vergleich
Im regulären Vergleich spielt der Datentyp keine Rolle. Diese ifAnweisung gibt true zurück:
let x = 10;
let y = "10";
if (x == y)
Im strengen Vergleich spielt der Datentyp eine Rolle. Diese ifAnweisung gibt false zurück:
let x = 10;
let y = "10";
if (x === y)
Es ist ein häufiger Fehler zu vergessen, dass switchAussagen einen strengen Vergleich verwenden:
Dies case switchzeigt eine Warnung an:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Dadurch case switchwird keine Warnung angezeigt:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Verwirrende Addition und Verkettung
Bei der Addition geht es um das Addieren von Zahlen .
Bei der Verkettung geht es um das Hinzufügen von Zeichenfolgen .
In JavaScript verwenden beide Operationen denselben +Operator.
Aus diesem Grund führt das Hinzufügen einer Zahl als Zahl zu einem anderen Ergebnis als das Hinzufügen einer Zahl als Zeichenfolge:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Beim Hinzufügen von zwei Variablen kann es schwierig sein, das Ergebnis vorherzusehen:
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Floats missverstehen
Alle Zahlen in JavaScript werden als 64-Bit- Gleitkommazahlen (Floats) gespeichert.
Alle Programmiersprachen, einschließlich JavaScript, haben Schwierigkeiten mit genauen Gleitkommawerten:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Um das obige Problem zu lösen, hilft es zu multiplizieren und zu dividieren:
Beispiel
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Brechen eines JavaScript-Strings
Mit JavaScript können Sie eine Anweisung in zwei Zeilen aufteilen:
Beispiel 1
let x =
"Hello World!";
Das Umbrechen einer Anweisung mitten in einer Zeichenfolge funktioniert jedoch nicht:
Beispiel 2
let x = "Hello
World!";
Sie müssen einen "Backslash" verwenden, wenn Sie eine Anweisung in einer Zeichenfolge umbrechen müssen:
Beispiel 3
let x = "Hello \
World!";
Falsches Semikolon
Aufgrund eines falsch platzierten Semikolons wird dieser Codeblock unabhängig vom Wert von x ausgeführt:
if (x == 19);
{
// code block
}
Brechen einer Return-Anweisung
Es ist ein standardmäßiges JavaScript-Verhalten, eine Anweisung automatisch am Ende einer Zeile zu schließen.
Aus diesem Grund liefern diese beiden Beispiele dasselbe Ergebnis:
Beispiel 1
function myFunction(a) {
let power = 10
return a * power
}
Beispiel 2
function myFunction(a) {
let power = 10;
return a * power;
}
Mit JavaScript können Sie auch eine Anweisung in zwei Zeilen aufteilen.
Aus diesem Grund wird Beispiel 3 auch das gleiche Ergebnis zurückgeben:
Beispiel 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Aber was passiert, wenn Sie die return-Anweisung in zwei Zeilen wie diese aufteilen:
Beispiel 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
Die Funktion kehrt zurück undefined!
Wieso den? Weil JavaScript dachte, Sie meinten:
Beispiel 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Erläuterung
Wenn eine Aussage unvollständig ist wie:
let
JavaScript versucht, die Anweisung zu vervollständigen, indem es die nächste Zeile liest:
power = 10;
Aber da diese Aussage vollständig ist:
return
JavaScript schließt es automatisch wie folgt:
return;
Dies liegt daran, dass das Schließen (Enden) von Anweisungen mit Semikolon in JavaScript optional ist.
JavaScript schließt die return-Anweisung am Ende der Zeile, da es sich um eine vollständige Anweisung handelt.
Unterbrechen Sie niemals eine return-Anweisung.
Zugriff auf Arrays mit benannten Indizes
Viele Programmiersprachen unterstützen Arrays mit benannten Indizes.
Arrays mit benannten Indizes werden als assoziative Arrays (oder Hashes) bezeichnet.
JavaScript unterstützt keine Arrays mit benannten Indizes.
In JavaScript verwenden Arrays nummerierte Indizes :
Beispiel
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
In JavaScript verwenden Objekte benannte Indizes .
Wenn Sie beim Zugriff auf ein Array einen benannten Index verwenden, definiert JavaScript das Array in ein Standardobjekt um.
Nach der automatischen Neudefinition führen Array-Methoden und -Eigenschaften zu undefinierten oder falschen Ergebnissen:
Beispiel:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
Beenden Sie Definitionen mit einem Komma
Nachgestellte Kommas in Objekt- und Array-Definitionen sind in ECMAScript 5 zulässig.
Objekt Beispiel:
person = {firstName:"John", lastName:"Doe", age:46,}
Array-Beispiel:
points = [40, 100, 1, 5, 25, 10,];
WARNUNG !!
Internet Explorer 8 stürzt ab.
JSON erlaubt keine nachgestellten Kommas.
JSON:
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON:
points = [40, 100, 1, 5, 25, 10];
Undefiniert ist nicht Null
JavaScript-Objekte, -Variablen, -Eigenschaften und -Methoden können undefined.
Außerdem können leere JavaScript-Objekte den Wert haben null.
Dies kann es etwas schwierig machen, zu testen, ob ein Objekt leer ist.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)