Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 使用誤區

本章節我們將討論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 )

嘗試一下»
Note 賦值語句返回變量的值。

比較運算符常見錯誤

在常規的比較中,數據類型是被忽略的,以下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
    power = 10;  
    return;       // 分号结束,返回 undefined
    a * power;
}

解析

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

var

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

power = 10;

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

return

JavaScript 將自動關閉語句:

return;

在JavaScript 中,分號是可選的。

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

Note注意:不用對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.w3big.com", like:460,}

正確的定義方式:

websites = {site:"本教程", url:"www.w3big.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;

嘗試一下»