js檢測數據類型四種辦法
面試題中經常會考js數據類型檢測,今天我來分享一下js中常用的四種方法判斷數據類型,歡迎指點更正。 廢話不多說,直入正題。
1.typeof
1 console.log(typeof ""); 2 console.log(typeof 1); 3 console.log(typeof true); 4 console.log(typeof null); 5 console.log(typeof undefined); 6 console.log(typeof []); 7 console.log(typeof function(){}); 8 console.log(typeof {});
看看控制臺輸出什麽
可以看到,typeof對於基本數據類型判斷是沒有問題的,但是遇到引用數據類型(如:Array)是不起作用的。
2.instanceof
1 console.log("1" instanceof String); 2 console.log(1 instanceof Number); 3 console.log(true instanceof Boolean); 4 // console.log(null instanceof Null); 5 // console.log(undefined instanceof Undefined); 6 console.log([] instanceofArray); 7 console.log(function(){} instanceof Function); 8 console.log({} instanceof Object);
暫且不考慮null和undefined(這兩個比較特殊),看看控制臺輸出什麽
可以看到前三個都是以對象字面量創建的基本數據類型,但是卻不是所屬類的實例,這個就有點怪了。後面三個是引用數據類型,可以得到正確的結果。如果我們通過new關鍵字去創建基本數據類型,你會發現,這時就會輸出true,如下:
接下再來說說為什麽null和undefined為什麽比較特殊,實際上按理來說,null的所屬類就是Null,undefined就是Undefined,但事實並非如此:控制臺輸出如下結果:
l瀏覽器壓根不認識這兩貨,直接報錯。在第一個例子你可能已經發現了,typeof null的結果是object,typeof undefined的結果是undefined
尤其是null,其實這是js設計的一個敗筆,早期準備更改null的類型為null,由於當時已經有大量網站使用了null,如果更改,將導致很多網站的邏輯出現漏洞問題,就沒有更改過來,於是一直遺留到現在。作為學習者,我們只需要記住就好。
3.constructor
1 console.log(("1").constructor === String); 2 console.log((1).constructor === Number); 3 console.log((true).constructor === Boolean); 4 //console.log((null).constructor === Null); 5 //console.log((undefined).constructor === Undefined); 6 console.log(([]).constructor === Array); 7 console.log((function() {}).constructor === Function); 8 console.log(({}).constructor === Object);
(這裏依然拋開null和undefined)乍一看,constructor似乎完全可以應對基本數據類型和引用數據類型,都能檢測出數據類型,事實上並不是如此,來看看為什麽:
1 function Fn(){}; 2 3 Fn.prototype=new Array(); 4 5 var f=new Fn(); 6 7 console.log(f.constructor===Fn); 8 console.log(f.constructor===Array);
我聲明了一個構造函數,並且把他的原型指向了Array的原型,所以這種情況下,constructor也顯得力不從心了。
看到這裏,是不是覺得絕望了。沒關系,終極解決辦法就是第四種辦法,看過jQuery源碼的人都知道,jQuery實際上就是采用這個方法進行數據類型檢測的。
4.Object.prototype.toString.call()
1 var a = Object.prototype.toString; 2 3 console.log(a.call("aaa")); 4 console.log(a.call(1)); 5 console.log(a.call(true)); 6 console.log(a.call(null)); 7 console.log(a.call(undefined)); 8 console.log(a.call([])); 9 console.log(a.call(function() {})); 10 console.log(a.call({}));
可以看到,所有的數據類型,這個辦法都可以判斷出來。那就有人質疑了,假如我把他的原型改動一下呢?如你所願,我們看一下:
可以看到,依然可以得到正確的結果。好了,今天就說到這裏,歡迎關註我的博客,一起交流學習前端知識。
js檢測數據類型四種辦法