JavaScript的數據類型及其檢測

1、JavaScript有幾種類型的值？

Javascript有兩種數據類型，分別是基本數據類型和引用數據類型。其中基本數據類型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增，表示獨一無二的值)，而引用數據類型統稱爲Object對象，主要包括對象、數組和函數。接下來咱們分別看下二者的特色。

2、基本數據類型

1.值是不可變的

var name = 'java';
name.toUpperCase(); // 輸出 'JAVA'
console.log(name); // 輸出  'java'
複製代碼

由此可得，基本數據類型的值是不可改變的

2.存放在棧區

原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲。

3.值的比較

var a = 1;
var b = true;
console.log(a == b);    // true
console.log(a === b);   // false
複製代碼

== : 只進行值的比較,會進行數據類型的轉換。 === : 不只進行值得比較，還要進行數據類型的比較。

3、引用數據類型

1.值是可變的

var a={age:20}；
a.age=21；
console.log(a.age)//21
複製代碼

上面代碼說明引用類型能夠擁有屬性和方法，而且是能夠動態改變的。

2.同時保存在棧內存和堆內存

引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體。

3.比較是引用的比較

當從一個變量向另外一個變量賦引用類型的值時，一樣也會將存儲在變量中的對象的值複製一份放到爲新變量分配的空間中。

var a={age:20};
var b=a;
b.age=21;
console.log(a.age==b.age)//true
複製代碼

上面咱們講到基本類型和引用類型存儲於內存的位置不一樣，引用類型存儲在堆中的對象，與此同時，在棧中存儲了指針，而這個指針指向正是堆中實體的起始位置。變量a初始化時，a指針指向對象{age:20}的地址，a賦值給b後,b又指向該對象{age:20}的地址，這兩個變量指向了同一個對象。所以，改變其中任何一個變量，都會相互影響。

此時，若是取消某一個變量對於原對象的引用，不會影響到另外一個變量。

var a={age:20};
var b=a;
a = 1;
b // {age:20}
複製代碼

上面代碼中，a和b指向同一個對象，而後a的值變爲1，這時不會對b產生影響，b仍是指向原來的那個對象。

4、檢驗數據類型

1.typeof

typeof返回一個表示數據類型的字符串，返回結果包括：number、boolean、string、symbol、object、undefined、function等7種數據類型，但不能判斷null、array等

typeof Symbol(); // symbol 有效
typeof ''; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 無效
typeof [] ; //object 無效
typeof new Date(); //object 無效
typeof new RegExp(); //object 無效
複製代碼

數組和對象返回的都是object，這時就須要使用instanceof來判斷

2.instanceof

instanceof 是用來判斷A是否爲B的實例，表達式爲：A instanceof B，若是A是B的實例，則返回true,不然返回false。instanceof 運算符用來測試一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

[] instanceof Array; //true
{} instanceof Object;//true
new Date() instanceof Date;//true
new RegExp() instanceof RegExp//true
複製代碼

關於數組的類型判斷，還能夠用ES6新增Array.isArray()

Array.isArray([]);   // true
複製代碼

instanceof 三大弊端：

• 對於基本數據類型來講，字面量方式建立出來的結果和實例方式建立的是有必定的區別的

console.log(1 instanceof Number)//false
console.log(new Number(1) instanceof Number)//true
複製代碼

從嚴格意義上來說，只有實例建立出來的結果纔是標準的對象數據類型值，也是標準的Number這個類的一個實例；對於字面量方式建立出來的結果是基本的數據類型值，不是嚴謹的實例，可是因爲JS的鬆散特色，致使了可使用Number.prototype上提供的方法。

• 只要在當前實例的原型鏈上，咱們用其檢測出來的結果都是true。在類的原型繼承中，咱們最後檢測出來的結果未必準確。

var arr = [1, 2, 3];
console.log(arr instanceof Array) // true
console.log(arr instanceof Object);  // true
function fn(){}
console.log(fn instanceof Function)// true
console.log(fn instanceof Object)// true
複製代碼

• 不能檢測null 和 undefined

對於特殊的數據類型null和undefined，他們的所屬類是Null和Undefined，可是瀏覽器把這兩個類保護起來了，不容許咱們在外面訪問使用。

3.嚴格運算符===

只能用於判斷null和undefined，由於這兩種類型的值都是惟一的。

var a = null
typeof a // "object"
a === null // true
複製代碼

undefined 還能夠用typeof來判斷

var b = undefined;
typeof b === "undefined" // true
b === undefined // true
複製代碼

4.constructor

constructor做用和instanceof很是類似。但constructor檢測 Object與instanceof不同，還能夠處理基本數據類型的檢測。

var aa=[1,2];
console.log(aa.constructor===Array);//true
console.log(aa.constructor===RegExp);//false
console.log((1).constructor===Number);//true
var reg=/^$/;
console.log(reg.constructor===RegExp);//true
console.log(reg.constructor===Object);//false 
複製代碼

constructor 兩大弊端：

• null 和 undefined 是無效的對象，所以是不會有 constructor 存在的，這兩種類型的數據須要經過其餘方式來判斷。

• 函數的 constructor 是不穩定的，這個主要體如今把類的原型進行重寫，在重寫的過程當中頗有可能出現把以前的constructor給覆蓋了，這樣檢測出來的結果就是不許確的

function Fn(){}
Fn.prototype = new Array()
var f = new Fn
console.log(f.constructor)//Array
複製代碼

5.Object.prototype.toString.call()

Object.prototype.toString.call() 最準確最經常使用的方式。首先獲取Object原型上的toString方法，讓方法執行，讓toString方法中的this指向第一個參數的值。

關於toString重要補充說明：

• 本意是轉換爲字符串，可是某些toString方法不只僅是轉換爲字符串
• 對於Number、String，Boolean，Array，RegExp、Date、Function原型上的toString方法都是把當前的數據類型轉換爲字符串的類型（它們的做用僅僅是用來轉換爲字符串的）
• Object上的toString並非用來轉換爲字符串的。

Object上的toString它的做用是返回當前方法執行的主體（方法中的this）所屬類的詳細信息即"[object Object]",其中第一個object表明當前實例是對象數據類型的(這個是固定死的)，第二個Object表明的是this所屬的類是Object。

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window是全局對象global的引用
複製代碼

文章於2018.10.10從新修改，但願對你們有些許幫忙！

若是以爲文章對你有些許幫助，歡迎在個人GitHub博客點贊和關注，感激涕零！

參考資料

【文章】[ JS 進階 ] 基本類型 引用類型 簡單賦值 對象引用（推薦）

JS判斷數據類型的三種方法

JS中的數據類型及判斷

Javascript 判斷變量類型的陷阱 與 正確的處理方式

判斷JS數據類型的四種方法