JavaScript 使用誤區


本章節我們將討論 JavaScript 的使用誤解。

賦值運算子應用錯誤

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

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

運行實例»##點擊"運行實例"按鈕查看線上實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

#運行實例»點擊"運行實例" 按鈕查看線上實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>
##運行實例»
點擊"執行實例" 按鈕查看線上實例

比較運算子常見錯誤

在常規的比較中，資料型別是被忽略的，以下if 條件語句傳回true：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看在線實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

##執行實例»點擊"運行實例" 按鈕查看線上實例

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

以下實例會執行alert 彈窗：

實例

#
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case 10: alert("Hello");
}
</script>

</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

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

實例

##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

#加法與連線注意事項

加法

是兩個數字相加。

連接

是兩個字串連接。 JavaScript 的加法和連接都使用 + 運算子。

接下來我們可以透過實例查看兩個數字相加及數字與字串連線的差異：

#實例
##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


#執行實例»
點擊"運行實例"按鈕查看線上實例
使用變數相加結果也不一致:

##實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

##浮點型資料使用注意事項

JavaScript 中的所有資料都是以64 位元

浮點型資料(float)
來儲存。

所有的程式語言，包含JavaScript，對浮點型資料的精確度都很難確定：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例
###我解決以上問題，可以用整數的乘除法來解決：###### ###實例######
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>
####
運行實例»

點擊"運行實例" 按鈕查看在線實例

#JavaScript 字串分行

JavaScript 運行我們在字串中使用斷行語句:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
	"Hello World!";
</script>

</body>
</html>

#運行實例»##點擊"運行實例"按鈕查看在線實例

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>about:newtab

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

執行實例»點擊"運行實例" 按鈕查看線上實例

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

QQ截图20161017174526.png

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

#錯誤的使用分號

##實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

運行實例»
點擊"運行實例" 按鈕查看線上實例

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

Return 語句使用注意事項

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

以下兩個實例傳回結果是一樣的(一個有分號一個沒有):

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10
    return a * power
}
</script>

</body>
</html>

#運行實例»
點擊"運行實例" 按鈕查看線上實例


#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10;
    return a * power;
}
</script>

</body>
</html>



執行實例»

點擊"執行實例" 按鈕查看線上實例

JavaScript 也可以使用多行來結束一個語句。 以下實例傳回相同的結果:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return a * power;
}
</script>

</body>
</html>

執行實例»

點擊"執行實例" 按鈕查看線上實例

###但是，以下實例結果會傳回###undefined###：#########實例######
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>

</body>
</html>
## #######運行實例»######點擊"運行實例" 按鈕查看線上實例#######

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

function myFunction(a) {
    var
    power = 10;  
    return;       // 分号结束，返回 undefined
    a * power;
}

解析

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

var

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

power = 10;

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

return

JavaScript 將自動關閉語句:

return;

在JavaScript 中，分號是可選的。

由於 return 是一個完整的語句，所以 JavaScript 會關閉 return 語句。

Note#賦值語句傳回變數的值。
Note注意：不用對 return 語句進行斷行。

陣列中使用名字來索引

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

使用名字來作為索引的陣列稱為關聯數組(或雜湊)。

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

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

在JavaScript 中, 物件 使用名字作為索引。

如果你使用名字作為索引，當存取陣列時，JavaScript 會把陣列重新定義為標準物件。

執行這樣操作後，陣列的方法及屬性將無法再使用，否則會產生錯誤:

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象，数组的方法及属性将不能再使用，否则会产生错误:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

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

錯誤的定義方式：

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

正確的定義方式：

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

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

錯誤的定義方式：

websites = {site:"php中文网", url:"www.php.cn", like:460,}

正確的定義方式：

websites = {site:"php中文网", url:"www.php.cn", 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：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
    // some code
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例