JavaScript 使用誤區LOGIN

JavaScript 使用誤區

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

String replace

string的replace方法我們常用,取代string中的某些字符,語法像這樣子

string.replace(subStr/reg,replaceStr/function)

#第一個參數是要尋找的字串或是正規表示式,第二個參數是想替換成的字串或一個方法,我們可以這麼使用

"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 方法如果第一個參數傳入字串,那麼只有第一個匹配項會被替換。如果要取代全部符合項,則需要傳入一個 RegExp 物件並指定其 global 屬性。

"I'm a student, and you?".replace(/n/g,"N"); // I'm a studeNt, aNd you?


#typeof

關於typeof最容易讓人誤會的就是typeof是運算符,並不是函數,也就是說我們在判斷一變數型別時沒必要加括號,直接使用即可

typeof 1; //numbertypeof(1); //number, 沒必要這麼寫,但是也沒錯,等於是給變數或常數包裝了一下

typeof 的返回值是字串,在大多數情況下返回的和我們預期結果是一樣的,但是有幾點注意的地方,我們知道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()); //覺得不夠清晰可以這麼用,結果是一樣的

typeof (function(){}); //function

typeof a; //undefined

1. 123是個數字返回number

2. 雖然NaN表示不是數字,但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對它區別對待了,返回了function,我們可以用此判斷變數是否為函數

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.

           console.

##.         };

        if (!null) {

         

#        };

    if (!NaN) { 

        console.log(6);#o

#o


###############################################################################################' #####    };#########在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 條件語句中使用賦值運算子的等號(=) 將會產生一個錯誤結果, 正確的方法是使用比較運算符的兩個等號(==)。

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 條件語句傳回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>


加法與連結注意事項

加法是兩個數字相加。

連接是兩個字串連接。

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

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

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



浮點型資料使用注意事項

JavaScript 中的所有資料都是以 64 位元浮點型資料(float) 來儲存。

所有的程式語言,包括JavaScript,對浮點型資料的精確度都很難確定:

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的結果為0.3
if (z == 0.3)         
Return 語句使用注意事項
JavaScript 預設是在程式碼的最後一行自動結束。

以下實例結果會回傳 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;    power = 10;  

  return;    power = 10;  

  return;    power = 10;     return;     // 分號號結束,返回undefined
   a * power;
}


#解析

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

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];            ##在JavaScript 中, 物件 使用 名字作為索引。

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


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

var person = [];

person["firstName"] = "John";

person["lastName"] = "Doe";

person["age"] = 46;

var x = person.length;         // 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:"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)



#下一節
<!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>
章節課件