JavaScript中資料型別檢測的方法總結

這篇文章講述了JavaScript中對資料型別偵測的方法，大家對JavaScript中對資料型別偵測的方法不了解的話或是對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]"

透過這個例子，相較於你即明白了吧，是為了結果的直覺性。

以上就是本篇文章的所有內容，大家要是還不太了解的話，可以自己多實現兩邊就很容易掌握了哦！

相關推薦：

PHP資料類型偵測實例詳解

JavaScript中資料型別檢測方法的總結

以上是JavaScript中資料型別檢測的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！