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

leiting1998發表於2019-03-04

型別:

JavaScript 中有七種內建型別:
  1. 空值 (null)
  2. 未定義 (undefined)
  3. 布林值 (boolean)
  4. 數字 (number)
  5. 字串 (string)
  6. 物件 (object)
  7. 符號 (symbol,ES6中新增)

在 JS 中呢,有很多坑,本文章將結合 undersoce.js原始碼 和我所總結的方法準確判斷這六種型別,第七種也會提供一種判斷思路;

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

先來一個小測試:

首先,大家都熟悉的一種判斷方式 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" 
複製程式碼
JS靈巧判斷7種型別的方式

巧用 “ ! ” 號:

!null			   // true			   <= 這是一個非常巧妙的技巧,下面將解釋;

!undefined		   // true			   <= 這是一個非常巧妙的技巧,下面將解釋;

------------我們不一樣!!!------------

!123			  // false

!true			  // false

!{a: 123}		  // false

!function a() { }         // false

!`123`			  // false
複製程式碼

有了這個區別,我們可以做一些有趣的事情,這是在 undersoce.js 原始碼裡面學到的技巧,這樣能夠準確地排除 null 和 undefined

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

無敵法 “ .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 卻無法區分完全!!!!!

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

來看看 ” 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上的

複製程式碼
JS靈巧判斷7種型別的方式

最後一招 “ 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]`;
}
複製程式碼

類似地,我們採用 constructortypeof 的方式也可以實現判斷。

字串 (string)

var toString = Object.prototype.toString;

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

類似地,我們採用 constructortypeof 的方式也可以實現判斷。

物件 (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 的方式,nullundefined 返回結果都為 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

相關文章