資料型別是我們學習JavaScript時最先接觸的東西，它是JavaScript中最基礎的知識，這些知識看似簡單，但實則有著許多初學者甚至是部分學習了多年JavaScript的老手所不了解的知識，
資料型別
ECSMAScript標準中規定了7種資料型別，這7種資料型別又分為基本型和參考型別，
基本型別：
Null：只包含一個值：nullUndefined：只包含一個值：undefinedBoolean：包含true和falseNumber：整數或浮點數，還有一些特殊值（-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隱式轉換踩坑合集
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/41396.html
標籤：JavaScript
上一篇：面試： Vue陣列的變異方法