JavaScript 使用誤區(qū)
本章節(jié)我們將討論 JavaScript 的使用誤區(qū)。
賦值運(yùn)算符應(yīng)用錯(cuò)誤
在 JavaScript 程序中如果你在 if 條件語句中使用賦值運(yùn)算符的等號 (=) 將會產(chǎn)生一個(gè)錯(cuò)誤結(jié)果, 正確的方法是使用比較運(yùn)算符的兩個(gè)等號 (==)。
if 條件語句返回 false (是我們預(yù)期的)因?yàn)?x 不等于 10:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 0; document.getElementById("demo").innerHTML = Boolean(x == 10); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
if 條件語句返回 true (不是我們預(yù)期的)因?yàn)闂l件語句執(zhí)行為 x 賦值 10,10 為 true:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 0; document.getElementById("demo").innerHTML = Boolean(x = 10); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
if 條件語句返回 false (不是我們預(yù)期的)因?yàn)闂l件語句執(zhí)行為 x 賦值 0,0 為 false:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 0; document.getElementById("demo").innerHTML = Boolean(x = 0); </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
![]() | 賦值語句返回變量的值。 |
---|
比較運(yùn)算符常見錯(cuò)誤
在常規(guī)的比較中,數(shù)據(jù)類型是被忽略的,以下 if 條件語句返回 true:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在嚴(yán)格的比較運(yùn)算中,=== 為恒等計(jì)算符,同時(shí)檢查表達(dá)式的值與類型,以下 if 條件語句返回 false:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
這種錯(cuò)誤經(jīng)常會在 switch 語句中出現(xiàn),switch 語句會使用恒等計(jì)算符(===)進(jìn)行比較:
以下實(shí)例會執(zhí)行 alert 彈窗:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10; switch(x) { case 10: alert("Hello"); } </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例由于類型不一致不會執(zhí)行 alert 彈窗:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10; switch(x) { case "10": alert("Hello"); } </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
加法與連接注意事項(xiàng)
加法是兩個(gè)數(shù)字相加。
連接是兩個(gè)字符串連接。
JavaScript 的加法和連接都使用 + 運(yùn)算符。
接下來我們可以通過實(shí)例查看兩個(gè)數(shù)字相加及數(shù)字與字符串連接的區(qū)別:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 10 + "5"; document.getElementById("demo").innerHTML = x; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
使用變量相加結(jié)果也不一致:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
浮點(diǎn)型數(shù)據(jù)使用注意事項(xiàng)
JavaScript 中的所有數(shù)據(jù)都是以 64 位浮點(diǎn)型數(shù)據(jù)(float) 來存儲。
所有的編程語言,包括 JavaScript,對浮點(diǎn)型數(shù)據(jù)的精確度都很難確定:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
我解決以上問題,可以用整數(shù)的乘除法來解決:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
JavaScript 字符串分行
JavaScript 運(yùn)行我們在字符串中使用斷行語句:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
但是,在字符串中直接使用回車換行是會報(bào)錯(cuò)的:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body>about:newtab <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello World!"; </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
我們可以在選擇開發(fā)工具或按下 F12 來查看錯(cuò)誤信息:
字符串?dāng)嘈行枰褂梅葱备?\),如下所示:
錯(cuò)誤的使用分號
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = 5; if (x == 19);{ document.getElementById("demo").innerHTML = "Hello"; } </script> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以下實(shí)例中,由于分號使用錯(cuò)誤,if 語句中的代碼塊將無法執(zhí)行:
Return 語句使用注意事項(xiàng)
JavaScript 默認(rèn)是在代碼的最后一行自動結(jié)束。
以下兩個(gè)實(shí)例返回結(jié)果是一樣的(一個(gè)有分號一個(gè)沒有):
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
JavaScript 也可以使用多行來結(jié)束一個(gè)語句。
以下實(shí)例返回相同的結(jié)果:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
但是,以下實(shí)例結(jié)果會返回 undefined:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
為什么會有這樣的結(jié)果呢?因?yàn)樵?JavaScript 中,實(shí)例 4 的代碼與下面的代碼一致:
function myFunction(a) { var power = 10; return; // 分號結(jié)束,返回 undefined a * power; }
解析
如果是一個(gè)不完整的語句,如下所示:
var
JavaScript 將嘗試讀取第二行的語句:
power = 10;
但是由于這樣的語句是完整的:
return
JavaScript 將自動關(guān)閉語句:
return;
在 JavaScript 中,分號是可選的 。
由于 return 是一個(gè)完整的語句,所以 JavaScript 將關(guān)閉 return 語句。
![]() | 注意:不用對 return 語句進(jìn)行斷行。 |
---|
數(shù)組中使用名字來索引
許多程序語言都允許使用名字來作為數(shù)組的索引。
使用名字來作為索引的數(shù)組稱為關(guān)聯(lián)數(shù)組(或哈希)。
JavaScript 不支持使用名字來索引數(shù)組,只允許使用數(shù)字索引。
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
在 JavaScript 中, 對象 使用 名字作為索引。
如果你使用名字作為索引,當(dāng)訪問數(shù)組時(shí),JavaScript 會把數(shù)組重新定義為標(biāo)準(zhǔn)對象。
執(zhí)行這樣操作后,數(shù)組的方法及屬性將不能再使用,否則會產(chǎn)生錯(cuò)誤:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <p> 如果你使用名字作為索引,當(dāng)訪問數(shù)組時(shí),JavaScript 會把數(shù)組重新定義為標(biāo)準(zhǔn)對象,數(shù)組的方法及屬性將不能再使用,否則會產(chǎn)生錯(cuò)誤:。 </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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
定義數(shù)組元素,最后不能添加逗號
錯(cuò)誤的定義方式:
points = [40, 100, 1, 5, 25, 10,];
正確的定義方式:
points = [40, 100, 1, 5, 25, 10];
定義對象,最后不能添加逗號
錯(cuò)誤的定義方式:
websites = {site:"php中文網(wǎng)", url:"miracleart.cn", like:460,}
正確的定義方式:
websites = {site:"php中文網(wǎng)", url:"miracleart.cn", like:460}
Undefined 不是 Null
在 JavaScript 中, null 用于對象, undefined 用于變量,屬性和方法。
對象只有被定義才有可能為 null,否則為 undefined。
如果我們想測試對象是否存在,在對象還沒定義時(shí)將會拋出一個(gè)錯(cuò)誤。
錯(cuò)誤的使用方式:
if (myObj !== null && typeof myObj !== "undefined")
正確的方式是我們需要先使用 typeof 來檢測對象是否已定義:
if (typeof myObj !== "undefined" && myObj !== null)
程序塊作用域
在每個(gè)代碼塊中 JavaScript 不會創(chuàng)建一個(gè)新的作用域,一般各個(gè)代碼塊的作用域都是全局的。
以下代碼的的變量 i 返回 10,而不是 undefined:
實(shí)例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(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>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例