變量和數據類型 · 《JavaScript 闖關記》

# 變量和數據類型當程序需要將值保存起來以備將來使用時，便將其賦值給一個變量，值的類型稱作數據類型。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#變量)變量 JavaScript 的變量是松散類型的，所謂松散類型就是可以用來保存任何類型的數據。換句話說，每個變量僅僅是一個用于保存值的占位符而已。定義變量時要使用關鍵字?`var`?來聲明的，如下所示： ~~~ var message; ~~~ 這行代碼定義了一個名為?`message`?的變量，該變量可以用來保存任何值（像這樣未經過初始化的變量，會保存一個特殊的值`undefined`）。JavaScript 也支持直接初始化變量，因此在定義變量的同時就可以設置變量的值，如下所示： ~~~ var message = "hello"; ~~~ 此時，變量?`message`?中保存了一個字符串值?`"hello"`。像這樣初始化變量并不會把它標記為字符串類型，因此，可以在修改變量值的同時修改值的類型。如下所示： ~~~ var message = "hello"; message = 100; // 有效的語句，不好的寫法 ~~~ 在這個例子中，變量?`message`?一開始保存了一個字符串值?`"hello"`，然后該值又被一個數字值100取代。雖然我們不建議修改變量所保存值的類型，但這種操作在 JavaScript 中完全有效。有一點必須注意，即使用?`var`?運算符定義的變量是的該作用域中的局部變量。也就是說，如果在函數中使用?`var`?定義一個變量，那么這個變量在函數退出后就會被銷毀，例如： ~~~ function test(){ var message = "hello"; // 局部變量 } test(); console.log(message); // 產生錯誤 ~~~ 這里，變量?`message`?是在函數中使用?`var`?定義的，是局部變量。當函數被調用時，就會創建該變量并為其賦值。而在此之后，這個變量又會立即被銷毀，因此例子中的下一行代碼就會導致錯誤。不過，可以像下面這樣省略?`var`?運算符，從而創建一個全局變量： ~~~ function test(){ message = "hello"; // 全局變量，不好的寫法 } test(); console.log(message); // "hello" ~~~ 這個例子省略了?`var`?運算符，因而?`message`?就成了全局變量。這樣，只要調用一次?`test()`?函數，這個變量就有了定義，就可以在函數外部的任何地方被訪問到。雖然省略?`var`?運算符可以定義全局變量，但這也不是推薦的做法，因為在局部作用域中定義全局變量很難維護，給未經聲明的變量賦值在嚴格模式下會拋出?`ReferenceError`?錯誤。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#數據類型)數據類型 JavaScript 中有5種簡單數據類型（也稱為「基本數據類型」或「原始數據類型」）：`Undefined`、`Null`、`Boolean`、`Number`、`String`?。還有1種復雜數據類型?`Object`，`Object`?本質上是由一組無序的名值對組成的。JavaScript 不支持任何創建自定義類型的機制，所有值最終都將是上述6種數據類型之一。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#typeof-運算符)`typeof`?運算符鑒于 JavaScript 是松散類型的，因此需要有一種手段來檢測給定變量的數據類型，`typeof`?就是負責提供這方面信息的運算符。對一個值使用?`typeof`?運算符可能返回下列某個字符串： * `"undefined"`，如果這個值未聲明或已聲明但未初始化。 * `"boolean"`，如果這個值是布爾值。 * `"string"`，如果這個值是字符串。 * `"number"`，如果這個值是數值。 * `"object"`，如果這個值是對象或?`null`。 * `"function"`，如果這個值是函數。下面是幾個使用?`typeof`?運算符的例子： ~~~ var message = "some string"; console.log(typeof message); // "string" console.log(typeof(message)); // "string" console.log(typeof 95); // "number" ~~~ 從以上例子可以看出，`typeof`?運算符既可以對變量使用，又可以對字面量使用。由于?`typeof`?是一個運算符而不是函數，因此例子中的圓括號盡管可以使用，但并不提倡。 `typeof null`?結果是?`"object"`?是歷史遺留 Bug，在 ECMAScript 6中，曾經有提案為歷史平反, 將?`type null`?的值糾正為`"null"`，但最后該提案被拒。理由是歷史遺留代碼太多，不如繼續將錯就錯。從技術角度講，函數在 JavaScript 中是對象，不是一種數據類型。然而，函數也確實有一些特殊的屬性，因此通過?`typeof`?運算符來區分函數和其他對象是有必要的。 > 擴展閱讀「為什么 JavaScript 里面?`typeof null`?的值是?`"object"`？」 > [https://www.zhihu.com/question/21691758](https://www.zhihu.com/question/21691758) > > 擴展閱讀「MDN 之?`typeof`」 > [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof) > > 擴展閱讀「JavaScript 檢測原始值、引用值、屬性」 > [http://shijiajie.com/2016/06/20/javascript-maintainable-javascript-validate1/](http://shijiajie.com/2016/06/20/javascript-maintainable-javascript-validate1/) > > 擴展閱讀「JavaScript 檢測之 basevalidate.js」 > [http://shijiajie.com/2016/06/25/javascript-maintainable-javascript-basevalidatejs/](http://shijiajie.com/2016/06/25/javascript-maintainable-javascript-basevalidatejs/) ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#undefined-類型)`Undefined`?類型 `Undefined`?類型只有1個值，即?`undefined`。使用?`var`?聲明變量但未對其加以初始化時，這個變量的值就是?`undefined`，直接使用未聲明的變量會產生錯誤。對未聲明或已聲明但未初始化的變量執行?`typeof`?運算符會返回?`"undefined"`?值，例如： ~~~ var message; // 這個變量聲明之后默認取得了 undefined 值 // var age // 這個變量并沒有聲明 console.log(message); // "undefined" console.log(age); // 產生錯誤 console.log(typeof message); // "undefined" console.log(typeof age); // "undefined" ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#null-類型)`Null`?類型 `Null`?類型也只有1個值，即?`null`。它用來表示值的空缺。你可以認為?`undefined`?是表示系統級的、出乎意料的或類似錯誤的值的空缺，而?`null`?是表示程序級的、正常的或在意料之中的值的空缺。在下列場景中應當使用?`null`。 * 用來初始化一個變量，這個變量可能賦值為一個對象。 * 用來和一個已經初始化的變量比較，這個變量可以是也可以不是一個對象。 * 當函數的參數期望是對象時，作用參數傳入。 * 當函數的返回值期望是對象時，作用返回值傳出。在下列場景中不應當使用?`null`。 * 不要使用?`null`?來檢測是否傳入了某個參數。 * 不要使用?`null`?來檢測一個未初始化的變量。 ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#boolean-類型)`Boolean`?類型 `Boolean`?類型是 JavaScript 中使用得最多的一種類型，該類型只有兩個字面值：`true`?和?`false`。需要注意的是，他們是區分大小寫的，也就是說?`True`?和?`False`（以及其他的混合大小寫形式）都不是?`Boolean`?值，只是標識符。雖然?`Boolean`?類型的字面值只有兩個，但 JavaScript 中所有類型的值都能使用?`if`?語句或?`Boolean()`?函數轉換為對應的`Boolean`?值，例如： ~~~ var message = "Hello world!"; if (message){ console.log("Value is true."); // 被執行 } var messageAsBoolean = Boolean(message); console.log(messageAsBoolean); // true ~~~ 下表給出了各種數據類型及其對應的轉換規則。 | 數據類型 | 轉換為true的值 | 轉換為false的值 | | --- | --- | --- | | Undefined | - | undefined | | Null | - | null | | Boolean | true | false | | String | 任何非空字符串 | ""（空字符串） | | Number | 任何非零數字值（包括無窮大） | 0和NaN | | Object | 任何對象 | - | ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#number-類型)`Number`?類型 `Number`?類型是 JavaScript 中最令人關注的數據類型，這種類型使用 IEEE 754 格式來表示整數和浮點數值（浮點數值在某些語言中也被稱為雙精度數值）。和其他編程語言不同，JavaScript 中的所有數字均用浮點數值表示。 > 擴展閱讀「IEEE 754-1985」 > [https://en.wikipedia.org/wiki/IEEE_754-1985](https://en.wikipedia.org/wiki/IEEE_754-1985) #### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#整數)整數在 JavaScript 中進行算術計算時，所有以八進制和十六進制表示的數值最終都將被轉換成十進制數值。例如： ~~~ var a = 10; // 十進制 var b = 023; // 八進制 var c = 0x12ac; // 十六進制 console.log(b); // 19 console.log(c); // 4780 ~~~ 八進制第一位必須是0，后面跟八進制序列0到7，如果超出了范圍，則忽略前導0，后面的數值當做十進制解析，例如：089會被解析為89。（八進制字面量在嚴格模式下是無效的，會拋出錯誤。）十六進制前兩位必須是 0x 或 0X，后跟十六進制序列0~9、a~f（不區分大小寫），如果超出了范圍，則會報語法錯誤。 #### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#浮點數)浮點數所謂浮點數值，就是該數值中必須包含一個小數點，并且小數點后面必須至少有一位數字。雖然小數點前面可以沒有整數，但我們不推薦這種寫法。例如： ~~~ var a = 1.1; var b = 0.1; var c = .1; // 有效，但不推薦 ~~~ JavaScript 會不失時機的將浮點數轉換成整數。例如： ~~~ var a = 5.; // 解析成整數5 var b = 5.0; // 解析成整數5 ~~~ 對于極大或者極小的數值，可采用科學技術法（也稱e表示法）。JavaScript 會將那些小數點后面帶有6個零以上的小于1的浮點數值轉換為以e表示法表示的數值。例如： ~~~ var a = 3.14e7; // 等于31400000 var b = 3.14E-7; // 等于0.000000314 console.log(0.0000003); // 3e-7 ~~~ 浮點數值的最高精度是17位小數，但在進行算術計算時其精確度遠遠不如整數，例如： ~~~ console.log(0.1 + 0.2); // 0.30000000000000004 ~~~ 這個舍入誤差會導致無法測試特定的浮點數值，因此，永遠不要測試某個特定的浮點數值。 #### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#正無窮負無窮)正無窮、負無窮由于內存限制，JavaScript 能表示的數值范圍從?`Number.MIN_VALUE`?到?`Number.MAX_VALUE`，并將超出范圍的數轉換成`Number.POSITIVE_INFINITY`?或?`Number.NEGATIVE_INFINITY`。0作為除數是不會報錯的，正數除以0返回正無窮，負數除以0返回負無窮，0除以0返回`NaN`。例如： ~~~ console.log(Number.MAX_VALUE); // 最大數 1.7976931348623157e+308 console.log(Number.MIN_VALUE); // 最小數 5e-324 console.log(Number.POSITIVE_INFINITY); // 正無窮 Infinity console.log(Number.NEGATIVE_INFINITY); // 負無窮 -Infinity console.log( 1 / 0); // Infinity console.log(-1 / 0); // -Infinity ~~~ JavaScript 提供了?`isFinite()`?函數，來確定一個數是不是有窮的。例如： ~~~ console.log(isFinite(100)); // true console.log(isFinite(Infinity)); // false ~~~ #### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#nan)NaN `NaN`（not a number），是一個特殊的數值。之所以稱它為「非數值」，是因為它不能參與算數運算，任何涉及?`NaN`?的操作都返回?`NaN`。并且?`NaN`?與任何值都不相等（包括自身）。例如： ~~~ console.log(typeof NaN); // "number" console.log(0 / 0); // NaN console.log(NaN - NaN); // NaN console.log(Infinity - Infinity); // NaN var a = NaN; console.log(a === a); // false ~~~ JavaScript 提供了?`isNaN()`?函數，來確定一個數是不是?`NaN`。例如： ~~~ console.log(isNaN(100)); // false console.log(isNaN("100")); // false console.log(isNaN(true)); // false console.log(isNaN("sss")); // true console.log(isNaN(NaN)); // true ~~~ #### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#numberparseintparsefloat-轉型函數)`Number()`、`parseInt()`、`parseFloat()`?轉型函數 `isNaN()`?函數在接收到一個值之后，會嘗試使用轉型函數?`Number()`?將這個值轉換為數值，轉換規則如下： * `undefined`?轉換為?`NaN`； * `null`?轉換為 0； * `true`?轉換為?`1`、`false`?轉換為?`0`； * `number`?整數轉換為十進制，小數不變； * `string`?如果只包含十進制數和小數，則返回對應的數值，如果只包含八進制數，則忽略前導0返回剩余部分，如果只包含十六進制，則返回十進制數，空字符串轉換為0，其它字符串轉換為?`NaN`； * `object`?先則調用對象的?`valueOf()`?方法，然后依照前面的規則轉換返回的值。如果轉換的結果是?`NaN`，則調用對象的`toString()`?方法，然后再次依照前面的規則轉換返回的字符串值。由于?`Number()`?轉型函數在轉換字符串時不夠理想，因此還有兩個專門用來轉換字符串的函數?`parseInt()`?和?`parseFloat()`函數。 `parseInt()`?函數會忽略字符串前面的空格，直至找到第一個非空格字符，只要第一個非空格字符不是數字或者正負號，一律返回?`NaN`，如果第一個非空格字符是數字字符，`parseInt()`?會繼續解析第二個字符，直到解析完所有后續字符或者遇到了一個非數字字符。例如： ~~~ console.log(parseInt("")); // NaN（Number("")返回 0） console.log(parseInt("123S")); // 123 console.log(parseInt("12.4")); // 12 ~~~ `parseFloat()`?函數也會忽略字符串前面的空格，直至找到第一個非空格字符，只要第一個非空格字符不是數字或者正負號或者小數點，一律返回?`NaN`，如果第一個非空格字符是上述字符之一，`parseFloat()`?會繼續解析第二個字符，直到解析完所有后續字符或者遇到了一個非浮點數值。例如： ~~~ console.log(parseFloat("098.2")); // 98.2 console.log(parseFloat("123.23.23")); // 123.23 ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#string-類型)`String`?類型 `String`?類型用于表示由零或多個16位 Unicode 字符組成的字符序列，即字符串。字符串可以由雙引號（"）或單引號（'）表示，因此下面兩種字符串的寫法都是有效的： ~~~ var firstName = "Nicholas"; var lastName = 'Zakas'; ~~~ JavaScript 中的這兩種語法形式沒有什么區別。用雙引號表示的字符串和用單引號表示的字符串完全相同。不過，以雙引號開頭的字符串也必須以雙引號結尾，而以單引號開頭的字符串必須以單引號結尾。 `String`?數據類型包含一些特殊的字符字面量，也叫轉義序列，用于表示非打印字符，或者具有其他用途的字符。例如：`\n`換行、`\t`?制表、`\b`?空格、`\r`?回車、`\f`?進紙、`\\`?斜杠、`\'`?單引號，在用單引號表示的字符串中使用、`\"`?雙引號，在用雙引號表示的字符串中使用。轉義字符可出現在字符串中的任意位置，且長度為1。如要在字符串中顯示?`\`?，則必須使用?`\`?進行轉義。例如： ~~~ console.log("\n\\".length); // 2 console.log("\\hello"); // "\hello"（長度為6） ~~~ 大部分值都可以使用繼承而來的?`toString()`方法轉換為字符串，但?`undefined`?和?`null`?值沒有這個方法。對數值使用`toString()`?方法時，可以傳入一個數字基數，以此輸出對應進制的字符串值。例如： ~~~ console.log(true.toString()); // "true" var num = 10; console.log(num.toString()); // "10" console.log(num.toString(2)); // "1010" console.log(num.toString(8)); // "12" console.log(num.toString(16)); // "a" ~~~ 在不知道要轉換的值是不是?`undefined`?或?`null`?的情況下，還可以使用轉型函數?`String()`，這個函數能夠將任何類型的值轉換為字符串。`String()`?函數遵循下列轉換規則： * 如果值有?`toString()`?方法，則調用該方法（沒有參數）并返回相應的結果； * 如果值是?`undefined`，則返回?`"undefined"`； * 如果值是?`null`，則返回?`"null"`。 ~~~ var value; console.log(String(10)); // "10" console.log(String(true)); // "true" console.log(String(null)); // "null" console.log(String(value)); // "undefined" ~~~ ### [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#object-類型)`Object`?類型 JavaScript 中所有對象都繼承自?`Object`?類型，每個對象都具有下列基本的屬性和方法： * `constructor`：保存著用于創建當前對象的函數（構造函數）。 * `hasOwnProperty()`：用于檢查給定的屬性在當前對象實例中是否存在。 * `propertyIsEnumerable()`：用于檢查給定的屬性是否能夠使用for-in語句來枚舉。 * `isPrototypeOf()`：用于檢查對象是否是傳入對象的原型。 * `toString()`?方法：返回對象的字符串表示。 * `toLocaleString()`：返回對象的本地字符串表示。 * `valueOf()`：返回對象的字符串、數值或布爾值表示（通常與toString()方法的返回值相同）。 `Object`?本質上是由一組無序的名值對組成，「名稱」部分是一個 JavaScript 字符串，「值」部分可以是任何 JavaScript 的數據類型（包括對象和方法）。這使用戶可以根據具體需求，創建出相當復雜的數據結構。以下兩種方法都可以創建一個空對象，這兩種方法在語義上是相同的。第二種更方便的方法叫作「對象字面量」法。這也是 JSON 格式的核心語法，一般我們優先選擇第二種方法。例如： ~~~ var obj = new Object(); var obj = {}; // 好的寫法 ~~~ 「對象字面量」也可以用來在對象實例中定義一個對象： ~~~ var obj = { name: "Carrot", "for": "Max", details: { color: "orange", size: 12 } } ~~~ 對象的屬性可以通過鏈式（chain）表示方法進行訪問： ~~~ obj.details.color; // orange obj["details"]["size"]; // 12 ~~~ 完成創建后，對象屬性可以通過如下兩種方式進行賦值和訪問： ~~~ obj.name = "Simon" // 賦值 var name = obj.name; // 訪問 obj["name"] = "Simon"; // 賦值 var name = obj["name"]; // 訪問 ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.4-Variable&Types#關卡)關卡 ~~~ // 挑戰一 console.log(typeof "undefined"); // ??? console.log(typeof null); // ??? ~~~ ~~~ // 挑戰二 var message = "some string"; console.log(typeof massage); // ??? message = 10000; console.log(typeof message); // ??? ~~~ ~~~ // 挑戰三 var a; var b = null; var c = {}; if(a && b && c){ console.log("true."); // ??? }else{ console.log("false."); // ??? } ~~~ ~~~ // 挑戰四 console.log(typeof (0 / 0)); // ??? console.log(023 + 123); // ??? ~~~ ~~~ // 挑戰五 console.log(Number("1234S")); // ??? console.log(parseInt("1234S")); // ??? ~~~ ~~~ // 挑戰六 console.log(3.14E-7 === 0.000000314); // ??? console.log(0.1 + 0.6 === 0.7); // ??? console.log(0.1 + 0.7 === 0.8); // ??? console.log(NaN === NaN); // ??? ~~~ ~~~ // 挑戰七 console.log("\right\now"); // ??? console.log("\right\now".length); // ??? console.log(010.toString(2)); // ??? ~~~ ~~~ // 挑戰八 // 1、為 person、wife、child 對象新增 weight 屬性，數值分別為 62、36、15。 // 2、為 person 對象新增二胎 child2 子對象，name 為 emma，其他屬性自行發揮。 var person = { name: "stone", age: 30, wife: { name: "sohpie", age: 30 }, child:{ name: "tommy", age: 3 } } ~~~ > 挑戰九，深度閱讀下面兩篇文章，提出你的疑問。 > > 「JavaScript 檢測原始值、引用值、屬性」?[http://shijiajie.com/2016/06/20/javascript-maintainable-javascript-validate1/](http://shijiajie.com/2016/06/20/javascript-maintainable-javascript-validate1/) > > 「JavaScript 檢測之 basevalidate.js」?[http://shijiajie.com/2016/06/25/javascript-maintainable-javascript-basevalidatejs/](http://shijiajie.com/2016/06/25/javascript-maintainable-javascript-basevalidatejs/)