一、先介紹下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
發(fā)現(xiàn)除null外的其他4種基本類型均可以用typeof來(lái)識(shí)別:
if(typeof name === "string") { name += "Zhang"; }if(typeof age === "number") { age++; }if(typeof single === "boolean" && single) { … }if(typeof app === "undefined") { app = {}; }因?yàn)閠ypeof null會(huì)得到object,所以直接用===來(lái)檢測(cè)null:
if(el === null) { … }二、對(duì)象
JavaScript的對(duì)象包括內(nèi)置對(duì)象(Date,RegExp ,Error等)和自定義對(duì)象。
(注意,F(xiàn)unction和Array雖然也都是內(nèi)置對(duì)象,但下一節(jié)單獨(dú)講)
對(duì)象不能像基本類型那樣用typeof來(lái)檢測(cè)了,因?yàn)闄z測(cè)出來(lái)的結(jié)果都是object:
console.log(typeof new Date()); //objectconsole.log(typeof new RegExp()); //objectconsole.log(typeof new Error()); //objectconsole.log(typeof new Person()); //用typeof檢測(cè)出自定義對(duì)象也是object
要改用instanceof來(lái)檢測(cè):
var date = new Date();var reg = new RegExp();var err = new Error();var me = new Person();if(date instanceof Date) { //檢測(cè)日期 year = date.getFullYear(); }if(reg instanceof RegExp) { //檢測(cè)正則表達(dá)式 reg.test(...); }if(err instanceof Error) { //檢測(cè)異常 throw err; }if(me instanceof Person) { //檢測(cè)自定義對(duì)象 ... }但自定義對(duì)象有個(gè)問(wèn)題,假設(shè)瀏覽器frameA里和frameB里都定義了Person。 frameA里定義了me對(duì)象,用me instanceof Person檢測(cè)出來(lái)為true。但當(dāng)自定義對(duì)象me傳給frameB后,在frameB里instanceof會(huì)是false。
本節(jié)一開(kāi)頭就說(shuō)了,F(xiàn)unction和Array雖然也都是內(nèi)置對(duì)象,但留到下一節(jié)講。原因就是Function和Array也有和自定義對(duì)象相同的上述問(wèn)題。因此Function和Array一般不用instanceof
三、Function
上面說(shuō)了用instanceof檢測(cè)Function不能跨frame。因此用typeof來(lái)檢測(cè),它可跨frame:
var func = function(){};if(typeof func === 'function') { … }但I(xiàn)E8以前用typeof來(lái)檢測(cè)DOM系函數(shù)會(huì)得到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來(lái)檢測(cè)是否支持DOM函數(shù)if("getElementById" in document) { … } if("getElementsByTagName" in document) { … }if("createElement" in document) { … }四、Array
上面說(shuō)了用instanceof檢測(cè)Array不能跨frame。ES5之前都自定義檢測(cè)方法。其中最精確的方法:依賴Array的toString會(huì)返回固定字符串”[Object Array]”的事實(shí)來(lái)檢測(cè):
function isArray(arr) { return Object.prototype.toString.call(arr) === "[Object Array]";}該方法精確且優(yōu)雅,因此被很多庫(kù)所采納,最終在ES5被作為isArray方法引入了Array,參照MDN。現(xiàn)在你不需要自定義檢測(cè)方法了,直接用isArray()即可。
其他檢測(cè)方法,都各有缺陷,不能100%精確。但作為一種思路是可以借鑒的。例如依賴Array是唯一包含sort方法的對(duì)象的事實(shí)來(lái)檢測(cè):
function isArray(arr) { return typeof arr.sort === "function";}如果是自定義對(duì)象也定義了sort方法,該方法就失效了。
五、屬性
檢測(cè)屬性是否在實(shí)例對(duì)象中應(yīng)該用hasOwnProperty。如果你不關(guān)心屬性是在實(shí)例對(duì)象中還是在原型對(duì)象中,可以簡(jiǎn)單點(diǎn)用in
例如檢測(cè)字面量對(duì)象屬性:
var Person = { name: "Jack", age: 33};if("name" in Person) { … } //trueif(Person.hasOwnProperty("name")) { … } //true例如實(shí)例對(duì)象屬性:
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?
總結(jié)
用typeof檢測(cè)string,number,boolean,undefined,F(xiàn)unction
用===檢測(cè)null
用isArray()檢測(cè)Array
用instanceof檢測(cè)內(nèi)置對(duì)象(除Function和Array)和自定義對(duì)象
用hasOwnProperty檢測(cè)屬性是否在實(shí)例對(duì)象中。如果你不關(guān)心屬性是在實(shí)例對(duì)象中還是在原型對(duì)象中,可以簡(jiǎn)單點(diǎn)用in
好了,本篇介紹如何檢測(cè)JavaScript各種類型的內(nèi)容就到這里了,希望大家能夠認(rèn)真學(xué)習(xí)本文的內(nèi)容,或許對(duì)大家學(xué)習(xí)JavaScript有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注