如何在javascript中對數據類型進行檢測

如何在javascript中對數據類型進行檢測？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

在javascript中數據類型

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

引用類型: 對象(Object)，函數(Function)，數組(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的原因, 這是在設計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); // true
console.log([].constructor === Array); // true
console.log({}.constructor === Object); // true
console.log(true.constructor === Boolean); // true
var 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); // AAA
console.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); // 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

此種方式也不安全，后面會有闡述，有關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); // 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 被轉換成了數字 1
console.log(isFinite(false)); // true 在這里 false 被轉換成了數字 0

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。