資訊專(zhuān)欄INFORMATION COLUMN
摘要：種原始類(lèi)型對(duì)象屬性種原始類(lèi)型中種原始類(lèi)型為，，，，發(fā)現(xiàn)除外的其他種基本類(lèi)型均可以用來(lái)識(shí)別因?yàn)闀?huì)得到，所以直接用來(lái)檢測(cè)對(duì)象的對(duì)象包括內(nèi)置對(duì)象，，等和自定義對(duì)象。其他檢測(cè)方法，都各有缺陷，不能精確。屬性檢測(cè)屬性是否在實(shí)例對(duì)象中應(yīng)該用。
本篇介紹一下如何檢測(cè)JavaScript各種類(lèi)型。
? 5種原始類(lèi)型
? 對(duì)象
? Function
? Array
? 屬性
5種原始類(lèi)型
JavaScript中5種原始類(lèi)型為string，number，boolean，undefined，null
var name = "Jack"; var age = 32; var single = false; var app; //undefined console.log(typeof name); //string console.log(typeof age); //number console.log(typeof single); //boolean console.log(typeof app); //undefined console.log(typeof null); //object
發(fā)現(xiàn)除null外的其他4種基本類(lèi)型均可以用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é)多帶帶講）
對(duì)象不能像基本類(lèi)型那樣用typeof來(lái)檢測(cè)了，因?yàn)闄z測(cè)出來(lái)的結(jié)果都是object：
console.log(typeof new Date()); //object console.log(typeof new RegExp()); //object console.log(typeof new Error()); //object console.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，不是function console.log(typeof document.getElementsByTagName); //object，不是function console.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è)方法。其中最精確的方法：依賴(lài)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?，F(xiàn)在你不需要自定義檢測(cè)方法了，直接用isArray()即可。
其他檢測(cè)方法，都各有缺陷，不能100%精確。但作為一種思路是可以借鑒的。例如依賴(lài)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) { … } //true
if(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) { … } //true
if(me.hasOwnProperty("name")) { … } //true
if("location" in me) { … } //true
if(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**
更多資源上：去轉(zhuǎn)盤(pán)網(wǎng)；或者加我的QQ群一起討論學(xué)習(xí)js，css等技術(shù)（QQ群：512245829）
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80160.html
引言 javascript數(shù)據(jù)有六大基本類(lèi)型:Number,String,Boolean,Null,Undefined,Symbol,一種引用類(lèi)型Object typeof檢測(cè)基本類(lèi)型 typeof可以用來(lái)檢測(cè)除null之外的基本類(lèi)型,還可以檢測(cè)函數(shù)showImg(https://segmentfault.com/img/bVCLRr);showImg(https://segmentfault....
摘要：使用操作符，創(chuàng)建一個(gè)對(duì)象，并且執(zhí)行構(gòu)造函數(shù)方法。使用可以返回一個(gè)字典型對(duì)象對(duì)象原型每一個(gè)對(duì)象都有一個(gè)內(nèi)置的屬性指向構(gòu)造它的函數(shù)屬性而構(gòu)造函數(shù)的則指向構(gòu)造函數(shù)本生。 對(duì)象概念 在 javascript 中, 一切引用類(lèi)型均為對(duì)象。 如 function Foo () {} 中，F(xiàn)oo本身就是一個(gè)對(duì)象的引用。 創(chuàng)建對(duì)象方式 字面量方式 new 構(gòu)造函數(shù) 函數(shù)聲明 Object.creat...
摘要：詳情正式發(fā)布于號(hào)正式發(fā)布，版本代號(hào)為。上個(gè)月有次下載量，大大超過(guò)了的下載量。但對(duì)于偽類(lèi)選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網(wǎng)站可請(qǐng)求訪問(wèn)第一方網(wǎng)站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學(xué)計(jì)算框架 Propel 是一種 JavaScript 科學(xué)計(jì)算框架，類(lèi)似于 Python 中的科學(xué)計(jì)算庫(kù) NumPy，也就是說(shuō)利用 JS 也可以進(jìn)行機(jī)器學(xué)習(xí)啦。...
摘要：詳情正式發(fā)布于號(hào)正式發(fā)布，版本代號(hào)為。上個(gè)月有次下載量，大大超過(guò)了的下載量。但對(duì)于偽類(lèi)選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網(wǎng)站可請(qǐng)求訪問(wèn)第一方網(wǎng)站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學(xué)計(jì)算框架 Propel 是一種 JavaScript 科學(xué)計(jì)算框架，類(lèi)似于 Python 中的科學(xué)計(jì)算庫(kù) NumPy，也就是說(shuō)利用 JS 也可以進(jìn)行機(jī)器學(xué)習(xí)啦。...
摘要：詳情正式發(fā)布于號(hào)正式發(fā)布，版本代號(hào)為。上個(gè)月有次下載量，大大超過(guò)了的下載量。但對(duì)于偽類(lèi)選擇器，其總是顯示為未使用。詳情新增允許第三方嵌入的網(wǎng)站可請(qǐng)求訪問(wèn)第一方網(wǎng)站的，但這并不是指放寬了同源策略。 01. Propel：JS的科學(xué)計(jì)算框架 Propel 是一種 JavaScript 科學(xué)計(jì)算框架，類(lèi)似于 Python 中的科學(xué)計(jì)算庫(kù) NumPy，也就是說(shuō)利用 JS 也可以進(jìn)行機(jī)器學(xué)習(xí)啦。...
閱讀 2132·2019-08-30 15:52
閱讀 2507·2019-08-29 18:37
閱讀 866·2019-08-29 12:33
閱讀 2909·2019-08-29 11:04
閱讀 1637·2019-08-27 10:57
閱讀 2160·2019-08-26 13:38
閱讀 2834·2019-08-26 12:25
閱讀 2521·2019-08-26 12:23
