JavaScript數(shù)據(jù)類型判定的總結(jié)筆記
用typeof 來檢測(cè)數(shù)據(jù)類型
Javascript自帶兩套類型:基本數(shù)據(jù)類型(undefined,string,null,boolean,function,object)和對(duì)象類型。
但是如果嘗試用typeof 來檢測(cè)對(duì)象類型都一律返回"object"并不能加以區(qū)分
typeof null // "object" typeof [] // "object" typeof document.childNodes //"object" typeof /\d/ //"object" typeof new Number() //"object"
用constructor 屬性來檢測(cè)類型的構(gòu)造函數(shù)
[].constructor === Array //true
document.childNodes === NodeList //true
/\d/.constructor === RegExp //true
function isRegExp(obj) {
return obj && typeof obj === "object" && obj.constructor === RegExp;
} //檢測(cè)正則表達(dá)式對(duì)象
function isNull(obj){
return obj === null;
}
用construct檢測(cè)可以完成大多數(shù)的類型檢測(cè),null特殊直接比較。然而iframe中的數(shù)組類型確無法檢測(cè)出正確類型,這是用construct檢測(cè)的一個(gè)缺陷;同時(shí)在舊版本IE下DOM和BOM的construct是無法訪問的
利用 Object.prototype.toString 來判斷
Object.prototype.toString.call([]) //"[object Array]" Object.prototype.toString.call(/\d/) // "[object RegExp]" Object.prototype.toString.call(1)//"[object Number]"
來看看jQuery源碼中是如何使用toString方法的
/*
* jQuery JavaScript Library v1.11.2
*/
var class2type = {}; //用來保存js數(shù)據(jù)類型
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {//構(gòu)造class2type存儲(chǔ)常用類型的映射關(guān)系,遍歷基本類型并賦值,鍵值為 [object 類型]
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});
type: function( obj ) {
if ( obj == null ) {//首先如果是null則返回null字符串
return obj + "";
}
//接著判斷給定參數(shù)類型是否為object或者function,是的話在映射表中尋找 toString后的鍵值名稱并返回,不是的話利用typeof就可以得到正確類型。
return typeof obj === "object" || typeof obj === "function" ?
class2type[ toString.call(obj) ] || "object" :
typeof obj;
},
/****************************/
jQuery.type(/\d/) //"regexp"
jQuery.type(new Number()) //"number"
這里能夠使用toString方法來檢測(cè)是因?yàn)椴煌瑢?duì)象都會(huì)重新定義自己的toString方法
說說一些特殊類型的檢測(cè)

上述調(diào)試是在IE8中進(jìn)行的,因?yàn)閡ndefined 在javascript中并不是關(guān)鍵字,在IE8以下(之后的版本不可以賦值)是可以賦值的,查看jQuery.type源碼可知,對(duì)于 undefined檢測(cè)由是 typeof undefined完成的。jQuery.type并不能在舊的IE中檢測(cè)出undefined的正確性。想要獲得純凈的undefined可以使用 void 0

另外,對(duì)于DOM,BOM對(duì)象在舊的IE中使用Objec.prototype.toString檢測(cè)出來的值均為 “[object Object]”

但是在chrome下的結(jié)果卻完全不同(chrome可以檢測(cè)出真實(shí)類型)

了解一下jQuery檢測(cè)特殊類型
isWindow: function( obj ) {//ECMA規(guī)定window為全局對(duì)象global,且global.window === global
return obj != null && obj == obj.window;
},
isPlainObject: function( obj ) {
var key;
if ( !obj || jQuery.type(obj) !== "object" || obj.nodeType || jQuery.isWindow( obj ) ) {
return false;
}
try {//判斷它最近的原形對(duì)象是否含有isPrototypeOf屬性
if ( obj.constructor &&
!hasOwn.call(obj, "constructor") &&
!hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
return false;
}
} catch ( e ) {
return false;
}
if ( support.ownLast ) {
for ( key in obj ) {
return hasOwn.call( obj, key );
}
}
mass Framework相對(duì)jQuery中改善的地方
var class2type = {//將可能出現(xiàn)的類型都映射在了class2type對(duì)象中,從而減少isXXX函數(shù)
"[object HTMLDocument]": "Document",
"[object HTMLCollection]": "NodeList",
"[object StaticNodeList]": "NodeList",
"[object DOMWindow]": "Window",
"[object global]": "Window",
"null": "Null",
"NaN": "NaN",
"undefined": "Undefined"
};
type: function(obj, str) {
var result = class2type[(obj == null || obj !== obj) ? obj : serialize.call(obj)] || obj.nodeName || "#"; //serialize == class2type.toString
if (result.charAt(0) === "#") { //兼容舊式瀏覽器與處理個(gè)別情況,如window.opera
//利用IE678 window == document為true,document == window竟然為false的神奇特性
if (obj == obj.document && obj.document != obj) {//對(duì)DOM,BOM對(duì)象采用nodeType(單一)和item(節(jié)點(diǎn)集合)進(jìn)行判斷
result = "Window"; //返回構(gòu)造器名字
} else if (obj.nodeType === 9) {
result = "Document"; //返回構(gòu)造器名字
} else if (obj.callee) {
result = "Arguments"; //返回構(gòu)造器名字
} else if (isFinite(obj.length) && obj.item) {
result = "NodeList"; //處理節(jié)點(diǎn)集合
} else {
result = serialize.call(obj).slice(8, -1);
}
}
if (str) {
return str === result;
}
return result;
}
類數(shù)組
類數(shù)組是一類特殊的數(shù)據(jù)類型存在,他們本身類似Array但是又不能使用Array的方法,他們有一個(gè)明顯的特點(diǎn)就是含有l(wèi)ength屬性,而且 鍵值是以整數(shù)有序的排列的。這樣的數(shù)組可以通過 Array.slice() 這樣的方法轉(zhuǎn)換成真正的數(shù)組,從而使用Array提供的方法。
常見類數(shù)組:arguments,document.forms,document.getElementsByClassName(等一些列節(jié)點(diǎn)集合NodeList,HTMLCollection),或者是一些特殊對(duì)象,如下所示:
var arrayLike={
0:"a",
1:"b",
2:"c",
length:3
}
通常情況下通過Array.slice.call既可以轉(zhuǎn)換類數(shù)組,但是舊IE的HTMLCollection,NodeList不是Object 的子類,不能使用該方法,這時(shí)候需要構(gòu)建一個(gè)空數(shù)組,然后將遍歷節(jié)點(diǎn)push就如空數(shù)組中,返回新生成的數(shù)組即可,同時(shí)要區(qū)別出window 和 string對(duì)象,因?yàn)檫@類的對(duì)象同樣含有l(wèi)ength>=0(length不可被修改),但是不是類數(shù)組。
jQuery如何處理類數(shù)組的
makeArray: function( arr, results ) {
var ret = results || [];
if ( arr != null ) {
if ( isArraylike( Object(arr) ) ) {
jQuery.merge( ret,
typeof arr === "string" ?
[ arr ] : arr
); //jQuery.merge 合并數(shù)組 ,若是字符串則封裝成數(shù)組河濱,不是則世界合并
} else {
push.call( ret, arr );
}
}
return ret;
}
Ext.js是如何處理類數(shù)組的
toArray: function(iterable, start, end) {
if (!iterable || !iterable.length) {
return []; //非類數(shù)組類型直接返回[]
}
if (typeof iterable === 'string') {
iterable = iterable.split(''); //分解字符串
}
if (supportsSliceOnNodeList) {
return slice.call(iterable, start || 0, end || iterable.length); //對(duì)于NodeList支持
}
var array = [],
i;
start = start || 0;
end = end ? ((end < 0) ? iterable.length + end : end) : iterable.length;
for (i = start; i < end; i++) {
array.push(iterable[i]);
}
return array;
}
mass Framework.js是如何處理類數(shù)組的
slice: W3C ? function(nodes, start, end) { //var W3C = DOC.dispatchEvent; IE9開始支持W3C的事件模型
return factorys.slice.call(nodes, start, end);
} : function(nodes, start, end) {
var ret = [],
n = nodes.length;
if (end === void 0 || typeof end === "number" && isFinite(end)) {
start = parseInt(start, 10) || 0;
end = end == void 0 ? n : parseInt(end, 10);
if (start < 0) {
start += n;
}
if (end > n) {
end = n;
}
if (end < 0) {
end += n;
}
for (var i = start; i < end; ++i) {
ret[i - start] = nodes[i];
}
}
return ret;
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助
相關(guān)文章
從數(shù)據(jù)結(jié)構(gòu)分析看:用for each...in 比 for...in 要快些
本篇文章小編將為大家介紹,從數(shù)據(jù)結(jié)構(gòu)分析看:用for each...in 比 for...in 要快些。需要的朋友可以參考一下2013-04-04
JavaScript中的Repaint和Reflow用法詳解
這篇文章主要介紹了JavaScript中的Repaint和Reflow用法詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-07
FF(火狐)瀏覽器無法執(zhí)行window.close()解決方案
這篇文章主要介紹了FF(火狐)瀏覽器無法執(zhí)行window.close()解決方案,需要的朋友可以參考下2014-11-11
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記11 內(nèi)建js對(duì)象
內(nèi)建對(duì)象是指由ECMAScript實(shí)現(xiàn)提供的、不依賴于宿主環(huán)境的對(duì)象,這些對(duì)象在程序運(yùn)行之前就已經(jīng)存在了2012-10-10
實(shí)例分析javascript中的call()和apply()方法
因項(xiàng)目需求去研究了下javascript中的call和apply方法,去百度看了幾篇介紹JS中call和apply的文章,總覺得不是很好懂,這里寫下我自己的理解,供網(wǎng)友們參考。2014-11-11
詳解Javascript函數(shù)聲明與遞歸調(diào)用
本篇文章詳細(xì)的介紹了Javascript函數(shù)聲明與遞歸調(diào)用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下。2016-10-10
Javascript中eval函數(shù)的使用方法與示例
JavaScript有許多小竅門來使編程更加容易。其中之一就是eval()函數(shù),這個(gè)函數(shù)可以把一個(gè)字符串當(dāng)作一個(gè)JavaScript表達(dá)式一樣去執(zhí)行它。以下是它的說明2007-04-04

