最新的Web開發教程
 

JavaScript常見錯誤


本章指出了一些常見的JavaScript錯誤。


無意中使用賦值運算符

JavaScript程序可能會產生意外的結果,如果程序員不小心使用了賦值運算符(=)而不是比較操作符(==)在if語句。

if語句返回false (如預期),因為x不等於10:

var x = 0;
if (x == 10)
試一試»

if語句返回true (也許並不如預期),因為10是真的:

var x = 0;
if (x = 10)
試一試»

if語句返回false (也許並不如預期),因為0是假的:

var x = 0;
if (x = 0)
試一試»

賦值總是返回分配的值。


期待比較寬鬆

在定期的比較,數據類型並不重要。 這if語句返回true

var x = 10;
var y = "10";
if (x == y)
試一試»

在嚴格的比較,數據類型此事呢。 這if語句返回false

var x = 10;
var y = "10";
if (x === y)
試一試»

這是一個常見的錯誤是忘記switch語句中使用嚴格的比較:

這種情況下,交換機將顯示一個警告:

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

這種情況下,交換機將不會顯示一個警告:

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

令人困惑的加法和串聯

另外是關於添加數字

級聯是有關添加字符串

在JavaScript這兩種操作使用相同+運營商。

由於這個原因,添加數作為數將從加入了許多作為字符串產生不同的結果:

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"
試一試»

當添加兩個變量,也可以是難以預料的結果:

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"
試一試»

誤區花車

在JavaScript中的所有數字都存儲為64位浮點數 (浮點)。

所有的編程語言,包括JavaScript,有精確的浮點值的困難:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3
if (z == 0.3)            // this if test will fail
試一試»

為了解決上述問題,它有助於乘除:

var z = (x * 10 + y * 10) / 10;       // z will be 0.3
試一試»

打破一個JavaScript字符串

JavaScript的將讓你打破語句轉換成兩行:

例1

var x =
"Hello World!";
試一試»

但是,在一個字符串中間破聲明將無法工作:

例2

var x = "Hello
World!";
試一試»

您必須使用“反斜杠”如果你必須打破字符串中的語句:

例3

var x = "Hello \
World!";
試一試»

亂放分號

因為放錯位置的分號,這個代碼塊將不分執行x的值:

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

打破一個return語句

這是一個默認的JavaScript行為在一行結束時自動關閉的聲明。

正因為如此,這兩個例子將返回相同的結果:

例1

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

例2

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

JavaScript的也將讓你打破一個語句轉換成兩行。

正因為如此,實施例3也將返回相同的結果:

例3

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

但是,如果你打破return語句在兩行這樣會發生什麼:

例4

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

該函數將返回不確定的!

為什麼? 因為JavaScript認為你的意思是:

例5

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

說明

如果語句是不完整的,如:

var

JavaScript的將嘗試通過讀下一行完成語句:

power = 10;

但是,因為這種說法是完整的:

return

JavaScript的將自動關閉它是這樣的:

return;

這是因為關閉(終止)語句用分號是在JavaScript中可選。

JavaScript的將關閉return語句在該行的末尾,因為它是一個完整的陳述。

決不要斷開return語句。


訪問陣列具有命名索引

許多編程語言都支持一個名為索引的數組。

名為索引數組稱為關聯數組(或哈希)。

JavaScript 支持數組名為索引。

在JavaScript中, 數組使用索引編號

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
試一試»

在JavaScript中, 對象使用命名的索引

如果你使用了一個名為索引訪問數組時的JavaScript將重新定義數組一個標準的對象。

自動重新定義後,陣列方法和屬性會產生不確定的或不正確的結果:

例:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
試一試»

結束與一個逗號的數組定義

不正確:

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

一些JSON和JavaScript引擎將失敗或意外行為。

正確:

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

結束與一個逗號的對象定義

不正確:

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

一些JSON和JavaScript引擎將失敗或意外行為。

正確:

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

未定義不為空

使用JavaScript,是的對象,undefined是變量,屬性和方法。

為NULL,對象必須定義,否則將是不確定的。

如果你想測試一個對象是否存在,如果對象是不確定的,這將引發錯誤:

不正確:

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

正因為如此,你必須首先測試的typeof():

正確:

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

期待塊級範圍

JavaScript 為每個代碼塊新的作用域。

它是在許多編程語言真實的,但不是在JavaScript的

這是一個常見的錯誤,其中新的JavaScript開發者,相信這段代碼返回undefined:

for (var i = 0; i < 10; i++) {
    // some code
}
return i;
試一試»