天天看點

JavaScript 使用誤區

本章節我們将讨論 JavaScript 的使用誤區。

在 JavaScript 程式中如果你在 if 條件語句中使用指派運算符的等号 (=) 将會産生一個錯誤結果, 正确的方法是使用比較運算符的兩個等号

(==)。

if 條件語句傳回 false (是我們預期的)因為 x 不等于 10:

var x = 0;

if (x == 10)

if 條件語句傳回 true (不是我們預期的)因為條件語句執行為 x 指派 10,10 為 true:

if (x = 10)

if 條件語句傳回 false (不是我們預期的)因為條件語句執行為 x 指派 0,0 為 false:

if (x = 0)

JavaScript 使用誤區

指派語句傳回變量的值。

在正常的比較中,資料類型是被忽略的,以下 if 條件語句傳回 true:

var x = 10;

var y = "10";

if (x == y)

在嚴格的比較運算中,=== 為恒等計算符,同時檢查表達式的值與類型,以下 if 條件語句傳回 false:

if (x === y)

這種錯誤經常會在 switch 語句中出現,switch 語句會使用恒等計算符(===)進行比較:

以下執行個體會執行 alert 彈窗:

switch(x) {

    case 10: alert("Hello");

}

以下執行個體由于類型不一緻不會執行 alert 彈窗:

    case "10": alert("Hello");

加法是兩個數字相加。

連接配接是兩個字元串連接配接。

JavaScript 的加法和連接配接都使用 + 運算符。

接下來我們可以通過執行個體檢視兩個數字相加及數字與字元串連接配接的差別:

var x = 10 + 5;          //

x 的結果為 15

var x = 10 + "5";       

// x 的結果為 "105"

使用變量相加結果也不一緻:

var y = 5;

var z = x + y;          

// z 的結果為 15

var y = "5";

var z =

x + y;          

// z 的結果為 "105"

JavaScript 中的所有資料都是以 64 位浮點型資料(float) 來存儲。

所有的程式設計語言,包括 JavaScript,對浮點型資料的精确度都很難确定:

var x = 0.1;

var y = 0.2;

var z = x + y           

// z 的結果為 0.30000000000000004

if (z == 0.3)           

// 傳回 false

為解決以上問題,可以用整數的乘除法來解決:

var z = (x * 10 + y * 10) / 10;       // z 的結果為 0.3

更多内容可以參考:JavaScript 中精度問題以及解決方案

JavaScript 允許我們在字元串中使用斷行語句:

var x =

"Hello World!";

但是,在字元串中直接使用回車換行是會報錯的:

var x = "Hello

World!";

我們可以在選擇開發工具或按下 F12 來檢視錯誤資訊:

JavaScript 使用誤區

字元串斷行需要使用反斜杠(\),如下所示:

var x = "Hello \

以下執行個體中,if 語句失去方法體,原 if 語句的方法體作為獨立的代碼塊被執行,導緻錯誤的輸出結果。

由于分号使用錯誤,if 語句中的代碼塊就一定會執行:

if (x == 19);

{

    // code block 

JavaScript 預設是在代碼的最後一行自動結束。

以下兩個執行個體傳回結果是一樣的(一個有分号一個沒有):

function myFunction(a) {

var power = 10 

    return a * power

var power = 10;

    return a * power;

JavaScript 也可以使用多行來結束一個語句。

以下執行個體傳回相同的結果:

var

    power = 10; 

但是,以下執行個體結果會傳回 <b>undefined</b>:

    return

    a * power;

為什麼會有這樣的結果呢?因為在 JavaScript 中,執行個體 4 的代碼與下面的代碼一緻:

如果是一個不完整的語句,如下所示:

JavaScript 将嘗試讀取第二行的語句:

但是由于這樣的語句是完整的:

JavaScript 将自動關閉語句:

在 JavaScript 中,分号是可選的 。

由于 return 是一個完整的語句,是以 JavaScript 将關閉 return 語句。

JavaScript 使用誤區

<b>注意:</b>不用對 return 語句進行斷行。

許多程式語言都允許使用名字來作為數組的索引。

使用名字來作為索引的數組稱為關聯數組(或哈希)。

JavaScript 不支援使用名字來索引數組,隻允許使用數字索引。

var person = [];

person[0] = "John";

person[1] = "Doe";

person[2] = 46;

var x = person.length;        

// person.length 傳回 3

var y = person[0];            

// person[0] 傳回 "John"

在 JavaScript 中, 對象 使用 名字作為索引。

如果你使用名字作為索引,當通路數組時,JavaScript 會把數組重新定義為标準對象。

執行這樣操作後,數組的方法及屬性将不能再使用,否則會産生錯誤:

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length;         // person.length 傳回 0

// person[0] 傳回 undefined

數組最後一個值的後面添加逗号雖然文法沒有問題,但是在不同的浏覽器可能得到不同的結果。

正确的定義方式:

錯誤的定義方式:

在 JavaScript 中, null 用于對象, undefined 用于變量,屬性和方法。

對象隻有被定義才有可能為 null,否則為 undefined。

如果我們想測試對象是否存在,在對象還沒定義時将會抛出一個錯誤。

錯誤的使用方式:

正确的方式是我們需要先使用 typeof 來檢測對象是否已定義:

在每個代碼塊中 JavaScript 不會建立一個新的作用域,一般各個代碼塊的作用域都是全局的。

以下代碼的的變量 i 傳回 10,而不是 undefined:

for (var i = 0; i &lt; 10; i++) {

    // some code

return i;