JavaScript 使用誤區(qū)
本章節(jié)我們將討論 JavaScript 的使用誤區(qū)。
String replace
string的replace方法我們經(jīng)常用，替換string中的某些字符，語法像這樣子
string.replace(subStr/reg,replaceStr/function)
第一個參數(shù)是要查找的字符串或者一個正則表達式，第二個參數(shù)是想替換成的字符串或一個方法，我們可以這么使用
"I'm Byron".replace("B","b") // I'm byron
記過和我們想得一樣，但是
"I'm a student, and you?".replace("n","N"); // I'm a studeNt, and you?
和我們預期的不一樣，第二個‘n’沒有被替換。字符串的 replace 方法如果第一個參數(shù)傳入字符串，那么只有第一個匹配項會被替換。如果要替換全部匹配項，需要傳入一個 RegExp 對象并指定其 global 屬性。
"I'm a student, and you?".replace(/n/g,"N"); // I'm a studeNt, aNd you?
typeof
關于typeof最容易讓人誤會的就是typeof是操作符，并不是函數(shù)，也就是說我們在判斷一變量類型時沒必要加括號，直接使用即可
typeof 1; //numbertypeof(1); //number, 沒必要這么寫，但是也沒錯，等于是給變量或常量包裝了一下
typeof 的返回值是字符串，在大多數(shù)情況下返回的和我們預期結(jié)果是一樣的，但是有幾點注意的地方,我們知道JavaScript有幾種基本類型，number、string、boolean、null、undefined，再就是對象object了，我們看幾個例子
typeof 123; //number
typeof NaN //number
typeof "123" //string
typeof false; //boolean
typeof undefined ; //undefined
typeof null //object
typeof new Array(); //object
typeof (new Array()); //覺得不夠清晰可以這么用，結(jié)果是一樣的
typeof (function(){}); //function
typeof a; //undefined
1. 123是個數(shù)字返回number
2. 雖然NaN表示不是數(shù)字，但是typeof仍然會返回number
3. “123” 變成了字符串，所以返回string
4. false 類型就是boolean
5. undefined的類型就是undefined，這個類型的變量只能有一個字面值”undefined”
6. null的類型并不是null，而是object，所以我們不要寄希望與typeof幫我們判斷null
7. typeof如果判斷是對象只會返回object,而不會返回Array、Date的具體類型
9. function也是object的一種，按說也應該直接返回object。但是typeof對它區(qū)別對待了，返回了function，我們可以用此判斷變量是否為函數(shù)
10. 沒定義的變量同樣返回undefined
if和==
在javascript中if并不僅僅判斷boolean決定真假，0、NaN、””、undefined、null、false都會被認為是假
if (!false) {
? ? ? ? ? ? console.log(1);
? ? ? ? };
? ? ? ? if (!0) {
? ? ? ? ? ? console.log(2);
? ? ? ? };
? ? ? ? if (!"") {
? ? ? ? ? ? console.log(3);
? ? ? ? };
? ? ? ? if (!undefined) {
? ? ? ? ? ? console.log(4);
? ? ? ? };
? ? ? ? if (!null) {
? ? ? ? ? ? console.log(5);
? ? ? ? };
? ? if (!NaN) {?
? ? ? ? console.log(6);?
? ? };
在console中123456都會被打印出來
但是這并不意味著這些值就==false
0==false; //true
"0"==false; //true,這個也是true
undefined==false //false
null==false //false
null==null //true
NaN==NaN //false
null==undefined //true
賦值運算符應用錯誤
在 JavaScript 程序中如果你在 if 條件語句中使用賦值運算符的等號 (=) 將會產(chǎn)生一個錯誤結(jié)果, 正確的方法是使用比較運算符的兩個等號 (==)。
if?條件語句返回?false?(是我們預期的)因為 x 不等于 10:
<!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>比較運算符常見錯誤
在嚴格的比較運算中，=== 為恒等計算符，同時檢查表達式的值與類型，以下 if 條件語句返回 false：
<!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>這種錯誤經(jīng)常會在 switch 語句中出現(xiàn)，switch 語句會使用恒等計算符(===)進行比較
以下實例由于類型不一致不會執(zhí)行 alert 彈窗：
<!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>加法與連接注意事項
加法是兩個數(shù)字相加。
連接是兩個字符串連接。
JavaScript 的加法和連接都使用 + 運算符。
接下來我們可以通過實例查看兩個數(shù)字相加及數(shù)字與字符串連接的區(qū)別：
var?x =?10?+?5;??????????// x 的結(jié)果為 15
var?x =?10?+?"5";????????// x 的結(jié)果為 "105"
浮點型數(shù)據(jù)使用注意事項
JavaScript 中的所有數(shù)據(jù)都是以 64 位浮點型數(shù)據(jù)(float)?來存儲。
所有的編程語言，包括 JavaScript，對浮點型數(shù)據(jù)的精確度都很難確定：
var?x =?0.1;
var?y =?0.2;
var?z = x + y????????????// z 的結(jié)果為 0.3
if (z ==?0.3)????????????// 返回 false
Return 語句使用注意事項
JavaScript 默認是在代碼的最后一行自動結(jié)束。
以下實例結(jié)果會返回?undefined：
<!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>為什么會有這樣的結(jié)果呢？因為在 JavaScript 中，實例 4 的代碼與下面的代碼一致：
function myFunction(a) {
? ?var
? ?power = 10; ?
? ?return; ? ? ? // 分號結(jié)束，返回 undefined
? ?a * power;
}
解析
如果是一個不完整的語句，如下所示:
var
JavaScript 將嘗試讀取第二行的語句：
power = 10;
但是由于這樣的語句是完整的:
return
JavaScript 將自動關閉語句:
return;
在 JavaScript 中，分號是可選的 。
由于 return 是一個完整的語句，所以 JavaScript 將關閉 return 語句。
數(shù)組中使用名字來索引
許多程序語言都允許使用名字來作為數(shù)組的索引。
使用名字來作為索引的數(shù)組稱為關聯(lián)數(shù)組(或哈希)。
JavaScript 不支持使用名字來索引數(shù)組，只允許使用數(shù)字索引。
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 中,?對象?使用?名字作為索引。
如果你使用名字作為索引，當訪問數(shù)組時，JavaScript 會把數(shù)組重新定義為標準對象。
執(zhí)行這樣操作后，數(shù)組的方法及屬性將不能再使用，否則會產(chǎn)生錯誤:
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
定義數(shù)組元素，最后不能添加逗號
錯誤的定義方式：
points = [40, 100, 1, 5, 25, 10,];
正確的定義方式：
points = [40, 100, 1, 5, 25, 10];
定義對象，最后不能添加逗號
錯誤的定義方式：
websites = {site:"php中文網(wǎng)", url:"ipnx.cn", like:460,}
正確的定義方式：
websites = {site:"php中文網(wǎng)", url:"ipnx.cn", like:460}
Undefined 不是 Null
在 JavaScript 中,?null?用于對象,?undefined?用于變量，屬性和方法。
對象只有被定義才有可能為 null，否則為 undefined。
如果我們想測試對象是否存在，在對象還沒定義時將會拋出一個錯誤。
錯誤的使用方式：
if (myObj !== null && typeof myObj !== "undefined")
正確的方式是我們需要先使用 typeof 來檢測對象是否已定義：
if (typeof myObj !== "undefined" && myObj !== null)
