JavaScript 數據類型 · 跟濤哥學前端

[TOC] * * * * * # JavaScript數據類型計算機顧名思義就是可以做數學計算的機器，因此，計算機程序理所當然地可以處理各種數值。但是，計算機能處理的遠不止數值，還可以處理文本、圖形、音頻、視頻、網頁等各種各樣的數據，不同的數據，需要定義不同的數據類型。在JavaScript中定義了以下幾種數據類型：字符串（String）、數字(Number)、布爾(Boolean)、數組(Array)、對象(Object)、空（Null）、未定義（Undefined）。 ### 字符串（String）字符串是存儲字符（比如 "Bill Gates"）的變量。字符串可以是引號中的任意文本。您可以使用單引號或雙引號： ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a="hello world";//有引號字符串 var b="123";//有引號字符串 var c=" ";//有引號字符串 var d="false";//有引號字符串 console.log(typeof a); console.log(typeof b); console.log(typeof c); console.log(typeof d); </script> </head> <body> </body> </html> ~~~ ![](https://box.kancloud.cn/b81b0946d88a276ab90c06a21a9bf215_92x116.png) 您可以在字符串中使用引號，只要不匹配包圍字符串的引號即可： ~~~ var answer="It's alright"; var answer="He is called 'Johnny'"; var answer='He is called "Johnny"'; ~~~ **連字符和加號（重點）** 鍵盤上+在JS中有兩層含義： 1）連字符 2）加 ~~~ <script type="text/javascript"> console.log("1" + "2"); //字符串與字符串的連字，所以輸出12 console.log(1 + 2); //加號兩邊都是數字，所以相加，輸出3 console.log(1 + "2"); //加號兩邊出現了字符串，所以就是連字符，輸出12 console.log("1" + 2); //加號兩邊出現了字符串，所以就是連字符，輸出12 console.log("1" + " " + "2"); //三個字符串拼接，輸出1 2 console.log("1" + "" + "2"); //三個字符串拼接，但是第二個是空字符串，輸出12 </script> ~~~ ~~~ console.log("我" + "愛" + "你"); //連字符，把三個獨立的漢字，連接在一起了console.log("我+愛+你"); //原樣輸出 console.log(1+2+3); //輸出6 ~~~ ![](https://box.kancloud.cn/90b8b017b3020b98937c827279c69e84_98x81.png) 同樣是加號，有時候表示的是連字符，有時候表示的是加號。什么時候是連字符？什么時候是加呢？如果加號兩邊都是數值，此時是加。否則，就是連字符。 ~~~ <script type="text/javascript"> var a = "1"; var b = 2; console.log(a + b); </script> ~~~ ![](https://box.kancloud.cn/81c1b5df8d4d57b1cd0e27b9cbe9a698_110x60.png) ~~~ var a = 1; //數字 var b = 2; //數字 console.log(a + b); ~~~ ![](https://box.kancloud.cn/29946df68fbb45f2dc31d86ff6567b2f_74x48.png) ~~~ var a = 234234; var b = 234323112; console.log("a+b"); //由于加上了引號，所以就表示原樣輸出 ~~~ ![](https://box.kancloud.cn/b7d1909943bf2c3de5190c03ff079092_85x63.png) ~~~ var a = 1; var b = 2; console.log("a" + b); //"a"就不是變量了！所以就是"a"+2 輸出a2 ~~~ ![](https://box.kancloud.cn/6b2f167a8f5fe0e9edb9e56710cb2edd_75x53.png) ~~~ var a = 123; var b = "123"; console.log(a + "b"); ~~~ ![](https://box.kancloud.cn/033a849e96dc49a28e705040b073e8ec_97x63.png) **JavaScript轉義字符** 在我們寫JAVAScript腳本時，可能會要HTML文檔顯示或使用某些特殊字符（例如：引號或斜線）。（例如：<img src="image5.jpg">）但是前面提過，聲明一個字符串時，前后必須以引號括起來。如此一來，字符串當中引號可能會和標示字符串的引號搞混了，此時就要使用轉義字符（Escape Character）。 | 代碼 |輸出 | | --- | --- | | \' | 單引號 | | \" |雙引號 | | \& |和號 | | \\ | 反斜杠 | | \n | 換行符 | |\r | 回車符 | | \t | 制表符 | | \b | 退格符 | | \f | 換頁符 | ~~~ document.write ("You \& me are singing!") ~~~ 輸出：You & me are singing! ### 數字(Number) 如果一個變量中，存放了數字，那么這個變量就是數值型的。 JavaScript種，只要是個數，那么就是數值型的，無論整浮、無論大小、無論正負，都是number類型的。 “浮”就是浮點數，就是“小數”，術語叫做“浮點數”。 ~~~ <script type="text/javascript"> var a = 100; //類型都是number var b = 234234234324324324; //類型都是number var c = 3.234234234324324; //類型都是number var d = -23423432432432432; //類型都是number var e = -34.3423423432; //類型都是number var f = 0.324234234; //類型都是number console.log(typeof a); // number console.log(typeof b); // number console.log(typeof c); // number console.log(typeof d); // number console.log(typeof e); // number console.log(typeof f); // number </script> ~~~ 數字類型的取值范圍： ◆ 能表示的最大值是±1.7976931348623157乘以10的308次方 ◆ 能表示的最小值是±5 乘以10的-324次方數字類型的表示方式： ◆十進制表示法 ◆十六進制表示法以0x開頭數字0-9 和 a(A)-f(F) ◆八進制表示法以數字0開頭 0-7之間的組合。 ![](https://box.kancloud.cn/94982a501246a533c81672340e324b7e_417x156.png) 除常用數值外，javascript還支持以下兩個數值 **Infinity:**當在javascript中使用的數字大于javascript所能表示的最大值時, javascript就會將其輸出為Infinity,即無窮大的意思. 當在javascript中使用的數字小于javascript所能表示的最小值時, javascript就會將其輸出為-Infinity,即無窮小的意思. **NaN:**javascript中的NaN是"not a number"(不是數字)的意思.如果在數字運算是產生了未知的結果或錯誤, javascript就會返回NaN,這代表著數字運算的結果是一個非數字的特殊情況. NaN是一個很特殊的數字,不會與任何數字相等,包括NaN, 在javascript中只能使用isNaN()函數來判斷運算結果是不是NaN. ### 布爾(Boolean) 數值型里面的值，有無窮多個，因為世界上所有的數字，都是數值型；字符串型的值，有無窮多個，因為世界上所有的文字、語句都是字符串型；布爾類型的值，就兩個，true、false。 ~~~ <script type="text/javascript"> var a = true; //真 var b = false; //假 console.log(a); //輸出 console.log(b); //輸出 console.log(typeof a); //輸出類型 console.log(typeof b); //輸出類型 var c = "true"; var d = "false"; console.log(c); console.log(d); console.log(typeof c); console.log(typeof d); </script> ~~~ false、undefined 、null、0、”” 為 false true、1、”somestring”、[Object] 為 true ### 數組(Array) 數組是編程的基礎部分。一個數組就是一系列數據。我們可以儲存許多數據在一個變量中，這提高了代碼可讀性，讓人更好理解代碼。這使相關數據傳遞到函數中執行更簡單。數組中數據稱為元素。這是一個簡單的數組： ~~~ // 1, 1, 2, 3, 5 和 8 是數組中的元素 var numbers = [1, 1, 2, 3, 5, 8]; ~~~ ~~~ <script type="text/javascript"> var myarr=new Array(1,2,3); console.log(typeof(myarr)); var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; console.log(typeof(cars)); </script> ~~~ 數組下標是基于零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。 ### 對象(Object) 對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔： ~~~ var person={firstname:"John", lastname:"Doe", id:5566}; ~~~ 上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。空格和折行無關緊要。聲明可橫跨多行： ~~~ var person={ firstname : "John", lastname : "Doe", id : 5566 }; ~~~ 對象屬性有兩種尋址方式： ~~~ name=person.lastname; name=person["lastname"]; ~~~ JavaScript的內置對象： ~~~ <script type="text/javascript"> var mydate=new Date(); console.log(typeof(mydate)); </script> ~~~ ### 空（Null）與未定義（Undefined） Undefined 這個值表示變量不含有值。可以通過將變量的值設置為 null 來清空變量。 ~~~ cars=null; person=null; ~~~ ~~~ <script type="text/javascript"> var a; //undefined未定義類型 var b=null;//空類型 object //在內存中不存在這個值 var c=""; //string 字符串類型 //特殊的空但內存中是存在的 console.log(typeof(a)); console.log(typeof(b)); console.log(typeof(c)); /* null與undefined的區別是， null表示一個變量被賦予了一個空值，而undefined則表示該變量尚未被賦值。 */ /* 這里必須要注意的是： null不等同于空的字符串（""）或0。 */ </script> ~~~