本文實例講述了javascript中的數據類型檢測方法。分享給大家供大家參考,具體如下:
在javascript中數據類型
值類型: 布爾(Boolean),數值(Number),字符(String),空(Null),未定義(Undefined)
引用類型: 對象(Object),函數(Function),數組(Array),日期(Date),正則(RegExp)等等。
檢測方式之 typeof
console.log(typeof undefined)//'undefined'console.log(typeof null) // objectconsole.log(typeof true) //'boolean'console.log(typeof 123) //'number'console.log(typeof NaN) //'number'console.log(typeof "abc") //'string'console.log(typeof function() {}) //'function'var arr=[];console.log(typeof {}) //'object'console.log(typeof arr)//'object'
從上面可以看出來用 typeof 來檢測,不嚴謹。
null 被檢測成為了 object, null 值表示一個空對象指針,用typeof操作符檢測null值時會返回object的原因, 這是在設計ECMAscript時候存在的一些bug。
同樣是js不嚴謹的一種表現形式。而數組也被檢測成為了一個對象, 所以用這種方式不嚴謹。
檢測方式之 toString.call()
console.log(toString.call(undefined) ) // '[object Window]''console.log(toString.call(null) ) // '[object Window]'console.log(toString.call(true) ) // '[object Boolean]'console.log(toString.call(123) ) // '[object Number]'console.log(toString.call(NaN) ) // '[object Number]'console.log(toString.call("abc") ) // '[object String]'console.log(toString.call(function() {})) // '[object Function]'var arr=[];console.log(toString.call({}) ) // '[object Object]'console.log(toString.call(arr) ) // '[object Array]'
可以看出來出了undefined和null 這兩個,其他的檢測都還是比較嚴謹的。
其中toString()函數是window的一個不可枚舉函數,繼承自Object
還可以寫成這樣:
window.toString.call('hello'); // "[object String]"Object.prototype.toString.call('hello'); // "[object String]"
檢測方式之 constructor
console.log('haha'.constructor == String); // trueconsole.log([].constructor === Array); // trueconsole.log({}.constructor === Object); // trueconsole.log(true.constructor === Boolean); // truevar a = 111; // 此處必須要用變量來代表數字,不然會報錯,從這也能看出來js是一門不嚴謹的語言console.log(a.constructor === Number); // true
我們通過把實例的構造函數指向其他地方,來改變它的constructor,就不安全了,不推薦使用 如下代碼所示:
var AAA = function(){}; // 定義一個AAA對象AAA.prototype = { say:function() { alert('hello'); }}var arr1 = new Array(); // 定義一個數組arr1.constructor = function AAA(){}; // 這里可以改變實例的constructor。arr1.__proto__ = AAA.prototype; // 此處改變了原型鏈console.log(arr1.constructor); // AAAconsole.log(arr1 instanceof AAA); // true 原型鏈已經改變,arr1 已經不屬于Array了。console.log(arr1 instanceof Array); // false// 下面我們來讓AAA的原型鏈連到 Array上AAA.prototype.__proto__ = Array.prototype;console.log(arr1 instanceof Array); // true
檢測方式之 instanceof
檢測是否是某一對象的實例
console.log([] instanceof Array); // trueconsole.log({} instanceof Object); // trueconsole.log('haha' instanceof String); // falseconsole.log(true instanceof Boolean); // falseconsole.log(1 instanceof Number); // false
前面兩個是true,后面的全是false 說明了用 A instanceof B 來檢測的前提條件必須是A,B都為對象,通過下面的方式就可以看出來了
var a = new Number(1);var b = new String('haha');var t = new Boolean(true);console.log(a instanceof Number); // trueconsole.log(b instanceof String); // trueconsole.log(t instanceof Boolean); // true
此種方式也不安全,后面會有闡述,有關instanceof 和 isPrototypeOf的區別,我們以后再來探討
還有一種is的方式比如:Array.isArray()
專門用來檢測數組
console.log(Array.isArray([])); // true
這個有兼容問題,IE8及其以下版本瀏覽器不被支持
而jQuery里面也給我們提供了一些解決方案
jQuery.isArray():是否為數組。jQuery.isEmptyObject():是否為空對象(不含可枚舉的屬性)。jQuery.isFunction():是否為函數。jQuery.isNumeric():是否為數字。jQuery.isPlainObject():是否為使用“{}”或“new Object”生成的對象,而不是瀏覽器原生提供的對象。jQuery.isWindow():是否為window對象。jQuery.isXMLDoc():判斷一個DOM節點是否處于XML文檔之中。
總結
通過以上幾種方式,我們知道在不同的時候用不同的檢測方式,是一種有效的解決方案。
拓展
在number類型中,還有一種檢測是有窮數字的方法叫 isFinite(), 比如任何數字除以0,都為無窮大。Infinity,-Infinity,非數字都會被判為false
console.log(3/0); // Infinityconsole.log(-3/0); // -Infinityconsole.log(isFinite(3/0)); // falseconsole.log(isFinite(-3/0)); // falseconsole.log(isFinite(NaN)); // falseconsole.log(isFinite('haha')); // falseconsole.log(isFinite(true)); // true 在這里 true 被轉換成了數字 1console.log(isFinite(false)); // true 在這里 false 被轉換成了數字 0
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題:《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答