JavaScript 使用誤區
JavaScript 使用誤區
本章節我們將討論 JavaScript 的使用誤區。
賦值運算子應用錯誤
在 JavaScript 程式中如果你在 if 條件語句中使用賦值運算子的等號 (=) 將會產生一個錯誤結果, 正確的方法是使用比較運算子的兩個等號 (==)。
if 條件語句返回 false (是我們預期的)因為 x 不等於 10:
if (x == 10)
嘗試一下 ?
if 條件語句返回 true (不是我們預期的)因為條件語句執行為 x 賦值 10，10 為 true:
if (x = 10)
嘗試一下 ?
if 條件語句返回 false (不是我們預期的)因為條件語句執行為 x 賦值 0，0 為 false:
if (x = 0)
嘗試一下 ?
 |
賦值語句返回變數的值。 |
|---|
比較運算子常見錯誤
在常規的比較中，資料型別是被忽略的，以下 if 條件語句返回 true：
var y = "10";
if (x == y)
嘗試一下 ?
在嚴格的比較運算中，=== 為恆等計算符，同時檢查表示式的值與型別，以下 if 條件語句返回 false：
var y = "10";
if (x === y)
嘗試一下 ?
這種錯誤經常會在 switch 語句中出現，switch 語句會使用恆等計算符(===)進行比較:
以下例項會執行 alert 彈窗：
switch(x) {
case 10: alert("Hello");
}
嘗試一下 ?
以下例項由於型別不一致不會執行 alert 彈窗：
switch(x) {
case "10": alert("Hello");
}
嘗試一下 ?
加法與連線注意事項
加法是兩個數字相加。
連線是兩個字串連線。
JavaScript 的加法和連線都使用 + 運算子。
接下來我們可以通過例項檢視兩個數字相加及數字與字串連線的區別：
var x = 10 + "5"; // x 的結果為 "105"
嘗試一下 ?
使用變數相加結果也不一致:
var y = 5;
var z = x + y; // z 的結果為 15
var x = 10;
var y = "5";
var z = x + y; // z 的結果為 "105"
嘗試一下 ?
浮點型資料使用注意事項
JavaScript 中的所有資料都是以 64 位浮點型資料(float) 來儲存。
所有的程式語言，包括 JavaScript，對浮點型資料的精確度都很難確定：
var y = 0.2;
var z = x + y // z 的結果為 0.30000000000000004
if (z == 0.3) // 返回 false
嘗試一下 ?
為解決以上問題，可以用整數的乘除法來解決：
例項
嘗試一下 ?
更多內容可以參考：JavaScript 中精度問題以及解決方案
JavaScript 字串分行
JavaScript 允許我們在字串中使用斷行語句:
例項 1
"Hello World!";
嘗試一下 ?
但是，在字串中直接使用回車換行是會報錯的：
例項 2
World!";
嘗試一下 ?
我們可以在選擇開發工具或按下 F12 來檢視錯誤資訊：
字串斷行需要使用反斜槓(\)，如下所示:
例項 3
World!";
嘗試一下 ?
錯誤的使用分號
以下例項中，if 語句失去方法體，原 if 語句的方法體作為獨立的程式碼塊被執行，導致錯誤的輸出結果。
由於分號使用錯誤，if 語句中的程式碼塊就一定會執行：
{
// code block
}
嘗試一下 ?
return 語句使用注意事項
JavaScript 預設是在程式碼的最後一行自動結束。
以下兩個例項返回結果是一樣的(一個有分號一個沒有):
例項 1
var power = 10
return a * power
}
嘗試一下 ?
例項 2
var power = 10;
return a * power;
}
嘗試一下 ?
JavaScript 也可以使用多行來結束一個語句。
以下例項返回相同的結果:
例項 3
var
power = 10;
return a * power;
}
嘗試一下 ?
但是，以下例項結果會返回 undefined：
例項 4
var
power = 10;
return
a * power;
}
嘗試一下 ?
為什麼會有這樣的結果呢？因為在 JavaScript 中，例項 4 的程式碼與下面的程式碼一致：
function myFunction(a) {
var
power = 10;
return; // 分號結束，返回 undefined
a * power;
}
解析
如果是一個不完整的語句，如下所示:
var
JavaScript 將嘗試讀取第二行的語句：
power = 10;
但是由於這樣的語句是完整的:
return
JavaScript 將自動關閉語句:
return;
在 JavaScript 中，分號是可選的 。
由於 return 是一個完整的語句，所以 JavaScript 將關閉 return 語句。
|
|
注意：不用對 return 語句進行斷行。 |
|---|
陣列中使用名字來索引
許多程式語言都允許使用名字來作為陣列的索引。
使用名字來作為索引的陣列稱為關聯陣列(或雜湊)。
JavaScript 不支援使用名字來索引陣列，只允許使用數字索引。
例項
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
var y = person[0]; // person[0] 返回 undefined
嘗試一下 ?
定義陣列元素，最後不能新增逗號
陣列最後一個值的後面新增逗號雖然語法沒有問題，但是在不同的瀏覽器可能得到不同的結果。
var colors = [5, 6, 7,]; //這樣陣列的長度可能為3 也可能為4。
正確的定義方式：
points = [40, 100, 1, 5, 25, 10];
定義物件，最後不能新增逗號
錯誤的定義方式：
websites = {site:"入門教學", url:"www.itread01.com", like:460,}
正確的定義方式：
websites = {site:"入門教學", url:"www.itread01.com", like:460}
Undefined 不是 Null
在 JavaScript 中, null 用於物件, undefined 用於變數，屬性和方法。
物件只有被定義才有可能為 null，否則為 undefined。
如果我們想測試物件是否存在，在物件還沒定義時將會丟擲一個錯誤。
錯誤的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正確的方式是我們需要先使用 typeof 來檢測物件是否已定義：
if (typeof myObj !== "undefined" && myObj !== null)
程式塊作用域
在每個程式碼塊中 JavaScript 不會建立一個新的作用域，一般各個程式碼塊的作用域都是全域性的。
以下程式碼的的變數 i 返回 10，而不是 undefined：
例項
// some code
}
return i;
嘗試一下 ?