深入學習JavaScript資料型別

資料型別是我們學習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物件：包含物件、陣列、函式等。

基本型別和引用型別的區別

存放位置不同

記憶體空間被分為兩種：棧記憶體和堆記憶體。

棧記憶體：

• 儲存的值大小固定
• 空間較小
• 可以直接操作，效率高

堆記憶體：

• 儲存的值大小不確定，可以動態調整
• 空間較大，執行效率低
• 無法直接操作其內部，使用引用地址讀取

基本型別就屬於較為簡單的資料，且會被頻繁使用，因此通常存放在棧中。

var a = 10;
var b = 'hello';
var c = true;

引用型別則是同時儲存在棧和堆當中：引用型別的實際值儲存在堆當中，同時它會在棧中儲存一個指向堆記憶體中的值的地址。

var a = 10;
var obj1 = { name: 'nihao' };
var obj2 = function () {
    // do something
}

基本型別具有不可變性

var name = 'hello';
name.toUpperCase(); // "HELLO"
console.log(name); // "hello"

由以上程式碼我們會發現，如果不使用name變數本身去接收toUpperCase()的返回值，那麼name的值不會被改變。

由於棧中的記憶體空間大小固定，所以儲存在棧中的變數就是不可變的，但在使用JavaScript時我們會發現可以改變基本型別的值，例如：

var c = true;
c = false;
console.log(c); // false

這實際上是相當於在棧中開闢了一片新的空間用來儲存false這個值，然後用變數c指向這個值，並非改變原本的true。

引用型別就可以很輕易的改變了，它不需要使用變數本身(obj1)去再次接收新的值就可以改變，例如：

var obj1 = { name: 'nihao' };
obj1.name = 'nibuhao';
console.log(obj1); // { name: 'nibuhao' }

值比較和引用比較

對於基本型別，比較時會直接比較它們的值，相等返回true

var str1 = 'Hello';
var str2 = 'Hello';
console.log(str1 === str2); // true

對於引用型別，比較時會比較它們的引用地址，哪怕兩個變數具有同名屬性，且同名屬性的值相同，但是因為儲存位置不同，兩者仍然不相等

var obj1 = { name: 'obj' };
var obj2 = { name: 'obj' };
console.log(obj1 === obj2); // false

賦值

與上面的兩種比較類似，基本型別賦值時是直接將值給另一個變數，而引用型別則是將地址給另一個變數

var str1 = 'Hello';
var str2 = str1;
str2 = 'World';
console.log(str1); // "Hello"
//str1的值沒變

var obj1 = { name: 'obj1' };
var obj2 = obj1;
obj2.name = 'obj2';
console.log(obj1.name); // "obj2"
// obj1的值改變

null與undefined

• null表示空值
• undefined表示“缺少值”，即此處應該有值，但是還未定義

var a = null;
console.log(typeof a); // object
console.log(typeof b); // undefined

如果學過C#、Java之類的靜態型別語言就會知道，直接使用未宣告的變數會直接報錯，而JavaScript是動態型別語言，成員除了存在空值外，還有可能根本就不存在（因為只有在執行時才會知道是否存在）。

Symbol型別

symbol變數需要使用Symbol()建立

var s = Symbol(); // 注意沒有new

Symbol()函式接受一個可選引數，用來描述即將建立的symbol變數，無論傳入的描述是否相同，最後生成的symbol一定是獨一無二的

var name1 = Symbol('Tom');
var name2 = Symbol('Tom');
console.log(name1 === name2); // false

如果一定要建立兩個一模一樣的symbol，需要使用Symbol.for()

var name1 = Symbol.for('Tom');
var name2 = Symbol.for('Tom');
console.log(name1 === name2); // true

Symbol型別可以用作物件屬性，使用該型別可以保證物件不會出現同名屬性

var obj = {
    [Symbol('name')]: 'Tom'
};

使用Symbol型別作為物件的屬性名時，是無法是用for ... in、Object.getOwnPropertyNames和Object.keys()獲取到該屬性的，可以呼叫用來專門獲取Symbol的方法Object.getOwnPropertySymbols()來獲取

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，包括他自己

NaN == NaN // false

Boolean型別與其他型別進行比較

只要Boolean型別參與比較，該Boolean型別的值都會被轉換為Number型別，1轉為true，0轉為false

false == 0 // true
true == 1 // true
true == 2 // false

如果在使用if判斷時，我們使用數字作為判斷條件

var x = 10;
if (x) {
	// ...
}
if (x == true) {
    // ...
}

我們會發現，第一個判斷結果為true，而第二個的結果為false，這就是因為true被轉換為了1，判斷條件變為了x == 1

Number型別和String型別進行比較

這兩者進行比較時，String型別會被轉為Number型別，除了純數字字串正常轉換為Number型別外，空字串''轉為0，科學計數法（例如1e11）正常轉換，Infinity正常轉換，其他全部轉換為NaN

'' == 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標準

Number([]); // 0
Number([10]); // 10

var obj = {
    valueOf: () => { return 10; },
    toString: () => { return -10; }
};
Number(obj); // 10
String(obj); // -10

基本型別與引用型別比較

比較時，引用型別會依據ToPrimitive規則轉換為基本型別

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只能用來判斷以下幾個型別

typeof 'str';  // string
typeof 123;  // number
typeof true;  // boolean
typeof Symbol();  // symbol
typeof undefined;  // undefined
typeof function () {} // function

對於引用型別（陣列、物件等）以及null，typeof的返回值均為object

instanceof

instanceof可以判斷引用型別的具體型別

[] instanceof Array; // true
/1/ instanceof RegExp; // true
new Date() instanceof Date; // true

但是，instanceof同樣沒法判斷null

null instanceof null; // Uncaught TypeError: Right-hand side of 'instanceof' is not an object
null instanceof Object; // false

在MDN中，instanceof被這樣描述：

instanceof 運算子用於檢測建構函式的 prototype 屬性是否出現在某個例項物件的原型鏈上。

也就是說instanceof設計的初衷並不是用來檢測資料型別的，因此很多型別它也無法判斷

Object.prototype.toString.call()

Object.prototype.toString.call()利用call來改變this的指向，可以讓該方法能夠獲取到任意變數的[[class]]屬性，通過該屬性可以判斷所有JavaScript的內建型別

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可以實現對自定義型別的判斷

function Person() {}
Object.prototype.toString.call(new Person()); // [object Object]
new Person() instanceof Person; // true

參考資料

• 【JS 進階】你真的掌握變數和型別了嗎

• JavaScript的資料型別及其檢測

• undefined與null的區別

• 從一道面試題說起—js隱式轉換踩坑合集