如何檢測JavaScript的各種類型

一、先介紹下5種原始類型

JavaScript中5種原始類型為string ， number ， boolean ， undefined ， null

 var name = "Jack";var age = 32;var single = false;var app; //undefinedconsole.log(typeof name); //stringconsole.log(typeof age); //numberconsole.log(typeof single); //booleanconsole.log(typeof app); //undefinedconsole.log(typeof null); //object

發現除null外的其他4種基本類型均可以用typeof來識別：

 if(typeof name === "string") { name += "Zhang"; }if(typeof age === "number") { age++; }if(typeof single === "boolean" && single) { … }if(typeof app === "undefined") { app = {}; }

因為typeof null會得到object，所以直接用===來檢測null：

 if(el === null) { … }

二、對象

JavaScript的對象包括內置對象（ Date，RegExp ，Error等）和自定義對象。

（注意，Function和Array雖然也都是內置對象，但下一節單獨講）

對像不能像基本類型那樣用typeof來檢測了，因為檢測出來的結果都是object ：

 console.log(typeof new Date()); //objectconsole.log(typeof new RegExp()); //objectconsole.log(typeof new Error()); //objectconsole.log(typeof new Person()); //用typeof檢測出自定義對像也是object

要改用instanceof來檢測：

 var date = new Date();var reg = new RegExp();var err = new Error();var me = new Person();if(date instanceof Date) { //檢測日期year = date.getFullYear(); }if(reg instanceof RegExp) { //檢測正則表達式reg.test(...); }if(err instanceof Error) { //檢測異常throw err; }if(me instanceof Person) { //檢測自定義對象... }

但自定義對像有個問題，假設瀏覽器frameA里和frameB裡都定義了Person。 frameA裡定義了me對象，用me instanceof Person檢測出來為true。但當自定義對象me傳給frameB後，在frameB裡instanceof會是false。

本節一開頭就說了，Function和Array雖然也都是內置對象，但留到下一節講。原因就是Function和Array也有和自定義對象相同的上述問題。因此Function和Array一般不用instanceof

三、Function

上面說了用instanceof檢測Function不能跨frame。因此用typeof來檢測，它可跨frame：

 var func = function(){};if(typeof func === 'function') { … }

但IE8以前用typeof來檢測DOM系函數會得到object，因此IE8以前改用in：

 console.log(typeof document.getElementById); //object，不是functionconsole.log(typeof document.getElementsByTagName); //object，不是functionconsole.log(typeof document.createElement); //object，不是function//IE8以前的IE瀏覽器，要改用in來檢測是否支持DOM函數if("getElementById" in document) { … } if("getElementsByTagName" in document) { … }if("createElement" in document) { … }

四、Array

上面說了用instanceof檢測Array不能跨frame。 ES5之前都自定義檢測方法。其中最精確的方法：依賴Array的toString會返回固定字符串”[Object Array]”的事實來檢測：

 function isArray(arr) { return Object.prototype.toString.call(arr) === "[Object Array]";}

該方法精確且優雅，因此被很多庫所採納，最終在ES5被作為isArray方法引入了Array，參照MDN。現在你不需要自定義檢測方法了，直接用isArray()即可。

其他檢測方法，都各有缺陷，不能100%精確。但作為一種思路是可以藉鑑的。例如依賴Array是唯一包含sort方法的對象的事實來檢測：

 function isArray(arr) { return typeof arr.sort === "function";}

如果是自定義對像也定義了sort方法，該方法就失效了。

五、屬性

檢測屬性是否在實例對像中應該用hasOwnProperty 。如果你不關心屬性是在實例對像中還是在原型對像中，可以簡單點用in

例如檢測字面量對象屬性：

 var Person = { name: "Jack", age: 33};if("name" in Person) { … } //trueif(Person.hasOwnProperty("name")) { … } //true

例如實例對象屬性：

 var Person = function (name, age) { this.name = name; this.age = age;};Person.prototype.location = "Shanghai";var me = new Person("Jack", 33)if("name" in me) { … } //trueif(me.hasOwnProperty("name")) { … } //trueif("location" in me) { … } //trueif(me.hasOwnProperty("location")) { … }//false

除此之外其他方法都不好：

 if (object[propName]) //Not Good，你怎麼知道屬性值不是0或1？ if (object[propName] === null) //Not Good，你怎麼知道屬性值不是null？ if (object[propName] === undefined) //Not Good，你怎麼知道屬性值不是undefined？

總結

用typeof檢測string，number，boolean，undefined，Function

用===檢測null

用isArray()檢測Array

用instanceof檢測內置對象（除Function和Array）和自定義對象

用hasOwnProperty檢測屬性是否在實例對像中。如果你不關心屬性是在實例對像中還是在原型對像中，可以簡單點用in

好了，本篇介紹如何檢測JavaScript各種類型的內容就到這裡了，希望大家能夠認真學習本文的內容，或許對大家學習JavaScript有所幫助。