Spotify 第一季度營收 28 億美元：同比增長 24%，月活躍使用者達 4.22 億
阿新 • • 發佈：2022-04-28
在ECMAScript中，變數是鬆散型別的。所謂鬆散型別就是指變數可以用來儲存任何型別的資料。
// 下面的操作是完全合法的
var message = "helloWorld";
message = 100;但是在實際開發中，我並不推薦大家這樣使用變數。這種操作方法是會讓程式碼變得很不安全。為了規避這樣的問題，我在變數命名的時候對變數型別做了標明。
var strMessage = "helloWorld"; // String型別 var nMessage = 100; // Number型別 // 如果有必要數字型別我也會進行細分 var iMessage = 1; // int型別 var fMessage = 0.5; // float型別 var objMessage = null; // Object型別 var bMessage = false; // Boolean型別
ECMAScript中有5種簡單資料型別：Undefined、Null、Boolean、Number、String，還有1種複雜資料型別Object。
1、Undefined型別
聲明後未賦值的變數，或者未宣告的變數，typeof的值都是Undefined。區別在於，未宣告的變數在呼叫時會報錯。
有鑑於此，變數宣告之初初始化會十分有用。這樣我們通過typeof測試變數型別，若變數為Undefined的話，則說明該變數是未賦值，而不是尚未初始化了。
2、Null型別
null值標識的是一個空指標物件，所以他的typeof值為“Object”。所以在初始化Object型別變數的時候，使用null作為初始化的值就可以了。
undefined派生自null。所以 alert(null == undefined); // true 。
3、Boolean型別
Boolean型別的true或者false，並不是單純就指1或者0。可以說不同的資料型別，都可以轉換成true或者false。
資料型別 |
轉換為true的值 |
轉換為false的值 |
|---|---|---|
Boolean |
true |
false |
String |
任何非空字串 |
""（空字串） |
Number |
任何非零數字值（包括無窮大） |
0和NaN |
Object |
任何物件 |
null |
Undefined |
n/a（意思是“不適用”） |
undefine |
4、Number型別
Number型別數值字面量格式有三種：十進位制（n）、八進位制（0 + n）、十六進位制（0x + n）。
var iNum = 55; // 十進位制
var octalNum = 070; // 八進位制
var hexNum = 0xA; // 十六進位制需要注意的是，八進位制字面量在嚴格模式下是無效的，謹慎使用。
（1）浮點數
由於儲存浮點數的記憶體空間是儲存整數的兩倍，所以凡是可以表示為整數的浮點數都會自動轉化為整數。例如 1.、10.0 等。
對於極大或者極小的數值可以表示為浮點數，即科學計數法，例如 3.125e7 == 3.125*107 、 3e-7 == 3*10-7 等。
需要注意的是，浮點數的最高進度是17位小數，在進行計算的時候其精確度遠不如整數。例如雖然 0.15 + 0.15 = 0.3 ，但是 0.1 + 0.2 = 0.30000000000000004 ，由此造成 0.1 + 0.2 == 0.3; // false 。所以不要用浮點數做比較。
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>testDocument</title>
6 <style>
7 html,body{width: 100%;height: 100%;}
8 html,body,p{padding: 0;margin: 0;}
9 div{box-sizing: border-box;}
10 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
11 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
12 </style>
13 </head>
14 <body>
15 <div class="container">
16 <div class="contentContainer">
17 <select name="a" id="numA">
18 <option value="0.05">0.05</option>
19 <option value="0.15">0.15</option>
20 <option value="0.1">0.1</option>
21 </select>
22 +
23 <select name="b" id="numB">
24 <option value="0.25">0.25</option>
25 <option value="0.15">0.15</option>
26 <option value="0.2">0.2</option>
27 </select>
28 =
29 <span id="numC">?</span>
30 <p>a + b == c ? <span id="isEqual"></span></p>
31 </div>
32 </div>
33 <script>
34 document.getElementById("numA").addEventListener("change", plusAB, false);
35 document.getElementById("numB").addEventListener("change", plusAB, false);
36
37 function plusAB() {
38 var objA = document.getElementById("numA");
39 var fA = parseFloat(objA.options[objA.selectedIndex].value);
40 var objB = document.getElementById("numB");
41 var fB = parseFloat(objB.options[objB.selectedIndex].value);
42
43 var fC = fA + fB;
44 document.getElementById("numC").innerHTML = fC;
45
46 document.getElementById("isEqual").innerHTML = (fC == 0.3);
47 }
48 </script>
49 </body>
50 </html>效果如下：
（2）數值範圍
查詢瀏覽器數值上限使用 Number.MAX_VALUE ，下限使用 Number.MIN_VALUE 。
基本上所有瀏覽器的上限均為 1.7976931348623157e+308 ，下限均為 5e-324 。
超出數值範圍，數值將被自動轉換為特殊的Infinity（無窮）值。要想確定數值是否有窮，即是否位於數值範圍內，可以使用 isFinite() 函式。
var nResult = Number.MAX_VALUE + Number.MAX_VALUE;
alert(isFinite(result)); // false超出數值範圍（3）NaN（Not a Number）
首先要明確這個數值的應用。它是用於表示一個本來要返回數值的運算元未返回數值的情況。例如，任何數值除以0都會返回NaN。
NaN本身有兩個特點：①任何涉及NaN的操作都會返回NaN；②NaN與任何值都不相等，包括其本身NaN，即 NaN == NaN; // false 。
ECMAScript定義了 isNaN() 函式，用來測定引數是否為NaN。這個函式會將引數自動轉為數值，然後再進行測試。對於物件，該函式會自動呼叫物件的 valueof() 方法進行測試，如果不能，則繼續呼叫物件的 toString() ，進行測試。
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <title>testDocument</title>
6 <style>
7 html,body{width: 100%;height: 100%;}
8 html,body,p{padding: 0;margin: 0;}
9 div{box-sizing: border-box;}
10 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
11 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
12 </style>
13 </head>
14 <body>
15 <div class="container">
16 <div class="contentContainer">
17 <p>NaN == NaN?<span id="nan"></span></p>
18 <p>10 == NaN?<span id="num"></span> （10是一個數值）</p>
19 <p>"10" == NaN?<span id="numStr"></span> （可以被轉換成數值10）</p>
20 <p>"blue" == NaN?<span id="str"></span> （不能轉換為數值）</p>
21 <p>true == NaN?<span id="boolean"></span> （可以被轉換成數值1）</p>
22 <p>obj(<span id="objValue">{"num1":1,"num2":2}</span>) == NaN?<span id="obj"></span></p>
23 <button type="button" onclick="changeObjFun();">改變object的toString方法</button>
24 </div>
25 </div>
26 <script>
27 var numList = {
28 "num1":1,
29 "num2":2
30 };
31
32 document.getElementById("nan").innerHTML = isNaN(NaN);
33 document.getElementById("num").innerHTML = isNaN(10);
34 document.getElementById("numStr").innerHTML = isNaN("10");
35 document.getElementById("str").innerHTML = isNaN("blue");
36 document.getElementById("boolean").innerHTML = isNaN(true);
37 document.getElementById("obj").innerHTML = isNaN(numList);
38
39 function changeObjFun(){
40 numList.toString = function(){
41 return "100";
42 }; // 重寫物件的toString方法，使其返回一個數值
43
44 document.getElementById("objValue").innerHTML = "100";
45 document.getElementById("obj").innerHTML = isNaN(numList); // 由於物件的toString方法返回了一個數值，所以這裡變成了false
46 }
47 </script>
48 </body>
49 </html>效果圖：
（4）數值轉換
有三個函式可以把非數值轉換為數值： Number() 、 parseInt() 、 parseFloat() 。第一個可以用於任何資料型別，而後兩個專用於字串的轉換。
使用一元加操作符也可以實現與 Number() 同樣的效果： +value 。
1 <!-- parseInt()函式轉換規則 -->
2 <!DOCTYPE html>
3 <html lang="zh-cn">
4 <head>
5 <meta charset="UTF-8">
6 <title>testDocument</title>
7 <style>
8 html,body{width: 100%;height: 100%;}
9 html,body,p{padding: 0;margin: 0;}
10 div{box-sizing: border-box;}
11 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
12 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
13 </style>
14 </head>
15 <body>
16 <div class="container">
17 <div class="contentContainer">
18 <p>"Hello World!" == <span id="str1"></span></p>
19 <p>"" == <span id="str2"></span></p>
20 <p>"hello123" == <span id="strNum"></span></p>
21 <p>null == <span id="rNull"></span></p>
22 <p>undefined == <span id="rUndefined"></span></p>
23 <p>true == <span id="boolean"></span></p>
24 <p>10 == <span id="num1"></span></p>
25 <p>10.5 == <span id="num4"></span></p>
26 <p>0xf == <span id="num2"></span></p>
27 <p>010 == <span id="num3"></span></p>
28 <p>"000010" == <span id="numStr"></span></p>
29 <p>" 10" == <span id="nullNum"></span></p>
30 <p>" 123blue" == <span id="nullNumStr"></span></p>
31 <p>obj == <span id="obj"></span></p>
32 </div>
33 </div>
34 <script>
35 var numList = {
36 "num1":1,
37 "num2":2
38 };
39 numList.toString = function(){
40 return "100";
41 };
42
43 document.getElementById("str1").innerHTML = parseInt("Hello World!"); // 非空字串返回NaN
44 document.getElementById("str2").innerHTML = parseInt(""); // 空字串返回NaN
45 document.getElementById("strNum").innerHTML = parseInt("hello123"); // 第一個非空字元非數字返回NaN
46 document.getElementById("rNull").innerHTML = parseInt(null); // null返回NaN
47 document.getElementById("rUndefined").innerHTML = parseInt(undefined); // undefined返回NaN
48 document.getElementById("boolean").innerHTML = parseInt(true); // 布林值返回NaN
49 // 由此可見parseInt()只處理第一個非空字元為數字的值
50 document.getElementById("num1").innerHTML = parseInt(10); // 數值返回該數值
51 document.getElementById("num4").innerHTML = parseInt(10.5); // 浮點數返回去掉小數的整數
52 document.getElementById("num2").innerHTML = parseInt(0xf); // 十六進位制返回十進位制
53 document.getElementById("num3").innerHTML = parseInt(010); // 八進位制返回十進位制，嚴格模式下八進位制無效，會解析為10
54 document.getElementById("numStr").innerHTML = parseInt("000010"); // 去掉多餘的0返回數值
55 document.getElementById("nullNum").innerHTML = parseInt(" 10"); // 去掉前面的空格返回數值
56 document.getElementById("nullNumStr").innerHTML = parseInt(" 123blue"); // 第一個非空字元為數字返回數值
57 document.getElementById("obj").innerHTML = parseInt(numList); // 呼叫物件的valueOf()或者toString()方法
58 </script>
59 </body>
60 </html>顯示效果：
1 <!-- parseFloat()函式轉換規則 -->
2 <!DOCTYPE html>
3 <html lang="zh-cn">
4 <head>
5 <meta charset="UTF-8">
6 <title>testDocument</title>
7 <style>
8 html,body{width: 100%;height: 100%;}
9 html,body,p{padding: 0;margin: 0;}
10 div{box-sizing: border-box;}
11 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
12 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
13 </style>
14 </head>
15 <body>
16 <div class="container">
17 <div class="contentContainer">
18 <p>"Hello World!" == <span id="str1"></span></p>
19 <p>"" == <span id="str2"></span></p>
20 <p>"hello123" == <span id="strNum"></span></p>
21 <p>null == <span id="rNull"></span></p>
22 <p>undefined == <span id="rUndefined"></span></p>
23 <p>true == <span id="boolean"></span></p>
24 <p>10 == <span id="num1"></span></p>
25 <p>10.5 == <span id="num4"></span></p>
26 <p>0xf == <span id="num2"></span></p>
27 <p>010 == <span id="num3"></span></p>
28 <p>"000010" == <span id="numStr1"></span></p>
29 <p>"10.5.23" == <span id="numStr2"></span></p>
30 <p>" 10" == <span id="nullNum"></span></p>
31 <p>" 123.23blue" == <span id="nullNumStr"></span></p>
32 <p>obj == <span id="obj"></span></p>
33 </div>
34 </div>
35 <script>
36 var numList = {
37 "num1":1,
38 "num2":2
39 };
40 numList.toString = function(){
41 return "100";
42 };
43
44 document.getElementById("str1").innerHTML = parseFloat("Hello World!"); // 非空字串返回NaN
45 document.getElementById("str2").innerHTML = parseFloat(""); // 空字串返回NaN
46 document.getElementById("strNum").innerHTML = parseFloat("hello123"); // 第一個非空字元非數字返回NaN
47 document.getElementById("rNull").innerHTML = parseFloat(null); // null返回NaN
48 document.getElementById("rUndefined").innerHTML = parseFloat(undefined); // undefined返回NaN
49 document.getElementById("boolean").innerHTML = parseFloat(true); // 布林值返回NaN
50 // 由此可見parseFloat()只處理第一個非空字元為數字的值
51 document.getElementById("num1").innerHTML = parseFloat(10); // 數值返回該數值
52 document.getElementById("num4").innerHTML = parseFloat(10.5); // 浮點數返回去掉小數的整數
53 document.getElementById("num2").innerHTML = parseFloat(0xf); // 十六進位制返回十進位制
54 document.getElementById("num3").innerHTML = parseFloat(010); // 八進位制返回十進位制，嚴格模式下八進位制無效，會解析為10
55 document.getElementById("numStr1").innerHTML = parseFloat("000010"); // 去掉多餘的0返回數值
56 document.getElementById("numStr2").innerHTML = parseFloat("10.5.23"); // 多餘的小數點後面的值都會去掉
57 document.getElementById("nullNum").innerHTML = parseFloat(" 10"); // 去掉前面的空格返回數值
58 document.getElementById("nullNumStr").innerHTML = parseFloat(" 123.23blue"); // 第一個非空字元為數字返回數值
59 document.getElementById("obj").innerHTML = parseFloat(numList); // 呼叫物件的valueOf()或者toString()方法
60 </script>
61 </body>
62 </html>顯示效果：
注： parseInt() 和 parseFloat() 都是由兩個引數的，第一個引數是需要轉換的值，第二個引數是轉換使用的基數（即多少進位制），為了防止轉換出現問題，使用多進位制轉換的時候可以制定基數，避免不必要的錯誤。
5、String型別
在ECMAScript中字串用雙引號（"）或者單引號（'）都是可以的，但是為了做一個全方面發展的好程式設計師，還是區分對待比較好。就目前我學過的語言來說，雙引號（“）多用於合法的字串符號。
（1）字元字面量
這個就是String型別所說的轉義字元的，對照表網上一搜一大堆，我就不特別列舉了。需要注意的是一個轉義字元就表示1個字元。
（2）字串的特點
字串是不可變的，也就是說一旦建立不可改變。這就使得修改字串成為了一個先破後立的過程。
（3）轉換為字串
數值轉換字串都會轉換成十進位制，然後輸出字串。
轉換字串除了以下兩個傳統方法以外，使用 value + "" 也能達到轉換字串的效果。
① toString() 方法
null和undefined沒有 toString() 方法，如果使用會報錯。
1 <!-- toString()函式轉換規則 -->
2 <!DOCTYPE html>
3 <html lang="zh-cn">
4 <head>
5 <meta charset="UTF-8">
6 <title>testDocument</title>
7 <style>
8 html,body{width: 100%;height: 100%;}
9 html,body,p{padding: 0;margin: 0;}
10 div{box-sizing: border-box;}
11 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
12 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
13 </style>
14 </head>
15 <body>
16 <div class="container">
17 <div class="contentContainer">
18 <p>null == <span id="rNull"></span></p>
19 <p>undefined == <span id="rUndefined"></span></p>
20 <p>true == <span id="boolean"></span></p>
21 <p>255 == <span id="num1"></span></p>
22 <p>255 == <span id="num1_2"></span> （二進位制）</p>
23 <p>255 == <span id="num1_8"></span> （八進位制）</p>
24 <p>255 == <span id="num1_16"></span> （十六進位制）</p>
25 <p>10.5 == <span id="num4"></span></p>
26 <p>0xf == <span id="num2"></span></p>
27 <p>010 == <span id="num3"></span></p>
28 <p>obj == <span id="obj"></span></p>
29 </div>
30 </div>
31 <script>
32 var n1 = 255;
33 var n2 = 0xf;
34 var n3 = 010;
35 var n4 = 10.5;
36 var rNull = null;
37 var rUndefined = undefined;
38 var rBoolean = true;
39 var numList = {
40 "num1":1,
41 "num2":2
42 };
43
44 // document.getElementById("rNull").innerHTML = rNull.toString(); // null轉字串，沒有toString()方法，所以不能用toString轉換
45 // document.getElementById("rUndefined").innerHTML = rUndefined.toString(); // undefined轉字串，沒有toString()方法，所以不能用toString轉換
46 document.getElementById("boolean").innerHTML = rBoolean.toString(); // Boolean轉字串
47 document.getElementById("num1").innerHTML = n1.toString(); // 整數轉字串
48 // toString()方法的引數是輸出基數，即進位制
49 document.getElementById("num1_2").innerHTML = n1.toString(2); // 整數轉字串，二進位制
50 document.getElementById("num1_8").innerHTML = n1.toString(8); // 整數轉字串，八進位制
51 document.getElementById("num1_16").innerHTML = n1.toString(16); // 整數轉字串，十六進位制
52 document.getElementById("num4").innerHTML = n4.toString(); // 浮點數轉字串
53 document.getElementById("num2").innerHTML = n2.toString(); // 十六進位制整數轉字串，會先轉換成十進位制
54 document.getElementById("num3").innerHTML = n3.toString(); // 八進位制整數轉字串，會先轉換成十進位制
55 document.getElementById("obj").innerHTML = numList.toString(); // 物件轉字串
56 </script>
57 </body>
58 </html>顯示效果：
② String() 方法
1 <!-- String()函式轉換規則 -->
2 <!DOCTYPE html>
3 <html lang="zh-cn">
4 <head>
5 <meta charset="UTF-8">
6 <title>testDocument</title>
7 <style>
8 html,body{width: 100%;height: 100%;}
9 html,body,p, pre{padding: 0;margin: 0;}
10 div{box-sizing: border-box;}
11 .container{width: 100%;height:100%;padding-left: calc((100vw - 600px) * .5);background-color: #006699;overflow: auto;}
12 .contentContainer{background-color: #fff;width: 600px;height: 100%;}
13 </style>
14 </head>
15 <body>
16 <div class="container">
17 <div class="contentContainer">
18 <!-- <p>null == <span id="rNull"></span></p>
19 <p>undefined == <span id="rUndefined"></span></p>
20 <p>true == <span id="boolean"></span></p>
21 <p>255 == <span id="num1"></span></p>
22 <p>10.5 == <span id="num4"></span></p>
23 <p>0xf == <span id="num2"></span></p>
24 <p>010 == <span id="num3"></span></p>
25 <p>obj == <span id="obj"></span></p> -->
26 <pre>
27 <script>
28 var n1 = 255;
29 var n2 = 0xf;
30 var n3 = 010;
31 var n4 = 10.5;
32 var rNull = null;
33 var rUndefined = undefined;
34 var rBoolean = true;
35 var numList = {
36 "num1":1,
37 "num2":2
38 };
39
40 document.writeln("null == " + String(rNull)); // null轉字串
41 document.writeln("undefined == " + String(rUndefined)); // undefined轉字串
42 document.writeln("true == " + String(rBoolean)); // Boolean轉字串
43 document.writeln("255 == " + String(n1)); // 整數轉字串
44 document.writeln("10.5 == " + String(n4)); // 浮點數轉字串
45 document.writeln("0xf == " + String(n2)); // 十六進位制整數轉字串，會先轉換成十進位制
46 document.writeln("010 == " + String(n3)); // 八進位制整數轉字串，會先轉換成十進位制
47 document.writeln("obj == " + String(numList)); // 物件轉字串
48
49
50 // document.getElementById("rNull").innerHTML = String(rNull); // null轉字串
51 // document.getElementById("rUndefined").innerHTML = String(rUndefined); // undefined轉字串
52 // document.getElementById("boolean").innerHTML = String(rBoolean); // Boolean轉字串
53 // document.getElementById("num1").innerHTML = String(n1); // 整數轉字串
54 // document.getElementById("num4").innerHTML = String(n4); // 浮點數轉字串
55 // document.getElementById("num2").innerHTML = String(n2); // 十六進位制整數轉字串，會先轉換成十進位制
56 // document.getElementById("num3").innerHTML = String(n3); // 八進位制整數轉字串，會先轉換成十進位制
57 // document.getElementById("obj").innerHTML = String(numList); // 物件轉字串
58 </script>
59 </pre>
60 </div>
61 </div>
62 </body>
63 </html>顯示效果：
6、Object型別
物件其實就是一組資料和功能的集合。
var obj = new Object(); // 可以建立一個物件Object的每個例項都具有一下屬性和方法：
① constructor ：建構函式；
② hasOwnProperty ：用以檢查給定屬性是否存在於當前物件例項中；
③ isPrototypeOf ：用以檢查傳入的物件是否是傳入物件的原型；
④ propertyIsEnumerable ：用以檢查給定的屬性是否能夠用for-in語句來列舉；
⑤ toLocaleString() ：返回物件的字串表示，該字串與執行環境的地區相對應；
⑥ toString() ：返回物件的字串表示；
⑦ valueOf() ：返回物件的字串、數值或布林值表示。通常與 toString() 方法的返回值一致。
本文內容包含學習過程中的認識和實際應用時的經驗，會不斷補充更新。最新更新時間（2018-02-01 16:43:26）。