JavaScript Vanliga fel

本章指出一些常见的 JavaScript 错误。

意外使用赋值运算符

如果程序员在 if 语句中意外使用赋值运算符（=）而不是比较运算符（===），JavaScript 程序可能会产生一些无法预料的结果。

这条 if 语句返回 false（正如预期），因为 x 不等于 10：

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

Prova själv

这条 if 语句返回 true（也许不像预期），因为 10 为 true：

var x = 0;
if (x = 10)

Prova själv

这条 if 语句返回 false（也许不像预期），因为 0 为 false：

var x = 0;
if (x = 0)

Prova själv

赋值总是返回赋值的值。

期望松散的比较

在常规比较中，数据类型不重要。这条 if 语句返回 true:

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

Prova själv

在严格比较中，数据类型确实重要。这条 if 语句返回 false:

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

Prova själv

有一个常见的错误是忘记在 switch 语句中使用严格比较：

这条 switch 语句会显示提示框：

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

Prova själv

这条 switch 语句不会显示提示框：

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

Prova själv

令人困惑的加法和级联

加法用于加数值.

级联（Concatenation）用于加字符串.

在 JavaScript 中，这两种运算均使用相同的 + 运算符。

正因如此，将数字作为数值相加，与将数字作为字符串相加，将产生不同的结果：

var x = 10 + 5;          // x 中的结果是 15
var x = 10 + "5";         // x 中的结果是　"105"

Prova själv

如果是两个变量相加，很难预测结果：

var x = 10;
var y = 5;
var z = x + y;            // z 中的结果是 15
var x = 10;
var y = "5";
var z =  x + y;            // z 中的结果是 "105"

Prova själv

令人误解的浮点

JavaScript 中的数字均保存为 64 位的flyttal (Floats).

alla programmeringsspråk, inklusive JavaScript, har svårigheter att hantera flyttal:

var x = 0.1;
var y = 0.2;
var z = x + y             // Resultatet i z kommer inte att vara 0.3

Prova själv

för att lösa problemet, använd multiplikation och division:

Exempel

var z = (x * 10 + y * 10) / 10;       // Resultatet i z kommer att vara 0.3

Prova själv

bryta raden i JavaScript-strängar

JavaScript tillåter dig att bryta raden i två rader för ett kommando:

exempel 1

var x =
"Hello World!";

Prova själv

men att bryta raden mitt i en sträng är fel:

exempel 2

var x = "Hello
World!";

Prova själv

exempel 3

var x = "Hello \
World!";

Prova själv

felaktigt placerat semikolon

på grund av ett felaktigt semikolon kommer denna kodblock att köras oavsett vad x:s värde är:

if (x == 19);
{
     // kodblock
}

Prova själv

bryta raden för return-kommandon

att automatiskt stänga kommandon i slutet av raden är det förvalda beteendet i JavaScript.

därför returnerar de två nedanstående exemplen samma resultat:

exempel 1

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

Prova själv

exempel 2

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

Prova själv

JavaScript tillåter också att du bryter raden i två rader för ett kommando.

därför kommer exempel 3 också att returnera samma resultat:

exempel 3

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

Prova själv

men om jag byter ut return vad händer om jag bryter raden i två rader?

exempel 4

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

Prova själv

denna funktion kommer att returnera undefined!

varför? Eftersom JavaScript antar att du menar:

exempel 5

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

Prova själv

förklaring

om ett kommando är ofullständigt:

var

JavaScript kommer att slutföra detta kommando genom att läsa nästa rad:

power = 10;

men eftersom detta kommando är komplett:

return

JavaScript stänger av kommandot automatiskt:

return;

detta händer eftersom att använda semikoloner för att avsluta (sluta) kommandon är valfritt i JavaScript.

JavaScript stänger av raden i slutet return kommando, eftersom det redan är ett fullständigt kommando.

aldrig return komma till nästa rad.

Genom att använda namngivna index för att komma åt arrayer

Många programmeringsspråk stöder arrayer med namngivna index.

Array med namngivna index kallas förknippade arrayer (eller hash).

JavaScript Ej stöddArray med namngivna index.

I JavaScript:ArrayAnvändNumeriska index:

Exempel

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length kommer att returnera 3
var y = person[0];              // person[0] kommer att returnera "Bill"

Prova själv

I JavaScript:ObjektAnvändNamngivna index.

Om du använder namngivna index kommer JavaScript att omdefiniera arrayen till en standardobjekt när du tillgång till arrayen.

Efter automatisk omdefiniering kommer arraymetoder eller egenskaper att generera odefinierade eller felaktiga resultat:

Exempel

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length kommer att returnera 0
var y = person[0];              // person[0] kommer att returnera undefined

Prova själv

Använd semlor för att avsluta definitioner

Följesemlor i definitioner av objekt och arrayer är giltiga i ECMAScript 5.

Objektexempel:

person = {firstName:"Bill", lastName:"Gates", age:62,}

Arrayexempel:

points = [35, 450, 2, 7, 30, 16,];

Varning！！

Internet Explorer 8 kommer att krascha.

JSON tillåter inte följesemlor.

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined är inte Null

JavaScript-objekt, variabler, egenskaper och metoder kan vara odefinierade.

Dessutom kan värdet för en tom JavaScript-objekt vara null.

Detta kan göra det något svårt att testa om testobjektet är tomt.

Du kan testa om typen är undefined，att testa om objektet finns:

Exempel

if (typeof myObj === "undefined")

Prova själv

Men du kan inte testa om objektet är nulleftersom om objektet är undefined kommer det att kasta ett fel:

Fel:

if (myObj === null)

För att lösa detta problem måste du testa om objektet är nullistället för undefined.

Men detta kommer fortfarande att orsaka ett fel:

Fel:

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

Därför måste du testa för att det inte är null innan du testar om det är undefined:

Rätt:

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

Prova själv

förväntar sig en blockomfattning

JavaScript inteskapar en ny råomfattning för varje kodblock.

Många programmeringsspråk är sådana, men JavaScript Inte så.

att tro att detta kod kommer att returnera undefinedär en vanlig misstag för nya JavaScript-utvecklare:

Exempel

for (var i = 0; i < 10; i++) {
  //Kodblock
}
return i;

Prova själv