js數據類型檢測方法(總結)

總結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類型檢測就基本說完了,如有不對的地方,歡迎評論指出,( ^_^ )/~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章