JavaScript-Fehler

Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Dieses Kapitel weist auf einige häufige JavaScript-Fehler hin.

Versehentliche Verwendung des Zuweisungsoperators

JavaScript-Programme können für einen Programmierer unerwartete Ergebnisse erzeugen verwendet versehentlich einen Zuweisungsoperator (=) anstelle eines Vergleichsoperators (==) in einer if-Anweisung.

Diese if-Anweisung gibt false zurück (wie erwartet), weil x ist ungleich 10:

let x = 0;
if (x == 10)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Comparisons</h2>

<p>This returns false (as expected) because x is not equal to 10:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

Diese if-Anweisung gibt true zurück (vielleicht auch nicht). wie erwartet), weil 10 ist WAHR:

let x = 0;
if (x = 10)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This returns true (maybe not as expected), because 10 is true:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

Diese if-Anweisung gibt false zurück (vielleicht auch nicht). wie erwartet), weil 0 ist FALSCH:

let x = 0;
if (x = 0)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This if statement returns false (maybe not as expected), because 0 is false:</p>

<p id="demo"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

Eine Zuweisung gibt immer den Wert der Zuweisung zurück.

Erwarten Sie einen lockeren Vergleich

Beim regulären Vergleich spielt der Datentyp keine Rolle. Diese if-Anweisung gibt zurück WAHR:

let x = 10;
let y = "10";
if (x == y)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In regular comparison, data type does not matter. This if statement returns true:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

Im strengen Vergleich spielt der Datentyp eine Rolle. Diese if-Anweisung gibt false zurück:

let x = 10;
let y = "10";
if (x === y)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>In strict comparison, data type does matter. This if statement returns false:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

Es ist ein häufiger Fehler, zu vergessen, dass switch-Anweisungen strikt verwenden Vergleich:

Dieser Fallwechsel zeigt eine Warnung an:

let x = 10;
switch(x) {
  case 10: alert("Hello");
    }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case 10: document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

Dieser Fallschalter zeigt keine Warnung an:

let x = 10;
switch(x) {
  case "10": alert("Hello");
    }

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>It is a common mistake to forget that switch statements use strict comparison.</p>
<p>This will not work:</p>

<p id="demo"></p>

<script>
let x = 10;
switch(x) {
  case "10": document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

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 einer anderen Zahl Ergebnis durch 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"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let y = 10
y += "5";
document.getElementById("demo").innerHTML = y;
</script>

</body>
</html>

Beim Hinzufügen zweier Variablen kann es schwierig sein, das Ergebnis vorherzusagen:

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"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>Adding a number as a number produces a different result from adding a number as a string:</p>

<p id="demo"></p>

<script>
let x = 10;
let y = "5";
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Missverständnis von Floats

Alle Zahlen in JavaScript werden als 64-Bit-Gleitkommazahlen gespeichert (Schwimmt).

Alle Programmiersprachen, einschließlich JavaScript, haben Schwierigkeiten damit genaue Gleitkommawerte:

let x = 0.1;
let y = 0.2;
let z = x + y            
    // the result in z will not be 0.3

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>All programming languages, including JavaScript, have difficulties with precise floating point values.</p>
<p>To solve the problem, it helps to multiply and divide:</p>

<p id="demo"></p>

<script>
let x = 0.1;
let y = 0.2;
let z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

Einen JavaScript-String brechen

Mit JavaScript können Sie eine Anweisung in zwei Zeilen aufteilen:

Beispiel 1

let x =
"Hello World!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Breaking a JavaScript Statement</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>

</body>
</html>

Das Umbrechen einer Anweisung in der Mitte einer Zeichenfolge funktioniert jedoch nicht:

Beispiel 2

let x = "Hello
World!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>
<p>Breaking a statement in the middle of a string will not work:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

Sie müssen einen „Backslash“ verwenden, wenn Sie eine Anweisung in einer Zeichenfolge umbrechen müssen:

Beispiel 3

let x = "Hello \
World!";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>You must use a "backslash" if you must break a statement in a string:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello \
World!";
</script>

</body>
</html>

Falsche Platzierung des Semikolons

Aufgrund eines falsch platzierten Semikolons wird dieser Codeblock trotzdem ausgeführt der Wert von x:

if (x == 19);
{
    // code block  
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p id="demo"></p>

<script>
let x = 5;
if (x == 19);
{
document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

Eine Rückgabeerklärung brechen

Es ist ein Standardverhalten von JavaScript, eine Anweisung automatisch zu schließen Ende einer Zeile.

Aus diesem Grund liefern diese beiden Beispiele dasselbe Ergebnis:

Beispiel 1

function myFunction(a) {
    let power = 10  
  return a * power
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10
  return a * power
}
</script>

</body>
</html>

Beispiel 2

function myFunction(a) {
    let power = 10;
  return a * power;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let power = 10;
  return a * power;
}
</script>

</body>
</html>

Mit JavaScript können Sie eine Anweisung auch in zwei Zeilen aufteilen.

Aus diesem Grund wird auch Beispiel 3 das gleiche Ergebnis zurückgeben:

Beispiel 3

function myFunction(a) {
    let
  power = 10;  
  return a * power;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return a correct result:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return a * power;
}
</script>

</body>
</html>

Aber was passiert, wenn Sie die Return-Anweisung wie folgt in zwei Zeilen unterteilen? Das:

Beispiel 4

function myFunction(a) {
    let
  power = 10;  
  return
  a * power;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return
  a * power;
}
</script>

</body>
</html>

Die Funktion gibt undefiniert zurück!

Warum? Weil JavaScript dachte, Sie meinten:

Beispiel 5

function myFunction(a) {
    let
  power = 10;  
  return;
  a * power;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>Common JavaScript Mistakes</h2>

<p>This example will return undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
  let
  power = 10;
  return;
  a * power;
}
</script>

</body>
</html>

Erläuterung

Wenn eine Aussage unvollständig ist wie:

let

JavaScript wird versuchen, 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 optional ist JavaScript.

JavaScript schließt die Return-Anweisung am Ende der Zeile, weil es ist eine vollständige Aussage.

Brechen Sie niemals eine Return-Anweisung.

Zugreifen auf Arrays mit benannten Indizes

Viele Programmiersprachen unterstützen Arrays mit benannten Indizes.

Arrays mit benannten Indizes werden als assoziativ bezeichnet Arrays (oder Hashes).

JavaScript unterstützt Arrays mit benannten Indizes nicht.

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"

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p id="demo"></p>

<script>
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

In JavaScript verwenden Objekte benannte Indizes.

Wenn Sie beim Zugriff auf ein Array einen benannten Index verwenden, wird JavaScript neu definiert das Array in ein Standardobjekt.

Nach der automatischen Neudefinition erzeugen Array-Methoden und -Eigenschaften undefinierte oder falsche Ergebnisse:

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>

<p>If you use a named index when accessing an array, JavaScript will redefine the array to a standard object, and some array methods and properties will produce undefined or incorrect results.</p>

<p id="demo"></p>

<script>
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>

</body>
</html>

Definitionen mit einem Komma beenden

Nachgestellte Kommas in der Objekt- und Array-Definition sind in ECMAScript 5 zulässig.

Objektbeispiel:

person = {firstName:"John", lastName:"Doe", age:46,}

Array-Beispiel:

points = [40, 100, 1, 5, 25, 10,];

WARNUNG !!

Internet Explorer 8 wird abstürzen.

JSON erlaubt keine abschließenden 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 undefiniert sein.

Darüber hinaus können leere JavaScript-Objekte den Wert null haben.

Dies kann es etwas schwierig machen, zu testen, ob ein Objekt leer ist.

Sie können testen, ob ein Objekt existiert, indem Sie testen, ob der Typ undefiniert ist:

Beispiel :

if (typeof myObj === "undefined") 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>To test if an object does not exist, test if the type is undefined:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj === "undefined";
</script>

</body>
</html>

Sie können jedoch nicht testen, ob ein Objekt null ist, da dies einen Fehler auslöst, wenn das Objekt ist undefiniert:

Falsch:

if (myObj === null) 

Um dieses Problem zu lösen, müssen Sie testen, ob ein Objekt nicht null ist. und nicht undefiniert.

Dies kann jedoch immer noch einen Fehler auslösen:

Falsch:

if (myObj !== null && typeof myObj 
  !== "undefined") 

Aus diesem Grund müssen Sie zunächst testen, ob undefiniert ist Test auf nicht null:

Richtig :

if (typeof myObj !== "undefined" && myObj !== null) 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you want to test if an object is not null, you must test if it not undefined first.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = typeof myObj !== "undefined" && myObj !== null;
</script>

</body>
</html>