快捷導(dǎo)航

javascript中的數(shù)據(jù)類型檢測方法詳解

更新時間：2019年08月07日 08:46:53 作者：Johnny丶me

這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測方法,結(jié)合實例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測操作技巧,需要的朋友可以參考下

本文實例講述了javascript中的數(shù)據(jù)類型檢測方法。分享給大家供大家參考，具體如下：

在javascript中數(shù)據(jù)類型

值類型: 布爾(Boolean)，數(shù)值(Number)，字符(String)，空(Null)，未定義(Undefined)

引用類型: 對象(Object)，函數(shù)(Function)，數(shù)組(Array)，日期(Date)，正則(RegExp)等等。

檢測方式之 typeof

console.log(typeof undefined)//'undefined'
console.log(typeof null) // object
console.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的原因, 這是在設(shè)計ECMAscript時候存在的一些bug。

同樣是js不嚴謹?shù)囊环N表現(xiàn)形式。而數(shù)組也被檢測成為了一個對象，所以用這種方式不嚴謹。

檢測方式之 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 這兩個，其他的檢測都還是比較嚴謹?shù)摹?/p>

其中toString()函數(shù)是window的一個不可枚舉函數(shù)，繼承自O(shè)bject

還可以寫成這樣：

window.toString.call('hello'); // "[object String]"
Object.prototype.toString.call('hello'); // "[object String]"

檢測方式之 constructor

console.log('haha'.constructor == String); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(true.constructor === Boolean); // true
var a = 111; // 此處必須要用變量來代表數(shù)字，不然會報錯，從這也能看出來js是一門不嚴謹?shù)恼Z言
console.log(a.constructor === Number); // true

我們通過把實例的構(gòu)造函數(shù)指向其他地方，來改變它的constructor，就不安全了，不推薦使用如下代碼所示：

var AAA = function(){}; // 定義一個AAA對象
AAA.prototype = {
 say:function() {
  alert('hello');
 }
}
var arr1 = new Array(); // 定義一個數(shù)組
arr1.constructor = function AAA(){}; // 這里可以改變實例的constructor。
arr1.__proto__ = AAA.prototype; // 此處改變了原型鏈
console.log(arr1.constructor); // AAA
console.log(arr1 instanceof AAA); // true 原型鏈已經(jīng)改變，arr1 已經(jīng)不屬于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); // true
console.log({} instanceof Object); // true
console.log('haha' instanceof String); // false
console.log(true instanceof Boolean); // false
console.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); // true
console.log(b instanceof String); // true
console.log(t instanceof Boolean); // true

此種方式也不安全，后面會有闡述，有關(guān)instanceof 和 isPrototypeOf的區(qū)別，我們以后再來探討

還有一種is的方式比如：Array.isArray() 專門用來檢測數(shù)組

console.log(Array.isArray([])); // true

這個有兼容問題，IE8及其以下版本瀏覽器不被支持

而jQuery里面也給我們提供了一些解決方案

jQuery.isArray()：是否為數(shù)組。
jQuery.isEmptyObject()：是否為空對象（不含可枚舉的屬性）。
jQuery.isFunction()：是否為函數(shù)。
jQuery.isNumeric()：是否為數(shù)字。
jQuery.isPlainObject()：是否為使用“{}”或“new Object”生成的對象，而不是瀏覽器原生提供的對象。
jQuery.isWindow()：是否為window對象。
jQuery.isXMLDoc()：判斷一個DOM節(jié)點是否處于XML文檔之中。

總結(jié)

通過以上幾種方式，我們知道在不同的時候用不同的檢測方式，是一種有效的解決方案。

拓展

在number類型中，還有一種檢測是有窮數(shù)字的方法叫 isFinite(), 比如任何數(shù)字除以0，都為無窮大。Infinity，-Infinity，非數(shù)字都會被判為false

console.log(3/0); // Infinity
console.log(-3/0); // -Infinity
console.log(isFinite(3/0)); // false
console.log(isFinite(-3/0)); // false
console.log(isFinite(NaN)); // false
console.log(isFinite('haha')); // false
console.log(isFinite(true)); // true 在這里 true 被轉(zhuǎn)換成了數(shù)字 1
console.log(isFinite(false)); // true 在這里 false 被轉(zhuǎn)換成了數(shù)字 0

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: