JavaScript fejl

Indholdsfortegnelse

    Vis indholdsfortegnelse

Dette kapitel påpeger nogle almindelige JavaScript-fejl.

Ved et uheld ved brug af opgaveoperatøren

JavaScript-programmer kan generere uventede resultater, hvis en programmør bruger ved et uheld en tildelingsoperator (=) i stedet for en sammenligningsoperator (==) i en if-sætning.

Denne if-sætning returnerer false (som forventet), fordi x er ikke lig med 10:

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

Prøv det selv →

<!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>

Denne if-sætning returnerer sand (måske ikke som forventet), fordi 10 er rigtigt:

let x = 0;
if (x = 10)

Prøv det selv →

<!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>

Denne if-sætning returnerer false (måske ikke som forventet), fordi 0 er falsk:

let x = 0;
if (x = 0)

Prøv det selv →

<!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>

En opgave returnerer altid værdien af opgaven.

Forventer løs sammenligning

Ved almindelig sammenligning er datatypen ligegyldig. Denne if-sætning returnerer rigtigt:

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

Prøv det selv →

<!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>

I streng sammenligning betyder datatypen noget. Denne if-sætning returnerer falsk:

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

Prøv det selv →

<!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>

Det er en almindelig fejl at glemme, at switch-sætninger bruger strenge sammenligning:

Denne case switch vil vise en advarsel:

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

Prøv det selv →

<!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>

Denne case switch viser ikke en advarsel:

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

Prøv det selv →

<!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>

Forvirrende tilføjelse og sammenkædning

Tilføjelse handler om at tilføje numre.

Sammenkædning handler om at tilføje strenge.

I JavaScript bruger begge operationer den samme + operator.

På grund af dette vil tilføjelse af et tal som et tal give et andet resultat af at tilføje et tal som en streng:

let x = 10;
x = 10 + 5;       // 
    Now x is 15

let y = 10;
y += "5";        
    // Now y is "105"

Prøv det selv →

<!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>

Når man tilføjer to variable, kan det være svært at forudse resultatet:

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"

Prøv det selv →

<!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>

Misforståelse flyder

Alle tal i JavaScript gemmes som 64-bit flydende kommatal (Flyder).

Alle programmeringssprog, inklusive JavaScript, har problemer med præcise flydende kommaværdier:

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

Prøv det selv →

<!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>

For at løse problemet ovenfor hjælper det at gange og dividere:

Eksempel

let z = (x * 10 + y * 10) / 10;       // z will be 0.3

Prøv det selv →

<!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>

Bryde en JavaScript-streng

JavaScript giver dig mulighed for at opdele en erklæring i to linjer:

Eksempel 1

let x =
"Hello World!";

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>Breaking a JavaScript Statement</h2>

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

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

</body>
</html>

Men at bryde et udsagn midt i en streng vil ikke fungere:

Eksempel 2

let x = "Hello
World!";

Prøv det selv →

<!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>

Du skal bruge en "omvendt skråstreg", hvis du skal bryde en sætning i en streng:

Eksempel 3

let x = "Hello \
World!";

Prøv det selv →

<!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>

Forkert placering af semikolon

På grund af et malplaceret semikolon vil denne kodeblok udføres uanset værdien af x:

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

Prøv det selv →

<!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>

At bryde en returerklæring

Det er en standard JavaScript-adfærd at lukke en erklæring automatisk ved slutningen af en linje.

På grund af dette vil disse to eksempler returnere det samme resultat:

Eksempel 1

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

Prøv det selv →

<!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>

Eksempel 2

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

Prøv det selv →

<!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>

JavaScript giver dig også mulighed for at dele en erklæring op i to linjer.

På grund af dette vil eksempel 3 også returnere det samme resultat:

Eksempel 3

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

Prøv det selv →

<!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>

Men hvad vil der ske, hvis du bryder returerklæringen i to linjer som det her:

Eksempel 4

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

Prøv det selv →

<!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>

Funktionen returnerer undefined!

Hvorfor? Fordi JavaScript troede, du mente:

Eksempel 5

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

Prøv det selv →

<!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>

Forklaring

Hvis en erklæring er ufuldstændig som:

let

JavaScript vil forsøge at fuldføre erklæringen ved at læse den næste linje:

 power = 10;

Men da denne erklæring er komplet:

 return

JavaScript vil automatisk lukke det sådan her:

 return;

Dette sker, fordi afsluttende (afsluttende) udsagn med semikolon er valgfrit i JavaScript.

JavaScript vil lukke returerklæringen i slutningen af linjen, fordi det er et komplet udsagn.

Bryd aldrig en returerklæring.

Adgang til arrays med navngivne indekser

Mange programmeringssprog understøtter arrays med navngivne indekser.

Arrays med navngivne indekser kaldes associative arrays (eller hashes).

JavaScript understøtter ikke arrays med navngivne indekser.

I JavaScript bruger arrays nummererede indekser:

Eksempel

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"

Prøv det selv →

<!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>

I JavaScript bruger objekter navngivne indekser.

Hvis du bruger et navngivet indeks, vil JavaScript omdefinere, når du får adgang til et array arrayet til et standardobjekt.

Efter den automatiske omdefinering vil matrixmetoder og egenskaber producere udefinerede eller forkerte resultater:

Eksempel:

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

Prøv det selv →

<!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>

Afslutter definitioner med et komma

Efterfølgende kommaer i objekt- og matrixdefinition er lovlige i ECMAScript 5.

Objekteksempel:

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

Eksempel på matrix:

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

ADVARSEL!!

Internet Explorer 8 vil gå ned.

JSON tillader ikke efterfølgende kommaer.

JSON:

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

JSON:

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

Undefined er ikke null

JavaScript-objekter, variabler, egenskaber og metoder kan være udefinerede.

Derudover kan tomme JavaScript-objekter have værdien null.

Dette kan gøre det lidt svært at teste, om en genstand er tom.

Du kan teste om et objekt eksisterer ved at teste om typen er udefineret:

Eksempel:

if (typeof myObj === "undefined") 

Prøv det selv →

<!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>

Men du kan ikke teste, om et objekt er null, fordi dette vil give en fejl, hvis objektet er udefineret:

Ukorrekt:

if (myObj === null) 

For at løse dette problem skal du teste om et objekt ikke er null, og ikke udefineret.

Men dette kan stadig give en fejl:

Ukorrekt:

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

På grund af dette skal du teste for ikke udefineret, før du kan test for ikke null:

Korrekt :

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

Prøv det selv →

<!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>