Det här kapitlet pekar ut några vanliga JavaScript-fel.
JavaScript-program kan generera oväntade resultat om en programmerare använder av misstag en tilldelningsoperator (=
), istället för en jämförelseoperator (==
) i en if-sats.
Denna if
-sats returnerar false
(som förväntat) eftersom x är inte lika med 10:
let x = 0;
if (x == 10)
Prova själv →
<!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>
Denna if
-sats returnerar true
(kanske inte som förväntat), eftersom 10 är Sann:
let x = 0;
if (x = 10)
Prova själv →
<!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>
Denna if
-sats returnerar false
(kanske inte som förväntat), eftersom 0 är falsk:
let x = 0;
if (x = 0)
Prova själv →
<!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>
Ett uppdrag returnerar alltid uppdragets värde.
I regelbunden jämförelse spelar datatypen ingen roll. Denna if
-sats returnerar Sann:
let x = 10;
let y = "10";
if (x == y)
Prova själv →
<!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 strikt jämförelse spelar datatyp roll. Denna if
-sats returnerar false:
let x = 10;
let y = "10";
if (x === y)
Prova själv →
<!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 är ett vanligt misstag att glömma att switch
-satser använder strikt jämförelse:
Denna växel
visar en varning:
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Prova själv →
<!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>
Denna växel
visar inte en varning:
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Prova själv →
<!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>
Tillägg handlar om att lägga till nummer.
Konkatenering handlar om att lägga till strängar.
I JavaScript använder båda operationerna samma +
-operator.
På grund av detta kommer att lägga till ett tal som ett tal en annan resultat av att lägga till ett nummer som en sträng:
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Prova själv →
<!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 lägger till två variabler kan det vara svårt att förutse 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"
Prova själv →
<!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>
Alla nummer i JavaScript lagras som 64-bitars flyttalsnummer (Flytande).
Alla programmeringsspråk, inklusive JavaScript, har svårigheter med exakta flyttalsvärden:
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Prova själv →
<!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>
För att lösa problemet ovan hjälper det att multiplicera och dividera:
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Prova själv →
<!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>
JavaScript låter dig dela upp ett uttalande i två rader:
let x =
"Hello World!";
Prova själv →
<!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 att bryta ett uttalande mitt i en sträng kommer inte att fungera:
let x = "Hello
World!";
Prova själv →
<!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 måste använda ett "omvänt snedstreck" om du måste bryta ett uttalande i en sträng:
let x = "Hello \
World!";
Prova själv →
<!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>
På grund av ett felplacerat semikolon kommer detta kodblock att köras oavsett värdet av x:
if (x == 19);
{
// code block
}
Prova själv →
<!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>
Det är ett standard JavaScript-beteende att stänga ett uttalande automatiskt vid slutet av en rad.
På grund av detta kommer dessa två exempel att ge samma resultat:
function myFunction(a) {
let power = 10
return a * power
}
Prova själv →
<!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>
function myFunction(a) {
let power = 10;
return a * power;
}
Prova själv →
<!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 låter dig också dela upp ett uttalande i två rader.
På grund av detta kommer även exempel 3 att returnera samma resultat:
function myFunction(a) {
let
power = 10;
return a * power;
}
Prova själv →
<!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 vad händer om du bryter returmeddelandet på två rader som detta:
function myFunction(a) {
let
power = 10;
return
a * power;
}
Prova själv →
<!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 returnerar odefinierad
!
Varför? Eftersom JavaScript trodde att du menade:
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Prova själv →
<!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>
Om ett uttalande är ofullständigt som:
let
JavaScript kommer att försöka slutföra uttalandet genom att läsa nästa rad:
power = 10;
Men eftersom detta uttalande är komplett:
return
JavaScript stänger automatiskt så här:
return;
Detta händer eftersom avslutande (avslutande) uttalanden med semikolon är valfritt i JavaScript.
JavaScript kommer att stänga retursatsen i slutet av raden, eftersom det är ett fullständigt uttalande.
Bryt aldrig ett returmeddelande.
Många programmeringsspråk stöder arrayer med namngivna index.
Arrayer med namngivna index kallas associativa matriser (eller hash).
JavaScript stöder inte arrayer med namngivna index.
I JavaScript använder matriser numrerade index:
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"
Prova själv →
<!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 använder objekt namngivna index.
Om du använder ett namngivet index kommer JavaScript att omdefinieras när du kommer åt en array arrayen till ett standardobjekt.
Efter den automatiska omdefinieringen kommer arraymetoder och egenskaper att producera odefinierade eller felaktiga resultat:
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
Prova själv →
<!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>
Efterföljande kommatecken i objekt- och arraydefinitionen är lagliga i ECMAScript 5.
person = {firstName:"John", lastName:"Doe", age:46,}
points = [40, 100, 1, 5, 25, 10,];
VARNING!!
Internet Explorer 8 kommer att krascha.
JSON tillåter inte avslutande kommatecken.
person = {"firstName":"John", "lastName":"Doe", "age":46}
points = [40, 100, 1, 5, 25, 10];
JavaScript-objekt, variabler, egenskaper och metoder kan vara odefinierade
.
Dessutom kan tomma JavaScript-objekt ha värdet null
.
Detta kan göra det lite svårt att testa om ett objekt är tomt.
Du kan testa om ett objekt existerar genom att testa om typen är odefinierad
:
if (typeof myObj === "undefined")
Prova själv →
<!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 inte testa om ett objekt är null
, eftersom detta kommer att ge ett felmeddelande om objektet är odefinierat
:
if (myObj === null)
För att lösa detta problem måste du testa om ett objekt inte är null
, och inte odefinierad
.
Men detta kan fortfarande skapa ett fel:
if (myObj !== null && typeof myObj
!== "undefined")
På grund av detta måste du testa att det inte är odefinierat
innan du kan testa för inte null
:
if (typeof myObj !== "undefined" && myObj !== null)
Prova själv →
<!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>