JavaScript 使用誤區

賦值運算符應用錯誤

在 JavaScript 程序中如果你在 if 條件語句中使用賦值運算符的等號 (=) 將會產生一個錯誤結果, 正確的方法是使用比較運算符的兩個等號 (==)。

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

var x = 0;

if (x == 10)

if 條件語句返回 true (不是我們預期的)因為條件語句執行為 x 賦值 10，10 為 true:

var x = 0;

if (x = 10)

if 條件語句返回 false (不是我們預期的)因為條件語句執行為 x 賦值 0，0 為 false:

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 語句中出現，switch 語句會使用恆等計算符(===)進行比較:

以下實例會執行 alert 彈窗：

var x = 10;

switch(x) {

case 10: alert("Hello");

}

以下實例由於類型不一致不會執行 alert 彈窗：

var x = 10;

switch(x) {

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

}

加法與連接注意事項

加法是兩個數字相加。

連接是兩個字元串連接。

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

接下來我們可以通過實例查看兩個數字相加及數字與字元串連接的區別：

var x = 10 + 5; // x 的結果為 15

var x = 10 + "5"; // x 的結果為 "105"

使用變數相加結果也不一致:

var x = 10;

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 x = 0.1;

var y = 0.2;

var z = x + y // z 的結果為 0.3

if (z == 0.3) // 返回 false

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

實例

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

JavaScript 字元串分行

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

實例 1

var x =

"Hello World!";

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

實例 2

var x = "Hello

World!";

我們可以在選擇開發工具或按下 F12 來查看錯誤信息：

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

實例 3

var x = "Hello

World!";

錯誤的使用分號

以下實例中，由於分號使用錯誤，if 語句中的代碼塊將無法執行：

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

function myFunction(a) {

var

power = 10;

return a * power;

}

嘗試一下 ?

但是，以下實例結果會返回 undefined：

實例 4

function myFunction(a) {

var

power = 10;

return

a * power;

}

嘗試一下 ?

為什麼會有這樣的結果呢？因為在 JavaScript 中，實例 4 的代碼與下面的代碼一致：

function myFunction(a) {

解析

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

var

JavaScript 將嘗試讀取第二行的語句：

power = 10;

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

return

JavaScript 將自動關閉語句:

return;

在 JavaScript 中，分號是可選的 。

由於 return 是一個完整的語句，所以 JavaScript 將關閉 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 會把數組重新定義為標準對象。

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

實例

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

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

var y = person[0]; // person[0] 返回 undefined

定義數組元素，最後不能添加逗號

錯誤的定義方式：

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

正確的定義方式：

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

定義對象，最後不能添加逗號

錯誤的定義方式：

websites = {site:"菜鳥教程", url:"www.runoob.com", like:460,}

正確的定義方式：

websites = {site:"菜鳥教程", url:"www.runoob.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：

實例

for (var i = 0; i < 10; i++) {

// some code

}

return i;

賦值語句返回變數的值。

注意：

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！