總結JavaScript檢測數據類型的方法
在這之前,先說說js的類型,js有5大基本類型和一個複雜類型
5大基本類型:undefined,null,number,string,bollean
一個複雜類型:object
1.typeof
返回值類型:字符串
檢測如下:
/*5大基本類型*/
var a = 123;
console.log(typeof a == "number"); //true
var a = '123';
console.log(typeof a == "string"); //true
var a = true;
console.log(typeof a == "boolean"); //true
var a = undefined;
console.log(typeof a == "undefined"); //true
var a = null;
console.log(a == null); //true
/*複雜類型*/
var a = function(){};
console.log(typeof a == "function"); //true
對於其他引用類型的對象,typeof不能檢測區分,都會返回Object,如日期類型,正則表達式類型等,因此我們不能區分到底檢測的是什麼(用下文其他方法檢測)
typeof 方法函數封裝
function typeOf(obj){
return (obj === 'null') ? 'null' : (typeof obj)
}
在這最後,補充一個特殊的NaN
console.log(typeof NaN === "number"); //true
2.instanceof
instanceof 運算符可以用來檢測一個對象是不是另一個對象的實例
語法:object1 instanceof object2
參數:object1-一個對象,constructor-另一個對象
返回值類型: 布爾值Boolean
怎樣理解上面抽象的話呢?
也就是說,通過實例對象的原型鏈可以訪問構造函數對象的原型對象上,這也就是instanceof的工作原理,這也說明了,instanceof並不關心對象的本身結構,只是關心對象與構造函數的關係。
var a = new Date();
console.log(a instanceof Date); //true
console.log(a instanceof Object); //true
var a = new RegExp('123');
console.log(a instanceof RegExp); //true
console.log(a instanceof Object); //true
var a = function(){};
console.log(a instanceof Function); //true
console.log(a instanceof Object); //true
var a = [];
console.log(a instanceof Array); //true
console.log(a instanceof Object); //true
var a = {};
console.log(a instanceof Object); //true
這裏我列出了比較常用的實例,如果大家真的對instanceof比較關心的話,點擊這裏MDN文檔
3.constructor屬性
constructor 屬性返回對創建此對象的構造函數的引用。
返回值類型: 對象Object
這裏說明一點的是,我們平時創建的,如: var a = 1, var b = ‘123’…,其實都是引用他們相對應的構造函數從而創建出來他們對於的類型,而不是表面我們看到的直接創建。
各個類型檢驗方法如下:
/*5大基本類型*/
var a = 123;
console.log(a.constructor == Number); //true
var a = '123';
console.log(a.constructor == String); //true
var a = true;
console.log(a.constructor == Boolean); //true
var a = undefined;
console.log(a && a.constructor); //undefined
var a = null;
console.log(a && a.constructor); //null
/*複雜類型*/
var a = function(){};
console.log(a.constructor == Function); //true
var a = new Date();
console.log(a.constructor == Date); //true
var a = new Object();
console.log(a.constructor == Object); //true
var a = {};
console.log(a.constructor == Object); //true
var a = new Array();
console.log(a.constructor == Array); //true
var a = [];
console.log(a.constructor == Array); //true
var a = new RegExp('abc');
console.log(a.constructor == RegExp); //true
var a = /^abc$/;
console.log(a.constructor == RegExp); //true
4.toString()方法
這個方法檢測對象類型最安全,最準確的方法。
返回值類型:字符串String
/*toString 檢測類型函數*/
function toStringType(obj){
return Object.prototype.toString.call(obj).slice(8, -1);
}
/*5大基本類型*/
var a = 123;
console.log(toStringType(a)); //"Number"
var a = '123';
console.log(toStringType(a)); //"String"
var a = true;
console.log(toStringType(a)); //"Boolean"
var a = undefined;
console.log(toStringType(a)); //"Undefined"
var a = null;
console.log(toStringType(a)); //"Null"
/*複雜類型*/
var a = function(){};
console.log(toStringType(a)); //"Function"
var a = new Date();
console.log(toStringType(a)); //"Date"
var a = new Object();
console.log(toStringType(a)); //"Object"
var a = {};
console.log(toStringType(a)); //"Object"
var a = new Array();
console.log(toStringType(a)); //"Array"
var a = [];
console.log(toStringType(a)); //"Array"
var a = new RegExp('abc');
console.log(toStringType(a)); //"RegExp"
var a = /^abc$/;
console.log(toStringType(a)); //"RegExp"
如果你覺得返回的字符串大小寫比較麻煩的話,你可以全部轉化成小寫
代碼如下:
function toStringType(obj){
return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
}
到現這個地方,大家可能有疑惑。
var a = 123;
console.log(a.toString()); //"123"
1.爲什麼這樣寫,返回的是“123”?
答:因爲js中每個對象都預定義有自己的toString方法,類似於重寫了toString
2.文章中爲什麼要用call方法?作用是什麼?
答:call作用是改變作用域爲當前作用域,以文章爲例,即將Object的作用域執行環境變爲a的,
3.slice的作用?
var a = 123;
console.log(Object.prototype.toString.call(a)); //"[Object Number]"
通過這個例子,相比你即明白了吧,是爲了結果的直觀性。
這樣js類型檢測就基本說完了,如有不對的地方,歡迎評論指出,( ^_^ )/~~