JavaScript學習筆記（五）——類型、轉換、相等、字符串
第六章 類型 相等 轉換等
一、類型
1 typeof();
typeof是一個內置的JavaScript運算符，可用於探測其操作數的類型。
例：
1 <script language="JavaScript" type="text/JavaScript"> 2 3 var test1="abcdef"; //string 4 5 var test2=123; //number 6 7 var test3=true; //boolean 8 9 var test4={}; //object 10 11 var test5=[]; //object 12 13 var test6; //undefined 14 15 var test7={"asdf":123}; //object 16 17 var test8=["asdf",123]; //object 18 19 function test9(){return "asdfg"}; //function 20 21 22 23 console.log(typeof test1);//string 24 25 console.log(typeof test2);//number 26 27 console.log(typeof test3);//boolean 28 29 console.log(typeof test4);//object30 31 console.log(typeof test5);//object 32 33 console.log(typeof test6);//undefined 34 35 console.log(typeof test7);//object 36 37 console.log(typeof test8);//object 38 39 console.log(typeof test9);//function 40 41 </script>
2 undefined
說明：對於任何還沒有值（即未初始化）的東西，都會將undefined賦給它；undefined的類型是undefined
【未初始化的變量、訪問不存在或已刪除的屬性、使用不存在的數組元素】
優點：undefined讓你能夠判斷是否給變量（屬性、數組元素）賦值了
應用：
1 //變量 2 3 var x; 4 5 if(x==undefined) 6 7 { 8 9 處理程序; 10 11 } 12 13 //對象的屬性 14 15 var customer={ 16 17 name:"Jenny" 18 19 }; 20 21 if(customer.phonenumber==nudefined) 22 23 { 24 25 處理程序 26 27 }
3 null
說明：表示沒有對象可以賦給變量；
與undefined對比：undefined：在變量未初始化、對象沒有指定屬性、數組沒有指定元素；
null：在應該提供一個對象，但無法創建或找到時；
再次說明：返回null未必意味著出現了問題，這可能只是意味著有什麽東西不存在，需要創建它或可以忽略它。
例：
1 var weather=document.getElementById("weatherDiv"); 2 3 if(weather!=null) 4 5 { 6 7 //為div元素weather創建內容 8 9 }
4 NaN
說明：不是數字的數字【它的類型為number】，表示 0/0 等不可以被表示的數字，
*是一個數字，只是無法表示；
*NaN！=NaN 【sqrt(-1)與sqrt(-2)】；
*判斷函數是isNaN();返回值為布爾類型；
*向isNaN()傳遞一個不能轉換為數字的字符串時返回true；
*typeof null返回值為object【與說明相對應】
*NaN與Infinity區別：Infinity是指任何超過浮點數上限1.7976931348623157E+1.038的值，
（-Infinity是小-1.7976931348623157E+1.038）
二、 相等
1 理解相等
如果兩個值類型相同，就直接進行比較；
如果兩個值類型不同，就嘗試將他們轉換為相同的類型再進行比較；
返回值：相等true不等false
2 相等運算符轉換操作數：
*比較數字和字符串，將字符串轉換為數字，(如將“99”轉換為 99 )；如果不能轉換為數字則轉換為NaN
*比較布爾類型和其他類型，將布爾中true=1，false=0；
*undefined==null；
*""空字符串轉換為數字0；
拓：嚴格相等：===【類型和值都相等】
沒有<==和>==但是有!===
應用："true"==true;//返回false因為簽前面為字符串後邊布爾轉換為數字
"banana"<"melon";//返回true，因為按照字母排列順序Unicode排序，開頭b<m,拓M<m
三、類型轉換
1 涉及轉換的運算符
· + 數字遇到字符串，將數字轉換為字符串；如1+2+"pizzas"="3 pizzas";1+(2+"pizzas")="12 pizzas";true轉換為字符串
· *數字遇到字符串，將字符串轉換為數字
· /數字遇到字符串，將字符串轉換為數字
· - 數字遇到字符串，將字符串轉換為數字
四、 判斷兩個對象是否相等
· 運算符：==和===等價
· 意義：檢查兩個對象變量是否相等時，比較的是指向對象的引用，僅當兩個引用指向的是同一個對象時，他們才相等；
· 例：
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <title>look for car</title> 8 9 <meta charset="utf-8"> 10 11 <style type="text/css"> 12 13 14 15 </style> 16 17 <script language="JavaScript" type="text/JavaScript"> 18 19 function findCarInLot(car) 20 21 { 22 23 for(var i=0;i<lot.length;i++) 24 25 { 26 27 if(car===lot[i])//== 一樣 28 29 return i+1; 30 31 } 32 33 return -1; 34 35 } 36 37 var chevy={ 38 39 make:"Chevy", 40 41 model:"Bel Air" 42 43 }; 44 45 var taxi={ 46 47 make:"Webville Motors", 48 49 model:"Taxi" 50 51 }; 52 53 var fiat1={ 54 55 make:"Fiat", 56 57 model:"500" 58 59 }; 60 61 var fiat2={ 62 63 make:"Fiat", 64 65 model:"500" 66 67 }; 68 69 70 71 var lot=[chevy,taxi,fiat1,fiat2]; 72 73 var loc1=findCarInLot(taxi); //2 74 75 var loc2=findCarInLot(fiat1);//3 76 77 var loc3=findCarInLot(chevy);//1 78 79 var loc4=findCarInLot(fiat2);//4 80 81 82 83 console.log(loc1);//2 84 85 console.log(loc2);//3 86 87 console.log(loc3);//1 88 89 console.log(loc4);//4 90 91 </script> 92 93 </head> 94 95 <body> 96 97 <h1>Look for cars in the parking lot</h1> 98 99 </body> 100 101 </html>
五 、真值和假值
· 說明：在JavaScript中有些值並非true和false但是用於條件表達式中時被視為true和false。
· 記住五個假值，其余就是真值：undefined null 0 空字符串 NaN
例如：if([]){//代碼;}中[] 表示數組為真值
六 、字符串
· 前奏：每種類型都歸屬兩個陣營之一，基本類型和對象；
· 字符串/數字/布爾也可以是既有基本類型又是對象，但是後兩者的屬性和方法較前一者少很多；
· string屬性和方法介紹：
· 屬性str.length:返回字符串的長度即字符個數；
· 方法str.charAt():參數範圍是0-長度-1 的整數，返回為該索引的字符；
· 方法str.indexOf("cat");返回第一個cat中c的索引；
str.indexOf("the",5);從索引為5開始搜索，返回the中t的索引；
如果沒有找到返回-1；
· 方法str.substring(5,10);返回索引5（包括）到10（不包括）之間的字符串；
substring(5);返回從索引5到字符串結尾的字符串；
· 方法str.slice(5,7);刪除字符串的一部分並返回結果；和substring返回結果相同
· 方法str.split("|");返回以|為界分隔的字符串數組；
· 方法str.toLowerCase();返回將字符串的所有大寫轉換成小寫；
· 方法str.toUpperCase();返回將字符串中的所有小寫轉換成大寫；
· 方法str.concat(str2);返回將str2拼接在str後的字符串；參數可以是多個即繼續向後拼接；
· 方法str.replace("fgh","12");查找子串fgh並替換成另外一個字符串12；
· 方法str.lastIndexOf();與indexOf類似但是查找最後一個子串；
str="asd,fgh,jkfg ";str3=str.lastIndexOf("fg",4);//返回4
str="asd,fgh,jkfg ";str3=str.lastIndexOf("fg");//返回10
· 方法match：在字符串中查找與正則表達式匹配的子串
1 <script type="text/javascript"> 2 3 4 5 var str="Hello world!" 6 document.write(str.match("world") + "<br />") 7 document.write(str.match("World") + "<br />") 8 document.write(str.match("worlld") + "<br />") 9 document.write(str.match("world!")) 10 11 </script>
輸出：
world
null
null
world!
· 方法str.trim()：刪除字符串開頭和末尾的空白字符；
七、舉個栗子：
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <title>Check phone number</title> 8 9 <meta charset="utf-8"> 10 11 <style type="text/css"> 12 13 14 15 </style> 16 17 <script language="JavaScript" type="text/JavaScript"> 18 19 //要求檢驗7位數字的電話號，中間第四位-可有可無 20 21 //方法一： 22 23 function validate1(phonenumber) 24 25 { 26 27 if(phonenumber.length>8||phonenumber.length<7) 28 29 return false; 30 31 for(var i=0;i<phonenumber.length;i++) 32 33 { 34 35 if(i==3) 36 37 { 38 39 if(phonenumber.length===8&&phonenumber.charAt(i)!==‘-‘) 40 41 return false; 42 43 else if(phonenumber.length==7&&isNaN(phonenumber.charAt(i))) 44 45 return false; 46 47 } 48 49 else if(isNaN(phonenumber.charAt(i))) 50 51 return false; 52 53 } 54 55 return true; 56 57 } 58 59 //方法二：還有bug嗎？ 60 61 function validate2(phonenumber) 62 63 { 64 65 if(phonenumber.length>8||phonenumber.length<7) 66 67 return false; 68 69 var first=phonenumber.substring(0,3); 70 71 var second=phonenumber.substring(phonenumber.length-4); 72 73 if(isNaN(first)||isNaN(second)) 74 75 return false; 76 77 if(phonenumber.length===8) 78 79 return (phonenumber.charAt(3)==‘-‘); 80 81 return true; 82 83 } 84 85 //方法三：正則表達式 86 87 function validate3(phonenumber) 88 89 { 90 91 return phonenumber.match(/^\d{3}-?\d{4}$/); 92 93 } 94 95 96 97 var str1="6724025"; 98 99 var str2="672-4254"; 100 101 var str3="72554896" 102 103 console.log(validate1(str1)); 104 105 console.log(validate2(str2)); 106 107 console.log(validate3(str3)); 108 109 </script> 110 111 </head> 112 113 <body> 114 115 <h1>Verify that the phone number is correct</h1> 116 117 </body> 118 119 </html>
JavaScript學習筆記（五）——類型、轉換、相等、字符串