JS靈巧判斷7種類型的方式

類型：

JavaScript 中有七種內置類型：

1. 空值 (null)
2. 未定義 (undefined)
3. 布爾值 (boolean)
4. 數字 (number)
5. 字符串 (string)
6. 對象 (object)
7. 符號 (symbol，ES6中新增)

在 JS 中呢，有不少坑，本文章將結合 undersoce.js源碼 和我所總結的方法準確判斷這六種類型，第七種也會提供一種判斷思路；

先來一個小測試：

首先，你們都熟悉的一種判斷方式 typeof，這是一種雖然老掉牙可是有些實用的方式 ：

typeof null			// "object"			<= 在後面文章裏你會看到，巨坑！！！

typeof undefined	        // "undefined"

typeof true			// "boolean"

typeof 42		        // "number"

typeof "42"			// "string"

typeof {life: 42}               // "object"

typeof Symbol()		        // "symbol"


// ------------後面3種是單獨提出來的注意事項------------------

typeof void 0		       // "undefined"	<= 這是一個很是實用的技巧，我將在後面解釋；

typeof [1,2,3]		       // "object"  <= 數組 其實也是對象，巨坑！！！

typeof function a() { }		// "function" 
複製代碼

巧用 「 ! 」 號：

!null			   // true			   <= 這是一個很是巧妙的技巧，下面將解釋；

!undefined		   // true			   <= 這是一個很是巧妙的技巧，下面將解釋；

------------咱們不同！！！------------

!123			  // false

!true			  // false

!{a: 123}		  // false

!function a() { }         // false

!'123'			  // false
複製代碼

有了這個區別，咱們能夠作一些有趣的事情，這是在 undersoce.js 源碼裏面學到的技巧，這樣可以準確地排除 null 和 undefined

無敵法 「 .toString.call() 」：

固然 Object.prototype.toString.call 也能夠換成 Object.prototype.toString.apply 。

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(true)		// "[object Boolean]"

Object.prototype.toString.call('123')		// "[object String]"

Object.prototype.toString.call({a: 123})	// "[object Object]"

Object.prototype.toString.call(Symbol())	// "[object Symbol]"


// ---------------單獨出來說的幾個注意事項---------------------

Object.prototype.toString.call([1,2,3])	// "[object Array]"

Object.prototype.toString.call(function a() { })	// "[object Function]" 其實函數也是object類型

Object.prototype.toString.call(new Date)	// "[object Date]"	日期對象

Object.prototype.toString.call(Math)		// [object Math]	數學函數對象

Object.prototype.toString.call(function a() { })	// "[object Function]" 其實函數也是object類型

複製代碼

注1：這種方式存在兼容性問題，具體兼容性問題點擊 這裏 ，JavaScript 1.8.5，沒法徹底檢測上述狀況。

注2：使用這套技巧，可以準確地分辨這7種類型甚至更多更精確，而 typeof 卻沒法區分徹底！！！！！

來看看 " constructor "吧：

這種方式是判斷對象的構造函數是誰，至於什麼是構造函數我將在另外一篇文章寫道；

var n1 = null;
n.constructor			  // 報錯：由於 null 是 JS 原型鏈的起點，沒有構造函數；

var u = undefined;
u.constructor			  // 報錯：它也沒有構造函數；

var a = [1, 2, 3];
a.constructor === Array;   // true	數組

var n = 123;
n.constructor === Number;  // true	數字

var s1 = '123';
abc.constructor === String	// true	字符串

var o = {a: 123};
o.constructor === Object;   // true 對象

var s = Symbol()
abc.constructor === Symbol	// true 符號

------------------單獨出來說的幾個注意事項----------------------

var arr = [1, 2, 3];
arr.constructor === Array	// true 數組 可以很好地區分

var fun = function a() { };
fun.constructor === Function  // true 函數

var abc = new Date();
abc.constructor === Date;	 // true 日期 

var abc = new RegExp();
abc.constructor === RegExp;	// true 正則 

var abc = Math
abc.constructor === Math;	// false 不能夠像Object.prototype.toString.call()同樣區分;

abc.constructor === Object   // true 事實上沒有Math這個構造函數，Math的構造函數在 Object上的

複製代碼

最後一招 「 instanceof 」：

注意：使用對象必須是一個 object ；

// 語法： object instanceof constructor；

var n1 = 123;			 // n 是類型爲 Number 的元素！！！不是對象！！！
typeof n1;				 // "number"	回想一下咱們有7種類型
n1 instanceof Number;	  // false	 function Number() { }

var n2 = new Number(123)  // 如今 n2 是一個 object 元素！！！
typeof n2;				 // "object"
n2 instanceof Number;	  // true

複製代碼

正如，上述方式所說，這種方式只適合判斷 object ！！！

var a = [1, 2, 3];		// 在最開始就聲明瞭，數組也是對象，此法能夠用來判斷數組；

a instanceof Array;		// 而這個對象的構造函數是 function Array() { }

// 雖然 typeof null 也是 object 但這是最底層的元素

複製代碼

在這裏我就不過多舉例子了，你若是不知道原型鏈的東西，那就先記住 instanceof 能判斷數組吧！！

閱讀聲明：法1都是來源於 underscore.js 源碼：

空值 (null)：

法1：直接用嚴格等於判斷。

var isNull = function (obj) {
	return obj === null;
};
複製代碼

這是最直接而且有效的方式；

法2：巧妙地利用 ! null 的結果爲 true：

var isNull = function (obj) {
	return !obj && typeof obj === "object";
};
複製代碼

此方法雖然很巧妙，可是沒有法1直接；

未定義 (undefined)

法1：這是最推薦的方式。

var isUndefined = function (obj) {
	return obj === void 0;
}
複製代碼

不少常見的工具庫都採用這種方式，極力推薦！！！；

法2：直接利用 typeof 判斷：

var isUndefined = function (obj) {
	return typeof obj === "undefined";
}
複製代碼

這種方式，也是相對穩定的；

注意：

1. 在全局條件下 undefined 是不能夠被修改的。
2. 在局部條件下 undefined 在某種狀況下是能夠被修改的。
3. 請狠狠地戳這裏，看官方文檔解釋。

(function(undefined) {
   console.log(undefined);        // "123"
})('123')
複製代碼

布爾值 (boolean)

這裏其實我也有疑惑，爲何 underscore.js 會這樣判斷，讀者知道能夠聯繫我；

var toString = Object.prototype.toString;

var isBoolean = function (obj) {
	return obj === true || obj === false || toString.call(obj) === '[object Boolean]';
}
複製代碼

相似地，咱們採用 .constructor 和 typeof 的方式也能夠實現判斷。

數字 (number)

var toString = Object.prototype.toString;

var isNumber = function (obj) {
	return toString.call(obj) === '[object Number]';
}
複製代碼

相似地，咱們採用 constructor 和 typeof 的方式也能夠實現判斷。

字符串 (string)

var toString = Object.prototype.toString;

var isString = function (obj) {
	return toString.call(obj) === '[object String]';
}
複製代碼

相似地，咱們採用 constructor 和 typeof 的方式也能夠實現判斷。

對象 (object)

var toString = Object.prototype.toString;

var isObject = function (obj) {
	var type = typeof obj;
	return type === 'function' || type === 'object' && !!obj;
}
複製代碼

這裏，是我最疑惑的地方，爲何要用 !!obj ？

1. typeof null === object 結果爲 true ;
2. 最開始我已經講了一種，!obj 的方式，null 和 undefined 返回結果都爲 true 而其餘類型爲 false；
3. 以上面這種實現方式，若是傳遞值爲 null 的時候，就會被 !!obj 過濾掉；

或者動手試試，將 && !!obj 刪掉，看看可否達到預期效果。

其餘：

其實上文已經給出思路實現，Date, Math, RegExp等內置對象，我就不詳談了，用得較少：

數組(Array)

法1： 最穩妥的辦法：

Object.prototype.toString.call([1,2,3])	// "[object Array]"
複製代碼

老老實實地用這個方法吧！！！

法2：instanceof 法，僅爲拓展：

var a = [1, 2, 3];		// 在最開始就聲明瞭，數組也是對象，此法能夠用來判斷數組；

a instanceof Array;		// 而這個對象的構造函數是 function Array() { }
複製代碼

法3：構造函數法，僅爲拓展

var a = [1, 2, 3];
a.constructor === Array;   // true	數組
複製代碼

注：若是 a = null ，還要報錯，這種方式堅定不推薦！！！

法4：檢查原型的構造函數，僅爲拓展：

var a = [1, 2, 3];

a.__proto__.constructor === Array
複製代碼

其實法2-4都是屬於一種思路，判斷這個對象的構造函數是否爲數組，僅僅實現方式不一樣罷了。

參考和鳴謝：

• 《你不知道的JavaScript(中)》；
• Underscore.js 源碼；
• http://www.jb51.net/article/79939.htm
• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript