js檢測資料型別四種辦法

1.typeof

console.log(typeof
""); //
string
console.log(typeof
1); //
number
console.log(typeof
true); //
boolean
console.log(typeof
null); //
object
console.log(typeof undefined); //
undefined
console.log(typeof ); //
object
console.log(typeof function(){}); //
function
console.log(typeof {}); //
object

可以看到，typeof對於基本資料型別判斷是沒有問題的，但是遇到引用資料型別（如：array）是不起作用的。

2.instanceof

console.log("
1" instanceof string); //
false
console.log(1 instanceof number); //
false
console.log(true instanceof boolean); //
false
instanceof null); 
//null is not defined 
instanceof undefined); 
//undefined is not defined
console.log( instanceof array); //
true
console.log(function(){} instanceof function); //
true
console.log({} instanceof object); //
true

可以看到前三個都是以物件字面量建立的基本資料型別，但是卻不是所屬類的例項，這個就有點怪了。後面三個是引用資料型別，可以得到正確的結果。如果我們通過new關鍵字去建立基本資料型別，你會發現，這時就會輸出true,如下:

console.log(new string("
1") instanceof string); //
true
console.log(new number(1) instanceof number); //
true
console.log(new boolean(true) instanceof boolean); //
true

接下再來說說為什麼null和undefined為什麼比較特殊，實際上按理來說，null的所屬類就是null，undefined就是undefined，但事實並非如此：控制台輸出如下結果：

l瀏覽器壓根不認識這兩貨，直接報錯。在第乙個例子你可能已經發現了，typeof null的結果是object，typeof undefined的結果是undefined

尤其是null，其實這是js設計的乙個敗筆，早期準備更改null的型別為null，由於當時已經有大量**使用了null，如果更改，將導致很多**的邏輯出現漏洞問題，就沒有更改過來，於是一直遺留到現在。作為學習者，我們只需要記住就好。

3.constructor

console.log(("
1").constructor === string); //
true
console.log((1).constructor === number); //
true
console.log((true).constructor === boolean); //
true
=== null); 
//vm471:1 uncaught typeerror: cannot read property 'constructor' of null at :1:20
=== undefined);
//vm503:2 uncaught typeerror: cannot read property 'constructor' of undefined at :2:25
console.log(().constructor === array); //
true
console.log((function() {}).constructor === function); //
true
console.log(({}).constructor === object); //
true

（這裡依然拋開null和undefined）乍一看，constructor似乎完全可以應對基本資料型別和引用資料型別，都能檢測出資料型別，事實上並不是如此，來看看為什麼：

function fn(){};
fn.prototype=new
array();
var f=new
fn();
console.log(f.constructor===fn); //false
console.log(f.constructor===array); //true

我宣告了乙個建構函式，並且把他的原型指向了array的原型，所以這種情況下，constructor也顯得力不從心了。

看到這裡，是不是覺得絕望了。沒關係，終極解決辦法就是第四種辦法，看過jquery原始碼的人都知道，jquery實際上就是採用這個方法進行資料型別檢測的。

4.object.prototype.tostring.call()

var a =object.prototype.tostring;
console.log(a.call(
"aaa
")); //
[object string]
console.log(a.call(1)); //
[object number]
console.log(a.call(true)); //
[object boolean]
console.log(a.call(null)); //
[object null]
console.log(a.call(undefined)); 　　//
[object undefined]
console.log(a.call());　　　　　　　//
[object array]
console.log(a.call(function() {})); //
[object function]
console.log(a.call({})); //
[object object]

可以看到，所有的資料型別，這個辦法都可以判斷出來。那就有人質疑了，假如我把他的原型改動一下呢？如你所願，我們看一下：

function fn(){};
fn.prototype=new
array();
object.prototype.tostring.call(fn)
//"[object function]"

總結：typeof 適用於基本型別

constructor 、instanceof 不適用null和undefined

object.prototype.tostring.call 適用於全部

js檢測資料型別四種辦法

js檢測資料型別的四種方式

資料型別檢測的四種方式

js學習總結資料型別檢測的四種方式

js檢測資料型別四種辦法

js檢測資料型別的四種方式

資料型別檢測的四種方式

js學習總結 資料型別檢測的四種方式

相關推薦

js學習總結資料型別檢測的四種方式