資料型別是我們學習`JavaScript`時最先接觸的東西，它是`JavaScript`中最基礎的知識，這些知識看似簡單，但實則有著許多初學者甚至是部分學習了多年`JavaScript`的老手所不瞭解的知識。 ## 資料型別 ECSMAScript標準中規定了7種資料型別，這7種資料型別又分為基本型和引用型別。 **基本型別**： - `Null`：只包含一個值：`null` - `Undefined`：只包含一個值：`undefined` - `Boolean`：包含`true`和`false` - `Number`：整數或浮點數，還有一些特殊值（`-Infinity`、`+Infinity`、`NaN`） - `String`：字串 - `Symbol`：表示獨一無二的值（ES6加入） ES10(ES2019)中新增了一種基本型別`BigInt`，可以用來表示超出`number`安全範圍的任意精度整數。 **引用型別**： - `Object`物件：包含物件、陣列、函式等。 ## 基本型別和引用型別的區別 ### 存放位置不同 記憶體空間被分為兩種：棧記憶體和堆記憶體。 **棧記憶體**： - 儲存的值大小固定 - 空間較小 - 可以直接操作，效率高 **堆記憶體**： - 儲存的值大小不確定，可以動態調整 - 空間較大，執行效率低 - 無法直接操作其內部，使用引用地址讀取 基本型別就屬於較為簡單的資料，且會被頻繁使用，因此通常存放在棧中。 ```js var a = 10; var b = 'hello'; var c = true; ```  引用型別則是**同時**儲存在棧和堆當中：引用型別的實際值儲存在堆當中，同時它會在棧中儲存一個指向堆記憶體中的值的地址。 ```js var a = 10; var obj1 = { name: 'nihao' }; var obj2 = function () { // do something } ```  ### 基本型別具有不可變性 ```js var name = 'hello'; name.toUpperCase(); // "HELLO" console.log(name); // "hello" ``` 由以上程式碼我們會發現，如果不使用`name`變數本身去接收`toUpperCase()`的返回值，那麼`name`的值不會被改變。 由於棧中的記憶體空間大小固定，所以儲存在棧中的變數就是不可變的，但在使用`JavaScript`時我們會發現可以改變基本型別的值，例如： ```js var c = true; c = false; console.log(c); // false ``` 這實際上是相當於在棧中開闢了一片新的空間用來儲存`false`這個值，然後用變數`c`指向這個值，並非改變原本的`true`。  引用型別就可以很輕易的改變了，它不需要使用變數本身(`obj1`)去再次接收新的值就可以改變，例如： ```js var obj1 = { name: 'nihao' }; obj1.name = 'nibuhao'; console.log(obj1); // { name: 'nibuhao' } ``` ### 值比較和引用比較 對於基本型別，比較時會直接比較它們的值，相等返回`true` ```js var str1 = 'Hello'; var str2 = 'Hello'; console.log(str1 === str2); // true ``` 對於引用型別，比較時會比較它們的引用地址，哪怕兩個變數具有同名屬性，且同名屬性的值相同，但是因為儲存位置不同，兩者仍然不相等 ```js var obj1 = { name: 'obj' }; var obj2 = { name: 'obj' }; console.log(obj1 === obj2); // false ```  ### 賦值 與上面的兩種比較類似，基本型別賦值時是直接將值給另一個變數，而引用型別則是將地址給另一個變數 ```js var str1 = 'Hello'; var str2 = str1; str2 = 'World'; console.log(str1); // "Hello" //str1的值沒變 ``` ```js var obj1 = { name: 'obj1' }; var obj2 = obj1; obj2.name = 'obj2'; console.log(obj1.name); // "obj2" // obj1的值改變 ``` ## null與undefined - `null`表示空值 - `undefined`表示“缺少值”，即此處應該有值，但是還未定義 ```js var a = null; console.log(typeof a); // object console.log(typeof b); // undefined ``` 如果學過`C#`、`Java`之類的靜態型別語言就會知道，直接使用未宣告的變數會直接報錯，而`JavaScript`是動態型別語言，成員除了存在空值外，還有可能根本就不存在（因為只有在執行時才會知道是否存在）。 ## Symbol型別 `symbol`變數需要使用`Symbol()`建立 ```js var s = Symbol(); // 注意沒有new ``` `Symbol()`函式接受一個可選引數，用來描述即將建立的`symbol`變數，無論傳入的描述是否相同，最後生成的`symbol`一定是獨一無二的 ```js var name1 = Symbol('Tom'); var name2 = Symbol('Tom'); console.log(name1 === name2); // false ``` 如果一定要建立兩個一模一樣的`symbol`，需要使用`Symbol.for()` ```js var name1 = Symbol.for('Tom'); var name2 = Symbol.for('Tom'); console.log(name1 === name2); // true ``` `Symbol`型別可以用作物件屬性，使用該型別可以保證物件不會出現同名屬性 ```js var obj = { [Symbol('name')]: 'Tom' }; ``` 使用`Symbol`型別作為物件的屬性名時，是無法是用`for ... in`、`Object.getOwnPropertyNames`和`Object.keys()`獲取到該屬性的，可以呼叫用來專門獲取`Symbol`的方法`Object.getOwnPropertySymbols()`來獲取 ```js var obj = { [Symbol('name')]: 'Tom' }; for (var key in obj) { console.log(key); // undefined } Object.getOwnPropertySymbols(obj); // [Symbol(name)] ``` ## 資料型別轉換  圖片來源：https://juejin.im/post/5cec1bcff265da1b8f1aa08f#heading-23 ### 寬鬆等號（==）的隱式轉換 使用`==`時，如果等號兩側的資料型別相同，那麼比較結果與`===`相同，否則會發生隱式轉換 #### NaN `NaN`和任何型別比較都會返回`false`，包括他自己 ```js NaN == NaN // false ``` #### Boolean型別與其他型別進行比較 只要`Boolean`型別參與比較，該`Boolean`型別的值都會被轉換為`Number`型別，`1`轉為`true`，`0`轉為`false` ```js false == 0 // true true == 1 // true true == 2 // false ``` 如果在使用`if`判斷時，我們使用數字作為判斷條件 ```js var x = 10; if (x) { // ... } if (x == true) { // ... } ``` 我們會發現，第一個判斷結果為`true`，而第二個的結果為`false`，這就是因為`true`被轉換為了`1`，判斷條件變為了`x == 1` #### Number型別和String型別進行比較 這兩者進行比較時，`String`型別會被轉為`Number`型別，除了純數字字串正常轉換為`Number`型別外，空字串`''`轉為`0`，科學計數法（例如`1e11`）正常轉換，`Infinity`正常轉換，其他全部轉換為`NaN` ```js '' == 0 // true '123' == 123 // true '1e11' == 1e11 // true Infinity == 'Infinity' // true true == '1' // true false == '0' // true ``` #### null與undefined 除`null == undefined`結果為`true`外，其他任何型別和`null`或`undefined`比較都為`false` #### 基本型別與引用型別比較 **ToPrimitive規則** 首先我們要先了解`ToPrimitive`規則，即引用型別轉為基本型別 - 當引用型別需要被轉為基本型別時，它會先查詢物件的`valueOf`方法，如果該方法返回基本型別的值，則`ToPrimitive`的結果就是這個值 - 如果`valueOf`不存在或者`valueOf`方法返回的不是基本型別，就會嘗試呼叫物件的`toString`方法，然後使用`toString`的返回值作為`ToPrimitive`的結果 - 若`valueOf`和`toString`都不存在，或者沒有返回基本型別，則丟擲`TypeError`異常 > 對於不同的引用型別，該過程會有些許不同，比如`Date`會先呼叫`toString` > > 引用型別轉換為不同的基本型別也會有一些不同，比如： > > - 引用型別轉換為`Number`型別，先呼叫`valueOf`，再呼叫`toString` > - 引用型別轉換為`String`型別，先呼叫`toString`，再呼叫`valueOf` > > 具體請參考[ECMA標準](https://www.ecma-international.org/ecma-262/6.0/#sec-toprimitive) ```js Number([]); // 0 Number([10]); // 10 var obj = { valueOf: () => { return 10; }, toString: () => { return -10; } }; Number(obj); // 10 String(obj); // -10 ``` **基本型別與引用型別比較** 比較時，引用型別會依據`ToPrimitive`規則轉換為基本型別 ```js var a = {}; var b = [1, 2, 3]; a == '[object Object]'; // true a.toString(); // [object Object] b == '1,2,3' // true b.toString(); // "1,2,3" ``` ## 判斷資料型別 ### typeof `typeof`只能用來判斷以下幾個型別 ```js typeof 'str'; // string typeof 123; // number typeof true; // boolean typeof Symbol(); // symbol typeof undefined; // undefined typeof function () {} // function ``` 對於引用型別（陣列、物件等）以及`null`，`typeof`的返回值均為`object` ### instanceof `instanceof`可以判斷引用型別的具體型別 ```js [] instanceof Array; // true /1/ instanceof RegExp; // true new Date() instanceof Date; // true ``` 但是，`instanceof`同樣沒法判斷`null` ```js null instanceof null; // Uncaught TypeError: Right-hand side of 'instanceof' is not an object null instanceof Object; // false ``` 在[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof)中，`instanceof`被這樣描述： > **`instanceof`** **運算子**用於檢測建構函式的 `prototype` 屬性是否出現在某個例項物件的原型鏈上。 也就是說`instanceof`設計的初衷並不是用來檢測資料型別的，因此很多型別它也無法判斷 ### Object.prototype.toString.call() `Object.prototype.toString.call()`利用`call`來改變`this`的指向，可以讓該方法能夠獲取到任意變數的`[[class]]`屬性，通過該屬性可以判斷所有`JavaScript`的內建型別 ```js Object.prototype.toString.call(null); // [object Null] Object.prototype.toString.call(undefined); // [object Undefined] Object.prototype.toString.call(123); // [object Number] Object.prototype.toString.call(new Date()); // [object Date] // ... ``` 但是該方法並不能判斷自定義型別，而`instanceof`可以實現對自定義型別的判斷 ```js function Person() {} Object.prototype.toString.call(new Person()); // [object Object] new Person() instanceof Person; // true ``` ## 參考資料 - [【JS 進階】你真的掌握變數和型別了嗎](https://juejin.im/post/5cec1bcff265da1b8f1aa08f#heading-34) - [JavaScript的資料型別及其檢測](https://juejin.im/post/5bbda2b36fb9a05cfd27f55e) - [undefined與null的區別](https://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html) - [從一道面試題說起—js隱式轉換踩坑合集](https://juejin.im/post/5bc5c752f265da0a9